CELE-17 feat: Update global context properties

applications/visualizer/frontend/src/components/LeftComponent.tsx

@@ -1,46 +1,33 @@
-import {Box, Button, Typography} from "@mui/material";
-import { useEffect, useState } from "react";
-import { Dataset, DatasetsService, HeathcheckService, Neuron, NeuronsService } from "../rest";
+import {Box, Typography} from "@mui/material";
 
-export default function LeftComponent() {
-    const [ready, setReady] = useState("Not ready")
-    const [dataset, setDataset] = useState<Dataset>()
-    const [allDataset, setAllDataset] = useState<Dataset[]>()
-    const [currentPage, setCurrentPage] = useState<{page: number, loadedElements: number, totalElements: number}>({page: 0, loadedElements: 0, totalElements: 1})
-    const [neurons, setNeurons] = useState<Neuron[]>([])
-
-    useEffect(() => {
-        HeathcheckService.ready().then(answer => setReady(answer))
-        DatasetsService.getDataset({dataset: 'white_1986_whole'}).then(answer => setDataset(answer))
-        DatasetsService.getAllDatasets().then(answer => setAllDataset(answer))
-        loadMoreNeurons()
-    }, [])
+import {useGlobalContext} from "../contexts/GlobalContext.tsx";
 
-    const loadMoreNeurons = async () => {
-        const page = currentPage.page + 1
-        const neuronPage = await NeuronsService.getAllCells({page: page})
-        setNeurons([...neurons, ...neuronPage.items])
-        setCurrentPage({page: page, loadedElements: neurons.length, totalElements: neuronPage.count})
-    }
+export default function LeftComponent() {
+    const {datasets, neurons} = useGlobalContext();
 
+    const datasetArray = datasets ? Object.values(datasets) : [];
+    const neuronArray = neurons ? Object.values(neurons) : [];
     return (
         <Box>
             <Typography variant="h1">Vite + React + Typescript</Typography>
-            <Typography variant="h3">API state: {ready}</Typography>
-            <Typography variant="h3">Dataset: {JSON.stringify(dataset)}</Typography>
             <Typography variant="h3">All datasets names:</Typography>
             <Box>
                 {
-                    allDataset?.map(x => <Typography key={x.name} variant="body1">{x.name}</Typography>)
+                    // Render each dataset name
+                    datasetArray.map(dataset => (
+                        <Typography key={dataset.id} variant="body1">{dataset.name}</Typography>
+                    ))
                 }
             </Box>
             <Typography variant="h3">Neurons:</Typography>
             <Box>
                 {
-                    neurons?.map(x => <Typography key={x.name} variant="body1">{x.name}</Typography>)
+                    // Render each neuron name
+                    neuronArray.map(neuron => (
+                        <Typography key={neuron.id} variant="body1">{neuron.name}</Typography>
+                    ))
                 }
-                <Button disabled={currentPage.loadedElements >= currentPage.totalElements} onClick={loadMoreNeurons}>Load more</Button>
             </Box>
         </Box>
-    )
+    );
 }

applications/visualizer/frontend/src/components/RightComponent.tsx

