feat: highlight selected span from results table by default in trace side panel

packages/app/src/components/DBRowDataPanel.tsx

@@ -3,7 +3,7 @@ import { SourceKind, TSource } from '@hyperdx/common-utils/dist/types';
 import { Box } from '@mantine/core';
 
 import { useQueriedChartConfig } from '@/hooks/useChartConfig';
-import { getEventBody, getFirstTimestampValueExpression } from '@/source';
+import { getDisplayedTimestampValueExpression, getEventBody } from '@/source';
 
 import { DBRowJsonViewer } from './DBRowJsonViewer';
 
@@ -17,6 +17,7 @@ export function useRowData({
   const eventBodyExpr = getEventBody(source);
 
   const searchedTraceIdExpr = source.traceIdExpression;
+  const searchedSpanIdExpr = source.spanIdExpression;
 
   const severityTextExpr =
     source.severityTextExpression || source.statusCodeExpression;
@@ -29,9 +30,7 @@ export function useRowData({
           valueExpression: '*',
         },
         {
-          valueExpression: getFirstTimestampValueExpression(
-            source.timestampValueExpression,
-          ),
+          valueExpression: getDisplayedTimestampValueExpression(source),
           alias: '__hdx_timestamp',
         },
         ...(eventBodyExpr
@@ -50,6 +49,14 @@ export function useRowData({
               },
             ]
           : []),
+        ...(searchedSpanIdExpr
+          ? [
+              {
+                valueExpression: searchedSpanIdExpr,
+                alias: '__hdx_span_id',
+              },
+            ]
+          : []),
         ...(severityTextExpr
           ? [
               {

packages/app/src/components/DBRowSidePanel.tsx

@@ -104,7 +104,12 @@ export default function DBRowSidePanel({
     return false;
   }, [source.eventAttributesExpression, source.resourceAttributesExpression]);
 
-  const defaultTab = hasOverviewPanel ? Tab.Overview : Tab.Parsed;
+  const defaultTab =
+    source.kind === 'trace'
+      ? Tab.Trace
+      : hasOverviewPanel
+        ? Tab.Overview
+        : Tab.Parsed;
 
   const [queryTab, setQueryTab] = useQueryState(
     'tab',
@@ -239,6 +244,16 @@ export default function DBRowSidePanel({
     }
   }, [source, normalizedRow]);
 
+  const initialRowHighlightHint = useMemo(() => {
+    if (normalizedRow) {
+      return {
+        timestamp: normalizedRow['__hdx_timestamp'],
+        spanId: normalizedRow['__hdx_span_id'],
+        body: normalizedRow['__hdx_body'],
+      };
+    }
+  }, [normalizedRow]);
+
   return (
     <Drawer
       customIdSuffix={`log-side-panel-${rowId}`}
@@ -357,6 +372,7 @@ export default function DBRowSidePanel({
                       traceId={traceId}
                       dateRange={oneHourRange}
                       focusDate={focusDate}
+                      initialRowHighlightHint={initialRowHighlightHint}
                     />
                   </Box>
                 </ErrorBoundary>

packages/app/src/components/DBTracePanel.tsx

@@ -34,12 +34,21 @@ export default function DBTracePanel({
   dateRange,
   focusDate,
   parentSourceId,
+  initialRowHighlightHint,
 }: {
   parentSourceId?: string | null;
   childSourceId?: string | null;
   traceId: string;
   dateRange: [Date, Date];
   focusDate: Date;
+  // Passed in from side panel to try to identify which
+  // span in the chart to highlight first without constructing
+  // a full row where clause
+  initialRowHighlightHint?: {
+    timestamp: string;
+    spanId: string;
+    body: string;
+  };
 }) {
   const { control, watch, setValue } = useForm({
     defaultValues: {
@@ -191,6 +200,7 @@ export default function DBTracePanel({
           focusDate={focusDate}
           highlightedRowWhere={eventRowWhere?.id}
           onClick={setEventRowWhere}
+          initialRowHighlightHint={initialRowHighlightHint}
         />
       )}
       {traceSourceData != null && eventRowWhere != null && (

packages/app/src/components/DBTraceWaterfallChart.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import _ from 'lodash';
 import TimestampNano from 'timestamp-nano';
 import {
@@ -244,6 +244,7 @@ export function DBTraceWaterfallChartContainer({
   focusDate,
   onClick,
   highlightedRowWhere,
+  initialRowHighlightHint,
 }: {
   traceTableSource: TSource;
   logTableSource: TSource | null;
@@ -252,6 +253,11 @@ export function DBTraceWaterfallChartContainer({
   focusDate: Date;
   onClick?: (rowWhere: { id: string; type: string }) => void;
   highlightedRowWhere?: string | null;
+  initialRowHighlightHint?: {
+    timestamp: string;
+    spanId: string;
+    body: string;
+  };
 }) {
   const { rows: traceRowsData, isFetching: traceIsFetching } =
     useEventsAroundFocus({
@@ -287,6 +293,25 @@ export function DBTraceWaterfallChartContainer({
     }
   });
 
+  useEffect(() => {
+    if (initialRowHighlightHint && onClick && highlightedRowWhere == null) {
+      const initialRowHighlightIndex = rows.findIndex(row => {
+        return (
+          row.Timestamp === initialRowHighlightHint.timestamp &&
+          row.SpanId === initialRowHighlightHint.spanId &&
+          row.Body === initialRowHighlightHint.body
+        );
+      });
+
+      if (initialRowHighlightIndex !== -1) {
+        onClick?.({
+          id: rows[initialRowHighlightIndex].id,
+          type: rows[initialRowHighlightIndex].type ?? '',
+        });
+      }
+    }
+  }, [initialRowHighlightHint, rows, onClick, highlightedRowWhere]);
+
   // 3 Edge-cases
   // 1. No spans, just logs (ex. sampling)
   // 2. Spans, but with missing spans inbetween (ex. missing intermediary spans)