From 2434b68db4d8f86a2d614dc096a2c2cadcb38a91 Mon Sep 17 00:00:00 2001
From: Yuren Hao <97327730+YurenHao0426@users.noreply.github.com>
Date: Wed, 6 Aug 2025 02:11:54 -0700
Subject: fix: handle namespace and add proxy support

---
 src/components/Graph.tsx | 49 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/components/Graph.tsx

(limited to 'src/components/Graph.tsx')

diff --git a/src/components/Graph.tsx b/src/components/Graph.tsx
new file mode 100644
index 0000000..5e81b38
--- /dev/null
+++ b/src/components/Graph.tsx
@@ -0,0 +1,49 @@
+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" }}
+    />
+  );
+}
-- 
cgit v1.2.3