Add outcome visualization and fix interaction bugs #5
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
Adds a compact stacked bar graph above zoom controls showing the probability distribution across outcome categories (good, ambivalent, existential). Users can click the graph to open a detailed modal displaying individual outcome probabilities and a larger visual breakdown. Key features: - Real-time probability calculations by outcome category - Compact bar chart with saturated colors (70% saturation) - Clickable modal with dual-pane layout: visual distribution and detailed list - Custom tooltips and proper formatting (categories: 0 decimals, outcomes: 1 decimal) - Port management documentation updates for multi-worktree development 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Install eslint-config-prettier to fix ESLint configuration - Make pre-commit hook executable (chmod +x) - Apply Prettier formatting to all modified files (quote style, line breaks) - Verify TypeScript type-check passes with no errors - Verify ESLint runs successfully (only pre-existing warnings remain) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
- Explicitly set font-family to Plus Jakarta Sans to ensure consistent rendering - Change percentage text from font-bold to font-normal (weight 400) for lighter appearance - Fix "3" character rendering with proper rounded top instead of flat top - Keep modal header at font-extrabold for proper emphasis 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
When dragging a node and scrolling with the mouse wheel (normal or shift+scroll), the node would stay at its original position instead of following the cursor. This was caused by using delta-based positioning from a fixed reference point that didn't account for scroll offset changes. Solution: Use absolute canvas coordinate conversion (screenToCanvasCoords) on every mouse move, similar to how arrow connector dragging works. This function always reads the current scroll position, so nodes correctly track the cursor even when the viewport moves. Changes: - Added screenToCanvasCoords function to Flowchart component - Pass screenToCanvasCoords to Node components as prop - Updated Node drag logic to store offset from mouse to node center - Use screenToCanvasCoords in handleMouseDown, handleGlobalMouseMove, and handleGlobalMouseUp to calculate positions using current scroll state 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
When hovering the pin button to preview probability root, the node shows 100% probability (3 digits instead of 2), which can widen the probability badge, cause text wrapping, and make the node taller. This pushes the pin button upward, and if the cursor is at the button's bottom edge, it moves away causing hover to end, which reverts the layout, creating an infinite flashing loop. Solution: Add a conditional extended hover zone that activates only during hover. When isPinHovered is true, a 10px transparent padding zone extends below the button, keeping the cursor within the hover area even when the button shifts upward. Changes: - Add isPinHovered state to track pin button hover - Wrap both pin button instances in divs with conditional padding - Move hover handlers to wrapper divs to control extended zone - Update button background to stay orange during hover 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Summary
This PR adds outcome distribution visualization and fixes several critical interaction bugs.
New Features
Bug Fixes
Node Dragging with Scroll: Fixed nodes not following cursor when scrolling during drag
Pin Button Hover Flickering: Fixed infinite flashing loop when hovering "Set as Start" button
Code Quality
Test Plan
🤖 Generated with Claude Code