Focal zoom mode acts on both axis #1993

trvrb · 2025-06-10T21:33:31Z

This causes date updates and other filters to dynamically update the XY bounds, ensuring that the tree fills the page. This works well for zooming to early samples and give a generally more dynamic feeling. It combines very well with "focus on selected".

I believe that this could hacked on to combine with "focus on selected", but the intent here is just to produce a review app for playing around with.

jameshadfield · 2025-06-23T06:12:55Z

I moved this forward a little bit today, mainly by allowing the "focus on selected" toggle to now toggle between the "old" auspice layout and the updated focus layout which essentially defines the viewport as the smallest rectangle which includes all branches/tips which are "on" as well as using the accordian-zoom.

There's still some little bugs, and probably more undiscovered ones. The biggest change is that the inView property no longer means what it says, and this has a few side-effects including for the downloaded TSVs and also the reset/zoom-to button behaviour. Nothing too major I don't think.

src/components/tree/phyloTree/layouts.ts

jameshadfield · 2025-06-24T03:34:24Z

src/components/tree/tree.tsx

 export default withTranslation()(TreeComponent);
+
+
+function TreeButtons(props: TreeComponentProps): ReactElement {


There is subtlety around how the tree buttons ("zoom to selected" etc) behave with this functionality!

Situation 1 ZIKV, filtered to USVI & focus on Selected:

NOTE: the green "root" shown in focus on selected is not tracked in redux state - it only looks like a root due to a viewport shift. Let's call this the "viewport root". We can figure it out with a tree traversal to find the first visible node.

What does clicking on the viewport root and each of the buttons do in this context? My thoughts:

"-" doesn't make sense and should be inactivated. (Same as clicking on the viewport root branch)

"zoom to selected" doesn't make sense, as we're continually keeping things focused on selected!

"zoom to root" - should be shown inactivated (see situation 3)

Situation 2
Things get more interesting when we shift the min date slider, as we are presented with a situation Auspice has so far completely avoided:

We now have three viewport roots. In this context:

clicking on any of the viewport roots zooms into that subtree (current behaviour)

"-" doesn't make sense and should be inactivated

"zoom to selected" doesn't make sense and should be hidden

"zoom to root" - should be shown inactivated (see situation 3)

Situation 3 when zoomed into a USVI subtree, e.g:

clicking on the viewport root does make sense and should zoom out (taking us towards the screenshots in situation 1 or 2, depending on the min-date slider value)

"-" should do the same

"zoom to selected" doesn't make sense and should be hidden

"zoom to root" does make sense, and we should zoom out to the screenshots in situation 1 or 2, depending on the min-date slider value. This button should be renamed to something like "show all selected" or something.

cc @trvrb does this line up with your expectations?

Simplifies the main `TreeComponent` which is a welcome change in and of itself, and also sets the stage for upcoming changes such as <#1993> which will add complexity to the buttons functionality, as well as the next commit...

victorlin · 2025-11-07T01:13:50Z

Thanks for showing that this is possible!

My main concern is the conflation of "zoom" and "focus" as defined in #1368 (comment).

I'd suggest putting this new feature behind its own toggle, at least for testing purposes. Example: 82c3e35
This enables views such as "zoom only" below which are currently not possible in this PR.

It might make more sense to use this feature to replace the existing "Zoom to selected" button, rather than adding it to the "Focus on selected" toggle.

jameshadfield · 2025-11-07T02:05:47Z

src/components/controls/toggle-focus.tsx

 }
