fix: resolve state-related bugs in the editor

[hsharriman]

Description

Resolves the non-flaky bugs in #1683.

(fyi: draft state = user has unsaved changes that are not tracked in a workspace. currently, this is visually indicated by the presence of a "save" button on top left side of the TopBar)
Many changes related to importing a Penrose SVG to the editor:

• added confirmation if you are trying to import a file while in draft state
• changed behavior so that the the title/top header matches the imported file name instead (previously, the title would not update at all when the file was imported)
  • b/c of above change, if you share imported trio the new title will be included
• importing a file now puts user in draft state. This fixes a bug where if you imported a file while viewing a workspace, the imported files would overwrite the workspace's changes.
• fixed bug where if you imported a trio, all the ".domain/.substance/.style" tabs would change to "SVG import"

Other fixes:

• fixed situation where creating a gist from a draft would not save the changes locally before you're automatically redirected to the gist. Changed behavior so that the draft will be saved to a new workspace before being redirected.
• added a beforeunload event that confirms that you have no unsaved changes before navigating away from the page, addressing situations where:
  • there's no confirmation that you're abandoning work if you navigate to someone else's gist while in draft mode
  • there's no confirmation that you're abandoning work if you navigate to new webpage while in draft mode

Implementation strategy and design decisions

I decided not to handle the flaky bugs in this PR because I believe they will require more involved changes to the recoil state, refer to issue #1695 for more information.

Examples with steps to reproduce them

How to get into draft state:

1. go to Examples -> make a change to any example diagram -> the blue "save" button should appear next to the diagram title

Testing changes that involve discarding a draft:

