From 45700118650ec58adc5dbaabdc204d070bad698c Mon Sep 17 00:00:00 2001 From: Victor Lin <13424970+victorlin@users.noreply.github.com> Date: Fri, 4 Oct 2024 16:40:55 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20use=20boolean=20query=20param?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/actions/recomputeReduxState.js | 6 ++++-- src/components/tree/phyloTree/layouts.js | 15 +++++---------- src/components/tree/tree.js | 16 ++-------------- src/middleware/changeURL.js | 8 +++++++- src/reducers/controls.ts | 2 +- src/util/globals.js | 2 +- 6 files changed, 20 insertions(+), 29 deletions(-) diff --git a/src/actions/recomputeReduxState.js b/src/actions/recomputeReduxState.js index 2ff709fad..a4c059e11 100644 --- a/src/actions/recomputeReduxState.js +++ b/src/actions/recomputeReduxState.js @@ -64,8 +64,10 @@ const modifyStateViaURLQuery = (state, query) => { if (query.m && state.branchLengthsToDisplay === "divAndDate") { state["distanceMeasure"] = query.m; } - if (query.focus) { - state["treeFocus"] = query.focus; + if (query.focus === undefined) { + state["treeFocus"] = false; + } else { + state["treeFocus"] = true; } if (query.c) { state["colorBy"] = query.c; diff --git a/src/components/tree/phyloTree/layouts.js b/src/components/tree/phyloTree/layouts.js index 27d1ee053..536414303 100644 --- a/src/components/tree/phyloTree/layouts.js +++ b/src/components/tree/phyloTree/layouts.js @@ -297,11 +297,11 @@ export const setDistance = function setDistance(distanceAttribute) { * rectangularLayout, radialLayout, createChildrenAndParents * side effects: node.displayOrder and node.displayOrderRange (i.e. in the phyloTree node) */ -export const calcYValues = (nodes, spacing = "even") => { +export const calcYValues = (nodes, focus) => { // console.log("calcYValues started with ", spacing); let total = 0; /* cumulative counter of y value at tip */ let calcY; /* fn called calcY(node) to return some amount of y value at a tip */ - if (spacing.includes("focus") && 'visibility' in nodes[0]) { + if (focus && 'visibility' in nodes[0]) { const numberOfTips = nodes.length; const numTipsVisible = nodes.filter((d) => !d.hasChildren && d.visibility === NODE_VISIBLE).length; const yPerVisible = (0.8 * numberOfTips) / numTipsVisible; @@ -310,8 +310,7 @@ export const calcYValues = (nodes, spacing = "even") => { total += node.visibility === NODE_VISIBLE ? yPerVisible : yPerNotVisible; return total; }; - } else { /* fall back to even spacing */ - if (spacing !== "even") console.warn("falling back to even spacing of y values. Unknown arg:", spacing); + } else { /* fall back to no focus */ calcY = () => ++total; } @@ -336,15 +335,11 @@ export const calcYValues = (nodes, spacing = "even") => { /** * assigns the attribute this.treeFocus and calls the function that * recalculates yvalues based on treeFocus setting - * @param treeFocus -- how to zoom nodes, eg ["even", "focus"] + * @param treeFocus -- whether to focus on filtered nodes */ export const setTreeFocus = function setTreeFocus(treeFocus) { timerStart("setTreeFocus"); - if (typeof treeFocus === "undefined") { - this.treeFocus = "even"; - } else { - this.treeFocus = treeFocus; - } + this.treeFocus = treeFocus || false; calcYValues(this.nodes, this.treeFocus); timerEnd("setTreeFocus"); }; diff --git a/src/components/tree/tree.js b/src/components/tree/tree.js index 207546cd4..feb91c79d 100644 --- a/src/components/tree/tree.js +++ b/src/components/tree/tree.js @@ -43,7 +43,7 @@ class Tree extends React.Component { } redrawTree = () => { - this.props.dispatch({ type: CHANGE_TREE_FOCUS, data: "even" }); + this.props.dispatch({ type: CHANGE_TREE_FOCUS, focus: false }); this.props.dispatch(updateVisibleTipsAndBranchThicknesses({ root: [0, 0] })); @@ -183,19 +183,7 @@ class Tree extends React.Component { } focusOnSelected = () => { - // if currently set to "even", start at "focus" - let treeFocusData = "focus"; - if (this.props.treeFocus.includes("focus")) { - // if currently at "focus", increment to "focus-2" - if (!this.props.treeFocus.includes("-")) { - treeFocusData = "focus-2"; - } else { - // if currently at "focus-2", increment to "focus-3", etc... - const increment = parseInt(this.props.treeFocus.split('-')[1], 10) + 1; - treeFocusData = "focus-" + increment.toString(); - } - } - this.props.dispatch({ type: CHANGE_TREE_FOCUS, data: treeFocusData }); + this.props.dispatch({ type: CHANGE_TREE_FOCUS, focus: true }); }; zoomToSelected = () => { diff --git a/src/middleware/changeURL.js b/src/middleware/changeURL.js index b728ab405..9140a72a4 100644 --- a/src/middleware/changeURL.js +++ b/src/middleware/changeURL.js @@ -141,7 +141,13 @@ export const changeURLMiddleware = (store) => (next) => (action) => { break; } case types.CHANGE_TREE_FOCUS: { - query.z = action.data === state.controls.defaults.treeFocus ? undefined : action.data; + if (!("focus" in query) && action.focus) { + // "null" is truthy - see query.ci implementation + query.focus = null; + } + else if (("focus" in query) && !action.focus) { + query.focus = undefined; + } break; } case types.TOGGLE_SIDEBAR: { diff --git a/src/reducers/controls.ts b/src/reducers/controls.ts index 8f202d311..ea34b62d5 100644 --- a/src/reducers/controls.ts +++ b/src/reducers/controls.ts @@ -197,7 +197,7 @@ const Controls = (state: ControlsState = getDefaultControlsState(), action): Con } case types.CHANGE_TREE_FOCUS: return Object.assign({}, state, { - treeFocus: action.data + treeFocus: action.focus }); case types.CHANGE_DATES_VISIBILITY_THICKNESS: { const newDates: Partial = { quickdraw: action.quickdraw }; diff --git a/src/util/globals.js b/src/util/globals.js index 135c695fa..19483e9ce 100644 --- a/src/util/globals.js +++ b/src/util/globals.js @@ -27,7 +27,7 @@ export const defaultColorBy = "country"; export const defaultGeoResolution = "country"; export const defaultLayout = "rect"; export const defaultDistanceMeasure = "num_date"; -export const defaultTreeFocus = "even"; +export const defaultTreeFocus = false; export const defaultDateRange = 6; export const date_select = true; export const file_prefix = "Zika_";