Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: homepage gallery component #1464

Merged
merged 12 commits into from Jun 9, 2023
Merged

feat: homepage gallery component #1464

merged 12 commits into from Jun 9, 2023

Conversation

wodeni
Copy link
Member

@wodeni wodeni commented Jun 6, 2023

Description

Resolves #1288. Resolves #1307.

This PR adds a new Gallery component to components, which is used in the "Examples" page on our site. To make this work, I had to fix a SVG and Image related issue: #1288. The overall strategy is to run svgo.optimize with two plugins (prefixIds and inlineStyles) at two places: yarn registry test and editor SVG download.

Implementation strategy and design decisions

Examples with steps to reproduce them

Checklist

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

Open question

  • In some cases, we might be using prefixIds and makeIdsUnique concurrently. This doesn't seem to cause a problem in general, but it's a bit odd.
  • A lot of the diagrams don't look great in dark mode. I'd suggest turning it off in another PR.
  • Currently both Gallery and ExampleBrowser pull SVGs from main. We should find a way to run the registry and copy the cached SVGs into docs-site in another PR.

@github-actions
Copy link

github-actions bot commented Jun 6, 2023

± Registry diff

M	animation/center-shrink-circle.svg
M	atoms-and-bonds/one-water-molecule.svg
M	atoms-and-bonds/wet-floor.svg
M	curve-examples/blobs.svg
M	curve-examples/cubic-bezier.svg
M	curve-examples/open-elastic-curve.svg
M	curve-examples/space-curves.svg
M	exterior-algebra/vector-wedge.svg
M	fake-3d-linear-algebra/projection.svg
M	geometric-queries/closest-point/test-group.svg
M	geometric-queries/closest-point/test.svg
M	geometric-queries/closest-silhouette-point/test.svg
M	geometric-queries/ray-intersect/test-group.svg
M	geometric-queries/ray-intersect/test.svg
M	geometric-queries/test.svg
M	geometry-domain/siggraph-teaser.svg
M	geometry-domain/textbook_problems/c01p01.svg
M	geometry-domain/textbook_problems/c03p01.svg
M	geometry-domain/textbook_problems/c05p01.svg
M	geometry-domain/textbook_problems/c05p13.svg
M	geometry-domain/textbook_problems/c11p12.svg
M	geometry-domain/textbook_problems/ex.svg
M	graph-domain/other-examples/arpanet.svg
M	graph-domain/other-examples/nyc-subway.svg
M	graph-domain/textbook/sec1/fig1.svg
M	graph-domain/textbook/sec1/fig10.svg
M	graph-domain/textbook/sec1/fig11.svg
M	graph-domain/textbook/sec1/fig12.svg
M	graph-domain/textbook/sec1/fig13.svg
M	graph-domain/textbook/sec1/fig2.svg
M	graph-domain/textbook/sec1/fig3.svg
M	graph-domain/textbook/sec1/fig4.svg
M	graph-domain/textbook/sec1/fig5.svg
M	graph-domain/textbook/sec1/fig6.svg
M	graph-domain/textbook/sec1/fig7.svg
M	graph-domain/textbook/sec1/fig8a.svg
M	graph-domain/textbook/sec1/fig8b.svg
M	graph-domain/textbook/sec1/fig9.svg
M	graph-domain/textbook/sec2/fig10a.svg
M	graph-domain/textbook/sec2/fig10b.svg
M	graph-domain/textbook/sec2/fig11a.svg
M	graph-domain/textbook/sec2/fig11b.svg
M	graph-domain/textbook/sec2/fig11c.svg
M	graph-domain/textbook/sec2/fig12.svg
M	graph-domain/textbook/sec2/fig13.svg
M	graph-domain/textbook/sec2/fig14.svg
M	graph-domain/textbook/sec2/fig16b.svg
M	graph-domain/textbook/sec2/fig3.svg
M	graph-domain/textbook/sec2/fig4.svg
M	graph-domain/textbook/sec2/fig5.svg
M	graph-domain/textbook/sec2/fig6.svg
M	graph-domain/textbook/sec2/fig9.svg
M	graph-domain/textbook/sec5/ex32.svg
M	group-theory/quaternion-cayley-graph.svg
M	group-theory/quaternion-multiplication-table.svg
M	hypergraph/hypergraph.svg
M	lagrange-bases/lagrange-bases.svg
M	linear-algebra-domain/two-vectors-perp.svg
M	logic-circuit-domain/half-adder.svg
M	matrix-ops/tests/matrix-matrix-addition.svg
M	matrix-ops/tests/matrix-matrix-division-elementwise.svg
M	matrix-ops/tests/matrix-matrix-multiplication-elementwise.svg
M	matrix-ops/tests/matrix-matrix-multiplication.svg
M	matrix-ops/tests/matrix-matrix-subtraction.svg
M	matrix-ops/tests/matrix-transpose.svg
M	matrix-ops/tests/matrix-vector-left-multiplication.svg
M	matrix-ops/tests/matrix-vector-right-multiplication.svg
M	matrix-ops/tests/scalar-vector-division.svg
M	matrix-ops/tests/scalar-vector-left-multiplication.svg
M	matrix-ops/tests/scalar-vector-right-multiplication.svg
M	matrix-ops/tests/vector-vector-addition.svg
M	matrix-ops/tests/vector-vector-division-elementwise.svg
M	matrix-ops/tests/vector-vector-multiplication-elementwise.svg
M	matrix-ops/tests/vector-vector-outerproduct.svg
M	matrix-ops/tests/vector-vector-subtraction.svg
M	mobius/mobius.svg
M	molecules/glutamine.svg
M	molecules/nitricacid-lewis.svg
M	persistent-homology/persistent-homology.svg
M	random-sampling/test.svg
M	ray-tracing/bidirectional.svg
M	ray-tracing/next-event-estimation.svg
M	ray-tracing/path-trace.svg
M	set-theory-domain/continuousmap.svg
M	set-theory-domain/tree-tree.svg
M	set-theory-domain/tree-venn-3d.svg
M	set-theory-domain/tree-venn.svg
M	shape-distance/lines-around-rect.svg
M	shape-distance/points-around-line.svg
M	shape-spec/all-shapes.svg
M	shape-spec/arrowheads.svg
M	structural-formula/molecules/caffeine.svg
M	timeline/penrose.svg
M	triangle-mesh-2d/diagrams/angle-equivalence.svg
M	triangle-mesh-2d/diagrams/concyclic-pair.svg
M	triangle-mesh-2d/diagrams/cotan-formula.svg
M	triangle-mesh-2d/diagrams/halfedge-mesh.svg
M	triangle-mesh-2d/diagrams/relative-orientation.svg
M	triangle-mesh-2d/diagrams/triangle-centers.svg
M	triangle-mesh-3d/two-triangles.svg
M	walk-on-spheres/laplace-estimator.svg
M	walk-on-spheres/nested-estimator.svg
M	walk-on-spheres/offcenter-estimator.svg
M	walk-on-spheres/poisson-estimator.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
     |    |    |    |    |    |    |    |    |
