Skip to content

fix(webapp): synchronize run page highlight when hovering spans #2998

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mpcgrid wants to merge 6 commits into
base: main
Choose a base branch
from
+78 −17
Open

fix(webapp): synchronize run page highlight when hovering spans #2998

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
885e84b
Fix for run page highlight sync between step row and timeline
mpcgrid Dec 11, 2025
f2112da
deactivated scroll while scrolling in order to hide the missynchroniz…
mpcgrid Dec 15, 2025
b09a80f
Merge branch 'main' into fix/tri-6744-in-run-page-synchronize-highlig…
mpcgrid Feb 4, 2026
4f3575a
small review fixes
mpcgrid Feb 4, 2026
01d654c
Merge branch 'main' into fix/tri-6744-in-run-page-synchronize-highlig…
mpcgrid Feb 6, 2026
8b421f3
Merge branch 'main' into fix/tri-6744-in-run-page-synchronize-highlig…
mpcgrid Feb 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 78 additions & 17 deletions ..._app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.runs.$runParam/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -694,6 +694,20 @@ function TasksTreeView({
const [showDurations, setShowDurations] = useState(true);
const [showQueueTime, setShowQueueTime] = useState(false);
const [scale, setScale] = useState(0);
const [hoveredNodeId, setHoveredNodeId] = useState<string | null>(null);
const [isScrolling, setIsScrolling] = useState(false);
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const pendingHoverIdRef = useRef<string | null>(null);

useEffect(() => {
return () => {
if (scrollTimeoutRef.current) {
Comment on lines +697 to +704
Copy link
Member

@matt-aitken matt-aitken Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am pretty sure this is going to cause a re-render of the entire tree every time a hover changes. Which will crush the rendering performance in the browser for complex trees.

We have to very careful to avoid the inputs to the tree view changing rapidly.

clearTimeout(scrollTimeoutRef.current);
scrollTimeoutRef.current = null;
}
};
}, []);

const parentRef = useRef<HTMLDivElement>(null);
const treeScrollRef = useRef<HTMLDivElement>(null);
const timelineScrollRef = useRef<HTMLDivElement>(null);
Expand All @@ -705,6 +719,24 @@ function TasksTreeView({
const displayEvents = events;
const queuedTime = showQueueTime ? undefined : queuedDuration;

const handleHoverChange = useCallback((nodeId: string | null) => {
pendingHoverIdRef.current = nodeId;
if (!isScrolling) {
setHoveredNodeId(nodeId);
}
}, [isScrolling]);
Comment on lines +722 to +727
Copy link

@devin-ai-integration devin-ai-integration bot Feb 16, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚩 handleHoverChange recreated on every isScrolling toggle

handleHoverChange has [isScrolling] as its useCallback dependency (route.tsx:727). Every time scrolling starts or stops, isScrolling toggles, creating a new function reference. This new reference propagates to TimelineView via the handleHoverChange prop, causing TimelineView to re-render (and all its renderNode callbacks to receive the new function). For traces with many spans, this means two extra full re-renders per scroll gesture (one when isScrolling flips to true, one when it flips back). Consider using a ref for isScrolling instead of state to avoid this, since the scroll-suppression logic doesn't actually need to trigger re-renders — only the timeout callback's setHoveredNodeId(pendingHoverIdRef.current) needs to cause a render.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.


const handleScroll = useCallback((scrollTop: number) => {
setIsScrolling(true);
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
scrollTimeoutRef.current = setTimeout(() => {
setIsScrolling(false);
setHoveredNodeId(pendingHoverIdRef.current);
}, 150);
}, []);

const {
nodes,
getTreeProps,
Expand Down Expand Up @@ -819,19 +851,27 @@ function TasksTreeView({
getNodeProps={getNodeProps}
getTreeProps={getTreeProps}
parentClassName="pl-3"
renderNode={({ node, state, index }) => (
<>
<div
className={cn(
"flex h-8 cursor-pointer items-center overflow-hidden rounded-l-sm pr-2",
state.selected
? "bg-grid-dimmed hover:bg-grid-bright"
: "bg-transparent hover:bg-grid-dimmed"
)}
onClick={() => {
selectNode(node.id);
}}
>
renderNode={({ node, state, index }) => {
const isHovered = hoveredNodeId === node.id;
return (
<>
<div
className={cn(
"flex h-8 cursor-pointer items-center overflow-hidden rounded-l-sm pr-2",
state.selected
? isHovered
? "bg-grid-bright"
: "bg-grid-dimmed"
: isHovered
? "bg-grid-dimmed"
: "bg-transparent"
)}
onClick={() => {
selectNode(node.id);
}}
onMouseEnter={() => handleHoverChange(node.id)}
onMouseLeave={() => handleHoverChange(null)}
>
<div className="flex h-8 items-center">
{Array.from({ length: node.level }).map((_, index) => (
<TaskLine
Expand Down Expand Up @@ -887,8 +927,10 @@ function TasksTreeView({
</div>
</div>
</>
)}
);
}}
onScroll={(scrollTop) => {
handleScroll(scrollTop);
//sync the scroll to the tree
if (timelineScrollRef.current) {
timelineScrollRef.current.scrollTop = scrollTop;
Expand Down Expand Up @@ -920,6 +962,10 @@ function TasksTreeView({
treeScrollRef={treeScrollRef}
virtualizer={virtualizer}
toggleNodeSelection={toggleNodeSelection}
hoveredNodeId={hoveredNodeId}
setHoveredNodeId={setHoveredNodeId}
handleHoverChange={handleHoverChange}
handleScroll={handleScroll}
/>
</ResizablePanel>
</ResizablePanelGroup>
Expand Down Expand Up @@ -985,6 +1031,10 @@ type TimelineViewProps = Pick<
toggleNodeSelection: UseTreeStateOutput["toggleNodeSelection"];
showDurations: boolean;
treeScrollRef: React.RefObject<HTMLDivElement>;
hoveredNodeId: string | null;
setHoveredNodeId: (nodeId: string | null) => void;
handleHoverChange: (nodeId: string | null) => void;
handleScroll: (scrollTop: number) => void;
};

const tickCount = 5;
Expand All @@ -1004,6 +1054,10 @@ function TimelineView({
showDurations,
treeScrollRef,
queuedDuration,
hoveredNodeId,
setHoveredNodeId,
handleHoverChange,
handleScroll,
}: TimelineViewProps) {
const timelineContainerRef = useRef<HTMLDivElement>(null);
const initialTimelineDimensions = useInitialDimensions(timelineContainerRef);
Expand Down Expand Up @@ -1149,20 +1203,26 @@ function TimelineView({
parentClassName="h-full scrollbar-hide"
renderNode={({ node, state, index, virtualizer, virtualItem }) => {
const isTopSpan = node.id === events[0]?.id;
const isHovered = hoveredNodeId === node.id;

return (
<Timeline.Row
key={index}
className={cn(
"group flex h-8 items-center",
state.selected
? "bg-grid-dimmed hover:bg-grid-bright"
: "bg-transparent hover:bg-grid-dimmed"
? isHovered
? "bg-grid-bright"
: "bg-grid-dimmed"
: isHovered
? "bg-grid-dimmed"
: "bg-transparent"
)}
// onMouseOver={() => console.log(`hover ${index}`)}
onClick={(e) => {
toggleNodeSelection(node.id);
}}
onMouseEnter={() => handleHoverChange(node.id)}
onMouseLeave={() => handleHoverChange(null)}
>
{node.data.level === "TRACE" ? (
<>
Expand Down Expand Up @@ -1273,6 +1333,7 @@ function TimelineView({
);
}}
onScroll={(scrollTop) => {
handleScroll(scrollTop);
//sync the scroll to the tree
if (treeScrollRef.current) {
treeScrollRef.current.scrollTop = scrollTop;
Expand Down