diff --git a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx index e07f26b4b..4719914ba 100644 --- a/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx +++ b/frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx @@ -10,7 +10,7 @@ import { List, CellMeasurer, AutoSizer } from 'react-virtualized'; import { useStore } from 'App/mstore'; import ErrorDetailsModal from 'App/components/Dashboard/components/Errors/ErrorDetailsModal'; import { useModal } from 'App/components/Modal'; -import useAutoscroll from '../useAutoscroll'; +import useAutoscroll, { getLastItemTime } from '../useAutoscroll'; import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter' import useCellMeasurerCache from '../useCellMeasurerCache' @@ -86,13 +86,12 @@ function ConsolePanel() { const onFilterChange = ({ target: { value } }: any) => devTools.update(INDEX_KEY, { filter: value }) // AutoScroll - const countNow = logListNow.length + exceptionsListNow.length const [ timeoutStartAutoscroll, stopAutoscroll, ] = useAutoscroll( filteredList, - list[countNow].time, + getLastItemTime(logListNow, exceptionsListNow), activeIndex, index => devTools.update(INDEX_KEY, { index }) ) diff --git a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx index 68d58702c..4f644a46c 100644 --- a/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx +++ b/frontend/app/components/shared/DevTools/NetworkPanel/NetworkPanel.tsx @@ -14,7 +14,7 @@ import { useStore } from 'App/mstore'; import TimeTable from '../TimeTable'; import BottomBlock from '../BottomBlock'; import InfoLine from '../BottomBlock/InfoLine'; -import useAutoscroll from '../useAutoscroll'; +import useAutoscroll, { getLastItemTime } from '../useAutoscroll'; import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter' const INDEX_KEY = 'network'; @@ -152,19 +152,16 @@ function NetworkPanel() { const activeTab = devTools[INDEX_KEY].activeTab; const activeIndex = devTools[INDEX_KEY].index; - const { list, intersectedCount } = useMemo(() => { - let intersectedCount = 0 - const list = resourceList.filter(res => !fetchList.some(ft => { + const list = useMemo(() => + 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) - return { list, intersectedCount } - }, [ resourceList.length, fetchList.length ]) + , [ resourceList.length, fetchList.length ]) let filteredList = useMemo(() => { if (!showOnlyErrors) { return list } @@ -181,13 +178,12 @@ function NetworkPanel() { const onFilterChange = ({ target: { value } }: React.ChangeEvent) => devTools.update(INDEX_KEY, { filter: value }) // AutoScroll - const countNow = fetchListNow.length + resourceListNow.length - intersectedCount const [ timeoutStartAutoscroll, stopAutoscroll, ] = useAutoscroll( filteredList, - list[countNow].time, + getLastItemTime(fetchListNow, resourceListNow), activeIndex, index => devTools.update(INDEX_KEY, { index }) ) diff --git a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx index b4a3aabce..366750b51 100644 --- a/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx +++ b/frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx @@ -10,7 +10,7 @@ import { typeList } from 'Types/session/stackEvent'; import StackEventRow from 'Shared/DevTools/StackEventRow'; import StackEventModal from '../StackEventModal'; -import useAutoscroll from '../useAutoscroll'; +import useAutoscroll, { getLastItemTime } from '../useAutoscroll'; import { useRegExListFilterMemo, useTabListFilterMemo } from '../useListFilter' import useCellMeasurerCache from '../useCellMeasurerCache' @@ -48,7 +48,7 @@ function StackEventPanel() { stopAutoscroll, ] = useAutoscroll( filteredList, - listNow[listNow.length-1].time, + getLastItemTime(listNow), activeIndex, index => devTools.update(INDEX_KEY, { index }) ) diff --git a/frontend/app/components/shared/DevTools/useAutoscroll.ts b/frontend/app/components/shared/DevTools/useAutoscroll.ts index 5414edf42..c466eb34f 100644 --- a/frontend/app/components/shared/DevTools/useAutoscroll.ts +++ b/frontend/app/components/shared/DevTools/useAutoscroll.ts @@ -5,6 +5,9 @@ import useCancelableTimeout from 'App/hooks/useCancelableTimeout' const TIMEOUT_DURATION = 5000; +export function getLastItemTime(...lists: Timed[][]) { + return Math.max(...lists.map(l => l.length ? l[l.length-1].time : 0)) +} function useAutoupdate( savedValue: T, diff --git a/frontend/app/player/player/Animator.ts b/frontend/app/player/player/Animator.ts index 787df725b..535e54486 100644 --- a/frontend/app/player/player/Animator.ts +++ b/frontend/app/player/player/Animator.ts @@ -153,7 +153,7 @@ export default class Animator { } // jump by index? - jump(time: number) { + jump = (time: number) => { const { live } = this.store.get() if (live) return