feat: Better RowSidePanel handling

packages/app/src/DBChartPage.tsx

@@ -1,11 +1,11 @@
-import { useCallback } from 'react';
 import dynamic from 'next/dynamic';
-import { parseAsJson, parseAsStringEnum, useQueryState } from 'nuqs';
+import { parseAsJson, useQueryState } from 'nuqs';
 import { SavedChartConfig } from '@hyperdx/common-utils/dist/types';
 import { Box } from '@mantine/core';
 
-import { DEFAULT_CHART_CONFIG, Granularity } from '@/ChartUtils';
+import { DEFAULT_CHART_CONFIG } from '@/ChartUtils';
 import EditTimeChartForm from '@/components/DBEditTimeChartForm';
+import { RowSidePanels } from '@/hooks/useRowSidePanel';
 import { withAppNav } from '@/layout';
 import { parseTimeQuery, useNewTimeQuery } from '@/timeQuery';
 
@@ -42,19 +42,22 @@ function DBChartExplorerPage() {
   );
 
   return (
-    <Box p="sm" className="bg-hdx-dark">
-      <EditTimeChartForm
-        chartConfig={chartConfig}
-        setChartConfig={config => {
-          setChartConfig(config);
-        }}
-        dateRange={searchedTimeRange}
-        setDisplayedTimeInputValue={setDisplayedTimeInputValue}
-        displayedTimeInputValue={displayedTimeInputValue}
-        onTimeRangeSearch={onSearch}
-        onTimeRangeSelect={onTimeRangeSelect}
-      />
-    </Box>
+    <>
+      <Box p="sm" className="bg-hdx-dark">
+        <EditTimeChartForm
+          chartConfig={chartConfig}
+          setChartConfig={config => {
+            setChartConfig(config);
+          }}
+          dateRange={searchedTimeRange}
+          setDisplayedTimeInputValue={setDisplayedTimeInputValue}
+          displayedTimeInputValue={displayedTimeInputValue}
+          onTimeRangeSearch={onSearch}
+          onTimeRangeSelect={onTimeRangeSelect}
+        />
+      </Box>
+      <RowSidePanels />
+    </>
   );
 }
 

packages/app/src/DBDashboardPage.tsx

@@ -64,8 +64,9 @@ import {
   useCreateDashboard,
   useDeleteDashboard,
 } from '@/dashboard';
+import { RowSidePanels } from '@/hooks/useRowSidePanel';
+import { useRowSidePanel } from '@/hooks/useRowSidePanel';
 
-import DBRowSidePanel from './components/DBRowSidePanel';
 import OnboardingModal from './components/OnboardingModal';
 import { Tags } from './components/Tags';
 import { useDashboardRefresh } from './hooks/useDashboardRefresh';
@@ -196,14 +197,12 @@ const Tile = forwardRef(
     const [hovered, setHovered] = useState(false);
 
     // Search tile
-    const [rowId, setRowId] = useQueryState('rowWhere');
-    const [_, setRowSource] = useQueryState('rowSource');
+    const { openRowSidePanel, sidePanel } = useRowSidePanel();
     const handleRowExpandClick = useCallback(
       (rowWhere: string) => {
-        setRowId(rowWhere);
-        setRowSource(chart.config.source);
+        openRowSidePanel(chart.config.source, rowWhere);
       },
-      [chart.config.source, setRowId, setRowSource],
+      [chart.config.source, openRowSidePanel],
     );
 
     const alert = chart.config.alert;
@@ -355,7 +354,7 @@ const Tile = forwardRef(
                   granularity: undefined,
                 }}
                 onRowExpandClick={handleRowExpandClick}
-                highlightedLineId={rowId ?? undefined}
+                highlightedLineId={sidePanel?.rw}
                 onScroll={() => {}}
                 isLive={false}
                 queryKeyPrefix={'search'}
