feat: implement DAG visualization and debug panel with flowState props #311
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-2-article-flow
branch
from
a6b533c to
8acb90c
Compare
jumski
force-pushed
the
feat-demo-3-dag-debug
branch
2 times, most recently
from
3f40fb5 to
bf3ad7f
Compare
jumski
force-pushed
the
feat-demo-2-article-flow
branch
from
8acb90c to
65e42c7
Compare
This was referenced Nov 6, 2025
Closed
jumski
force-pushed
the
feat-demo-2-article-flow
branch
from
65e42c7 to
4aa3dfb
Compare
jumski
force-pushed
the
feat-demo-3-dag-debug
branch
from
bf3ad7f to
26ba852
Compare
jumski
force-pushed
the
feat-demo-3-dag-debug
branch
from
26ba852 to
e9332db
Compare
This was referenced Nov 10, 2025
jumski
force-pushed
the
feat-demo-2-article-flow
branch
from
1e2b5bb to
a4b4af9
Compare
jumski
force-pushed
the
feat-demo-3-dag-debug
branch
2 times, most recently
from
1a0aab0 to
946dd0f
Compare
jumski
force-pushed
the
feat-demo-2-article-flow
branch
from
a4b4af9 to
0fdf559
Compare
…tion - Added detailed documentation and philosophy on state management using createFlowState() - Updated DAGVisualization component to receive flowState via props for dynamic styling - Created DebugPanel component to display step statuses, outputs, errors, and event stream - Modified page layout to include both DAG visualization and debug panel with shared flowState - Improved event handling and reactivity by leveraging createFlowState's automatic subscriptions - Updated troubleshooting tips for rendering, reactivity, and animation issues - Overall improvements facilitate observability, debugging, and real-time monitoring of data flow
jumski
force-pushed
the
feat-demo-2-article-flow
branch
from
0fdf559 to
baea171
Compare
jumski
force-pushed
the
feat-demo-3-dag-debug
branch
from
946dd0f to
67ad902
Compare
|
View your CI Pipeline Execution ↗ for commit 67ad902
☁️ Nx Cloud last updated this comment at |
This was referenced Nov 11, 2025
Closed
Contributor
Merge activity
|
graphite-app bot
pushed a commit
that referenced
this pull request
Nov 11, 2025
#311) # DAG Visualization and Debug Panel for pgflow Demo This PR adds a visual DAG (Directed Acyclic Graph) representation and a comprehensive debug panel to the pgflow demo application. The implementation provides real-time visualization of workflow execution and detailed debugging information. Key features: - **DAG Visualization Component**: Displays a 4-node graph showing the article processing workflow with dynamic styling based on execution state (pending, running, completed, failed) - **Debug Panel Component**: Shows run information, step states, and a real-time event stream - **Improved State Management**: Utilizes the existing `createFlowState()` pattern for reactive state management - **UI Framework**: Implements shadcn/svelte components with a dark theme for a polished interface - **Two-Column Layout**: Organizes the UI with DAG visualization on the left and debug panel on the right Technical improvements: - Added watchdog SQL migration to ensure the article flow worker stays running - Fixed broadcast order and timestamp handling in pgflow SQL functions - Updated Tailwind to v4 with proper configuration for the new styling system - Added animation support for visual feedback during workflow execution This enhancement provides a much clearer visualization of the workflow execution process, making it easier to understand and debug pgflow applications.
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.
DAG Visualization and Debug Panel for pgflow Demo
This PR adds a visual DAG (Directed Acyclic Graph) representation and a comprehensive debug panel to the pgflow demo application. The implementation provides real-time visualization of workflow execution and detailed debugging information.
Key features:
createFlowState()pattern for reactive state managementTechnical improvements:
This enhancement provides a much clearer visualization of the workflow execution process, making it easier to understand and debug pgflow applications.