Implement display: transient/persistent

client/main.js

@@ -54,13 +54,27 @@ server.listen(0, () => {
       autoHideMenuBar: true,
       center: true,
       show: false,
+      titleBarStyle: "hidden",
+      titleBarOverlay: {
+        color: "#00000000",
+        symbolColor: "#00000000",
+      },
+      webPreferences: {
+        preload: path.resolve(__dirname, "preload.js"),
+      },
     });
     win.loadURL(`http://localhost:${port}/index.html`);
     win.maximize();
     win.show();
     win.webContents.on("did-finish-load", () => {
       win.webContents.setZoomFactor(0.9);
     });
+    electron.ipcMain.handle("title-bar", (_e, background, foreground) => {
+      win.setTitleBarOverlay({
+        color: background,
+        symbolColor: foreground,
+      });
+    });
   };
   electron.app.whenReady().then(() => {
     createWindow();

client/package.json

@@ -48,7 +48,7 @@
   },
   "scripts": {
     "start": "vite",
-    "build": "vite build",
+    "build": "vite build --emptyOutDir",
     "package": "sh ./package.sh",
     "test": "vitest"
   },

client/package.sh

@@ -1,2 +1,2 @@
-npx electron-packager . Waypoint --dir dist --platform=win32 --arch=x64 --electronVersion=26.2.1 --ignore node_modules --ignore src --overwrite --icon ./dist/favicon --out bin
-npx electron-packager . Waypoint --dir dist --platform=linux --arch=x64 --electronVersion=26.2.1 --ignore node_modules --ignore src --overwrite --icon ./dist/favicon --out bin
+npx electron-packager . Visualiser --dir dist --platform=win32 --arch=x64 --electronVersion=26.2.1 --ignore node_modules --ignore src --overwrite --icon ./dist/favicon --out bin
+npx electron-packager . Visualiser --dir dist --platform=linux --arch=x64 --electronVersion=26.2.1 --ignore node_modules --ignore src --overwrite --icon ./dist/favicon --out bin

client/preload.js

@@ -0,0 +1,9 @@
+process.once("loaded", () => {
+  const { contextBridge, ipcRenderer } = require("electron");
+
+  contextBridge.exposeInMainWorld("electron", {
+    async invoke(eventName, ...params) {
+      return await ipcRenderer.invoke(eventName, ...params);
+    },
+  });
+});

client/src/components/layer-editor/layers/traceLayerSource.tsx

@@ -156,14 +156,26 @@ export const traceLayerSource: LayerSource<"trace", TraceLayerData> = {
     const path = use2DPath(layer, throttledStep);
     const steps = useMemo(
       () =>
-        map(result?.steps, (c) =>
+        map(result?.stepsPersistent, (c) =>
           map(c, (d) => merge(d, { meta: { sourceLayer: layer?.key } }))
         ),
-      [result?.steps, layer]
+      [result?.stepsPersistent, layer]
+    );
+    const steps1 = useMemo(
+      () =>
+        map(result?.stepsTransient, (c) =>
+          map(c, (d) => merge(d, { meta: { sourceLayer: layer?.key } }))
+        ),
+      [result?.stepsTransient, layer]
+    );
+    const steps2 = useMemo(
+      () => [steps1[throttledStep] ?? []],
+      [steps1, throttledStep]
     );
     return (
       <>
         <LazyNodeList step={throttledStep} nodes={steps} />
+        <NodeList nodes={steps2} />
         {path}
       </>
     );

client/src/components/renderer/parser/parseTrace.ts

@@ -32,7 +32,7 @@ export function useTrace(params: ParseTraceWorkerParameters) {
           const output = await parseTraceAsync(params);
           push(
             "Trace loaded",
-            pluralize("step", output?.steps?.length ?? 0, true)
+            pluralize("step", output?.stepsPersistent?.length ?? 0, true)
           );
           return output;
         }

client/src/components/renderer/parser/parseTrace.worker.ts

@@ -1,4 +1,4 @@
-import { chain, findLast, map } from "lodash";
+import { chain, findLast, map, mapValues, negate } from "lodash";
 import {
   CompiledComponent,
   EventContext,
@@ -17,6 +17,9 @@ type Key = string | number;
 
 type KeyRef = Key | null | undefined;
 
+const isPersistent = (c: CompiledComponent<string, Record<string, any>>) =>
+  c.display !== "transient";
+
 function parse({
   trace,
   context,
@@ -61,21 +64,25 @@ function parse({
     .value();
 
   const steps = chain(trace?.events)
-    .map((e, i, esx) =>
-      apply(e, {
+    .map((e, i, esx) => {
+      const component = apply(e, {
         ...context,
         step: i,
         parent: !isNullish(e.pId)
           ? esx[findLast(r[e.pId], (x) => x.step <= i)?.step ?? 0]
           : undefined,
-      })
-    )
-    .map((c) => c.filter(isVisible))
-    .map((c, i) => c.map(makeEntryIteratee(i)))
+      });
+      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 {
-    steps,
+    stepsPersistent: map(steps, "persistent"),
+    stepsTransient: map(steps, "transient"),
   };
 }
 
@@ -86,7 +93,8 @@ export type ParseTraceWorkerParameters = {
 };
 
 export type ParseTraceWorkerReturnType = {
-  steps: ComponentEntry[][];
+  stepsPersistent: ComponentEntry[][];
+  stepsTransient: ComponentEntry[][];
 };
 
 onmessage = ({ data }: MessageEvent<ParseTraceWorkerParameters>) => {

client/src/hooks/useTitleBar.tsx

@@ -1,11 +1,24 @@
 import { useEffect } from "react";
 import { name } from "manifest.json";
+import { getContrastRatio } from "@mui/material";
+
+const getForegroundColor = (bg: string) =>
+  getContrastRatio(bg, "#ffffff") > getContrastRatio(bg, "#000000")
+    ? "#ffffff"
+    : "#000000";
 
 export function useTitleBar(color: string) {
   useEffect(() => {
     document
       .querySelector('meta[name="theme-color"]')!
       .setAttribute("content", color);
     document.title = name;
+    if ("electron" in window) {
+      (window.electron as any).invoke(
+        "title-bar",
+        "#00000000",
+        getForegroundColor(color)
+      );
+    }
   }, [color]);
 }