From b473ebe6502e60fa32435cd057097267046ae918 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ole=20Andr=C3=A9=20Vadla=20Ravn=C3=A5s?= Date: Wed, 16 Oct 2024 23:01:55 +0200 Subject: [PATCH] [WIP] tracer: Move event view to react-window --- apps/tracer/package-lock.json | 35 ++++++++++++++++++++++--- apps/tracer/package.json | 3 ++- apps/tracer/src/EventView.tsx | 47 ++++++++++++++++++---------------- apps/tracer/src/MemoryView.tsx | 4 +++ 4 files changed, 63 insertions(+), 26 deletions(-) diff --git a/apps/tracer/package-lock.json b/apps/tracer/package-lock.json index 67901b9..8befbde 100644 --- a/apps/tracer/package-lock.json +++ b/apps/tracer/package-lock.json @@ -12,12 +12,14 @@ "@curvenote/ansi-to-react": "^7.0.0", "@frida/react-use-r2": "^1.0.2", "@monaco-editor/react": "^4.6.0", + "@types/react-window": "^1.8.8", "monaco-editor": "^0.51.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-resplit": "^1.3.2-alpha.0", "react-stay-at-bottom": "^1.1.1", "react-use-websocket": "^4.8.1", + "react-window": "^1.8.10", "use-debounce": "^10.0.3" }, "devDependencies": { @@ -1165,14 +1167,12 @@ "node_modules/@types/prop-types": { "version": "15.7.13", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", - "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", - "devOptional": true + "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==" }, "node_modules/@types/react": { "version": "18.3.10", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.10.tgz", "integrity": "sha512-02sAAlBnP39JgXwkAq3PeU9DVaaGpZyF3MGcC0MKgQVkZor5IiiDAipVaxQHtDJAmO4GIy/rVBy/LzVj76Cyqg==", - "devOptional": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" @@ -1187,6 +1187,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-window": { + "version": "1.8.8", + "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz", + "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@vitejs/plugin-react": { "version": "4.3.2", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.2.tgz", @@ -1831,6 +1839,27 @@ "resolved": "https://registry.npmjs.org/react-use-websocket/-/react-use-websocket-4.9.0.tgz", "integrity": "sha512-/6OaCMggQCTnryCAsw/N+/wfH7bBfIXk5WXTMPdyf0x9HWJXLGUVttAT5hqAimRytD1dkHEJCUrFHAGzOAg1eg==" }, + "node_modules/react-window": { + "version": "1.8.10", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz", + "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==", + "dependencies": { + "@babel/runtime": "^7.0.0", + "memoize-one": ">=3.1.1 <6" + }, + "engines": { + "node": ">8.0.0" + }, + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/react-window/node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "node_modules/regenerator-runtime": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", diff --git a/apps/tracer/package.json b/apps/tracer/package.json index 60321c5..aaf6f1b 100644 --- a/apps/tracer/package.json +++ b/apps/tracer/package.json @@ -13,13 +13,14 @@ "@curvenote/ansi-to-react": "^7.0.0", "@frida/react-use-r2": "^1.0.2", "@monaco-editor/react": "^4.6.0", + "@types/react-window": "^1.8.8", "monaco-editor": "^0.51.0", "react": "^18.3.1", "react-dom": "^18.3.1", "react-resplit": "^1.3.2-alpha.0", "react-stay-at-bottom": "^1.1.1", "react-use-websocket": "^4.8.1", - "react-viewport-list": "^7.1.2", + "react-window": "^1.8.10", "use-debounce": "^10.0.3" }, "devDependencies": { diff --git a/apps/tracer/src/EventView.tsx b/apps/tracer/src/EventView.tsx index 168309c..1ec320f 100644 --- a/apps/tracer/src/EventView.tsx +++ b/apps/tracer/src/EventView.tsx @@ -4,7 +4,7 @@ import { Button, Card } from "@blueprintjs/core"; import Ansi from "@curvenote/ansi-to-react"; import { ReactElement, useCallback, useEffect, useRef, useState } from "react"; import { useStayAtBottom } from "react-stay-at-bottom"; -import { ViewportList } from "react-viewport-list"; +import { VariableSizeList } from "react-window"; export interface EventViewProps { events: Event[]; @@ -31,8 +31,8 @@ export default function EventView({ onSymbolicate, }: EventViewProps) { const containerRef = useRef(null); - const selectedRef = useRef(null); - const [items, setItems] = useState<(EventItem | ThreadIdMarkerItem)[]>([]); + const listRef = useRef(null); + const [items, setItems] = useState([]); const [selectedCallerSymbol, setSelectedCallerSymbol] = useState(""); const [selectedBacktraceSymbols, setSelectedBacktraceSymbols] = useState(null); @@ -54,18 +54,12 @@ export default function EventView({ }, [] as (EventItem | ThreadIdMarkerItem)[])); }, [events]); + /* useEffect(() => { - const item = selectedRef.current; - if (item === null) { - return; - } - const itemRect = item.getBoundingClientRect(); - const containerRect = containerRef.current!.getBoundingClientRect(); - if (itemRect.top >= containerRect.top && itemRect.bottom <= containerRect.bottom) { - return; - } - item.scrollIntoView({ block: "center" }); - }, [selectedRef, selectedIndex]); + const index = items.findIndex(([i,]) => i === selectedIndex); + listRef.current!.scrollToIndex({ index }); + }, [selectedIndex]); + */ useEffect(() => { setSelectedCallerSymbol(null); @@ -151,19 +145,29 @@ export default function EventView({ return (
- - {(item) => { + 42} + itemData={items} + > + {({data, index}) => { + const item = data[index]; + + console.log("item:", item); if (item.length === 3) { - const [index, threadId, style] = item; + const [, threadId, style] = item; const colorClass = "ansi-" + style.join("-"); return ( -
+
/* TID 0x{threadId.toString(16)} */
); } - const [index, event] = item; + const [, event] = item; const [targetId, timestamp, _threadId, depth, _caller, _backtrace, message, style] = event; const isSelected = index === selectedIndex; @@ -182,8 +186,6 @@ export default function EventView({ return (
@@ -202,10 +204,11 @@ export default function EventView({
); }} - +
); } +type Item = EventItem | ThreadIdMarkerItem; type EventItem = [index: number, event: Event]; type ThreadIdMarkerItem = [index: number, threadId: number, style: string[]]; diff --git a/apps/tracer/src/MemoryView.tsx b/apps/tracer/src/MemoryView.tsx index 5ca8664..ba16b9a 100644 --- a/apps/tracer/src/MemoryView.tsx +++ b/apps/tracer/src/MemoryView.tsx @@ -98,6 +98,10 @@ export default function MemoryView({ address, onSelectAddress }: MemoryViewProps label: "32", value: "pxw" }, + { + label: "Periscope", + value: "pxr 4K" + }, ]} defaultValue="x" onValueChange={setFormat}