Biojs.HeatmapView.js Scaling Bug

[gyachdav]

1. There are scaling issues with the zoomed-out view - the entire sequence is not represented for sequences where the heat-map is larger than its SVG container.
2. There are scaling issues with the zoomed-in view - the view grows in width, for some reason, which I haven’t looked in to yet, since I’ve been trying to troubleshoot problem 1.

In the Biojs.HeatmapViewer.js, there are hardcoded variables for width and height which don’t seem to be used.
The svg, id main_heatmap_div_svg, is a size that is static, although its parent div is set at a percentage (75%). This brings the SVG container to overflow, even on my thunderbolt screen. Then, on top of that, the generated SVG data which should be displayed is overflowing out of the SVG container.

The fix for problem 1, which would probably address the other issues, I’m guessing, is to dynamically set the SVG element attributes ‘viewBox’ and ‘preserveAspectRatio’, AND set the width of the SVG to 100%, since we want it to fill the entire div, which is set at 75%, and NOT use a static pixel size.

So, as an example, for the url https://rostlab.org/services/snap2web/results.php?id=48eb7a68-7e13-4a2e-bfd2-872976069840, you’ll notice the zoom-out overflows. To get the image at least to fit, change:

TO
<svg id="main_heatmap_div_svg" width="100%" height="102" viewBox="0 0 2420 102" preserveAspectRatio="xMinYMin meet”>

The value for the width parameter of viewBox would have to be dynamically adjust since it depends on the size of the heat-map (not the SVG container).