implement the dropdown to select the dataset to load/display

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

@@ -0,0 +1,62 @@
+import Autocomplete, { AutocompleteProps, AutocompleteRenderInputParams, AutocompleteRenderGroupParams } from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import React from "react";
+import { SxProps } from '@mui/system';
+import { ChipProps } from '@mui/material/Chip';
+interface CustomAutocompleteProps<T> {
+  options: T[];
+  getOptionLabel: (option: T) => string;
+  renderOption: (props: React.HTMLAttributes<HTMLLIElement>, option: T) => React.ReactNode;
+  renderInput?: (params: AutocompleteRenderInputParams) => React.ReactNode;
+  groupBy?: (option: T) => string;
+  renderGroup?: (params: AutocompleteRenderGroupParams) => React.ReactNode;
+  placeholder?: string;
+  className?: string;
+  id: string;
+  multiple?: boolean;
+  popupIcon: React.ReactNode;
+  clearIcon?: React.ReactNode; // Change to React.ReactNode to be consistent with popupIcon
+  ChipProps?: ChipProps;
+  sx?: SxProps;
+  componentsProps?: AutocompleteProps<T, boolean, boolean, boolean>['componentsProps'];
+}
+
+const CommonAutocomplete = <T,>({
+  options,
+  getOptionLabel,
+  renderOption,
+  groupBy,
+  renderGroup,
+  placeholder = "Start typing to search",
+  className = "",
+  id,
+  multiple = true,
+  popupIcon,
+  clearIcon,
+  ChipProps,
+  sx = {},
+  componentsProps = {},
+}: CustomAutocompleteProps<T>) => {
+  return (
+    <Autocomplete
+      multiple={multiple}
+      className={className}
+      id={id}
+      clearIcon={clearIcon}
+      options={options}
+      popupIcon={popupIcon}
+      getOptionLabel={getOptionLabel}
+      ChipProps={ChipProps}
+      groupBy={groupBy}
+      renderGroup={renderGroup}
+      renderOption={renderOption}
+      renderInput={(params) => (
+        <TextField {...params} placeholder={placeholder} />
+      )}
+      sx={sx}
+      componentsProps={componentsProps}
+    />
+  );
+};
+
+export default CommonAutocomplete;

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

@@ -1,42 +1,52 @@
-import { Box, Button, Dialog, FormLabel, IconButton, ListSubheader, TextField, Typography, Autocomplete} from "@mui/material";
+import { Box, Button, Dialog, FormLabel, IconButton, TextField, Typography } from "@mui/material";
 import { vars } from "../../theme/variables.ts";
-import { CaretIcon, CheckIcon, CloseIcon } from "../../icons/index.tsx";
+import { CaretIcon, CheckIcon, CloseIcon } from "../../icons";
+import CustomAutocomplete from "../CustomAutocomplete.tsx";
+import { NeuronsService } from "../../rest";
+import { useEffect, useState } from "react";
+
 const { gray100 } = vars;
 
+interface Dataset {
+  name: string;
+  // Add other properties as needed
+}
 
-const NeuronData = [
-  'ADAC', "ARAC", "VBG"
-];
+interface Neuron {
+  name: string;
+  // Add other properties as needed
+}
 
