jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(player): fix virtualization

Browse source
This commit is contained in:
nick-delirium 2023-04-27 14:22:19 +02:00
parent 1d9c8f4b93
commit f71f104fee
6 changed files with 20 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/app/components/Session/Player/ReplayPlayer/EventsBlock/EventsBlock.tsx
View file

@ -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
});

2
frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
View file

@ -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,
});

26
frontend/app/components/shared/DevTools/ConsolePanel/ConsolePanel.tsx
View file

@ -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>
)

5
frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
View file

@ -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

2
frontend/app/components/shared/DevTools/StackEventPanel/StackEventPanel.tsx
View file

@ -58,7 +58,7 @@ function StackEventPanel() {
timeoutStartAutoscroll()
}
const cache = useCellMeasurerCache(filteredList)
const cache = useCellMeasurerCache()
const showDetails = (item: any) => {
setIsDetailsModalActive(true)

5
frontend/app/hooks/useCellMeasurerCache.ts
View file

@ -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
}), [])
}