diff options
| author | blackhao <13851610112@163.com> | 2025-08-22 02:51:50 -0500 |
|---|---|---|
| committer | blackhao <13851610112@163.com> | 2025-08-22 02:51:50 -0500 |
| commit | 4aab4087dc97906d0b9890035401175cdaab32d4 (patch) | |
| tree | 4e2e9d88a711ec5b1cfa02e8ac72a55183b99123 /src/components | |
| parent | afa8f50d1d21c721dabcb31ad244610946ab65a3 (diff) | |
2.0
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Graph.tsx | 49 |
1 files changed, 0 insertions, 49 deletions
diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx deleted file mode 100644 index 5e81b38..0000000 --- a/src/components/Graph.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import CytoscapeComponent from "react-cytoscapejs"; -import cytoscape from "cytoscape"; -import dagre from "cytoscape-dagre"; -import { useMemo } from "react"; - -cytoscape.use(dagre); - -type Catalog = Record<string, string[]>; - -export default function Graph({ catalog }: { catalog: Catalog }) { - const elements = useMemo(() => { - const els: any[] = []; - Object.keys(catalog).forEach(id => { - els.push({ data: { id } }); - catalog[id].forEach(p => - els.push({ - data: { id: `${p}->${id}`, source: p, target: id } - }) - ); - }); - return els; - }, [catalog]); - - return ( - <CytoscapeComponent - elements={elements} - stylesheet={[ - { - selector: "node", - style: { - "background-color": "#3182bd", - label: "data(id)", - color: "#fff" - } - }, - { - selector: "edge", - style: { - width: 2, - "target-arrow-shape": "triangle", - "curve-style": "bezier" - } - } - ]} - layout={{ name: "dagre", rankDir: "TB", nodeSep: 30, rankSep: 50 }} - style={{ width: "100%", height: "90vh" }} - /> - ); -} |
