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

Bundle Mermaid.js instead of using CDN for DAG Preview #64

Merged
merged 22 commits into from
Dec 13, 2024

Conversation

joaquimgamero
Copy link
Collaborator

@joaquimgamero joaquimgamero commented Dec 12, 2024

Description

Closes #56

The VS Code extension currently loads mermaid.js from a CDN URL, which requires an internet connection to render DAG previews. This makes the feature unusable when working offline.

  • Added mermaid.js to package.json dependencies
  • Added CopyWebpackPlugin configuration to webpack.config.js
  • Modified DAG preview webview to use local mermaid.js file
  • Updated webview security settings to allow access to extension media files

Note on dependencies

This PR adds two deps: mermaid itself (for obvious reasons) and CopyWebpackPlugin.

CopyWebpackPlugin (an official webpack plugin) was necessary because webpack's standard bundling process is focused on JavaScript modules and wouldn't handle the mermaid UMD file correctly. The plugin allows us to explicitly copy the pre-built mermaid.js file to our extension's output directory, preserving it in its original form which is required for the webview to load it properly. Without this plugin, the file wouldn't be available in the extension's distributed build.

Testing

  1. Build the extension locally
  2. Open a Nextflow file with a DAG
  3. Preview the DAG while offline - it should render correctly

@joaquimgamero joaquimgamero self-assigned this Dec 12, 2024
@joaquimgamero joaquimgamero marked this pull request as draft December 12, 2024 16:09
@joaquimgamero joaquimgamero requested a review from ewels December 13, 2024 15:19
@joaquimgamero
Copy link
Collaborator Author

@bentsherman finally got this to work. Sorry for the noise on the webview HTML generation code, it was giving some rendering problems and had to re-organize it a little bit. I also tagged @ewels since he created that bit in the first place.

@joaquimgamero joaquimgamero marked this pull request as ready for review December 13, 2024 15:20
@joaquimgamero joaquimgamero changed the title Offline Mermaid.js Support for DAG Preview Bundle Mermaid.js instead of using CDN for DAG Preview Dec 13, 2024
Signed-off-by: Ben Sherman <[email protected]>
@bentsherman bentsherman merged commit b594a12 into master Dec 13, 2024
@bentsherman bentsherman deleted the bundling-mermaidjs branch December 13, 2024 19:33
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.

Support DAG previews offline
2 participants