feat: preset loading in synthesizer-ui

[wodeni]

Description

Related issue/PR: #1119

This PR adds "presets" to synthesizer-ui. Allowing the user to load in pre-defined sets of Penrose trios along with synthesizer settings.

Implementation strategy and design decisions

• Simple is refactored to take in an optional stepSize to customize the animation frame rate
• Gridbox now renders diagrams with animate: true so they don't block the UI thread
• Presets are defined in examples.ts, which pull the trios from @penrose/examples

Examples with steps to reproduce them

Screen.Recording.2022-11-02.at.10.59.08.AM.mov

• Run yarn turbo run start --filter-synthesizer-ui
• Load any of the presets and click "generate diagrams"

Checklist

• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new ESLint warnings
• I have reviewed any generated changes to the diagrams/ folder

[github-actions]

📊 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   7s   8s   9s
     |    |    |    |    |    |    |    |    |    |
name ▝▀▀▀▀▀▀▀▀▀▀▀▚▄▄▄▄▄▄▄▄▄▞▀▀▀▀▀▀▀▀▀▀▀▀▚▄▄▄▄▄▄▄▄▄▖
      compilation labelling optimization rendering

Data

                                        0s   1s   2s   3s   4s   5s   6s   7s   8s   9s  10s  11s  12s  13s  14s  15s  16s  17s  18s  19s  20s  21s  22s  23s  24s  25s  26s  27s  28s  29s  30s  31s  32s  33s  34s  35s  36s  37s  38s  39s  40s  41s  42s  43s  44s  45s  46s  47s  48s  49s  50s  51s  52s  53s  54s  55s  56s  57s  58s  59s  60s  61s  62s  63s  64s  65s  66s  67s  68s  69s  70s  71s  72s  73s  74s  75s  76s  77s  78s  79s  80s  81s  82s  83s  84s  85s  86s  87s  88s  89s
                                        |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |
3d-projection-fake-3d-linear-algebra    ▝▚▚
allShapes-dashedShapes                  ▝▞▖
circle-example-euclidean                ▝▀▀▀▞▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▖
collinear-euclidean                     ▝▀▀▞▀▖
congruent-triangles-euclidean           ▝▀▀▀▀▀▀▚▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▖
continuousmap-continuousmap             ▝▀▞▖
hypergraph-hypergraph                   ▝▀▀▀▀▀▀▀▀▀▀▀▀▞▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▚
incenter-triangle-euclidean             ▝▀▀▞▀▀▀▖
lagrange-bases-lagrange-bases           ▝▀▄▀▚
midsegment-triangles-euclidean          ▝▀▀▞▖
non-convex-non-convex                   ▝▀▀▀▞▀▀▀▀▚
one-water-molecule-atoms-and-bonds      ▝▚▚
parallel-lines-euclidean                ▝▀▀▞▚
persistent-homology-persistent-homology ▝▀▀▀▀▀▀▞▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▚▄▖
points-around-line-shape-distance       ▝▀▀▀▀▀▞▖
points-around-polyline-shape-distance   ▝▀▀▀▀▀▀▀▀▀▀▞▀▚
points-around-star-shape-distance       ▝▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▞▚
siggraph-teaser-euclidean-teaser        ▝▀▀▀▚▀▚
small-graph-disjoint-rect-line-horiz    ▝▀▀▀▀▀▀▀▞▚
small-graph-disjoint-rects              ▝▀▞▖
small-graph-disjoint-rects-large-canvas ▝▀▞▖
small-graph-disjoint-rects-small-canvas ▝▀▞▖
tree-venn                               ▝▀▀▚▞▀▖
tree-venn-3d                            ▝▀▀▀▞▀▀▄▄
two-vectors-perp-vectors-dashed         ▝▀▞▖
vector-wedge-exterior-algebra           ▝▀▚▚
wet-floor-atoms-and-bonds               ▝▀▀▚▀▀▀▀▀▀▀▀▀▀▀▀▀▚
wos-laplace-estimator-walk-on-spheres   ▝▀▀▀▞▀▀▚
wos-nested-estimator-walk-on-spheres    ▝▀▀▀▀▀▞▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▚
wos-offcenter-estimator-walk-on-spheres ▝▀▀▀▞▀▀▀▚
wos-poisson-estimator-walk-on-spheres   ▝▀▀▀▞▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▖

[cloudflare-pages]

Deploying with    Cloudflare Pages

Latest commit:	2cf4d31
Status:	✅  Deploy successful!
Preview URL:	https://23d3b9d9.penrose-72l.pages.dev
Branch Preview URL:	https://edgeworth-presets.penrose-72l.pages.dev

View logs

[codecov]

Codecov Report

Merging #1133 (2cf4d31) into main (b1f35e8) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##             main    #1133   +/-   ##
=======================================
  Coverage   64.80%   64.80%           
=======================================
  Files          59       59           
  Lines        7600     7600           
  Branches     1697     1697           
=======================================
  Hits         4925     4925           
  Misses       2574     2574           
  Partials      101      101           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.