From e8601a656c8686bad1e90ba5494af093beb70860 Mon Sep 17 00:00:00 2001
From: Kyrylo Shmidt <kshmidt@digma.ai>
Date: Fri, 7 Jul 2023 19:27:00 +0200
Subject: [PATCH] Fix chart ref handling

---
 .../RecentActivity/LiveView/index.tsx         | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/RecentActivity/LiveView/index.tsx b/src/components/RecentActivity/LiveView/index.tsx
index 5d0ef0b57..959c55e6e 100644
--- a/src/components/RecentActivity/LiveView/index.tsx
+++ b/src/components/RecentActivity/LiveView/index.tsx
@@ -1,5 +1,12 @@
 import { format } from "date-fns";
-import { UIEvent, useEffect, useMemo, useRef, useState } from "react";
+import {
+  UIEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import useDimensions from "react-cool-dimensions";
 import useScrollbarSize from "react-scrollbar-size";
 
@@ -181,7 +188,7 @@ export const LiveView = (props: LiveViewProps) => {
   const previousWidth = usePrevious(width);
   const [containerInitialWidth, setContainerInitialWidth] =
     useState<number>(width);
-  const chartContainerRef = useRef<HTMLDivElement>(null);
+  const chartContainerRef = useRef<HTMLDivElement | null>(null);
   const [chartWidth, setChartWidth] = useState<number>(width);
   const previousChartWidth = usePrevious(chartWidth);
   const [isZoomed, setIsZoomed] = useState(false);
@@ -190,10 +197,6 @@ export const LiveView = (props: LiveViewProps) => {
   const [scrollPercentagePosition, setScrollPercentagePosition] = useState(1);
   const scrollbar = useScrollbarSize();
 
-  useEffect(() => {
-    observe(chartContainerRef.current);
-  }, [observe, chartContainerRef.current]);
-
   useEffect(() => {
     if (previousWidth !== width) {
       setContainerInitialWidth(width);
@@ -212,6 +215,14 @@ export const LiveView = (props: LiveViewProps) => {
     }
   }, [previousChartWidth, chartWidth, scrollPercentagePosition]);
 
+  const getChartContainerRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      observe(el);
+      chartContainerRef.current = el;
+    },
+    [observe]
+  );
+
   const persistScrollPosition = () => {
     const el = chartContainerRef.current;
     if (el) {
@@ -477,7 +488,10 @@ export const LiveView = (props: LiveViewProps) => {
                 </ComposedChart>
               </ResponsiveContainer>
             </s.AxisChartContainer>
-            <s.ChartContainer ref={chartContainerRef} onScroll={handleScroll}>
+            <s.ChartContainer
+              ref={getChartContainerRef}
+              onScroll={handleScroll}
+            >
               <ResponsiveContainer
                 width={isZoomed ? chartWidth : "100%"}
                 height={"100%"}