feat: show multiple diagram instances on a grid in `editor` #1287

wodeni · 2023-02-02T05:42:15Z

Description

This PR introduces a new Grid panel to editor, which show multiple diagram instances at once. The number of instances is 10 by default, and configuration through the option panel.

synthesizer-ui first introduced a grid of Penrose-generated diagrams in a web app. This PR pulls relevant components (i.e. Gridbox and Grid) into components and uses them in both editor and synthesizer-ui.

Implementation strategy and design decisions

Grid contains Gridbox, which contains Simple. The properties are passed through, with Gridbox inheriting all Simple's props and Grid having a gridboxProps option for each Gridbox.
Gridbox can be stateful, which means that it caches the trio it receives from props and caches state from Simple's onFrame callback.
Styling: use styled-components to style Grid and Gridbox. The client may provide a theme using <ThemeProvider>.
editor's state management: the IDE wraps GridPanel around Grid and maintains a diagramGridState. All state updates are done through Recoil.
Image and Line arrowhead id collisions: since SVG has a global namespace, when there are multiple diagrams on the page with duplicated defs, they disappear. This PR introduces an util function makeIDsUnique, which changes all definitions and corresponding references of IRI references in the SVG such that they are unique. (Resolves Name collisions in SVG Image import #1288)

Examples with steps to reproduce them

See preview deployment:

Checklist

I have commented my code, particularly in hard-to-understand areas
My changes generate no new ESLint warnings
I have reviewed any generated registry diagram changes

Open questions

Caching in editor: the grid doesn't cache anything other than a list of variations, which causes re-rendering whenever the grid size is decreased and then increased. No re-rendering happen when the gridSize is decreasing because there are no prop changes.

github-actions · 2023-02-02T05:46:00Z

± Registry diff

M	3d-projection-fake-3d-linear-algebra.svg
M	arrowheads-arrowheads.svg
M	caffeine-structural-formula.svg
M	collinear-euclidean.svg
M	continuousmap-continuousmap.svg
M	parallel-lines-euclidean.svg
M	persistent-homology-persistent-homology.svg
M	siggraph-teaser-euclidean-teaser.svg
M	tree-tree.svg
M	tree-venn-3d.svg
M	two-vectors-perp-vectors-dashed.svg
M	vector-wedge-exterior-algebra.svg
M	wos-laplace-estimator-walk-on-spheres.svg
M	wos-nested-estimator-walk-on-spheres.svg
M	wos-offcenter-estimator-walk-on-spheres.svg
M	wos-poisson-estimator-walk-on-spheres.svg

📊 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
                                                   |    |    |    |    |    |    |    |    |
3d-projection-fake-3d-linear-algebra               ▝▞▖
allShapes-allShapes                                ▝▚▚▄▄▄
arrowheads-arrowheads                              ▝▞▖
caffeine-structural-formula                        ▝▀▀▚▀▄
center-shrink-circle-animation                     ▝▞▖
circle-example-euclidean                           ▝▀▚▀▀▀▖
collinear-euclidean                                ▝▀▞▖
congruent-triangles-euclidean                      ▝▀▀▚▚
continuousmap-continuousmap                        ▝▚▚
cubic-bezier-cubic-bezier                          ▝▚▀▀▚
glutamine-molecules-basic                          ▝▀▚▚
half-adder-distinctive-shape                       ▝▚▀▖
hypergraph-hypergraph                              ▝▀▀▀▀▞▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▖
incenter-triangle-euclidean                        ▝▀▚▚
lagrange-bases-lagrange-bases                      ▝▚▚
midsegment-triangles-euclidean                     ▝▀▞▖
mobius-mobius                                      ▝▞▖
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                  ▝▀▀▀▚▚
quaternion-group-group-theory-cayley-graph         ▝▀▚▚
quaternion-group-group-theory-multiplication-table ▝▀▀▀▄▞▄
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-tree                                          ▝▀▚▚
tree-venn                                          ▝▀▚▚
tree-venn-3d                                       ▝▀▞▄▄
two-triangles-triangle-mesh-3d                     ▝▚▚
two-vectors-perp-vectors-dashed                    ▝▚▚
vector-wedge-exterior-algebra                      ▝▚▚
wet-floor-atoms-and-bonds                          ▝▚▀▀▖
word-cloud-example-word-cloud                      ▝▀▞▖
wos-laplace-estimator-walk-on-spheres              ▝▀▚▚
wos-nested-estimator-walk-on-spheres               ▝▀▀▀▞▀▀▀▖
wos-offcenter-estimator-walk-on-spheres            ▝▀▚▀▀▀▀▚
wos-poisson-estimator-walk-on-spheres              ▝▀▚▀▀▖

codecov · 2023-02-02T05:47:52Z

Codecov Report

Merging #1287 (3d163ec) into main (1895d8f) will decrease coverage by 0.46%.
The diff coverage is 4.41%.

@@            Coverage Diff             @@
##             main    #1287      +/-   ##
==========================================
- Coverage   63.04%   62.59%   -0.46%     
==========================================
  Files          61       62       +1     
  Lines        7301     7357      +56     
  Branches     1715     1732      +17     
==========================================
+ Hits         4603     4605       +2     
- Misses       2614     2661      +47     
- Partials       84       91       +7

Impacted Files	Coverage Δ
packages/core/src/renderer/Image.ts	`5.55% <0.00%> (+1.70%)`	⬆️
packages/core/src/renderer/Renderer.ts	`25.92% <ø> (ø)`
packages/core/src/renderer/util.ts	`3.17% <3.17%> (ø)`
packages/core/src/renderer/Line.ts	`2.83% <25.00%> (-0.03%)`	⬇️

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

cloudflare-pages · 2023-02-02T05:54:31Z

Deploying with Cloudflare Pages

Latest commit:	`3d163ec`
Status:	✅ Deploy successful!
Preview URL:	https://9fd517fb.penrose-72l.pages.dev
Branch Preview URL:	https://grid.penrose-72l.pages.dev

View logs

samestep · 2023-02-06T21:32:03Z

Looks like CI is failing: https://github.com/penrose/penrose/actions/runs/4108063039/jobs/7088302283

TypeError: uuid.v4 is not a function

Any idea why?

wodeni · 2023-02-07T20:36:14Z

Turns out that bumping uuid to 9.0 everywhere fixed the CI. My guess is a lower version is hoisted somehow.

samestep

Still reviewing the code itself, but had a quick comment while playing with it: would it be possible to disable the "replace diagram with variation when you click on it" in editor? Or if that would be too much implementation burden for this PR, could we make a GitHub issue to do that after this PR is merged?

samestep · 2023-02-08T18:19:24Z

Is the code for packages/core/src/renderer/util.ts copied from somewhere? If so, could you add a comment to the top of that file with a link to where we got it from, and also the copyright notice and license if applicable?

samestep · 2023-02-08T18:21:04Z

Why does packages/examples/src/walk-on-spheres/walk-on-spheres-ball.svg change?

samestep · 2023-02-08T18:42:08Z

I'm getting this error in Storybook for Continuous Map under Grid Component:

TypeError: this.props.header is not a function
    at http://localhost:6006/src/Grid.tsx:58:26
    at Array.map (<anonymous>)
    at Grid.innerContent (http://localhost:6006/src/Grid.tsx:50:32)
    at Grid.render (http://localhost:6006/src/Grid.tsx:89:21)
    at finishClassComponent (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:14267:39)
    at updateClassComponent (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:14232:32)
    at beginWork (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:15463:22)
    at beginWork$1 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:19248:22)
    at performUnitOfWork (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:18693:20)
    at workLoopSync (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:18632:13)

samestep · 2023-02-08T18:43:04Z

Similarly I get this error in Storybook under GridBox Component, not right away, but as soon as I click on the diagram:

TypeError: Cannot read properties of undefined (reading 'map')
    at Gridbox.render (http://localhost:6006/src/Gridbox.tsx:178:41)
    at finishClassComponent (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:14267:39)
    at updateClassComponent (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:14232:32)
    at beginWork (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:15463:22)
    at beginWork$1 (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:19248:22)
    at performUnitOfWork (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:18693:20)
    at workLoopSync (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:18632:13)
    at renderRootSync (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:18611:15)
    at recoverFromConcurrentError (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:18233:28)
    at performSyncWorkOnRoot (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-4QL7BUP5.js?v=6233ef11:18375:28)

samestep

Looks great! Left a few comments here and above. I'm cool to merge this once the questions about packages/core/src/renderer/util.ts and Storybook are resolved.

packages/components/src/Simple.tsx

packages/editor/src/components/DiagramPanel.tsx

samestep

Awesome, thanks Nimo!

packages/core/src/renderer/util.ts

Co-authored-by: Sam Estep <sam@samestep.com>

wodeni added 4 commits January 31, 2023 10:45

chore: move grid to components

b3ca0b4

feat: grid and gridbox stories

8024b13

chore: change params and fix overlay css

8777081

feat: grid panel in IDE

690f223

wodeni marked this pull request as draft February 2, 2023 05:42

fix: overlay css

c7c0bd9

wodeni added 13 commits February 2, 2023 02:35

fix: image rendering for venn-3d and grid rendering on start

b04a9f8

feat: collective resampling

525a252

feat: variable grid size in ide

eecc92c

feat: image id resolution (resolves #1288)

3da9e17

refactor: store source in metadata to sync state updates

a739088

fix: arrowhead id collision

e5d1c91

fix: grid variation caching

f89c5ac

refactor: use grid in edgeworth

f266f08

chore: use uuid for svg id generation

6bea2bd

fix: themes and dead code

c7cb7df

fix: simple state propagation

c723ca8

fix: manage grid state using recoil

0a2f303

fix: edgeworth header

47ec829

wodeni marked this pull request as ready for review February 3, 2023 21:52

wodeni mentioned this pull request Feb 6, 2023

refactor: unify default strokeColor for outline shapes #1169

Merged

3 tasks

samestep added 2 commits February 6, 2023 16:23

Merge branch 'main' into grid

21f429d

Merge branch 'main' into grid

923231d

wodeni added 3 commits February 6, 2023 16:44

chore: update uuid import

7644c02

chore: update uuid import

502c47b

chore: bump uuid to v9

6e14504

wodeni added 3 commits February 8, 2023 09:52

Merge branch 'main' into grid

3ac37fe

chore: limit statefulness to variation in gridbox

cb16a0a

refactor: stateful variation

bb145f3

samestep reviewed Feb 8, 2023

View reviewed changes

packages/components/src/Simple.tsx Show resolved Hide resolved

packages/editor/src/components/DiagramPanel.tsx Show resolved Hide resolved

wodeni added 2 commits February 8, 2023 14:07

fix: stories

8aaa1d2

chore: add license for renderer/util

8323a47

samestep approved these changes Feb 8, 2023

View reviewed changes

packages/core/src/renderer/util.ts Outdated Show resolved Hide resolved

Update packages/core/src/renderer/util.ts

3d163ec

Co-authored-by: Sam Estep <sam@samestep.com>

wodeni merged commit fbaf03c into main Feb 9, 2023

wodeni deleted the grid branch February 9, 2023 13:23

This was referenced Feb 9, 2023

feat: basic group shape #1294

Merged

Determinism is broken #1312

Closed

wodeni mentioned this pull request Jun 7, 2023

feat: homepage gallery component #1464

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: show multiple diagram instances on a grid in `editor` #1287

feat: show multiple diagram instances on a grid in `editor` #1287

wodeni commented Feb 2, 2023 •

edited

github-actions bot commented Feb 2, 2023 •

edited

codecov bot commented Feb 2, 2023 •

edited

cloudflare-pages bot commented Feb 2, 2023 •

edited

samestep commented Feb 6, 2023

wodeni commented Feb 7, 2023

samestep left a comment

samestep commented Feb 8, 2023

samestep commented Feb 8, 2023

samestep commented Feb 8, 2023

samestep commented Feb 8, 2023

samestep left a comment

samestep left a comment

feat: show multiple diagram instances on a grid in editor #1287

feat: show multiple diagram instances on a grid in editor #1287

Conversation

wodeni commented Feb 2, 2023 • edited

Description

Implementation strategy and design decisions

Examples with steps to reproduce them

Checklist

Open questions

github-actions bot commented Feb 2, 2023 • edited

± Registry diff

📊 Performance

Key

Data

codecov bot commented Feb 2, 2023 • edited

Codecov Report

cloudflare-pages bot commented Feb 2, 2023 • edited

Deploying with Cloudflare Pages

samestep commented Feb 6, 2023

wodeni commented Feb 7, 2023

samestep left a comment

Choose a reason for hiding this comment

samestep commented Feb 8, 2023

samestep commented Feb 8, 2023

samestep commented Feb 8, 2023

samestep commented Feb 8, 2023

samestep left a comment

Choose a reason for hiding this comment

samestep left a comment

Choose a reason for hiding this comment

feat: show multiple diagram instances on a grid in `editor` #1287

feat: show multiple diagram instances on a grid in `editor` #1287

wodeni commented Feb 2, 2023 •

edited

github-actions bot commented Feb 2, 2023 •

edited

codecov bot commented Feb 2, 2023 •

edited

cloudflare-pages bot commented Feb 2, 2023 •

edited