@@ -999,13 +998,8 @@ function DBDashboardPage({ presetConfig }: { presetConfig?: Dashboard }) {
       >
         + Add New Tile
       </Button>
-      {rowId && rowSidePanelSource && (
-        <DBRowSidePanel
-          source={rowSidePanelSource}
-          rowId={rowId}
-          onClose={handleSidePanelClose}
-        />
-      )}
+
+      <RowSidePanels />
     </Box>
   );
 }

packages/app/src/DBSearchPage.tsx

@@ -50,7 +50,6 @@ import CodeMirror from '@uiw/react-codemirror';
 import { useTimeChartSettings } from '@/ChartUtils';
 import DBDeltaChart from '@/components/DBDeltaChart';
 import DBHeatmapChart from '@/components/DBHeatmapChart';
-import DBRowSidePanel from '@/components/DBRowSidePanel';
 import { RowSidePanelContext } from '@/components/DBRowSidePanel';
 import { DBSqlRowTable } from '@/components/DBRowTable';
 import { DBSearchPageFilters } from '@/components/DBSearchPageFilters';
@@ -90,6 +89,7 @@ import { parseTimeQuery, useNewTimeQuery } from '@/timeQuery';
 import { usePrevious } from '@/utils';
 
 import { SQLPreview } from './components/ChartSQLPreview';
+import { RowSidePanels, useRowSidePanel } from './hooks/useRowSidePanel';
 import { useSqlSuggestions } from './hooks/useSqlSuggestions';
 import { DBSearchPageAlertModal } from './DBSearchPageAlertModal';
 import { SearchConfig } from './types';
@@ -575,8 +575,6 @@ function DBSearchPage() {
     [inputSourceObj?.timestampValueExpression],
   );
 
-  const [rowId, setRowId] = useQueryState('rowWhere');
-
   const [displayedTimeInputValue, setDisplayedTimeInputValue] =
     useState('Live Tail');
 
@@ -696,13 +694,7 @@ function DBSearchPage() {
     [setIsLive],
   );
 
-  const onRowExpandClick = useCallback(
-    (rowWhere: string) => {
-      setIsLive(false);
-      setRowId(rowWhere);
-    },
-    [setRowId, setIsLive],
-  );
+  const { sidePanel, openRowSidePanel } = useRowSidePanel();
 
   const [modelFormExpanded, setModelFormExpanded] = useState(false);
   const [saveSearchModalState, setSaveSearchModalState] = useState<
@@ -867,6 +859,16 @@ function DBSearchPage() {
     };
   }, [chartConfig, searchedTimeRange]);
 
