Relocate workspace logic to Neurons component and include color in ne…

…uron list items to put the correct default value

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

@@ -1,7 +1,6 @@
 import { Add as AddIcon, DeleteOutlined as DeleteOutlinedIcon, HelpOutline as HelpOutlineIcon } from "@mui/icons-material";
 import { Box, FormControlLabel, IconButton, Stack, Tooltip, Typography } from "@mui/material";
 import { useState } from "react";
-import { ViewerType, type Workspace } from "../../models";
 import { vars } from "../../theme/variables.ts";
 import CustomSwitch from "./CustomSwitch";
 import PickerWrapper from "./PickerWrapper";
@@ -14,14 +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;
-  workspace?: Workspace;
+  onColorChange?: (id: string, color: string) => void;
 }
 const CustomListItem = ({
   data,
@@ -31,11 +31,11 @@ const CustomListItem = ({
   onSwitchChange,
   onDelete,
   deleteTooltipTitle,
-  workspace,
+  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";
 
@@ -58,9 +58,8 @@ const CustomListItem = ({
   };
 
   const handleColorChange = (color) => {
-    const hexColor = color.hex;
-    setSelectedColor(hexColor);
-    workspace.changeNeuronColorForViewers(data.id, hexColor, [ViewerType.ThreeD, ViewerType.EM]);
+    setSelectedColor(color.hex);
+    onColorChange(data.id, color);
   };
 
   const handleOnMouseEnter = () => {

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,14 +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"
-              workspace={currentWorkspace}
+              onColorChange={handleColorChange}
             />
           ))}
           <Box display="flex" alignItems="center" justifyContent="space-between" padding=".25rem .5rem">
@@ -151,7 +160,7 @@ const Neurons = ({ children }) => {
               onSwitchChange={handleSwitchChange}
               onDelete={() => console.log("delete")}
               deleteTooltipTitle="Remove group from the workspace"
-              workspace={currentWorkspace}
+              onColorChange={handleColorChange}
             />
           ))}
         </Stack>

applications/visualizer/frontend/src/models/workspace.ts

@@ -258,15 +258,11 @@ export class Workspace {
     return Array.from(this.activeNeurons).filter((neuronId) => this.visibilities[neuronId]?.[ViewerType.ThreeD]?.visibility === Visibility.Visible);
   }
 
-  changeNeuronColorForViewers(neuronId: string, color: string, viewerTypes: ViewerType[] = [ViewerType.ThreeD, ViewerType.EM]): void {
-    const unsupportedTypes = viewerTypes.filter((type) => type !== ViewerType.ThreeD && type !== ViewerType.EM);
-
-    if (unsupportedTypes.length > 0) {
-      throw new Error(`Unsupported viewer types: ${unsupportedTypes.join(", ")}`);
-    }
+  changeNeuronColorForViewers(neuronId: string, color: string): void {
+    const viewers: ViewerType[] = [ViewerType.ThreeD, ViewerType.EM];
 
     const updated = produce(this, (draft: Workspace) => {
-      viewerTypes.forEach((viewerType) => {
+      viewers.forEach((viewerType) => {
         if (viewerType in draft.visibilities[neuronId]) {
           draft.visibilities[neuronId][viewerType].color = color;
         }