fix: persist visualization state across module navigation (#653)#683
Open
BekkamMallishwari wants to merge 1 commit into
Open
Conversation
✅ Deploy Preview for astounding-nougat-da0f6a ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Someone is attempting to deploy a commit to the adityapaul2603-gmailcom's projects Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
📝 WalkthroughWalkthroughA new React context system ( ChangesShared Visualization State Persistence
Sequence Diagram(s)sequenceDiagram
rect rgba(100, 180, 255, 0.5)
Note over User,Store: First visit to Sorting Visualizer
User->>SortingVisualizer: open /sorting?algo=bubble
SortingVisualizer->>useVisualizationState: getState("sorting:solo:algorithm", "bubble")
useVisualizationState->>Store: Map.get → null, init "bubble"
Store-->>SortingVisualizer: "bubble"
User->>SortingVisualizer: play animation
SortingVisualizer->>useStepPlayback: { speed, initialState, onStateChange }
useStepPlayback-->>Store: onStateChange({ steps, currentStepIndex, isPlaying })
end
rect rgba(100, 220, 140, 0.5)
Note over User,Store: Navigate away and return
User->>Router: navigate to /graph-search
User->>Router: navigate back to /sorting
SortingVisualizer->>useVisualizationState: getState("sorting:solo:algorithm")
useVisualizationState->>Store: Map.get → "bubble" (persisted)
Store-->>SortingVisualizer: "bubble" + prior playback state
SortingVisualizer->>useStepPlayback: initialState = persisted playbackState
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 5 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/visualizer/useStepPlayback.js (1)
38-40: 🏗️ Heavy liftAvoid per-tick persistence writes to reduce render churn.
This effect runs every step transition and pushes state outward each time. With
onStateChangewired to React state, that can add extra renders during animations.As per coding guidelines, "Focus on React best practices, avoiding unnecessary re-renders, and efficient state management."
One practical direction
- useEffect(() => { - onStateChange?.({ steps, currentStepIndex, isPlaying }) - }, [currentStepIndex, isPlaying, onStateChange, steps]) + const lastEmittedRef = useRef(null) + useEffect(() => { + if (!onStateChange) return + const next = { steps, currentStepIndex, isPlaying } + const prev = lastEmittedRef.current + if ( + prev && + prev.steps === next.steps && + prev.currentStepIndex === next.currentStepIndex && + prev.isPlaying === next.isPlaying + ) { + return + } + lastEmittedRef.current = next + onStateChange(next) + }, [steps, currentStepIndex, isPlaying, onStateChange])🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/visualizer/useStepPlayback.js` around lines 38 - 40, The useEffect hook in the useStepPlayback component is calling onStateChange on every change to currentStepIndex or isPlaying, which triggers parent component re-renders during each animation tick. To fix this, memoize the onStateChange callback using useCallback in the parent component (where onStateChange is defined) to prevent unnecessary re-renders, and consider debouncing or throttling the onStateChange calls in the useEffect to batch updates together instead of firing on every single tick transition. This will decouple the step transitions from immediate state propagation and reduce render churn during animations.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/context/useVisualizationState.js`:
- Around line 13-27: The `useState` initialization in the hook only reads from
`context.getState(key, initialValue)` once during mount, so if the `key` prop
changes, the state will continue reading from the old key while
`setPersistentState` writes to the new key, causing a mismatch. Add a
`useEffect` hook with `key` in the dependency array that calls `setLocalState`
with `context.getState(key, initialValue)` whenever `key` changes, ensuring
reads and writes are always synchronized to the current key.
---
Nitpick comments:
In `@src/components/visualizer/useStepPlayback.js`:
- Around line 38-40: The useEffect hook in the useStepPlayback component is
calling onStateChange on every change to currentStepIndex or isPlaying, which
triggers parent component re-renders during each animation tick. To fix this,
memoize the onStateChange callback using useCallback in the parent component
(where onStateChange is defined) to prevent unnecessary re-renders, and consider
debouncing or throttling the onStateChange calls in the useEffect to batch
updates together instead of firing on every single tick transition. This will
decouple the step transitions from immediate state propagation and reduce render
churn during animations.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro Plus
Run ID: be869d5f-ba2d-430c-8587-eab7737a9a35
📒 Files selected for processing (11)
src/components/arraySearch/Visualizer.jsxsrc/components/greedyAlgo/VisualizerPage.jsxsrc/components/kadaneAlgo/VisualizerPage.jsxsrc/components/mooreVotingAlgo/VisualizerPage.jsxsrc/components/searchAlgo/VisualizerPage.jsxsrc/components/sortingAlgo/Visualizer.jsxsrc/components/visualizer/useStepPlayback.jssrc/context/useVisualizationState.jssrc/context/visualizationState.jsxsrc/context/visualizationStateContext.jssrc/main.jsx
Author
|
Hi @algoscope-hq team, I have fixed Issue #653 and submitted this PR for review. The visualization state now persists across module navigation, preventing users from losing their progress. Thank you! |
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
2 participants
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.
Related Issue
Closes #653
Summary
Fixed an issue where visualization progress was lost when users navigated between algorithm modules.
Changes Made
Testing
Summary by CodeRabbit
New Features
Refactor