use-resze-observer impl.

[15Arindam]

Issue

Charts don't re-size when the window size changes #5141

Description

Implemented use-resize-observer hook for this scenario

Preview

Double check

• I have tested my parser changes locally with poetry run test_parser "zone_key"
• I have run pnpx prettier --write . and poetry run format to format my changes.

closes: #5184

[VIKTORVAV99]

I have been testing this locally and while the resizing seem to work now, it seems to have broken this code somehow:

electricitymaps-contrib/web/src/features/charts/graphUtils.ts

Lines 20 to 22 in d7250e9

	const dx = event_.pageX
	? event_.pageX - svgNode.getBoundingClientRect().left
	: pointer(event_); // TODO: check if this works

I'm not really sure why it broke and have not had the time to dig into it further but until that is fixed we can't merge this as it breaks hovering over (some of) the graphs.

[netlify]

✅ Deploy Preview for phenomenal-syrniki-c5ceaa ready!

Name	Link
🔨 Latest commit	54ed937
🔍 Latest deploy log	https://app.netlify.com/sites/phenomenal-syrniki-c5ceaa/deploys/6418bbc5fe9fb500084df0ae
😎 Deploy Preview	https://deploy-preview-5166--phenomenal-syrniki-c5ceaa.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[VIKTORVAV99]

@15Arindam please do not use force push, it makes it impossible to review changes since the last commit.

[VIKTORVAV99]

As far as I can tell everything is working as expected now, nice work!

In order for this to pass the CI though you need to run pnpx prettier --write . in the /web folder.

[VIKTORVAV99]

There seems to be some inconsistencies with the initial values that need to be corrected and/or explained, this PR is currently not consistent all the way and these seems to be no real need to set an initial value in the first place.

[VIKTORVAV99]

@15Arindam I noticed you created a new PR but I would prefer we keep using this one to preserve the discussions and comments in the original PR.

[15Arindam]

Hi @VIKTORVAV99 , The type value of width, height returned from useResizeObserver hook is undefined | number , methods doesnt' throw typescript error , there I kept as is otherplace I defaulted with zero. But as you pointed out I missed the negative value cases.

[VIKTORVAV99]

LGTM! 🎉

Thanks for implementing the change!
I'll merge this later today after #5183 is merged to see that the tests are still passing but they should be as I saw no changes that should have affected them.

[VIKTORVAV99]

@tonypls do you know why cypress is failing in here? As far as I can tell there is no direct changes that should affect the tests.

[tonypls]

@tonypls do you know why cypress is failing in here? As far as I can tell there is no direct changes that should affect the tests.

It looks like the resize observer doesn't see the size of the container of the AreaGraph in cypress. The graph just keeps growing so Cypress in unable to hover

[VIKTORVAV99]

@tonypls would you mind reviwing the changes to the tests here?
I'm not super familiar with how cypress works 🙂

[tonypls]

Damn, looks like there's some sort of loop in the width observer.

Screen.Recording.2023-03-20.at.21.31.18.mov

changes have been made since the last review