feat: add doubly, circular, and circular doubly linked list types (#676)#682
feat: add doubly, circular, and circular doubly linked list types (#676)#682Sriharshitha156 wants to merge 2 commits into
Conversation
|
@Sriharshitha156 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. |
✅ Deploy Preview for astounding-nougat-da0f6a ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Review limit reached
More reviews will be available in 54 minutes and 12 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthrough
ChangesMulti-Type Linked List Visualizer
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Hey, great feature addition! 👋 Here are a few things worth thinking through before merging: 🧠 Algorithm edge case: Using let _nodeId = 0;
const nextId = () => ++_nodeId;🔁 Async search and stale closures The ⚡ Performance: four independent list states Each of the four list components mounts with fresh state when its tab becomes active (because 🧩 Code duplication across the four list types The insert/delete/search/clear logic is nearly identical in all four components — the only meaningful difference is the pointer wiring in the render output. Extracting a 🔍 That's a reasonable and intentional choice, but it's not communicated to the user. A small note in the 🚥 Pre-merge checks | ✅ 6 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (6 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/dataStructures/LinkedListIV.jsx (1)
40-61:⚠️ Potential issue | 🟠 Major | ⚡ Quick winStale closure in
searchNodecan cause visual glitches if list is modified mid-search.The
searchNodefunction capturesnodesfrom the closure when called. If the user clicks "Clear" (or modifies the list) while a search is in progress, the function continues iterating over the stalenodesarray. This can cause:
- Accessing nodes that no longer exist in state
- Highlighting mismatches between the captured array and displayed nodes
The same pattern exists in all four list implementations. Two quick fixes:
- Disable Clear during search (minimal fix):
- <button onClick={onClear} + <button onClick={onClear} disabled={isSearching}
- Or abort search on clear by adding an
AbortControlleror ref-based cancellation flag.Option 1 is simpler and maintains UX consistency (other buttons are already disabled during search).
🤖 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/dataStructures/LinkedListIV.jsx` around lines 40 - 61, The searchNode function captures the nodes array in a closure, so if the list is cleared while a search is in progress, the function continues iterating over stale data and highlighting nodes that no longer exist. Disable the Clear button (which calls the clearList function) when isSearching is true, similar to how other buttons are already disabled during search. This prevents users from modifying the list mid-search and eliminates the stale closure problem without requiring more complex cancellation logic.
🧹 Nitpick comments (1)
src/components/dataStructures/LinkedListIV.jsx (1)
7-112: ⚖️ Poor tradeoffConsider extracting shared list logic into a custom hook.
All four list implementations have nearly identical state and operations (insert, delete, search, clear). This ~200 lines of duplicated logic could be consolidated:
const useLinkedListState = () => { const [nodes, setNodes] = useState([]) const [inputVal, setInputVal] = useState('') const [message, setMessage] = useState('') const [highlighted, setHighlighted] = useState(null) const [isSearching, setIsSearching] = useState(false) const insertAtBeginning = () => { /* ... */ } const insertAtEnd = () => { /* ... */ } const deleteNode = () => { /* ... */ } const searchNode = async () => { /* ... */ } const clearList = () => { /* ... */ } return { nodes, inputVal, setInputVal, message, highlighted, isSearching, insertAtBeginning, insertAtEnd, deleteNode, searchNode, clearList } }Then each list component focuses only on its unique rendering logic. This makes fixing bugs (like the stale closure issue) a one-place change. Not blocking, but worth considering for maintainability.
🤖 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/dataStructures/LinkedListIV.jsx` around lines 7 - 112, Extract the duplicated state management and list operations logic from the SinglyLinkedList component into a custom hook called useLinkedListState. This hook should contain all the useState declarations (nodes, inputVal, message, highlighted, isSearching) and all the operation functions (insertAtBeginning, insertAtEnd, deleteNode, searchNode, clearList), then return an object with all these values and functions. Replace the inline state and function definitions in SinglyLinkedList with a single call to this new hook, destructuring all returned values. Then apply the same refactoring to the other three list implementations to eliminate the ~200 lines of duplicated code across all four components and make future bug fixes a one-place change.
🤖 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/components/dataStructures/LinkedListIV.jsx`:
- Around line 311-313: The apostrophe in "tail's" within the text content of the
p element in LinkedListIV.jsx is causing an ESLint error and needs to be
escaped. Replace the unescaped apostrophe in "tail's" with the HTML entity
' so it reads "tail's" to properly escape the character in JSX.
- Around line 442-444: In the paragraph element describing the circular doubly
linked list structure, the apostrophe in "head's" within the text "head (and
head's prev to tail)" is unescaped and causing an ESLint error. Escape the
apostrophe by replacing "head's" with "head's" to properly handle the
special character in the JSX text content.
---
Outside diff comments:
In `@src/components/dataStructures/LinkedListIV.jsx`:
- Around line 40-61: The searchNode function captures the nodes array in a
closure, so if the list is cleared while a search is in progress, the function
continues iterating over stale data and highlighting nodes that no longer exist.
Disable the Clear button (which calls the clearList function) when isSearching
is true, similar to how other buttons are already disabled during search. This
prevents users from modifying the list mid-search and eliminates the stale
closure problem without requiring more complex cancellation logic.
---
Nitpick comments:
In `@src/components/dataStructures/LinkedListIV.jsx`:
- Around line 7-112: Extract the duplicated state management and list operations
logic from the SinglyLinkedList component into a custom hook called
useLinkedListState. This hook should contain all the useState declarations
(nodes, inputVal, message, highlighted, isSearching) and all the operation
functions (insertAtBeginning, insertAtEnd, deleteNode, searchNode, clearList),
then return an object with all these values and functions. Replace the inline
state and function definitions in SinglyLinkedList with a single call to this
new hook, destructuring all returned values. Then apply the same refactoring to
the other three list implementations to eliminate the ~200 lines of duplicated
code across all four components and make future bug fixes a one-place change.
🪄 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: 792c3e65-cd85-4dce-962e-17eff0ec3f68
📒 Files selected for processing (1)
src/components/dataStructures/LinkedListIV.jsx
| <p className="text-slate-400 text-sm"> | ||
| The <span className="text-green-400">tail's next pointer</span> points back to the <span className="text-green-400">head</span> — forming a circle with no null end. | ||
| </p> |
There was a problem hiding this comment.
Escape the apostrophe to fix ESLint error.
The apostrophe in "tail's" needs escaping in JSX.
Fix
- The <span className="text-green-400">tail's next pointer</span> points back to the <span className="text-green-400">head</span> — forming a circle with no null end.
+ The <span className="text-green-400">tail's next pointer</span> points back to the <span className="text-green-400">head</span> — forming a circle with no null end.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <p className="text-slate-400 text-sm"> | |
| The <span className="text-green-400">tail's next pointer</span> points back to the <span className="text-green-400">head</span> — forming a circle with no null end. | |
| </p> | |
| <p className="text-slate-400 text-sm"> | |
| The <span className="text-green-400">tail's next pointer</span> points back to the <span className="text-green-400">head</span> — forming a circle with no null end. | |
| </p> |
🧰 Tools
🪛 ESLint
[error] 312-312: ' can be escaped with ', ‘, ', ’.
(react/no-unescaped-entities)
🤖 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/dataStructures/LinkedListIV.jsx` around lines 311 - 313, The
apostrophe in "tail's" within the text content of the p element in
LinkedListIV.jsx is causing an ESLint error and needs to be escaped. Replace the
unescaped apostrophe in "tail's" with the HTML entity ' so it reads
"tail's" to properly escape the character in JSX.
Source: Linters/SAST tools
| <p className="text-slate-400 text-sm"> | ||
| Combines doubly and circular — <span className="text-orange-400">prev & next</span> pointers, and tail connects back to head (and head's prev to tail). | ||
| </p> |
There was a problem hiding this comment.
Escape the apostrophe to fix ESLint error.
Same issue as CircularLinkedList - the apostrophe in "head's" needs escaping.
Fix
- Combines doubly and circular — <span className="text-orange-400">prev & next</span> pointers, and tail connects back to head (and head's prev to tail).
+ Combines doubly and circular — <span className="text-orange-400">prev & next</span> pointers, and tail connects back to head (and head's prev to tail).📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <p className="text-slate-400 text-sm"> | |
| Combines doubly and circular — <span className="text-orange-400">prev & next</span> pointers, and tail connects back to head (and head's prev to tail). | |
| </p> | |
| <p className="text-slate-400 text-sm"> | |
| Combines doubly and circular — <span className="text-orange-400">prev & next</span> pointers, and tail connects back to head (and head's prev to tail). | |
| </p> |
🧰 Tools
🪛 ESLint
[error] 443-443: ' can be escaped with ', ‘, ', ’.
(react/no-unescaped-entities)
🤖 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/dataStructures/LinkedListIV.jsx` around lines 442 - 444, In
the paragraph element describing the circular doubly linked list structure, the
apostrophe in "head's" within the text "head (and head's prev to tail)" is
unescaped and causing an ESLint error. Escape the apostrophe by replacing
"head's" with "head's" to properly handle the special character in the JSX
text content.
Source: Linters/SAST tools
1 participant
Pull Request Summary
What changed?
Extended the LinkedList component (
src/components/dataStructures/LinkedListIV.jsx) to support four linked list types via a tab switcher: Singly, Doubly, Circular, and Circular Doubly. Each type includes insert at beginning, insert at end, delete, animated search, and clear operations with distinct color themes matching the existing design system.Why is this needed?
Previously AlgoScope only supported Singly Linked List visualization, limiting the learning experience for users exploring different data structure variations.
Closes #676
Type of Change
feat- New user-facing feature or algorithm capabilityRelease Notes
Release note category:
Release note entry:
Testing and Verification
npm ciornpm installhttp://localhost:5173Skipped or additional testing notes:
Skipped
npm run format:check,npm run lint, andnpm run buildas this is a UI-only component change with no routing, dependency, or build configuration updates.UI Evidence
Before:
After:
CI/CD and Deployment Impact
Deployment notes:
No secrets, environment variables, or migration steps required.
Summary by CodeRabbit