Merge pull request MetaCell#164 from MetaCell/feature/VFB-202

MetaCell#202 Use colors for 3d meshes and slice viewer images

Author: ddelpiano

applications/virtual-fly-brain/client/src/reducers/InstancesReducer.js

@@ -2,7 +2,6 @@ import { getGlobalTypes } from "./actions/types/GlobalTypes";
 import { getInstancesTypes } from "./actions/types/getInstancesTypes";
 import {
   SELECTED_COLOR,
-  DESELECTED_COLOR,
   TEMPLATE_COLOR,
   SKELETON,
   CYLINDERS,
@@ -22,6 +21,7 @@ export const initialStateInstancesReducer = {
   error: false,
   errorMessage: undefined,
   cameraEvent: {},
+  selectedInstancesCount: 1,
 };
 
 const getMappedCanvasData = (loadedInstances) => {
@@ -74,7 +74,8 @@ const InstancesReducer = (state = initialStateInstancesReducer, response) => {
         newInstance.userSetColor = TEMPLATE_COLOR;
         newInstance.stackInstance = true;
       } else {
-        newInstance.color = DESELECTED_COLOR;
+        newInstance.color = getNextColor(state.selectedInstancesCount);
+        newInstance.colorIndex = state.selectedInstancesCount;
       }
 
       let launchTemplate = state.launchTemplate;
@@ -104,7 +105,7 @@ const InstancesReducer = (state = initialStateInstancesReducer, response) => {
         focused.color = SELECTED_COLOR;
         loadedInstances?.forEach((i) => {
           if (i.metadata?.Id !== focused.metadata?.Id) {
-            i.color = i.userSetColor || DESELECTED_COLOR;
+            i.color = i.userSetColor || getNextColor(i.colorIndex || 0);
             i.selected = false;
           }
         });
@@ -114,6 +115,7 @@ const InstancesReducer = (state = initialStateInstancesReducer, response) => {
         allLoadedInstances: loadedInstances,
         launchTemplate: launchTemplate,
         focusedInstance: focused,
+        selectedInstancesCount: newInstance.metadata?.IsTemplate ? state.selectedInstancesCount : state.selectedInstancesCount + 1,
         event: {
           action: getInstancesTypes.ADD_INSTANCE,
           id: response.payload.Id,
@@ -324,6 +326,7 @@ const InstancesReducer = (state = initialStateInstancesReducer, response) => {
       });
     }
     case getInstancesTypes.SELECT_INSTANCE: {
+      const selectedInstancesCount = state.selectedInstancesCount;
       const allLoadedInstances = [...state.allLoadedInstances];
       const findInstance = allLoadedInstances?.find(
         (i) => i.metadata?.Id === response.payload.id
@@ -334,12 +337,12 @@ const InstancesReducer = (state = initialStateInstancesReducer, response) => {
           findInstance.color = SELECTED_COLOR;
           allLoadedInstances?.forEach((i) => {
             if (i.metadata?.Id !== findInstance.metadata?.Id) {
-              i.color = i.userSetColor || DESELECTED_COLOR;
+              i.color = i.userSetColor || getNextColor(i.colorIndex);
               i.selected = false;
             }
           });
         } else {
-          findInstance.color = findInstance.userSetColor || DESELECTED_COLOR;
+          findInstance.color = findInstance.userSetColor || getNextColor(findInstance.colorIndex);
         }
       }
 
@@ -351,14 +354,19 @@ const InstancesReducer = (state = initialStateInstancesReducer, response) => {
         matchObject.selected = !matchObject.selected;
         if (matchObject.selected) matchObject.color = SELECTED_COLOR;
         else {
-          matchObject.color = DESELECTED_COLOR;
+          const instance = allLoadedInstances.find(i => i.metadata?.Id === response.payload.id);
+          matchObject.color = getNextColor(instance?.colorIndex);
         }
       }
 
+      // Only increment the counter if we're selecting a new instance
+      const newCount = findInstance && !findInstance.selected ? selectedInstancesCount + 1 : selectedInstancesCount;
+
       return Object.assign({}, state, {
         allLoadedInstances: allLoadedInstances,
         threeDObjects: threeDObjects,
         mappedCanvasData: getMappedCanvasData(allLoadedInstances),
+        selectedInstancesCount: newCount,
         event: {
           action: getInstancesTypes.UPDATE_INSTANCES,
           id: response.payload.id,
@@ -650,7 +658,7 @@ const InstancesReducer = (state = initialStateInstancesReducer, response) => {
           newInstance.color = { ...TEMPLATE_COLOR, a: 0.4 };
         } else {
           // For other instances, use next color from palette with opacity 0.3
-          newInstance.color = getNextColor(0.3);
+          newInstance.color = getNextColor(0, 0.3);
           // Store original color with full opacity for potential skeleton use
           newInstance.fullOpacityColor = { ...newInstance.color, a: 1.0 };
         }

applications/virtual-fly-brain/client/src/utils/constants.js

@@ -36,10 +36,10 @@ export const COLOR_PALETTE = [
 ];
 
 // Index to track the current color in the palette
-let colorIndex = 0;
+// let colorIndex = 0;
 
 // Function to get the next color in the sequence
-export const getNextColor = (opacity = 0.3) => {
+export const getNextColor = (colorIndex = 0, opacity = 0.3) => {
   const hexColor = COLOR_PALETTE[colorIndex];
   // Increment and loop back to beginning if needed
   colorIndex = (colorIndex + 1) % COLOR_PALETTE.length;
@@ -49,7 +49,7 @@ export const getNextColor = (opacity = 0.3) => {
   const g = parseInt(hexColor.substring(4, 6), 16) / 255;
   const b = parseInt(hexColor.substring(6, 8), 16) / 255;
 
-  return { r, g, b, a: opacity };
+  return { r, g, b, a: 0.3 };
 }
 
 // Convert hex to RGBA for existing functions