name ▝▀▀▀▀▀▀▀▀▀▚▄▄▄▄▄▄▄▄▞▀▀▀▀▀▀▀▀▀▀▚▄▄▄▄▄▄▄▄▄▖
      compiling labeling 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
                                                          |    |    |    |    |    |    |
set-theory-domain/tree-venn                               ▝▀▚▚
set-theory-domain/tree-tree                               ▝▀▞▖
set-theory-domain/tree-venn-3d                            ▝▀▞▄
group-theory/quaternion-multiplication-table              ▝▀▀▄▞▄▖
group-theory/quaternion-cayley-graph                      ▝▀▚▚
atoms-and-bonds/wet-floor                                 ▝▚▀▀▀▚
atoms-and-bonds/one-water-molecule                        ▝▞▖
set-theory-domain/continuousmap                           ▝▚▚
linear-algebra-domain/two-vectors-perp                    ▝▚▚
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                           ▝▀▀▀▀▚▀▀▖
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                  ▝▀▚▚
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                            ▝▞▖
structural-formula/molecules/caffeine                     ▝▀▀▞▚▖
mobius/mobius                                             ▝▞▖
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                    ▝▀▀▀▀▀▞▀▀▀▚
curve-examples/blobs                                      ▝▀▀▀▀▀▀▀▀▞▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▚
curve-examples/space-curves                               ▝▀▀▀▀▀▚▀▀▀▀▖
solid/example                                             ▐
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                      ▝▀▀▀▀▀▀▀▀▚▚▄

@cloudflare-pages
Copy link

cloudflare-pages bot commented Jun 7, 2023

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 9f2a21b
Status: ✅  Deploy successful!
Preview URL: https://87129b2c.penrose-72l.pages.dev
Branch Preview URL: https://gallery.penrose-72l.pages.dev

View logs

@wodeni wodeni marked this pull request as ready for review June 7, 2023 18:52
@wodeni wodeni requested a review from samestep June 8, 2023 13:04
@keenancrane
Copy link
Collaborator

Thanks @wodeni! Is the idea that these examples will show up on the landing page (https://penrose.cs.cmu.edu/)?

@jiriminarcik
Copy link
Contributor

Thanks @wodeni! Is the idea that these examples will show up on the landing page (https://penrose.cs.cmu.edu/)?

You can preview the landing page here:
https://197bcd09.penrose-72l.pages.dev/
There is a new Examples tab.

Copy link
Collaborator

@samestep samestep left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome work, thanks so much for doing this! The new DOMParser() and new XMLSerializer() stuff looks pretty intense.

packages/docs-site/package.json Show resolved Hide resolved
packages/editor/src/components/ExamplesBrowser.tsx Outdated Show resolved Hide resolved
packages/editor/src/state/callbacks.ts Outdated Show resolved Hide resolved
@wodeni wodeni merged commit 130b2b7 into main Jun 9, 2023
10 checks passed
@wodeni wodeni deleted the gallery branch June 9, 2023 03:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

References in CSS style of imported SVGs not rendered correctly Name collisions in SVG Image import
4 participants