Add URL query for show all (branch) labels

Tested manually & via /narratives/test/simultaneous-tree-updates

Closes #1573

narratives/test_simultaneous-tree-updates.md

@@ -11,16 +11,24 @@ abstract: "A narrative to explore simultaneous changes to tree state. The aim is
 ---
 
 
-# [P1: Change color-by to num_date](http://localhost:4000/flu/seasonal/h3n2/ha/3y?d=tree&c=num_date)
+# [P1: Change coloring to sampling date](http://localhost:4000/flu/seasonal/h3n2/ha/3y?d=tree&c=num_date&branchLabel=aa)
+
 Check that both the branches and tips update.
 
-# [P2: Zoom into clade A1](http://localhost:4000/flu/seasonal/h3n2/ha/3y?d=tree&c=num_date&label=clade:A1)
+The clade labels should now show selected amino acids (with the selecting being done by auspice).
+
+# [P2: Zoom into clade 3C.2a1b.2a.2](http://localhost:4000/flu/seasonal/h3n2/ha/3y?d=tree&c=num_date&label=clade:3C.2a1b.2a.2&branchLabel=aa&showBranchLabels=all)
+
+We simultaneously zoom into clade 3C.2a1b.2a.2 (top right section of tree) and show _all_ AA mutations as branch labels.
+If you go to the previous slide the aa mutation labels should revert to only showing a subset.
+
+# [P3: Zoom out to clade 3C.2a1b.2 _and_ change color](http://localhost:4000/flu/seasonal/h3n2/ha/3y?d=tree&label=clade:3C.2a1b.2)
+Check that the coloring of the branches and tips update as we zoom out (slightly).
 
-# [P3: Zoom into clade A1b _and_ change color](http://localhost:4000/flu/seasonal/h3n2/ha/3y?d=tree&label=clade:A1b)
-Check that the coloring of the branches and tips update as we zoom in.
+The coloring should be back to the default (clade), and so should the branch labels (clade also).
 
-# [P4: Lots of simultaneous changes](http://localhost:4000/flu/seasonal/h3n2/ha/3y?c=lbi&d=tree&dmin=2017-01-01&f_region=North%20America&label=clade:3c2.A&m=div)
-* Zoomed out to near the root (clade 3c2.A)
+# [P4: Lots of simultaneous changes](http://localhost:4000/flu/seasonal/h3n2/ha/3y?c=lbi&d=tree&dmin=2017-01-01&f_region=North%20America&label=clade:3C.2a&m=div)
+* Zoomed out to near the root (clade 3C.2a)
 * Changed the horizontal scale to divergence
 * Changed the color-by to LBI (and legend should be open)
 * Filtered to North American Samples (i.e. the majority of tips are not visible).

src/actions/recomputeReduxState.js

@@ -127,6 +127,9 @@ const modifyStateViaURLQuery = (state, query) => {
     state.selectedBranchLabel = query.branchLabel;
     // do not modify the default (only the JSON can do this)
   }
+  if (query.showBranchLabels === "all") {
+    state.showAllBranchLabels = true;
+  }
   if (query.sidebar) {
     if (query.sidebar === "open") {
       state.defaults.sidebarOpen = true;
@@ -191,6 +194,8 @@ const restoreQueryableStateToDefaults = (state) => {
   state.panelsToDisplay = state.panelsAvailable.slice();
   state.tipLabelKey = strainSymbol;
   state.scatterVariables = {};
+
+  state.showAllBranchLabels = false;
   // console.log("state now", state);
   return state;
 };

src/components/controls/choose-branch-labelling.js

@@ -43,7 +43,7 @@ class ChooseBranchLabelling extends React.Component {
           <Toggle
             display
             on={this.props.showAll}
-            callback={() => this.props.dispatch({type: TOGGLE_SHOW_ALL_BRANCH_LABELS})}
+            callback={() => this.props.dispatch({type: TOGGLE_SHOW_ALL_BRANCH_LABELS, value: !this.props.showAll})}
             label={t("sidebar:Show all labels")}
             style={{paddingBottom: "5px", paddingTop: "10px"}}
           />

src/middleware/changeURL.js

@@ -45,6 +45,11 @@ export const changeURLMiddleware = (store) => (next) => (action) => {
         undefined :
         action.value;
       break;
+    case types.TOGGLE_SHOW_ALL_BRANCH_LABELS:
+      /* This is not yet settable in display_defaults, and thus we want a URL query
+      that will still make sense when the default for the given branch labelling is "show all" */
+      query.showBranchLabels = action.value ? 'all' : undefined;
+      break;
     case types.CHANGE_ZOOM:
       /* entropy panel genome zoom coordinates */
       query.gmin = action.zoomc[0] === state.controls.absoluteZoomMin ? undefined : action.zoomc[0];

src/reducers/controls.js

@@ -127,7 +127,7 @@ const Controls = (state = getDefaultControlsState(), action) => {
     case types.CHANGE_BRANCH_LABEL:
       return Object.assign({}, state, { selectedBranchLabel: action.value });
     case types.TOGGLE_SHOW_ALL_BRANCH_LABELS:
-      return Object.assign({}, state, { showAllBranchLabels: !state.showAllBranchLabels });
+      return Object.assign({}, state, { showAllBranchLabels: action.value });
     case types.CHANGE_LAYOUT:
       return Object.assign({}, state, {
         layout: action.layout,