Description

Related issues: none

This PR will eventually contain a web runtime for Penrose. Short-term goals include:

• [x] TypeScript types for various data structures for easier pattern-matching in the evaluator
• [x] Evaluator: given a serialized State, decode it into some data structure with type, and evaluate the translation in the state. Top level function evalTranslation(s : State) : Shapes
• [x] A subset of computations as arbitrary TS functions

Longer-term goals:

• [x] Optimizer: progress below. Close to done
• [x] A subset of constraints in TensorFlow.js compatible format
• [x] If needed, port the computations to the TensorFlow format as well

See additional documentation on this wiki page.

Implementation strategy and design decisions

• This branch has more npm dependencies, so you'll have to run npm install.
• If you run into fsevents related errors, try brew install watchman, which did the trick for me on Mac OS X Catalina

Examples with steps to reproduce them

• TS definitions from Haskell: stack install && tsdef > types.d.ts
• Tests for evaluator: npm test in react-renderer

Checklist

• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I ran Haddock and there were no errors when generating the HTML site
• [ ] My changes generate no new warnings
• [ ] New and existing tests pass locally using stack test
• [ ] My code follows the style guidelines of this project (e.g.: no HLint warnings)

Open questions

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

Backend runtime related

• While the design of ArgVal seems convenient for differentiating between GPI and Val, I think it's cleaner if we just treat it as an expression since the GPI values can just be treated as yet another data structure similar to lists. Obviously a few things to consider:

-- Synonyms of GPIs: can a GPI be reused? Is it copied as reference or value?
global { defaultRect = Rectangle { ... } }
Set A { A.shape = global.defaultRect }
Set B { B.shape = global.defaultRect }

