[entropy] skip recalc if panel's not rendered

Improves the performance of most interactions in Auspice when the
`<Entropy>` panel's not displayed by not constantly updating the entropy
calculations. The downside is when the panel's toggled on the initial
rendering is slightly slower as we also have to compute the data at that
point.

Note that we still compute the data within `recomputeReduxState.js`
(rather than always deferring to the `<Entropy>` panel) so we don't have
to worry about narrative page changes.

src/actions/entropy.js

@@ -13,6 +13,15 @@ export const updateEntropyVisibility = debounce((dispatch, getState) => {
     !entropy.genomeMap ||
     controls.animationPlayPauseButton !== "Play"
   ) {return;}
+
+  if (!controls.panelsToDisplay.includes("entropy")) {
+    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: false, trailing: true });

src/components/entropy/entropyD3.js

@@ -470,6 +470,9 @@ EntropyChart.prototype._drawBars = function _drawBars() {
   if (!this.okToDrawBars) {return;}
   this._groups.mainBars.selectAll("*").remove();
 
+  // bars may be undefined (indicating the underlying data became stale)
+  if (!this.bars) {return;}
+
   /* 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_DATA } 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";
 
@@ -177,7 +178,21 @@ class Entropy extends React.Component {
       </div>
     );
   }
+  requestRecalculationOfBars() {
+    /* The <Entropy> component is now responsible for requesting a recalculation of the underlying entropy data
+    as this allows us to skip calculations when (e.g.) the panel is not rendered */
+    this.props.dispatch((dispatch, getState) => {
+      const { entropy, tree } = getState();
+      const [bars, maxYVal] = calcEntropyInView(tree.nodes, tree.visibility, entropy.selectedCds, entropy.showCounts);
+      dispatch({type: ENTROPY_DATA, data: bars, maxYVal});
+    });
+  }
   setUp(props) {
+    if (!props.bars) {
+      // On initial dataset load the data will not have been calculated. Requesting it will result in a
+      // props update and CWRP will render the chart
+      return this.requestRecalculationOfBars();
+    }
     const chart = new EntropyChart(
       this.d3entropy,
       props.genomeMap,