Skip to content
New issue

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

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

Already on GitHub? # to your account

Use embed mode #61

Open
jasongrout opened this issue May 13, 2020 · 2 comments
Open

Use embed mode #61

jasongrout opened this issue May 13, 2020 · 2 comments

Comments

@jasongrout
Copy link
Contributor

I think we don't use the standardized messaging protocol this library provides for embedding in other applications, to make the save menus seamless, etc. It would be great to look into using the embed mode: https://desk.draw.io/support/solutions/articles/16000042544-embed-mode

@bollwyvl
Copy link
Contributor

There's a lot to like about pushing the whole "app" over into an iframe. We'd the benefit of the engineering they put in to make a robust integration layer. And if this package grew a mimerenderer, it would be a much cleaner way to not have things fight with each other.

However, and not to derail the conversation too much: I think there's a lot more to investigate in mxgraph integration. For example, the ports example shows HTML embedded directly inside a block. I haven't tried it, but if the contract is "give me a dom node", I could imagine dragging a codemirror from a notebook into an mxgraph shape with control flow ports and suddenly having an extremely interesting UI. It can also do collapsing, and level-of-detail, which seem very interesting.

The other thing it could probably handle would be a document layout tool for posters and (since newer versions support/expose multiple pages) presentations: again, assuming it can put "hot" lumino widgets into its tree, this would allow a level of control not currently available in any notebook UI I've seen, without relying on (but also not excluding) css.

Anyhow, these should likely be investigated in another extension altogether!

@bollwyvl
Copy link
Contributor

Sooo.... I took a stroll down this path...

https://github.com/bollwyvl/jupyterlab-drawio/tree/add-drawio-embed-mode

Binder

...but it's basically unreviewable, and very possibly unmergeable. In a nutshell:

  • uses the embed JSON protocol
  • lives in an iframe
  • includes all of the stencils
    • these could be broken up into subpackages, I guess
  • doesn't talk to github
  • mxgraph is dead, long live drawio
    • uses the "full fat" jgraph/drawio client, not the example from jgraph/mxgraph
    • it gets submoduled instead of built/bundled
      • 2600 of the 3000+ files get copied into lab/static/node_modules/jupyterlab-drawio
  • imports existing mxgraph files (a la whatever folk would already have around)
  • exports png/svg
    • ... optionally with embedded, editable metadata
    • ... which can be edited directly (needed a whole separate factory/tracker, though, which needs fixing)
      • this might be a parlor trick, as the export might be way slower than we want
    • did work with their HTML export format
      • but that's definitely a parlor trick
  • uses yarn/jlpm, because npm's caching behavior was driving me crazy
  • adds settings schema for both the URL params and the JSON protocol
    • some things, like using embed mode, can't be overridden
    • the dark ui theme is interesting... but the min i've defaulted to looks fine, requires less work to look more seamless

Happy to discuss what of this could make it upstream! Of course, I still want to actually play with reversing the embedding pattern, and being able to put jupyter cells inside mxgraph geometry, but frankly my need is greater for this piece.

Screenshot from 2020-05-27 22-01-32

Some other really neat things thought about while doing this hack:

  • Jupyter stack icon stencils
    • good luck to somebody drawing Z2JH to mimerenderers, and everything in-between
  • JupyterLab UI stencils
  • drawiodget 🤤
  • reverse embedding (cells in diagrams) a la this JEP

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants