CELE-32 feat: Connect 2D Viewer with context

MetaCell · May 15, 2024 · 2549ae8 · 2549ae8
1 parent 70c8a0c
commit 2549ae8
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 12 deletions.
diff --git a/applications/visualizer/frontend/src/components/viewers/TwoD/TwoDViewer.tsx b/applications/visualizer/frontend/src/components/viewers/TwoD/TwoDViewer.tsx
@@ -4,27 +4,59 @@ import {useSelectedWorkspace} from "../../../hooks/useSelectedWorkspace.ts";
 
 const TwoDViewer = () => {
     const workspace = useSelectedWorkspace()
-    console.log(workspace.activeNeurons)
-
     const cyContainer = useRef(null);
+    const cyRef = useRef(null);
+
+    const updateGraphElements = (cy, workspace) => {
+        if (!workspace) return;
+
+        // Generate nodes and edges based on workspace.activeNeurons
+        const nodes = Object.values(workspace.activeNeurons).map(neuron => ({
+            group: 'nodes',
+            data: {id: neuron.name, label: neuron.name}
+        }));
+
+        // TODO: Mocked edges, replace with real data later
+        const edges = [];
+        if (nodes.length > 1) {
+            for (let i = 0; i < nodes.length - 1; i++) {
+                edges.push({
+                    group: 'edges',
+                    data: {
+                        id: `e${nodes[i].data.id}-${nodes[i + 1].data.id}`,
+                        source: nodes[i].data.id,
+                        target: nodes[i + 1].data.id
+                    }
+                });
+            }
+        }
+
+        const elements = [...nodes, ...edges];
+        cy.elements().remove(); // Remove all existing elements
+        cy.add(elements);       // Add new elements
+        cy.layout({             // Re-run layout
+            name: 'grid',
+            rows: 1
+        }).run();
+    };
 
+    // Initialize Cytoscape only once
     useEffect(() => {
         if (!cyContainer.current) return;
 
         const cy = cytoscape({
             container: cyContainer.current,
-            elements: [
-                {data: {id: 'a', label: 'Neuron A'}},
-                {data: {id: 'b', label: 'Neuron B'}},
-                {data: {id: 'ab', source: 'a', target: 'b'}}
-            ],
             style: [
                 {
                     selector: 'node',
                     style: {
                         'background-color': '#666',
                         'label': 'data(label)',
                         'color': '#000',
+                        'text-valign': 'center',
+                        'text-halign': 'center',
+                        'width': '45px',
+                        'height': '45px',
                     }
                 },
                 {
@@ -43,12 +75,20 @@ const TwoDViewer = () => {
                 rows: 1
             }
         });
+        cyRef.current = cy;
+        updateGraphElements(cy, workspace); // Initialize with existing workspace data
 
         return () => {
             cy.destroy();
         };
     }, []);
 
+    // Update graph when workspace changes
+    useEffect(() => {
+        if (!cyRef.current || !workspace) return;
+        updateGraphElements(cyRef.current, workspace);
+    }, [workspace]);
+
     return <div ref={cyContainer} style={{width: '100%', height: '100%'}}/>;
 };
 

diff --git a/applications/visualizer/frontend/src/main.tsx b/applications/visualizer/frontend/src/main.tsx
@@ -8,10 +8,8 @@ import {GlobalContextProvider} from "./contexts/GlobalContext.tsx";
 enableMapSet()
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
-        <GlobalContextProvider>
-            <App/>
-        </GlobalContextProvider>
-    </React.StrictMode>
+    <GlobalContextProvider>
+        <App/>
+    </GlobalContextProvider>
     ,
 )