From 74c7040dfebfdf919eb9196fdf3493dfb1d39272 Mon Sep 17 00:00:00 2001
From: Adam Tackett <tackadam@amazon.com>
Date: Wed, 19 Jun 2024 15:35:23 -0700
Subject: [PATCH] Memorize the gnatt chart, fixes flicker

Signed-off-by: Adam Tackett <tackadam@amazon.com>
---
 .../components/traces/span_detail_panel.tsx   | 42 +++++++------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/public/components/trace_analytics/components/traces/span_detail_panel.tsx b/public/components/trace_analytics/components/traces/span_detail_panel.tsx
index e56efa7bfa..7480431e00 100644
--- a/public/components/trace_analytics/components/traces/span_detail_panel.tsx
+++ b/public/components/trace_analytics/components/traces/span_detail_panel.tsx
@@ -15,7 +15,7 @@ import {
 } from '@elastic/eui';
 import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { HttpSetup } from '../../../../../../../src/core/public';
 import { Plt } from '../../../visualizations/plotly/plot';
 import { TraceAnalyticsMode } from '../../home';
@@ -187,19 +187,7 @@ export function SpanDetailPanel(props: {
 
   const [currentSpan, setCurrentSpan] = useState('');
 
-  const spanContainerRef = useRef<HTMLDivElement | null>(null);
-  const prevScrollPositionRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    if (spanContainerRef.current) {
-      setTimeout(() => {
-        spanContainerRef.current.scrollTop = prevScrollPositionRef.current || 0;
-      }, 0);
-    }
-  }, [currentSpan]);
-
   const onClick = (event: any) => {
-    const currentScrollPosition = spanContainerRef.current?.scrollTop || 0;
     if (!event?.points) return;
     const point = event.points[0];
     if (fromApp) {
@@ -207,7 +195,6 @@ export function SpanDetailPanel(props: {
     } else {
       setCurrentSpan(point.data.spanId);
     }
-    prevScrollPositionRef.current = currentScrollPosition;
   };
 
   const renderFilters = useMemo(() => {
@@ -267,6 +254,19 @@ export function SpanDetailPanel(props: {
     [DSL, setCurrentSpan]
   );
 
+  const ganttChart = useMemo(
+    () => (
+      <Plt
+        data={data.gantt}
+        layout={layout}
+        onClickHandler={onClick}
+        onHoverHandler={onHover}
+        onUnhoverHandler={onUnhover}
+      />
+    ),
+    [data.gantt, layout]
+  );
+
   return (
     <>
       <EuiPanel data-test-subj="span-gantt-chart-panel">
@@ -292,18 +292,8 @@ export function SpanDetailPanel(props: {
           </>
         )}
         <EuiHorizontalRule margin="m" />
-        <div style={{ overflowY: 'auto', maxHeight: 500 }} ref={spanContainerRef}>
-          {toggleIdSelected === 'timeline' ? (
-            <Plt
-              data={data.gantt}
-              layout={layout}
-              onClickHandler={onClick}
-              onHoverHandler={onHover}
-              onUnhoverHandler={onUnhover}
-            />
-          ) : (
-            spanDetailTable
-          )}
+        <div style={{ overflowY: 'auto', maxHeight: 500 }}>
+          {toggleIdSelected === 'timeline' ? ganttChart : spanDetailTable}
         </div>
       </EuiPanel>
       {!!currentSpan && (