feat: redesign UI layout with pulse dots and events panel #337
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 10, 2025
Closed
Contributor
Author
|
View your CI Pipeline Execution ↗ for commit 994a9d9
☁️ Nx Cloud last updated this comment at |
jumski
force-pushed
the
11-10-feat_demo_-_fix_the_wider_view
branch
from
e5ff095 to
9e468af
Compare
jumski
force-pushed
the
11-10-feat_demo_-_fix_the_wider_view
branch
from
9e468af to
ad4358e
Compare
This was referenced Nov 10, 2025
jumski
force-pushed
the
feat-demo-synth-events
branch
from
7d9e3a0 to
84196b4
Compare
jumski
force-pushed
the
11-10-feat_demo_-_fix_the_wider_view
branch
from
ad4358e to
3f4a7dc
Compare
jumski
force-pushed
the
11-10-feat_demo_-_fix_the_wider_view
branch
from
3f4a7dc to
c7577a4
Compare
jumski
force-pushed
the
feat-demo-synth-events
branch
from
84196b4 to
7d29fe5
Compare
jumski
force-pushed
the
11-10-feat_demo_-_fix_the_wider_view
branch
from
c7577a4 to
994a9d9
Compare
jumski
force-pushed
the
feat-demo-synth-events
branch
from
7d29fe5 to
96d0289
Compare
Contributor
🔍 Preview Deployment: Website✅ Deployment successful! 🔗 Preview URL: https://pr-337.pgflow.pages.dev 📝 Details:
_Last updated: _ |
Contributor
🔍 Preview Deployment: Demo✅ Deployment successful! 🔗 Preview URL: https://pr-337-pgflow-demo.jumski.workers.dev 📝 Details:
_Last updated: _ |
This was referenced Nov 11, 2025
Closed
Contributor
Merge activity
|
graphite-app bot
pushed a commit
that referenced
this pull request
Nov 11, 2025
# Improved UI Layout and Event Stream Visualization This PR enhances the demo application's UI with a more efficient layout and improved event visualization: - Redesigned the main layout to use a two-column approach with better space utilization - Added pulse dots to code blocks for better visual indication of active steps - Created a dedicated `EventsPanel` component to replace the previous debug panel - Improved event display with collapsible JSON details and syntax highlighting - Fixed positioning of status indicators in the code panel using pixel-based calculations - Simplified the explanation panel to use a single-column stacked layout - Added proper cleanup of event handlers to prevent memory leaks - Enhanced mobile responsiveness with more precise media queries - Improved visual feedback with status borders for tablet view The new layout provides a cleaner experience with the code and explanation on the left, while the DAG visualization and event stream are stacked on the right, making better use of available screen space.
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.
Improved UI Layout and Event Stream Visualization
This PR enhances the demo application's UI with a more efficient layout and improved event visualization:
EventsPanelcomponent to replace the previous debug panelThe new layout provides a cleaner experience with the code and explanation on the left, while the DAG visualization and event stream are stacked on the right, making better use of available screen space.