Show removed node in devtools (#835)

This commit enhances Tree in DevTools with three main improvements. Firstly, it introduces the ability to view removed nodes by `Show removed nodes` button. Secondly, it adds a display of the current revision number within the history tab, providing users with a clear indication of the revision they are currently viewing. Lastly, it displays node size in the node detail panel. This additional size provides users with a more understanding of the node's characteristics.
yorkie-team · Jun 14, 2024 · 157a7a6 · 157a7a6
1 parent 9a6f1cf
commit 157a7a6
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 44 deletions.
diff --git a/tools/devtools/package-lock.json b/tools/devtools/package-lock.json
diff --git a/tools/devtools/package.json b/tools/devtools/package.json
@@ -1,7 +1,7 @@
 {
   "name": "yorkie-devtools",
   "displayName": "Yorkie Devtools",
-  "version": "0.4.18",
+  "version": "0.4.23",
   "description": "A browser extension that helps you debug Yorkie.",
   "homepage": "https://yorkie.dev/",
   "scripts": {
@@ -20,7 +20,7 @@
     "react-dom": "18.2.0",
     "react-resizable-layout": "^0.7.2",
     "use-resize-observer": "^9.1.0",
-    "yorkie-js-sdk": "^0.4.18-rc"
+    "yorkie-js-sdk": "^0.4.23"
   },
   "devDependencies": {
     "@types/chrome": "0.0.251",

diff --git a/tools/devtools/src/devtools/components/Detail.tsx b/tools/devtools/src/devtools/components/Detail.tsx
@@ -51,7 +51,11 @@ function TreeNode({ node }: { node: FlatTreeNodeInfo }) {
 
   return (
     <div
-      className={classNames('tree-node', node.type === 'text' && 'text')}
+      className={classNames(
+        'tree-node',
+        node.type === 'text' && 'text',
+        node.isRemoved && 'removed',
+      )}
       style={{ '--depth': depth } as any}
     >
       <span className="node-item">
@@ -75,6 +79,10 @@ function TreeNode({ node }: { node: FlatTreeNodeInfo }) {
             ${nodeIDToString(node.pos.leftSiblingID)}]`}
           </span>
         </div>
+        <div>
+          <span className="title">size: </span>
+          <span className="desc">{node.size}</span>
+        </div>
         {node.type !== 'text' && (
           <div>
             <span className="title">attrs: </span>

diff --git a/tools/devtools/src/devtools/panel/styles.css b/tools/devtools/src/devtools/panel/styles.css
@@ -104,6 +104,12 @@
   background: var(--gray-200);
 }
 
+.devtools-history-buttons .history-index {
+  margin-right: 8px;
+  font-size: 10px;
+  color: var(--gray-600);
+}
+
 .devtools-history-buttons button {
   background-color: var(--gray-400);
   color: #fff;
@@ -270,7 +276,7 @@
 }
 
 .selected-content {
-  height: 66%;
+  height: 86%;
   border-top: 1px solid var(--gray-300);
   display: flex;
   flex-direction: column;
@@ -305,6 +311,21 @@
   color: var(--gray-500);
 }
 
+.toggle-removed-node-btn {
+  border: 1px solid var(--gray-300);
+  border-radius: 4px;
+  color: var(--gray-500);
+  cursor: pointer;
+  font-size: 10px;
+  padding: 2px 4px;
+  vertical-align: top;
+  margin: 0 6px;
+}
+
+.toggle-removed-node-btn:hover {
+  color: var(--gray-600);
+}
+
 .selected-view-tabmenu {
   position: absolute;
   right: 0;
@@ -370,6 +391,10 @@
   display: inline-block;
 }
 
+.selected-content.hide-removed-node .tree-node.removed {
+  display: none;
+}
+
 .tree-node .node-item {
   display: inline-flex;
   flex-direction: column;
@@ -407,6 +432,10 @@
   background: var(--gray-100);
 }
 
+.tree-node.removed .node-item {
+  background: var(--red-light) !important;
+}
+
 .tree-node span {
   padding: 2px;
 }

diff --git a/tools/devtools/src/devtools/tabs/Document.tsx b/tools/devtools/src/devtools/tabs/Document.tsx
@@ -15,6 +15,7 @@
  */
 
 import { useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { Primitive } from 'yorkie-js-sdk';
 import { RootTree } from '../components/Tree';
 import { JSONDetail, TreeDetail } from '../components/Detail';
@@ -26,6 +27,7 @@ export function Document({ style }) {
   const currentDocKey = useCurrentDocKey();
   const [doc] = useYorkieDoc();
   const [selectedNode, setSelectedNode] = useSelectedNode();
+  const [hideRemovedNode, setHideRemovedNode] = useState(true);
   const [root, setRoot] = useState(null);
   const [nodeDetail, setNodeDetail] = useState(null);
 
@@ -62,17 +64,36 @@ export function Document({ style }) {
       <div className="content">
         <RootTree root={root} />
         {selectedNode && (
-          <div className="selected-content">
+          <div
+            className={classNames(
+              'selected-content',
+              hideRemovedNode && 'hide-removed-node',
+            )}
+          >
             <div className="selected-title">
               {selectedNode.id}
-              <button
-                className="selected-close-btn"
-                onClick={() => {
-                  setSelectedNode(null);
-                }}
-              >
-                <CloseIcon />
-              </button>
+              <div>
+                {selectedNode.type === 'YORKIE_TREE' && (
+                  <button
+                    className="toggle-removed-node-btn"
+                    onClick={() => {
+                      setHideRemovedNode((v) => !v);
+                    }}
+                  >
+                    {hideRemovedNode
+                      ? 'Show removed node'
+                      : 'Hide removed node'}
+                  </button>
+                )}
+                <button
+                  className="selected-close-btn"
+                  onClick={() => {
+                    setSelectedNode(null);
+                  }}
+                >
+                  <CloseIcon />
+                </button>
+              </div>
             </div>
             <div className="selected-view">
               {selectedNode.type === 'YORKIE_TREE' ? (

diff --git a/tools/devtools/src/devtools/tabs/History.tsx b/tools/devtools/src/devtools/tabs/History.tsx
@@ -135,6 +135,9 @@ export function History({
           {openHistory && (
             <span>
               <span className="devtools-history-buttons">
+                <span className="history-index">
+                  {selectedEventIndexInfo.index + 1} / {events.length}
+                </span>
                 <button
                   onClick={() => {
                     setSelectedEventIndexInfo({