1. from draft state -> go to "upload" -> upload any Penrose SVG -> should receive a confirmation toast warning about unsaved changes
2. from draft state -> click "share" (make sure you're signed into github so you can create a gist) -> should redirect to new gist page -> press "back" button in your browser -> click "saved" tab -> draft should be listed in your workspaces
3. from draft state -> type a new website URL into your browser (i.e. google.com) -> should receive confirmation toast warning about unsaved changes

Testing changes involving importing:

1. click "upload" -> import any Penrose SVG" -> notice that:

• "save" button should appear next to diagram title indicating that you're in draft state
• the diagram title should match the filename of your imported SVG

2. click "saved" -> click any of your existing workspaces -> click "upload" -> import any Penrose SVG -> click "saved" again -> notice that the workspace you had previously selected remains unchanged

Checklist

• I have commented my code, particularly in hard-to-understand areas
• I have reviewed any generated registry diagram changes

Open questions

Questions that require more discussion or to be addressed in future development:

[cloudflare-pages]

Deploying with    Cloudflare Pages

Latest commit:	58ec296
Status:	✅  Deploy successful!
Preview URL:	https://6e40cd4a.penrose-72l.pages.dev
Branch Preview URL:	https://hharriman-editor-state.penrose-72l.pages.dev

View logs

[github-actions]

± Registry diff

📊 Performance

Key

Note that each bar component rounds up to the nearest 100ms, so each full bar is an overestimate by up to 400ms.

     0s   1s   2s   3s   4s   5s   6s
     |    |    |    |    |    |    |
name ▝▀▀▀▀▀▀▀▀▀▚▄▄▄▄▄▄▄▄▄▄▞▀▀▀▀▀▀▀▀▀▘
      compiling optimizing rendering

If a row has only one bar instead of four, that means it's not a trio and the bar just shows the total time spent for that example, again rounded up to the nearest 100ms.

Data

                                                          0s   1s   2s   3s   4s   5s   6s   7s   8s   9s
                                                          |    |    |    |    |    |    |    |    |    |
set-theory-domain/tree-venn                               ▝▚▘
set-theory-domain/tree-tree                               ▝▚▘
group-theory/quaternion-multiplication-table              ▝▀▀▞▀
walk-on-spheres/SignedAngleOutside                        ▝▀▚▘
spectral-graphs/examples/hypercube                        ▝▀▞
group-theory/quaternion-cayley-graph                      ▝▚▘
set-theory-domain/tree-venn-3d                            ▝▞▘
atoms-and-bonds/one-water-molecule                        ▝▞
structural-formula/molecules/caffeine                     ▝▀▚▞▘
walk-on-spheres/walk-on-stars                             ▝▀▀▀▞▀▀▀▘
set-theory-domain/continuousmap                           ▝▞
mobius/mobius                                             ▝▞
linear-algebra-domain/two-vectors-perp                    ▝▞
tutorials/tutorial1                                       ▝▞
tutorials/tutorial2                                       ▝▞
tutorials/tutorial3                                       ▝▞
molecules/nitricacid-lewis                                ▝▀▞
exterior-algebra/vector-wedge                             ▝▞
shape-spec/all-shapes                                     ▝▚▀▀▘
shape-spec/arrowheads                                     ▝▞
graph-domain/textbook/sec1/fig1                           ▝▚▄▘
graph-domain/textbook/sec1/fig2                           ▝▀▄▄▘
graph-domain/textbook/sec1/fig3                           ▝▀▚▄▄▘
graph-domain/textbook/sec1/fig4                           ▝▀▄▄▞
spectral-graphs/examples/hexagonal-lattice                ▝▀▀▀▀▀▀▀▀▀▄▄▞▘
dinoshade/dinoshade                                       ▝▀▀▀▀▞
spectral-graphs/examples/star-graph                       ▝▀▀▀▀▀▀▀▀▀▚▘
spectral-graphs/examples/box                              ▝▀▀▀▀▀▀▀▞
graph-domain/textbook/sec1/fig5                           ▝▀▚▄▄▄▘
graph-domain/textbook/sec1/fig6                           ▝▀▀▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▘
graph-domain/textbook/sec1/fig7                           ▝▚▞
graph-domain/textbook/sec1/fig8a                          ▝▀▚▄▄▄▘
graph-domain/textbook/sec1/fig8b                          ▝▀▄▄▄▘
graph-domain/textbook/sec1/fig9                           ▝▀▄▞
graph-domain/textbook/sec1/fig10                          ▝▀▄▘
graph-domain/textbook/sec1/fig11                          ▝▀▄▞
graph-domain/textbook/sec1/fig12                          ▝▀▚▄▄▘
graph-domain/textbook/sec1/fig13                          ▝▀▄▄▞
graph-domain/textbook/sec2/fig3                           ▝▀▀▚▄▄▄▄▄▄▄▄▞
graph-domain/textbook/sec2/fig4                           ▝▀▚▄▄▄▄▞
graph-domain/textbook/sec2/fig5                           ▝▀▀▚▄▄▄▄▄▄▄▞
graph-domain/textbook/sec2/fig6                           ▝▀▀▀▄▄▄▄▄▄▞
graph-domain/textbook/sec2/fig9                           ▝▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▘
graph-domain/textbook/sec2/fig10a                         ▝▀▄▄▘
graph-domain/textbook/sec2/fig10b                         ▝▚▞
graph-domain/textbook/sec2/fig11a                         ▝▚▘
graph-domain/textbook/sec2/fig11b                         ▝▚▘
graph-domain/textbook/sec2/fig11c                         ▝▀▞
graph-domain/textbook/sec2/fig12                          ▝▚▘
graph-domain/textbook/sec2/fig13                          ▝▀▀▀▚▄▄▄▄▄▄▄▄▄▄▞
graph-domain/textbook/sec2/fig14                          ▝▀▄▞
graph-domain/textbook/sec2/fig16b                         ▝▚▘
geometry-domain/textbook_problems/c05p13                  ▝▚▘
geometry-domain/textbook_problems/c01p01                  ▝▚▘
geometry-domain/textbook_problems/c03p01                  ▝▚▘
geometry-domain/textbook_problems/c05p01                  ▝▚▘
geometry-domain/textbook_problems/ex                      ▝▀▄▘
triangle-mesh-3d/two-triangles                            ▝▚▘
random-sampling/test                                      ▝▀▚▘
geometry-domain/textbook_problems/c11p12                  ▝▀▄▘
curve-examples/catmull-rom/catmull-rom                    ▝▞
word-cloud/example                                        ▝▚▄▘
geometry-domain/siggraph-teaser                           ▝▀▞
minkowski-tests/maze/non-convex                           ▝▚▘
lagrange-bases/lagrange-bases                             ▝▞
hypergraph/hypergraph                                     ▝▀▚▄▄▄▄▄▄▄▄▘
persistent-homology/persistent-homology                   ▝▀▄▄▄▄▞▘
walk-on-spheres/laplace-estimator                         ▝▀▞
walk-on-spheres/poisson-estimator                         ▝▀▞
walk-on-spheres/nested-estimator                          ▝▀▚▞
walk-on-spheres/offcenter-estimator                       ▝▀▞
shape-distance/points-around-star                         ▝▀▞
shape-distance/points-around-polyline                     ▝▚▘
shape-distance/points-around-line                         ▝▚▘
shape-distance/lines-around-rect                          ▝▞
fake-3d-linear-algebra/projection                         ▝▞
animation/center-shrink-circle                            ▝▞
graph-domain/other-examples/hamiltonian-cycle             ▝▀▄▄▞
structural-formula/reactions/methane-combustion           ▝▀▚▄▄▄▄▞
molecules/glutamine                                       ▝▚▘
matrix-ops/tests/matrix-matrix-addition                   ▝▚▘
matrix-ops/tests/matrix-matrix-division-elementwise       ▝▞
matrix-ops/tests/matrix-matrix-multiplication-elementwise ▝▚▘
matrix-ops/tests/matrix-matrix-multiplication             ▝▚▘
matrix-ops/tests/matrix-matrix-subtraction                ▝▞
matrix-ops/tests/matrix-transpose                         ▝▞
matrix-ops/tests/matrix-vector-left-multiplication        ▝▞
matrix-ops/tests/matrix-vector-right-multiplication       ▝▞
matrix-ops/tests/scalar-vector-division                   ▝▞
matrix-ops/tests/scalar-vector-left-multiplication        ▝▞
matrix-ops/tests/scalar-vector-right-multiplication       ▝▞
matrix-ops/tests/vector-vector-addition                   ▝▞
matrix-ops/tests/vector-vector-division-elementwise       ▝▞
matrix-ops/tests/vector-vector-multiplication-elementwise ▝▞
matrix-ops/tests/vector-vector-outerproduct               ▝▞
matrix-ops/tests/vector-vector-subtraction                ▝▞
logic-circuit-domain/half-adder                           ▝▚▘
curve-examples/cubic-bezier                               ▝▚▄▞
triangle-mesh-2d/diagrams/cotan-formula                   ▝▚▘
triangle-mesh-2d/diagrams/concyclic-pair                  ▝▚▘
triangle-mesh-2d/diagrams/halfedge-mesh                   ▝▚▘
triangle-mesh-2d/diagrams/relative-orientation            ▝▚▘
triangle-mesh-2d/diagrams/triangle-centers                ▝▚▘
triangle-mesh-2d/diagrams/angle-equivalence               ▝▚▄▞
timeline/penrose                                          ▝▀▚▄▘
graph-domain/textbook/sec5/ex32                           ▝▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▘
curve-examples/open-elastic-curve                         ▝▀▄▘
curve-examples/closed-elastic-curve                       ▝▀▄▘
graph-domain/other-examples/arpanet                       ▝▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▘
graph-domain/other-examples/nyc-subway                    ▝▀▀▀▀▄▄▄▄▄▄▄▄▄▄▘
fancy-text/fancy-text                                     ▝▚▞
curve-examples/blobs                                      ▝▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▘
curve-examples/space-curves                               ▝▀▀▀▄▄▄▘
geometric-queries/ray-intersect/test-group                ▝▀▀▀▞
ray-tracing/path-trace                                    ▝▞
ray-tracing/bidirectional                                 ▝▚▘
ray-tracing/next-event-estimation                         ▝▚▘
geometric-queries/test                                    ▝▚▘
geometric-queries/closest-point/test-group                ▝▚▘
geometric-queries/closest-point/test                      ▝▞
geometric-queries/closest-silhouette-point/test           ▝▞
geometric-queries/ray-intersect/test                      ▝▀▀▚▀▘
box-arrow-diagram/computer-architecture                   ▝▀▀▀▀▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▞
stochastic-process/stochastic-process                     ▝▀▀▀▀▀▀▀▀▀▀▀▀▀▀▞▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
stochastic-process/epsilon-shell/AbsorbingBoundary        ▝▀▀▀▀▀▀▀▚▀▀▀▀▀▀▘
solid/eigenspace                                          ▐▌
solid/triangles                                           ▐
solid/vectors                                             ▐
tsne/tsne                                                 ▝▀▀▀▀▀▀▄▄▄▄▄▄▄▘
spectral-graphs/examples/4x4-sudoku-graph                 ▝▀▞
spectral-graphs/examples/dodecahedral-graph               ▝▚▘
matrix-library/crossProductMatrix                         ▝▞
matrix-library/diagonal2d                                 ▝▞
matrix-library/diagonal3d                                 ▝▞
matrix-library/identity2d                                 ▝▞
matrix-library/identity3d                                 ▝▞
matrix-library/inverse2d                                  ▝▞
matrix-library/inverse3d                                  ▝▞
matrix-library/matrix2d                                   ▝▞
matrix-library/matrix3d                                   ▝▞
matrix-library/outerProduct2d                             ▝▞
matrix-library/outerProduct3d                             ▝▞
matrix-library/rotate                                     ▝▞
matrix-library/rotate2d                                   ▝▞
matrix-library/rotate3d                                   ▝▞
matrix-library/rotate3dh                                  ▝▞
matrix-library/scale2d                                    ▝▞
matrix-library/scale3d                                    ▝▞
matrix-library/shear2d                                    ▝▞
matrix-library/shear3d                                    ▝▞
matrix-library/skew2d                                     ▝▞
matrix-library/translate2d                                ▝▞
matrix-library/translate3dh                               ▝▞
atoms-and-bonds/wet-floor                                 ▝▄▘
curve-examples/offset                                     ▝▄▘
curve-examples/frenet-frame                               ▝▞
curve-examples/osculating-circle                          ▝▞
curve-examples/evolute-of-cardioid                        ▝▀▀▚▀
spectral-graphs/examples/truncated-cube-graph             ▝▀▀▞
spectral-graphs/examples/torus                            ▝▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▚▄▀▘
spectral-graphs/examples/mobius                           ▝▀▀▀▀▀▀▀▀▀▀▀▀▚▄▞▘
impossible-ngon/ngon                                      ▝▀▀▀▀▀▀▞▀
impossible-ngon/parameters                                ▝▞
impossible-ngon/nsides-chirality                          ▝▀▞▀▀
spectral-graphs/examples/periodic-hexagonal-lattice       ▝▀▀▀▚▞
alloy-models/dining-philosophers                          ▝▞
alloy-models/message-passing                              ▝▀▄▄▄▘
alloy-models/ring-leader-election                         ▝▞
alloy-models/river-crossing                               ▝▞▀▘
alloy-models/workstations                                 ▝▄▞
alloy-models/generic                                      ▝▀▀▄▄▄▄▄▄▄▞
Dynamics/Lyapunov                                         ▝▞
fractals/chaos-game/sierpinski-triangle                   ▝▀▀▀▀▀▄▀▀▀▘
fractals/chaos-game/vicsek-fractal                        ▝▀▀▀▀▀▀▀▚▄▀▀▀
fractals/l-systems/tree                                   ▝▀▞▘
fractals/ifs/ifs                                          ▝▀▀▀▀▀▀▞▀▀▘

[wodeni]

Just went through the example cases and all seemed good. There's a very noticeable delay after every keystroke. I'm guessing this has something to do with the debounced function?

[wodeni]

After some more tinkering, looks like commenting out the beforeunload event listener will get rid of the delay. This effect should only trigger once on load, right? If so, useEffect should take [] as the second argument. I made this change locally, and the delay goes away, but once I switch to another example it comes back. Very mysterious.

[hsharriman]

The beforeunload event handler is causing unexpected lag throughout the event handlers in the editor. For now, opted to remove the event handler and reimplement in a future PR.