Merge pull request #19 from MetaCell/feature/CELE-74

Feature/cele 74
MetaCell · Aug 12, 2024 · 134ae0a · 134ae0a
2 parents e98a264 + cbb828c
commit 134ae0a
Show file tree

Hide file tree

Showing 23 changed files with 620 additions and 309 deletions.
diff --git a/applications/visualizer/frontend/src/App.css b/applications/visualizer/frontend/src/App.css
@@ -6,5 +6,5 @@
     display: flex;
     flex-direction: column;
     height: 100vh;
-    overflow: hidden;
+    overflow: auto;
 }
diff --git a/applications/visualizer/frontend/src/App.tsx b/applications/visualizer/frontend/src/App.tsx
@@ -3,33 +3,54 @@ import { ThemeProvider } from "@mui/material/styles";
 import { Provider } from "react-redux";
 import theme from "./theme/index.tsx";
 import "./App.css";
+import React from "react";
 import AppLauncher from "./components/AppLauncher.tsx";
+import Layout from "./components/ViewerContainer/Layout.tsx";
 import WorkspaceComponent from "./components/WorkspaceComponent.tsx";
+import CompareWrapper from "./components/wrappers/Compare.tsx";
+import DefaultWrapper from "./components/wrappers/Default.tsx";
 import { useGlobalContext } from "./contexts/GlobalContext.tsx";
 import { ViewMode } from "./models";
 
 function App() {
   const { workspaces, currentWorkspaceId, viewMode, selectedWorkspacesIds } = useGlobalContext();
+  const [sidebarOpen, setSidebarOpen] = React.useState(true);
 
   const hasLaunched = currentWorkspaceId !== undefined;
 
+  const renderCompareMode = (workspaceIds: string[]) => (
+    <CompareWrapper sidebarOpen={sidebarOpen}>
+      {workspaceIds.map((id) => (
+        <Provider key={id} store={workspaces[id].store}>
+          <WorkspaceComponent sidebarOpen={sidebarOpen} />
+        </Provider>
+      ))}
+    </CompareWrapper>
+  );
+
+  const renderDefaultMode = (currentWorkspaceId: string) => (
+    <Provider store={workspaces[currentWorkspaceId].store}>
+      <DefaultWrapper>
+        <WorkspaceComponent sidebarOpen={sidebarOpen} />
+      </DefaultWrapper>
+    </Provider>
+  );
+
+  const renderWorkspaces = () => {
+    if (viewMode === ViewMode.Compare) {
+      return renderCompareMode(Array.from(selectedWorkspacesIds));
+    }
+    return renderDefaultMode(currentWorkspaceId as string);
+  };
+
   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}>
