Upgrade RGL and support allowOverlap

[sehilyi]

Description

This PR adds a root-level option of viewConfig, called allowOverlap:

{
   ...,
   allowOverla: true,
   views: [ ... ]
}

This uses react-grid-layout's recently released option, allowOverlap.

When a user sets allowOverlap to true (default false), higlass views can be overlapped. While this functionality may not be needed for most cases, this can be useful if a user wants to overlay multiple visualizations that show different genomic intervals (e.g., superpose a matrix that shows a part of chr1 and another matrix that shows a part of chr2). In Gosling, we would like to create for example multiple circular ideograms of different chromosomes at once (gosling-lang/gosling.js#422).

I've upgrade RGL, from 0.16.6 to 1.3.0, for this update. To make HiGlass compatible with the new version of RGL, I also had to edit one part of the code in HiGlassComponent.js:

// Line 4385
+ const tiledAreasDiv = document.getElementById(
+   `tiled-area-${views[i].uid}`,
+ );
+ if (!tiledAreasDiv) {
+   // we do not have the DIV container
+   continue;
+ }
+ const area = tiledAreasDiv.getBoundingClientRect();
- const area = this.tiledAreasDivs[views[i].uid].getBoundingClientRect();

// Line 5098
return (
  <div
    key={view.uid}
+  id={`tiled-area-${view.uid}`}
    // `ref` callback function is not triggered for the children of RGL in the more recet version
    // (https://github.com/react-grid-layout/react-grid-layout/issues/1457)
-   ref={(c) => {
-     this.tiledAreasDivs[view.uid] = c;
-   }}
    styleName="styles.tiled-area"
    {multiTrackHeader}
    {tiledPlot}
    {overlay}
  </div>
);

Other than this issue, I think the new version is compatible by judging from the CHANGELOG.md, especially the "Breaking Updates" parts.

@pkerpedjiev, do you think we can upgrade RGL?

Checklist

• Set proper GitHub labels (e.g. v1.6+, ignore if you don't know)
• Unit tests added or updated
• Documentation added or updated
• Example(s) added or updated
• Update schema.json if there are changes to the viewconf JSON structure format
• Screenshot for visual changes (e.g. new tracks or UI changes)
• Updated CHANGELOG.md

[pkerpedjiev]

Hi Sehi, I think updating rgl is great! I'm not so sure about having overlapping views. We don't allow transparency so one matrix would just occlude the other. What's the use case?

Also AFAICT zooming doesn't work because all of the events are caught by the topmost view. If you wanted to enable this in gosling, why not just create two separate higlass components and overlay them?

[sehilyi]

Hi Pete,

I guess it may not be useful for now, but I was thinking about potential use cases with additional encoding functionality integrated (e.g., left-bottom half of the diagonal shows chr1 and the other side shows chr2). But, I am not sure if this kind of cross-region comparison makes sense at all in the HiC analysis...

Yes, the interaction does not work, and it is something that I wanted to somehow address as well in the future.

I previously tried with multiple HiGlass components, but since using one component showed better performance with multiple zoom and location locks with multiple views, I was trying to use only one component as much as possible.

[flekschas]

We don't allow transparency so one matrix would just occlude the other. What's the use case?

I think we do support transparency. At least back in 2019 at Scipy we overlayed a heatmap onto a worldmap.

I understand the basic idea: compare two regions through superimposition, however, I do share the concern with Pete that it's not clear at all how interactions are suppose to work in that case. I wonder if this special case could also be handles through a meta-track like scalable-insets did.

Other than that I appreciate the update of RGL 🎉

[sehilyi]

Thank you both for reviewing the PR! @pkerpedjiev @flekschas

I think it was not a good idea to add documentation already without proper interactions supported. Regarding interactions, I was thinking of using location locks (with offsets) and zoom locks so that navigation on the top view affects the other, or allowing users to somehow interactively change the z-index of superposed visualizations. But, I would need to think about this more with some potential use cases.

If you think it does not hurt to have allowOverlap and can be potentially useful with proper interactions integrated, do you think we can remove the documentation for now but still have the allowOverlap as a root-level property?

[pkerpedjiev]

If we include it, it should be with the documentation. If it’s useful to you we can include it and have it be off by default. Be careful with future work with event handling. That code is complex and potentially fragile.

…

On Tue, Aug 31, 2021 at 7:03 AM sehilyi ***@***.***> wrote: Thank you both for reviewing the PR! @pkerpedjiev <https://github.com/pkerpedjiev> @flekschas <https://github.com/flekschas> I think it was not a good idea to add documentation already without proper interactions supported. Regarding interactions, I was thinking of using location locks (with offsets) and zoom locks so that navigation on the top view affects the other, or allowing users to somehow interactively change the z-index of superposed visualizations. But, I would need to think about this more with some potential use cases. If you think it does not hurt to have allowOverlap and can be potentially useful with proper interactions integrated, do you think we can remove the documentation for now but still have the allowOverlap as a root-level property? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1046 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAQLLDKNXIR7DH7FPZQITHLT7TOJ3ANCNFSM5CU7UC7A> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.