Fixed duplicate boxplots

[kwongz]

Description

Checklist

• [x] For UI or styling changes, I have added a screenshot or gif showing before & after
• [x] I have added a changeset
• ~~I have added to the docs where applicable~~
• ~~I have added to the VS Code extension where applicable~~

https://github.com/user-attachments/assets/76df5439-e852-4e37-a335-2a06371c28f9

[vercel[bot]]

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

Name	Status	Preview	Comments	Updated (UTC)
docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 4, 2024 7:36pm
next-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 4, 2024 7:36pm

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 46fadc8a1b977708d092abffad4e26c93e04a52f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages

Name	Type
@evidence-dev/core-components	Patch
my-evidence-project	Patch
@evidence-dev/components	Patch
evidence-test-environment	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify[bot]]

✅ Deploy Preview for evidence-test-env ready!

Name	Link
🔨 Latest commit	46fadc8a1b977708d092abffad4e26c93e04a52f
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-test-env/deploys/66d8b33bb89b060008bafa75
😎 Deploy Preview	https://deploy-preview-2462--evidence-test-env.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 configuration.

[netlify[bot]]

✅ Deploy Preview for next-docs-evidence ready!

Name	Link
🔨 Latest commit	46fadc8a1b977708d092abffad4e26c93e04a52f
🔍 Latest deploy log	https://app.netlify.com/sites/next-docs-evidence/deploys/66d8b33bf06f0c0008d02e0d
😎 Deploy Preview	https://deploy-preview-2462--next-docs-evidence.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 configuration.

[netlify[bot]]

✅ Deploy Preview for evidence-development-workspace ready!

Name	Link
🔨 Latest commit	46fadc8a1b977708d092abffad4e26c93e04a52f
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-development-workspace/deploys/66d8b33b0f95e600087084af
😎 Deploy Preview	https://deploy-preview-2462--evidence-development-workspace.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 configuration.

[ItsMeBrianD]

Needs changeset + linting error. Is removing data.fetch useful here?

[kwongz]

@ItsMeBrianD I noticed the boxplot stories console logging the data differently then in the local evidence app.

I wrapped Boxplot stories with a QueryLoad whcih fixed the different behaviour for me. I recall there being a change to handling Query's maybe a month ago? Maybe that's what this bug appeared?

Would like to talk more about this when you have the chance

No Queryload wrapper

https://github.com/user-attachments/assets/79cff482-7b88-490f-a294-c6cd8cf63696

Queryload wrapper https://github.com/user-attachments/assets/aa0d4447-31b0-4050-b1e5-fe076ed01140

[kwongz]

fix #2462

[kwongz]

@ItsMeBrianD after taking a second look, the original async function had updateBoxPlotData(); wrapped inside of it, making it run independently, and causing the data to render duplicates?

Removing the updateBoxplotdata(); from async solves the duplicate issue, but the component also seems to run fine without the data.fetch();, curious why we might need this?

[ItsMeBrianD]

I think having QueryLoad required in the story is a smell here - that behavior should be handled inside the component. Might be related to why data.fetch was being used initially.

Might check with @zachstence to see what this PR was related to https://github.com/evidence-dev/evidence/commit/a4c937ec9449b5d6841c43b7515482bc22db44fe

[ItsMeBrianD]

Also still need a changeset

[zachstence]

I think having QueryLoad required in the story is a smell here - that behavior should be handled inside the component. Might be related to why data.fetch was being used initially.

Might check with @zachstence to see what this PR was related to a4c937e

That change was to fix BoxPlot not rendering in storybook. I made that change as part of cleaning things up for Chromatic

[kwongz]

to clarify, Boxplot Stories without QueryLoad, Boxplot Stories would initially load empty data, and then on remount component, the expected data would load in.

Which was the behaviour I was encountering with some other components as well.

Is this possibly a Storybook Problem, or a Local problem in my environment?

[kwongz]

Boxplot stories, no queryload

https://github.com/user-attachments/assets/c28d3c42-dad4-4091-93c6-93d79c9ec921