Embed the new OWS Editor into the website- #11

[kumaradityaraj]

closes #5

Overview

This PR adds support for embedding the Workflow Editor directly into a webpage, allowing the editor to be integrated and rendered as part of an existing web application.

• Integrated the editor into a webpage/container without requiring the standalone editor application.
• Editor follows the dark and light mode.
• Async API and Script workflow modified to resolve errors.
• Added a new section Try It Yourself to add editor npm package and merged git repo of examples and use cases for good UI.

Screenshots

[netlify]

✅ Deploy Preview for openworkflow ready!

Name	Link
🔨 Latest commit	fed761e
🔍 Latest deploy log	https://app.netlify.com/projects/openworkflow/deploys/6a95529ce6d4950008bb7b64
😎 Deploy Preview	https://deploy-preview-16--openworkflow.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[JBBianchi]

Thanks a lot for the PR! Good work, I really like the idea of bringing the diagram editor directly into the examples section.

I played a bit with the implementation and I think there are just a few things I would improve around how the editor is integrated:

• Use a single editor instance for all examples. Right now each tab creates its own editor, while only one can ever be visible. We can keep the code examples as they are and have one shared diagram that follows the selected tab.
• Load the editor only when needed. The examples section is quite far down the page and the editor is relatively heavy, so I don't think we need to hydrate it as soon as the page loads.
• Keep the tabs as the source of truth. The existing HTML/CSS tabs already know which example is selected. The editor can simply follow that selection instead of adding another state/lifecycle around it.
• Avoid the setTimeout / fitView workaround. I think this is mostly a consequence of mounting the editors while their tabs are hidden. With one visible editor, it should be able to resize/refit normally when its content changes.
• Avoid remounting the editor when the theme changes. The editor already reacts to the colorMode prop, so changing the theme shouldn't require recreating the whole editor and resetting its viewport.
• As a smaller related improvement, I would also resolve the initial theme before the page is painted, so we don't briefly render the light theme for users using dark mode.

With the help of AI, I made a small conceptual implementation in my fork to illustrate what I mean: neuroglia-io/open-workflow-specification.github.io@f2b8410.

It's not necessarily meant to be copied as-is, but hopefully it makes the overall direction clearer. 🙂

[JBBianchi]

Besides the nitpick about how theme changes are observed, the rest looks good to me.

I did notice one small behavior that feels a bit inconsistent, although I think this is more on the editor side. If you switch tabs after moving around or zooming in/out, especially when coming from a very different graph like "Try-Catch", the new graph isn't always centered and zoomed to fit. What's a bit strange is that it seems to adjust automatically most of the time, just not consistently. @lornakelly, is this a known behavior?

[lornakelly]

neuroglia-io/open-workflow-specification.github.io@f2b8410

Its not known behaviour so we will look into whats causing it, thanks

[lornakelly]

@kumaradityaraj Thanks for the PR, looks nice. The editor was never designed for mobile so I would add a media query to only display the editor for an appropriate min width, at the moment the UX is not good when viewing site on mobile

[JBBianchi]

Thanks a lot for your dedication @kumaradityaraj

The PR is in a mergeable state.

I did add micro nitpick comments if you still feel like polishing it.

[JBBianchi]

Great work, thanks a lot @kumaradityaraj ! 🚀

[lornakelly]

Thanks @kumaradityaraj LGTM

[ricardozanini]

Based on the preview, looks really great and I trust @JBBianchi and @lornakelly as tech reviewers.

The only thing I'm missing, is the ability to "full screen" this panel. But we can open a new PR to improve this later.