#23 Left static sidebar

.github/workflows/build.yml

@@ -12,7 +12,7 @@ jobs:
           node-version: 21.7
       - name: Install dependencies
         working-directory: applications/visualizer/frontend
-        run: yarn install --frozen-lockfile
+        run: yarn install 
       - name: Build App
         working-directory: applications/visualizer/frontend
-        run: npm run build
+        run: npm run build

applications/visualizer/frontend/package.json

@@ -28,6 +28,7 @@
     "@types/three": "^0.164.0",
     "file-saver": "^2.0.5",
     "react": "^18.2.0",
+    "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
     "react-redux": "^9.1.1",
     "three": "^0.163.0"

applications/visualizer/frontend/src/App.css

@@ -1,14 +1,10 @@
 #root {
-    width: 100vw;
-    height: 100vh;
-    margin: 0 auto;
+
 }
 
 .layout-manager-container {
     display: flex;
     flex-direction: column;
-    position: relative;
-    width: 100%;
-    height: 100%;
+    height: 100vh;
     overflow: hidden;
 }

applications/visualizer/frontend/src/App.tsx

@@ -1,49 +1,44 @@
 import { Provider } from "react-redux";
-import { ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider } from "@mui/material/styles";
 import { Box, CssBaseline } from "@mui/material";
-import '@metacell/geppetto-meta-ui/flex-layout/style/dark.scss';
-import theme from './theme/index.tsx';
-import './App.css'
+import "@metacell/geppetto-meta-ui/flex-layout/style/dark.scss";
+import theme from "./theme/index.tsx";
+import "./App.css";
 import { useGlobalContext } from "./contexts/GlobalContext.tsx";
 import AppLauncher from "./components/AppLauncher.tsx";
 import Workspace from "./components/Workspace.tsx";
 import { ViewMode } from "./models/models.ts";
 
 function App() {
-    const {
-        workspaces,
-        currentWorkspaceId,
-        viewMode,
-        selectedWorkspacesIds,
-    } = useGlobalContext();
+  const { workspaces, currentWorkspaceId, viewMode, selectedWorkspacesIds } =
+    useGlobalContext();
 
+  const hasLaunched = currentWorkspaceId != undefined;
 
-    const hasLaunched = currentWorkspaceId != undefined
-
-    return (
-        <>
-            <ThemeProvider theme={theme}>
-                <CssBaseline />
-                {hasLaunched ? (
-                    <Box className={"layout-manager-container"}>
-                        {viewMode === ViewMode.Compare ?
-                            Array.from(selectedWorkspacesIds).map(id => (
-                                <Provider key={id} store={workspaces[id].store}>
-                                    <Workspace />
-                                </Provider>
-                            ))
-                            :
-                            <Provider store={workspaces[currentWorkspaceId].store}>
-                                <Workspace />
-                            </Provider>
-                        }
-
-                    </Box>
-
-                ) : <AppLauncher />}
-            </ThemeProvider>
-        </>
-    )
+  return (
+    <>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {hasLaunched ? (
+          <Box className={"layout-manager-container"}>
+            {viewMode === ViewMode.Compare ? (
+              Array.from(selectedWorkspacesIds).map((id) => (
+                <Provider key={id} store={workspaces[id].store}>
+                  <Workspace />
+                </Provider>
+              ))
+            ) : (
+              <Provider store={workspaces[currentWorkspaceId].store}>
+                <Workspace />
+              </Provider>
+            )}
+          </Box>
+        ) : (
+          <AppLauncher />
+        )}
+      </ThemeProvider>
+    </>
+  );
 }
 
-export default App
+export default App;

applications/visualizer/frontend/src/components/ViewerContainer/ColorPicker.tsx

@@ -0,0 +1,49 @@
+import Box from '@mui/material/Box';
+import ChromePicker from 'react-color';
+
+
+const ColorPicker = ({ selectedColor, onChange }) => {
+  return (
+    <Box sx={{
+      '& > div': {
+        width: '100% !important',
+        boxShadow: 'none !important',
+        background: 'transparent !important',
+        fontFamily: "'IBM Plex Sans',sans-serif !important",
+
+        '& > div:last-of-type': {
+          '& > div:first-of-type': {
+            '& > div:first-of-type': {
+              '& > div': {
+                // border: `0.0625rem solid ${headerBorderLeftColor}`,
+              },
+            },
+          },
+        },
+
+        '& svg': {
+          '&:hover': {
+            // background: `${headerBorderLeftColor} !important`,
+          },
+        },
+
+        '& input': {
+          // backgroundColor: `${headerBorderLeftColor} !important`,
+          boxShadow: 'none !important',
+          // color: `${headingColor} !important`,
+          '&:focus': {
+            boxShadow: 'none !important',
+            outline: 'none !important',
+          },
+        },
+      },
+    }}>
+      <ChromePicker
+        color={selectedColor}
+        onChange={onChange}
+      />
+    </Box>
+  );
+};
+
+export default ColorPicker;

