Add Root-Only Filter Feature in History Tab

This commit adds a Root-Only Filter to the History tab, allowing users to view only changes to the Root of the Document. This feature helps developers focus specifically on content changes by filtering out the more frequent Presence events that track user presence information such as cursors.
yorkie-team · Jul 18, 2024 · 85cec51 · 85cec51
1 parent 02111d3
commit 85cec51
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/tools/devtools/src/devtools/panel/index.tsx b/tools/devtools/src/devtools/panel/index.tsx
@@ -41,6 +41,7 @@ const Panel = () => {
     isLast: true,
   });
   const [selectedEvent, setSelectedEvent] = useState([]);
+  const [hidePresenceTab, setHidePresenceTab] = useState(false);
   const {
     isDragging: isHistoryDragging,
     position: historyH,
@@ -57,6 +58,13 @@ const Panel = () => {
     axis: 'x',
     initial: 300,
   });
+  const documentStyle = hidePresenceTab
+    ? { width: '100%' }
+    : {
+        width: documentW,
+        maxWidth: '90%',
+        borderRight: '1px solid var(--gray-300)',
+      };
 
   useEffect(() => {
     if (events.length === 0) {
@@ -116,6 +124,8 @@ const Panel = () => {
         selectedEvent={selectedEvent}
         selectedEventIndexInfo={selectedEventIndexInfo}
         setSelectedEventIndexInfo={setSelectedEventIndexInfo}
+        hidePresenceTab={hidePresenceTab}
+        setHidePresenceTab={setHidePresenceTab}
       />
       <Separator
         dir={'horizontal'}
@@ -124,15 +134,19 @@ const Panel = () => {
       />
       <div className="devtools-data">
         <SelectedNodeProvider>
-          <Document style={{ width: documentW }} />
+          <Document style={documentStyle} />
         </SelectedNodeProvider>
-        <Separator
-          isDragging={isDocumentDragging}
-          {...documentSeparatorProps}
-        />
-        <SelectedPresenceProvider>
-          <Presence />
-        </SelectedPresenceProvider>
+        {!hidePresenceTab && (
+          <>
+            <Separator
+              isDragging={isDocumentDragging}
+              {...documentSeparatorProps}
+            />
+            <SelectedPresenceProvider>
+              <Presence />
+            </SelectedPresenceProvider>
+          </>
+        )}
       </div>
     </div>
   );

diff --git a/tools/devtools/src/devtools/panel/styles.css b/tools/devtools/src/devtools/panel/styles.css
@@ -152,9 +152,6 @@
 
 .yorkie-root {
   min-width: 10%;
-  max-width: 90%;
-  width: 60%;
-  border-right: 1px solid var(--gray-300);
 }
 
 .yorkie-presence {

diff --git a/tools/devtools/src/devtools/tabs/History.tsx b/tools/devtools/src/devtools/tabs/History.tsx
@@ -63,6 +63,8 @@ export function History({
   selectedEvent,
   selectedEventIndexInfo,
   setSelectedEventIndexInfo,
+  hidePresenceTab,
+  setHidePresenceTab,
 }) {
   const events = useTransactionEvents();
   const [openHistory, setOpenHistory] = useState(false);
@@ -180,6 +182,13 @@ export function History({
                 >
                   ⇥
                 </button>
+                <button
+                  onClick={() => {
+                    setHidePresenceTab((prev: boolean) => !prev);
+                  }}
+                >
+                  {hidePresenceTab ? '¥' : 'Y'}
+                </button>
               </span>
             </span>
           )}