Using Gosling and HiGlass visualizations together

[sehilyi]

For example, the navigation search box on the top-left corner of this application is using the two API functions of HiGlass.

@sehilyi The cistrome-explorer application inspires me greatly. First, the web design for this application looks beautiful. Second, it's awesome that gosling tracks are used within higlass specs. I wonder if higlass tracks can be used in gosling specs? The gene annotation track from higlass seems more practical to me because names of top genes are shown in whatever zoom level. Besides, colors and shapes in the track looks nicer. However, I don't know whether higlass supports custom tooltips and how they are specified in gosling specs. Third, "Genomic Interval Selection", similar to brushing in gosling, and the indicator of genomic interval size are also great. I want to use the former to zoom-to the selected region in my application, and the interval size is updated, but I have no idea how to do that. Could you give me some suggestions?

Zhen

Originally posted by @zhangzhen in https://github.com/gosling-lang/gosling.js/issues/551#issuecomment-944910831

[sehilyi]

Hi @zhangzhen,

Glad to hear that our Cistrome Explorer inspires your work! Just like how you understood, the tool mainly uses HiGlass tracks (since the project was started before we start to create Gosling.js), and we added several Gosling.js tracks recently for more custom visualizations.

While we will support using gosling.js visualizations in HiGlass as in Cistrome Explorer, I don't think we will ever support using HiGlass tracks in Gosling.js. One of the main reasons is that we want to keep supporting the entire design space of our grammar, but HiGlass track templates do not necessarily support the entire space (e.g., circular visualizations are not supported at all so users will not be able to use circular options any more with HiGlass tracks).

So, if you would want to create visualizations that you found from HiGlass, it would be most ideal if you use gosling.js to make it close to the visualizations in your mind, and we will try to add missing pieces for such use cases. For example, we can add more options, like a way to show gene labels regardless of zoom levels, as you mentioned above.

I don't know whether higlass supports custom tooltips and how they are specified in gosling specs.

Yes, currently the tooltips are supported to some track types and its customization is limited.

... indicator of genomic interval size ...

This is not supported at the moment due to the limited ability to draw horizontal lines that span entire width of a track. But, this can be added to our grammar, and using rule marks with triangle and text will allow creating such visualizations. Let me further think about this.

"Genomic Interval Selection" ...

One way of doing this would be to use an external div element that is positioned above your gosling.js visualization. (or you could overlay a div element on top of a static gosling.js ideogram and capture mouse interactions from the div element). Upon mouse click-and-dragging interactions, you can infer its genomic range (e.g., 1,000 - 12,000). Then, use the zoomTo API to navigate to that position (e.g., gosRef.current.api.zoomTo('view-1', 'chr1:1000-12000')). Hopefully, this gives you some ideas.