Zoom to visible nodes

[trvrb]

Description of proposed changes

This commit re-implements the "zoom to selected" function in the tree panel to emphasize visible nodes by expanding their "yValues" to take up 80% of the vertical span of the panel. Notes on implementation details:

• I mirrored redux dataflow of distanceMeasure and layout to create a new redux variable of treeZoom. This is defaults to even but is updated to zoom when clicking the "zoom to selected" tab. Further clicks increment the redux variable to zoom-2, zoom-3, etc... and clicking "reset layout" restores it to even.
• A PhyloTree redraw is triggered when redux treeZoom variable is updated. This allows filters to change, etc... without triggering immediate changes to layout, but then clicking "zoom to selected" will redraw layout to emphasize currently selected nodes.
• phylotree.layouts contains the actual logic in the calcYValues function. This dynamically sets node.n.yValue based on node.visibility, so that calls to other layout functions like rectangularLayout will have updated node.n.yValue from which to construct node.y.

This is mostly working at this point, though there are a few issues (like initial render with ?z=zoom in URL does not work as it should due to node.visibility not existing in the initial calls to layout). I'm hoping first for user interface feedback (hence the draft PR).

Primary use case is to:

1. Filter to a trait value of interest (whether monophyletic or not)
2. Click "zoom to selected" to emphasize nodes with trait.

The biggest wins are being able to zoom to basal tips in the tree. For example, you can zoom to early SARS-CoV-2 samples or to clade 19A where this wasn't previously possible.

Related issue(s)

Fixes #1368

[huddlej]

I haven't had a chance to do a full review yet, but at first glance, this is a really cool feature! It seems pretty helpful for situations like H3N2 where we have recurrent mutations like 186D and we want to focus on these.

[emmahodcroft]

I haven't tested this out super-extensively yet, but I tried out zooming to 19B (currently can be quite difficult!) and also picking out a few sequences at the 'edges' of clades (which can also be extremely difficult to get a good look at, if they don't cluster but branch sequentially away from the clade). Both worked beautifully and gave super useful views that I don't think you can get with current auspice!

[joverlee521]

It's really cool that the zoom works well with the date filter! 🤩

I noticed that the interaction between zooming via branches and the zoom button can be a little clunky.

1. Zoom in via a branch:

2. Then clicking on the zoom button brings up previously hidden branches on the bottom, making the x-axis hard to read:

3. Zooming back out via clicking on base branches leaves the tree in a strange configuration:

[jameshadfield]

The general behaviour is fantastic. I’m really happy to see the y-value-zoom functionality resurrected in this (much improved) form! Here’s a longer review of the functionality (I haven’t dug into the code at all yet, but I will).

Zoom to selected

My main issue is the confusing UI due to us mixing the y-zoom behaviour with the “zoom to selected button”.

(Overview of how this button currently works: it zooms into the MRCA of the selected tips - using the terminology of Auspice we change the in-view root node to be the MRCA of the tips which are both visible and in-view. If this node is the same as the current in-view root node, then the button isn’t selectable. Note that this MRCA node may not be visible, and thus you can’t always achieve this behaviour by clicking on the branch to zoom.)

Importantly, “zoom to selected” isn’t a flag or a state, it’s more like an action which is conditional on other state; this is why it’s so hard to store it as a URL query (see https://github.com/nextstrain/auspice/pull/1321).

With this PR, it’s really easy to get into intermediate states. For instance filter to Oceania, then zoom-to-selected, then inactivate the filter. The y-zoom is still focused on Oceania, but all the tips are visible again. There are plenty of other ones too (e.g. Jover’s screenshots), and it’s not clear when you’re in one of these intermediate states.

An alternative UI approach would be a “Focused zoom” toggle. With this on, any change in visibility (zooming, filtering etc) would trigger a recalculation of y values. This would look really nice when changing filters or animating (if it could be made fast enough). I think this UI would avoid all the intermediate states currently available in this PR, and make it extremely clear what mode we are currently in. It’s somewhat analogous to separating out the horizontal and vertical zooming.

Y value padding

In certain situations, (e.g. South America + 614D) the y-value calculations aren’t right. It looks like we’re setting some padding above selected tips, but not below them, which means the squashed branches are directly behind selected tips.

Do we still need the (existing) “zoom-to-selected” behaviour?

Perhaps not. I haven’t fully thought through all the use cases here, but I think we could remove this. We can still zoom into clades by clicking on branches to explore certain parts of the tree, which is essentially what the button does.

Zooming into early samples

The biggest wins are being able to zoom to basal tips in the tree.

This is much improved in this PR, but there are still some cases it doesn’t solve, as the upper bound of the time domain is always the latest date of the in-view tips. For instance, zooming into clade 1B of flu/seasonal/vic/ha/12y could be better:

(Perfect is the enemy of good, and I don’t think we need to address this in this PR.)