-- As discussed a long time before, GPIs as outputs of computation functions
Set A { 
  A.shape = computeRect(...) -- returns Rectangle. Does `computeRect` have to compute all properties?
  A.shape.x = 3.0 -- Does this take precedance over the previous computation?

Description

This PR extends Style and the shape definitions to handle local vars and vector/matrix types, and ports existing Style programs to use these features. The motivation is to address the dealbreakers that @keenancrane pointed out when writing graphics code in Style.

Related issues: #375 #372

Implementation strategy and design decisions

• Parsing:

  • [x] optional type annotation and import parsing (not used for now)
  • [x] vector & matrix as first class objects in Style
  • [x] new syntax for lists and tuples
  • [x] separate definition of Style identifiers

• Compilation:

  • Local variables (e.g. x) are handled by replacing them, and all references to them, by a field path with a Substance object named uniquely according to the block number and substitution number.
  • Anonymous statements (e.g. encourage near(x.shape, y.shape)) are handled by turning them into local variable-named statements with a unique anonymous keyword, using a counter
  • Vector-valued properties are sampled like other properties; to refer to anonymous elements (e.g. x[0]) in the list of varying paths, AccessPath is used in findNestedVarying

Examples with steps to reproduce them

These include all the currently working Style programs for penrose-web. (These are mostly taken from the first sample, though some may not look exactly like the image since they are from old version of the system.)

• Orthogonal vector example from paper: runpenrose linear-algebra-domain/twoVectorsPerp.sub linear-algebra-domain/linear-algebra-paper-simple.sty linear-algebra-domain/linear-algebra.dsl

• Two sets with labels: runpenrose set-theory-domain/twosets-simple.sub set-theory-domain/venn-small.sty set-theory-domain/setTheory.dsl

• Big set example with circles: runpenrose set-theory-domain/tree.sub set-theory-domain/venn-opt-test.sty set-theory-domain/setTheory.dsl

• Big set example with tree:runpenrose set-theory-domain/tree.sub set-theory-domain/tree.sty set-theory-domain/setTheory.dsl

• Continuous map: runpenrose set-theory-domain/continuousmap.sub set-theory-domain/continuousmap.sty set-theory-domain/setTheory.dsl

• Hyperbolic: runpenrose hyperbolic-domain/hyperbolic-example.sub hyperbolic-domain/PoincareDisk.sty hyperbolic-domain/hyperbolic.dsl

• Geometry (partial): runpenrose geometry-domain/pythagorean-theorem-sugared.sub geometry-domain/euclidean-simple.sty geometry-domain/geometry.dsl

• Sets (optimizing thru computation): runpenrose set-theory-domain/multisets.sub set-theory-domain/venn-comp-test.sty set-theory-domain/setTheory.dsl

• Cross-domain mesh-set example: runpenrose mesh-set-domain/DomainInterop.sub mesh-set-domain/DomainInterop.sty mesh-set-domain/DomainInterop.dsl

Checklist

• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I ran Haddock and there were no errors when generating the HTML site
• [ ] My changes generate no new warnings
• [ ] New and existing tests pass locally using stack test
• [ ] My code follows the style guidelines of this project (e.g.: no HLint warnings)

Open questions

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

• Ints are not auto-cast to float. (Right now if say side refers to a path that's an int, it won't get converted, and won't be VarAD in the autodiff, causing a runtime crash)
• Fully implement AccessPath in Evaluator.ts (see TODOs)
• Look for varying vals in other composite types like matrix, list, tuple in findNestedVarying (right now if a matrix contains varying vals, the path won't be found; AccessPath needs to include it)
• Dimensionality of vectors/matrices is hardcoded to 2 in some places
• Parametric types in general are handled poorly, with special cases to handle e.g. lists containing floats or vectors

Description

Related issue/PR: #419 #441

This PR ports the Style compiler to typescript. All past examples work, with the exception of very minor issues listed below.

Implementation strategy and design decisions

This is basically a 1:1 port of the Style compiler from Haskell, with some minor changes made to accommodate the fact that we did the Evaluator in ts first (e.g. use of insertExpr in Style compiler) and minor changes in the grammar, as well as minor changes in the functionality of the Domain/Substance toolchain. Errors are dealt with idiosyncratically, usually marked with TODO(errors).

Done

• [x] Port previous/new compiler features
  • [x] Selector typechecking (relies on Substance typechecking, @wodeni)
  • [x] Subtypes
  • [x] Path aliasing
  • [x] Disambiguating SEFuncOrValsCons
  • [x] Adding labels and names to translation
• [x] Add some tests
• [x] Integrate with system
  • [x] Repro all existing examples with new toolchain (with test suite)
  • [x] Requires Evaluator to work with new grammar
  • [x] Address important TODOs/COMBAKs
• [x] Integrate with new Domain/Substance parsers (w/ @wodeni)
• [x] Document compiler (moving comments from Haskell functions)
• [x] Integrate with App + CLI

Changes to be made in the near future

• [x] Layering (@wodeni)
• [ ] Fix minor label/feature problems, documented in #459 #460 #461 (@hypotext)
• [ ] Ad-hoc unit testing of negative examples (e.g. testing that invalid programs have the correct errors reported) and specific features in isolation (e.g. path aliasing)
• [ ] Deprecating StyleTestData? (@hypotext)
• [ ] Break up Style into modules?
• [ ] Move comments into docstring format?
• [ ] Overhaul error and warning handling (w/ @wodeni)

Examples with steps to reproduce them

All examples from the previous compiler, on this page, work.

For more documentation, see compiler/README.md.

Checklist

• [x] I have commented my code, particularly in hard-to-understand areas
• [x] My changes generate no new warnings
• [x] New and existing tests pass locally using npm test
• [x] I ran npm run docs and there were no errors when generating the HTML site
• [x] My code follows the style guidelines of this project (e.g.: no ESLint warnings)

Open questions

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

• [ ] Pseudorandomness
• [ ] Int/Float disambiguation
• [ ] Syntactic sugar
• [ ] Plugins??

Description

The code in this branch is meant to allow users to write constraints/objs in basic math, and translate them afterward to the specific optimization framework. See the README in react-renderer/src/mathtransform for more details.

Ideally it would run each time a file is changed (or at least a file from a specific list of files we want to transform), so hot-reloading functionality. It’s currently built to run on the command line (sample line: jscodeshift bugtest.ts -t toCustomAD.ts -p -d) , but I think it could also be modified to use the API functions (more detail is here). Another thing to note (also mentioned in the README) is that jscodeshift modifies in place the file you call it on (unless you call a dry run). So if we wanted to keep an unmodified version of that file we would need to make a copy. The CLI for jscodeshift apparently does not support redirecting the output (though the API does) But the program doesn’t change much code, and which code it changes is well-defined and easily reversible so maybe storing the old version is not necessary.

Sample Input/Output

Sample Input

    export const objDict = {
        // mathtrans
        equal: (x: number, y: number) => squared(x - y),

        // mathtrans
        above: ([t1, top]: [string, any], [t2, bottom]: [string, any], offset = 100) =>
            // (getY top - getY bottom - offset) ^ 2
            squared(top.y.contents - bottom.y.contents - varOf(offset))
    }

Sample Output

    export const objDict = {
        // mathtrans
        equal: (x: VarAD, y: VarAD) => squared(sub(x, y)),

        // mathtrans
        above: ([t1, top]: [string, any], [t2, bottom]: [string, any], offset = 100) =>
            // (getY top - getY bottom - offset) ^ 2
            squared(sub(sub(top.y.contents, bottom.y.contents), varOf(offset)))
    }

Remaining issues

Dependencies

I’m not sure what to do with the new dependencies. I was just originally working on this project outside of the Penrose directory, so I had to download the jscodeshift package and make my own tsconfig file to get it to work. I assume it should be merged into the main dependency list and node_modules folder but I'm not sure how to do that.

I made some simple examples that Keenan requested for the Penrose blog post / Twitter thread, but am running into a weird font size issue.

@maxkrieger @wodeni can you take a quick look and let me know how to address this ASAP, or if there's a (reasonably principled) workaround? It's blocking us from posting examples :)

Repro with minimal example: on branch set-example, do runpenrose set-theory-domain/intersection-venn-diagram.sub set-theory-domain/venn-simple.sty set-theory-domain/setTheory.dsl

Expected result: all labels have the same size, 15 pt

Actual result: "Circle" label looks smaller than the other two

Tried:

• changing the label size in Style (seems to actually set the label size)
• running examples with other Styles ("Circle" seems to be consistently mis-sized across Style programs)
• looking at DOM (svg indeed has fontSize set to the style size, but changing it in chrome does not change the font size live, as noted in https://github.com/penrose/penrose/issues/301#issue-529443958)
• changing the label text (I can't consistently repro the mis-sizing, e.g. if I change the labels to strings of different sizes, like "Z", "ZZZZ", and "ZZZ ZZZ ZZZZ", the "Z"s all appear the same size, so I'm not sure if it's an aspect ratio problem)

I also don't know if all three labels are actually mis-sized, but only "Circle" is the visually noticeable one.

Related issues: https://github.com/penrose/penrose/issues/301#issue-529443958

BEFORE MERGING: please try importing the SVG in illustration (12).zip into Illustrator. Make sure the brackets/parens show up, it should look like this:

Description

A quick hack to substitute inline SVG <image>s with their contents to allow for export portability. Puts all xlinks in the external images into their own unique namespaces.

Related issues: penrose/penrose-ide#6

Inline image before:

<image href="left-bracket.svg" x="490.5946350097656" y="340" width="10" height="20"></image>

Inline image after:

<g xmlns="http://www.w3.org/2000/svg" transform="translate(150.78616333007812,340)"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="20" viewBox="0 0 6 37" version="1.1"><!--latexit:AAAE9HjabVNrbFRFFD4zU0rpUnrb8igt0IvdKj6AbRW3iGBbyqLiLo/dbrfdLnX2
7uz20rv3bu6di2w3TSaK/MEYQ4gBFbXbPxQfiBpjGmOMxhglJto2mhCjP4wx/DAx
Jv4wMdHZh4iGmdzcM2fmnPnOd75J5gzd4T7fEsKkZlntEydi3uPMdnTLjHmt5DGm
cWfES21tQpfuiJdbuWZAp169rGxeXrf5tk5v1+13bLnzrru7e3fu7t//cOjgcGxs
XEtNGJbDh7ymaxiLK+o9K9eqw6HwtkmWd0blv5o36tUM6jhzDasalabmltVrBBZE
1IhlolYsF3VihaifW9e6vq19w8ZNHcIjVopVolE0iTbRLjaKTUKNJanDDN1kQ5pl
WHYka6XYENe5wWI5m9Fs0mCJLM2YelrXKJclRVKUs3GlMUm1yYxtuWZqbylw1LFc
W2MRdoJ3QnUs3rPVs227bygUPrJ/YCwULh8M56jGAj5VTlCQaFjoufe+HaOVMkya
ZbGKyZzhakDxfv8/ZiwUPliuW6lZ8Dyw68ERSYTDbd3MCOWQTLTnIQksFA66nErc
4fLO7J4+v4yrLBYHPHsH9wVurCWofi6tpMuZI5rFetEyriyMpSzNzTKTl5HEu305
nihQm+uawabrx1yHyRomaYbFpVnC7CQKZfam1S7pSalpy5afydWy9+aIAs06Tj6b
lCezlE84/98rOW+1F3d5ujdR0M2cRGpqlYvSrqFyS+X5HFNTui15MfLSoJqtS6yq
NkFtqnGpxPqSgB45EJx5VKyeeUysEa3RUDggAS4dOnzEE44MReU6rE8xSUw6YNCM
I9chWVhn35ZKKxVFrBXrokHLpJolmR4ZrWYoxv1VS3oTRyWhg7pW0gm188WEXzof
p+NK8008pyrUF5P+W/o7+wYqVy4wTzpTkjzXJZD+j65dPz/9x4jYIFPqx+Sdg1KH
xUl/1SppLbvdF+hW5QTRUOp0bl9AdJR6ejgug9zj40rLDXH8i3LWTfjLsjnA8izV
X32mX+enIrZlcYGgDpqgDTphK/SAH+JAYQJyUIAn4Rl4Fp6DM3AWnodz8AK8BC/D
RbgEr8Ob8Ba8De/Ce/A+zMMH8Clcha/gG/gBfoHfUA1qRK2oA3WhHrQT7UK70QAK
oig6iijSkY04yqOn0NPoFDqNLqAZdAldQfPoM/Q5uoq+xEU8h1/Db+DL+Ap+B8/j
T/AXeBFfwz/in/DP+Dr+Ff+O/8R/kVriIa2knahkB+klQRIlcaIRg5jEIVNkmpwk
p8kZcpa8SC6QV8gMmSUXyYfkY7JEviXfVXqAUfUpF+A/g3z/N2H8mSU=
-->
<defs>
<g>
<symbol overflow="visible" id="glyph0-0">
<path style="stroke:none;" d=""/>
</symbol>
<symbol overflow="visible" id="2-ns-glyph0-1">
<path style="stroke:none;" d="M 9.140625 8.96875 L 9.140625 7.53125 L 5.671875 7.53125 L 5.671875 -25.453125 L 9.140625 -25.453125 L 9.140625 -26.890625 L 4.234375 -26.890625 L 4.234375 8.96875 Z M 9.140625 8.96875 "/>
</symbol>
</g>
</defs>
<g id="surface1">
<g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
  <use xlink:href="#2-ns-glyph0-1" x="-3.788" y="27.6482"/>
</g>
</g>
</svg></g>

Yes, you may notice that id="glyph0-0" is not unique, and neither is <g id="surface1">. However, it has minimal side effects right now, and would need a lot of extra hacks to prevent.

.

Description

Though Square is a rect-like shape, it does not expose the same interface of w and h like other rect-likes, which causes many constraint implementations to fail on squares.

This PR enhances the bbox function to compute w, h, and center.

Additionally, this PR moves the implementation of line-like bboxes into bbox. This also consolidates disjointRectLineAAVert and disjointRectLineAAHoriz into one constraint disjointRectLineAA.

Implementation strategy and design decisions

Include a high-level summary of the implementation strategy and list important design decisions made, if any.

Checklist

• [x] I have commented my code, particularly in hard-to-understand areas
• [x] My changes generate no new warnings
• [x] New and existing tests pass locally using yarn test
• [x] I ran yarn docs and there were no errors when generating the HTML site
• [x] My code follows the style guidelines of this project (e.g.: no ESLint warnings)

Description

Some our packages use create-react-app for the production build, and they slow the CI build workflow down significantly. The reason is CRA uses Webpack for bundling, which is very slow. To work around this, we have been using ESBuild as the bundler in live-reload mode, but not the build. This uses ESBuild for all packages in both live-reload and build modes.

Also, this PR adds clean scripts to all packages, so that when we run yarn clean at the top level, all build artifacts will be removed.

Implementation strategy and design decisions

• The clean scripts use rimraf to remove files
• In the top-level package.json, we also remove the global node_modules because lerna clean does not remove it.
• Except for core (which uses both ESBuild for ESM and CJS builds and webpack for UMD build), all packages' build scripts are renamed to build.js for consistency.
• For easier deployment, browser-ui and synthesizer-ui build their app.js/css under public, instead of build, just like what @penrose/panels does.

Checklist

• [x] I have commented my code, particularly in hard-to-understand areas
• [x] My changes generate no new ESLint warnings

Open questions

N/A

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

We are very soon going to need to support polymorphic lists in Element, Substance, and Style (both selector and block). This is necessary for the raytracing domain and for several subsequent ones (e.g. graph theory, neural networks). Here is an example usage in raytracing from the design paper:

Specifically:

• Element needs to be able to parse, specify, typecheck, etc. lists (as a builtin polymorphic type that can be used to define further types)--with syntactic sugar
• Substance needs to be able to parse, specify, typecheck lists (as values of list types)--with syntactic sugar
• Style selectors need to be able to parse and match on those list types and lists of values from Substance
• Style blocks need to be able to specify lists of expressions and operate generically over them (this may be a task for a separate issue)

The new Style rewrite (#99) reduced the performance of the system. Based on the profiling results (#13), we suspect the optimizer becomes slower due to the increased number of transformations we do. We would like to explore other optimization methods that are of lower computational costs.

Some early ideas:

• eliminate the automatic differentiation
• use a zeroth order optimization method
  • it may converge slower overall but maybe each step will be faster
• numerically estimate gradients

Description

Resolves #731.

This PR makes Penrose deterministic. At a surface level, that roughly means the following:

• registry
  • each of the trios in any Registry now has an an additional field variation, which represents a seed
  • rendered versions of all diagrams in the registry are tracked in diagrams/, kept up to date by a CI check
  • diagrams using bold text seem to render differently on macOS vs in CI, so they have been removed from the registry
• @penrose/core
  • compileTrio, diagram, and interactiveDiagram now use keyword params; now variation is required
  • the end-to-end diagram tests now write to the diagrams/ folder in this repo instead of to /tmp/diagrams/
  • to get a consistent diagram, you now must always call resample after calling prepareState
  • the resample function no longer takes a number, since previously it didn't do anything
  • resample just resets the state; it doesn't actually change the variation
  • to change the variation, use the new variationSeeds function, then call resample
  • State now has a field seeds which is used to seed PRNGs when calling certain functions on it
• @penrose/browser-ui
  • new setting for the variation
  • resample button changes the variation and also resets the diagram
  • new reset button which resets the diagram but keeps the variation the same
  • hitting enter on the variation text box also resets the diagram using the entered variation string
• @penrose/docs-site
  • always uses the same two seeds for _ShapeProps
• @penrose/synthesizer-ui
  • the variation used is always progNumber.toString()

Implementation strategy and design decisions

• removed top-level call to seedrandom with { global: true }
• many functions throughout @penrose/core now take a seedrandom.prng as their first parameter
• every function in compDict takes a Context as its first parameter; currently just a PRNG
• using the variation, we (first, so resampling doesn't need to recompile) generate some Seeds into the State

Examples with steps to reproduce them

Standard Penrose workflow. From the repo root:

yarn start

Then in a separate terminal:

cd examples/set-theory-domain
npx roger watch setTheory.dsl venn.sty twosets-simple.sub

However many times you click "reset", you should still get the same diagram.

Again, click "reset" however many times and you'll still get the same diagram.

Checklist

• [x] I have commented my code, particularly in hard-to-understand areas
• [x] My changes generate no new ESLint warnings

Description

As a followup to #1092 and #1172, this PR simplifies @penrose/optimizer by using top-level await. This requires us to add build: { target: "esnext" } to all our Vite configs.

Checklist

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

Bumps json5 from 1.0.1 to 1.0.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

As mentioned in #1092, Nx sets a FORCE_COLOR environment variable when calling scripts. However, some tools don't follow this convention, and instead take CLI args to enable color. In shell it's easy to pass a CLI arg conditionally on the setting of an environment variable; for instance:

• esbuild ${FORCE_COLOR+--color=true}
• cargo ${FORCE_COLOR+--color=always}

I didn't actually implement this, though, because I don't think it works on Windows. It would be nice to get colors for all these tools on all platforms.

Description

We don't need to, as far as I can tell; anything using @penrose/core that wants to bundle it should be able to just bundle it directly, so there's no reason to put all our dependencies into the bundle when they're already dependencies of the package itself. This is a followup to #1160, #1165, and #1170. See also #423.

Implementation strategy and design decisions

To increase consistency with our other packages, I changed the core build directory from build/dist/ to just dist/. Previously packages/synthesizer-ui/README.md also erroneously said it used build/ instead of dist/, so I corrected that here too.

Checklist

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

Open questions

• This PR removes core's start and watch scripts, because I wasn't sure how to deal with them when we have both tsc and tsc-alias to run.

Description

Related issue/PR: #430

This PR makes #fff 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

• [x] I have commented my code, particularly in hard-to-understand areas
• [x] My changes generate no new ESLint warnings
• [x] 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.

Is your feature request related to a problem? Please describe.

Currently, only calls to the constraint library is allowed in ensure and encourage statements. The syntax can be a bit restrictive and counter-intuitive. For instance, to express norm(c.vec) > 200, one can only write ensure lessThan(200, norm(c.vec)).

Describe the solution you'd like

Support boolean expressions such as ==, >, <, <=, >= in constraint/objective statements as a starter. To improve the expressiveness, we may also support chained expressions such as 10 <= norm(c.vec) < 200.