feat: refactor performance collection

app/src/lib/performance/PerformanceViewer.svelte

@@ -1,168 +1,265 @@
 <script lang="ts">
-  import { browser } from "$app/environment";
   import Monitor from "./Monitor.svelte";
   import { humanizeNumber } from "$lib/helpers";
   import { Checkbox } from "@nodes/ui";
-
-  type PerformanceData = {
-    total: Record<string, number>;
-    runs: Record<string, number[]>[];
-  };
+  import localStore from "$lib/helpers/localStore";
+  import { type PerformanceData } from "./store";
 
   export let data: PerformanceData;
-  export let viewer: PerformanceData;
-  let lastRunOnly = true;
+
+  let activeType = localStore<string>("nodes.performance.active-type", "total");
+  let showAverage = true;
+
+  function getAverage(key: string) {
+    return (
+      data
+        .map((run) => run[key]?.[0])
+        .filter((v) => v !== undefined)
+        .reduce((acc, run) => acc + run, 0) / data.length
+    );
+  }
+
+  function round(v: number) {
+    if (v < 1) {
+      return Math.floor(v * 100) / 100;
+    }
+    if (v < 10) {
+      return Math.floor(v * 10) / 10;
+    }
+    return Math.floor(v);
+  }
+
+  function getAverages() {
+    let lastRun = data.at(-1);
+    if (!lastRun) return {};
+    return Object.keys(lastRun).reduce(
+      (acc, key) => {
+        acc[key] = getAverage(key);
+        return acc;
+      },
+      {} as Record<string, number>,
+    );
+  }
+
+  function getLast(key: string) {
+    return data.at(-1)?.[key][0] || 0;
+  }
+
+  function getLasts() {
+    return data.at(-1) || {};
+  }
 
   function getTotalPerformance(onlyLast = false) {
     if (onlyLast) {
       return (
-        data.runs.at(-1).runtime[0] + viewer.runs.at(-1)["create-geometries"][0]
+        getLast("runtime") +
+        getLast("create-geometries") +
+        getLast("worker-transfer")
       );
     }
-    return data.total.runtime + viewer.total["create-geometries"];
-  }
-
-  function count(input?: number | number[]) {
-    if (!input) return 0;
-    if (Array.isArray(input))
-      return input.reduce((acc, val) => acc + val, 0) / input.length;
-    return input;
+    return (
+      getAverage("runtime") +
+      getAverage("create-geometries") +
+      getAverage("worker-transfer")
+    );
   }
 
   function getCacheRatio(onlyLast = false) {
-    let ratio = onlyLast
-      ? count(data.runs.at(-1)?.["cache-hit"])
-      : count(data.total["cache-hit"]);
+    let ratio = onlyLast ? getLast("cache-hit") : getAverage("cache-hit");
 
-    return `${Math.floor(ratio * 100)}%`;
+    return Math.floor(ratio * 100);
   }
 
+  const viewerKeys = [
+    "total-vertices",
+    "total-faces",
+    "create-geometries",
+    "split-result",
+  ];
+
   function getPerformanceData(onlyLast: boolean = false) {
-    if (onlyLast) {
-      return Object.entries(data.runs.at(-1))
-        .map(([key, value]) => [key, value[0]])
-        .filter(
-          ([key]) =>
-            !key.startsWith("node/") &&
-            key !== "total" &&
-            !key.includes("cache"),
-        )
-        .sort((a, b) => b[1] - a[1]);
-    }
-    return Object.entries(data.total)
-      .sort((a, b) => b[1] - a[1])
+    let data = onlyLast ? getLasts() : getAverages();
+
+    return Object.entries(data)
       .filter(
         ([key]) =>
-          !key.startsWith("node/") && key !== "total" && !key.includes("cache"),
-      );
+          !key.startsWith("node/") &&
+          key !== "total" &&
+          !key.includes("cache") &&
+          !viewerKeys.includes(key),
+      )
+      .sort((a, b) => b[1] - a[1]);
   }
 
   function getNodePerformanceData(onlyLast: boolean = false) {
-    if (onlyLast) {
-      return Object.entries(data.runs.at(-1))
-        .map(([key, value]) => [key, value[0]])
-        .filter(([key]) => key.startsWith("node/"))
-        .sort((a, b) => b[1] - a[1]);
-    }
-    return Object.entries(data.total)
+    let data = onlyLast ? getLasts() : getAverages();
+
+    return Object.entries(data)
       .filter(([key]) => key.startsWith("node/"))
       .sort((a, b) => b[1] - a[1]);
   }
 
   function getViewerPerformanceData(onlyLast: boolean = false) {
-    if (onlyLast) {
-      return Object.entries(viewer.runs.at(-1))
-        .map(([key, value]) => [key, value[0]])
-        .filter(([key]) => key !== "total-vertices" && key !== "total-faces")
-        .sort((a, b) => b[1] - a[1]);
-    }
-    return Object.entries(viewer.total)
-      .filter(([key]) => key !== "total-vertices" && key !== "total-faces")
+    let data = onlyLast ? getLasts() : getAverages();
+    return Object.entries(data)
+      .filter(
+        ([key]) =>
+          key !== "total-vertices" &&
+          key !== "total-faces" &&
+          viewerKeys.includes(key),
+      )
       .sort((a, b) => b[1] - a[1]);
   }
 
