From 85cec51364e8d958f8805c173764d9a4faf3eb0a Mon Sep 17 00:00:00 2001
From: Paik <gwbaik9717@icloud.com>
Date: Thu, 18 Jul 2024 21:26:09 +0900
Subject: [PATCH] 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.
---
 tools/devtools/src/devtools/panel/index.tsx  | 30 ++++++++++++++------
 tools/devtools/src/devtools/panel/styles.css |  3 --
 tools/devtools/src/devtools/tabs/History.tsx |  9 ++++++
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/tools/devtools/src/devtools/panel/index.tsx b/tools/devtools/src/devtools/panel/index.tsx
index 04ccd3690..56dd67d89 100644
--- 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
index 1e2ae0105..656b531ce 100644
--- 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
index 0f9f04053..dc5460d31 100644
--- 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>
           )}