Wire up some more

apps/tracer/src/model.ts

@@ -33,6 +33,8 @@ export function useModel() {
     const [addingTargets, setAddingTargets] = useState(false);
     const [stagedItems, setStagedItems] = useState<StagedItem[]>([]);
 
+    const cachedSymbolsRef = useRef(new Map<string, string>());
+
     const request = useCallback(<T extends RequestType>(type: T, payload: RequestPayload[T]): Promise<ResponsePayload[T]> => {
         const rpcState = rpcStateRef.current;
         const id = rpcState.nextRequestId++;
@@ -169,7 +171,26 @@ export function useModel() {
     }, [request]);
 
     const symbolicate = useCallback(async (addresses: string[]): Promise<string[]> => {
-        return (await request("symbols:resolve-addresses", { addresses })).names;
+        const cache = cachedSymbolsRef.current;
+
+        const result = addresses.map(address => cache.get(address) ?? null);
+
+        const missingIndices = result.reduce((acc, element, i) => {
+            if (element === null) {
+                acc.push(i);
+            }
+            return acc;
+        }, [] as number[]);
+        if (missingIndices.length !== 0) {
+            const missingAddresses = missingIndices.map(i => addresses[i]);
+            const { names } = await request("symbols:resolve-addresses", { addresses: missingAddresses });
+            names.forEach((name, i) => {
+                cache.set(missingAddresses[i], name);
+                result[missingIndices[i]] = name;
+            });
+        }
+
+        return result as string[];
     }, [request]);
 
     useEffect(() => {