From b803c7b478818b8a016da11a16f9d609e3dfff27 Mon Sep 17 00:00:00 2001 From: James Hadfield Date: Thu, 20 Oct 2022 14:53:31 +1300 Subject: [PATCH] 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,