From b803c7b478818b8a016da11a16f9d609e3dfff27 Mon Sep 17 00:00:00 2001 From: James Hadfield Date: Thu, 20 Oct 2022 14:53:31 +1300 Subject: [PATCH 1/3] Add URL query for show all (branch) labels Tested manually & via /narratives/test/simultaneous-tree-updates Closes #1573 --- narratives/test_simultaneous-tree-updates.md | 20 +++++++++++++------ src/actions/recomputeReduxState.js | 5 +++++ .../controls/choose-branch-labelling.js | 2 +- src/middleware/changeURL.js | 5 +++++ src/reducers/controls.js | 2 +- 5 files changed, 26 insertions(+), 8 deletions(-) diff --git a/narratives/test_simultaneous-tree-updates.md b/narratives/test_simultaneous-tree-updates.md index 5380f08a5..03cf80e23 100644 --- a/narratives/test_simultaneous-tree-updates.md +++ b/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). diff --git a/src/actions/recomputeReduxState.js b/src/actions/recomputeReduxState.js index 2158e79ab..000fd4561 100644 --- a/src/actions/recomputeReduxState.js +++ b/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; }; diff --git a/src/components/controls/choose-branch-labelling.js b/src/components/controls/choose-branch-labelling.js index 0c7fdc9ba..20ed093fa 100644 --- a/src/components/controls/choose-branch-labelling.js +++ b/src/components/controls/choose-branch-labelling.js @@ -43,7 +43,7 @@ class ChooseBranchLabelling extends React.Component { 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"}} /> diff --git a/src/middleware/changeURL.js b/src/middleware/changeURL.js index 44d1da6fa..cf12914c6 100644 --- a/src/middleware/changeURL.js +++ b/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]; diff --git a/src/reducers/controls.js b/src/reducers/controls.js index 794b87cd3..64825eaed 100644 --- a/src/reducers/controls.js +++ b/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, From 0f9de4d5d4fe1b704cb791ef9f39540744d7c593 Mon Sep 17 00:00:00 2001 From: Jover Date: Thu, 20 Oct 2022 14:07:48 -0700 Subject: [PATCH 2/3] docs: delete excess whitespace and fix typos --- docs/advanced-functionality/view-settings.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/advanced-functionality/view-settings.md b/docs/advanced-functionality/view-settings.md index 81d42c992..8e657b773 100644 --- a/docs/advanced-functionality/view-settings.md +++ b/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) | | --- | ----------- | -------------- | From a0645c6fa3696bc7290b332dfc41751086d7ba08 Mon Sep 17 00:00:00 2001 From: Jover Date: Thu, 20 Oct 2022 14:08:19 -0700 Subject: [PATCH 3/3] docs: Add `showBranchLabels` to URL params table --- docs/advanced-functionality/view-settings.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/advanced-functionality/view-settings.md b/docs/advanced-functionality/view-settings.md index 8e657b773..e79f100e1 100644 --- a/docs/advanced-functionality/view-settings.md +++ b/docs/advanced-functionality/view-settings.md @@ -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` |