Some HeatMaps perform sluggishly

The current HeatMap structure is heavy with lots of nested DOM nodes and applied styles. Thus pages with very large tables and/or pages with many heatmap tables are starting to perform sluggishly.

Things that may improve this:

1. Drawer System - Replace nested Accordion UX with Drawer system (#89) is likely to help, as only the relevant tables need to be rendered at a given time. With current Collapsible accordion, all tables on a page are being rendered simultaneously.

2. Optimizing HTML and CSS - Some of this complexity can’t be avoided, but It may be possible to reduce some of the markup by switching from a <table> structure to using <div>s. It may also be possible to make the CSS a bit faster by simplifying selectors and consolidating some of the nested structures into fewer elements.

3. Rearchitect Crosshairs - Look at alternative architectures for how crosshairs and active cells are being rendered

4. Rearchitect Tooltip - See https://github.com/allenai/allennlp-demo/issues/106#issuecomment-428722407

---

See related conversion on the Crosshairs/Tooltip PR that was merged into master on 10/10/2018.

[matt-gardner]

I wondered the same thing at first, which is why I dug into stuff like I did. After looking at this, I’m quite sure that a different tooltip solution won’t really solve anything. It’s not a significant source of slowness if there aren’t a whole lot of things rendered on the page, and if you remove it, things are still slow if you have a lot of things on the page. So I wouldn’t spend time trying to solve the tooltip issue.

[aaronsarnat]

You’ve convinced me that rendering just-in-time tables will move the needle the most, but if we are looking for every opportunity to optimize, I wonder if an alternative tooltip solution may also help. I started out with a homegrown solution, but it was broken in that it wasn’t smart enough to detect container and window boundaries, so it was getting cut off at the edges. The library I ended up using solved that immediate problem, but may prove to be too clunky when used at scale…