Improve entropy recalculations

CHANGELOG.md

@@ -1,5 +1,7 @@
 # Changelog
 
+* Performance improvement: We no longer recompute the entropy data (which can be expensive) when the entropy panel is toggled off or off-screen. ([#1879](https://github.com/nextstrain/auspice/pull/1879))
+
 ## version 2.59.1 - 2024/10/23
 
 

src/actions/entropy.js

@@ -13,9 +13,18 @@ export const updateEntropyVisibility = debounce((dispatch, getState) => {
     !entropy.genomeMap ||
     controls.animationPlayPauseButton !== "Play"
   ) {return;}
+
+  if (!controls.panelsToDisplay.includes("entropy") || entropy.onScreen===false) {
+    if (entropy.bars===undefined) {
+      return; // no need to dispatch another action - the state's already been invalidated
+    }
+    // clear the entropy data so we don't keep an out-of-date copy
+    return dispatch({type: types.ENTROPY_DATA, data: undefined, maxYVal: 1});
+  }
+
   const [data, maxYVal] = calcEntropyInView(tree.nodes, tree.visibility, entropy.selectedCds, entropy.showCounts);
   dispatch({type: types.ENTROPY_DATA, data, maxYVal});
-}, 500, { leading: true, trailing: true });
+}, 500, { leading: false, trailing: true });
 
 /**
  * Returns a thunk which makes zero or one dispatches to update the entropy reducer

src/actions/panelDisplay.js

@@ -1,15 +1,17 @@
 import { intersection } from "lodash";
 import { TOGGLE_PANEL_DISPLAY } from "./types";
+import { calcEntropyInView } from "../util/entropy";
 
 const gridPanels = ["tree", "measurements", "map"];
 export const numberOfGridPanels = (panels) => intersection(panels, gridPanels).length;
 export const hasMultipleGridPanels = (panels) => numberOfGridPanels(panels) > 1;
 
 export const togglePanelDisplay = (panelName) => (dispatch, getState) => {
-  const { controls } = getState();
+  const { controls, entropy, tree } = getState();
   const idx = controls.panelsToDisplay.indexOf(panelName);
   let panelsToDisplay;
-  if (idx === -1) {/* add */
+  const addPanel = idx===-1;
+  if (addPanel) {/* add */
     panelsToDisplay = controls.panelsAvailable.filter((n) =>
       controls.panelsToDisplay.indexOf(n) !== -1 || n === panelName
     );
@@ -19,5 +21,13 @@ export const togglePanelDisplay = (panelName) => (dispatch, getState) => {
   }
   const canTogglePanelLayout = hasMultipleGridPanels(panelsToDisplay);
   const panelLayout = canTogglePanelLayout ? controls.panelLayout : "full";
-  dispatch({type: TOGGLE_PANEL_DISPLAY, panelsToDisplay, panelLayout, canTogglePanelLayout});
+
+  /* If we're toggling on the entropy panel, and the entropy data is stale (it
+  becomes stale if an action which would normally update it is skipped due to
+  the entropy panel not being rendered) then we need to recalculate it here */
+  let entropyData, entropyMaxYVal;
+  if (addPanel && panelName==='entropy' && !entropy.bars) {
+    ([entropyData, entropyMaxYVal] = calcEntropyInView(tree.nodes, tree.visibility, entropy.selectedCds, entropy.showCounts));
+  }
+  dispatch({type: TOGGLE_PANEL_DISPLAY, panelsToDisplay, panelLayout, canTogglePanelLayout, entropyData, entropyMaxYVal});
 };

src/actions/recomputeReduxState.js

@@ -1014,6 +1014,7 @@ export const createStateFromQueryOrJSONs = ({
     const [entropyBars, entropyMaxYVal] = calcEntropyInView(tree.nodes, tree.visibility, entropy.selectedCds, entropy.showCounts);
     entropy.bars = entropyBars;
     entropy.maxYVal = entropyMaxYVal;
+    entropy.onScreen = true;
   }
 
   /* update frequencies if they exist (not done for new JSONs) */

src/actions/types.js

@@ -35,6 +35,7 @@ export const CHANGE_TREE_ROOT_IDX = "CHANGE_TREE_ROOT_IDX";
 export const TOGGLE_NARRATIVE = "TOGGLE_NARRATIVE";
 export const ENTROPY_DATA = "ENTROPY_DATA";
 export const ENTROPY_COUNTS_TOGGLE = "ENTROPY_COUNTS_TOGGLE";
+export const ENTROPY_ONSCREEN_CHANGE = "ENTROPY_ONSCREEN_CHANGE";
 export const PAGE_CHANGE = "PAGE_CHANGE";
 export const MIDDLEWARE_ONLY_ANIMATION_STARTED = "MIDDLEWARE_ONLY_ANIMATION_STARTED";
 export const URL_QUERY_CHANGE_WITH_COMPUTED_STATE = "URL_QUERY_CHANGE_WITH_COMPUTED_STATE";

src/components/entropy/entropyD3.js

@@ -465,11 +465,39 @@ EntropyChart.prototype._highlightSelectedBars = function _highlightSelectedBars(
   }
 };
 
