Large row count causes label SVGs to swell and overlap - workaround to prevent timed auto-adjust?

[QuinnKWolter]

Good afternoon.

I am implementing Clustergrammer to work with genomics data in the NIH-funded Microphysiology Systems Database; this is a fantastic and feature-rich library, but our large datasets are resulting in the below issue.

As soon as the number of rows exceeds a certain amount, the automatic adjustment that row labels undergo after panning/zooming/scrolling causes them to grow, overlap, and eventually conceal all information of use. It continues to scale with row count until nothing is left but a solid black miasma.

Attached are two GIFs depicting the problem - one with a row count of 100, and another with a row count of 300. I would absolutely appreciate being pointed to a solution or spot to customize in the JS; do you have any suggestions?

Cheers and best wishes, and thank you for your work on the tool so far.

[cornhundred]

Hi @QuinnKWolter thanks for pointing out the issues. I am no longer actively maintaining this project but I can have a look over the codebase to point you in the right direction for a fix. However, I am maintaining a WebGL version of Clustergrammer called Clustergrammer-GL https://github.com/ismms-himc/clustergrammer-gl that is able to handle larger datasets. Let me know if you have any questions about the WebGL version.

[QuinnKWolter]

Hey @cornhundred - If you'd be willing to brave the depths for me, I'd definitely be appreciative of any pointers. I can see a few instances where the library is used (here and here) without this adjustment step occurring; of course, maybe those are running a different version.

Thanks again for your quick response, and apologies about my slow one. I look forward to hearing back if you find anything!

[cornhundred]

Hey @QuinnKWolter, sure I'll look over the codebase and update here. Yes, those visuals are using an older version but I'm not sure if that is causing the issue.

Also, here's a few links to a collection of notebooks using the newer Clustergrammer-GL library on Observable to give you an idea of how the new library works -https://observablehq.com/collection/@cornhundred/clustergrammer-gl