47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { apiAuth } from "./api";
|
|
import { GraphCanvas, GraphCanvasRef, GraphEdge, GraphNode, useSelection } from "reagraph";
|
|
|
|
interface NetworkData {
|
|
nodes: GraphNode[],
|
|
edges: GraphEdge[],
|
|
}
|
|
|
|
export const GraphComponent = () => {
|
|
const [data, setData] = useState({ nodes: [], edges: [] } as NetworkData);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
async function loadData() {
|
|
setLoading(true);
|
|
await apiAuth("analysis/graph_json", null)
|
|
.then(json => json as Promise<NetworkData>).then(json => { setData(json) })
|
|
setLoading(false);
|
|
}
|
|
|
|
useEffect(() => { loadData() }, [])
|
|
|
|
const graphRef = useRef<GraphCanvasRef | null>(null);
|
|
|
|
const { selections, actives, onNodeClick, onCanvasClick } = useSelection({
|
|
ref: graphRef,
|
|
nodes: data.nodes,
|
|
edges: data.edges,
|
|
pathSelectionType: 'out'
|
|
});
|
|
|
|
return (
|
|
<GraphCanvas
|
|
draggable
|
|
ref={graphRef}
|
|
nodes={data.nodes}
|
|
edges={data.edges}
|
|
selections={selections}
|
|
actives={actives}
|
|
onCanvasClick={onCanvasClick}
|
|
onNodeClick={onNodeClick}
|
|
/>
|
|
);
|
|
|
|
}
|
|
|