feat: Add highlighted attributes to overview panel (#1395)

Closes HDX-2881

# Summary

This PR adds the row-level highlighted attributes to the row overview panel, so that they appear for the span that is selected in the trace waterfall and in an expanded table row:

<img width="1071" height="966" alt="Screenshot 2025-11-20 at 2 32 09 PM" src="https://github.com/user-attachments/assets/febb6c12-4c58-4eac-b085-cbad3601b2fe" />

<img width="814" height="275" alt="Screenshot 2025-11-20 at 2 32 16 PM" src="https://github.com/user-attachments/assets/b3c6fbeb-205e-4b6a-9dfd-5ed9457a57df" />

This PR also makes some small updates to the descriptions of the highlighted attributes in the source configuration form.

Author: pulpdrew

.changeset/wicked-baboons-film.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Add highlighted attributes to overview panel

packages/app/src/components/DBRowOverviewPanel.tsx

@@ -2,16 +2,17 @@ import { useCallback, useContext, useMemo } from 'react';
 import isString from 'lodash/isString';
 import pickBy from 'lodash/pickBy';
 import { SourceKind, TSource } from '@hyperdx/common-utils/dist/types';
-import { Accordion, Box, Divider, Flex, Text } from '@mantine/core';
+import { Accordion, Box, Flex, Text } from '@mantine/core';
 
 import { getEventBody } from '@/source';
+import { getHighlightedAttributesFromData } from '@/utils/highlightedAttributes';
 
 import { getJSONColumnNames, useRowData } from './DBRowDataPanel';
 import { DBRowJsonViewer } from './DBRowJsonViewer';
 import { RowSidePanelContext } from './DBRowSidePanel';
 import DBRowSidePanelHeader from './DBRowSidePanelHeader';
 import EventTag from './EventTag';
-import { ExceptionSubpanel, parseEvents } from './ExceptionSubpanel';
+import { ExceptionSubpanel } from './ExceptionSubpanel';
 import { NetworkPropertySubpanel } from './NetworkPropertyPanel';
 import { SpanEventsSubpanel } from './SpanEventsSubpanel';
 
@@ -27,10 +28,26 @@ export function RowOverviewPanel({
   hideHeader?: boolean;
   'data-testid'?: string;
 }) {
-  const { data, isLoading, isError } = useRowData({ source, rowId });
+  const { data } = useRowData({ source, rowId });
   const { onPropertyAddClick, generateSearchUrl } =
     useContext(RowSidePanelContext);
 
+  const highlightedAttributeValues = useMemo(() => {
+    const attributeExpressions =
+      source.kind === SourceKind.Trace || source.kind === SourceKind.Log
+        ? (source.highlightedRowAttributeExpressions ?? [])
+        : [];
+
+    return data
+      ? getHighlightedAttributesFromData(
+          source,
+          attributeExpressions,
+          data.data || [],
+          data.meta || [],
+        )
+      : [];
+  }, [source, data]);
+
   const jsonColumns = getJSONColumnNames(data?.meta);
 
   const eventAttributesExpr = source.eventAttributesExpression;
@@ -164,6 +181,7 @@ export function RowOverviewPanel({
       {!hideHeader && (
         <Box px="sm" pt="md">
           <DBRowSidePanelHeader
+            attributes={highlightedAttributeValues}
             date={new Date(firstRow?.__hdx_timestamp ?? 0)}
             mainContent={mainContent}
             mainContentHeader={mainContentColumn}

packages/app/src/components/EventTag.tsx

@@ -37,7 +37,8 @@ export default function EventTag({
     }
 )) {
   const [opened, setOpened] = useState(false);
-  const hasActions = !!onPropertyAddClick || !!generateSearchUrl;
+  const isLink = isLinkableUrl(value);
+  const hasActions = !!onPropertyAddClick || !!generateSearchUrl || isLink;
 
   if (!hasActions) {
     return (
@@ -47,8 +48,6 @@ export default function EventTag({
     );
   }
 
-  const isLink = isLinkableUrl(value);
-
   const searchCondition =
     nameLanguage === 'sql'
       ? SqlString.format('? = ?', [SqlString.raw(name), value])

packages/app/src/components/SourceForm.tsx

@@ -499,13 +499,13 @@ export function LogTableModelForm(props: TableModelProps) {
           {...props}
           name="highlightedRowAttributeExpressions"
           label="Highlighted Attributes"
-          helpText="Expressions defining row-level attributes which are displayed in the search side panel."
+          helpText="Expressions defining row-level attributes which are displayed in the row side panel for the selected row."
         />
         <HighlightedAttributeExpressionsFormRow
           {...props}
           name="highlightedTraceAttributeExpressions"
           label="Highlighted Trace Attributes"
-          helpText="Expressions defining trace-level attributes which are displayed in the search side panel."
+          helpText="Expressions defining trace-level attributes which are displayed in the trace view for the selected trace."
         />
       </Stack>
     </>
@@ -779,13 +779,13 @@ export function TraceTableModelForm(props: TableModelProps) {
         {...props}
         name="highlightedRowAttributeExpressions"
         label="Highlighted Attributes"
-        helpText="Expressions defining row-level attributes which are displayed in the search side panel."
+        helpText="Expressions defining row-level attributes which are displayed in the row side panel for the selected row"
       />
       <HighlightedAttributeExpressionsFormRow
         {...props}
         name="highlightedTraceAttributeExpressions"
         label="Highlighted Trace Attributes"
-        helpText="Expressions defining trace-level attributes which are displayed in the search side panel."
+        helpText="Expressions defining trace-level attributes which are displayed in the trace view for the selected trace."
       />
     </Stack>
   );