Make SVGs "Penrose-editable"

[keenancrane]

Picture a world, where…

1. SVGs exported from Penrose contain (in metadata) the entire source code used to generate the diagram (Domain, Style, and Substance), along with the seed and software version.
2. The Penrose IDE can directly import an SVG, and automatically import this metadata.

Then we immediately provide editability of any (SVG) diagram created in Penrose. For instance, if someone uploads a Penrose-generated SVG to Wikipedia, a later Wikipedian can come along and edit/fix/improve the diagram in Penrose.

[joshsunshine]

This sounds great to me. Just to make this concrete, we can include the following non-renderable tags in the SVG source we output:

<svg>
... actual content
<penrose>
  <version>[...version of penrose used to create this diagram...]</version>
  <variation>[...variation string...]<variation>
  <sub>[...substance code...]</sub>
  <sty>[...style code...]</sty>
  <dsl>[...domain code...]</dsl>
</penrose>
</svg>

Do you think we need anything else @keenancrane, @wodeni, or @samestep ?

[wodeni]

@joshsunshine basically that's it. See https://gist.github.com/wodeni/ca22e7bd35ba735db0549e1c826074c4 for an example of data that the ide loads. Specifically https://gist.github.com/wodeni/ca22e7bd35ba735db0549e1c826074c4#file-metadata-json

[YonahGoldberg]

Hey guys, me, @lmxlucy, @lzx0406, @mzhou08 want to work on this for the CMU 17313 open source contribution project. I have some questions to help us get started though.

I think understand the workflow for exporting the code in the SVG. We were looking at how the SVG is exported, and it seems like it is directly taken from the DOM after compiling. We thought the place to edit the SVG would then be in renderer.ts and in particular the RenderStatic function. We tested this and adding a new attribute to the SVG here resulted in that attribute being exported. It would be nice to hear from you guys though if there is something we're missing or you would do differently.

Secondly, concerning importing the SVG via the IDE, I'm wondering how you imagine this to look right now? As I currently understand it, the only way to serve pre-existing files to Penrose is via Roger. The watch.ts file looks like it broadcasts all the files to the server we're running on localhost, and then on the server side somehow those files get transferred to the IDE. Did you want us to do the same for importing the SVG or should we create a button in the IDE to do it? Another question we had about this is if we're only creating a roger command, it may not be useful when Penrose is actually deployed, where I assume there will be some other way to import files. But if there's also some server side code we have to write to parse the SVG and send the code to the IDE, then that may actually get reused.

Looking forward to working on Penrose!

[wodeni]

Hey guys, me, @lmxlucy, @lzx0406, @mzhou08 want to work on this for the CMU 17313 open source contribution project. I have some questions to help us get started though.

Thanks for contributing to Penrose!

I think understand the workflow for exporting the code in the SVG. We were looking at how the SVG is exported, and it seems like it is directly taken from the DOM after compiling. We thought the place to edit the SVG would then be in renderer.ts and in particular the RenderStatic function. We tested this and adding a new attribute to the SVG here resulted in that attribute being exported. It would be nice to hear from you guys though if there is something we're missing or you would do differently.

Yep, RenderStatic and RenderInteractive are the main entry points. The individual renderers are located in the renderer folder. What you are doing is on the right track. One thing I'd note is your branch may introduce changes to the "registry trios" we use in CI for benchmarking and regression testing. Please refer to the wiki for instructions.

Secondly, concerning importing the SVG via the IDE, I'm wondering how you imagine this to look right now? As I currently understand it, the only way to serve pre-existing files to Penrose is via Roger. The watch.ts file looks like it broadcasts all the files to the server we're running on localhost, and then on the server side somehow those files get transferred to the IDE. Did you want us to do the same for importing the SVG or should we create a button in the IDE to do it? Another question we had about this is if we're only creating a roger command, it may not be useful when Penrose is actually deployed, where I assume there will be some other way to import files. But if there's also some server side code we have to write to parse the SVG and send the code to the IDE, then that may actually get reused.

There are 3 ways to load trios in the IDE:

• Local hosting via roger
• In-browser storage under the "saved" tab
• gist loading via ?gist=<gist-sha>

The simplest option in my mind is to load the imported SVG into the in-browser storage. On the UI side, I'd consider having a drop zone (e.g. this package) in the "Diagram" tab. Adding a commend in roger seems less useful to me for the same reasons you mentioned. For now, I'd suggest adding the functionalities in editor and abstracting out the SVG loading code as a function, which we can easily re-export later for server-side if we end up wanting them in other places like roger or automator.

Looking forward to working on Penrose!

Looking forward to your contribution. Thanks again for your interest!

[YonahGoldberg]

Are there any issues with putting components inside the flex-layout panel that you know of?

I'm attempting to use the react-dropzone package to import SVGs as you mentioned and I'm running into issues. I've put the dropzone component into a panel as shown in the following screenshot:

However, it's supposed to look like this roughly, although with different text:

I've followed everything on the documentation for react-dropzone, so it's strange to me that it's not styled correctly, so I thought it might be a problem with rendering inside the flex-layout panel. I'll also note that I can still click on the text to upload a file, and I was able to confirm I could upload an SVG, so it's just the style that's messed up.

If you want to take a look at my added code, you can view it here.