authzed · tstirrat15 · Feb 10, 2026 · Feb 10, 2026 · Feb 10, 2026 · Feb 10, 2026
diff --git a/TODO.md b/TODO.md
@@ -0,0 +1 @@
+- [ ] Make the same custom edge change to the written relations list
diff --git a/index.html b/index.html
@@ -1,13 +1,6 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
-    <link
-      href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css"
-      rel="stylesheet"
-      type="text/css"
-    />
-
     <script src="/wasm_exec.js"></script>
 
     <meta charset="utf-8" />

diff --git a/package.json b/package.json
@@ -40,11 +40,13 @@
     "@tanstack/react-router": "^1.119.0",
     "@tanstack/react-router-devtools": "^1.119.1",
     "@vercel/node": "^5.2.0",
+    "@xyflow/react": "^12.10.0",
     "ajv": "6.12.6",
     "ansi-to-html": "^0.7.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "d3-scale-chromatic": "^2.0.0",
+    "dagre": "^0.8.5",
     "dequal": "^2.0.2",
     "file-saver": "^2.0.5",
     "file-select-dialog": "^1.5.4",
@@ -82,6 +84,7 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/d3-scale-chromatic": "^3.0.0",
+    "@types/dagre": "^0.7.53",
     "@types/file-saver": "^2.0.5",
     "@types/jest": "^29.5.0",
     "@types/line-column": "^1.0.0",

diff --git a/src/components/panels/visualizer.tsx b/src/components/panels/visualizer.tsx
@@ -1,7 +1,6 @@
 import "react-reflex/styles.css";
 
-import { createStyles, darken, makeStyles, Theme } from "@material-ui/core/styles";
-import BubbleChartIcon from "@material-ui/icons/BubbleChart";
+import { Bubbles } from 'lucide-react'
 import { useNavigate } from "@tanstack/react-router";
 import monaco from "monaco-editor";
 
@@ -20,29 +19,25 @@
   }
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    tenantGraphContainer: {
-      width: "100%",
-      height: "100%",
-      backgroundColor: theme.palette.background.default,
+const darken = (_color: string, _amount: number) => "rgba(0, 0, 0, 0.1)"
+
+const backgroundStyles = {
       backgroundSize: "20px 20px",
+      backgroundColor: "default",
       backgroundImage: `
               linear-gradient(to right, ${darken(
-                theme.palette.background.default,
+                "default",
                 0.1,
               )} 1px, transparent 1px),
               linear-gradient(to bottom, ${darken(
-                theme.palette.background.default,
+                "default",
                 0.1,
               )} 1px, transparent 1px)
             `,
-    },
-  }),
-);
+    }
 
 export function VisualizerSummary() {
-  return <TabLabel icon={<BubbleChartIcon />} title="System Visualization" />;
+  return <TabLabel icon={<Bubbles />} title="System Visualization" />;
 }
 
 function isRelationship(
@@ -52,17 +47,15 @@
 }
 
 export function VisualizerPanel({
-  location,
   services,
   dimensions,
   editorPosition,
   currentItem,
 }: PanelProps & {
   dimensions?: { width: number; height: number };
-  editorPosition?: monaco.Position | undefined;
-  currentItem?: DataStoreItem | undefined;
+  editorPosition?: monaco.Position;
+  currentItem?: DataStoreItem;
 }) {
-  const classes = useStyles();
   const navigate = useNavigate();
 
   const handleBrowseRequested = (range?: TextRange) => {
@@ -75,17 +68,26 @@
     });
   };
 
+  const handleNodeClick = (namespace: string, objectId: string) => {
+    // Navigate to relationships tab
+    // In the future, this could highlight specific relationships in the editor
+    const relationshipsPath = DataStorePaths.Relationships();
+    navigate({
+      to: relationshipsPath,
+    });
+  };
+
   const relationships = services.localParseService.state.relationships
     .map((relFound) => relFound.parsed)
     .filter(isRelationship);
 
   return (
-    <div className={classes.tenantGraphContainer} style={{ height: dimensions?.height ?? 0 }}>
+    <div className="w-full h-full" style={dimensions?.height ? { height: dimensions.height } : undefined}>
       <TenantGraph
-        key={location}
         schema={services.localParseService.state.parsed}
         relationships={relationships}
         onBrowseRequested={handleBrowseRequested}
+        onNodeClick={handleNodeClick}
         active={
           editorPosition
             ? {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		- [ ] Make the same custom edge change to the written relations list