useSize fix; axis label adjustments; distribution hover improvements

[berekuk]

I wanted to fix #1356 but fixed a bunch of other things by accident.

First, I replaced useSize with useMeasure. useMeasure uses ResizeObserver API so it reacts to window resizes correctly.

Second, I don't render the chart at all if the width is not known (i.e., on the server side and on the first render). This allowed me to drop the width prop from the components code

Third, I wrapped the component in overflow: auto, so that it doesn't resize itself infinitely.

Turns out that was enough to fix #462 (server-side rendering), so I also removed the FallbackSpinner code and dynamic component proxies from website/components/*.

Minor consequence: the initial documentation load is slower (since squiggle-components bundle is loaded immediately), but it's tolerable, and we can always bring the dynamic loading back if we don't like it. On fast enough machines the new version is better because the text doesn't jump around after the spinner is replaced with the rendered chart.

This also completely fixes #506. And #1241 (width is now fine both when you stretch the playground and reduce it back to the previous width; previously it didn't shrink back to the original size). So, 4 3 issues combo 😁

One problem remains: sometimes the chart doesn't fit the parent component, and instead of that infinite stretch animation it now adds a scroll bar. My impression is that this is due to ticks adding an extra width. I'm still investigating how this could be fixed.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
squiggle-components	✅ Ready (Inspect)	Visit Preview	Nov 11, 2022 at 9:35AM (UTC)
squiggle-website	✅ Ready (Inspect)	Visit Preview	Nov 11, 2022 at 9:35AM (UTC)

[codecov-commenter]

Codecov Report

Merging #1377 (8a2efcf) into develop (48d69a3) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff            @@
##           develop    #1377   +/-   ##
========================================
  Coverage    52.11%   52.11%           
========================================
  Files           19       19           
  Lines          401      401           
  Branches        23       23           
========================================
  Hits           209      209           
  Misses         190      190           
  Partials         2        2           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[berekuk]

Turns out that was enough to fix #462

I was mistaken about this, it's not enough, docusaurus start doesn't seem to be doing SSR. That's why builds are failing.

[berekuk]

I had to revert SSR improvements.

Turns out docusaurus doesn't play well with React.lazy because React.lazy relies on React 18 Suspense.

I could probably figure it out with react-loadable or something else, but would prefer to do #774 instead and replace react-ace entirely.

[berekuk]

My impression is that this is due to ticks adding an extra width. I'm still investigating how this could be fixed.

Yeah. So I added two things here:

• enabled labelFlush option that shifts the left and right ticks to fit inside the axis
• set tickSize=2 (previously ticks were disabled) so that tick position would be more clear

There are still pathological cases when scrollbar can appear: if the second-from-left or second-from-right tick is too long then it can overflow. Example: https://squiggle-website-git-usesize-fix-quantified-uncertainty.vercel.app/playground#code=eNqrVirOyC8PLs3NTSyqVLIqKSpN1QELuaZkluQXwURSUtMSS3NKnPNTUpWslPLyi3ITczQMdAxTdQ0NDDSVagGn8RhQ

But that output is broken in other ways so it doesn't seem that important to fix. And I still kept the width - 22 adjustment, so we have some leeway when the overflow is not that big.

[berekuk]

This is now ready for review. Merging this is necessary for the upcoming 0.5.1 release.