Show removed node in devtools #835
Conversation
WalkthroughThe updates primarily center around enhancing the user interface and functionality of the devtools application. These include conditional styling for tree nodes to reflect their removal status, displaying node sizes, and improved visibility settings for removed nodes. Additionally, other UI elements such as history buttons now display the current index and total events, and there are minor style adjustments to various components. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant DevTools
participant Detail as Detail.tsx
participant Document as Document.tsx
participant History as History.tsx
User ->> DevTools: Toggle 'hideRemovedNode'
DevTools ->> Document: Update `hideRemovedNode` state
Document ->> Detail: Render TreeNode
Detail ->> User: Node with/without 'removed' class
User ->>DevTools: Change Event in History
DevTools ->> History: Update Current Event Index
History ->> User: Display Updated Index
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #835 +/- ##
=======================================
Coverage 80.68% 80.68%
=======================================
Files 59 59
Lines 4586 4586
Branches 932 932
=======================================
Hits 3700 3700
Misses 617 617
Partials 269 269 ☔ View full report in Codecov by Sentry. |
…nto devtools-removed-node
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range and nitpick comments (2)
tools/devtools/src/devtools/components/Detail.tsx (1)
Line range hint
130-138: Specify the button type to prevent unintended form submissions.+ type="button"Also applies to: 141-149
tools/devtools/src/devtools/tabs/History.tsx (1)
Line range hint
126-131: Specify the button type to prevent unintended form submissions.+ type="button"Also applies to: 141-149, 151-160, 162-171, 174-181
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
tools/devtools/package-lock.jsonis excluded by!**/package-lock.json
Files selected for processing (5)
- tools/devtools/package.json (2 hunks)
- tools/devtools/src/devtools/components/Detail.tsx (2 hunks)
- tools/devtools/src/devtools/panel/styles.css (5 hunks)
- tools/devtools/src/devtools/tabs/Document.tsx (3 hunks)
- tools/devtools/src/devtools/tabs/History.tsx (1 hunks)
Files not summarized due to errors (1)
- tools/devtools/package.json: Error: Server error. Please try again later.
Additional context used
Biome
tools/devtools/src/devtools/tabs/Document.tsx
[error] 77-82: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 88-93: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resettools/devtools/src/devtools/components/Detail.tsx
[error] 130-138: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 141-149: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or resettools/devtools/src/devtools/tabs/History.tsx
[error] 126-131: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 141-149: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 151-160: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 162-171: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
[error] 174-181: Provide an explicit type prop for the button element. (lint/a11y/useButtonType)
The default type of a button is submit, which causes the submission of a form when placed inside a
formelement. This is likely not the behaviour that you want inside a React application.
Allowed button types are: submit, button or reset
Additional comments not posted (9)
tools/devtools/package.json (1)
23-23: Updatedyorkie-js-sdkdependency to version0.4.23to ensure compatibility.tools/devtools/src/devtools/tabs/Document.tsx (2)
18-18: Importedclassnamesfor dynamic class assignment.
30-30: Introduced state variablehideRemovedNodeto manage the visibility of removed nodes.tools/devtools/src/devtools/components/Detail.tsx (1)
83-85: Added display of node size in the TreeNode component.tools/devtools/src/devtools/tabs/History.tsx (1)
138-140: Displayed the current event index in the history view.tools/devtools/src/devtools/panel/styles.css (4)
107-110: The changes to the.devtools-history-buttons .history-indeximprove readability and spacing. Good job!
279-279: Adjusting the height and adding a border-top to.selected-contentenhances the layout's clarity and separation. Well done!
314-327: The styling updates for.toggle-removed-node-btnenhance its visual appeal and interactivity. These changes are well-executed.
394-397: The new styles for hiding removed nodes and highlighting them when visible are crucial for the toggle feature's functionality. The use of a distinct red background for removed nodes is a good choice for visual distinction.Also applies to: 435-437
What this PR does / why we need it?
Enhance Tree Data Type in DevTools
Show removed nodebutton to toggle the visibility of deleted nodes.sizeinformation in the node detail when hovering over a node in the Tree data type.devtools-removed-node.mov
Any background context you want to provide?
What are the relevant tickets?
Fixes #
Checklist
Summary by CodeRabbit
New Features
Style