refactor: enhance agent state handling and visualization components

Author: Kevin

src/Status.tsx

@@ -1,7 +1,7 @@
 import { useAgentInfo } from "client/state";
 import { colors } from "colors";
 import { Components } from "leva/plugin";
-import { chain, noop } from "lodash";
+import { chain, isUndefined, noop } from "lodash";
 import { useCss } from "react-use";
 
 const vectorProps = {
@@ -30,7 +30,7 @@ function Dot({ color }: { color: string }) {
     width: "var(--leva-space-sm)",
     height: "var(--leva-space-sm)",
     borderRadius: "50%",
-    marginBottom: "1.5px",
+    marginBottom: "1.2px",
     backgroundColor: color,
   });
   return <span className={cls} />;
@@ -58,23 +58,39 @@ export function Status({ id }: { id: number }) {
     },
   });
   if (!a) return null;
-  console.log(a.state);
   const status =
-    a.constraints?.length || a.state === "idle"
+    a.constraints?.length ||
+    a.state === "idle" ||
+    a.state === "finished" ||
+    a.state === "unknown" ||
+    isUndefined(a.state)
       ? {
-          color: a.state === "idle" ? colors.error : colors.warning,
-          label: `${
-            a.state === "idle" ? "Waiting for" : "Constrained by"
-          } ${chain(a.constraints)
-            .map((c) => c.id)
-            .uniq()
-            .thru(
-              (ids) =>
-                `${ids.length > 1 ? "agents" : "agent"} ${ids.join(", ")}`
-            )
-            .value()}`,
+          color:
+            isUndefined(a.state) ||
+            a.state === "finished" ||
+            a.state === "unknown"
+              ? colors.idle
+              : a.state === "idle"
+              ? colors.error
+              : colors.warning,
+          label: isUndefined(a.state)
+            ? "Initialising"
+            : a.state === "unknown"
+            ? "Not simulated"
+            : a.state === "finished"
+            ? "Finished"
+            : `${a.state === "idle" ? "Waiting for" : "Constrained by"} ${chain(
+                a.constraints
+              )
+                .map((c) => c.id)
+                .uniq()
+                .thru(
+                  (ids) =>
+                    `${ids.length > 1 ? "agents" : "agent"} ${ids.join(", ")}`
+                )
+                .value()}`,
         }
-      : { color: colors.success, label: "Healthy" };
+      : { color: colors.success, label: "Active" };
   return (
     <div className={cls}>
       <h4>
@@ -83,7 +99,6 @@ export function Status({ id }: { id: number }) {
           <Dot color={status.color} /> {status.label}
         </span>
       </h4>
-      <p>State: {a.state}</p>
       <Components.Row input>
         <Components.Label>Position</Components.Label>
         <Components.Vector

src/client/run.ts

@@ -3,8 +3,6 @@ import { Mutex } from "async-mutex";
 import { client } from "client/trpc";
 import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
-  clone,
-  cloneDeep,
   identity,
   isArray,
   isNumber,
@@ -122,9 +120,7 @@ export function useRun() {
                     switch (d.type) {
                       case "state_change":
                         if (isNumber(d.agent)) {
-                          console.log(d.agent, d.value);
                           agentState[d.agent] = d.value;
-                          console.log(structuredClone(agentState));
                         } else {
                           range(contents.count).forEach((i) => {
                             agentState[i] = d.value;

src/client/state.ts

@@ -11,6 +11,7 @@ import {
   isUndefined,
   round,
   throttle,
+  thru,
   zip,
 } from "lodash";
 import { store } from "store";
@@ -20,6 +21,7 @@ import { AdgProgress, StateChange, Step } from "smart";
 import { lerp, lerpRadians } from "utils";
 import { useSpeed } from "./play";
 import { selectionAtom } from "./selection";
+import { useSolutionContents } from "./run";
 
 const CHUNK_SIZE = 256;
 
@@ -93,29 +95,49 @@ export function usePreviousDefined<T>(t?: T) {
 const alpha = (n: number) => 0.1 - 1 / (0.1 * n + 1) + 1;
 
 export const useAgentInfo = (i: number) => {
-  return usePreviousDefined(
-    useAtomValue(
-      useMemo(
-        () =>
-          atom((get) => {
-            const a = get(currentItemAtom);
-            const agent = a?.state?.agents?.[i];
-            if (!agent) return;
-            return {
-              state: a.agentState?.[i],
-              constraints: a.adg?.constraints?.[i]?.constraining_agent,
-              position: [agent.x + 0.5, 0, -agent.y - 0.5] as [
-                number,
-                number,
-                number
-              ],
-              rotation: [0, agent.rz, 0] as [number, number, number],
-            };
-          }),
-        [i]
-      )
+  const { data: solution } = useSolutionContents();
+  const initial = useMemo(
+    () => ({
+      state: "unknown",
+      position: thru(
+        solution?.paths?.[i]?.[0],
+        (a) => [-(a?.x ?? 0) + 0.5, 0, (a?.y ?? 0) - 0.5] as const
+      ),
+      rotation: [0, 0, 0] as const,
+      constraints: [],
+      id: i,
+    }),
+    [solution?.paths, i]
+  );
+  const v1 = useAtomValue(
+    useMemo(
+      () =>
+        atom((get) => {
+          const a = get(currentItemAtom);
+          const agent = a?.state?.agents?.[i];
+          if (!agent) return;
+          return {
+            id: i,
+            state: a.agentState?.[i],
+            constraints: a.adg?.constraints?.[i]?.constraining_agent,
+            position: [agent.x + 0.5, 0, -agent.y - 0.5] as [
+              number,
+              number,
+              number
+            ],
+            rotation: [0, agent.rz, 0] as [number, number, number],
+          };
+        }),
+      [i]
     )
   );
+  const previous = usePreviousDefined(v1 || initial);
+  return !v1
+    ? {
+        value: { ...previous.value, state: "unknown" },
+        isPrevious: true,
+      }
+    : previous;
 };
 
 function dist(a: [number, number, number], b: [number, number, number]) {
@@ -135,6 +157,7 @@ export const useAgentPosition = (i: number) => {
           // Teleport if too far away
           if (dist(p.position, v0.position) > 0.5) return v0;
           return {
+            id: v0.id,
             state: v0.state,
             constraints: v0.constraints,
             position: zip(p.position, v0.position).map(([a, b]) =>

src/colors.tsx

@@ -2,4 +2,5 @@ export const colors = {
   warning: "#ffc400",
   success: "#00e676",
   error: "#f50057",
+  idle: "#9e9e9e",
 };