+EntropyChart.prototype._drawLoadingState = function _drawLoadingState() {
+  this._groups.mainBars
+    .append("rect")
+    .attr("class", "loading")
+    .attr("x", 0)
+    .attr("y", 0)
+    .attr("width", () => this.scales.xMain.range()[1])
+    .attr("height", () => this.scales.y.range()[0])
+    .attr("fill-opacity", 0.1)
+  this._groups.mainBars
+    .append("text")
+    .attr("y", () => this.scales.y.range()[0]/2)
+    .attr("x", () => this.scales.xMain.range()[1]/2)
+    .attr("pointer-events", "none")
+    .attr("text-anchor", "middle")       // horizontal axis
+    .attr("dominant-baseline", "middle") // vertical axis
+    .style("fill", darkGrey)
+    .style("font-size", '5rem')
+    .style("font-weight", 200)
+    .text('data loading')
+}
+
 /* draw the bars (for each base / aa) */
 EntropyChart.prototype._drawBars = function _drawBars() {
   if (!this.okToDrawBars) {return;}
   this._groups.mainBars.selectAll("*").remove();
 
+  // bars may be undefined when the underlying data is marked as stale but the panel's still rendered
+  // (it's necessarily off-screen for this to occur, but we still call rendering code)
+  if (!this.bars) {
+    return this._drawLoadingState();
+  }
+
   /* Calculate bar width */
   const validXPos = this.scales.xMain.domain()[0]; // any value inside the scale's domain will do
   let barWidth = this.scales.xMain(validXPos+1) - this.scales.xMain(validXPos); // pixels between 2 nucleotides

src/components/entropy/index.js

@@ -12,10 +12,11 @@ import { tabGroup, tabGroupMember, tabGroupMemberSelected } from "../../globalSt
 import EntropyChart from "./entropyD3";
 import InfoPanel from "./infoPanel";
 import { changeEntropyCdsSelection, showCountsNotEntropy } from "../../actions/entropy";
+import { ENTROPY_ONSCREEN_CHANGE } from "../../actions/types";
 import { timerStart, timerEnd } from "../../util/perf";
 import { encodeColorByGenotype } from "../../util/getGenotype";
 import { nucleotide_gene } from "../../util/globals";
-import { getCdsByName } from "../../util/entropy";
+import { getCdsByName, calcEntropyInView } from "../../util/entropy";
 import { StyledTooltip } from "../controls/styles";
 import "../../css/entropy.css";
 
@@ -69,6 +70,7 @@ const getStyles = (width) => {
     maxYVal: state.entropy.maxYVal,
     showCounts: state.entropy.showCounts,
     loaded: state.entropy.loaded,
+    onScreen: state.entropy.onScreen,
     colorBy: state.controls.colorBy,
     /**
      * Note that zoomMin & zoomMax only represent the state when changed by a URL
@@ -194,9 +196,28 @@ class Entropy extends React.Component {
     }
     this.setState({chart});
   }
+  visibilityOnScreenChange(entries) {
+    if (entries.length!==1) {
+      return console.error(`Unexpected IntersectionObserver callback entries of length`, entries.length);
+    }
+    const onScreen = entries[0].isIntersecting;
+    if (onScreen===this.props.onScreen) return; // can happen when component initially rendered
+    // if gone off screen or come back on screen with the bars still valid then we don't need to recalculate entropy data
+    if (!onScreen || this.props.bars) {
+      return this.props.dispatch({type: ENTROPY_ONSCREEN_CHANGE, onScreen})
+    }
+    // else if back on screen and the bars are invalid then we need to regenerate them
+    this.props.dispatch((dispatch, getState) => {
+      const { entropy, tree } = getState();
+      const [entropyData, entropyMaxYVal] = calcEntropyInView(tree.nodes, tree.visibility, entropy.selectedCds, entropy.showCounts);
+      dispatch({type: ENTROPY_ONSCREEN_CHANGE, onScreen, entropyData, entropyMaxYVal});
+    });
+  }
   componentDidMount() {
     if (this.props.loaded) {
-      this.setUp(this.props);
+      this.setUp(this.props); 
+      const observer = new IntersectionObserver(this.visibilityOnScreenChange.bind(this), {threshold: 0.0});
+      observer.observe(this.d3entropy)
     }
   }
   UNSAFE_componentWillReceiveProps(nextProps) {

src/reducers/entropy.js

@@ -22,6 +22,16 @@ const Entropy = (state = defaultEntropyState(), action) => {
         bars: action.data,
         maxYVal: action.maxYVal
       });
+    case types.TOGGLE_PANEL_DISPLAY:
+      if (action.entropyData) {
+        return {...state, bars: action.entropyData, maxYVal: action.entropyMaxYVal}
+      }
+      return state;
+    case types.ENTROPY_ONSCREEN_CHANGE:
+      if (action.entropyData) {
+        return {...state, onScreen: action.onScreen, bars: action.entropyData, maxYVal: action.entropyMaxYVal}
+      }
+      return {...state, onScreen: action.onScreen};
     case types.ENTROPY_COUNTS_TOGGLE:
       return Object.assign({}, state, {
         showCounts: action.showCounts