apache · mikemikimike · Jul 31, 2026
diff --git a/telemetry/ui/src/components/routes/app/AppView.tsx b/telemetry/ui/src/components/routes/app/AppView.tsx
@@ -117,6 +117,8 @@ export type HighlightState = {
   currentSelectedIndex?: SequenceLocation;
   setCurrentHoverIndex: (index: SequenceLocation | undefined) => void;
   currentHoverIndex?: SequenceLocation;
+  setCurrentHoverAction: (action: string | undefined) => void;
+  currentHoverAction?: string;
   currentEditingAnnotationContext?: AnnotationEditingContext;
   setCurrentEditingAnnotationContext: (
     annotationContext: AnnotationEditingContext | undefined
@@ -145,6 +147,8 @@ export const AppContext = createContext<HighlightState>({
   currentSelectedIndex: undefined,
   setCurrentHoverIndex: () => {},
   currentHoverIndex: undefined,
+  setCurrentHoverAction: () => {},
+  currentHoverAction: undefined,
   currentEditingAnnotationContext: undefined,
   setCurrentEditingAnnotationContext: () => {},
   createAnnotation: () => {
@@ -222,6 +226,7 @@ export const AppView = (props: {
   const { projectId } = props;
   // const [currentActionIndex, setCurrentActionIndex] = useState<number | undefined>(undefined);
   const [hoverIndex, setHoverIndex] = useState<SequenceLocation | undefined>(undefined);
+  const [hoverActionName, setHoverActionName] = useState<string | undefined>(undefined);
   const [autoRefresh, setAutoRefresh] = useState(props.defaultAutoRefresh || false);
   const shouldQuery = projectId !== undefined && appID !== undefined;
   const [minimizedTable, setMinimizedTable] = useState(false);
@@ -473,6 +478,8 @@ export const AppView = (props: {
         currentSelectedIndex: currentSequenceLocation,
         setCurrentHoverIndex: setHoverIndex,
         currentHoverIndex: hoverIndex,
+        setCurrentHoverAction: setHoverActionName,
+        currentHoverAction: hoverActionName,
         currentEditingAnnotationContext: currentEditingAnnotationContext,
         setCurrentEditingAnnotationContext: setCurrentEditingAnnotationContext,
         // TODO -- handle span ID
@@ -503,15 +510,13 @@ export const AppView = (props: {
           return response;
         },
         refreshAnnotationData: refetchAnnotationsData
-      }}
-    >
+      }}>
       <Layout
         mode={fullScreen ? 'expanding-second' : minimizedTable ? 'first-minimal' : 'half'}
         firstItem={
           <div className="w-full h-full flex flex-col">
             <div
-              className={`w-full ${fullScreen ? 'h-full' : props.orientation === 'stacked_vertical' ? 'h-full' : 'h-1/2'}`}
-            >
+              className={`w-full ${fullScreen ? 'h-full' : props.orientation === 'stacked_vertical' ? 'h-full' : 'h-1/2'}`}>
               <ApplicationTable
                 steps={stepsSorted}
                 appID={appID}

diff --git a/telemetry/ui/src/components/routes/app/GraphView.tsx b/telemetry/ui/src/components/routes/app/GraphView.tsx
@@ -35,7 +35,7 @@ import ReactFlow, {
 } from 'reactflow';
 
 import 'reactflow/dist/style.css';
-import { backgroundColorsForIndex } from './AppView';
+import { AppContext, backgroundColorsForIndex } from './AppView';
 import { getActionStatus } from '../../../utils';
 import { getSmartEdge } from '@tisoap/react-flow-smart-edge';
 
@@ -79,6 +79,7 @@ type EdgeType = {
 };
 
 const ActionNode = (props: { data: NodeData }) => {
+  const { setCurrentHoverAction, currentHoverAction } = React.useContext(AppContext);
   const {
     highlightedActions: previousActions,
     hoverAction,
@@ -98,7 +99,8 @@ const ActionNode = (props: { data: NodeData }) => {
       : shouldHighlight
         ? 'bg-gray-100'
         : '';
-  const opacity = hoverAction?.step_start_log.action === name ? 'opacity-50' : '';
+  const opacity =
+    hoverAction?.step_start_log.action === name || currentHoverAction === name ? 'opacity-50' : '';
   const additionalClasses = isCurrentAction
     ? 'border-dwlightblue/50 text-white border-2'
     : shouldHighlight
@@ -109,7 +111,8 @@ const ActionNode = (props: { data: NodeData }) => {
       <Handle type="target" position={Position.Top} />
       <div
         className={`${bgColor} ${opacity} ${additionalClasses} text-xl font-sans p-4 rounded-md border`}
-      >
+        onMouseEnter={() => setCurrentHoverAction(name)}
+        onMouseLeave={() => setCurrentHoverAction(undefined)}>
         {name}
       </div>
       <Handle type="source" position={Position.Bottom} id="a" />

diff --git a/telemetry/ui/src/components/routes/app/InsightsView.tsx b/telemetry/ui/src/components/routes/app/InsightsView.tsx
@@ -114,8 +114,7 @@ const Cost: React.FC<CostProps> = ({ currency = 'USD', totalCost, costDetails })
       <div
         onMouseLeave={() => setShowDetails(false)}
         onMouseEnter={() => setShowDetails((prev) => !prev)}
-        className="cursor-pointer"
-      >
+        className="cursor-pointer">
         {formattedCost}
       </div>
       {costDetails && showDetails && (
@@ -370,8 +369,13 @@ const InsightSubTable = (props: {
     return acc;
   }, new Map<number, Step>());
 
-  const { currentSelectedIndex, setCurrentSelectedIndex, currentHoverIndex, setCurrentHoverIndex } =
-    useContext(AppContext);
+  const {
+    currentSelectedIndex,
+    setCurrentSelectedIndex,
+    currentHoverIndex,
+    currentHoverAction,
+    setCurrentHoverIndex
+  } = useContext(AppContext);
 
   return (
     <>
@@ -381,8 +385,7 @@ const InsightSubTable = (props: {
           if (canExpand) {
             setIsExpanded(!isExpanded);
           }
-        }}
-      >
+        }}>
         <TableCell>
           <div className="flex flex-row gap-1 items-center">
             <Chip label={props.insight.category} chipType={props.insight.category}></Chip>
@@ -408,7 +411,11 @@ const InsightSubTable = (props: {
             const span = spansBySpanID.get(attribute.span_id || '');
             const step = stepsByStepID.get(span?.begin_entry.action_sequence_id || 0);
             const insightCasted = props.insight as InsightWithIndividualValues;
-            const isHovered = currentHoverIndex === span?.begin_entry.action_sequence_id;
+            const isHovered =
+              (currentHoverIndex?.sequenceId === span?.begin_entry.action_sequence_id &&
+                currentHoverIndex?.appId === props.appID &&
+                currentHoverIndex?.partitionKey === props.partitionKey) ||
+              currentHoverAction === step?.step_start_log.action;
             const isCurrentSelected = currentSelectedIndex === span?.begin_entry.action_sequence_id;
             return (
               <TableRow
@@ -438,8 +445,7 @@ const InsightSubTable = (props: {
                         }
                       : undefined
                   );
-                }}
-              >
+                }}>
                 <TableCell></TableCell>
                 <TableCell className="">
                   {step && (
@@ -511,15 +517,13 @@ export const InsightsView = (props: {
           variety of attributes, including those populated by{' '}
           <a
             className="text-dwlightblue"
-            href={'https://www.traceloop.com/docs/openllmetry/tracing/without-sdk'}
-          >
+            href={'https://www.traceloop.com/docs/openllmetry/tracing/without-sdk'}>
             opentelemetry instrumentation.
           </a>{' '}
           -- E.G. LLM call data. To instrument, and start collecting, see{' '}
           <a
             className="text-dwlightblue"
-            href={'https://burr.apache.org/concepts/additional-visibility/#quickstart'}
-          >
+            href={'https://burr.apache.org/concepts/additional-visibility/#quickstart'}>
             see docs.
           </a>
         </h2>

diff --git a/telemetry/ui/src/components/routes/app/StepList.tsx b/telemetry/ui/src/components/routes/app/StepList.tsx
@@ -177,8 +177,7 @@ const CommonTableRow = (props: {
           });
         }
         e.stopPropagation();
-      }}
-    >
+      }}>
       {props.children}
     </TableRow>
   );
@@ -215,14 +214,16 @@ const ActionTableRow = (props: {
     setTab,
     currentHoverIndex,
     setCurrentHoverIndex,
+    currentHoverAction,
     currentSelectedIndex,
     setCurrentSelectedIndex
   } = useContext(AppContext);
 
   const isHovered =
-    currentHoverIndex?.sequenceId === sequenceID &&
-    currentHoverIndex?.appId === props.appID &&
-    currentHoverIndex?.partitionKey === props.partitionKey;
+    (currentHoverIndex?.sequenceId === sequenceID &&
+      currentHoverIndex?.appId === props.appID &&
+      currentHoverIndex?.partitionKey === props.partitionKey) ||
+    currentHoverAction === props.step.step_start_log.action;
   // const spanCount = props.step.spans.length;
   const childCount = props.links.length;
   const shouldBeHighlighted =
@@ -253,8 +254,7 @@ const ActionTableRow = (props: {
       setCurrentHoverIndex={setCurrentHoverIndex}
       setCurrentSelectedIndex={setCurrentSelectedIndex}
       appID={props.appID}
-      partitionKey={props.partitionKey}
-    >
+      partitionKey={props.partitionKey}>
       <TableCell className="text-gray-500 w-12 max-w-12 min-w-12">
         <div className="flex flex-row items-center">
           <RecursionDepthPadding depth={props.depth}>
@@ -272,8 +272,7 @@ const ActionTableRow = (props: {
             />
           </div>
           <div
-            className={`${props.minimized ? 'w-32' : 'w-72 max-w-72'} flex flex-row justify-start gap-1 items-center`}
-          >
+            className={`${props.minimized ? 'w-32' : 'w-72 max-w-72'} flex flex-row justify-start gap-1 items-center`}>
             <Chip
               label={isStreaming ? 'stream' : 'action'}
               chipType={isStreaming ? 'stream' : 'action'}
@@ -478,13 +477,19 @@ const LinkSubTable = (props: {
   latestTimeSeen: Date;
   depth: number;
 }) => {
-  const { currentHoverIndex, setCurrentHoverIndex, currentSelectedIndex, setCurrentSelectedIndex } =
-    useContext(AppContext);
+  const {
+    currentHoverIndex,
+    setCurrentHoverIndex,
+    currentHoverAction,
+    currentSelectedIndex,
+    setCurrentSelectedIndex
+  } = useContext(AppContext);
   const sequenceID = props.step.step_start_log.sequence_id;
   const isHovered =
-    currentHoverIndex?.appId === props.appID &&
-    currentHoverIndex?.partitionKey === props.partitionKey &&
-    currentHoverIndex?.sequenceId === sequenceID;
+    (currentHoverIndex?.appId === props.appID &&
+      currentHoverIndex?.partitionKey === props.partitionKey &&
+      currentHoverIndex?.sequenceId === sequenceID) ||
+    currentHoverAction === props.step.step_start_log.action;
   const shouldBeHighlighted =
     currentSelectedIndex !== undefined &&
     currentSelectedIndex.appId === props.appID &&
@@ -523,26 +528,23 @@ const LinkSubTable = (props: {
               currentSelectedIndex={currentSelectedIndex}
               step={props.step}
               setCurrentHoverIndex={setCurrentHoverIndex}
-              setCurrentSelectedIndex={setCurrentSelectedIndex}
-            >
+              setCurrentSelectedIndex={setCurrentSelectedIndex}>
               <TableCell colSpan={1} className="">
                 <RecursionDepthPadding depth={props.depth}>
                   <Icon className={`h-5 w-5 ${iconColor} -ml-1`} />
                 </RecursionDepthPadding>
               </TableCell>
               <TableCell
                 colSpan={1}
-                className={`${normalText} w-48 min-w-48 max-w-48 truncate pl-9`}
-              >
+                className={`${normalText} w-48 min-w-48 max-w-48 truncate pl-9`}>
                 <div
                   className="z-50 truncate"
                   onClick={(e) => {
                     navigate(
                       `/project/${props.projectId}/${subApp.child.partition_key || 'null'}/${subApp.child.app_id}`
                     );
                     e.stopPropagation();
-                  }}
-                >
+                  }}>
                   <span className="hover:underline">{subApp.child.app_id}</span>
                 </div>
               </TableCell>
@@ -669,11 +671,9 @@ const StepSubTableRow = (props: {
       currentSelectedIndex={currentSelectedIndex}
       step={props.step}
       setCurrentHoverIndex={setCurrentHoverIndex}
-      setCurrentSelectedIndex={setCurrentSelectedIndex}
-    >
+      setCurrentSelectedIndex={setCurrentSelectedIndex}>
       <TableCell
-        className={` ${lightText} w-10 min-w-10 ${props.displaySpanID ? '' : 'text-opacity-0'}`}
-      >
+        className={` ${lightText} w-10 min-w-10 ${props.displaySpanID ? '' : 'text-opacity-0'}`}>
         <RecursionDepthPadding depth={props.depth}>
           <span>{spanIDUniqueToAction}</span>
         </RecursionDepthPadding>
@@ -682,14 +682,12 @@ const StepSubTableRow = (props: {
         <>
           <TableCell
             onClick={onClick}
-            className={`${normalText} ${props.minimized ? 'w-32 min-w-32' : 'w-72 max-w-72'} flex flex-col`}
-          >
+            className={`${normalText} ${props.minimized ? 'w-32 min-w-32' : 'w-72 max-w-72'} flex flex-col`}>
             <div className="flex flex-row gap-1 items-center">
               {[...Array(depth).keys()].map((i) => (
                 <Icon
                   key={i}
-                  className={`${i === depth - 1 ? 'opacity-0' : 'opacity-0'} text-lg text-gray-600 w-4 flex-shrink-0`}
-                ></Icon>
+                  className={`${i === depth - 1 ? 'opacity-0' : 'opacity-0'} text-lg text-gray-600 w-4 flex-shrink-0`}></Icon>
               ))}
               <Chip
                 label={
@@ -745,8 +743,7 @@ const StepSubTableRow = (props: {
                 className="flex justify-start overflow-hidden pl-20"
                 onClick={(e) => {
                   e.stopPropagation();
-                }}
-              >
+                }}>
                 <RenderedField
                   value={(props.model as AttributeModel).value}
                   defaultExpanded={true} // no real need for default expanded
@@ -781,7 +778,7 @@ const StepSubTable = (props: {
   displayAnnotations: boolean;
   depth: number;
 }) => {
-  const { currentHoverIndex, currentSelectedIndex } = useContext(AppContext);
+  const { currentHoverIndex, currentHoverAction, currentSelectedIndex } = useContext(AppContext);
   const attributesBySpanID = props.attributes.reduce((acc, attr) => {
     const existing = acc.get(attr.span_id) || [];
     existing.push(attr);
@@ -797,9 +794,10 @@ const StepSubTable = (props: {
   // }, new Map<string | null, Array<InitializeStreamModel | FirstItemStreamModel | EndStreamModel>>());
   const sequenceID = props.step.step_start_log.sequence_id;
   const isHovered =
-    currentHoverIndex?.sequenceId === sequenceID &&
-    currentHoverIndex?.appId === props.appID &&
-    currentHoverIndex?.partitionKey === props.partitionKey;
+    (currentHoverIndex?.sequenceId === sequenceID &&
+      currentHoverIndex?.appId === props.appID &&
+      currentHoverIndex?.partitionKey === props.partitionKey) ||
+    currentHoverAction === props.step.step_start_log.action;
   // const spanCount = props.step.spans.length;
   const shouldBeHighlighted =
     currentSelectedIndex !== undefined &&
@@ -1142,13 +1140,11 @@ const WaterfallPiece: React.FC<{
                   onClick={(e) => {
                     props.setSubActionExpanded?.(!props.isSubActionExpanded);
                     e.stopPropagation();
-                  }}
-                >
+                  }}>
                   <div
                     className={`${props.isHighlighted ? 'bg-transparent' : props.bgColor} opacity-50 h-1 px-0 rounded-sm flex flex-row justify-center items-center`}
                     onMouseEnter={() => setIsHovered(true)}
-                    onMouseLeave={() => setIsHovered(false)}
-                  >
+                    onMouseLeave={() => setIsHovered(false)}>
                     <SubActionIcon
                       className={`hover:scale-125 transform-none cursor-pointer h-4 w-4 rounded-full text-gray-700 ${props.isHighlighted ? props.bgColor : 'bg-white'}`}
                     />
@@ -1165,8 +1161,7 @@ const WaterfallPiece: React.FC<{
               style={{
                 left: `calc(${leftPositionPercentage}% - 20px)`,
                 width: `calc(${widthPercentage}% + 40px)` // 20px buffer on each side
-              }}
-            ></div>
+              }}></div>
 
             {
               <div
@@ -1180,8 +1175,7 @@ const WaterfallPiece: React.FC<{
                   left: isCloseToEnd
                     ? `auto`
                     : `calc(${leftPositionPercentage}% + ${widthPercentage}%)`
-                }}
-              >
+                }}>
                 {hoverItem}
               </div>
             }
@@ -1838,8 +1832,7 @@ const ParentLink = (props: {
       <TableCell colSpan={2} className="text-gray-500">
         <div className="flex flex-row gap-1 items-center pl-5">
           <Link
-            to={`/project/${props.projectId}/${props.parentPointer.partition_key}/${props.parentPointer.app_id}`}
-          >
+            to={`/project/${props.projectId}/${props.parentPointer.partition_key}/${props.parentPointer.app_id}`}>
             <span className="hover:underline">{props.parentPointer.app_id}</span>
           </Link>
           <span>@</span>