From 03a1cd62251cf62f1622b897b0f1a06aece5777b Mon Sep 17 00:00:00 2001
From: Kevin Zheng <kaiwen530@gmail.com>
Date: Wed, 15 Nov 2023 16:59:00 +1100
Subject: [PATCH] Performance improvements for search trace parsing

---
 client/src/components/app-bar/Playback.tsx    |  22 ++--
 .../src/components/inspector/PropertyList.tsx |   4 +-
 .../components/renderer/parser/applyScope.ts  |  14 +-
 .../renderer/parser/mapProperties.ts          |  17 +--
 .../components/renderer/parser/normalize.ts   |   4 +-
 .../src/components/renderer/parser/parse.ts   |  10 +-
 .../renderer/parser/parseProperty.ts          |   4 +-
 .../components/renderer/parser/parseString.ts |  17 +--
 .../components/renderer/parser/parseToken.ts  |   4 +-
 .../components/renderer/parser/parseTrace.ts  |   7 +-
 .../renderer/parser/parseTrace.worker.ts      | 123 +++++-------------
 .../renderer/parser/parseTraceSlave.worker.ts | 104 +++++++++++++++
 client/src/pages/SettingsPage.tsx             |   8 +-
 client/src/slices/settings.ts                 |  10 +-
 .../src/d2-renderer/D2RendererOptions.ts      |   4 +-
 15 files changed, 205 insertions(+), 147 deletions(-)
 create mode 100644 client/src/components/renderer/parser/parseTraceSlave.worker.ts

diff --git a/client/src/components/app-bar/Playback.tsx b/client/src/components/app-bar/Playback.tsx
index 7d71b5c6..594e37db 100644
--- a/client/src/components/app-bar/Playback.tsx
+++ b/client/src/components/app-bar/Playback.tsx
@@ -11,9 +11,8 @@ import { Label } from "components/generic/Label";
 import { useSnackbar } from "components/generic/Snackbar";
 import { useBreakpoints } from "hooks/useBreakpoints";
 import { usePlaybackState } from "hooks/usePlaybackState";
-import { range, trimEnd } from "lodash";
+import { noop, range, trimEnd } from "lodash";
 import { ReactNode, useCallback, useEffect } from "react";
-import { useRaf } from "react-use";
 import { UploadedTrace } from "slices/UIState";
 import { Layer } from "slices/layers";
 import { useSettings } from "slices/settings";
