feat: add code panel and step selection with explanation UI #312
Conversation
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
|
This was referenced Nov 4, 2025
Contributor
Author
jumski
force-pushed
the
feat-demo-4-code-explanation
branch
from
283eb6e to
c1e9b36
Compare
jumski
force-pushed
the
feat-demo-3-dag-debug
branch
from
51cb603 to
3f40fb5
Compare
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
jumski
force-pushed
the
feat-demo-4-code-explanation
branch
3 times, most recently
from
d7fb170 to
1f7f9c7
Compare
jumski
force-pushed
the
feat-demo-4-code-explanation
branch
from
1f7f9c7 to
c9db847
Compare
jumski
force-pushed
the
feat-demo-4-code-explanation
branch
from
c9db847 to
a026d83
Compare
jumski
force-pushed
the
feat-demo-4-code-explanation
branch
from
a026d83 to
9d2bf71
Compare
jumski
force-pushed
the
feat-demo-3-dag-debug
branch
from
3f40fb5 to
bf3ad7f
Compare
jumski
force-pushed
the
feat-demo-4-code-explanation
branch
from
9d2bf71 to
68c28db
Compare
This was referenced Nov 6, 2025
jumski
force-pushed
the
feat-demo-3-dag-debug
branch
from
bf3ad7f to
26ba852
Compare
jumski
force-pushed
the
feat-demo-4-code-explanation
branch
from
68c28db to
66e1b1c
Compare
jumski
force-pushed
the
feat-demo-3-dag-debug
branch
from
26ba852 to
e9332db
Compare
jumski
force-pushed
the
feat-demo-4-code-explanation
branch
from
66e1b1c to
5b48d9c
Compare
This was referenced Nov 10, 2025
jumski
force-pushed
the
feat-demo-4-code-explanation
branch
from
5b48d9c to
045ac50
Compare
jumski
force-pushed
the
feat-demo-3-dag-debug
branch
from
e9332db to
1a0aab0
Compare
jumski
force-pushed
the
feat-demo-4-code-explanation
branch
from
045ac50 to
c852760
Compare
jumski
force-pushed
the
feat-demo-3-dag-debug
branch
from
1a0aab0 to
946dd0f
Compare
Implement code visualization with syntax highlighting and interactive step exploration. New Components: - CodePanel: Shiki-highlighted flow code with clickable lines - ExplanationPanel: Shows step dependencies, inputs, and returns on click - flow-code.ts: Simplified educational code snippet with line-to-step mapping Enhanced Components: - DAGVisualization: Added click handling and selection states - DebugPanel: Auto-scroll to selected step with smooth animations - Page layout: 55/45 split, all panels synchronized via step-selected events Interactions: - Click code line or DAG node → shows explanation + scrolls debug panel - Visual states: active (executing) vs selected (clicked) - ESC or outside click dismisses explanation panel 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
jumski
force-pushed
the
feat-demo-4-code-explanation
branch
from
c852760 to
cec2133
Compare
jumski
force-pushed
the
feat-demo-3-dag-debug
branch
from
946dd0f to
67ad902
Compare
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected -t lint typecheck test --parallel -... |
❌ Failed | 14s | View ↗ |
☁️ Nx Cloud last updated this comment at 2025-11-11 14:46:57 UTC
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Add Code Panel and Step Explanation Features
This PR adds a new interactive code panel and step explanation features to the pgflow demo, enhancing the educational value of the application.
Key additions:
CodePanelcomponent that displays syntax-highlighted flow code with interactive line selectionExplanationPanelcomponent that shows detailed information about selected stepsflow-code.tsfile with educational code examples and line-to-step mappingThe UI now features a 55/45 split layout with code and explanation on the left, and DAG visualization and debug panel on the right. When a user selects a step (by clicking on code, DAG node, or debug panel), the step is highlighted across all components and detailed information appears in the explanation panel.