@@ -10,11 +10,8 @@ import {
 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 {workspaces, currentWorkspaceId, updateWorkspace, datasets, neurons} = useGlobalContext();
     const workspace = workspaces[currentWorkspaceId];
 
     function withWorkspaceUpdate(modifyWorkspace) {
@@ -44,6 +41,8 @@ export default function RightComponent() {
     const currentVisibility = workspace.viewers[viewerToToggle];
     const syncPair = ViewerSynchronizationPair.Graph_InstanceDetails;
     const currentSyncStatus = workspace.synchronizations[syncPair];
+    const testNeuron = 'ADAL'
+    const testDataset = "white_1986_jse"
 
     return (
         <Box>
@@ -57,14 +56,14 @@ export default function RightComponent() {
                     Activate Neuron
                 </Button>
                 <Button variant="contained" color="error"
-                        onClick={() => removeNeuronAndUpdate(testNeuron.id)}>
+                        onClick={() => removeNeuronAndUpdate(testNeuron)}>
                     Deactivate Neuron
                 </Button>
                 <Button variant="contained" color="primary" onClick={() => addDatasetAndUpdate(testDataset)}>
                     Activate Dataset
                 </Button>
                 <Button variant="contained" color="error"
-                        onClick={() => removeDatasetAndUpdate(testDataset.id)}>
+                        onClick={() => removeDatasetAndUpdate(testDataset)}>
                     Deactivate Dataset
                 </Button>
                 <Button
@@ -94,18 +93,18 @@ export default function RightComponent() {
 
             <Typography variant="subtitle2">Datasets:</Typography>
             <List>
-                {Object.entries(workspace.datasets).map(([id, dataset]) => (
+                {Array.from(workspace.datasets).map((id) => (
                     <ListItem key={id}>
-                        <ListItemText primary={`Name: ${dataset.name}`}/>
+                        <ListItemText primary={`Name: ${datasets[id]?.name || "Not found"}`}/>
                     </ListItem>
                 ))}
             </List>
 
             <Typography variant="subtitle2">Neurons:</Typography>
             <List>
-                {Object.entries(workspace.neurons).map(([id, neuron]) => (
+                {Array.from(workspace.neurons).map((id) => (
                     <ListItem key={id}>
-                        <ListItemText primary={`Label: ${neuron.label}`}/>
+                        <ListItemText primary={`Label: ${neurons[id]?.name || "Not found"}`}/>
                     </ListItem>
                 ))}
             </List>

applications/visualizer/frontend/src/contexts/GlobalContext.tsx

@@ -1,8 +1,12 @@
-import React, {createContext, useState, useContext, ReactNode} from 'react';
-import {Workspace} from "../models.ts";
+import React, {createContext, useState, useContext, ReactNode, useEffect} from 'react';
+import {Dataset, Neuron, Workspace} from "../models.ts";
+import {DatasetsService, NeuronsService} from "../rest";
+import {mapDatasetFromRequestToContext, mapNeuronFromRequestToContext} from "../helpers/mappers.ts";
 
 export interface GlobalContextType {
     workspaces: Record<string, Workspace>;
+    neurons: Record<string, Neuron>;
+    datasets: Record<string, Dataset>;
     currentWorkspaceId: string | undefined;
     addWorkspace: (workspace: Workspace) => void;
     updateWorkspace: (workspaceId: string, workspace: Workspace) => void;
@@ -18,8 +22,36 @@ const GlobalContext = createContext<GlobalContextType | undefined>(undefined);
 
 export const GlobalContextProvider: React.FC<GlobalContextProviderProps> = ({children}) => {
     const [workspaces, setWorkspaces] = useState<Record<string, Workspace>>({});
+    const [neurons, setNeurons] = useState<Record<string, Neuron>>({});
+    const [datasets, setDatasets] = useState<Record<string, Dataset>>({});
     const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string | undefined>(undefined);
 
+
+    useEffect(() => {
+        // Fetching Neurons
+        // FIXME: Get All Cells without pagination
+        NeuronsService.getAllCells({page: 1}).then(response => {
+            const neuronMap = response.items.reduce((acc, neuronRequest) => {
+                const neuron = mapNeuronFromRequestToContext(neuronRequest);
+                return {...acc, [neuron.id]: neuron};
+            }, {});
+            setNeurons(neuronMap);
+        }).catch(error => {
+            console.error('Failed to fetch neurons:', error);
+        });
+
+        // Fetching Datasets
+        DatasetsService.getAllDatasets().then(response => {
+            const datasetMap = response.reduce((acc, datasetRequest) => {
+                const dataset = mapDatasetFromRequestToContext(datasetRequest);
+                return {...acc, [dataset.id]: dataset};
+            }, {});
+            setDatasets(datasetMap);
+        }).catch(error => {
+            console.error('Failed to fetch datasets:', error);
+        });
+    }, []);
+
     const addWorkspace = (workspace: Workspace) => {
         setWorkspaces(prev => ({...prev, [workspace.id]: workspace}));
     };
@@ -43,7 +75,16 @@ export const GlobalContextProvider: React.FC<GlobalContextProviderProps> = ({chi
 
     return (
         <GlobalContext.Provider
-            value={{workspaces, currentWorkspaceId, addWorkspace, updateWorkspace, removeWorkspace, switchWorkspace}}>
+            value={{
+                workspaces,
+                neurons,
+                datasets,
+                currentWorkspaceId,
+                addWorkspace,
+                updateWorkspace,
+                removeWorkspace,
+                switchWorkspace
+            }}>
             {children}
         </GlobalContext.Provider>
     );

applications/visualizer/frontend/src/helpers/initialWorkspacesHelper.ts

@@ -17,17 +17,16 @@ export const createEmptyWorkspace = (name: string): Workspace => {
                 [ViewerType.EM]: false,
                 [ViewerType.InstanceDetails]: false,
             },
-            datasets: {},
-            neurons: {},
+            datasets: new Set<string>(),
+            neurons: new Set<string>(),
             synchronizations: {
                 [ViewerSynchronizationPair.Graph_InstanceDetails]: true,
                 [ViewerSynchronizationPair.Graph_ThreeD]: true,
                 [ViewerSynchronizationPair.ThreeD_EM]: true
             },
             neuronGroups: {},
             store: store,
-            layoutManager:
-            layoutManager,
+            layoutManager: layoutManager,
         };
 
     }

applications/visualizer/frontend/src/helpers/mappers.ts

@@ -0,0 +1,18 @@
+import {Dataset as DatasetApi, Neuron as NeuronApi} from "../rest";
+import {Dataset, Neuron} from "../models.ts";
+
+// Function to map Neuron from the request to the context format
+export function mapNeuronFromRequestToContext(neuron: NeuronApi): Neuron {
+    return {
+        id: neuron.name || neuron.nclass,
+        name: `${neuron.name}`
+    };
+}
+
+export function mapDatasetFromRequestToContext(dataset: DatasetApi): Dataset {
+    return {
+        id: dataset.id || dataset.name,
+        name: dataset.name,
+        neurons: new Set<Neuron>()  // TODO: Need to understand how to populate this
+    };
+}

applications/visualizer/frontend/src/helpers/workspacesHelper.ts

@@ -1,37 +1,31 @@
-import {Dataset, Neuron, NeuronGroup, ViewerSynchronizationPair, ViewerType, Workspace} from "../models.ts";
+import {NeuronGroup, ViewerSynchronizationPair, ViewerType, Workspace} from "../models.ts";
 
-export function activateNeuron(workspace: Workspace, neuron: Neuron): Workspace {
+export function activateNeuron(workspace: Workspace, neuronId: string): Workspace {
     return {
         ...workspace,
-        neurons: {
-            ...workspace.neurons,
-            [neuron.id]: neuron
-        }
+        neurons: new Set(workspace.neurons).add(neuronId)
     };
 }
 
 export function deactivateNeuron(workspace: Workspace, neuronId: string): Workspace {
-    const newNeurons = {...workspace.neurons};
-    delete newNeurons[neuronId];
+    const newNeurons = new Set(workspace.neurons);
+    newNeurons.delete(neuronId);
     return {
         ...workspace,
         neurons: newNeurons
     };
 }
 
-export function activateDataset(workspace: Workspace, dataset: Dataset): Workspace {
+export function activateDataset(workspace: Workspace, datasetId: string): Workspace {
     return {
         ...workspace,
-        datasets: {
-            ...workspace.datasets,
-            [dataset.id]: dataset
-        }
+        datasets: new Set(workspace.datasets).add(datasetId)
     };
 }
 
 export function deactivateDataset(workspace: Workspace, datasetId: string): Workspace {
-    const newDatasets = {...workspace.datasets};
-    delete newDatasets[datasetId];
+    const newDatasets = new Set(workspace.datasets);
+    newDatasets.delete(datasetId);
     return {
         ...workspace,
         datasets: newDatasets

applications/visualizer/frontend/src/models.ts

@@ -17,8 +17,8 @@ export interface Workspace {
     id: string;
     name: string;
     viewers: Record<ViewerType, boolean>;
-    datasets: Record<string, Dataset>;
-    neurons: Record<string, Neuron>;
+    datasets: Set<string>;
+    neurons: Set<string>;
     synchronizations: Record<ViewerSynchronizationPair, boolean>;
     neuronGroups: Record<string, NeuronGroup>;
 
@@ -34,7 +34,7 @@ export interface Dataset {
 
 export interface Neuron {
     id: string;
-    label: string;
+    name: string;
 }
 
 export interface NeuronGroup {