+
+ {columns.map(({ label, width, dataKey, onClick = null }) => (
+
onColumnClick(dataKey, onClick)}
+ >
+ {label}
))}
-
-
-
this.onJump(index)} />
-
- );
- };
-
- onPrevClick = () => {
- let prevRedIndex = -1;
- for (let i = this.state.firstVisibleRowIndex - 1; i >= 0; i--) {
- if (this.props.rows[i].isRed) {
- prevRedIndex = i;
- break;
- }
- }
- if (this.scroller.current != null) {
- this.scroller.current.scrollToIndex(prevRedIndex);
- }
- };
-
- onNextClick = () => {
- let prevRedIndex = -1;
- for (let i = this.state.firstVisibleRowIndex + 1; i < this.props.rows.length; i++) {
- if (this.props.rows[i].isRed) {
- prevRedIndex = i;
- break;
- }
- }
- if (this.scroller.current != null) {
- this.scroller.current.scrollToIndex(prevRedIndex);
- }
- };
-
- onColumnClick = (dataKey: string, onClick: any) => {
- if (typeof onClick === 'function') {
- onClick(dataKey);
- }
- };
-
- render() {
- const {
- className,
- rows,
- navigation = false,
- referenceLines = [],
- additionalHeight = 0,
- activeIndex,
- } = this.props;
- const columns = this.props.children.filter((i: any) => !i.hidden);
- const { timewidth, timestart } = this.state;
-
- _additionalHeight = additionalHeight;
-
- const sectionDuration = Math.round(timewidth / TIME_SECTIONS_COUNT);
- const timeColumns: number[] = [];
- if (timewidth > 0) {
- for (let i = 0; i < TIME_SECTIONS_COUNT; i++) {
- timeColumns.push(timestart + i * sectionDuration);
- }
- }
-
- const visibleRefLines = referenceLines.filter(
- ({ time }) => time > timestart && time < timestart + timewidth
- );
-
- const columnsSumWidth = columns.reduce((sum, { width }) => sum + width, 0);
-
- return (
-
- {navigation && (
-
-
-
-
- )}
-
-
- {columns.map(({ label, width, dataKey, onClick = null }) => (
-
this.onColumnClick(dataKey, onClick)}
- >
- {label}
-
- ))}
-
-
- {timeColumns.map((time, i) => (
-
- {formatTime(time)}
-
- ))}
-
-
-
-
-
-
- {timeColumns.map((_, index) => (
-
- ))}
- {visibleRefLines.map(({ time, color, onClick }) => (
-
- ))}
+
+ {timeColumns.map((time, i) => (
+
+ {formatTime(time)}
-
- {this.props.rows.map((_, index) => this.renderRow(index))}
-
-
-
+ ))}
+
+
+ {timeColumns.map((_, index) => (
+
+ ))}
+ {visibleRefLines.map(({ time, color, onClick }) => (
+
+ ))}
+
+
{
+ const firstVisibleRowIndex = Math.floor(
+ offset / ROW_HEIGHT + 0.33
+ );
+ setFirstVisibleRowIndex(firstVisibleRowIndex);
+ }}
+ >
+ {(index) => (
+
+ )}
+
+
+ );
}
+
+function RowRenderer({
+ index,
+ row,
+ columns,
+ timestart,
+ timewidth,
+ renderPopup,
+ hoverable,
+ onRowClick,
+ activeIndex,
+ onJump,
+}: any) {
+ return (
+
activeIndex,
+ }
+ )}
+ onClick={
+ typeof onRowClick === 'function'
+ ? () => onRowClick(row, index)
+ : undefined
+ }
+ id="table-row"
+ >
+
+
+
+
+
onJump(index)} />
+
+ );
+}
+
+const RowColumns = React.memo(({ columns, row }: any) => {
+ return columns.map(({ dataKey, render, width, label }: any) => (
+
+ {render
+ ? render(row)
+ : row[dataKey || ''] || (
+ {'empty'}
+ )}
+
+ ))
+})
+
+export default observer(TimeTable);
diff --git a/frontend/app/components/shared/DevTools/useAutoscroll.ts b/frontend/app/components/shared/DevTools/useAutoscroll.ts
index 5225f59ea..4a65ad877 100644
--- a/frontend/app/components/shared/DevTools/useAutoscroll.ts
+++ b/frontend/app/components/shared/DevTools/useAutoscroll.ts
@@ -16,9 +16,9 @@ function useAutoupdate
(
updadteValue: (value: T) => void,
) {
const [ autoupdate, setAutoupdate ] = useState(savedValue === resetValue)
-
+
const [ timeoutStartAutoupdate, stopAutoupdate ] = useCancelableTimeout(
- () => setAutoupdate(true),
+ () => setAutoupdate(true),
() => setAutoupdate(false),
TIMEOUT_DURATION,
)
@@ -61,4 +61,4 @@ export default function useAutoscroll(
}, [ time, filteredList ])
return useAutoupdate(savedIndex, filteredIndexNow, 0, updadteIndex)
-}
\ No newline at end of file
+}
diff --git a/frontend/app/player/web/types/resource.ts b/frontend/app/player/web/types/resource.ts
index 45c0dfc64..7729b4d00 100644
--- a/frontend/app/player/web/types/resource.ts
+++ b/frontend/app/player/web/types/resource.ts
@@ -131,6 +131,7 @@ export function getResourceFromResourceTiming(msg: ResourceTiming, sessStart: nu
// duration might be duration=0 when cached
const failed = msg.duration === 0 && msg.ttfb === 0 && msg.headerSize === 0 && msg.encodedBodySize === 0 && msg.transferredSize === 0
const type = getResourceType(msg.initiator, msg.url)
+ console.log(msg.url, msg.timestamp - sessStart)
return Resource({
...msg,
type,
@@ -142,6 +143,7 @@ export function getResourceFromResourceTiming(msg: ResourceTiming, sessStart: nu
}
export function getResourceFromNetworkRequest(msg: NetworkRequest | Fetch | MobileNetworkCall, sessStart: number) {
+ console.log(msg.url, msg.timestamp - sessStart)
return Resource({
...msg,
// @ts-ignore