feat: Allow to interact with page while log side panel is open (#332)

Allow to interact with page while log side panel is open


https://github.com/hyperdxio/hyperdx/assets/149748269/0c7baa7e-9ffb-4bd4-994f-764dc73eca84






----

| <a href="https://ellipsis.dev" target="_blank"><img src="https://avatars.githubusercontent.com/u/80834858?s=400&u=31e596315b0d8f7465b3ee670f25cea677299c96&v=4" alt="Ellipsis" width="30px" height="30px"/></a> | 🚀 This PR description was created by [Ellipsis](https://www.ellipsis.dev) for commit 011983750e.  | 
|--------|--------|

### Summary:
This PR enhances user interaction by allowing page interaction while the log side panel is open, achieved by using the `useClickOutside` hook in `LogSidePanel.tsx` and updating the `setOpenedLog` function in `SearchPage.tsx`.

**Key points**:
- Added `useClickOutside` hook from `@mantine/hooks` in `LogSidePanel.tsx` to create a `drawerRef`.
- Used `drawerRef` to close the drawer when a click is detected outside of it.
- Updated `enableOverlay` prop of `Drawer` component to depend on `subDrawerOpen` state.
- Added condition in `setOpenedLog` function in `SearchPage.tsx` to prevent unnecessary updates when the log is already open.


----
Generated with ❤️ by [ellipsis.dev](https://www.ellipsis.dev)

.changeset/smooth-falcons-report.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Allow to interact with page while log side panel is open

packages/app/src/LogSidePanel.tsx

@@ -31,6 +31,7 @@ import {
   Stack,
   TextInput,
 } from '@mantine/core';
+import { useClickOutside } from '@mantine/hooks';
 
 import HyperJson, { GetLineActions, LineAction } from './components/HyperJson';
 import { KubeTimeline } from './components/KubeComponents';
@@ -40,7 +41,6 @@ import {
   K8S_CPU_PERCENTAGE_NUMBER_FORMAT,
   K8S_FILESYSTEM_NUMBER_FORMAT,
   K8S_MEM_NUMBER_FORMAT,
-  K8S_NETWORK_NUMBER_FORMAT,
 } from './ChartUtils';
 import { K8S_METRICS_ENABLED } from './config';
 import { CurlGenerator } from './curlGenerator';
@@ -2667,10 +2667,14 @@ export default function LogSidePanel({
     );
   }, [logData]);
 
+  const drawerRef = useClickOutside(() => {
+    if (!subDrawerOpen) {
+      _onClose();
+    }
+  }, ['mouseup', 'touchend']);
+
   return (
     <Drawer
-      enableOverlay
-      overlayOpacity={0.1}
       customIdSuffix={`log-side-panel-${logId}`}
       duration={0}
       open={logId != null}
@@ -2682,10 +2686,10 @@ export default function LogSidePanel({
       direction="right"
       size={displayedTab === 'replay' || isSmallScreen ? '80vw' : '60vw'}
       zIndex={drawerZIndex}
-      // enableOverlay={subDrawerOpen}
+      enableOverlay={subDrawerOpen}
     >
       <ZIndexContext.Provider value={drawerZIndex}>
-        <div className={styles.panel}>
+        <div className={styles.panel} ref={drawerRef}>
           {isLoading && <div className={styles.loadingState}>Loading...</div>}
           {logData != null && !isLoading ? (
             <>

packages/app/src/SearchPage.tsx

@@ -318,13 +318,13 @@ const LogViewerContainer = memo(function LogViewerContainer({
 
   const setOpenedLog = useCallback(
     (log: { id: string; sortKey: string } | undefined) => {
-      if (log == null) {
+      if (log == null || openedLog?.id === log.id) {
         setOpenedLogQuery({ lid: undefined, sk: undefined });
       } else {
         setOpenedLogQuery({ lid: log.id, sk: log.sortKey });
       }
     },
-    [setOpenedLogQuery],
+    [openedLog, setOpenedLogQuery],
   );
 
   const { displayedColumns, setDisplayedColumns, toggleColumn } =