+  const onRowExpandClick = useCallback(
+    (rowWhere: string) => {
+      if (!searchedConfig.source) {
+        return;
+      }
+      openRowSidePanel(searchedConfig.source, rowWhere, true);
+    },
+    [openRowSidePanel, searchedConfig.source],
+  );
+
   const searchFilters = useSearchPageFilterState({
     searchQuery: watch('filters') ?? undefined,
     onFilterChange: handleSetFilters,
@@ -1184,13 +1186,7 @@ function DBSearchPage() {
           dbSqlRowTableConfig,
         }}
       >
-        {searchedSource && (
-          <DBRowSidePanel
-            source={searchedSource}
-            rowId={rowId ?? undefined}
-            onClose={() => setRowId(null)}
-          />
-        )}
+        <RowSidePanels />
       </RowSidePanelContext.Provider>
       {searchedConfig != null && searchedSource != null && (
         <SaveSearchModal
@@ -1501,7 +1497,7 @@ function DBSearchPage() {
                         <DBSqlRowTable
                           config={dbSqlRowTableConfig}
                           onRowExpandClick={onRowExpandClick}
-                          highlightedLineId={rowId ?? undefined}
+                          highlightedLineId={sidePanel?.rw}
                           enabled={isReady}
                           isLive={isLive ?? true}
                           queryKeyPrefix={QUERY_KEY_PREFIX}

packages/app/src/KubernetesDashboardPage.tsx

@@ -36,14 +36,15 @@ import {
 } from '@mantine/core';
 
 import { TimePicker } from '@/components/TimePicker';
+import { RowSidePanels } from '@/hooks/useRowSidePanel';
 
 import { ConnectionSelectControlled } from './components/ConnectionSelect';
-import DBRowSidePanel from './components/DBRowSidePanel';
 import { DBSqlRowTable } from './components/DBRowTable';
 import { DBTimeChart } from './components/DBTimeChart';
 import { FormatPodStatus } from './components/KubeComponents';
 import OnboardingModal from './components/OnboardingModal';
 import { useQueriedChartConfig } from './hooks/useChartConfig';
+import { useRowSidePanel } from './hooks/useRowSidePanel';
 import {
   convertDateRangeToGranularityString,
   convertV1ChartConfigToV2,
@@ -868,22 +869,14 @@ function KubernetesDashboardPage() {
     [_searchQuery, setSearchQuery],
   );
 
-  // Row details side panel
-  const [rowId, setRowId] = useQueryState('rowWhere');
-  const [rowSource, setRowSource] = useQueryState('rowSource');
-  const { data: rowSidePanelSource } = useSource({ id: rowSource || '' });
-
-  const handleSidePanelClose = React.useCallback(() => {
-    setRowId(null);
-    setRowSource(null);
-  }, [setRowId, setRowSource]);
-
-  const handleRowExpandClick = React.useCallback(
+  const { openRowSidePanel, sidePanel } = useRowSidePanel();
+  const handleExpandLine = React.useCallback(
     (rowWhere: string) => {
-      setRowId(rowWhere);
-      setRowSource(logSource?.id ?? null);
+      if (logSource?.id != null) {
+        openRowSidePanel(logSource.id, rowWhere);
+      }
     },
-    [logSource?.id, setRowId, setRowSource],
+    [openRowSidePanel, logSource],
   );
 
   return (
@@ -907,13 +900,6 @@ function KubernetesDashboardPage() {
           logSource={logSource}
         />
       )}
-      {rowId && rowSidePanelSource && (
-        <DBRowSidePanel
-          source={rowSidePanelSource}
-          rowId={rowId}
-          onClose={handleSidePanelClose}
-        />
-      )}
       <Group justify="space-between">
         <Group>
           <Text c="gray.4" size="xl">
@@ -1115,8 +1101,8 @@ function KubernetesDashboardPage() {
                           limit: { limit: 200, offset: 0 },
                           dateRange,
                         }}
-                        onRowExpandClick={handleRowExpandClick}
-                        highlightedLineId={rowId ?? undefined}
+                        onRowExpandClick={handleExpandLine}
+                        highlightedLineId={sidePanel?.rw}
                         isLive={false}
                         queryKeyPrefix="k8s-dashboard-events"
                         onScroll={() => {}}
@@ -1312,6 +1298,7 @@ function KubernetesDashboardPage() {
           <Tabs.Panel value="clusters">Clusters</Tabs.Panel>
         </div>
       </Tabs>
+      <RowSidePanels />
     </Box>
   );
 }

packages/app/src/NamespaceDetailsSidePanel.tsx

@@ -32,6 +32,7 @@ import { parseTimeQuery, useTimeQuery } from '@/timeQuery';
 import { useZIndex, ZIndexContext } from '@/zIndex';
 
 import { useGetKeyValues, useTableMetadata } from './hooks/useMetadata';
+import { useRowSidePanel } from './hooks/useRowSidePanel';
 
 import styles from '../styles/LogSidePanel.module.scss';
 
@@ -148,6 +149,16 @@ function NamespaceLogs({
 
   const _where = where + (resultType === 'error' ? ' Severity:err' : '');
 
+  const { openRowSidePanel, sidePanel } = useRowSidePanel();
+  const handleExpandLine = React.useCallback(
+    (rowWhere: string) => {
+      if (logSource?.id != null) {
+        openRowSidePanel(logSource.id, rowWhere);
+      }
+    },
+    [openRowSidePanel, logSource],
+  );
+
   return (
     <Card p="md">
       <Card.Section p="md" py="xs" withBorder>
@@ -214,8 +225,8 @@ function NamespaceLogs({
             limit: { limit: 200, offset: 0 },
             dateRange,
           }}
-          onRowExpandClick={() => {}}
-          highlightedLineId={undefined}
+          onRowExpandClick={handleExpandLine}
+          highlightedLineId={sidePanel?.rw}
           isLive={false}
           queryKeyPrefix="k8s-dashboard-namespace-logs"
           onScroll={() => {}}

packages/app/src/NodeDetailsSidePanel.tsx

@@ -36,6 +36,7 @@ import { useZIndex, ZIndexContext } from '@/zIndex';
 
 import { useQueriedChartConfig } from './hooks/useChartConfig';
 import { useGetKeyValues, useTableMetadata } from './hooks/useMetadata';
+import { useRowSidePanel } from './hooks/useRowSidePanel';
 
 import styles from '../styles/LogSidePanel.module.scss';
 
@@ -167,6 +168,16 @@ function NodeLogs({
 
   const _where = where + (resultType === 'error' ? ' Severity:err' : '');
 
+  const { openRowSidePanel, sidePanel } = useRowSidePanel();
+  const handleExpandLine = React.useCallback(
+    (rowWhere: string) => {
+      if (logSource?.id != null) {
+        openRowSidePanel(logSource.id, rowWhere);
+      }
+    },
+    [openRowSidePanel, logSource],
+  );
+
   return (
     <Card p="md">
       <Card.Section p="md" py="xs" withBorder>
@@ -233,8 +244,8 @@ function NodeLogs({
             limit: { limit: 200, offset: 0 },
             dateRange,
           }}
-          onRowExpandClick={() => {}}
-          highlightedLineId={undefined}
+          onRowExpandClick={handleExpandLine}
+          highlightedLineId={sidePanel?.rw}
           isLive={false}
           queryKeyPrefix="k8s-dashboard-node-logs"
           onScroll={() => {}}

packages/app/src/PodDetailsSidePanel.tsx

@@ -29,6 +29,7 @@ import { parseTimeQuery, useTimeQuery } from '@/timeQuery';
 import { useZIndex, ZIndexContext } from '@/zIndex';
 
 import { useGetKeyValues, useTableMetadata } from './hooks/useMetadata';
+import { useRowSidePanel } from './hooks/useRowSidePanel';
 import { getEventBody } from './source';
 
 import styles from '../styles/LogSidePanel.module.scss';
@@ -141,6 +142,16 @@ function PodLogs({
 
   const _where = where + (resultType === 'error' ? ' Severity:err' : '');
 
+  const { openRowSidePanel, sidePanel } = useRowSidePanel();
+  const handleExpandLine = React.useCallback(
+    (rowWhere: string) => {
+      if (logSource?.id != null) {
+        openRowSidePanel(logSource.id, rowWhere);
+      }
+    },
+    [openRowSidePanel, logSource],
+  );
+
   return (
     <Card p="md">
       <Card.Section p="md" py="xs" withBorder>
@@ -211,8 +222,8 @@ function PodLogs({
             limit: { limit: 200, offset: 0 },
             dateRange,
           }}
-          onRowExpandClick={() => {}}
-          highlightedLineId={undefined}
+          onRowExpandClick={handleExpandLine}
+          highlightedLineId={sidePanel?.rw}
           isLive={false}
           queryKeyPrefix="k8s-dashboard-pod-logs"
           onScroll={() => {}}

packages/app/src/ServicesDashboardPage.tsx

@@ -38,6 +38,7 @@ import { SQLInlineEditorControlled } from '@/components/SQLInlineEditor';
 import { TimePicker } from '@/components/TimePicker';
 import WhereLanguageControlled from '@/components/WhereLanguageControlled';
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
+import { RowSidePanels } from '@/hooks/useRowSidePanel';
 import { withAppNav } from '@/layout';
 import SearchInputV2 from '@/SearchInputV2';
 import { getExpressions } from '@/serviceDashboard';
@@ -997,6 +998,7 @@ function ServicesDashboardPage() {
           </Tabs.Panel>
         </Tabs>
       )}
+      <RowSidePanels />
     </Box>
   );
 }