Panel = { const jointSize = 5, rowHeight = 26, w = rowHeight * 0.6; const getJointPos = (nodes, w, h) => { const pos = {}; for (let i = 0; i < nodes.length;i++) { if (!pos[nodes[i].id]) pos[nodes[i].id] = {}; for (let j = i; j < nodes.length; j++) pos[nodes[i].id][nodes[j].id] = [-(j-i) * w, i * h + (j-i-1) * h / 2]; } return pos; }; const defaultHandlers = { onStart: noop, onStop: noop, onTimeout: noop, onAddLog: noop, onNetwork: noop, onLinkSelect: noop, onFocus: noop }; const Context = createContext(); const Joint = component(({ a, b }) => { const { pos, networks, selected, setSelected, handlers, changeNetwork } = useContext(Context); const fill = networks[a.id][b.id] > 0 ? 'hsl(0,0%,85%)' : 'white'; const highlight = selected && selected[0] == a.id && selected[1] == b.id; const sw = highlight ? 2 : 1; return jsx` setSelected([a.id,b.id]), [])} onMouseOut=${useCallback(() => setSelected(undefined), [])} onClick=${useCallback(() => handlers.onNetwork([a.id, b.id]) )} /> `; }); const Joints = component(() => { const { nodes } = useContext(Context); return g(arrays.mapcat(nodes, (a,i) => nodes.filter((_,j) => j > i).map(b => { return jsx`<${Joint} key="${a.id},${b.id}" a=${a} b=${b} />`; }))); }); const Links = component(() => { const { pos, nodes, selected } = useContext(Context); const links1 = nodes.map((n, i, a) => { if (i == a.length - 1) return null; const [x1, y1] = pos[n.id][n.id], [x2, y2] = pos[n.id][nodes[nodes.length-1].id]; return jsx``; }); const links2 = nodes.map((n, i) => { if (i == 0) return null; const [x1, y1] = pos[n.id][n.id], [x2, y2] = pos[nodes[0].id][n.id]; return jsx``; }); let linksHighlight; if (selected) { const [u, v] = selected; const a = pos[u][u], b = pos[u][v], c = pos[v][v]; linksHighlight = jsx``; } const linkEnds = nodes.map(({ id },i) => { const highlight = selected && (selected.some(v => v == id)); const [x, y] = pos[id][id]; const props = { key: i, x1: x, x2: x + rowHeight * (highlight ? 6 : 2) / 8, y1: y, y2: y, stroke: highlight ? 'hsl(0,0%,0%)' : 'hsl(0,0%,70%)', strokeWidth: 1.1 }; return jsx``; }); return jsx`<${Fragment}> ${links1} ${links2} ${linksHighlight} ${linkEnds} `; }); const textProps = { fontFamily: "Open Sans", textAnchor: "middle", alignmentBaseline: "central", style: { userSelect: 'none' }, fontSize: 8, fill: 'hsl(0,0%,100%)', stroke: 'white', strokeWidth: 0.6 }; const Lables = component(() => { const { pos, nodes, selected } = useContext(Context); return g(nodes.map((n,i) => { const highlight = selected && (selected[0] == n.id || selected[1] == n.id); const props = { stroke: 'black', strokeWidth: highlight ? 1 : 0.1 }; return jsx` ${n.id} `; })); }); const size = 12, gap = 24; const btnProps = { x: -size / 2, y: -size / 2, width: size, height: size, fill: 'transparent' }; const OpStartStop = component(({ node, setDesc, ...props }) => { const { handlers } = useContext(Context); const onStart = useCallback(() => { node.state == State.STOPPED && handlers.onStart(node); }, [node.state]); const onStop = useCallback(() => { node.state != State.STOPPED && handlers.onStop(node); }, [node.state]); const [active, setActive] = useState(false); const onMouseOver = useCallback(() => { setActive(true); handlers.onFocus(); setDesc(node.state == State.STOPPED ? 'start' : 'stop'); }, []); const onMouseOut = useCallback(() => (setActive(false), setDesc('')), []); const state = active ? 'active' : 'enabled'; const btn = node.state == State.STOPPED ? jsx`<${icons.Start} size=${size} state=${state} />` : jsx`<${icons.Stop} size=${size} state=${state} />`; const onClick = node.state == State.STOPPED ? onStart : onStop; return jsx` ${btn} `; }); const OpTimeout = component(({ node, setDesc, ...props }) => { const { handlers } = useContext(Context); const [active, setActive] = useState(false); const onMouseOver = useCallback(() => { if (node.state != State.STOPPED) { setActive(true); handlers.onFocus(); setDesc(node.state != State.LEADER ? 'start election' : 'send heartbeat'); } }, [node.state]); const onMouseOut = useCallback(() => (setActive(false), setDesc('')), []); const state = active ? 'active' : node.state != State.STOPPED ? 'enabled' : 'disabled'; const onClick = useCallback(() => { node.state != State.STOPPED && handlers.onTimeout(node); }, [node.state]); const cursor = node.state != State.STOPPED ? 'pointer' : 'auto'; return jsx` <${icons.Timeout} size=${size} state=${state} /> `; }); const OpAddLog = component(({ node, setDesc, ...props }) => { const { handlers } = useContext(Context); const [active, setActive] = useState(false); const onMouseOver = useCallback(() => { if (node.state == State.LEADER) { setActive(true); handlers.onFocus(); setDesc('add log entry'); }; }, [node.state]); const onMouseOut = useCallback(() => (setActive(false), setDesc('')), []); const state = active ? 'active' : node.state == State.LEADER ? 'enabled' : 'disabled'; const onClick = useCallback(() => { node.state == State.LEADER && handlers.onAddLog(node); }, [node.state]); const cursor = node.state == State.LEADER ? 'pointer' : 'auto'; return jsx` <${icons.AddLog} size=${size} state=${state} /> `; }); const NodeOps = component(({ node, ...props }) => { const [desc, setDesc] = useState(''); const textProps = { fontFamily: "Open Sans", alignmentBaseline: "central", style: { userSelect: 'none' }, fontSize: 12, fill: 'hsl(0,0%,30%)', }; return jsx` <${OpStartStop} node=${node} setDesc=${setDesc} transform="translate(${gap*0},0)" /> <${OpTimeout} node=${node} setDesc=${setDesc} transform="translate(${gap*1},0)" /> <${OpAddLog} node=${node} setDesc=${setDesc} transform="translate(${gap*2},0)" /> ${desc} `; }); const Ops = component(() => { const { nodes } = useContext(Context); const ops = nodes.map( (n, i) => jsx`<${NodeOps} key=${i} node=${n} transform=translate(0,${i * rowHeight}) />`) return jsx`${ops}`; }); return component(({ nodes, networks, handlers: handlers0, onLinkSelect }) => { const pos = getJointPos(nodes, w, rowHeight); const [selected, setSelected] = useState(); const handlers = { ...defaultHandlers, ...handlers0 }; const context = { pos, nodes, networks, selected, handlers, setSelected: useCallback(link => { setSelected(link); onLinkSelect(link); handlers.onFocus(); }, []) }; const w0 = (nodes.length - 1) * w + jointSize + 1 + rowHeight * 1.5 + 3 * gap + 100; return jsx`<${SVG} width=${w0} height=${nodes.length * rowHeight}> <${Context.Provider} value=${context}> <${Links} /> <${Joints} /> <${Lables} /> <${Ops} /> `; }); }