[Bug fix] Trace analytics scroll bar reset

public/components/trace_analytics/components/traces/span_detail_panel.tsx

@@ -15,7 +15,7 @@
 } from '@elastic/eui';
 import debounce from 'lodash/debounce';
 import isEmpty from 'lodash/isEmpty';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { HttpSetup } from '../../../../../../../src/core/public';
 import { Plt } from '../../../visualizations/plotly/plot';
 import { TraceAnalyticsMode } from '../../home';
@@ -27,22 +27,22 @@
 export function SpanDetailPanel(props: {
   http: HttpSetup;
   traceId: string;
   colorMap: any;
   mode: TraceAnalyticsMode;
   dataSourceMDSId: string;
   page?: string;
   openSpanFlyout?: any;
   data?: { gantt: any[]; table: any[]; ganttMaxX: number };
   setData?: (data: { gantt: any[]; table: any[]; ganttMaxX: number }) => void;
 }) {
   const { mode } = props;
   const storedFilters = sessionStorage.getItem('TraceAnalyticsSpanFilters');
   const fromApp = props.page === 'app';
   const [spanFilters, setSpanFilters] = useState<Array<{ field: string; value: any }>>(
     storedFilters ? JSON.parse(storedFilters) : []
   );
   const [DSL, setDSL] = useState<any>({});
   let data: { gantt: any[]; table: any[]; ganttMaxX: number };
   let setData: (data: { gantt: any[]; table: any[]; ganttMaxX: number }) => void;
   const [localData, localSetData] = useState<{ gantt: any[]; table: any[]; ganttMaxX: number }>({
     gantt: [],
@@ -187,15 +187,18 @@
 
   const [currentSpan, setCurrentSpan] = useState('');
 
-  const onClick = (event: any) => {
-    if (!event?.points) return;
-    const point = event.points[0];
-    if (fromApp) {
-      props.openSpanFlyout(point.data.spanId);
-    } else {
-      setCurrentSpan(point.data.spanId);
-    }
-  };
+  const onClick = useCallback(
+    (event: any) => {
+      if (!event?.points) return;
+      const point = event.points[0];
+      if (fromApp) {
+        props.openSpanFlyout(point.data.spanId);
+      } else {
+        setCurrentSpan(point.data.spanId);
+      }
+    },
+    [props.openSpanFlyout, setCurrentSpan, fromApp]
+  );
 
   const renderFilters = useMemo(() => {
     return spanFilters.map(({ field, value }) => (
@@ -212,15 +215,15 @@
     ));
   }, [spanFilters]);
 
-  const onHover = () => {
+  const onHover = useCallback(() => {
     const dragLayer = document.getElementsByClassName('nsewdrag')?.[0];
     dragLayer.style.cursor = 'pointer';
-  };
+  }, []);
 
-  const onUnhover = () => {
+  const onUnhover = useCallback(() => {
     const dragLayer = document.getElementsByClassName('nsewdrag')?.[0];
     dragLayer.style.cursor = '';
-  };
+  }, []);
 
   const toggleOptions = [
     {
@@ -254,6 +257,19 @@
     [DSL, setCurrentSpan]
   );
 
+  const ganttChart = useMemo(
+    () => (
+      <Plt
+        data={data.gantt}
+        layout={layout}
+        onClickHandler={onClick}
+        onHoverHandler={onHover}
+        onUnhoverHandler={onUnhover}
+      />
+    ),
+    [data.gantt, layout, onClick, onHover, onUnhover]
+  );
+
   return (
     <>
       <EuiPanel data-test-subj="span-gantt-chart-panel">
@@ -280,17 +296,7 @@
         )}
         <EuiHorizontalRule margin="m" />
         <div style={{ overflowY: 'auto', maxHeight: 500 }}>
-          {toggleIdSelected === 'timeline' ? (
-            <Plt
-              data={data.gantt}
-              layout={layout}
-              onClickHandler={onClick}
-              onHoverHandler={onHover}
-              onUnhoverHandler={onUnhover}
-            />
-          ) : (
-            spanDetailTable
-          )}
+          {toggleIdSelected === 'timeline' ? ganttChart : spanDetailTable}
         </div>
       </EuiPanel>
       {!!currentSpan && (