From f71f104feeae967949687e332bc6a41f354ba1c2 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Thu, 27 Apr 2023 14:22:19 +0200
Subject: [PATCH] fix(player): fix virtualization

---
 .../ReplayPlayer/EventsBlock/EventsBlock.tsx  |  2 +-
 .../Session_/EventsBlock/EventsBlock.tsx      |  2 +-
 .../DevTools/ConsolePanel/ConsolePanel.tsx    | 26 +++++++++----------
 .../shared/DevTools/ConsoleRow/ConsoleRow.tsx |  5 +++-
 .../StackEventPanel/StackEventPanel.tsx       |  2 +-
 frontend/app/hooks/useCellMeasurerCache.ts    |  5 +---
 6 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/EventsBlock.tsx b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/EventsBlock.tsx
index 2b59dd18f..0f6aea233 100644
--- a/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/EventsBlock.tsx
+++ b/frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/EventsBlock.tsx
@@ -29,7 +29,7 @@ interface IProps {
 function EventsBlock(props: IProps) {
   const [mouseOver, setMouseOver] = React.useState(true)
   const scroller = React.useRef<List>(null)
-  const cache = useCellMeasurerCache(undefined, {
+  const cache = useCellMeasurerCache( {
     fixedWidth: true,
     defaultHeight: 300
   });
diff --git a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
index 5ce52f3aa..5065e77f1 100644
--- a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
+++ b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
@@ -29,7 +29,7 @@ interface IProps {
 function EventsBlock(props: IProps) {
   const [mouseOver, setMouseOver] = React.useState(true);
   const scroller = React.useRef<List>(null);
-  const cache = useCellMeasurerCache(undefined, {
+  const cache = useCellMeasurerCache( {
     fixedWidth: true,
     defaultHeight: 300,
   });
diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
index 8f7d6db29..f03e0883e 100644
--- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
+++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
@@ -112,7 +112,7 @@ function ConsolePanel({ isLive }: { isLive: boolean }) {
     }
   }, [activeIndex]);
 
-  const cache = useCellMeasurerCache(filteredList)
+  const cache = useCellMeasurerCache()
 
   const showDetails = (log: any) => {
     setIsDetailsModalActive(true);
@@ -135,19 +135,17 @@ function ConsolePanel({ isLive }: { isLive: boolean }) {
     return (
         // @ts-ignore
         <CellMeasurer cache={cache} columnIndex={0} key={key} rowIndex={index} parent={parent}>
-          {() => (
-            <ConsoleRow
-              style={style}
-              log={item}
-              jump={jump}
-              iconProps={getIconProps(item.level)}
-              renderWithNL={renderWithNL}
-              onClick={() => showDetails(item)}
-              recalcHeight={() => {
-                (_list as any).current.recomputeRowHeights(index);
-                cache.clear(index, 0)
-              }}
-            />
+          {({ measure, registerChild }) => (
+            <div ref={registerChild} style={style}>
+              <ConsoleRow
+                log={item}
+                jump={jump}
+                iconProps={getIconProps(item.level)}
+                renderWithNL={renderWithNL}
+                onClick={() => showDetails(item)}
+                recalcHeight={measure}
+              />
+            </div>
           )}
         </CellMeasurer>
     )
diff --git a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
index b7f1af261..aeab0e1bb 100644
--- a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
+++ b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
@@ -19,9 +19,12 @@ function ConsoleRow(props: Props) {
   const canExpand = lines.length > 1;
   const clickable = canExpand || !!log.errorId;
 
+  React.useEffect(() => {
+    recalcHeight?.();
+  }, [expanded])
+
   const toggleExpand = () => {
     setExpanded(!expanded);
-    setTimeout(() => recalcHeight?.(), 0);
   };
   return (
     <div
diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
index bfa06f7bb..109e29c97 100644
--- a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
+++ b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
@@ -58,7 +58,7 @@ function StackEventPanel() {
     timeoutStartAutoscroll()
   }
 
-  const cache = useCellMeasurerCache(filteredList)
+  const cache = useCellMeasurerCache()
 
   const showDetails = (item: any) => {
     setIsDetailsModalActive(true)
diff --git a/frontend/app/hooks/useCellMeasurerCache.ts b/frontend/app/hooks/useCellMeasurerCache.ts
index 692f2629f..cd38db896 100644
--- a/frontend/app/hooks/useCellMeasurerCache.ts
+++ b/frontend/app/hooks/useCellMeasurerCache.ts
@@ -1,12 +1,9 @@
 import { useMemo } from 'react'
 import { CellMeasurerCache, CellMeasurerCacheParams } from 'react-virtualized';
-import useLatestRef from 'App/hooks/useLatestRef'
 
-export default function useCellMeasurerCache(itemList?: any[], options?: CellMeasurerCacheParams) {
-	const filteredListRef = itemList ? useLatestRef(itemList) : undefined
+export default function useCellMeasurerCache(options?: CellMeasurerCacheParams) {
   return useMemo(() => new CellMeasurerCache({
     fixedWidth: true,
-    keyMapper: filteredListRef ? (index) => filteredListRef.current[index] : undefined,
     ...options
   }), [])
 }
\ No newline at end of file