search

zooniverse / front-end-monorepo

A rebuild of the front-end for zooniverse.org
https://www.zooniverse.org
Apache License 2.0
104 stars 30 forks source link

Data selection brushes run twice in strict mode (React 18) #5272

Open eatyourgreens opened 1 year ago

eatyourgreens commented 1 year ago

With Strict Mode and React 18, I’m also noticing that this story creates two brushes for each click-and-drag. https://zooniverse.github.io/front-end-monorepo/@zooniverse/classifier/index.html?path=/story/subject-viewers-scatterplotviewer--x-range-selection

To run the storybook in strict mode, run yarn storybook.

The production storybook seems to be fine. 

yarn build-storybook
npx serve ./storybook-static

Originally posted by @eatyourgreens in https://github.com/zooniverse/front-end-monorepo/issues/5266#issuecomment-1701603189

eatyourgreens commented 1 year ago

Here's a quick video of that x-range selection bug in strict mode. Each click-and-drag generates two selection brushes.

https://github.com/zooniverse/front-end-monorepo/assets/59547/053971a4-8ffb-4774-b6c6-1014e9049633

eatyourgreens commented 1 year ago

onEndSelection here runs twice in Strict Mode, creating two new selections when the pointer is lifted. https://github.com/zooniverse/front-end-monorepo/blob/0b4989990b19e24b12e9f92096a9deb3b95f9f1d/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/components/ScatterPlotViewer/components/ScatterPlot/components/Selections/Selections.js#L200-L204

eatyourgreens commented 1 year ago

Note that we’re unable to update @visx/brush because the monorepo relies on CommonJS. Pure ES modules break the tests. See https://github.com/zooniverse/front-end-monorepo/pull/5001.