[WIP] tracer: Move event view to react-window

frida · Oct 16, 2024 · b473ebe · b473ebe
1 parent dc1b1dd
commit b473ebe
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 26 deletions.
diff --git a/apps/tracer/package-lock.json b/apps/tracer/package-lock.json
diff --git 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
@@ -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<HTMLDivElement>(null);
-    const selectedRef = useRef<HTMLDivElement>(null);
-    const [items, setItems] = useState<(EventItem | ThreadIdMarkerItem)[]>([]);
+    const listRef = useRef<ViewportListRef>(null);
+    const [items, setItems] = useState<Item[]>([]);
     const [selectedCallerSymbol, setSelectedCallerSymbol] = useState<string | null>("");
     const [selectedBacktraceSymbols, setSelectedBacktraceSymbols] = useState<string[] | null>(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 (
         <div ref={containerRef} className="event-view">
-            <ViewportList items={items}>
-                {(item) => {
+            <VariableSizeList
+                ref={listRef}
+                width={320}
+                height={240}
+                itemCount={items.length}
+                itemSize={() => 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 (
-                            <div key={`${index}-heading`} className={"event-heading " + colorClass}>
+                            <div className={"event-heading " + colorClass}>
                                 /* TID 0x{threadId.toString(16)} */
                             </div>
                         );
                     }
 
-                    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 (
                         <div
-                            key={index}
-                            ref={isSelected ? selectedRef : undefined}
                             className={eventClasses.join(" ")}
                         >
                             <div className="event-summary">
@@ -202,10 +204,11 @@ export default function EventView({
                         </div>
                     );
                 }}
-            </ViewportList>
+            </VariableSizeList>
         </div>
     );
 }
 
+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
@@ -98,6 +98,10 @@ export default function MemoryView({ address, onSelectAddress }: MemoryViewProps
                             label: "32",
                             value: "pxw"
                         },
+                        {
+                            label: "Periscope",
+                            value: "pxr 4K"
+                        },
                     ]}
                     defaultValue="x"
                     onValueChange={setFormat}