From 0eadcc643cba6c87f652c32f312c030769dd5f72 Mon Sep 17 00:00:00 2001
From: Andrew Krueger <andrew.krueger@flocksafety.com>
Date: Fri, 22 Nov 2024 11:30:05 -0700
Subject: [PATCH 1/3] feat: make DBRowSidePanel resizeable

---
 .../app/src/components/DBRowSidePanel.tsx     | 20 +++++++++++++++++--
 packages/app/styles/LogSidePanel.module.scss  |  7 +++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/DBRowSidePanel.tsx b/packages/app/src/components/DBRowSidePanel.tsx
index f6d1883cb..246afc88e 100644
--- a/packages/app/src/components/DBRowSidePanel.tsx
+++ b/packages/app/src/components/DBRowSidePanel.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useId, useMemo, useState } from 'react';
+import { MouseEventHandler, useCallback, useId, useMemo, useState } from 'react';
 import { add } from 'date-fns';
 import { parseAsStringEnum, useQueryState } from 'nuqs';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -80,6 +80,21 @@ export default function DBRowSidePanel({
     parseAsStringEnum<Tab>(Object.values(Tab)).withDefault(Tab.Parsed),
   );
 
+  const [panelWidth, setPanelWidth] = useState(Math.round(window.innerWidth * 0.8));
+  const handleResize = useCallback((e: MouseEvent) => {
+    const offsetRight = document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
+    setPanelWidth(offsetRight + 3); // ensure we bury the cursor in the panel
+  }, []);
+  const startResize: MouseEventHandler<HTMLDivElement> = useCallback((e) => {
+    e.preventDefault();
+    document.addEventListener('mousemove', handleResize);
+    document.addEventListener('mouseup', endResize);
+  }, []);
+  const endResize = useCallback(() => {
+    document.removeEventListener('mousemove', handleResize);
+    document.removeEventListener('mouseup', endResize);
+  }, []);
+
   // const [queryTab, setQueryTab] = useQueryParam(
   //   'tb',
   //   withDefault(StringParam, undefined),
@@ -162,12 +177,13 @@ export default function DBRowSidePanel({
         }
       }}
       direction="right"
-      size={'80vw'}
+      size={panelWidth}
       zIndex={drawerZIndex}
       enableOverlay={subDrawerOpen}
     >
       <ZIndexContext.Provider value={drawerZIndex}>
         <div className={styles.panel} ref={drawerRef}>
+          <Box className={styles.panelDragBar} onMouseDown={startResize}/>
           {isRowLoading && (
             <div className={styles.loadingState}>Loading...</div>
           )}
diff --git a/packages/app/styles/LogSidePanel.module.scss b/packages/app/styles/LogSidePanel.module.scss
index 04e15aa27..aad3243a8 100644
--- a/packages/app/styles/LogSidePanel.module.scss
+++ b/packages/app/styles/LogSidePanel.module.scss
@@ -13,6 +13,13 @@ $padding-x: 24px;
   border-left: 1px solid $slate-900;
 }
 
+.panelDragBar {
+    position: absolute;
+    width: 3px;
+    height: 100%;
+    cursor: col-resize;
+}
+
 .panelHeader {
   display: flex;
   justify-content: space-between;

From b9984d2c64f5565a4abe4d0d171e0894f4cf152b Mon Sep 17 00:00:00 2001
From: Andrew Krueger <andrew.krueger@flocksafety.com>
Date: Fri, 22 Nov 2024 23:40:19 -0700
Subject: [PATCH 2/3] lints, improves UX

---
 packages/app/src/components/DBRowSidePanel.tsx | 13 ++++++++-----
 packages/app/styles/LogSidePanel.module.scss   | 14 ++++++++++----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/components/DBRowSidePanel.tsx b/packages/app/src/components/DBRowSidePanel.tsx
index 8a308984c..d7a28f3bf 100644
--- a/packages/app/src/components/DBRowSidePanel.tsx
+++ b/packages/app/src/components/DBRowSidePanel.tsx
@@ -1,6 +1,6 @@
 import {
-  MouseEventHandler,
   createContext,
+  MouseEventHandler,
   useCallback,
   useContext,
   useId,
@@ -81,12 +81,15 @@ export default function DBRowSidePanel({
     parseAsStringEnum<Tab>(Object.values(Tab)).withDefault(Tab.Parsed),
   );
 
-  const [panelWidth, setPanelWidth] = useState(Math.round(window.innerWidth * 0.8));
+  const [panelWidth, setPanelWidth] = useState(
+    Math.round(window.innerWidth * 0.8),
+  );
   const handleResize = useCallback((e: MouseEvent) => {
-    const offsetRight = document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
+    const offsetRight =
+      document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
     setPanelWidth(offsetRight + 3); // ensure we bury the cursor in the panel
   }, []);
-  const startResize: MouseEventHandler<HTMLDivElement> = useCallback((e) => {
+  const startResize: MouseEventHandler<HTMLDivElement> = useCallback(e => {
     e.preventDefault();
     document.addEventListener('mousemove', handleResize);
     document.addEventListener('mouseup', endResize);
@@ -184,7 +187,7 @@ export default function DBRowSidePanel({
     >
       <ZIndexContext.Provider value={drawerZIndex}>
         <div className={styles.panel} ref={drawerRef}>
-          <Box className={styles.panelDragBar} onMouseDown={startResize}/>
+          <Box className={styles.panelDragBar} onMouseDown={startResize} />
           {isRowLoading && (
             <div className={styles.loadingState}>Loading...</div>
           )}
diff --git a/packages/app/styles/LogSidePanel.module.scss b/packages/app/styles/LogSidePanel.module.scss
index aad3243a8..3e000c436 100644
--- a/packages/app/styles/LogSidePanel.module.scss
+++ b/packages/app/styles/LogSidePanel.module.scss
@@ -14,10 +14,16 @@ $padding-x: 24px;
 }
 
 .panelDragBar {
-    position: absolute;
-    width: 3px;
-    height: 100%;
-    cursor: col-resize;
+  position: absolute;
+  width: 3px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: transparent;
+
+  &:hover {
+    background-color: $slate-900;
+    transition: background-color 0.2s ease-in-out;
+  }
 }
 
 .panelHeader {

From adc67e0577eab49560f8b763df772f4def8572da Mon Sep 17 00:00:00 2001
From: Andrew Krueger <andrew.krueger@flocksafety.com>
Date: Sat, 23 Nov 2024 00:04:39 -0700
Subject: [PATCH 3/3] prevent blocking main UI

---
 packages/app/src/components/DBRowSidePanel.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/DBRowSidePanel.tsx b/packages/app/src/components/DBRowSidePanel.tsx
index d7a28f3bf..57b3a167c 100644
--- a/packages/app/src/components/DBRowSidePanel.tsx
+++ b/packages/app/src/components/DBRowSidePanel.tsx
@@ -87,7 +87,8 @@ export default function DBRowSidePanel({
   const handleResize = useCallback((e: MouseEvent) => {
     const offsetRight =
       document.body.offsetWidth - (e.clientX - document.body.offsetLeft);
-    setPanelWidth(offsetRight + 3); // ensure we bury the cursor in the panel
+    const maxWidth = document.body.offsetWidth - 25;
+    setPanelWidth(Math.min(offsetRight + 3, maxWidth)); // ensure we bury the cursor in the panel
   }, []);
   const startResize: MouseEventHandler<HTMLDivElement> = useCallback(e => {
     e.preventDefault();