Merge pull request #1575 from nextstrain/feat/branch-label-toggle-url…

…-query

Add URL query for show all (branch) labels

docs/advanced-functionality/view-settings.md

@@ -1,10 +1,10 @@
 # View Settings
 
 
-View settings refer to things such as how we display the tree (radal? root-to-tip?), what panels we display (map? tree? both?), what colouring we are using etcetera.
+View settings refer to things such as how we display the tree (radial? root-to-tip?), what panels we display (map? tree? both?), what colouring we are using etcetera.
 There are three ways these can be controlled:
 1. The defaults are configured by the dataset creators (and stored as "display defaults" in the dataset JSON).
-This allows 
+This allows
 2. Interacting with the visualisation (e.g. changing the color-by) modifies the view, and the URL is changed accordingly.
 For instance, change [nextstrain.org/zika](https://nextstrain.org/zika) to have a color-by of author, and you'll see the URL silently update to [?c=author](https://nextstrain.org/zika?c=author).
 If you reload the page or share this URL, then the color-by is set via this URL.
@@ -51,7 +51,7 @@ For instance, go to [nextstrain.org/flu/seasonal/h3n2/ha/2y](https://nextstrain.
 
 URL queries are the part of the URL coming after the `?` character, and typically consist of `key=value` -- for instance [nextstrain.org/zika?c=author](https://nextstrain.org/zika?c=author) has a query with a key `c` and value `author`.
 Multiple queries are separated by the `&` character.
-All URL queries modify the view away from the default settings -- if you change back to a default then that URL query will dissapear.
+All URL queries modify the view away from the default settings -- if you change back to a default then that URL query will disappear.
 
 | Key        | Description | Example(s)  |
 | ---        | ----------- | --------------  |
@@ -77,6 +77,7 @@ All URL queries modify the view away from the default settings -- if you change
 | `n`        | Narrative page number | `n=1` goes to the first page |
 | `s`        | Selected strain | `s=1_0199_PF` |
 | `branchLabel` | Branch labels to display | `branchLabel=aa` |
+| `showBranchLabels` | Force all branch labels to be displayed | `showBranchLabels=all` |
 | `label`    | Labeled branch that tree is zoomed to | `label=clade:B3`, `label=lineage:relapse` |
 | `clade`    | _DEPRECATED_ Labeled clade that tree is zoomed to | `clade=B3` should now become `label=clade:B3` |
 | `sidebar`  | Force the sidebar into a certain state | `sidebar=closed` or `sidebar=open` |

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,