CELE-17 feat: Add usage example for helper functions

MetaCell · Apr 23, 2024 · 71b5aff · 71b5aff
1 parent 9e15584
commit 71b5aff
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 29 deletions.
diff --git a/applications/visualizer/frontend/src/components/RightComponent.tsx b/applications/visualizer/frontend/src/components/RightComponent.tsx
@@ -1,16 +1,24 @@
 import {Box, Button, List, ListItem, ListItemText, Typography} from "@mui/material";
 import {useGlobalContext} from "../contexts/GlobalContext.tsx";
-import {activateNeuron, deactivateNeuron} from "../helpers/workspacesHelper.ts";
+import {
+    activateDataset,
+    activateNeuron,
+    changeViewerVisibility,
+    deactivateDataset,
+    deactivateNeuron, updateViewerSynchronizationStatus
+} from "../helpers/workspacesHelper.ts";
+import {ViewerSynchronizationPair, ViewerType} from "../models.ts";
 
 
 const testNeuron = {id: 'neuron3', label: 'Neuron 3'};
+const testDataset = {id: 'dataset1', name: 'Dataset 1'};
 
 export default function RightComponent() {
     const {workspaces, currentWorkspaceId, updateWorkspace} = useGlobalContext();
     const workspace = workspaces[currentWorkspaceId];
 
     function withWorkspaceUpdate(modifyWorkspace) {
-        return function (workspace, ...args) {
+        return function (...args) {
             const updatedWorkspace = modifyWorkspace(workspace, ...args);
             updateWorkspace(workspace.id, updatedWorkspace);
             return updatedWorkspace;
@@ -19,6 +27,10 @@ export default function RightComponent() {
 
     const addNeuronAndUpdate = withWorkspaceUpdate(activateNeuron);
     const removeNeuronAndUpdate = withWorkspaceUpdate(deactivateNeuron);
+    const addDatasetAndUpdate = withWorkspaceUpdate(activateDataset);
+    const removeDatasetAndUpdate = withWorkspaceUpdate(deactivateDataset);
+    const toggleViewerVisibility = withWorkspaceUpdate(changeViewerVisibility);
+    const toggleSyncStatus = withWorkspaceUpdate(updateViewerSynchronizationStatus);
 
     if (!workspace) {
         return (
@@ -28,6 +40,10 @@ export default function RightComponent() {
         );
     }
 
+    const viewerToToggle = ViewerType.Graph;
+    const currentVisibility = workspace.viewers[viewerToToggle];
+    const syncPair = ViewerSynchronizationPair.Graph_InstanceDetails;
+    const currentSyncStatus = workspace.synchronizations[syncPair];
 
     return (
         <Box>
@@ -37,20 +53,41 @@ export default function RightComponent() {
 
 
             <Box>
-                <Button variant="contained" color="primary" onClick={() => addNeuronAndUpdate(workspace, testNeuron)}>
-                    Add Neuron
+                <Button variant="contained" color="primary" onClick={() => addNeuronAndUpdate(testNeuron)}>
+                    Activate Neuron
                 </Button>
                 <Button variant="contained" color="error"
-                        onClick={() => removeNeuronAndUpdate(workspace, testNeuron.id)}>
-                    Remove Neuron
+                        onClick={() => removeNeuronAndUpdate(testNeuron.id)}>
+                    Deactivate Neuron
+                </Button>
+                <Button variant="contained" color="primary" onClick={() => addDatasetAndUpdate(testDataset)}>
+                    Activate Dataset
+                </Button>
+                <Button variant="contained" color="error"
+                        onClick={() => removeDatasetAndUpdate(testDataset.id)}>
+                    Deactivate Dataset
+                </Button>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={() => toggleViewerVisibility(viewerToToggle, !currentVisibility)}
+                >
+                    Toggle {ViewerType.Graph} Viewer
+                </Button>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={() => toggleSyncStatus(syncPair, !currentSyncStatus)}
+                >
+                    Toggle Synchronization {syncPair}
                 </Button>
             </Box>
 
             <Typography variant="subtitle2">Viewers:</Typography>
             <List>
-                {Object.entries(workspace.viewers).map(([id, viewer]) => (
-                    <ListItem key={id}>
-                        <ListItemText primary={`Type: ${viewer.type}`} secondary={`Visible: ${viewer.isVisible}`}/>
+                {Object.entries(workspace.viewers).map(([type, isVisible]) => (
+                    <ListItem key={type}>
+                        <ListItemText primary={`${type}: ${isVisible}`}/>
                     </ListItem>
                 ))}
             </List>

diff --git a/applications/visualizer/frontend/src/helpers/initialWorkspacesHelper.ts b/applications/visualizer/frontend/src/helpers/initialWorkspacesHelper.ts
@@ -11,7 +11,12 @@ export const createEmptyWorkspace = (name: string): Workspace => {
         return {
             id: workspaceId,
             name: name,
-            viewers: {},
+            viewers: {
+                [ViewerType.Graph]: true,
+                [ViewerType.ThreeD]: true,
+                [ViewerType.EM]: false,
+                [ViewerType.InstanceDetails]: false,
+            },
             datasets: {},
             neurons: {},
             synchronizations: {

diff --git a/applications/visualizer/frontend/src/helpers/workspacesHelper.ts b/applications/visualizer/frontend/src/helpers/workspacesHelper.ts
@@ -1,4 +1,4 @@
-import {Dataset, Neuron, NeuronGroup, ViewerSynchronizationPair, Workspace} from "../models.ts";
+import {Dataset, Neuron, NeuronGroup, ViewerSynchronizationPair, ViewerType, Workspace} from "../models.ts";
 
 export function activateNeuron(workspace: Workspace, neuron: Neuron): Workspace {
     return {
@@ -38,18 +38,15 @@ export function deactivateDataset(workspace: Workspace, datasetId: string): Work
     };
 }
 
-export function changeViewerVisibility(workspace: Workspace, viewerId: string, isVisible: boolean): Workspace {
-    if (!workspace.viewers[viewerId]) {
+export function changeViewerVisibility(workspace: Workspace, viewerId: ViewerType, isVisible: boolean): Workspace {
+    if (workspace.viewers[viewerId] === undefined) {
         throw new Error('Viewer not found');
     }
     return {
         ...workspace,
         viewers: {
             ...workspace.viewers,
-            [viewerId]: {
-                ...workspace.viewers[viewerId],
-                isVisible: isVisible
-            }
+            [viewerId]: isVisible,
         }
     };
 }
@@ -70,17 +67,21 @@ export function addNeuronToGroup(workspace: Workspace, neuronId: string, groupId
     if (!neuron) {
         throw new Error('Neuron not found');
     }
-    if (!workspace.neuronGroups[groupId]) {
+    const group = workspace.neuronGroups[groupId];
+    if (!group) {
         throw new Error('Neuron group not found');
     }
 
+    const updatedNeurons = new Set(group.neurons);
+    updatedNeurons.add(neuronId);
+
     return {
         ...workspace,
-        neurons: {
-            ...workspace.neurons,
-            [neuronId]: {
-                ...neuron,
-                groupId: groupId
+        neuronGroups: {
+            ...workspace.neuronGroups,
+            [groupId]: {
+                ...group,
+                neurons: updatedNeurons
             }
         }
     };

diff --git a/applications/visualizer/frontend/src/models.ts b/applications/visualizer/frontend/src/models.ts
@@ -16,7 +16,7 @@ export enum ViewerSynchronizationPair {
 export interface Workspace {
     id: string;
     name: string;
-    viewers: Record<string, Viewer>;
+    viewers: Record<ViewerType, boolean>;
     datasets: Record<string, Dataset>;
     neurons: Record<string, Neuron>;
     synchronizations: Record<ViewerSynchronizationPair, boolean>;
@@ -26,11 +26,6 @@ export interface Workspace {
     layoutManager: unknown;
 }
 
-interface Viewer {
-    type: ViewerType;
-    isVisible: boolean;
-}
-
 export interface Dataset {
     id: string;
     name: string;