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/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>
   );
 }

packages/app/src/SessionSidePanel.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { Button } from 'react-bootstrap';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -11,10 +10,12 @@ import {
 } from '@hyperdx/common-utils/dist/types';
 import { notifications } from '@mantine/notifications';
 
+import { useRowSidePanel } from '@/hooks/useRowSidePanel';
+
 import { Session } from './sessions';
 import SessionSubpanel from './SessionSubpanel';
 import { formatDistanceToNowStrictShort } from './utils';
-import { ZIndexContext } from './zIndex';
+import { useZIndex, ZIndexContext } from './zIndex';
 
 import 'react-modern-drawer/dist/index.css';
 
@@ -30,7 +31,6 @@ export default function SessionSidePanel({
   onPropertyAddClick,
   generateSearchUrl,
   generateChartUrl,
-  zIndex = 100,
 }: {
   traceSource: TSource;
   sessionSource: TSource;
@@ -47,30 +47,25 @@ export default function SessionSidePanel({
     field: string;
     groupBy: string[];
   }) => string;
-  zIndex?: number;
 }) {
-  // Keep track of sub-drawers so we can disable closing this root drawer
-  const [subDrawerOpen, setSubDrawerOpen] = useState(false);
+  const { sidePanel } = useRowSidePanel();
+  const subDrawerOpen = !!sidePanel;
+
+  const contextZIndex = useZIndex();
+  const zIndex = contextZIndex + 1;
 
   useHotkeys(
     ['esc'],
     () => {
       onClose();
     },
-    {
-      enabled: subDrawerOpen === false,
-    },
+    { enabled: !subDrawerOpen },
   );
 
-  // console.log({ logId: sessionId, subDrawerOpen });
   const maxTime =
     session != null ? new Date(session?.maxTimestamp) : new Date();
-  // const minTime =
-  //   session != null ? new Date(session?.['min_timestamp']) : new Date();
+
   const timeAgo = formatDistanceToNowStrictShort(maxTime);
-  // const durationStr = new Date(maxTime.getTime() - minTime.getTime())
-  //   .toISOString()
-  //   .slice(11, 19);
 
   return (
     <Drawer
@@ -150,7 +145,6 @@ export default function SessionSidePanel({
               onPropertyAddClick={onPropertyAddClick}
               generateSearchUrl={generateSearchUrl}
               generateChartUrl={generateChartUrl}
-              setDrawerOpen={setSubDrawerOpen}
               where={where}
               whereLanguage={whereLanguage}
             />

packages/app/src/SessionSubpanel.tsx

@@ -2,10 +2,10 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import cx from 'classnames';
 import throttle from 'lodash/throttle';
 import { parseAsInteger, useQueryState } from 'nuqs';
-import ReactDOM from 'react-dom';
 import { useForm } from 'react-hook-form';
 import { tcFromSource } from '@hyperdx/common-utils/dist/metadata';
 import {
+  ChartConfigWithDateRange,
   ChartConfigWithOptDateRange,
   DateRange,
   SearchCondition,
@@ -21,13 +21,10 @@ import {
   Tooltip,
 } from '@mantine/core';
 
-import * as clickhouse from '@/clickhouse';
-import DBRowSidePanel from '@/components/DBRowSidePanel';
-
 import { SQLInlineEditorControlled } from './components/SQLInlineEditor';
+import { useRowSidePanel } from './hooks/useRowSidePanel';
 import DOMPlayer from './DOMPlayer';
 import Playbar from './Playbar';
-import SearchInput from './SearchInput';
 import SearchInputV2 from './SearchInputV2';
 import { SessionEventList } from './SessionEventList';
 import { FormatTime } from './useFormatTime';
@@ -41,10 +38,6 @@ export default function SessionSubpanel({
   traceSource,
   sessionSource,
   session,
-  onPropertyAddClick,
-  generateChartUrl,
-  generateSearchUrl,
-  setDrawerOpen,
   rumSessionId,
   start,
   end,
@@ -61,52 +54,14 @@ export default function SessionSubpanel({
     field: string;
     groupBy: string[];
   }) => string;
-
   onPropertyAddClick?: (name: string, value: string) => void;
-  setDrawerOpen: (open: boolean) => void;
   rumSessionId: string;
   start: Date;
   end: Date;
   initialTs?: number;
   where?: SearchCondition;
   whereLanguage?: SearchConditionLanguage;
 }) {
-  const [rowId, setRowId] = useState<string | undefined>(undefined);
-
-  // Without portaling the nested drawer close overlay will not render properly
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  useEffect(() => {
-    containerRef.current = document.createElement('div');
-
-    if (containerRef.current) {
-      document.body.appendChild(containerRef.current);
-    }
-
-    return () => {
-      if (containerRef.current) {
-        document.body.removeChild(containerRef.current);
-      }
-    };
-  }, []);
-
-  const portaledPanel =
-    containerRef.current != null
-      ? ReactDOM.createPortal(
-          traceSource && (
-            <DBRowSidePanel
-              source={traceSource}
-              isNestedPanel
-              rowId={rowId}
-              onClose={() => {
-                setDrawerOpen(false);
-                setRowId(undefined);
-              }}
-            />
-          ),
-          containerRef.current,
-        )
-      : null;
-
   const [tsQuery, setTsQuery] = useQueryState(
     'ts',
     parseAsInteger.withOptions({ history: 'replace' }),
@@ -396,7 +351,7 @@ export default function SessionSubpanel({
     );
   }, [commonSelect]);
 
-  const sessionEventListConfig = useMemo<ChartConfigWithOptDateRange>(
+  const sessionEventListConfig = useMemo<ChartConfigWithDateRange>(
     () => ({
       select: commonSelect,
       from: traceSource.from,
@@ -478,9 +433,10 @@ export default function SessionSubpanel({
     [setSearchedQuery],
   );
 
+  const { openRowSidePanel } = useRowSidePanel();
+
   return (
     <div className={styles.wrapper}>
-      {rowId != null && portaledPanel}
       <div className={cx(styles.eventList, { 'd-none': playerFullWidth })}>
         <div className={styles.eventListHeader}>
           <form
@@ -541,10 +497,9 @@ export default function SessionSubpanel({
           queriedConfig={sessionEventListConfig}
           onClick={useCallback(
             (id: string) => {
-              setDrawerOpen(true);
-              setRowId(id);
+              openRowSidePanel(traceSource.id, id);
             },
-            [setDrawerOpen, setRowId],
+            [openRowSidePanel, traceSource.id],
           )}
           focus={focus}
           onTimeClick={useCallback(