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);
+ }
}