Reduce load time of trace page by deferring critical path tooltip (#2718)

~I am opening this PR without an issue, I understand that is might not
be an acceptable change, feel free to close this PR if you don't agree
with this change.~

Improve performance (~300ms for 500 spans) by loading tooltip only on
hover

* Related issue in antd repo
ant-design/ant-design#48468
* My other changes which improve performance related to critical path
#2716
* Towards #645, to
improve general performance with large amount of spans

## Before


![criticalPathTooltip](https://github.com/user-attachments/assets/908b6279-a3b8-4446-a08b-386220e22141)


## After


![criticalPathNoTooltip](https://github.com/user-attachments/assets/e7eb14e2-6acd-4f6d-94cb-ce1d82515e02)

---------

Signed-off-by: Damian Maslanka <damian.maslanka5@gmail.com>

Author: DamianMaslanka5

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.test.js

@@ -106,4 +106,27 @@ describe('<SpanBar>', () => {
     const wrapper = render(<SpanBar {...newProps} />);
     expect(wrapper.getAllByTestId('SpanBar--criticalPath').length).toEqual(1);
   });
+
+  it('Critical Path tooltip is visible on hover', () => {
+    const newProps = {
+      ...props,
+      criticalPath: [
+        {
+          spanId: 'Test-SpanId',
+          section_start: 10,
+          section_end: 20,
+        },
+      ],
+      getViewedBounds: () => ({ start: 0.1, end: 0.5 }),
+    };
+    render(<SpanBar {...newProps} />);
+
+    const criticalPathEl = screen.getByTestId('SpanBar--criticalPath');
+    fireEvent.mouseEnter(criticalPathEl);
+
+    const criticalPathTooltip = screen.getByRole('tooltip');
+    expect(criticalPathTooltip.textContent).toMatch(
+      'A segment on the critical path of the overall trace/request/workflow.'
+    );
+  });
 });

packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanBar.tsx

@@ -54,6 +54,44 @@ function toPercentInDecimal(value: number) {
   return `${value * 100}%`;
 }
 
+function SpanBarCriticalPath(props: { criticalPathViewStart: number; criticalPathViewEnd: number }) {
+  const [shouldLoadTooltip, setShouldLoadTooltip] = useState(false);
+
+  const criticalPath = (
+    <div
+      data-testid="SpanBar--criticalPath"
+      className="SpanBar--criticalPath"
+      onMouseEnter={() => setShouldLoadTooltip(true)}
+      style={{
+        background: 'black',
+        left: toPercentInDecimal(props.criticalPathViewStart),
+        width: toPercentInDecimal(props.criticalPathViewEnd - props.criticalPathViewStart),
+      }}
+    />
+  );
+
+  // Load tooltip only when hovering over critical path segment
+  // to reduce initial load time of trace page by ~300ms for 500 spans
+  if (shouldLoadTooltip) {
+    return (
+      <Tooltip
+        placement="top"
+        // defaultOpen is needed to show the tooltip when shouldLoadTooltip changes to true
+        defaultOpen
+        title={
+          <div>
+            A segment on the <em>critical path</em> of the overall trace/request/workflow.
+          </div>
+        }
+      >
+        {criticalPath}
+      </Tooltip>
+    );
+  }
+
+  return criticalPath;
+}
+
 function SpanBar(props: TCommonProps) {
   const {
     criticalPath,
@@ -145,26 +183,13 @@ function SpanBar(props: TCommonProps) {
           const criticalPathViewStart = critcalPathViewBounds.start;
           const criticalPathViewEnd = critcalPathViewBounds.end;
           const key = `${each.spanId}-${index}`;
+
           return (
-            <Tooltip
-              placement="top"
-              title={
-                <div>
-                  A segment on the <em>critical path</em> of the overall trace/request/workflow.
-                </div>
-              }
-            >
-              <div
-                key={key}
-                data-testid="SpanBar--criticalPath"
-                className="SpanBar--criticalPath"
-                style={{
-                  background: 'black',
-                  left: toPercentInDecimal(criticalPathViewStart),
-                  width: toPercentInDecimal(criticalPathViewEnd - criticalPathViewStart),
-                }}
-              />
-            </Tooltip>
+            <SpanBarCriticalPath
+              criticalPathViewStart={criticalPathViewStart}
+              criticalPathViewEnd={criticalPathViewEnd}
+              key={key}
+            />
           );
         })}
     </div>