@@ -38,7 +37,6 @@ export function PlaybackService({
   children,
   value,
 }: EditorSetterProps<Layer<PlaybackLayerData>>) {
-  useRaf();
   const { step, tick, end, playing, pause } = usePlaybackState(value?.key);
 
   const notify = useSnackbar();
@@ -54,8 +52,10 @@ export function PlaybackService({
 
   useEffect(() => {
     if (playing) {
-      return step < end
-        ? cancellable(
+      let cancel = noop;
+      const r = setInterval(() => {
+        if (step < end) {
+          cancel = cancellable(
             async () => {
               for (const i of range(playbackRate)) {
                 const r = shouldBreak(step + i);
@@ -74,8 +74,15 @@ export function PlaybackService({
                 pause();
               }
             }
-          )
-        : pause();
+          );
+        } else {
+          pause();
+        }
+      }, 1000 / 60);
+      return () => {
+        cancel();
+        clearInterval(r);
+      };
     }
   }, [
     renderLabel,
@@ -109,7 +116,6 @@ export function Playback({
     stepForward,
     stop,
   } = usePlaybackState(layer?.key);
-  useRaf();
   return (
     <>
       <Button
diff --git a/client/src/components/inspector/PropertyList.tsx b/client/src/components/inspector/PropertyList.tsx
index 71b96311..ba3ce1f4 100644
--- a/client/src/components/inspector/PropertyList.tsx
+++ b/client/src/components/inspector/PropertyList.tsx
@@ -16,8 +16,8 @@ export function PropertyList({
   const a = filter(entries(event), ([, v]) => v !== undefined);
   return (
     <Flex {...props}>
-      {map(slice(a, 0, max), ([k, v]) => (
-        <Property label={k} value={v} type={{ variant }} />
+      {map(slice(a, 0, max), ([k, v], i) => (
+        <Property label={k} value={v} key={i} type={{ variant }} />
       ))}
       {a.length > max && (
         <Property
diff --git a/client/src/components/renderer/parser/applyScope.ts b/client/src/components/renderer/parser/applyScope.ts
index 6ca35fa2..e2e94583 100644
--- a/client/src/components/renderer/parser/applyScope.ts
+++ b/client/src/components/renderer/parser/applyScope.ts
@@ -1,16 +1,18 @@
 import { Properties as Props } from "protocol";
 import { Context, PropMap } from "./Context";
 import { mapProperties } from "./mapProperties";
-import { normalize } from "./normalize";
+import { normalizeConstant } from "./normalize";
 
 export function applyScope<T extends Props>(
   scope: PropMap<T>,
   props: PropMap<T>
 ): PropMap<T> {
-  const scopedComponent = mapProperties(
-    props,
-    (prop) => (provided: Context<T>) =>
-      prop(applyScope(normalize(provided), scope))
+  return Object.setPrototypeOf(
+    mapProperties(
+      props,
+      (prop) => (provided: Context<T>) =>
+        prop(applyScope(normalizeConstant(provided), scope))
+    ),
+    scope
   );
-  return { ...scope, ...scopedComponent };
 }
diff --git a/client/src/components/renderer/parser/mapProperties.ts b/client/src/components/renderer/parser/mapProperties.ts
index 4707fea3..1801116a 100644
--- a/client/src/components/renderer/parser/mapProperties.ts
+++ b/client/src/components/renderer/parser/mapProperties.ts
@@ -1,20 +1,21 @@
-import { mapValues, ObjectIterator } from "lodash";
+import { ObjectIterator } from "lodash";
 import { Properties as Props } from "protocol";
 import { Context } from "./Context";
+
 /**
  * Iterates over the properties of a scope or component,
  * ignoring the component name property `$`.
  * @param context The properties to iterate against.
- * @param iterator
+ * @param f
  * @returns
  */
 export function mapProperties<T extends Props, TResult>(
   context: Context<T> = {},
-  iterator: ObjectIterator<T, TResult>
+  f: ObjectIterator<Context<T>, TResult>
 ): Context<T> & { $: string } {
-  const { $, ...props } = context;
-  return {
-    ...mapValues(props, iterator),
-    $,
-  };
+  const out: any = {};
+  for (const key of Object.keys(context)) {
+    out[key] = key === "$" ? context[key] : f(context[key], key, context);
+  }
+  return Object.setPrototypeOf(out, context);
 }
diff --git a/client/src/components/renderer/parser/normalize.ts b/client/src/components/renderer/parser/normalize.ts
index d7d45846..1bb54ce9 100644
--- a/client/src/components/renderer/parser/normalize.ts
+++ b/client/src/components/renderer/parser/normalize.ts
@@ -11,5 +11,7 @@ export function normalize<T extends Props>(
 }
 
 export function normalizeConstant(obj: Context<any> = {}) {
-  return new Proxy(obj, { get: (obj, p) => () => obj[p] });
+  return new Proxy(obj, {
+    get: (obj, p) => (typeof obj[p] === "function" ? obj[p] : () => obj[p]),
+  });
 }
diff --git a/client/src/components/renderer/parser/parse.ts b/client/src/components/renderer/parser/parse.ts
index 3a73fce0..a5637a5c 100644
--- a/client/src/components/renderer/parser/parse.ts
+++ b/client/src/components/renderer/parser/parse.ts
@@ -7,16 +7,16 @@ import {
   ParsedComponentDefinition,
   TraceComponent,
 } from "protocol";
-import { applyScope } from "./applyScope";
 import { Context, Key } from "./Context";
-import { normalize } from "./normalize";
+import { applyScope } from "./applyScope";
+import { normalize, normalizeConstant } from "./normalize";
 
 function parseFor(component: TraceComponent<string, Dict<any>>) {
   const { $for, ...rest } = component;
   if ($for) {
     const { $let = "i", $from = 0, $to = 1, $step = 1 } = $for;
     return range($from, $to, $step).map((i) =>
-      applyScope(normalize({ [$let]: i }), normalize(rest as any))
+      applyScope(normalizeConstant({ [$let]: i }), normalize(rest as any))
     );
   } else {
     return [component];
@@ -39,8 +39,8 @@ export function parse<T extends IntrinsicComponentMap>(
     const c2 = parseFor(c);
     return c2.flatMap((component) => {
       const scoped = applyScope(
-        normalize(context),
-        normalize(component) as any
+        normalizeConstant(context),
+        normalize(component)
       );
       return $ in components
         ? parse(components[$], components, scoped)
diff --git a/client/src/components/renderer/parser/parseProperty.ts b/client/src/components/renderer/parser/parseProperty.ts
index a07b3cdb..486bb672 100644
--- a/client/src/components/renderer/parser/parseProperty.ts
+++ b/client/src/components/renderer/parser/parseProperty.ts
@@ -1,4 +1,4 @@
-import { constant, map, mapValues } from "lodash";
+import { map, mapValues } from "lodash";
 import { Prop } from "./Context";
 import { parseString } from "./parseString";
 /**
@@ -20,6 +20,6 @@ export function parseProperty(prop: any): Prop<any> {
     case String:
       return parseString(prop);
     default:
-      return constant(prop);
+      return () => prop;
   }
 }
diff --git a/client/src/components/renderer/parser/parseString.ts b/client/src/components/renderer/parser/parseString.ts
index 14391243..b313271a 100644
--- a/client/src/components/renderer/parser/parseString.ts
+++ b/client/src/components/renderer/parser/parseString.ts
@@ -1,25 +1,26 @@
 import { join } from "lodash";
+import memo from "memoizee";
 import {
   evaluateParsedString as evaluateTemplate,
   parseStringTemplateGenerator as makeParser,
 } from "string-template-parser";
 import { Prop } from "./Context";
 import { parseToken } from "./parseToken";
-import memo from "memoizee";
 
 const openBrace = /^\{\{\s*/;
 const closeBrace = /^\s*\}\}/;
 const neverMatch = /\b\B/;
 
+const parser = makeParser({
+  VARIABLE_START: openBrace,
+  VARIABLE_END: closeBrace,
+  PIPE_START: neverMatch,
+  PIPE_PARAMETER_START: neverMatch,
+  QUOTED_STRING: neverMatch,
+});
+
 export const parseString = memo(
   (str: string): Prop<any> => {
-    const parser = makeParser({
-      VARIABLE_START: openBrace,
-      VARIABLE_END: closeBrace,
-      PIPE_START: neverMatch,
-      PIPE_PARAMETER_START: neverMatch,
-      QUOTED_STRING: neverMatch,
-    });
     const parsed = parser(str);
     return join(parsed.literals, "")
       ? (ctx) => evaluateTemplate(parsed, {}, {}, (v) => parseToken(v)(ctx))
diff --git a/client/src/components/renderer/parser/parseToken.ts b/client/src/components/renderer/parser/parseToken.ts
index bd0237fe..c183f062 100644
--- a/client/src/components/renderer/parser/parseToken.ts
+++ b/client/src/components/renderer/parser/parseToken.ts
@@ -1,13 +1,13 @@
 import memo from "memoizee";
 import { Prop } from "./Context";
-import { normalize } from "./normalize";
+import { normalizeConstant } from "./normalize";
 
 export const parseToken = memo(
   (token: string): Prop<any> => {
     const f = Function("$", `return ${token};`);
     return (ctx) =>
       f(
-        new Proxy(normalize(ctx), {
+        new Proxy(normalizeConstant(ctx), {
           get(target, prop: string) {
             return target[prop]?.({});
           },
diff --git a/client/src/components/renderer/parser/parseTrace.ts b/client/src/components/renderer/parser/parseTrace.ts
index 1e0e1913..03e1372b 100644
--- a/client/src/components/renderer/parser/parseTrace.ts
+++ b/client/src/components/renderer/parser/parseTrace.ts
@@ -6,13 +6,13 @@ import { usingMemoizedWorkerTask } from "workers/usingWorker";
 import {
   ParseTraceWorkerParameters,
   ParseTraceWorkerReturnType,
-} from "./parseTrace.worker";
-import parseGridWorkerUrl from "./parseTrace.worker.ts?worker&url";
+} from "./parseTraceSlave.worker";
+import parseTraceWorkerUrl from "./parseTrace.worker.ts?worker&url";
 import { dump } from "js-yaml";
 
 export class ParseTraceWorker extends Worker {
   constructor() {
-    super(parseGridWorkerUrl, { type: "module" });
+    super(parseTraceWorkerUrl, { type: "module" });
   }
 }
 
@@ -37,6 +37,7 @@ export function useTraceParser(params: ParseTraceWorkerParameters) {
             );
             return output;
           } catch (e) {
+            console.error(e);
             push("Error parsing", `${dump(e)}`);
           }
         }
diff --git a/client/src/components/renderer/parser/parseTrace.worker.ts b/client/src/components/renderer/parser/parseTrace.worker.ts
index 250c89f1..dfb763b1 100644
--- a/client/src/components/renderer/parser/parseTrace.worker.ts
+++ b/client/src/components/renderer/parser/parseTrace.worker.ts
@@ -1,104 +1,45 @@
-import { chain, findLast, mapValues, negate } from "lodash";
+import { chunk, flatMap, map } from "lodash";
+import { usingWorkerTask } from "workers/usingWorker";
 import {
-  CompiledComponent,
-  EventContext,
-  ParsedComponent,
-  Trace,
-  TraceEvent,
-} from "protocol";
-import { ComponentEntry } from "renderer";
-import { mapProperties } from "./mapProperties";
-import { normalizeConstant } from "./normalize";
-import { parse as parseComponents } from "./parse";
-
-const isNullish = (x: KeyRef): x is Exclude<KeyRef, Key> =>
-  x === undefined || x === null;
-
-type Key = string | number;
-
-type KeyRef = Key | null | undefined;
+  ParseTraceWorkerParameters,
+  ParseTraceWorkerReturnType,
+} from "./parseTraceSlave.worker";
+import parseTraceWorkerUrl from "./parseTraceSlave.worker.ts?worker&url";
+
+export class ParseTraceWorker extends Worker {
+  constructor() {
+    super(parseTraceWorkerUrl, { type: "module" });
+  }
+}
 
-const isPersistent = (c: CompiledComponent<string, Record<string, any>>) =>
-  c.display !== "transient";
+const parseTraceWorker = usingWorkerTask<
+  ParseTraceWorkerParameters,
+  ParseTraceWorkerReturnType
+>(ParseTraceWorker);
 
-function parse({
+async function parse({
   trace,
   context,
   view = "main",
-}: ParseTraceWorkerParameters): ParseTraceWorkerReturnType {
-  const parsed = parseComponents(
-    trace?.render?.views?.[view]?.components ?? [],
-    trace?.render?.components ?? {}
+}: ParseTraceWorkerParameters): Promise<ParseTraceWorkerReturnType> {
+  const chunks = chunk(trace?.events, (trace?.events?.length ?? 0) / 8);
+
+  const outs = await Promise.all(
+    map(chunks, (chunk1) =>
+      parseTraceWorker({
+        trace: { ...trace, events: chunk1 },
+        context,
+        view,
+      })
+    )
   );
 
-  const apply = (
-    event: TraceEvent,
-    ctx?: EventContext
-  ): CompiledComponent<string, Record<string, any>>[] =>
-    parsed.map((p) =>
-      mapProperties<
-        ParsedComponent<string, any>,
-        CompiledComponent<string, Record<string, any>>
-      >(p, (c) =>
-        c(
-          normalizeConstant({
-            alpha: 1,
-            ...context,
-            ...ctx,
-            event,
-            events: trace?.events,
-          })
-        )
-      )
-    );
-
-  const isVisible = (c: CompiledComponent<string, { alpha?: number }>) =>
-    c && Object.hasOwn(c, "alpha") ? c!.alpha! > 0 : true;
-
-  const makeEntryIteratee =
-    (step: number) =>
-    (component: CompiledComponent<string, Record<string, any>>) => ({
-      component,
-      meta: { source: "trace", step: step },
-    });
-
-  const r = chain(trace?.events)
-    .map((c, i) => ({ step: i, id: c.id, data: c, pId: c.pId }))
-    .groupBy("id")
-    .value();
-
-  const steps = chain(trace?.events)
-    .map((e, i, esx) => {
-      const component = apply(e, {
-        step: i,
-        parent: !isNullish(e.pId)
-          ? esx[findLast(r[e.pId], (x) => x.step <= i)?.step ?? 0]
-          : undefined,
-      });
-      const persistent = component.filter(isPersistent);
-      const transient = component.filter(negate(isPersistent));
-      return { persistent, transient };
-    })
-    .map((c) => mapValues(c, (b) => b.filter(isVisible)))
-    .map((c, i) => mapValues(c, (b) => b.map(makeEntryIteratee(i))))
-    .value();
   return {
-    stepsPersistent: steps.map((c) => c.persistent),
-    stepsTransient: steps.map((c) => c.transient),
+    stepsPersistent: flatMap(outs, "stepsPersistent"),
+    stepsTransient: flatMap(outs, "stepsTransient"),
   };
 }
 
-export type ParseTraceWorkerParameters = {
-  trace?: Trace;
-  context: EventContext;
-  view?: string;
-};
-
-export type ParseTraceWorkerReturnType = {
-  stepsPersistent: ComponentEntry[][];
-  stepsTransient: ComponentEntry[][];
-};
-
-onmessage = ({ data }: MessageEvent<ParseTraceWorkerParameters>) => {
-  postMessage(parse(data));
+onmessage = async ({ data }: MessageEvent<ParseTraceWorkerParameters>) => {
+  postMessage(await parse(data));
 };
diff --git a/client/src/components/renderer/parser/parseTraceSlave.worker.ts b/client/src/components/renderer/parser/parseTraceSlave.worker.ts
new file mode 100644
index 00000000..e5c28e83
--- /dev/null
+++ b/client/src/components/renderer/parser/parseTraceSlave.worker.ts
@@ -0,0 +1,104 @@
+import { chain, findLast, map, mapValues, negate } from "lodash";
+import {
+  CompiledComponent,
+  EventContext,
+  ParsedComponent,
+  Trace,
+  TraceEvent,
+} from "protocol";
+import { ComponentEntry } from "renderer";
+import { mapProperties } from "./mapProperties";
+import { normalizeConstant } from "./normalize";
+import { parse as parseComponents } from "./parse";
+
+const isNullish = (x: KeyRef): x is Exclude<KeyRef, Key> =>
+  x === undefined || x === null;
+
+type Key = string | number;
+
+type KeyRef = Key | null | undefined;
+
+const isPersistent = (c: CompiledComponent<string, Record<string, any>>) =>
+  c.display !== "transient";
+
+function parse({
+  trace,
+  context,
+  view = "main",
+}: ParseTraceWorkerParameters): ParseTraceWorkerReturnType {
+  const parsed = parseComponents(
+    trace?.render?.views?.[view]?.components ?? [],
+    trace?.render?.components ?? {}
+  );
+
+  const apply = (
+    event: TraceEvent,
+    ctx?: EventContext
+  ): CompiledComponent<string, Record<string, any>>[] =>
+    parsed.map((p) =>
+      mapProperties<
+        ParsedComponent<string, any>,
+        CompiledComponent<string, Record<string, any>>
+      >(p, (c) =>
+        c(
+          normalizeConstant({
+            alpha: 1,
+            ...context,
+            ...ctx,
+            event,
+            events: trace?.events,
+          })
+        )
+      )
+    );
+
+  const isVisible = (c: CompiledComponent<string, { alpha?: number }>) =>
+    c && Object.hasOwn(c, "alpha") ? c!.alpha! > 0 : true;
+
+  const makeEntryIteratee =
+    (step: number) =>
+    (component: CompiledComponent<string, Record<string, any>>) => ({
+      component,
+      meta: { source: "trace", step: step },
+    });
+
+  const r = chain(trace?.events)
+    .map((c, i) => ({ step: i, id: c.id, data: c, pId: c.pId }))
+    .groupBy("id")
+    .value();
+
+  const steps = chain(trace?.events)
+    .map((e, i, esx) => {
+      const component = apply(e, {
+        step: i,
+        parent: !isNullish(e.pId)
+          ? esx[findLast(r[e.pId], (x) => x.step <= i)?.step ?? 0]
+          : undefined,
+      });
+      const persistent = component.filter(isPersistent);
+      const transient = component.filter(negate(isPersistent));
+      return { persistent, transient };
+    })
+    .map((c) => mapValues(c, (b) => b.filter(isVisible)))
+    .map((c, i) => mapValues(c, (b) => b.map(makeEntryIteratee(i))))
+    .value();
+  return {
+    stepsPersistent: map(steps, (c) => c.persistent),
+    stepsTransient: map(steps, (c) => c.transient),
+  };
+}
+
+export type ParseTraceWorkerParameters = {
+  trace?: Trace;
+  context: EventContext;
+  view?: string;
+};
+
+export type ParseTraceWorkerReturnType = {
+  stepsPersistent: ComponentEntry[][];
+  stepsTransient: ComponentEntry[][];
+};
+
+onmessage = ({ data }: MessageEvent<ParseTraceWorkerParameters>) => {
+  postMessage(parse(data));
+};
diff --git a/client/src/pages/SettingsPage.tsx b/client/src/pages/SettingsPage.tsx
index 0e222071..e6915c43 100644
--- a/client/src/pages/SettingsPage.tsx
+++ b/client/src/pages/SettingsPage.tsx
@@ -65,13 +65,13 @@ export function SettingsPage() {
                       <Space flex={1} />
                       <Slider
                         sx={{ maxWidth: 320, mr: 2 }}
-                        marks={[0.25, 1, 5].map((v) => ({
+                        marks={[1, 2, 5, 10].map((v) => ({
                           value: v * baseRate,
                           label: formatLabel(v),
                         }))}
-                        step={0.25 * baseRate}
-                        min={0.25 * baseRate}
-                        max={5 * baseRate}
+                        step={1 * baseRate}
+                        min={1 * baseRate}
+                        max={10 * baseRate}
                         valueLabelFormat={(v) => formatLabel(v / baseRate)}
                         valueLabelDisplay="auto"
                         defaultValue={playbackRate}
diff --git a/client/src/slices/settings.ts b/client/src/slices/settings.ts
index 3a774f08..86bf3b63 100644
--- a/client/src/slices/settings.ts
+++ b/client/src/slices/settings.ts
@@ -1,6 +1,6 @@
-import { createSlice, withLocalStorage } from "./createSlice";
-import { AccentColor } from "theme";
-
+import { createSlice, withLocalStorage } from "./createSlice";
+import { AccentColor } from "theme";
+
 export type Remote = {
   url: string;
   transport: string;
@@ -40,7 +40,7 @@ export const defaultRenderers = [
   },
 ];
 
-export const defaultPlaybackRate = 4;
+export const defaultPlaybackRate = 1;
 
 const defaults = {
   renderer: defaultRenderers,
@@ -54,4 +54,4 @@ const defaults = {
 export const [useSettings, SettingsProvider] = createSlice<Settings>(
   {},
   withLocalStorage("settings", defaults)
-);
\ No newline at end of file
+);
diff --git a/internal-renderers/src/d2-renderer/D2RendererOptions.ts b/internal-renderers/src/d2-renderer/D2RendererOptions.ts
index 5e4d8dcb..eb98cdc6 100644
--- a/internal-renderers/src/d2-renderer/D2RendererOptions.ts
+++ b/internal-renderers/src/d2-renderer/D2RendererOptions.ts
@@ -40,9 +40,9 @@ export const defaultD2RendererOptions: D2RendererOptions = {
     height: 64,
   },
   tileSubdivision: 0,
-  refreshInterval: 1000 / 30,
+  refreshInterval: 1000 / 60,
   animationDuration: 150,
-  debounceInterval: 75,
+  debounceInterval: 1000 / 60,
   backgroundColor: "#ffffff",
   accentColor: "#333333",
   dynamicResolution: {