Make the table scroll when it's a lot of regions

[jotasolano]

@jameshadfield This is an idea I had (we don't really have to implement it), but when we have a lot of regions (e.g. CRAs, Census Tracts) then the bars and labels get very compressed and hard to read. Instead, we could implement a d3.scaleBand() just like in the Observable sketch and set the content of the container div to scroll vertically.

If you run this branch you'll see the idea https://github.com/seattleflu/genomic-incidence-tracker/tree/expandable-container (I created this a couple of days ago so it's already behind the master branch)

[jotasolano]

If we do choose to go this way, we'll probably have to put the legend and axis in a separate div on top of the actual chart, so that the axis is always visible regardless of where you are scrolling

[jameshadfield]

I think the idea of internal scroll is great.

• Not sure how the best way to implement the multiple-div design, i'd definitely do it all within a single useEffect hook as if we ever implement a horizontal scrubbing feature -- I think somewhat likely for a heatmap-style table -- then keeping all the D3 logic in a single function will make things much simpler. Not sure if it's best to pass three different (dom) refs to that function (i.e. 3 useRef calls), or do that from d3.

• Related to this is the sizing of the charts themselves. In the prototype as implemented I paid no attention to this (they're hardcoded). They should grow to fit the available space, with sensible max/mins. This doesn't alleviate the need for proper internal scroll, but perhaps using better vertical sizing with the scroll as currently implemented (i.e. legend / axis obscured) would be ok temporarily.

[tsibley]

Is this now taken care of by the recent merge to master?

[jotasolano]

@tsibley yes! Sorry, I completely forgot to close this issue. This was merged to master in https://github.com/seattleflu/genomic-incidence-tracker/pull/11. Closing this now