Compatibility for macos

client/src/components/app-bar/upload.tsx

@@ -33,7 +33,7 @@ export async function uploadTrace(): Promise<
   FileHandle<UploadedTrace | undefined> | undefined
 > {
   const f = await file({
-    accept: FORMATS,
+    accept: EXTENSIONS.map((c) => `.${c}`),
     strict: true,
   });
   if (f) {
@@ -57,7 +57,9 @@ export function readUploadedTrace(f: File) {
           key: id(),
         };
       } else {
-        throw new Error(`The format (${ext(f.name)}) is unsupported.`);
+        throw new Error(
+          `The file should have one of these extensions: ${FORMATS.join(", ")}`
+        );
       }
     },
   };

client/src/components/generic/Scrollbars.tsx

@@ -1,11 +1,11 @@
 import { useTheme } from "@mui/material";
+import { OverlayScrollbars } from "overlayscrollbars";
 import {
   OverlayScrollbarsComponent,
   OverlayScrollbarsComponentProps,
 } from "overlayscrollbars-react";
-import { OverlayScrollbars } from "overlayscrollbars";
+import { ForwardedRef, ReactNode, forwardRef, useCallback } from "react";
 import { useCss } from "react-use";
-import { ForwardedRef, forwardRef, ReactNode, useCallback } from "react";
 
 type ScrollProps = {
   children?: ReactNode;
@@ -56,7 +56,7 @@ export const Scroll = forwardRef(
             const viewport = instance.elements().viewport;
             if (viewport) {
               if (typeof ref === "function") {
-                ref(viewport as HTMLDivElement);
+                ref?.(viewport as HTMLDivElement);
               } else {
                 ref.current = viewport as HTMLDivElement;
               }

client/src/components/inspector/TraceRenderer.tsx

@@ -6,7 +6,7 @@ import { Box, CircularProgress, useTheme } from "@mui/material";
 import { RendererProps, SelectEvent } from "components/renderer/Renderer";
 import { usePlaybackState } from "hooks/usePlaybackState";
 import { RenderLayer } from "layers/RenderLayer";
-import { clamp, find, floor, map } from "lodash";
+import { clamp, find, floor, get, map } from "lodash";
 import { nanoid } from "nanoid";
 import { Size } from "protocol";
 import {
@@ -54,32 +54,37 @@ function useRenderer(renderer?: string, { width, height }: Partial<Size> = {}) {
   const [instance, setInstance] = useState<Renderer>();
 
   useEffect(() => {
-    setError("");
     if (ref.current && width && height && renderer) {
       const entry = find(renderers, (r) => r.renderer.meta.id === renderer);
       if (entry) {
-        const instance = new entry.renderer.constructor();
-        instance.setup({
-          ...rendererOptions,
-          screenSize: {
-            width,
-            height,
-          },
-          backgroundColor: theme.palette.background.paper,
-          accentColor: theme.palette.primary.main,
-        });
-        ref.current.append(instance.getView()!);
-        setInstance(instance);
-        return () => {
-          try {
-            ref.current?.removeChild?.(instance.getView()!);
-            setInstance(undefined);
-          } catch (e) {
-            console.warn(e);
-          } finally {
-            instance.destroy();
-          }
-        };
+        try {
+          const instance = new entry.renderer.constructor();
+          instance.setup({
+            ...rendererOptions,
+            screenSize: {
+              width,
+              height,
+            },
+            backgroundColor: theme.palette.background.paper,
+            accentColor: theme.palette.primary.main,
+          });
+          ref.current.append(instance.getView()!);
+          setInstance(instance);
+          setError("");
+          return () => {
+            try {
+              ref.current?.removeChild?.(instance.getView()!);
+              setInstance(undefined);
+            } catch (e) {
+              console.warn(e);
+            } finally {
+              instance.destroy();
+            }
+          };
+        } catch (e) {
+          setError(`${entry.renderer.meta.name}: ${get(e, "message")}`);
+          setInstance(undefined);
+        }
       }
     }
   }, [ref.current, map, renderer, renderers, theme, setError, setInstance]);

client/src/components/renderer/map-parser/grid/getGridSymbols.worker.ts

@@ -1,6 +1,7 @@
 import { chain } from "lodash";
 import { getValue } from "./gradient";
 import { ParseGridWorkerParameters } from "./parseGrid.worker";
+import { usingMessageHandler } from "../../../../workers/usingWorker";
 
 export type GetGridSymbolsReturnType = {
   symbols: { symbol: string; value: number }[];
@@ -27,6 +28,7 @@ export function getGridSymbols({
   };
 }
 
-onmessage = ({ data }: MessageEvent<GetGridSymbolsParameters>) => {
-  postMessage(getGridSymbols(data));
-};
+onmessage = usingMessageHandler(
+  async ({ data }: MessageEvent<GetGridSymbolsParameters>) =>
+    getGridSymbols(data)
+);

client/src/components/renderer/map-parser/grid/parseGrid.worker.ts

@@ -3,6 +3,7 @@ import { chain as _, last, map, range } from "lodash";
 import { Point, Size } from "protocol";
 import { ParsedMap } from "../Parser";
 import { getGridSymbols } from "./getGridSymbols.worker";
+import { usingMessageHandler } from "../../../../workers/usingWorker";
 
 function map2D<R>(cells: string[], iterator: (t: string) => R) {
   return map(cells, (row) => map(row, (cell) => iterator(cell)));
@@ -150,6 +151,6 @@ function parseGrid({
   };
 }
 
-onmessage = ({ data }: MessageEvent<ParseGridWorkerParameters>) => {
-  postMessage(parseGrid(data));
-};
+onmessage = usingMessageHandler(
+  async ({ data }: MessageEvent<ParseGridWorkerParameters>) => parseGrid(data)
+);

client/src/components/renderer/map-parser/mesh/parseMesh.worker.ts

@@ -2,6 +2,7 @@ import { Dictionary, identity, maxBy, minBy } from "lodash";
 import pluralize from "pluralize";
 import { Point } from "protocol";
 import { ParsedMap } from "../Parser";
+import { usingMessageHandler } from "../../../../workers/usingWorker";
 
 export type Options = {
   color?: string;
@@ -72,6 +73,6 @@ function parseMesh({
   };
 }
 
-onmessage = ({ data }: MessageEvent<ParseMeshWorkerParameters>) => {
-  postMessage(parseMesh(data));
-};
+onmessage = usingMessageHandler(
+  async ({ data }: MessageEvent<ParseMeshWorkerParameters>) => parseMesh(data)
+);

client/src/components/renderer/map-parser/mesh/parseMeshAsync.ts

@@ -1,4 +1,7 @@
-import { ParseMeshWorkerParameters, ParseMeshWorkerReturnType } from "./parseMesh.worker";
+import {
+  ParseMeshWorkerParameters,
+  ParseMeshWorkerReturnType,
+} from "./parseMesh.worker";
 import { usingMemoizedWorkerTask } from "workers/usingWorker";
 import parseMeshWorkerUrl from "./parseMesh.worker.ts?worker&url";
 
@@ -11,4 +14,4 @@ export class ParseMeshWorker extends Worker {
 export const parseMeshAsync = usingMemoizedWorkerTask<
   ParseMeshWorkerParameters,
   ParseMeshWorkerReturnType
->(ParseMeshWorker);
+>(ParseMeshWorker);

client/src/components/renderer/map-parser/network/parseNetwork.worker.ts

@@ -12,6 +12,7 @@ import {
 import pluralize from "pluralize";
 import { Point } from "protocol";
 import { ParsedMap } from "../Parser";
+import { usingMessageHandler } from "../../../../workers/usingWorker";
 
 export type Options = {
   color?: string;
@@ -149,6 +150,7 @@ function parseNetwork({
   };
 }
 
-onmessage = ({ data }: MessageEvent<ParseNetworkWorkerParameters>) => {
-  postMessage(parseNetwork(data));
-};
+onmessage = usingMessageHandler(
+  async ({ data }: MessageEvent<ParseNetworkWorkerParameters>) =>
+    parseNetwork(data)
+);

client/src/components/renderer/map-parser/network/parseNetworkAsync.ts

@@ -1,4 +1,7 @@
-import { ParseNetworkWorkerParameters, ParseNetworkWorkerReturnType } from "./parseNetwork.worker";
+import {
+  ParseNetworkWorkerParameters,
+  ParseNetworkWorkerReturnType,
+} from "./parseNetwork.worker";
 import { usingMemoizedWorkerTask } from "workers/usingWorker";
 import parseNetworkWorkerUrl from "./parseNetwork.worker.ts?worker&url";
 
@@ -11,4 +14,4 @@ export class ParseNetworkWorker extends Worker {
 export const parseNetworkAsync = usingMemoizedWorkerTask<
   ParseNetworkWorkerParameters,
   ParseNetworkWorkerReturnType
->(ParseNetworkWorker);
+>(ParseNetworkWorker);

client/src/components/renderer/map-parser/poly/parsePoly.worker.ts

@@ -2,6 +2,7 @@ import { chunk, Dictionary, flatten, identity, maxBy, minBy } from "lodash";
 import pluralize from "pluralize";
 import { Point } from "protocol";
 import { ParsedMap } from "../Parser";
+import { usingMessageHandler } from "../../../../workers/usingWorker";
 
 export type Options = {
   color?: string;
@@ -70,6 +71,6 @@ function parsePoly({
   };
 }
 
-onmessage = ({ data }: MessageEvent<ParsePolyWorkerParameters>) => {
-  postMessage(parsePoly(data));
-};
+onmessage = usingMessageHandler(
+  async ({ data }: MessageEvent<ParsePolyWorkerParameters>) => parsePoly(data)
+);

client/src/components/renderer/map-parser/poly/parsePolyAsync.ts

@@ -1,4 +1,7 @@
-import { ParsePolyWorkerParameters, ParsePolyWorkerReturnType } from "./parsePoly.worker";
+import {
+  ParsePolyWorkerParameters,
+  ParsePolyWorkerReturnType,
+} from "./parsePoly.worker";
 import { usingMemoizedWorkerTask } from "workers/usingWorker";
 import parsePolyWorkerUrl from "./parsePoly.worker.ts?worker&url";
 
@@ -11,4 +14,4 @@ export class ParsePolyWorker extends Worker {
 export const parsePolyAsync = usingMemoizedWorkerTask<
   ParsePolyWorkerParameters,
   ParsePolyWorkerReturnType
->(ParsePolyWorker);
+>(ParsePolyWorker);

client/src/components/renderer/parser-v140/ParseTraceSlaveWorker.ts

@@ -0,0 +1,104 @@
+import { chain, findLast, groupBy, mapValues, range } from "lodash";
+import { CompiledComponent, EventContext, TraceEvent } from "protocol";
+import { Trace } from "protocol/Trace-v140";
+import { ComponentEntry } from "renderer";
+import { normalizeConstant } from "./normalize";
+import { parse as parseComponents } from "./parse";
+
+type C = CompiledComponent<string, Record<string, any>>;
+const isNullish = (x: KeyRef): x is Exclude<KeyRef, Key> =>
+  x === undefined || x === null;
+type Key = string | number;
+type KeyRef = Key | null | undefined;
+const getPersistence = (c: C) =>
+  !c.clear
+    ? "persistent"
+    : typeof c.clear === "string"
+    ? "special"
+    : "transient";
+type Persistence = ReturnType<typeof getPersistence>;
+function mergePrototype<T>(target: T, source: any) {
+  Object.setPrototypeOf(target, source);
+  return target;
+}
+
+export type ParseTraceWorkerSlaveReturnType = {
+  event: TraceEvent;
+  components: {
+    [K in Persistence]: ComponentEntry[];
+  };
+}[];
+const GREY = "#808080";
+export function parse({
+  trace,
+  context,
+  view = "main",
+  from = 0,
+  to = trace?.events?.length ?? 0,
+}: ParseTraceWorkerParameters): ParseTraceWorkerSlaveReturnType {
+  const parsed = parseComponents(
+    trace?.views?.[view] ?? [],
+    trace?.views ?? {}
+  );
+
+  const makeEntryIteratee = (step: number) => (component: C) => {
+    return {
+      component,
+      meta: { source: "trace", step: from + step, info: component.$info },
+    };
+  };
+
+  const r = chain(trace?.events)
+    .map((c, i) => ({ step: i, id: c.id, data: c, pId: c.pId }))
+    .groupBy("id")
+    .value();
+
+  return chain(range(from, to))
+    .map((i) => {
+      const e = trace!.events![i]!;
+      const esx = trace!.events!;
+      const component = parsed(
+        normalizeConstant(
+          mergePrototype(
+            {
+              alpha: 1,
+              fill: GREY,
+              __internal__: {
+                context,
+                step: i,
+                parent: !isNullish(e.pId)
+                  ? esx[findLast(r[e.pId], (x) => x.step <= i)?.step ?? 0]
+                  : undefined,
+                events: esx,
+              },
+            },
+            e
+          )
+        )
+      );
+      return {
+        event: e,
+        components: groupBy(component, getPersistence) as {
+          [K in Persistence]: C[];
+        },
+      };
+    })
+    .map((c, i) => ({
+      event: c.event,
+      components: mapValues(c.components, (c2) => c2.map(makeEntryIteratee(i))),
+    }))
+    .value();
+}
+
+export type ParseTraceWorkerParameters = {
+  trace?: Trace;
+  context: EventContext;
+  view?: string;
+  from?: number;
+  to?: number;
+};
+
+export type ParseTraceWorkerReturnType = {
+  stepsPersistent: ComponentEntry[][];
+  stepsTransient: ComponentEntry[][];
+};