-                  <WorkspaceComponent />
-                </Provider>
-              ))
-            ) : (
-              <Provider store={workspaces[currentWorkspaceId].store}>
-                <WorkspaceComponent />
-              </Provider>
-            )}
+            <Layout sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
+            {renderWorkspaces()}
           </Box>
         ) : (
           <AppLauncher />

diff --git a/applications/visualizer/frontend/src/components/AppLauncher.tsx b/applications/visualizer/frontend/src/components/AppLauncher.tsx
@@ -4,14 +4,14 @@ import { useGlobalContext } from "../contexts/GlobalContext.tsx";
 import { parseURLParams } from "../helpers/parseURLHelper.ts";
 import { TEMPLATE_ACTIVE_DATASETS, TEMPLATE_ACTIVE_NEURONS } from "../settings/templateWorkspaceSettings.ts";
 function AppLauncher() {
-  const { workspaces, createWorkspace, setCurrentWorkspace } = useGlobalContext();
+  const { workspaces, createWorkspace, setCurrentWorkspace, setSelectedWorkspacesIds } = useGlobalContext();
 
   const handleTemplateClick = async () => {
     const workspaceId = `workspace-${Date.now()}`;
     const workspaceName = `Template Workspace ${Object.keys(workspaces).length + 1}`;
-
     createWorkspace(workspaceId, workspaceName, new Set(TEMPLATE_ACTIVE_DATASETS), new Set(TEMPLATE_ACTIVE_NEURONS));
     setCurrentWorkspace(workspaceId);
+    setSelectedWorkspacesIds(new Set<string>([workspaceId]));
   };
 
   const handleBlankClick = () => {
@@ -20,6 +20,7 @@ function AppLauncher() {
 
     createWorkspace(workspaceId, workspaceName, new Set(TEMPLATE_ACTIVE_DATASETS));
     setCurrentWorkspace(workspaceId);
+    setSelectedWorkspacesIds(new Set<string>([workspaceId]));
   };
 
   const handlePasteUrlClick = () => {

diff --git a/applications/visualizer/frontend/src/components/CreateNewWorkspaceDialog.tsx b/applications/visualizer/frontend/src/components/CreateNewWorkspaceDialog.tsx
@@ -10,9 +10,9 @@ import { vars as colors } from "../theme/variables.ts";
 import CustomAutocomplete from "./CustomAutocomplete.tsx";
 import CustomDialog from "./CustomDialog.tsx";
 
-const CreateNewWorkspaceDialog = ({ onCloseCreateWorkspace, showCreateWorkspaceDialog }) => {
+const CreateNewWorkspaceDialog = ({ onCloseCreateWorkspace, showCreateWorkspaceDialog, isCompareMode, title, subTitle, submitButtonText }) => {
   const [neurons, setNeurons] = useState<Neuron[]>([]);
-  const { workspaces, datasets, createWorkspace } = useGlobalContext();
+  const { workspaces, datasets, createWorkspace, setSelectedWorkspacesIds } = useGlobalContext();
   const [searchedNeuron, setSearchedNeuron] = useState("");
   const [formValues, setFormValues] = useState<{
     workspaceName: string;
@@ -30,7 +30,10 @@ const CreateNewWorkspaceDialog = ({ onCloseCreateWorkspace, showCreateWorkspaceD
   const fetchNeurons = async (name, datasetsIds) => {
     try {
       const Ids = datasetsIds.map((dataset) => dataset.id);
-      const response = await NeuronsService.searchCells({ name: name, datasetIds: Ids });
+      const response = await NeuronsService.searchCells({
+        name: name,
+        datasetIds: Ids,
+      });
       setNeurons(response);
     } catch (error) {
       console.error("Failed to fetch datasets", error);
@@ -79,14 +82,19 @@ const CreateNewWorkspaceDialog = ({ onCloseCreateWorkspace, showCreateWorkspaceD
     const activeNeurons = new Set(formValues.selectedNeurons.map((neuron) => neuron.name));
     const activeDatasets = new Set(formValues.selectedDatasets.map((dataset) => dataset.id));
     createWorkspace(newWorkspaceId, formValues.workspaceName, activeDatasets, activeNeurons);
+
+    if (isCompareMode) {
+      const updatedWorkspaces = new Set([...Object.keys(workspaces), newWorkspaceId]);
+      setSelectedWorkspacesIds(updatedWorkspaces);
+    }
     onCloseCreateWorkspace();
   };
-
   const datasetsArray = Object.values(datasets);
 
   return (
-    <CustomDialog onClose={onCloseCreateWorkspace} showModal={showCreateWorkspaceDialog} title={"Create new workspace"}>
+    <CustomDialog onClose={onCloseCreateWorkspace} showModal={showCreateWorkspaceDialog} title={title}>
       <Box px="1rem" py="1.5rem" gap={2.5} display="flex" flexDirection="column">
+        {subTitle && <Typography>{subTitle}</Typography>}
         <Box>
           <FormLabel>
             Workspace name <Typography variant="caption">(REQUIRED)</Typography>
@@ -160,7 +168,7 @@ const CreateNewWorkspaceDialog = ({ onCloseCreateWorkspace, showCreateWorkspaceD
       </Box>
       <Box borderTop={`0.0625rem solid ${colors.gray100}`} px="1rem" py="0.75rem" gap={0.5} display="flex" justifyContent="flex-end">
         <Button variant="contained" color="info" onClick={handleSubmit} disabled={!formValues.workspaceName}>
-          Create workspace
+          {submitButtonText}
         </Button>
       </Box>
     </CustomDialog>

diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/CompareWorkspaceDialog.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/CompareWorkspaceDialog.tsx
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,