fix: show spans referencing the current span (#2828)

.changeset/reverse-span-links.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: show spans referencing the current span in the trace span detail panel ("Referenced By" section)

packages/app/src/components/DBRowOverviewPanel.tsx

@@ -21,17 +21,11 @@ import { ExceptionSubpanel } from './ExceptionSubpanel';
 import { NetworkPropertySubpanel } from './NetworkPropertyPanel';
 import { SpanEventsSubpanel } from './SpanEventsSubpanel';
 import { getValidSpanLinks, SpanLinksSubpanel } from './SpanLinksSubpanel';
+import { SpansReverseLinksSubpanel } from './SpansReverseLinksSubpanel';
 
 const EMPTY_OBJ = {};
-export function RowOverviewPanel({
-  source,
-  rowId,
-  aliasWith,
-  dateRange,
-  hideHeader = false,
-  flush = false,
-  'data-testid': dataTestId,
-}: {
+
+interface DBRowOverviewPanelProps {
   source: TSource;
   rowId: string | undefined | null;
   aliasWith?: WithClause[];
@@ -41,7 +35,22 @@ export function RowOverviewPanel({
   // surrounding chrome (e.g. the tab bar in the trace span detail panel).
   flush?: boolean;
   'data-testid'?: string;
-}) {
+  // All spans belonging to the current trace, used to find spans that
+  // reference the currently selected span (reverse span links). This must
+  // be the full trace's span list, NOT just the single selected row.
+  allTraceRows?: Array<Record<string, any>>;
+}
+
+export function RowOverviewPanel({
+  source,
+  rowId,
+  aliasWith,
+  dateRange,
+  hideHeader = false,
+  flush = false,
+  'data-testid': dataTestId,
+  allTraceRows,
+}: DBRowOverviewPanelProps) {
   const contentPx = flush ? 0 : 'md';
   const { data } = useRowData({ source, rowId, aliasWith, dateRange });
   const { onPropertyAddClick, generateSearchUrl, onOpenLinkedTrace } =
@@ -50,7 +59,7 @@ export function RowOverviewPanel({
   const highlightedAttributeValues = useMemo(() => {
     const attributeExpressions =
       source.kind === SourceKind.Trace || source.kind === SourceKind.Log
-        ? (source.highlightedRowAttributeExpressions ?? [])
+        ? source.highlightedRowAttributeExpressions ?? []
         : [];
 
     return data
@@ -195,6 +204,31 @@ export function RowOverviewPanel({
     return getValidSpanLinks(firstRow?.__hdx_span_links).length > 0;
   }, [firstRow?.__hdx_span_links]);
 
+  // P1 fix: scan the FULL trace's spans (allTraceRows), not data.data,
+  // which only ever contains the single selected row from useRowData.
+  const hasReverseSpanLinks = useMemo(() => {
+    if (!firstRow?.SpanId || !Array.isArray(allTraceRows)) {
+      return false;
+    }
+    const currentSpanId = String(firstRow.SpanId);
+    for (const row of allTraceRows) {
+      if (!row || typeof row !== 'object') continue;
+      const sl = row.__hdx_span_links;
+      if (!Array.isArray(sl)) continue;
+      for (const link of sl) {
+        if (
+          link &&
+          typeof link === 'object' &&
+          'SpanId' in link &&
+          link.SpanId === currentSpanId
+        ) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }, [allTraceRows, firstRow?.SpanId]);
+
   const mainContentColumn = getEventBody(source);
   const mainContent = isString(firstRow?.['__hdx_body'])
     ? firstRow['__hdx_body']
@@ -226,6 +260,7 @@ export function RowOverviewPanel({
           'exception',
           'spanEvents',
           'spanLinks',
+          'reverseSpanLinks',
           'network',
           'resourceAttributes',
           'eventAttributes',
@@ -342,6 +377,24 @@ export function RowOverviewPanel({
             </Accordion.Panel>
           </Accordion.Item>
         )}
+        {hasReverseSpanLinks && (
+          <Accordion.Item value="reverseSpanLinks">
+            <Accordion.Control>
+              <Text size="sm" ps="md">
+                Referenced By
+              </Text>
+            </Accordion.Control>
+            <Accordion.Panel>
+              <Box px="md">
+                <SpansReverseLinksSubpanel
+                  rows={allTraceRows}
+                  currentSpanId={firstRow?.SpanId as string | undefined}
+                  onOpenTrace={onOpenLinkedTrace}
+                />
+              </Box>
+            </Accordion.Panel>
+          </Accordion.Item>
+        )}
 
         {Object.keys(resourceAttributes).length > 0 && (
           <Accordion.Item value="resourceAttributes">

packages/app/src/components/DBTracePanel.tsx

@@ -34,15 +34,16 @@ import {
   IconLayoutSidebarRight,
   IconX,
 } from '@tabler/icons-react';
-
-import { DBTraceWaterfallChartContainer } from '@/components/DBTraceWaterfallChart';
+import {
+  DBTraceWaterfallChartContainer,
+  useFilteredEventsAroundFocus,
+} from '@/components/DBTraceWaterfallChart';
 import { SQLInlineEditorControlled } from '@/components/SQLEditor/SQLInlineEditor';
 import useResizable from '@/hooks/useResizable';
 import { WithClause } from '@/hooks/useRowWhere';
 import { useSource, useUpdateSource } from '@/source';
 import TabBar from '@/TabBar';
 import { parseAsJsonEncoded } from '@/utils/queryParsers';
-
 import DBInfraPanel from './DBInfraPanel';
 import { RowDataPanel, rowHasK8sContext, useRowData } from './DBRowDataPanel';
 import { RowOverviewPanel } from './DBRowOverviewPanel';
@@ -54,7 +55,6 @@ import SourceSchemaPreview, {
   isSourceSchemaPreviewEnabled,
 } from './SourceSchemaPreview';
 import { SourceSelectControlled } from './SourceSelect';
-
 import resizeStyles from '@/../styles/ResizablePanel.module.scss';
 
 type EventRowWhere = {
@@ -75,6 +75,7 @@ const eventRowWhereSchema = z.object({
   aliasWith: z.array(WithClauseSchema),
   traceId: z.string().optional(),
 });
+
 const eventRowWhereParser = parseAsJsonEncoded<EventRowWhere>(
   eventRowWhereSchema.parse,
 );
@@ -105,21 +106,25 @@ function SpanDetailPanel({
   onClose,
   isSideLayout,
   onToggleLayout,
+  allTraceRows,
 }: {
   source: TSource;
   rowId: string;
   aliasWith?: WithClause[];
   onClose: () => void;
   isSideLayout: boolean;
   onToggleLayout: () => void;
+  // All spans belonging to the current trace (not just the selected span),
+  // used by RowOverviewPanel to render the "Referenced By" reverse-span-link
+  // section. Passed down from DBTracePanel, where the trace's full span list
+  // is already fetched for the waterfall chart.
+  allTraceRows?: Array<Record<string, any>>;
 }) {
   const [displayedTab, setDisplayedTab] = useState<SpanDetailTab>(
     SpanDetailTab.Overview,
   );
-
   const { data: rowData } = useRowData({ source, rowId, aliasWith });
   const normalizedRow = rowData?.data?.[0];
-
   // The selected event may come from a different source than the search this
   // panel was opened from (e.g. a log event on a trace opened in the Traces
   // view). Rebind search-url generation to the event's own source and drop
@@ -129,12 +134,10 @@ function SpanDetailPanel({
     () => deriveRowSidePanelContextForSource(parentContext, source),
     [parentContext, source],
   );
-
   const hasK8sContext = useMemo(
     () => rowHasK8sContext(source, normalizedRow),
     [source, normalizedRow],
   );
-
   // If the selected span loses k8s context (e.g. switching spans) while the
   // Infrastructure tab is active, fall back to Overview so we don't show a
   // blank panel. Derived rather than synced via an effect.
@@ -217,6 +220,7 @@ function SpanDetailPanel({
           source={source}
           rowId={rowId}
           aliasWith={aliasWith}
+          allTraceRows={allTraceRows}
           flush
         />
       )}
@@ -289,6 +293,7 @@ export default function DBTracePanel({
       : childSourceData?.kind === SourceKind.Log
         ? childSourceData
         : null;
+
   const traceSourceData =
     parentSourceData?.kind === SourceKind.Trace
       ? parentSourceData
@@ -335,6 +340,7 @@ export default function DBTracePanel({
         '',
     },
   });
+
   useEffect(() => {
     if (
       parentSourceData &&
@@ -363,10 +369,8 @@ export default function DBTracePanel({
 
   const { size: rightPanelSize, startResize: startHorizontalResize } =
     useResizable(35, 'right');
-
   const { size: bottomPanelSize, startResize: startVerticalResize } =
     useResizable(40, 'top');
-
   const detailPanelSize = isSideLayout ? rightPanelSize : bottomPanelSize;
 
   const handleCloseSpanDetails = useCallback(() => {
@@ -381,6 +385,22 @@ export default function DBTracePanel({
     return traceSourceData;
   }, [selectedSpan, logSourceData, traceSourceData]);
 
+  // Fetch the full set of spans for this trace so the span detail panel can
+  // determine which spans reference the currently selected span ("Referenced
+  // By" / reverse span links). This reuses the same hook the waterfall chart
+  // uses for its trace-side rows, so we're not issuing a materially different
+  // query. Only enabled once we have a real trace source + traceId; the
+  // `tableSource` fallback below only exists to satisfy the hook's non-null
+  // parameter type while disabled and is never actually queried.
+  const isTraceReady = traceSourceData?.kind === SourceKind.Trace && !!traceId;
+  const { rows: allTraceRows } = useFilteredEventsAroundFocus({
+    tableSource: traceSourceData ?? logSourceData ?? ({} as any),
+    focusDate,
+    dateRange,
+    traceId: traceId ?? '',
+    enabled: isTraceReady,
+  });
+
   return (
     <div
       data-testid={dataTestId}
@@ -488,7 +508,6 @@ export default function DBTracePanel({
             />
           )}
         </div>
-
         {selectedSpan != null && (
           <Box
             className={
@@ -501,7 +520,6 @@ export default function DBTracePanel({
             }
           />
         )}
-
         {traceSourceData != null &&
           selectedSpan != null &&
           selectedSpanSource != null && (
@@ -531,6 +549,7 @@ export default function DBTracePanel({
                 onToggleLayout={() =>
                   setDetailLayout(isSideLayout ? 'bottom' : 'side')
                 }
+                allTraceRows={allTraceRows}
               />
             </div>
           )}

packages/app/src/components/DBTraceWaterfallChart.tsx

@@ -173,21 +173,17 @@ function getConfig(
     SpanId: source.spanIdExpression ?? '',
     ParentSpanId:
       source.kind === SourceKind.Trace
-        ? (source.parentSpanIdExpression ?? '')
+        ? source.parentSpanIdExpression ?? ''
         : '',
     StatusCode:
-      source.kind === SourceKind.Trace
-        ? (source.statusCodeExpression ?? '')
-        : '',
+      source.kind === SourceKind.Trace ? source.statusCodeExpression ?? '' : '',
     ServiceName: source.serviceNameExpression ?? '',
     SeverityText:
-      source.kind === SourceKind.Log
-        ? (source.severityTextExpression ?? '')
-        : '',
+      source.kind === SourceKind.Log ? source.severityTextExpression ?? '' : '',
     SpanAttributes: source.eventAttributesExpression ?? '',
     SpanEvents:
       source.kind === SourceKind.Trace
-        ? (source.spanEventsValueExpression ?? '')
+        ? source.spanEventsValueExpression ?? ''
         : '',
   };
 
@@ -424,7 +420,7 @@ export function useEventsAroundFocus({
   };
 }
 
-function useFilteredEventsAroundFocus(
+export function useFilteredEventsAroundFocus(
   args: Parameters<typeof useEventsAroundFocus>[0],
 ) {
   const filtered = useEventsAroundFocus(args);
@@ -625,11 +621,11 @@ export function DBTraceWaterfallChartContainer({
       traceWhereLanguage:
         traceWhereLanguage === 'sql' || traceWhereLanguage === 'lucene'
           ? traceWhereLanguage
-          : (getStoredLanguage() ?? 'lucene'),
+          : getStoredLanguage() ?? 'lucene',
       logWhereLanguage:
         logWhereLanguage === 'sql' || logWhereLanguage === 'lucene'
           ? logWhereLanguage
-          : (getStoredLanguage() ?? 'lucene'),
+          : getStoredLanguage() ?? 'lucene',
     },
   });
 
@@ -1093,7 +1089,7 @@ export function DBTraceWaterfallChartContainer({
           type === SourceKind.Log
             ? getChartColorSuccess()
             : serviceName
-              ? (serviceColorMap.get(serviceName) ?? '#6A7077')
+              ? serviceColorMap.get(serviceName) ?? '#6A7077'
               : '#6A7077';
 
         return {
@@ -1515,9 +1511,9 @@ export function DBTraceWaterfallChartContainer({
           flattenedNodes.length > 0 ? (
             <div className="my-3">All items are hidden by filters</div>
           ) : (
-            (emptyState ?? (
+            emptyState ?? (
               <div className="my-3">No matching spans or logs found</div>
-            ))
+            )
           )
         ) : (
           <TimelineChart