add the sidebare workspace selector

MetaCell · Aug 8, 2024 · 2752b6b · 2752b6b
1 parent f7a4efb
commit 2752b6b
Show file tree

Hide file tree

Showing 6 changed files with 183 additions and 11 deletions.
diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/CustomEntitiesDropdown.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/CustomEntitiesDropdown.tsx
@@ -85,8 +85,8 @@ const CustomEntitiesDropdown = ({ options, activeNeurons, onNeuronClick, onSearc
         placeholder="Search"
         InputProps={{
           startAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon sx={{ fontSize: "1.25rem" }} />
+            <InputAdornment position="start" sx={{ margin: 0 }}>
+              <SearchIcon sx={{ fontSize: "1.25rem", marginLeft: `0 !important` }} />
             </InputAdornment>
           ),
           endAdornment: open && (
@@ -114,6 +114,17 @@ const CustomEntitiesDropdown = ({ options, activeNeurons, onNeuronClick, onSearc
             </InputAdornment>
           ),
         }}
+        sx={{
+          "& .MuiInputBase-root": {
+            padding: "1rem 0.75rem",
+
+            "& .MuiOutlinedInput-notchedOutline": {
+              borderRight: 0,
+              borderLeft: 0,
+              borderRadius: 0,
+            },
+          },
+        }}
       />
 
       <Popper

diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/DataSets.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/DataSets.tsx
@@ -1,6 +1,7 @@
 import { CloseOutlined, LayersOutlined } from "@mui/icons-material";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import { Box, FormControl, IconButton, Menu, MenuItem, Snackbar, Stack, TextField, Typography } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import { Box, FormControl, IconButton, InputAdornment, Menu, MenuItem, Snackbar, Stack, TextField, Typography } from "@mui/material";
 import Select from "@mui/material/Select";
 import React, { useEffect, useMemo, useState } from "react";
 import { useGlobalContext } from "../../contexts/GlobalContext.tsx";
@@ -44,7 +45,7 @@ const mapDatasetToListItem = (dataset: Dataset, isActive: boolean) => ({
   helpText: dataset.collection,
 });
 
-const DataSets = () => {
+const DataSets = ({ children }) => {
   const { datasets, workspaces, currentWorkspaceId } = useGlobalContext();
   const currentWorkspace = workspaces[currentWorkspaceId];
   const activeDatasets = currentWorkspace.activeDatasets;
@@ -65,6 +66,7 @@ const DataSets = () => {
 
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
+
   const handleMenuOpen = (event) => {
     setAnchorEl(event.currentTarget);
   };
@@ -201,16 +203,24 @@ const DataSets = () => {
           Toggle on and off to view datasets on the workspace. This will affect all viewers.
         </Typography>
       </Stack>
+      {children}
       <TextField
         value={searchInput}
         onChange={handleSearchChange}
         placeholder="Search"
         variant="outlined"
         fullWidth
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon sx={{ fontSize: "1.25rem", margin: `0 !important` }} />
+            </InputAdornment>
+          ),
+        }}
         sx={{
           mb: "1rem",
           "& .MuiOutlinedInput-root": {
-            padding: "0.5rem 2rem 0.5rem 0.75rem",
+            padding: "1rem 2rem 1rem 0.75rem",
             borderRadius: 0,
             "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
               borderColor: gray100,

diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx
@@ -22,7 +22,7 @@ const mapNeuronsAvailableNeuronsToOptions = (neuron: Neuron) => ({
   content: [],
 });
 
-const Neurons = () => {
+const Neurons = ({ children }) => {
   const { workspaces, datasets, currentWorkspaceId } = useGlobalContext();
   const currentWorkspace = workspaces[currentWorkspaceId];
   const activeNeurons = currentWorkspace.activeNeurons;
@@ -97,6 +97,7 @@ const Neurons = () => {
           Search for the neurons and add it to your workspace. This will affect all viewers.
         </Typography>
       </Stack>
+      {children}
       <CustomEntitiesDropdown
         options={autoCompleteOptions}
         activeNeurons={activeNeurons}

diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/Sidebar.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/Sidebar.tsx
@@ -1,11 +1,14 @@
-import { Box, Drawer, Stack } from "@mui/material";
+import { Box, Divider, Drawer, Stack } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import type { CSSObject, Theme } from "@mui/material/styles";
-import { useState } from "react";
+import React, { useState } from "react";
+import { useGlobalContext } from "../../contexts/GlobalContext.tsx";
 import { DataSetsIcon, NeuronsIcon, SidebarExpandIcon } from "../../icons";
+import { ViewMode } from "../../models";
 import { vars } from "../../theme/variables.ts";
 import DataSets from "./DataSets.tsx";
 import Neurons from "./Neurons.tsx";
+import WorkspaceSelector from "./WorkspaceSelector";
 
 const { gray100, white, gray200, gray50, buttonShadow } = vars;
 
@@ -76,7 +79,24 @@ const Sidebar = ({
   drawerHeight: string;
   drawerWidth: string;
 }) => {
+  const { setCurrentWorkspace, viewMode } = useGlobalContext();
+
   const [content, setContent] = useState("dataSets");
+
+  const [anchorElWorkspace, setAnchorElWorkspace] = React.useState<null | HTMLElement>(null);
+  const openWorkspace = Boolean(anchorElWorkspace);
+
+  const handleClickWorkspace = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorElWorkspace(event.currentTarget);
+  };
+  const handleCloseWorkspace = () => {
+    setAnchorElWorkspace(null);
+  };
+
+  const onClickWorkspace = (workspace) => {
+    setCurrentWorkspace(workspace.id);
+  };
+
   const handleDrawerOpen = () => {
     setSidebarOpen(true);
   };
@@ -88,6 +108,7 @@ const Sidebar = ({
   const handleToggleContent = (_, type) => {
     setContent(type);
   };
+
   return (
     <Drawer
       variant="permanent"
@@ -151,7 +172,41 @@ const Sidebar = ({
             <NeuronsIcon />
           </IconButton>
         </Stack>
-        {sidebarOpen && <>{content === "dataSets" ? <DataSets /> : <Neurons />}</>}
+        {sidebarOpen && (
+          <>
+            {content === "dataSets" ? (
+              <DataSets>
+                {viewMode === ViewMode.Compare && (
+                  <>
+                    <Divider />
+                    <WorkspaceSelector
+                      anchorElWorkspace={anchorElWorkspace}
+                      openWorkspace={openWorkspace}
+                      handleClickWorkspace={handleClickWorkspace}
+                      handleCloseWorkspace={handleCloseWorkspace}
+                      onClickWorkspace={onClickWorkspace}
+                    />
+                  </>
+                )}
+              </DataSets>
+            ) : (
+              <Neurons>
+                {viewMode === ViewMode.Compare && (
+                  <>
+                    <Divider />
+                    <WorkspaceSelector
+                      anchorElWorkspace={anchorElWorkspace}
+                      openWorkspace={openWorkspace}
+                      handleClickWorkspace={handleClickWorkspace}
+                      handleCloseWorkspace={handleCloseWorkspace}
+                      onClickWorkspace={onClickWorkspace}
+                    />
+                  </>
+                )}
+              </Neurons>
+            )}
+          </>
+        )}
       </Box>
     </Drawer>
   );

diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/WorkspaceSelector.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/WorkspaceSelector.tsx
@@ -0,0 +1,95 @@
+import { Box, Button, Menu, MenuItem, Typography } from "@mui/material";
+import type React from "react";
+import { useGlobalContext } from "../../contexts/GlobalContext.tsx";
+import { CheckIcon, DownIcon } from "../../icons";
+import { vars } from "../../theme/variables.ts";
+
+const { gray500, gray50, brand600 } = vars;
+
+interface WorkspaceSelectorProps {
+  anchorElWorkspace: null | HTMLElement;
+  openWorkspace: boolean;
+  handleClickWorkspace: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  handleCloseWorkspace: () => void;
+  onClickWorkspace: (workspace: any) => void;
+}
+
+const WorkspaceSelector: React.FC<WorkspaceSelectorProps> = ({
+  anchorElWorkspace,
+  openWorkspace,
+  handleClickWorkspace,
+  handleCloseWorkspace,
+  onClickWorkspace,
+}) => {
+  const { workspaces, currentWorkspaceId } = useGlobalContext();
+  const currentWorkspace = workspaces[currentWorkspaceId];
+
+  return (
+    <Box p="1.5rem 0.75rem">
+      <Typography variant="body1" component="p" color={gray500} mb=".62rem">
+        You’re making changes to
+      </Typography>
+
+      <Button
+        id="dataset-menu-btn"
+        aria-controls={openWorkspace ? "Workspace-menu" : undefined}
+        aria-haspopup="true"
+        aria-expanded={openWorkspace ? "true" : undefined}
+        onClick={handleClickWorkspace}
+        endIcon={<DownIcon color={brand600} />}
+        sx={{
+          width: "100%",
+          justifyContent: "space-between",
+          padding: "0.625rem 0.875rem !important",
+          backgroundColor: gray50,
+          color: brand600,
+        }}
+      >
+        {currentWorkspace.name}
+      </Button>
+      <Menu
+        sx={{
+          "& .MuiPaper-root": {
+            width: "17.25rem",
+          },
+        }}
+        id="Workspace-menu"
+        anchorEl={anchorElWorkspace}
+        open={openWorkspace}
+        onClose={handleCloseWorkspace}
+        MenuListProps={{
+          "aria-labelledby": "Workspace-menu-btn",
+        }}
+      >
+        <Box>
+          {Object.values(workspaces).map((workspace) => (
+            <MenuItem
+              key={workspace.id}
+              value={workspace.id}
+              onClick={() => onClickWorkspace(workspace)}
+              sx={{
+                justifyContent: "space-between",
+                backgroundColor: "transparent !important",
+              }}
+            >
+              <Box display="flex" alignItems="center" gap=".5rem">
+                <Box
+                  sx={{
+                    visibility: currentWorkspace.id === workspace.id ? "initial" : "hidden",
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                >
+                  <CheckIcon />
+                </Box>
+                {workspace.name}
+              </Box>
+            </MenuItem>
+          ))}
+        </Box>
+      </Menu>
+    </Box>
+  );
+};
+
+export default WorkspaceSelector;
diff --git a/applications/visualizer/frontend/src/icons/index.tsx b/applications/visualizer/frontend/src/icons/index.tsx
@@ -139,9 +139,9 @@ export const LinkIcon = ({ fill = "#757570" }) => (
   </svg>
 );
 
-export const DownIcon = () => (
+export const DownIcon = ({ color }) => (
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M6.175 6.91211L10 10.7288L13.825 6.91211L15 8.08711L10 13.0871L5 8.08711L6.175 6.91211Z" fill="#63625F" />
+    <path d="M6.175 6.91211L10 10.7288L13.825 6.91211L15 8.08711L10 13.0871L5 8.08711L6.175 6.91211Z" fill={color ? color : "#63625F"} />
   </svg>
 );