remove dbSqlRowTableConfig from drawer url state

Author: ernestii

packages/app/src/DBDashboardPage.tsx

@@ -985,6 +985,7 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
       >
         + Add New Tile
       </Button>
+
       <RowSidePanels />
     </Box>
   );

packages/app/src/DBSearchPage.tsx

@@ -865,14 +865,9 @@ function DBSearchPage() {
       if (!searchedConfig.source) {
         return;
       }
-      openRowSidePanel(
-        searchedConfig.source,
-        rowWhere,
-        dbSqlRowTableConfig,
-        true,
-      );
+      openRowSidePanel(searchedConfig.source, rowWhere, true);
     },
-    [dbSqlRowTableConfig, openRowSidePanel, searchedConfig.source],
+    [openRowSidePanel, searchedConfig.source],
   );
 
   const searchFilters = useSearchPageFilterState({
@@ -1197,6 +1192,7 @@ function DBSearchPage() {
           displayedColumns,
           toggleColumn,
           generateSearchUrl,
+          dbSqlRowTableConfig,
         }}
       >
         <RowSidePanels />

packages/app/src/SessionSubpanel.tsx

@@ -500,9 +500,9 @@ export default function SessionSubpanel({
           queriedConfig={sessionEventListConfig}
           onClick={useCallback(
             (id: string) => {
-              openRowSidePanel(traceSource.id, id, sessionEventListConfig);
+              openRowSidePanel(traceSource.id, id);
             },
-            [openRowSidePanel, sessionEventListConfig, traceSource.id],
+            [openRowSidePanel, traceSource.id],
           )}
           focus={focus}
           onTimeClick={useCallback(

packages/app/src/components/ContextSidePanel.tsx

@@ -153,9 +153,9 @@ export default function ContextSubpanel({
   const { openRowSidePanel } = useRowSidePanel();
   const handleExpandLine = useCallback(
     (rowWhere: string) => {
-      openRowSidePanel(source.id, rowWhere, dbSqlRowTableConfig);
+      openRowSidePanel(source.id, rowWhere);
     },
-    [dbSqlRowTableConfig, openRowSidePanel, source.id],
+    [openRowSidePanel, source.id],
   );
 
   return (

packages/app/src/components/DBRowSidePanel.tsx

@@ -2,6 +2,7 @@ import {
   createContext,
   MouseEventHandler,
   useCallback,
+  useContext,
   useMemo,
   useState,
 } from 'react';
@@ -55,7 +56,6 @@ export const RowSidePanelContext = createContext<{
 }>({});
 
 type DBRowSidePanelProps = {
-  dbSqlRowTableConfig?: ChartConfigWithDateRange;
   source: TSource;
   rowId: string | undefined;
   zIndexOffset?: number;
@@ -84,7 +84,6 @@ export default function DBRowSidePanelWithFetcher({
 function DBRowSidePanel({
   rowId,
   source,
-  dbSqlRowTableConfig,
   onClose: _onClose,
   isTopPanel = true,
   zIndexOffset = 0,
@@ -214,6 +213,8 @@ function DBRowSidePanel({
     );
   }, [source, normalizedRow]);
 
+  const { dbSqlRowTableConfig } = useContext(RowSidePanelContext);
+
   return (
     <Drawer
       customIdSuffix={`log-side-panel-${rowId}`}

packages/app/src/hooks/useRowSidePanel.tsx

@@ -1,21 +1,19 @@
 import React from 'react';
 import produce from 'immer';
 import { parseAsArrayOf, parseAsJson, useQueryState } from 'nuqs';
-import { ChartConfigWithDateRange } from '@hyperdx/common-utils/dist/types';
 
 import DBRowSidePanel from '@/components/DBRowSidePanel';
 
 type SidePanelState = {
   sid: string;
   rw: string;
-  tcfg?: ChartConfigWithDateRange;
 };
 
 type SidePanelStack = SidePanelState[];
 
 export const useRowSidePanel = () => {
   const [sidePanelStack, setSidePanelStack] = useQueryState<SidePanelStack>(
-    'drawer',
+    'rowDetails',
     parseAsArrayOf(parseAsJson()),
   );
 
@@ -54,13 +52,8 @@ export const useRowSidePanel = () => {
 
   // Row Side Panel
   const openRowSidePanel = React.useCallback(
-    (
-      sid: string,
-      rw: string,
-      tcfg?: ChartConfigWithDateRange,
-      replace?: boolean,
-    ) => {
-      pushSidePanel({ sid, rw, tcfg }, replace);
+    (sid: string, rw: string, replace?: boolean) => {
+      pushSidePanel({ sid, rw }, replace);
     },
     [pushSidePanel],
   );
@@ -73,22 +66,21 @@ export const useRowSidePanel = () => {
   };
 };
 
-export const RowSidePanels = () => {
+export const RowSidePanels: React.FC = () => {
   const { sidePanelStack, closeSidePanel } = useRowSidePanel();
 
-  if (!sidePanelStack) {
-    return null;
-  }
-
-  return sidePanelStack.map((sidePanel, index) => (
-    <DBRowSidePanel
-      key={index}
-      onClose={() => closeSidePanel(index)}
-      rowId={sidePanel.rw}
-      sourceId={sidePanel.sid}
-      zIndexOffset={index}
-      dbSqlRowTableConfig={sidePanel.tcfg}
-      isTopPanel={index === sidePanelStack.length - 1}
-    />
-  ));
+  return (
+    <>
+      {sidePanelStack?.map((sidePanel, index) => (
+        <DBRowSidePanel
+          key={index}
+          onClose={() => closeSidePanel(index)}
+          rowId={sidePanel.rw}
+          sourceId={sidePanel.sid}
+          zIndexOffset={index}
+          isTopPanel={index === sidePanelStack.length - 1}
+        />
+      ))}
+    </>
+  );
 };