search

zakandrewking / escher

Build, share, and embed visualizations of metabolic pathways.
https://escher.github.io
Other
210 stars 78 forks source link

Tooltip presenting interactive plot #308

Open denisshepelin opened 5 years ago

denisshepelin commented 5 years ago

Hi, I'm trying to implement the following feature: User has some additional data that is tricky to show on the regular map (such as comparison between various strains). If user is able to construct a Vega scheme for the graph, then it would be possible to show it Vega graph in the tooltip.

The status so far is that I've forked this repository and created a class representing some basic tooltip that will load predefined json from the dev server. Also tooltip filters the data for the plot using filter construct from the vega-lite.

The code lives in the branch vega-tooltip here

It looks like that with the simplest graph possible that shows what are the flux values for some reaction.

image

I'm looking forward to hear if this feature makes some sense in the core escher. There are some technical challenges so far as welI - I wonder how can I: 1) Pass a json file to the tooltip using the Builder class 2) Ensure the proper rendering. I'm not sure what is the best event to connect this tooltip. Right now I've wanted to be 100% certain that the right dom element is there and only after ensuring that attach Vega graph. Because of that the graph appears only after second mouseover. 3) Implement filtering and other context dependent events to be also specified in the initialization of the component.

zakandrewking commented 5 years ago

Hi Denis,

This is a great application of the tooltips. Something like this would be great in Escher core. The biggest bottleneck right now is that support for more than two datasets is not implemented yet. We've had an unfinished implementation of that here for a while: #242

Once that is done (and we can use help from anyone interested!), then Escher will have built-in access to the data that would feed your tooltip.

Also, for Escher core we want to include only one default tooltip, to keep things simple. But I can imagine that when 2+ datasets are loaded, the vega-lite graph you present could be embedded alongside the current tooltip info.

Finally, we are careful about not including too many dependencies that will balloon the size of the Escher javascript bundle. If you can implement the plot in raw d3 instead of vega-lite, that would help too.

best, zak