Color tree by measurements

src/actions/measurements.ts

@@ -12,6 +12,7 @@ import {
   CHANGE_MEASUREMENTS_COLOR_GROUPING,
   CHANGE_MEASUREMENTS_DISPLAY,
   CHANGE_MEASUREMENTS_GROUP_BY,
+  REMOVE_METADATA,
   TOGGLE_MEASUREMENTS_OVERALL_MEAN,
   TOGGLE_MEASUREMENTS_THRESHOLD,
 } from "./types";
@@ -566,7 +567,12 @@ export const applyMeasurementsColorBy = (
   groupingValue: string
 ): ThunkFunction => (dispatch, getState) => {
   const { controls, measurements } = getState();
-  const measurementColorBy = `m-${groupingValue}`;
+
+  function encodeMeasurementColorBy(groupingValue: string): string {
+    const measurementColoringPrefix = "m-";
+    return `${measurementColoringPrefix}${groupingValue}`;
+  }
+  const measurementColorBy = encodeMeasurementColorBy(groupingValue);
 
   const activeMeasurementFilters = getActiveMeasurementFilters(controls.measurementsFilters);
   const strainMeasurementValues: {[strain: string]: number[]} = measurements.collectionToDisplay.measurements
@@ -605,6 +611,9 @@ export const applyMeasurementsColorBy = (
     }
   }
 
+  if (controls.measurementsColorGrouping !== undefined) {
+    dispatch({type: REMOVE_METADATA, nodeAttrsToRemove: [encodeMeasurementColorBy(controls.measurementsColorGrouping)]});
+  }
   if (controls.measurementsColorGrouping !== groupingValue) {
     dispatch({type: CHANGE_MEASUREMENTS_COLOR_GROUPING, controls:{measurementsColorGrouping: groupingValue}});
   }

src/actions/types.js

@@ -31,6 +31,7 @@ export const CHANGE_PANEL_LAYOUT = "CHANGE_PANEL_LAYOUT";
 export const TOGGLE_PANEL_DISPLAY = "TOGGLE_PANEL_DISPLAY";
 export const SET_MODAL = "SET_MODAL";
 export const ADD_EXTRA_METADATA = "ADD_EXTRA_METADATA";
+export const REMOVE_METADATA = "REMOVE_METADATA";
 export const CHANGE_TREE_ROOT_IDX = "CHANGE_TREE_ROOT_IDX";
 export const TOGGLE_NARRATIVE = "TOGGLE_NARRATIVE";
 export const ENTROPY_DATA = "ENTROPY_DATA";

src/reducers/controls.ts

@@ -482,6 +482,13 @@ const Controls = (state: ControlsState = getDefaultControlsState(), action): Con
       }
       return newState;
     }
+    case types.REMOVE_METADATA: {
+      const coloringsPresentOnTree = new Set(state.coloringsPresentOnTree);
+      action.nodeAttrsToRemove.forEach((colorBy: string): void => {
+        coloringsPresentOnTree.delete(colorBy);
+      })
+      return {...state, coloringsPresentOnTree};
+    }
     case types.UPDATE_VISIBILITY_AND_BRANCH_THICKNESS: {
       const colorScale = Object.assign({}, state.colorScale, { visibleLegendValues: action.visibleLegendValues });
       return Object.assign({}, state, { colorScale: colorScale });

src/reducers/metadata.js

@@ -32,6 +32,15 @@ const Metadata = (state = {
       }
       return Object.assign({}, state, {colorings, geoResolutions});
     }
+    case types.REMOVE_METADATA: {
+      const colorings = {...state.colorings};
+      action.nodeAttrsToRemove.forEach((colorBy) => {
+        if (colorBy in colorings) {
+          delete colorings[colorBy];
+        }
+      })
+      return {...state, colorings}
+    }
     case types.SET_AVAILABLE: {
       if (state.buildUrl) {
         return state; // do not use data from getAvailable to overwrite a buildUrl set from a dataset JSON

src/reducers/tree/index.ts

@@ -1,6 +1,6 @@
 import { AnyAction } from "@reduxjs/toolkit";
 import { countTraitsAcrossTree } from "../../util/treeCountingHelpers";
-import { addNodeAttrs } from "../../util/treeMiscHelpers";
+import { addNodeAttrs, removeNodeAttrs } from "../../util/treeMiscHelpers";
 import * as types from "../../actions/types";
 import { TreeState, TreeTooState } from "./types";
 
@@ -92,6 +92,23 @@ const Tree = (
         nodeAttrKeys
       };
     }
+    case types.REMOVE_METADATA: {
+      // remove data from `nodes` in-place, so no redux update will be triggered if you only listen to `nodes`
+      removeNodeAttrs(state.nodes, action.nodeAttrsToRemove);
+      const nodeAttrKeys = new Set(state.nodeAttrKeys);
+      const totalStateCounts = {...state.totalStateCounts};
+      action.nodeAttrsToRemove.forEach((attrKey: string): void => {
+        nodeAttrKeys.delete(attrKey);
+        if (attrKey in totalStateCounts) {
+          delete totalStateCounts[attrKey];
+        }
+      })
+      return {
+        ...state,
+        totalStateCounts,
+        nodeAttrKeys,
+      }
+    }
     default:
       return state;
   }

src/reducers/tree/treeToo.ts

@@ -1,6 +1,6 @@
 import { AnyAction } from "@reduxjs/toolkit";
 import { getDefaultTreeState } from ".";
-import { addNodeAttrs } from "../../util/treeMiscHelpers";
+import { addNodeAttrs, removeNodeAttrs } from "../../util/treeMiscHelpers";
 import * as types from "../../actions/types";
 import { TreeTooState } from "./types";
 
@@ -71,6 +71,10 @@ const treeToo = (
       // add data into `nodes` in-place, so no redux update will be triggered if you only listen to `nodes`
       addNodeAttrs(state.nodes, action.newNodeAttrs);
       return state;
+    case types.REMOVE_METADATA:
+      // remove data from `nodes` in-place, so no redux update will be triggered if you only listen to `nodes`
+      removeNodeAttrs(state.nodes, action.nodeAttrsToRemove);
+      return state;
     default:
       return state;
   }

src/util/treeMiscHelpers.js

@@ -309,3 +309,20 @@ export const addNodeAttrs = (nodes, newAttrs) => {
     }
   });
 };
+
+/**
+ * Remove attrs from the `nodes` data structure.
+ * @param {Array} nodes
+ * @param {Array} attrsToRemove
+ */
+export const removeNodeAttrs = (nodes, attrsToRemove) => {
+  nodes.forEach((node) => {
+    if(!node.node_attrs) return;
+
+    attrsToRemove.forEach((attrName) => {
+      if(attrName in node.node_attrs){
+        delete node.node_attrs[attrName];
+      }
+    })
+  })
+}