GMOD / jbrowse-components

Source code for JBrowse 2, a modern React-based genome browser
https://jbrowse.org/jb2
Apache License 2.0
206 stars 62 forks source link

configs.json to include a popup/mouseover/feature details content location #2034

Closed Tom-Shorter closed 2 years ago

Tom-Shorter commented 3 years ago

A lot of users will want to know more information about what they are viewing, right now you have the popups/mouseover/feature details panel which are populated by the source file but is there the possibility that within the configs.json file we could specify the location of the contents of a mouseover/popup/feature details panel if not within the file (and of course, be totally optional).

Some of the tracks we will be using have 10M variants, each one being a row in a VCF and each row will contain information about the variant and where it can be found in other studies etc. Other tracks we plan on implementing (with the frequency distribution histograms) will need to be able to display a breakdown of the number of variants found within a region and from which study they come from, these tracks will be created dynamically via an API as an amalgamation of any number of individual tracks.

The mouseover/popup/feature details content size could become massive pretty quickly for some of our tracks and thus increase loading times drastically, if we could instead point to a URL where the content could be found then that would be ideal, not only would it reduce the size of the track files but it also saves me the hassle of rebuilding the track files whenever there is an update to ensure all of the track cross references are up to date as the URL would handle all of that dynamically.

I am a complete beginner with react, I can make a functioning website but that's about it so what I'm about to propose might not be possible. As JBrowse2 is react based I would propose that the URL serves a react component which is directly displayed on the browser without modification. This would put the browser owner in complete control of how the mouseover/popup/feature details panel looks without having to worry about updates to jbrowse modifying the look or behaviour. I'm not sure if this is something that react can do, it may be that an iframe to the endpoint would be the only way to ensure the styling remains the same between the URL and jbrowse and if that doesn't work well then the URL could just serve the content without the styling and then the styling would need to be handled by modifying the jbrowse components.

cmdcolin commented 3 years ago

The mouseover/popup/feature details content size could become massive pretty quickly for some of our tracks and thus increase loading times drastically, if we could instead point to a URL where the content could be found then that would be ideal, not only would it reduce the size of the track files but it also saves me the hassle of rebuilding the track files whenever there is an update to ensure all of the track cross references are up to date as the URL would handle all of that dynamically.

Currently, we have the concept of a "drawer widget" which can contain an arbitrary react component, which could be an iframe for example. The variant tracks currently have a customized drawer widget that has a customized display. You could consider trying to load your existing data as a vcf tabix track. Alternatively, you could consider the customized drawer widgets. In the current way of doing things, it would require making a custom "display type" (kind of like a track type) that would have that drawer widget registered to open when you click a feature. We could consider trying to make that process more streamlined e.g. make a way to avoid having to register the custom track type...maybe we could just have the configuration file define what drawer widget pops up.

Tom-Shorter commented 3 years ago

drawer widgets and an update to the config file seems like the best solution to me, it would allow me to do everything I needed and the drawer widgets seem very versatile so would probably useful for a lot of other use cases too.

cmdcolin commented 2 years ago

returning to this brainstorm because we now have https://jbrowse.org/jb2/docs/config_guide/#customizing-feature-details-panels but it might still be useful to have entirely custom feature detail panels

this still probably doesn't fully solve the situation though with e.g. fetching custom information and more extensive customizations

one possibility would be allowing users to specify a custom drawer type via the config for a given track. this way, they can keep the track type "VariantTrack" but say that this track is using "MyCustomDrawer"

cmdcolin commented 2 years ago

I proposed a method in #3230 to do arbitrarily custom react components

see https://github.com/GMOD/jbrowse-components/blob/main/test_data/volvox/umd_plugin.js for examples of providing your own react component. for good jsx support, probably best to use the jbrowse-plugin-template, but the umd_plugin is a simple 'no-build' plugin that can be hand-edited

if you're still using jb2 @Tom-Shorter hope that helps :) let me know if there any questions

cmdcolin commented 2 years ago

thanks again for making this issue!