fix(frontend): autoscroll index: use filtered list

frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx

@@ -86,13 +86,14 @@ function ConsolePanel() {
   const onFilterChange = ({ target: { value } }: any) => devTools.update(INDEX_KEY, { filter: value })
 
   // AutoScroll 
-  const autoScrollIndex = logListNow.length + exceptionsListNow.length
-  const {
+  const countNow = logListNow.length + exceptionsListNow.length
+  const [
     timeoutStartAutoscroll,
     stopAutoscroll,
-  } = useAutoscroll(
+  ] = useAutoscroll(
+    filteredList,
+    list[countNow].time,
     activeIndex,
-    autoScrollIndex,
     index => devTools.update(INDEX_KEY, { index })
   )
   const onMouseEnter = stopAutoscroll
@@ -101,7 +102,7 @@ function ConsolePanel() {
     timeoutStartAutoscroll()
   }
   
-  const _list = useRef();
+  const _list = useRef(); // TODO: fix react-virtualized types & incapsulate scrollToRow logic
   useEffect(() => {
     if (_list.current) {
       // @ts-ignore

frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx

@@ -152,16 +152,20 @@ function NetworkPanel() {
   const activeTab = devTools[INDEX_KEY].activeTab;
   const activeIndex = devTools[INDEX_KEY].index;
 
-  const list = useMemo(() =>
-    resourceList.filter(res => !fetchList.some(ft => {
+  const { list, intersectedCount } = useMemo(() => {
+    let intersectedCount = 0
+    const list = resourceList.filter(res => !fetchList.some(ft => {
       if (res.url !== ft.url) { return false }
       if (Math.abs(res.time - ft.time) > 200) { return false } // TODO: find good epsilons
       if (Math.abs(res.duration - ft.duration) > 100) { return false }
+      intersectedCount++
       return true
     }))
     .concat(fetchList)
     .sort((a, b) => a.time - b.time)
-  , [ resourceList.length, fetchList.length ])
+    return { list, intersectedCount }
+  }, [ resourceList.length, fetchList.length ])
+
   let filteredList = useMemo(() => {
     if (!showOnlyErrors) { return list }
     return list.filter(it => parseInt(it.status) >= 400 || !it.success)
@@ -174,14 +178,16 @@ function NetworkPanel() {
   const onTabClick = (activeTab: typeof TAP_KEYS[number]) => devTools.update(INDEX_KEY, { activeTab })
   const onFilterChange = ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => devTools.update(INDEX_KEY, { filter: value })
 
+
   // AutoScroll
-  const autoScrollIndex = fetchListNow.length + resourceListNow.length
-  const {
+  const countNow = fetchListNow.length + resourceListNow.length - intersectedCount
+  const [
     timeoutStartAutoscroll,
     stopAutoscroll,
-  } = useAutoscroll(
+  ] = useAutoscroll(
+    filteredList,
+    list[countNow].time,
     activeIndex,
-    autoScrollIndex,
     index => devTools.update(INDEX_KEY, { index })
   )
   const onMouseEnter = stopAutoscroll

frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx

@@ -44,12 +44,13 @@ function StackEventPanel() {
     [ list.length ],
   )
 
-  const {
+  const [
     timeoutStartAutoscroll,
     stopAutoscroll,
-  } = useAutoscroll(
+  ] = useAutoscroll(
+    filteredList,
+    listNow[listNow.length-1].time,
     activeIndex,
-    listNow.length,
     index => devTools.update(INDEX_KEY, { index })
   )
   const onMouseEnter = stopAutoscroll

frontend/app/components/shared/DevTools/useAutoscroll.ts

@@ -1,42 +1,61 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useMemo } from 'react'
+import { Timed } from 'Player'
 import useLatestRef from 'App/hooks/useLatestRef'
 import useCancelableTimeout from 'App/hooks/useCancelableTimeout'
 
 const TIMEOUT_DURATION = 5000;
 
-export default function useAutoscroll(
-  savedIndex: number,
-  autoscrollIndex: number,
-  updadteIndex: (index: number) => void,
+
+function useAutoupdate<T>(
+  savedValue: T,
+  actualValue: T,
+  resetValue: T,
+  updadteValue: (value: T) => void,
 ) {
-  const [ autoscroll, setAutoscroll ] = useState(savedIndex === 0)
+  const [ autoupdate, setAutoupdate ] = useState(savedValue === resetValue)
   
-  const [ timeoutStartAutoscroll, stopAutoscroll ] = useCancelableTimeout(
-    () => setAutoscroll(true), 
-    () => setAutoscroll(false),
+  const [ timeoutStartAutoupdate, stopAutoupdate ] = useCancelableTimeout(
+    () => setAutoupdate(true), 
+    () => setAutoupdate(false),
     TIMEOUT_DURATION,
   )
   useEffect(() => {
-    if (autoscroll && autoscrollIndex !== savedIndex) {
-      updadteIndex(autoscrollIndex)
+    if (autoupdate && actualValue !== savedValue) {
+      updadteValue(actualValue)
     }
-  }, [ autoscroll, autoscrollIndex ])
+  }, [ autoupdate, actualValue ])
 
-  const autoScrollRef = useLatestRef(autoscroll)
+  const autoScrollRef = useLatestRef(autoupdate)
   useEffect(() => {
-    if (!autoscroll) {
-      timeoutStartAutoscroll()
+    if (!autoupdate) {
+      timeoutStartAutoupdate()
     }
     return () => {
       if (autoScrollRef.current) {
-        updadteIndex(0) // index:0 means autoscroll is active
+        updadteValue(resetValue)
       }
     }
   }, [])
 
-  return {
-    autoscrollIndex,
-    timeoutStartAutoscroll,
-    stopAutoscroll,
-  }
+  return [ timeoutStartAutoupdate, stopAutoupdate ]
+}
+
+// That might be simplified by removing index from devTools[INDEX_KEY] store...
+export default function useAutoscroll(
+  filteredList: Timed[],
+  time: number,
+  savedIndex: number,
+  updadteIndex: (index: number) => void,
+) {
+  const filteredIndexNow = useMemo(() => {
+    // Should use findLastIndex here
+    for (let i=0; i < filteredList.length; i++) {
+      if (filteredList[i].time > time) {
+        return i-1
+      }
+    }
+    return filteredList.length
+  }, [ time, filteredList ])
+
+  return useAutoupdate(savedIndex, filteredIndexNow, 0, updadteIndex)
 }

frontend/app/player/index.ts

@@ -2,6 +2,7 @@ export * from './web/assist/AssistManager';
 export * from './web/assist/LocalStream';
 export * from './web/WebPlayer';
 export * from './web/types';
+export * from  './common/types';
 export * from './create';
 
 export type { MarkedTarget } from './web/TargetMarker'