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

refactor: unify default strokeColor for outline shapes #1169

Merged
merged 5 commits into from Jun 5, 2023
Merged

Conversation

wodeni
Copy link
Member

@wodeni wodeni commented Dec 9, 2022

Description

Related issue/PR: #430

This PR makes #000 the default strokeColor for "outline" shapes such as Line, Path, and Text. Path is consider an outline shape out of uncertainty that the path might not be closed.

Implementation strategy and design decisions

  • Change default props in respective shape files

Examples with steps to reproduce them

See deployment allShapes-allShapes example.

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

Open questions

Looks like this impacted variations of many diagrams. Why? (cc: @samestep) Looks like even when the Style props remain the same, as long as there's a change to the defaults, the resulting diagrams will change.

@codecov
Copy link

codecov bot commented Dec 9, 2022

Codecov Report

Merging #1169 (0ea67b9) into main (099fca1) will decrease coverage by 2.72%.
The diff coverage is 0.00%.

❗ Current head 0ea67b9 differs from pull request most recent head 0a2953a. Consider uploading reports for the commit 0a2953a to get more accurate results

@@            Coverage Diff             @@
##             main    #1169      +/-   ##
==========================================
- Coverage   64.77%   62.06%   -2.72%     
==========================================
  Files          64       59       -5     
  Lines        7515     7112     -403     
  Branches     1760     1708      -52     
==========================================
- Hits         4868     4414     -454     
- Misses       2521     2615      +94     
+ Partials      126       83      -43     
Impacted Files Coverage Δ
packages/core/src/renderer/AttrHelper.ts 52.59% <0.00%> (+3.59%) ⬆️
packages/core/src/shapes/Line.ts 100.00% <ø> (ø)
packages/core/src/shapes/Path.ts 100.00% <ø> (ø)
packages/core/src/shapes/Text.ts 66.66% <ø> (-8.34%) ⬇️

... and 65 files with indirect coverage changes

@github-actions
Copy link

github-actions bot commented Dec 9, 2022

± Registry diff

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	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	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	shape-distance/lines-around-rect.svg
M	shape-distance/points-around-line.svg
M	shape-spec/all-shapes.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	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
M	word-cloud/example.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   7s
                                                          |    |    |    |    |    |    |    |
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 Dec 9, 2022

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 0a2953a
Status: ✅  Deploy successful!
Preview URL: https://f4510b97.penrose-72l.pages.dev
Branch Preview URL: https://default-props.penrose-72l.pages.dev

View logs

@wodeni wodeni requested a review from samestep December 10, 2022 02:15
@samestep
Copy link
Collaborator

samestep commented Dec 20, 2022

Looks like this impacted variations of many diagrams. Why? (cc: @samestep) Looks like even when the Style props remain the same, as long as there's a change to the defaults, the resulting diagrams will change.

Right, this is because we just allocate ad.Input nodes as we find them, so if you, for instance, change sampleColor(context) to black(), that changes how many ad.Input nodes come before later ones, so the sampling strategy of using a single PRNG and sampling the ad.Inputs from it in order will result in different sampled values for the later input nodes.

We may want to come up with a more stable sampling strategy? But I'm not sure if that's possible or worth it.

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.

Sorry for taking so long to review this! The code changes look great. For the changes to the generated diagrams/ we might want to update some variations though... would be nice if Penrose had a way to generate a grid of different variations to let you quickly pick one that looks good.

@wodeni
Copy link
Member Author

wodeni commented Feb 6, 2023

Sorry for taking so long to review this! The code changes look great. For the changes to the generated diagrams/ we might want to update some variations though... would be nice if Penrose had a way to generate a grid of different variations to let you quickly pick one that looks good.

Gotta merge #1287!

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.

Thanks for updating the registry diagram variations! I'm good to merge this, but just for future reference, I did want to note the few specific diagrams that still seem to have meaningful changes by this PR:

  • curve-examples/cubic-bezier.svg (looks upside down now?)
  • geometric-queries/closest-point/test-group.svg (now the circle and the rectangle overlap)
  • geometric-queries/closest-point/test.svg (now the polyline and the triangle overlap)
  • geometry-domain/siggraph-teaser.svg (now the angle $qpr$ is a bit narrow)
  • graph-domain/textbook/sec1/fig10.svg (the graph is planar but now not drawn so)
  • graph-domain/textbook/sec1/fig12.svg (the labels RRP4 and RRP41 look ambiguous now)
  • graph-domain/textbook/sec1/fig13.svg (the Team 2 and Team 5 labels look weird)
  • graph-domain/textbook/sec1/fig8b.svg (a lot of the labels are now clumped)
  • graph-domain/textbook/sec2/fig11c.svg (the graph is planar but no longer drawn so)
  • walk-on-spheres/nested-estimator.svg (the spheres are now all clumped together on one side)

To clarify, I don't even necessarily think that it's worth changing the variations in this PR; I'm mostly just writing these down to note the sorts of ways that diagrams can qualitatively change when we update the variation. I think it's an interesting research problem to think about ways that we can make it more manageable to maintain our registry going forward under this sort of change.

@wodeni wodeni merged commit a105c7c into main Jun 5, 2023
11 checks passed
@wodeni wodeni deleted the default-props branch June 5, 2023 15:56
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.

None yet

2 participants