feat: add interactive DAG WebView panel (GSoC 2026 Goal #1)#24
Open
rupeshca007 wants to merge 1 commit intoouterbounds:mainfrom
Open
feat: add interactive DAG WebView panel (GSoC 2026 Goal #1)#24rupeshca007 wants to merge 1 commit intoouterbounds:mainfrom
rupeshca007 wants to merge 1 commit intoouterbounds:mainfrom
Conversation
Adds a full Visual DAG Viewer to the Metaflow VS Code extension, directly addressing Goal outerbounds#1 of the GSoC 2026 VS Code Extension project. Changes: - dag_parser.py: zero-dependency Python AST parser that finds all FlowSpec subclasses, extracts @step methods and self.next() edges, outputs BFS-ordered JSON topology. Uses the ast module only - no runtime execution of user code. - extension.js: new showDagView command that spawns dag_parser.py as a child process, creates a WebviewPanel beside the editor, sends DAG JSON via postMessage, registers a file-save watcher for live refresh, and handles node-click messages to navigate the editor cursor to the clicked step def. - package.json: registers 'Metaflow: Show DAG' command with Ctrl+Alt+D keybinding active on Python files; bumps version to 0.1.0. - media/dag_webview.html: self-contained D3.js (v7) DAG visualization with BFS-level layout, bezier curved edges, color-coded nodes (green=start/end, orange=join, blue=step), and click-to-navigate postMessage back to extension. Tested with linear and branching flows in the Extension Development Host.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a Visual DAG Viewer to the Metaflow VS Code extension, directly addressing Goal #1 of the GSoC 2026 VS Code Extension project.
The existing extension has only 2 keyboard shortcuts with no visual tooling. This PR adds an interactive, live-updating DAG graph rendered in a VS Code WebView panel.
Changes
dag_parser.py (new)
extension.js (modified)
media/dag_webview.html (new)
package.json (modified)
How to Test
Clone this branch and open in VS Code
Press F5 to launch the Extension Development Host
Open any Metaflow flow .py file
Press Ctrl+Alt+D or run "Metaflow: Show DAG" from the Command Palette
The DAG panel opens beside the editor
Edit and save the file -> DAG auto-refreshes
Click any node -> editor jumps to that step
Tested With
Linear flows (start -> process -> end)
Branching flows with fan-out and fan-in (start -> branch_a, branch_b -> join -> end)
GSoC 2026 Context
This PR demonstrates capability for the Metaflow VS Code Extension GSoC project. The DAG viewer is Goal #1 and the foundation for the artifact browser (Goal #2) and run configuration UI (Goal #4).
GSoC 2026 AI Policy Disclosure: I want to transparently note that I used AI tools to assist in generating parts of this prototype implementation and boilerplate. However, I have manually reviewed, tested, and fully understand every line of code submitted, and I am prepared to explain and iterate on it during the review process.