applications/visualizer/frontend/src/components/ViewerContainer/CompareWorkspaceDialog.tsx

@@ -0,0 +1,122 @@
+import { Box, Button, Dialog, FormLabel, IconButton, ListSubheader, TextField, Typography, Autocomplete} from "@mui/material";
+import { vars } from "../../theme/variables.ts";
+import { CaretIcon, CheckIcon, CloseIcon } from "../../icons/index.tsx";
+const { gray100 } = vars;
+
+
+const NeuronData = [
+  'ADAC', "ARAC", "VBG"
+];
+
+const datasetStages = [
+  {
+    groupName: 'Development Stage 1',
+    options: [
+      { title: 'Witvliet et al., 2020, Dataset 1 (L1)', caption: '0 hours from birth' },
+      { title: 'Witvliet et al., 2020, Dataset 3 (L1)', caption: '0 hours from birth' },
+      { title: 'Witvliet et al., 2020, Dataset 2 (L1)', caption: '0 hours from birth' }
+    ]
+  },
+  {
+    groupName: 'Development Stage 2',
+    options: [
+      { title: 'Witvliet et al., 2020, Dataset 1 (L1)', caption: '0 hours from birth' },
+      { title: 'Witvliet et al., 2020, Dataset 3 (L1)', caption: '0 hours from birth' },
+      { title: 'Witvliet et al., 2020, Dataset 2 (L1)', caption: '0 hours from birth' }
+    ]
+  },
+];
+
+const CompareWorkspaceDialog = ({
+  onClose,
+  showModal,
+}) => {
+  const allOptions = datasetStages.reduce((acc, curr) => {
+    return [...acc, ...curr.options.map(option => ({ ...option, groupName: curr.groupName }))];
+  }, []);
+  return (
+    <Dialog 
+      onClose={onClose} 
+      open={showModal}
+      fullWidth
+      maxWidth="lg"
+    >
+      <Box borderBottom={`0.0625rem solid ${gray100}`} px="1rem" py="0.5rem" display='flex' alignItems='center' justifyContent='space-between'>
+        <Typography component="h3">New workspace configuration</Typography>
+        <IconButton onClick={onClose}><CloseIcon /></IconButton>
+      </Box>
+      <Box px="1rem" py="1.5rem" gap={2.5} display='flex' flexDirection='column'>
+        <Typography>To start comparing, create workspace by configuring datasets and neurons you would want in the new workspace or start with an empty workspace.</Typography>
+        <Box>
+          <FormLabel>Workspace name</FormLabel>
+          <TextField fullWidth variant="outlined" placeholder="Start typing workspace name" />
+        </Box>
+
+        <Box>
+          <FormLabel>Datasets</FormLabel>
+          <Autocomplete
+            multiple
+            id="grouped-demo"
+            clearIcon={false}
+            options={allOptions}
+            ChipProps={{ deleteIcon: <IconButton sx={{ p: '0 !important', margin: '0 !important' }}><CloseIcon /></IconButton> }}
+            popupIcon={<CaretIcon />}
+            groupBy={(option) => option.groupName}
+            getOptionLabel={(option) => option.title}
+            renderInput={(params) => <TextField {...params} placeholder="Start typing to search" />}
+            renderOption={(props, option) => (
+              <li {...props}>
+                <CheckIcon />
+                <Typography>{option.title}</Typography>
+                <Typography component='span'>{option.caption}</Typography>
+              </li>
+            )}
+            renderGroup={(params) => {
+              console.log(params, 'params')
+              return (
+                <li className="grouped-list" key={params.key}>
+                  <ListSubheader component="div">
+                    {params.group}
+                  </ListSubheader>
+                  <ul style={{ padding: 0 }}>{params.children}</ul>
+                </li>
+              )
+            }}
+          />
+        </Box>
+
+        <Box>
+          <FormLabel>Neurons</FormLabel>
+          <Autocomplete
+            multiple
+            className="secondary"
+            id="tags-standard"
+            clearIcon={false}
+            options={NeuronData}
+            getOptionLabel={(option) => option}
+            ChipProps={{ deleteIcon: <IconButton sx={{ p: '0 !important', margin: '0 !important' }}><CloseIcon /></IconButton> }}
+            renderOption={(props, option) => (
+              <li {...props}>
+                <CheckIcon />
+                <Typography>{option}</Typography>
+              </li>
+            )}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                placeholder="Start typing to search"
+              />
+            )}
+          />
+        </Box>
+      </Box>
+
+      <Box borderTop={`0.0625rem solid ${gray100}`} px="1rem" py="0.75rem" gap={0.5} display='flex' justifyContent='flex-end'>
+          <Button variant="text">Start with an empty workspace</Button>
+          <Button variant="contained" color="info">Configure workspace</Button>
+      </Box>
+    </Dialog>
+  );
+};
+
+export default CompareWorkspaceDialog;