Fix issues resulting in crashes

ShortestPathLab · Oct 23, 2023 · 9d3f404 · 9d3f404
1 parent e1397e2
commit 9d3f404
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 53 deletions.
diff --git a/client/src/components/generic/Property.tsx b/client/src/components/generic/Property.tsx
@@ -1,29 +1,47 @@
-import { ReactNode } from "react";
-import { Flex } from "./Flex";
-import { Space } from "./Space";
 import {
   Typography as Type,
   TypographyProps as TypeProps,
 } from "@mui/material";
-
-
+import { truncate } from "lodash";
+import { ReactNode } from "react";
+import { Flex } from "./Flex";
+import { Space } from "./Space";
+import YAML from "yaml";
 
 type Props = {
   label?: ReactNode;
-  value?: ReactNode;
+  value?: any;
   type?: TypeProps<"div">;
 };
 
+function stringify(obj: any) {
+  switch (typeof obj) {
+    case "number":
+    case "string":
+      return `${obj}`;
+    case "undefined":
+      return "null";
+    default:
+      return (
+        <code>
+          {truncate(YAML.stringify(obj).replace("\n", ", "), {
+            length: 30,
+          })}
+        </code>
+      );
+  }
+}
+
 export function Property({ label, value, type }: Props) {
   return (
-    <Flex width="auto" mr={3} mt={0.5} key={`${label}::${value}`}>
+    <Flex width="auto" mr={3} mt={0.5} key={`${label}::${stringify(value)}`}>
       <Type component="div" sx={{ opacity: 0.54 }} {...type}>
         {label}
       </Type>
       <Space />
       <Type component="div" {...type}>
-        {value ?? "none"}
+        {stringify(value) ?? "none"}
       </Type>
     </Flex>
   );
-}
+}
diff --git a/client/src/components/inspector/TraceRenderer.tsx b/client/src/components/inspector/TraceRenderer.tsx
@@ -24,10 +24,10 @@ import { useRenderers } from "slices/renderers";
 
 const rendererOptions = {
   tileSubdivision: 2,
-  workerCount: 2,
+  workerCount: 3,
   tileResolution: {
-    width: 1024,
-    height: 1024,
+    width: 256,
+    height: 256,
   },
 };
 

