sharedstate 1.1.3

Sync heavily read state across many servers
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

import ReactFlow, { Background, Controls, Edge, Node, Position } from "reactflow";
import type { ConnectionView, NodeView } from "../types";

interface Props {
  nodes: NodeView[];
  connections: ConnectionView[];
  selectedAddress: number | null;
  onSelect: (address: number | null) => void;
}

const statusLabels: Record<string, string> = {
  offline: "offline",
  isolated: "isolated",
  noLeader: "no leader",
  leading: "leading",
  connected: "connected"
};

function layout(index: number, count: number) {
  const radius = Math.max(180, Math.min(360, count * 54));
  const angle = count <= 1 ? 0 : (Math.PI * 2 * index) / count - Math.PI / 2;
  return {
    x: Math.cos(angle) * radius + 430,
    y: Math.sin(angle) * radius + 310
  };
}

export function ClusterGraph({ nodes, connections, selectedAddress, onSelect }: Props) {
  const flowNodes: Node[] = nodes.map((node, index) => ({
    id: String(node.address),
    type: "default",
    position: layout(index, nodes.length),
    sourcePosition: Position.Right,
    targetPosition: Position.Left,
    className: [
      "flow-node",
      `status-${node.status}`,
      node.can_lead ? "can-lead-node" : "follower-node",
      selectedAddress === node.address ? "selected-node" : ""
    ].join(" "),
    data: {
      label: (
        <div className="node-shell">
          <div className="node-topline">
            <div className="node-address">{node.address}</div>
            <div className={`node-role ${node.can_lead ? "leader-capable" : "follower-role"}`}>
              {node.can_lead ? "can lead" : "follower"}
            </div>
          </div>
          <div className="node-line">leader {node.leader ?? "none"}</div>
          <div className="node-status">{statusLabels[node.status]}</div>
        </div>
      )
    }
  }));

  const flowEdges: Edge[] = connections.map((connection) => {
    const relatedToSelection =
      selectedAddress == null || connection.source === selectedAddress || connection.target === selectedAddress;
    const classes = [connection.blocked ? "blocked-edge" : "active-edge"];
    if (!relatedToSelection) {
      classes.push("muted-edge");
    } else if (selectedAddress != null) {
      classes.push("selected-related-edge");
    }

    return {
      id: `${connection.source}-${connection.target}`,
      source: String(connection.source),
      target: String(connection.target),
      animated: !connection.blocked && relatedToSelection,
      className: classes.join(" "),
      label: connection.blocked ? "blocked" : undefined
    };
  });

  return (
    <div className="graph-surface">
      <ReactFlow
        nodes={flowNodes}
        edges={flowEdges}
        fitView
        minZoom={0.25}
        maxZoom={1.7}
        onNodeClick={(_, node) => onSelect(Number(node.id))}
        onPaneClick={() => onSelect(null)}
      >
        <Background color="#27313a" gap={22} size={1} />
        <Controls />
      </ReactFlow>
      {nodes.length === 0 && <div className="empty-graph">Add a node to start the cluster lab.</div>}
    </div>
  );
}