Refactor /sketcher page

[jacbn]

Refactors the /sketcher page to make better use of React objects.

• Things that ought only to exist once (e.g. previewSketch) and that were not updating correctly and used in UE dependencies wrong, are now refs.
• Most interaction now occurs in closeModal. Good React style should (although we are fairly bad at this) avoid chained useEffects (i.e. one runs a setX, and X is a dependency in a second UE). I've tried to push everything into happening once, when the modal shuts.
• Adds a teardown to the makeGraphSketcher function, so the canvas is no longer duplicated locally.

I don't really want to take this out of draft until I understand the comment below 😔

[jacbn]

This UE dependency is the one thing I am completely lost on. It seems to me that the intention was for setting sketch.state (i.e. previewSketch.current.state here) to automatically update the previewRef canvas and everything to just work; with this approach, we'd only ever need to run this UE once, and only adjust sketch.state to edit the preview.

However. This simply doesn't seem to be working. The only way I can get the preview to update is if I insert initialCurves: initialModalState?.curves into the makeGraphSketcher (which shouldn't need to be there because the graph always initialises from empty on this page), and rerun this UE after the modal closes with this extra dependency. I really don't understand how the sketcher question page works without doing this...

[codecov]

Codecov Report

❌ Patch coverage is 0% with 27 lines in your changes missing coverage. Please review.
✅ Project coverage is 43.75%. Comparing base (38fe033) to head (a642699).

Files with missing lines	Patch %	Lines
src/app/components/pages/GraphSketcher.tsx	0.00%	27 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2140      +/-   ##
==========================================
- Coverage   43.75%   43.75%   -0.01%     
==========================================
  Files         593      593              
  Lines       25033    25035       +2     
  Branches     8316     8292      -24     
==========================================
  Hits        10954    10954              
+ Misses      14029    14024       -5     
- Partials       50       57       +7     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[sjd210]

Everything apart from the UE that you've already commented about looks good, and I think(!) I've found a fix for that issue too :)

[sjd210]

re: Your other comment

I've found the issue! The preview is meant to update when previewSketch updates, and that happens in this callback - however the data being fed into previewSketch is in the wrong format. We need to convert it into the internal state that the graph sketcher can read first:

Suggested change

	const data: GraphSketcherState = JSON.parse(attempt.value);
	const data: GraphSketcherState = GraphSketcher.toInternalState(JSON.parse(attempt.value));

The reason it was working with initialModalState is that it does make this conversion (up on L24) and so the graph sketcher could be re-initialised with a correct data format and that would allow a rendered curve.

I'm pretty sure this change lets you remove the initialCurves parameter and initialModalState?.curves dependency that has been troubling you.