diff --git a/client/src/components/layer-editor/layers/traceLayerSource.tsx b/client/src/components/layer-editor/layers/traceLayerSource.tsx
@@ -204,12 +204,7 @@ export const traceLayerSource: LayerSource<"trace", TraceLayerData> = {
               items: {
                 properties: {
                   index: -1,
-                  primary: (
-                    <PropertyList
-                      event={pick(event, ["id", "f", "g", "pId"])}
-                      vertical
-                    />
-                  ),
+                  primary: <PropertyList event={event} vertical />,
                 },
                 [`${event}`]: {
                   primary: `Go to Step ${step}`,

diff --git a/client/src/components/renderer/parser/parseTrace.ts b/client/src/components/renderer/parser/parseTrace.ts
@@ -29,12 +29,16 @@ export function useTrace(params: ParseTraceWorkerParameters) {
       usingLoadingState(async () => {
         if (params?.trace) {
           push("Processing trace...");
-          const output = await parseTraceAsync(params);
-          push(
-            "Trace loaded",
-            pluralize("step", output?.stepsPersistent?.length ?? 0, true)
-          );
-          return output;
+          try {
+            const output = await parseTraceAsync(params);
+            push(
+              "Trace loaded",
+              pluralize("step", output?.stepsPersistent?.length ?? 0, true)
+            );
+            return output;
+          } catch (e) {
+            push("Error parsing", `${e}`);
+          }
         }
       }),
     [params]

diff --git a/client/src/index.css b/client/src/index.css
@@ -1,3 +1,5 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto+Monoa&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
+
 html,
 body,
 #root {
@@ -22,6 +24,11 @@ body {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
+code {
+  font-family: "Roboto Mono", "Consolas", "Courier New", Courier, monospace;
+  transform: translateY(-10px);
+}
+
 @media (pointer: fine) {
   * {
     scrollbar-color: #888888 #f0f0f0;

diff --git a/client/src/manifest.json b/client/src/manifest.json
@@ -1,9 +1,9 @@
 {
   "short_name": "Visualiser",
   "name": "Visualiser",
-  "version":"1.0.4",
+  "version": "1.0.4",
   "description": "Visualise pathfinding search.",
-  "version_name":"1.0.4; mid October 2023",
+  "version_name": "1.0.4 patch 1; mid October 2023",
   "icons": [
     {
       "src": "./favicon.png",
@@ -27,12 +27,12 @@
   "scope": ".",
   "background_color": "#546e7a",
   "display_override": ["window-controls-overlay"],
-  "screenshots": 
-    [{
+  "screenshots": [
+    {
       "src": "./screenshots/0.png",
       "type": "image/jpeg",
       "sizes": "2560x1600",
       "form_factor": "wide"
-  }]
-
+    }
+  ]
 }
diff --git a/client/src/workers/usingWorker.ts b/client/src/workers/usingWorker.ts
@@ -16,10 +16,11 @@ export const usingWorkerTask =
   (inp: T) =>
     usingWorker<R>(w)((worker) => {
       worker.postMessage(inp);
-      return new Promise<R>((res) => {
+      return new Promise<R>((res, rej) => {
         worker.onmessage = (out) => {
           res(out.data as R);
         };
+        worker.onerror = rej;
       });
     });
 
@@ -29,4 +30,4 @@ export const usingMemoizedWorkerTask = <T, R>(
     async: true,
     length: 1,
   }
-) => memoize(usingWorkerTask(w), o);
+) => memoize(usingWorkerTask(w), o);
diff --git a/internal-renderers/src/d2-renderer/D2Renderer.ts b/internal-renderers/src/d2-renderer/D2Renderer.ts
@@ -118,7 +118,6 @@ class D2Renderer
 
   setup(options: Partial<D2RendererOptions>) {
     const o = { ...defaultD2RendererOptions, ...options };
-    // create a pixi application
     this.#setupPixi(o);
     this.setOptions(o);
     this.#handleWorkerChange(o);
@@ -160,6 +159,8 @@ class D2Renderer
       backgroundAlpha: 0,
       width: options.screenSize.width,
       height: options.screenSize.height,
+      autoDensity: true,
+      resolution: 2,
     });
 
     this.#viewport = new Viewport({
@@ -227,14 +228,15 @@ class D2Renderer
   );
 
   #startDynamicResolution() {
-    const { tileResolution, dynamicResolution } = this.#options;
+    const { dynamicResolution } = this.#options;
     const { dtMax, dtMin, increment, intervalMs, maxScale, minScale } =
       dynamicResolution;
     const targetFrames = floor(PIXI.Ticker.targetFPMS * intervalMs);
     let frames = 0;
     let cdt = 0;
     let scale = 1;
     this.#app!.ticker.add((dt) => {
+      const { tileResolution } = this.#options;
       if (!(frames % targetFrames)) {
         const adt = cdt / targetFrames;
         scale = clamp(

diff --git a/internal-renderers/src/d2-renderer/D2RendererOptions.ts b/internal-renderers/src/d2-renderer/D2RendererOptions.ts
@@ -36,8 +36,8 @@ export const defaultD2RendererOptions: D2RendererOptions = {
   workerCount: 4,
   workerIndex: 0,
   tileResolution: {
-    width: 128,
-    height: 128,
+    width: 64,
+    height: 64,
   },
   tileSubdivision: 0,
   refreshInterval: 1000 / 60,

diff --git a/resources/traces/v1.0.4/converted/aurora-polyanya.trace.json b/resources/traces/v1.0.4/converted/aurora-polyanya.trace.json
@@ -16,9 +16,10 @@
       "line1": [
         {
           "$": "path",
+          "visible": "{{ctx.currentStep == ctx.step}}",
           "points": [
-            { "x": "{{ctx.x2}}", "y": "{{ctx.y2}}" },
-            { "x": "{{ctx.x3}}", "y": "{{ctx.y3}}" },
+            { "x": "{{ctx.rayShootX ?? ctx.x}}", "y": "{{ctx.y2}}" },
+            { "x": "{{ctx.x3 ?? ctx.y}}", "y": "{{ctx.y3}}" },
             { "x": "{{ctx.x1}}", "y": "{{ctx.y1}}" },
             { "x": "{{ctx.x2}}", "y": "{{ctx.y2}}" }
           ],
@@ -38,15 +39,18 @@
           "fill": "{{ctx.color[ctx.type]}}"
         }
       ],
-      "mesh-event": [ { "$": "node" }, { "$": "line1" }, { "$": "triangle" } ]
+      "mesh-event": [{ "$": "node" }, { "$": "line1" }, { "$": "triangle" }]
     },
     "views": {
-      "main": { "renderer": "2d-pixi", "components": [ { "$": "mesh-event" } ] }
+      "main": { "renderer": "2d-pixi", "components": [{ "$": "mesh-event" }] }
     },
     "path": { "pivot": { "x": "{{ctx.x1}}", "y": "{{ctx.y1}}" }, "scale": 0.5 }
   },
   "path": {
-    "pivot": { "x": "{{'x' in ctx ? ctx.x : 0}}", "y": "{{'y' in ctx ? ctx.y : 0}}" },
+    "pivot": {
+      "x": "{{'x' in ctx ? ctx.x : 0}}",
+      "y": "{{'y' in ctx ? ctx.y : 0}}"
+    },
     "scale": 1
   },
   "events": [
@@ -1741,4 +1745,4 @@
       "y3": 307
     }
   ]
-}
+}
diff --git a/resources/traces/v1.0.4/converted/road-astar.trace.json b/resources/traces/v1.0.4/converted/road-astar.trace.json
@@ -12,28 +12,47 @@
         }
       ],
       "line": [
+        {
+          "$": "for",
+          "$let": "i", // Default i
+          "$from": 0, // Default 0
+          "$to": 4, // Required
+          "$step": 1, // Default 1
+          "$component": "circle"
+        },
+        {
+          "$": "circle",
+          "$for": {
+            "$let": "i", // Default i
+            "$from": 0, // Default 0
+            "$to": 4, // Required
+            "$step": 1 // Default 1
+          }
+        },
+        {
+          "$": "if",
+          "$condition": "{{true}}",
+          "$component": "circle"
+        },
         {
           "$": "path",
-          "points": [
-            {
-              "x": "{{ctx.parent ? ctx.parent.x : ctx.x}}",
-              "y": "{{ctx.parent ? ctx.parent.y : ctx.y}}"
-            },
-            { "x": "{{ctx.x}}", "y": "{{ctx.y}}" }
-          ],
+          "points": "{{ctx.agent1}}",
           "fill": "{{ctx.color[ctx.type]}}",
           "lineWidth": 90
         }
       ],
-      "road-event": [ { "$": "node" }, { "$": "line" } ]
+      "road-event": [{ "$": "node" }, { "$": "line" }]
     },
     "views": {
-      "main": { "renderer": "2d-pixi", "components": [ { "$": "road-event" } ] }
+      "main": { "renderer": "2d-pixi", "components": [{ "$": "road-event" }] }
     },
     "path": { "pivot": { "x": "{{ctx.x}}", "y": "{{ctx.y}}" }, "scale": 120 }
   },
   "path": {
-    "pivot": { "x": "{{'x' in ctx ? ctx.x : 0}}", "y": "{{'y' in ctx ? ctx.y : 0}}" },
+    "pivot": {
+      "x": "{{'x' in ctx ? ctx.x : 0}}",
+      "y": "{{'y' in ctx ? ctx.y : 0}}"
+    },
     "scale": 1
   },
   "events": [
@@ -22027,4 +22046,4 @@
       "y": 41118596
     }
   ]
-}
+}