CELE-32 feat: Connect start from template

applications/visualizer/frontend/settings/templateWorkspaceSettings.ts

@@ -0,0 +1,2 @@
+export const TEMPLATE_ACTIVE_DATASETS = new Set(["white_1986_whole"])
+export const TEMPLATE_ACTIVE_NEURONS = new Set(["ASEL", "AIYL", "AIYR"])

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

@@ -1,21 +1,36 @@
-import { Typography, Card, CardContent, CardActionArea, Grid, Container, Box, AppBar, Toolbar, Button } from '@mui/material';
-import { useGlobalContext } from "../contexts/GlobalContext.tsx";
+import {
+    Typography,
+    Card,
+    CardContent,
+    CardActionArea,
+    Grid,
+    Container,
+    Box,
+    AppBar,
+    Toolbar,
+    Button
+} from '@mui/material';
+import {useGlobalContext} from "../contexts/GlobalContext.tsx";
 import footerImage from '../assets/summary-neurons.png';
+import {TEMPLATE_ACTIVE_DATASETS, TEMPLATE_ACTIVE_NEURONS} from "../../settings/templateWorkspaceSettings.ts";
 
 function AppLauncher() {
 
-    const { workspaces, addWorkspace, setCurrentWorkspace } = useGlobalContext();
+    const {workspaces, createWorkspace, setCurrentWorkspace} = useGlobalContext();
 
 
     const handleTemplateClick = () => {
-        console.log('Template option clicked');
+        const workspaceId = `workspace-${Date.now()}`;
+        const workspaceName = `Template Workspace ${Object.keys(workspaces).length + 1}`;
+        createWorkspace(workspaceId, workspaceName, TEMPLATE_ACTIVE_DATASETS, TEMPLATE_ACTIVE_NEURONS)
+        setCurrentWorkspace(workspaceId)
     };
 
     const handleBlankClick = () => {
         const workspaceId = `workspace-${Date.now()}`;
         const workspaceName = `Workspace ${Object.keys(workspaces).length + 1}`;
 
-        addWorkspace(workspaceId, workspaceName)
+        createWorkspace(workspaceId, workspaceName)
         setCurrentWorkspace(workspaceId)
     };
 
@@ -31,7 +46,7 @@ function AppLauncher() {
                         <Typography
                             variant="h6"
                             component="div"
-                            sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
+                            sx={{flexGrow: 1, display: {xs: 'none', sm: 'block'}}}
                         >
                         </Typography>
                         <Button color='secondary' variant='outlined'>About Zhen Lab</Button>
@@ -43,7 +58,8 @@ function AppLauncher() {
                             Welcome to C. Elegans
                         </Typography>
                         <Typography variant="h6" component="p">
-                            Explore, query and visualize C. elegans datasets. To get started, choose from one of the options below.
+                            Explore, query and visualize C. elegans datasets. To get started, choose from one of the
+                            options below.
                         </Typography>
                     </Box>
                     <Container className='MuiContainer-center'>
@@ -54,11 +70,12 @@ function AppLauncher() {
                                     <CardActionArea onClick={handleTemplateClick}>
                                         <CardContent>
                                             <Box>
-                                               <Typography variant='h4'> Start with a simple dataset</Typography>
-                                               <Typography className='success' variant='caption'>Simple</Typography>
+                                                <Typography variant='h4'> Start with a simple dataset</Typography>
+                                                <Typography className='success' variant='caption'>Simple</Typography>
                                             </Box>
                                             <Typography variant="body2">
-                                                Start exploring the application without a particular dataset in mind. We’ll load a simple dataset for you to start exploring.
+                                                Start exploring the application without a particular dataset in mind.
+                                                We’ll load a simple dataset for you to start exploring.
                                             </Typography>
                                         </CardContent>
                                     </CardActionArea>
@@ -69,11 +86,12 @@ function AppLauncher() {
                                     <CardActionArea onClick={handleBlankClick}>
                                         <CardContent>
                                             <Box>
-                                               <Typography variant='h4'>Blank canvas</Typography>
-                                               <Typography className="info" variant='caption'>Advanced</Typography>
+                                                <Typography variant='h4'>Blank canvas</Typography>
+                                                <Typography className="info" variant='caption'>Advanced</Typography>
                                             </Box>
                                             <Typography variant="body2">
-                                            Start with a blank canvas and select the datasets and neurons of your choice.
+                                                Start with a blank canvas and select the datasets and neurons of your
+                                                choice.
                                             </Typography>
                                         </CardContent>
                                     </CardActionArea>
@@ -84,18 +102,20 @@ function AppLauncher() {
                                     <CardActionArea onClick={handlePasteUrlClick}>
                                         <CardContent>
                                             <Box>
-                                               <Typography variant='h4'>Paste URL</Typography>
+                                                <Typography variant='h4'>Paste URL</Typography>
                                             </Box>
                                             <Typography variant="body2">
-                                                Paste URL from your pre-designed view or from one that your collaborators sent to you
+                                                Paste URL from your pre-designed view or from one that your
+                                                collaborators sent to you
                                             </Typography>
                                         </CardContent>
                                     </CardActionArea>
                                 </Card>
                             </Grid>
                             <Grid item xs={12}>
                                 <Box textAlign="center">
-                                    <Button className='MuiButton-summary'>Summary of available datasets and neurons</Button>
+                                    <Button className='MuiButton-summary'>Summary of available datasets and
+                                        neurons</Button>
                                 </Box>
                             </Grid>
                         </Grid>

applications/visualizer/frontend/src/components/viewers/ThreeD/SceneControls.tsx

@@ -6,8 +6,6 @@ import HouseIcon from '@mui/icons-material/House';
 import {Box, IconButton} from "@mui/material";
 
 function SceneControls({cameraControlRef, isWireframe, setIsWireframe}) {
-    console.log(cameraControlRef)
-
     return (
         <Box position="absolute" top={20} left={20} display="flex" gap="10px" sx={{background: 'white'}}>
             <IconButton onClick={() => {

applications/visualizer/frontend/src/components/viewers/TwoD/TwoDViewer.tsx

@@ -1,7 +1,11 @@
 import {useEffect, useRef} from 'react';
 import cytoscape from 'cytoscape';
+import {useSelectedWorkspace} from "../../../hooks/useSelectedWorkspace.ts";
 
 const TwoDViewer = () => {
+    const workspace = useSelectedWorkspace()
+    console.log(workspace.activeNeurons)
+
     const cyContainer = useRef(null);
 
     useEffect(() => {

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

@@ -1,14 +1,14 @@
-import React, { createContext, ReactNode, useContext, useState } from 'react';
-import { ViewMode } from "../models/models.ts";
-import { Workspace } from "../models/workspace.ts";
+import React, {createContext, ReactNode, useContext, useState} from 'react';
+import {ViewMode} from "../models/models.ts";
+import {Workspace} from "../models/workspace.ts";
 
 export interface GlobalContextType {
     workspaces: Record<string, Workspace>;
     currentWorkspaceId: string | undefined;
     viewMode: ViewMode;
     selectedWorkspacesIds: Set<string>;
     setViewMode: (viewMode: ViewMode) => void;
-    addWorkspace: (id: string, name: string) => void;
+    createWorkspace: (id: string, name: string) => void;
     updateWorkspace: (workspace: Workspace) => void;
     removeWorkspace: (workspaceId: string) => void;
     setCurrentWorkspace: (workspaceId: string) => void;
@@ -21,16 +21,18 @@ interface GlobalContextProviderProps {
 
 const GlobalContext = createContext<GlobalContextType | undefined>(undefined);
 
-export const GlobalContextProvider: React.FC<GlobalContextProviderProps> = ({ children }) => {
+export const GlobalContextProvider: React.FC<GlobalContextProviderProps> = ({children}) => {
     const [workspaces, setWorkspaces] = useState<Record<string, Workspace>>({});
     const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string | undefined>(undefined);
     const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.Default);
     const [selectedWorkspacesIds, setSelectedWorkspacesIds] = useState<Set<string>>(new Set<string>());
 
 
-    const addWorkspace = (id: string, name: string) => {
-        const newWorkspace = new Workspace(id, name, updateWorkspace);
-        setWorkspaces(prev => ({ ...prev, [id]: newWorkspace }));
+    const createWorkspace = (id: string, name: string,
+                             activeDatasets: Set<string> = new Set(),
+                             activeNeurons: Set<string> = new Set()) => {
+        const newWorkspace = new Workspace(id, name, activeDatasets, activeNeurons, updateWorkspace);
+        setWorkspaces(prev => ({...prev, [id]: newWorkspace}));
     };
 
     const updateWorkspace = (workspace: Workspace) => {
@@ -41,7 +43,7 @@ export const GlobalContextProvider: React.FC<GlobalContextProviderProps> = ({ ch
     };
 
     const removeWorkspace = (workspaceId: string) => {
-        const updatedWorkspaces = { ...workspaces };
+        const updatedWorkspaces = {...workspaces};
         delete updatedWorkspaces[workspaceId];
         setWorkspaces(updatedWorkspaces);
     };
@@ -56,7 +58,7 @@ export const GlobalContextProvider: React.FC<GlobalContextProviderProps> = ({ ch
             value={{
                 workspaces,
                 currentWorkspaceId,
-                addWorkspace,
+                createWorkspace,
                 updateWorkspace,
                 removeWorkspace,
                 setCurrentWorkspace,

applications/visualizer/frontend/src/hooks/useSelectedWorkspace.ts

@@ -0,0 +1,11 @@
+import {Workspace} from "../models/workspace.ts";
+import { useSelector } from "react-redux";
+import {useGlobalContext} from "../contexts/GlobalContext.tsx";
+import {RootState} from "../layout-manager/layoutManagerFactory.ts";
+
+export function useSelectedWorkspace(): Workspace | undefined {
+    const { workspaces } = useGlobalContext();
+    const workspaceId = useSelector((state: RootState) => state.workspaceId);
+
+    return workspaces[workspaceId] as Workspace;
+}

applications/visualizer/frontend/src/models/workspace.ts

@@ -1,6 +1,6 @@
-import { produce, immerable } from "immer"
-import { configureStore } from "@reduxjs/toolkit";
-import { NeuronGroup, ViewerSynchronizationPair, ViewerType } from "./models.ts";
+import {produce, immerable} from "immer"
+import {configureStore} from "@reduxjs/toolkit";
+import {NeuronGroup, ViewerSynchronizationPair, ViewerType} from "./models.ts";
 import getLayoutManagerAndStore from "../layout-manager/layoutManagerFactory.ts";
 
 export class Workspace {
@@ -20,11 +20,13 @@ export class Workspace {
 
     updateContext: (workspace: Workspace) => void;
 
-    constructor(id: string, name: string, updateContext: (workspace: Workspace) => void) {
+    constructor(id: string, name: string,
+                activeDatasets: Set<string>, activeNeurons: Set<string>,
+                updateContext: (workspace: Workspace) => void) {
         this.id = id;
         this.name = name;
-        this.activeDatasets = new Set();
-        this.activeNeurons = new Set();
+        this.activeDatasets = activeDatasets || new Set<string>();
+        this.activeNeurons = activeNeurons || new Set<string>();
         this.highlightedNeuron = undefined;
         this.viewers = {
             [ViewerType.Graph]: true,
@@ -39,7 +41,7 @@ export class Workspace {
         }
         this.neuronGroups = {}
 
-        const { layoutManager, store } = getLayoutManagerAndStore(id);
+        const {layoutManager, store} = getLayoutManagerAndStore(id);
         this.layoutManager = layoutManager
         this.store = store
         this.updateContext = updateContext;