Merge pull request #56 from MetaCell/feature/CELE-75

#75 Connect the colour picker to the context neuron data
MetaCell · Oct 10, 2024 · f8cf616 · f8cf616
2 parents 35ddad2 + 7c9ad2d
commit f8cf616
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx
@@ -13,13 +13,15 @@ interface CustomListItemProps {
     checked: boolean;
     helpText?: string;
     description?: string;
+    color?: string;
   };
   showTooltip?: boolean;
   listType: string;
   showExtraActions?: boolean;
   onSwitchChange?: (id: string, checked: boolean) => void;
   onDelete?: (id: string) => void;
   deleteTooltipTitle?: string;
+  onColorChange?: (id: string, color: string) => void;
 }
 const CustomListItem = ({
   data,
@@ -29,10 +31,11 @@ const CustomListItem = ({
   onSwitchChange,
   onDelete,
   deleteTooltipTitle,
+  onColorChange,
 }: CustomListItemProps) => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
-  const [selectedColor, setSelectedColor] = useState("#9FEE9A");
+  const [selectedColor, setSelectedColor] = useState(data.color);
   const [itemHovered, setItemHovered] = useState(false);
   const isNeurons = listType === "neurons";
 
@@ -56,6 +59,7 @@ const CustomListItem = ({
 
   const handleColorChange = (color) => {
     setSelectedColor(color.hex);
+    onColorChange(data.id, color);
   };
 
   const handleOnMouseEnter = () => {

diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/Neurons.tsx
@@ -3,7 +3,7 @@ import { Box, IconButton, Stack, Typography } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
 import { useState } from "react";
 import { useGlobalContext } from "../../contexts/GlobalContext.tsx";
-import { type ViewerData, Visibility } from "../../models/models.ts";
+import { type ViewerData, ViewerType, Visibility } from "../../models/models.ts";
 import type { Neuron } from "../../rest";
 import { vars } from "../../theme/variables.ts";
 import CustomEntitiesDropdown from "./CustomEntitiesDropdown.tsx";
@@ -15,6 +15,12 @@ const mapToListItem = (neuron: string, visibility: ViewerData) => ({
   label: neuron,
   checked: Object.values(visibility).every((e) => e === undefined || e.visibility === Visibility.Visible),
 });
+const mapNeuronsToListItem = (neuron: string, visibility: ViewerData) => ({
+  id: neuron,
+  label: neuron,
+  checked: Object.values(visibility).every((e) => e === undefined || e.visibility === Visibility.Visible),
+  color: visibility[ViewerType.ThreeD]?.color || visibility[ViewerType.EM]?.color || "#000000",
+});
 
 const neuronToOption = (neuron: Neuron) => ({
   id: neuron.name,
@@ -59,6 +65,9 @@ const Neurons = ({ children }) => {
     );
     setNeurons(filteredNeurons);
   };
+  const handleColorChange = (neuronId, color) => {
+    currentWorkspace.changeNeuronColorForViewers(neuronId, color.hex);
+  };
 
   const autoCompleteOptions = Object.values(neurons)
     .map((neuron: Neuron) => neuronToOption(neuron))
@@ -116,13 +125,14 @@ const Neurons = ({ children }) => {
           {Array.from(activeNeurons).map((neuronId) => (
             <CustomListItem
               key={neuronId}
-              data={mapToListItem(neuronId, currentWorkspace.visibilities[neuronId])}
+              data={mapNeuronsToListItem(neuronId, currentWorkspace.visibilities[neuronId])}
               showTooltip={false}
               showExtraActions={true}
               listType="neurons"
               onSwitchChange={handleSwitchChange}
               onDelete={handleDeleteNeuron}
               deleteTooltipTitle="Remove neuron from the workspace"
+              onColorChange={handleColorChange}
             />
           ))}
           <Box display="flex" alignItems="center" justifyContent="space-between" padding=".25rem .5rem">
@@ -150,6 +160,7 @@ const Neurons = ({ children }) => {
               onSwitchChange={handleSwitchChange}
               onDelete={() => console.log("delete")}
               deleteTooltipTitle="Remove group from the workspace"
+              onColorChange={handleColorChange}
             />
           ))}
         </Stack>

diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeD/SceneControls.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeD/SceneControls.tsx
@@ -121,7 +121,7 @@ function SceneControls({ cameraControlRef, isWireframe, setIsWireframe }) {
         </Box>
       </Popover>
       <Divider />
-      <Tooltip title="Switch theme" placement="right-start">
+      <Tooltip title="Toggle Wireframe" placement="right-start">
         <IconButton onClick={() => setIsWireframe(!isWireframe)}>
           <TonalityOutlined />
         </IconButton>

diff --git a/applications/visualizer/frontend/src/models/workspace.ts b/applications/visualizer/frontend/src/models/workspace.ts
@@ -260,4 +260,18 @@ export class Workspace {
   getVisibleNeuronsInThreeD(): string[] {
     return Array.from(this.activeNeurons).filter((neuronId) => this.visibilities[neuronId]?.[ViewerType.ThreeD]?.visibility === Visibility.Visible);
   }
+
+  changeNeuronColorForViewers(neuronId: string, color: string): void {
+    const viewers: ViewerType[] = [ViewerType.ThreeD, ViewerType.EM];
+
+    const updated = produce(this, (draft: Workspace) => {
+      viewers.forEach((viewerType) => {
+        if (viewerType in draft.visibilities[neuronId]) {
+          draft.visibilities[neuronId][viewerType].color = color;
+        }
+      });
+    });
+
+    this.updateContext(updated);
+  }
 }