diff --git a/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx b/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx index a0893968..d1220264 100644 --- a/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx +++ b/applications/visualizer/frontend/src/components/ViewerContainer/CustomListItem.tsx @@ -13,6 +13,7 @@ interface CustomListItemProps { checked: boolean; helpText?: string; description?: string; + color?: string; }; showTooltip?: boolean; listType: string; @@ -20,6 +21,7 @@ interface CustomListItemProps { 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 index a7b4b676..a4c5a1ec 100644 --- 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) => ( ))} @@ -150,6 +160,7 @@ const Neurons = ({ children }) => { onSwitchChange={handleSwitchChange} onDelete={() => console.log("delete")} deleteTooltipTitle="Remove group from the workspace" + onColorChange={handleColorChange} /> ))} diff --git a/applications/visualizer/frontend/src/components/viewers/ThreeD/SceneControls.tsx b/applications/visualizer/frontend/src/components/viewers/ThreeD/SceneControls.tsx index 2a418f58..b1c80887 100644 --- 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 }) { - + setIsWireframe(!isWireframe)}> diff --git a/applications/visualizer/frontend/src/models/workspace.ts b/applications/visualizer/frontend/src/models/workspace.ts index 088e9ee6..9179df1b 100644 --- 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); + } }