nteract / semiotic

A data visualization framework combining React & D3
https://semioticv1.nteract.io/
Other
2.43k stars 133 forks source link

Use generalized bounding rect query hook #607

Closed alexeyraspopov closed 2 years ago

alexeyraspopov commented 2 years ago

Recent change in <ResponsiveFrame /> made use of a custom hook that uses element.getBoundingClientRect() and ResizeObserver to get actual target element size. The hook returns a tuple [number | null, number | null]. In this PR I'm trying to resolve two things:

  1. FacetController.test.js has been skipped due to ResizeObserver being unavailable in JSDOM environment. Moving the hook to a separate module enables us to use jest.mock() to 1) simply avoid the test failure 2) being able to configure the result of the hook (i.e. the "size") in tests.
  2. Getting an element's size is just one of the cases of getBoundingClientRect() usage. I think we can benefit from generalizing (and simplifying) the hook to just return the bounding rect of an element. The rect includes required size fields along with coordinates. See https://developer.mozilla.org/en-US/docs/Web/API/DOMRect. Thus, we don't need to come up with custom signatures, simply using the existing general structures.
vercel[bot] commented 2 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/nteract/semiotic/6tNEacpQQL2JSrZKQ7BucbT29YW7
✅ Preview: https://semiotic-git-useboundingrect-nteract.vercel.app