-  function constructPoints(key: keyof (typeof data.runs)[0]) {
-    return data.runs.map((run, i) => {
-      return run[key][0];
+  function getTotalPoints() {
+    if (showAverage) {
+      return data.map((run) => {
+        return (
+          run["runtime"].reduce((acc, v) => acc + v, 0) +
+          run["create-geometries"].reduce((acc, v) => acc + v, 0) +
+          run["worker-transfer"].reduce((acc, v) => acc + v, 0)
+        );
+      });
+    }
+
+    return data.map((run) => {
+      return (
+        run["runtime"][0] +
+        run["create-geometries"][0] +
+        run["worker-transfer"][0]
+      );
     });
   }
+
+  function constructPoints(key: string) {
+    if (key === "total") {
+      return getTotalPoints();
+    }
+    return data.map((run) => {
+      if (key in run) {
+        if (showAverage) {
+          return run[key].reduce((acc, v) => acc + v, 0) / run[key].length;
+        } else {
+          return run[key][0];
+        }
+      }
+      return 0;
+    });
+  }
+
+  function getTitle(t: string) {
+    if (t.includes("/")) {
+      return `Node ${t.split("/").slice(-1).join("/")}`;
+    }
+
+    return t
+      .split("-")
+      .map((v) => v[0].toUpperCase() + v.slice(1))
+      .join(" ");
+  }
 </script>
 
-{#key data}
-  {#if browser}
-    <Monitor points={constructPoints("runtime")} />
+{#key $activeType && data}
+  {#if $activeType === "cache-hit"}
+    <Monitor
+      title="Cache Hits"
+      points={constructPoints($activeType)}
+      min={0}
+      max={1}
+      type="%"
+    />
+  {:else}
+    <Monitor
+      title={getTitle($activeType)}
+      points={constructPoints($activeType)}
+    />
   {/if}
 
   <div class="p-4">
     <div class="flex items-center gap-2">
-      <Checkbox id="show-total" bind:value={lastRunOnly} />
+      <Checkbox id="show-total" bind:value={showAverage} />
       <label for="show-total">Show Average</label>
     </div>
-    {#if data.runs.length !== 0}
+    {#if data.length !== 0}
       <h3>General</h3>
       <table>
         <tr>
           <td>
-            {Math.floor(getTotalPerformance(!lastRunOnly) * 100) / 100}<span
-              >ms</span
+            {round(getTotalPerformance(!showAverage))}<span>ms</span>
+          </td>
+          <td
+            class:active={$activeType === "total"}
+            on:click={() => ($activeType = "total")}
+          >
+            total<span
+              >({Math.floor(1000 / getTotalPerformance(showAverage))}fps)</span
             >
           </td>
-          <td>total</td>
         </tr>
-        {#each getPerformanceData(!lastRunOnly) as [key, value]}
+        {#each getPerformanceData(!showAverage) as [key, value]}
           <tr>
             <td>
-              {Math.floor(value * 100) / 100}<span>ms</span>
+              {round(value)}<span>ms</span>
             </td>
-            <td>
+            <td
+              class:active={$activeType === key}
+              on:click={() => ($activeType = key)}
+            >
               {key}
             </td>
           </tr>
         {/each}
 
         <tr>
-          <td> {getCacheRatio(!lastRunOnly)} </td>
-          <td>cache hit</td>
-        </tr>
-
-        <tr>
-          <td>{data.runs.length}</td>
+          <td>{data.length}</td>
           <td>Samples</td>
         </tr>
 
         <h3>Nodes</h3>
-        {#each getNodePerformanceData(!lastRunOnly) as [key, value]}
+        <tr>
+          <td> {getCacheRatio(!showAverage)}<span>%</span> </td>
+          <td
+            class:active={$activeType === "cache-hit"}
+            on:click={() => ($activeType = "cache-hit")}>cache hits</td
+          >
+        </tr>
+        {#each getNodePerformanceData(!showAverage) as [key, value]}
           <tr>
             <td>
-              {Math.floor(value * 100) / 100}<span>ms</span>
+              {round(value)}<span>ms</span>
             </td>
-            <td>
+
+            <td
+              class:active={$activeType === key}
+              on:click={() => ($activeType = key)}
+            >
               {key.split("/").slice(-1).join("/")}
             </td>
           </tr>
         {/each}
 
-        {#if viewer.runs.length}
-          <h3>Viewer</h3>
+        <h3>Viewer</h3>
+        <tr>
+          <td>{humanizeNumber(getLast("total-vertices"))}</td>
+          <td>Vertices</td>
+        </tr>
+        <tr>
+          <td>{humanizeNumber(getLast("total-faces"))}</td>
+          <td>Faces</td>
+        </tr>
+        {#each getViewerPerformanceData(!showAverage) as [key, value]}
           <tr>
-            <td>{humanizeNumber(viewer.runs.at(-1)?.["total-vertices"])}</td>
-            <td>Vertices</td>
+            <td>
+              {round(value)}<span>ms</span>
+            </td>
+            <td
+              class:active={$activeType === key}
+              on:click={() => ($activeType = key)}
+            >
+              {key.split("/").slice(-1).join("/")}
+            </td>
           </tr>
-          <tr>
-            <td>{humanizeNumber(viewer.runs.at(-1)?.["total-faces"])}</td>
-            <td>Faces</td>
-          </tr>
-          {#each getViewerPerformanceData(!lastRunOnly) as [key, value]}
-            <tr>
-              <td>
-                {Math.floor(value * 100) / 100}<span>ms</span>
-              </td>
-              <td>
-                {key.split("/").slice(-1).join("/")}
-              </td>
-            </tr>
-          {/each}
-        {/if}
+        {/each}
       </table>
     {:else}
       <p>No runs available</p>
@@ -185,6 +282,9 @@
     padding-right: 10px;
     padding-block: 5px;
   }
+  td.active {
+    font-weight: bold;
+  }
   tr > td:nth-child(1) {
     text-align: right;
   }