Enhance graph management and visualization features

Author: bastiion

bun.lock

@@ -9,7 +9,8 @@
   "scripts": {
     "dev": "bun --hot src/index.tsx",
     "start": "NODE_ENV=production bun src/index.tsx",
-    "build": "bun run build.ts"
+    "build": "bun run build.ts",
+    "test": "bun test"
   },
   "dependencies": {
     "3d-force-graph": "^1.79.1",
@@ -32,6 +33,7 @@
     "graphology-layout-forceatlas2": "^0.10.1",
     "js-yaml": "^4.1.1",
     "lucide-react": "^0.475.0",
+    "lz-string": "^1.5.0",
     "radix-ui": "^1.4.3",
     "react": "^19",
     "react-dom": "^19",

package.json

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { ForceGraph3DComponent } from "./components/ForceGraph3D";
 import { CosmographGraph } from "./components/CosmographGraph";
 import { SigmaGraph } from "./components/SigmaGraph";
@@ -9,12 +10,45 @@ import { SettingsFAB } from "./components/SettingsFAB";
 import { SettingsPanel } from "./components/SettingsPanel";
 import { ErrorBoundary } from "./components/ErrorBoundary";
 import { useGraphStore } from "./store/graphStore";
+import { decode, stripSimulationState } from "./lib/graphHash";
 import "./index.css";
 
+function useHashGraphSync() {
+  const setSharedGraph = useGraphStore((state) => state.setSharedGraph);
+
+  useEffect(() => {
+    const applyHash = () => {
+      const hash = window.location.hash.slice(1);
+      if (!hash) {
+        setSharedGraph(null);
+        return;
+      }
+      try {
+        const { graph, metadata } = decode(hash);
+        const cleanGraph = stripSimulationState(graph);
+        setSharedGraph({
+          graph: JSON.parse(JSON.stringify(cleanGraph)),
+          metadata,
+        });
+      } catch (err) {
+        console.warn("Failed to decode graph from URL hash:", err);
+        setSharedGraph(null);
+      }
+    };
+
+    applyHash();
+    window.addEventListener("hashchange", applyHash);
+    return () => window.removeEventListener("hashchange", applyHash);
+  }, [setSharedGraph]);
+}
+
 export function App() {
+  useHashGraphSync();
   const visualizationMode = useGraphStore((state) => state.visualizationMode);
   const currentGraphId = useGraphStore((state) => state.currentGraphId);
+  const sharedGraph = useGraphStore((state) => state.sharedGraph);
   const setSelectedNode = useGraphStore((state) => state.setSelectedNode);
+  const graphKey = sharedGraph ? "url" : currentGraphId;
 
   const handleCloseNodeInfo = () => {
     setSelectedNode(null);
@@ -26,11 +60,11 @@ export function App() {
         {/* Visualization - Fullscreen (3D, Cosmo, or 2D based on mode) */}
         {/* Key includes currentGraphId to force remount on graph change */}
         {visualizationMode === "3d" ? (
-          <ForceGraph3DComponent key={`3d-${currentGraphId}`} />
+          <ForceGraph3DComponent key={`3d-${graphKey}`} />
         ) : visualizationMode === "cosmo" ? (
-          <CosmographGraph key={`cosmo-${currentGraphId}`} />
+          <CosmographGraph key={`cosmo-${graphKey}`} />
         ) : (
-          <SigmaGraph key={`2d-${currentGraphId}`} />
+          <SigmaGraph key={`2d-${graphKey}`} />
         )}
 
         {/* Graph Selector - Top left */}

src/App.tsx

@@ -0,0 +1,57 @@
+import NiceModal, { useModal } from "@ebay/nice-modal-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import type { GraphFile } from "@/store/graphStore";
+
+export interface ConfirmDeleteGraphModalProps {
+  graph: GraphFile;
+  onConfirm: () => void;
+}
+
+export const ConfirmDeleteGraphModal = NiceModal.create<ConfirmDeleteGraphModalProps>(() => {
+  const modal = useModal();
+  const { graph, onConfirm } = modal.args ?? { graph: null, onConfirm: () => {} };
+
+  const handleConfirm = () => {
+    onConfirm();
+    modal.hide();
+    setTimeout(() => modal.remove(), 200);
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      modal.hide();
+      setTimeout(() => modal.remove(), 200);
+    }
+  };
+
+  if (!graph) return null;
+
+  return (
+    <Dialog open={modal.visible} onOpenChange={handleOpenChange}>
+      <DialogContent showCloseButton={true}>
+        <DialogHeader>
+          <DialogTitle>Delete graph</DialogTitle>
+          <DialogDescription>
+            Remove &quot;{graph.metadata?.name ?? "Unknown"}&quot; from local storage? This cannot be undone.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="gap-2 sm:gap-0">
+          <Button variant="outline" onClick={() => handleOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button variant="destructive" onClick={handleConfirm}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+});

src/components/ConfirmDeleteGraphModal.tsx

@@ -9,7 +9,7 @@ import type { GraphNode } from "@/store/graphStore";
 // We pass raw points/links with pointIndexBy and link index columns (like the official Basic usage example).
 
 export function CosmographGraph() {
-  const graphData = useGraphStore((state) => state.graphData);
+  const graphData = useGraphStore((state) => state.sharedGraph?.graph ?? state.graphData);
   const searchQuery = useGraphStore((state) => state.searchQuery);
   const setSelectedNode = useGraphStore((state) => state.setSelectedNode);
 

src/components/CosmographGraph.tsx

@@ -15,7 +15,7 @@ export function ForceGraph3DComponent() {
   const containerRef = useRef<HTMLDivElement>(null);
   const graphRef = useRef<ForceGraphInstance | null>(null);
 
-  const graphData = useGraphStore((state) => state.graphData);
+  const graphData = useGraphStore((state) => state.sharedGraph?.graph ?? state.graphData);
   const searchQuery = useGraphStore((state) => state.searchQuery);
   const setSelectedNode = useGraphStore((state) => state.setSelectedNode);
   const settings = useSettingsStore((state) => state.settings);
@@ -24,11 +24,14 @@ export function ForceGraph3DComponent() {
   useEffect(() => {
     if (!containerRef.current) return;
 
+    // Pass a clone so the library mutates it instead of the store (keeps sharedGraph/graphData pristine)
+    const dataForLibrary = JSON.parse(JSON.stringify(graphData));
+
     // Initialize the force graph with CSS2DRenderer for HTML labels
     const graph = ForceGraph3D({
       extraRenderers: [new CSS2DRenderer()]
     })(containerRef.current)
-      .graphData(graphData)
+      .graphData(dataForLibrary)
       .nodeLabel("name")
       .nodeColor((node: any) => getGroupColor(node.group))
       .nodeOpacity(settings.nodeOpacity)
@@ -64,7 +67,7 @@ export function ForceGraph3DComponent() {
         return troikaText;
       })
       .linkThreeObjectExtend(true)
-      .linkPositionUpdate((obj: THREE.Object3D, { start, end }: any, link: any) => {
+      .linkPositionUpdate((obj: THREE.Object3D & { sync: () => void, fontSize: number }, { start, end }: any, link: any) => {
         // Midpoint
         const mid = new THREE.Vector3(
           (start.x + end.x) / 2,
@@ -84,6 +87,7 @@ export function ForceGraph3DComponent() {
         const distance = mid.distanceTo(camera.position);
         obj.visible = distance < EDGE_LABEL_LOD_THRESHOLD;
 
+
         // Optional: scale font size inversely with distance for depth cue
         if (obj.visible && typeof obj.sync === "function") {
           const baseSize = settings.linkLabelFontSize * 0.25;
@@ -128,8 +132,8 @@ export function ForceGraph3DComponent() {
     const query = searchQuery.toLowerCase();
 
     if (!query) {
-      // Reset all nodes to visible
-      graphRef.current.graphData(graphData);
+      // Reset all nodes to visible (pass clone so library does not mutate store)
+      graphRef.current.graphData(JSON.parse(JSON.stringify(graphData)));
       return;
     }
 
@@ -143,14 +147,13 @@ export function ForceGraph3DComponent() {
     // Filter links to only show connections between visible nodes
     const filteredLinks = graphData.links.filter(
       (link: any) =>
-        filteredNodeIds.has(link.source.id || link.source) &&
-        filteredNodeIds.has(link.target.id || link.target)
+        filteredNodeIds.has(link.source?.id ?? link.source) &&
+        filteredNodeIds.has(link.target?.id ?? link.target)
     );
 
-    graphRef.current.graphData({
-      nodes: filteredNodes,
-      links: filteredLinks,
-    });
+    graphRef.current.graphData(
+      JSON.parse(JSON.stringify({ nodes: filteredNodes, links: filteredLinks }))
+    );
   }, [searchQuery, graphData]);
 
   return (