Link from clade visualization to variant pages

[jamesscottbrown]

The homepage now includes a nice tree showing the relationship between the variants.

It would be nice if a user could click on the circular nodes or text labels to navigate to the corresponding variant page.

This can be easily done by adding a tags within the SVG. However, there are two data-flow challenges:

• the SVG file is generated by ncov-clades-schema, whereas the details of which variants have pages (and what their URLs are) are recorded in this repository
• I don't know whether the SVG file is reused in other contexts where these links would be undesired

[emmahodcroft]

Hi @jamesscottbrown - this is a cool suggestion! We do generate our own version of the SVG for CoVariants, but, yes, it's essentially from the repo you linked. The person to look at feasibility of this would be @ivan-aksamentov - I'm afraid I know nothing about adding such tags within the SVG.

Ivan I'd say this isn't high priority but would be cool if possible and wouldn't take too much work. At the moment my entry in clusters.py for nextstrain_name has the whole name - ex: 20J (Gamma, V3) but I could make another entry that just has the clade - ex: 20J so it maps to the labels used in the SVG. That would not take me long to do, but I'll only do it if you think the whole idea is worth giving a go!

[ivan-aksamentov]

The svg file is used in Nextclade (main page) and might also be used elsewhere, so the a tags specific to Covariants would be undesirable. Unless we want to link from Nextclade to Covariants, in which case the URLs would be absolute. I remember there was a talk to also put that SVG it on nextstrain.org somewhere.

One might add unique ids to the svg nodes and then query them and programmatically attach required elements to them in Covariants, but that would be a silly solution of a carefully made-up problem. I am not entirely against it if it's helpful though, because it's relatively quick.

If interactivity is needed, I think that the the SVG file is a wrong tool to do the job. We better just take the clades.json and implement a proper React component then. This is an investment - the positioning of nodes and drawing the edges would be somewhat challenging, but maybe we could hook into the positions calculated the existing implementation (based on d3)? With a proper React implementation more features and eye candy can be added, and clicks would not trigger full-page reload.

[emmahodcroft]

Thanks for chipping in @ivan-aksamentov ! Sounds like this is likely more trouble than it's worth. While it would be nice to have, the links to the variants are just nextdoor in the buttons, so I don't think this really impacts usability of the site. I'll leave this in case someone curious wants to give it a go, but I think we can put it on the back burner for CoVariants for now, and see if progress in the ncov-clades-schema or elsewhere makes it more feasible!