56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
|
import { useMemo } from "react";
|
||
|
|
import ReactFlow, {
|
||
|
|
Background,
|
||
|
|
Controls,
|
||
|
|
type NodeMouseHandler,
|
||
|
|
ReactFlowProvider,
|
||
|
|
} from "reactflow";
|
||
|
|
import "reactflow/dist/style.css";
|
||
|
|
import type { StateResponse, Topology } from "../api";
|
||
|
|
import { layout } from "../layout";
|
||
|
|
import { MapNode } from "./MapNode";
|
||
|
|
|
||
|
|
const nodeTypes = { pipeline: MapNode };
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
topology: Topology;
|
||
|
|
state: StateResponse | null;
|
||
|
|
pathNodeIds: Set<string> | null;
|
||
|
|
onNodeClick: (nodeId: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
// The center pipeline map. Nodes are dagre-laid from the topology; live state
|
||
|
|
// colors them; clicking a node filters the task list. Multiple trees (processes
|
||
|
|
// off intake) lay out as separate lanes automatically.
|
||
|
|
export function PipelineMap({ topology, state, pathNodeIds, onNodeClick }: Props) {
|
||
|
|
const { nodes, edges } = useMemo(
|
||
|
|
() => layout(topology, state?.nodes ?? {}, pathNodeIds),
|
||
|
|
[topology, state, pathNodeIds],
|
||
|
|
);
|
||
|
|
|
||
|
|
const handleNodeClick: NodeMouseHandler = (_evt, node) => onNodeClick(node.id);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="map-pane" aria-label="pipeline map">
|
||
|
|
<ReactFlowProvider>
|
||
|
|
<ReactFlow
|
||
|
|
nodes={nodes}
|
||
|
|
edges={edges}
|
||
|
|
nodeTypes={nodeTypes}
|
||
|
|
fitView
|
||
|
|
nodesDraggable={false}
|
||
|
|
nodesConnectable={false}
|
||
|
|
elementsSelectable
|
||
|
|
onNodeClick={handleNodeClick}
|
||
|
|
proOptions={{ hideAttribution: true }}
|
||
|
|
minZoom={0.3}
|
||
|
|
maxZoom={1.6}
|
||
|
|
>
|
||
|
|
<Background color="#222a36" gap={22} />
|
||
|
|
<Controls showInteractive={false} />
|
||
|
|
</ReactFlow>
|
||
|
|
</ReactFlowProvider>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|