CELE-107 Use class color in EM viewer if sub-neuron is clicked

MetaCell · Nov 4, 2024 · 38afec8 · 38afec8
1 parent 2525a4f
commit 38afec8
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/applications/visualizer/frontend/src/components/viewers/EM/EMStackTilesViewer.tsx b/applications/visualizer/frontend/src/components/viewers/EM/EMStackTilesViewer.tsx
@@ -46,21 +46,28 @@ const newSegLayer = (dataset: Dataset, slice: number) => {
 };
 
 function isNeuronActive(neuronId: string, workspace: Workspace): boolean {
-  return workspace.getVisibleNeuronsInEM().includes(neuronId);
+  const emViewerVisibleNeurons = workspace.getVisibleNeuronsInEM();
+  return emViewerVisibleNeurons.includes(neuronId) || emViewerVisibleNeurons.includes(workspace.getNeuronClass(neuronId));
 }
 
 function isNeuronSelected(neuronId: string, workspace: Workspace): boolean {
-  return workspace.getViewerSelectedNeurons(ViewerType.EM).includes(neuronId);
+  const emViewerSelectedNeurons = workspace.getViewerSelectedNeurons(ViewerType.EM);
+  return emViewerSelectedNeurons.includes(neuronId) || emViewerSelectedNeurons.includes(workspace.getNeuronClass(neuronId));
 }
 
 function isNeuronVisible(neuronId: string, workspace: Workspace): boolean {
   return isNeuronActive(neuronId, workspace) || isNeuronSelected(neuronId, workspace);
 }
 
+function neuronColor(neuronId, workspace: Workspace): string {
+  const neuronVisibilities = workspace.visibilities[neuronId] || workspace.visibilities[workspace.getNeuronClass(neuronId)];
+  return neuronVisibilities?.[ViewerType.EM].color;
+}
+
 function neuronsStyle(feature: FeatureLike, workspace: Workspace) {
   const neuronName = neuronFeatureName(feature);
 
-  const color = workspace.visibilities[neuronName]?.[ViewerType.EM]?.color;
+  const color = neuronColor(neuronName, workspace);
 
   if (isNeuronSelected(neuronName, workspace)) {
     return selectedNeuronStyle(feature, color);
@@ -157,7 +164,7 @@ const EMStackViewer = () => {
   // 	}),
   // });
 
-  const neuronsStyleRef = useRef((feature: FeatureLike) => neuronsStyle(feature, currentWorkspace));
+  const neuronsStyleRef = useRef((feature) => neuronsStyle(feature, currentWorkspace));
   const onNeuronSelectRef = useRef((position) => onNeuronSelect(position, currSegLayer.current?.getSource(), currentWorkspace));
 
   useEffect(() => {

diff --git a/applications/visualizer/frontend/src/components/viewers/EM/neuronsMapFeature.ts b/applications/visualizer/frontend/src/components/viewers/EM/neuronsMapFeature.ts
@@ -1,14 +1,14 @@
-import { FeatureLike } from "ol/Feature";
+import type { FeatureLike } from "ol/Feature";
 import Fill from "ol/style/Fill";
 import Stroke from "ol/style/Stroke";
 import Style from "ol/style/Style";
 import Text from "ol/style/Text";
 
 export function hexToRGBArray(hex: string): [number, number, number] {
   hex = hex.replace("#", "");
-  const r = parseInt(hex.slice(0, 2), 16);
-  const g = parseInt(hex.slice(2, 4), 16);
-  const b = parseInt(hex.slice(4, 6), 16);
+  const r = Number.parseInt(hex.slice(0, 2), 16);
+  const g = Number.parseInt(hex.slice(2, 4), 16);
+  const b = Number.parseInt(hex.slice(4, 6), 16);
 
   return [r, g, b];
 }

diff --git a/applications/visualizer/frontend/src/models/workspace.ts b/applications/visualizer/frontend/src/models/workspace.ts
@@ -257,7 +257,7 @@ export class Workspace {
 
   getNeuronClass(neuronId: string): string {
     const neuron = this.availableNeurons[neuronId];
-    return neuron.nclass;
+    return neuron?.nclass;
   }
 
   getVisibleNeuronsInThreeD(): string[] {