[Bug fix] Trace analytics scroll bar reset (opensearch-project#1917)

* Bugfix: Remember scroll bar position on opening flyout.

Signed-off-by: Adam Tackett <[email protected]>

* Memorize the gnatt chart, fixes flicker

Signed-off-by: Adam Tackett <[email protected]>

* useCallback added to click actions

Signed-off-by: Adam Tackett <[email protected]>

---------

Signed-off-by: Adam Tackett <[email protected]>
Co-authored-by: Adam Tackett <[email protected]>

Author: TackAdam

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, 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';
@@ -187,15 +187,18 @@ export function SpanDetailPanel(props: {
 
   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 @@ export function SpanDetailPanel(props: {
     ));
   }, [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 @@ export function SpanDetailPanel(props: {
     [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 @@ export function SpanDetailPanel(props: {
         )}
         <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 && (