-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' }
-    ]
-  },
-];
+interface CompareWorkspaceDialogProps {
+  onClose: () => void;
+  showModal: boolean;
+  datasets: Dataset[];
+}
 
 const CompareWorkspaceDialog = ({
   onClose,
   showModal,
-}) => {
-  const allOptions = datasetStages.reduce((acc, curr) => {
-    return [...acc, ...curr.options.map(option => ({ ...option, groupName: curr.groupName }))];
+  datasets
+}: CompareWorkspaceDialogProps) => {
+
+  const [neurons, setNeurons] = useState<Neuron[]>([]);
+
+  const fetchNeurons = async () => {
+    try {
+      const response = await NeuronsService.getAllCells({ page: 1 });
+      setNeurons(response.items);
+    } catch (error) {
+      console.error('Failed to fetch datasets', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchNeurons();
   }, []);
+
   return (
-    <Dialog 
-      onClose={onClose} 
+    <Dialog
+      onClose={onClose}
       open={showModal}
       sx={{
         '& .MuiBackdrop-root': {
@@ -59,66 +69,50 @@ const CompareWorkspaceDialog = ({
 
         <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" />}
+          <CustomAutocomplete<Dataset>
+            options={datasets}
+            getOptionLabel={(option) => option.name}
             renderOption={(props, option) => (
               <li {...props}>
                 <CheckIcon />
-                <Typography>{option.title}</Typography>
-                <Typography component='span'>{option.caption}</Typography>
+                <Typography>{option.name}</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>
-              )
+            placeholder="Start typing to search"
+            id="grouped-demo"
+            popupIcon={<CaretIcon />}
+            ChipProps={{
+              deleteIcon: <IconButton sx={{ p: '0 !important', margin: '0 !important' }}><CloseIcon /></IconButton>
             }}
           />
         </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> }}
+          <CustomAutocomplete<Neuron>
+            options={neurons}
+            getOptionLabel={(option) => option.name}
             renderOption={(props, option) => (
               <li {...props}>
                 <CheckIcon />
-                <Typography>{option}</Typography>
+                <Typography>{option.name}</Typography>
               </li>
             )}
-            renderInput={(params) => (
-              <TextField
-                {...params}
-                placeholder="Start typing to search"
-              />
-            )}
+            placeholder="Start typing to search"
+            className="secondary"
+            id="tags-standard"
+            popupIcon={<CaretIcon />}
+            ChipProps={{
+              deleteIcon: <IconButton sx={{ p: '0 !important', margin: '0 !important' }}><CloseIcon /></IconButton>
+            }}
+            clearIcon={false}
           />
         </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>
+        <Button variant="text">Start with an empty workspace</Button>
+        <Button variant="contained" color="info">Configure workspace</Button>
       </Box>
     </Dialog>
   );

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

@@ -2,8 +2,9 @@ import { Theme } from "@mui/material/styles";
 import { AppBar, Box, Button, ButtonGroup, IconButton, Menu, MenuItem, Toolbar, Tooltip, Typography} from "@mui/material";
 import { vars } from "../../theme/variables.ts";
 import React, { useState } from "react";
-import { CiteIcon, ConnectionsIcon, ContactIcon, ContributeIcon, DataSourceIcon, DownloadIcon, MoreOptionsIcon, TourIcon } from "../../icons/index.tsx";
+import { CiteIcon, ConnectionsIcon, ContactIcon, ContributeIcon, DataSourceIcon, DownloadIcon, MoreOptionsIcon, TourIcon } from "../../icons";
 import CompareWorkspaceDialog from "./CompareWorkspaceDialog.tsx";
+import {useGlobalContext} from "../../contexts/GlobalContext.tsx";
 const { gray100 } = vars;
 
 const MENU_ARR = [
@@ -87,6 +88,7 @@ const Header = ({
   const [showModal, setShowModal] = useState(false);
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const open = Boolean(anchorEl);
+  const { datasets } = useGlobalContext();
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -197,7 +199,7 @@ const Header = ({
         </Toolbar>
       </AppBar>
 
-      <CompareWorkspaceDialog showModal={showModal} onClose={onClose}/>
+      <CompareWorkspaceDialog showModal={showModal} onClose={onClose} datasets={datasets}/>
     </>
   );
 };

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

@@ -0,0 +1,57 @@
+import { FormControlLabel, Tooltip, Box, Stack, Typography } from '@mui/material';
+import CustomSwitch from "../../ViewerContainer/CustomSwitch.tsx";
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
+import {vars} from "../../../theme/variables.ts"; // Adjust the import path as needed
+
+const {gray50, gray600, gray400B} = vars
+const CustomFormControlLabel = ({ label, tooltipTitle, helpText }) => {
+  return (
+    <FormControlLabel
+      control={<Tooltip title={helpText}><CustomSwitch /></Tooltip>}
+      sx={{
+        width: '100%',
+        p: '.5rem .5rem .5rem .5rem',
+        margin: 0,
+        alignItems: "baseline",
+        '&:hover': {
+          background: gray50,
+          borderRadius: '.5rem',
+        },
+        "& .MuiFormControlLabel-label": {
+          width: "100%",
+        },
+        "& .MuiIconButton-root": {
+          borderRadius: '.25rem',
+        }
+      }}
+      label={
+        <Box>
+          <Stack
+            direction="row"
+            alignItems="center"
+            width={1}
+            spacing=".5rem"
+            justifyContent='space-between'
+          >
+            <Typography color={gray600} variant="subtitle1">
+              {label}
+            </Typography>
+            <Tooltip title={tooltipTitle}>
+              <HelpOutlineIcon
+                sx={{
+                  color: gray400B,
+                  fontSize: "1rem",
+                  width: "1rem",
+                  height: "1rem",
+                }}
+              />
+            </Tooltip>
+          </Stack>
+        </Box>
+      }
+      value={undefined}
+    />
+  );
+};
+
+export default CustomFormControlLabel;