+
+
+function setFocus(newToggleValue: null|"selected"): ThunkFunction {


[@victorlin] My main concern is the conflation of "zoom" and "focus" as defined in #1368 (comment).

For testing purposes, perhaps a review app of 82c3e35 would be good enough? Conceptually this PR can split them out, but there would be a lot of lines of changed code.

There's always a tension between more controls & complexity vs simplicity but less control. The conversations I had with Trevor led us to the view that exposing a simpler UI here was preferred. I'd like to hear what others think about this...

P.S. Your definitions of "zoom" vs "focus" are really helpful for internal discussions, but I don't think there's a problem calling everything "focus" in the Auspice UI if we do choose to use a single toggle.

PR for review app: #2028

Allowing views as described in #1993 (comment) would be the only reason to distinguish "zoom" vs. "focus" in the UI. I think it's fine to combine under a single toggle if there's not much benefit to having such views – I'm not a user so I can't tell!

After playing around with both, I'd prefer the simpler UI with just a single toggle.

jameshadfield · 2025-11-07T02:07:20Z

src/components/tree/treeButtons.tsx

-      <button style={activeZoomButton ? selectedButtonStyles : unselectedButtonStyles} onClick={zoomToSelected}>
-        {props.t("Zoom to Selected")}
-      </button>
+      {showZoomButton && (


[@victorlin] It might make more sense to use this feature to replace the existing "Zoom to selected" button, rather than adding it to the "Focus on selected" toggle.

I think it's a toggle state not a button action, as I like the dynamic behaviour as you change the date slider / filters. But you're right that they are similar, which is why I got rid of the "zoom to selected" button when in focus mode!

[@victorlin] This enables views such as "zoom only" below which are currently not possible in this PR.

I might be confusing things here, but seems like the "zoom only" view is possible in this PR if you switch off the "Focus on selected" toggle in the sidebar. It took me a bit to realize this was possible since I had to scroll down the sidebar to see the toggle was on.

My feedback here would be to make the "Focus on Selected" toggle more prominent and/or some other indication that the tree is currently in the "focused" state. Since it's expected to be used in conjunction with the date slider/filters, I'd move it to closer to those controls. Maybe the top of the "Tree" section?

I might be confusing things here, but seems like the "zoom only" view is possible in this PR if you switch off the "Focus on selected" toggle in the sidebar.

I don't think so – switching off "Focus on selected" disables both zoom and focus. Here's the comparison using review app from #2028:

Zoom + focus: https://nextstrain-s-nextstrain-83gzry.herokuapp.com/seasonal-flu/h3n2/ha/2y?dmin=2023-08-08&f_division=Washington&zoom=dynamic&focus=selected

Zoom only: https://nextstrain-s-nextstrain-83gzry.herokuapp.com/seasonal-flu/h3n2/ha/2y?dmin=2023-08-08&f_division=Washington&zoom=dynamic

Ah I see, thanks for the examples in the review app. I was mixing up your idea of "dynamic zoom" with the existing "zoom to selected" button.

trvrb · 2026-01-16T02:27:59Z

I was just reaching for this to try to look at https://nextstrain.org/measles/genome?c=division&dmin=2025-01-01&f_country=USA&focus=selected. It would be nice to have this merged (I didn't actually realize it wasn't). I do think that a single toggle to "Focus on selected" that applies both to y values and to x values makes sense semantically to me. Note with this measles example I can't click "Zoom to selected" in the tree panel.

Fixes a (never encountered?) bug where both can be enabled via URL queries, which led to an inconsistent / broken UI. (This state wasn't possible to get into by interacting with Auspice.)

Fixes an omission where the `changeDateFilter` action wouldn't set certain tree properties on the action and the reducer would therefore set them to undefined. This became apparent in (forthcoming) temporal zoom work.

This simplifies calling functions and makes the forthcoming work on temporal focus much more straightforward. While this follows an established pattern in Auspice it makes out-of-sync errors easy. We should explore allowing PhyloTree to simply see into the redux store's controls & {tree,treeToo} state and then the `change` functions can focus (!) on working out which rendering functions to call and forget about having to also update phylotree state.

This causes date updates and other filters to dynamically update the XY bounds, ensuring that the tree fills the page. This works well for zooming to early samples and give a generally more dynamic feeling. It combines very well with "focus on selected", which is why we combine the two features. Co-authored-by: james hadfield <jameshadfield@users.noreply.github.com> Co-authored-by: Trevor Bedford <trevor@bedford.io>

When we're focused there is no state where this button makes sense, as focus means we change the viewport to surround the selected nodes (where selected is the intersection of filters, date range and selected subtree (inViewRootNode))

Simplifies the main `TreeComponent` which is a welcome change in and of itself, and also sets the stage for upcoming changes such as <#1993> which will add complexity to the buttons functionality, as well as the next commit...

trvrb added proposal Proposals that warrant further discussion experiment PRs which may never be merged labels Jun 10, 2025

nextstrain-bot temporarily deployed to auspice-zoom-to-visible-krncur June 10, 2025 21:33 Inactive

trvrb force-pushed the zoom-to-visible branch from e14089e to 1e8a8dd Compare June 10, 2025 21:37

trvrb temporarily deployed to auspice-zoom-to-visible-krncur June 10, 2025 21:37 Inactive

trvrb force-pushed the zoom-to-visible branch from e14089e to 1e8a8dd Compare June 10, 2025 21:37

jameshadfield temporarily deployed to auspice-zoom-to-visible-krncur June 23, 2025 06:09 Inactive

jameshadfield reviewed Jun 23, 2025

View reviewed changes

src/components/tree/phyloTree/layouts.ts Outdated Show resolved Hide resolved

jameshadfield force-pushed the zoom-to-visible branch from 540c43e to b3d97cf Compare June 24, 2025 03:31

jameshadfield temporarily deployed to auspice-zoom-to-visible-krncur June 24, 2025 03:32 Inactive

jameshadfield reviewed Jun 24, 2025

View reviewed changes

jameshadfield mentioned this pull request Nov 5, 2025

Change tee-branch rendering approach #2025

Open

jameshadfield force-pushed the zoom-to-visible branch from b3d97cf to a29245f Compare November 6, 2025 19:51

jameshadfield mentioned this pull request Nov 6, 2025

[tmp] prototype temporal zoom #1509

Closed

jameshadfield changed the base branch from master to james/tree-buttons November 6, 2025 20:07

jameshadfield mentioned this pull request Nov 6, 2025

Conflicts between how we define in view root and on screen root(s) #2027

Open

jameshadfield changed the title ~~[experimental] Ensure XY bounds map to visible nodes~~ Focal zoom mode acts on both axis Nov 6, 2025

jameshadfield marked this pull request as ready for review November 6, 2025 21:34

jameshadfield added preview on nextstrain.org and removed proposal Proposals that warrant further discussion experiment PRs which may never be merged labels Nov 6, 2025

nextstrain-bot mentioned this pull request Nov 6, 2025

[bot] [DO NOT MERGE] Test Auspice PR 1993: Focal zoom mode acts on both axis nextstrain/nextstrain.org#1255

Closed

jameshadfield reviewed Nov 7, 2025

View reviewed changes

This was referenced Nov 7, 2025

Improve visibility of filtered samples under various conditions #1368

Open

Control dynamic zoom via toggle and URL query #2028

Closed

joverlee521 assigned jameshadfield Jan 6, 2026

jameshadfield and others added 5 commits January 20, 2026 12:44

Don't allow streamtrees and focus together

4f35093

Fixes a (never encountered?) bug where both can be enabled via URL queries, which led to an inconsistent / broken UI. (This state wasn't possible to get into by interacting with Auspice.)

[two trees] fix zoom bug on date range change

9963956

Fixes an omission where the `changeDateFilter` action wouldn't set certain tree properties on the action and the reducer would therefore set them to undefined. This became apparent in (forthcoming) temporal zoom work.

[tree] remove "zoom to selected" button on focus

1ff6c66

When we're focused there is no state where this button makes sense, as focus means we change the viewport to surround the selected nodes (where selected is the intersection of filters, date range and selected subtree (inViewRootNode))

jameshadfield force-pushed the zoom-to-visible branch from a29245f to 1ff6c66 Compare January 20, 2026 00:04

jameshadfield force-pushed the james/tree-buttons branch from 37f0352 to c053fc8 Compare January 20, 2026 00:06

Base automatically changed from james/tree-buttons to master January 20, 2026 00:10

jameshadfield merged commit c4d8772 into master Jan 20, 2026
1 check passed

jameshadfield deleted the zoom-to-visible branch January 20, 2026 00:10

jameshadfield mentioned this pull request Jan 21, 2026

Improve & simplify code around tree zoom properties #2036

Open

		export default withTranslation()(TreeComponent);


		function TreeButtons(props: TreeComponentProps): ReactElement {

		}


		function setFocus(newToggleValue: null\|"selected"): ThunkFunction {

Focal zoom mode acts on both axis #1993

Focal zoom mode acts on both axis #1993

Conversation

trvrb commented Jun 10, 2025

Uh oh!

jameshadfield commented Jun 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

victorlin commented Nov 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

trvrb commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

jameshadfield commented Jun 23, 2025 •

edited

Loading

victorlin commented Nov 7, 2025 •

edited

Loading

trvrb commented Jan 16, 2026 •

edited

Loading