feat: add Statistics component and integrate with state management; update App component to include Statistics

Author: Kevin

src/App.tsx

@@ -8,6 +8,7 @@ import { Stage } from "./components/Stage";
 import { Logs } from "Logs";
 import { Selection } from "leva-controls/Selection";
 import { Examples } from "leva-controls/Examples";
+import { Statistics } from "leva-controls/Statistics";
 
 function App() {
   return (
@@ -18,6 +19,7 @@ function App() {
         <Inputs />
         <Playback />
         <Selection />
+        <Statistics />
         <Logs />
       </Suspense>
       <div style={{ height: "100vh", width: "100vw" }}>
@@ -29,7 +31,7 @@ function App() {
               folderTitleHeight: "32px",
               numberInputMinWidth: "90px",
               rowHeight: "32px",
-              rootWidth: "400px",
+              rootWidth: "420px",
               controlWidth: "240px",
             },
             fonts: {

src/client/run.ts

@@ -16,7 +16,7 @@ import {
 import { useRef } from "react";
 import { Output } from "smart";
 import { id } from "utils";
-import { appendAtom, clearAtom, logAtom, State } from "./state";
+import { appendAtom, clearAtom, logAtom, State, statsAtom } from "./state";
 
 // ─── Input State ─────────────────────────────────────────────────────────────
 
@@ -73,6 +73,7 @@ export function useRun() {
   const { data: contents } = useSolutionContents();
   const append = useSetAtom(appendAtom);
   const clear = useSetAtom(clearAtom);
+  const setStats = useSetAtom(statsAtom);
   const setLog = useSetAtom(logAtom);
   const abort = useRef<() => void | null>();
   const setBuffering = useSetAtom(bufferingAtom);
@@ -115,7 +116,6 @@ export function useRun() {
           const progress: State["progress"] = {};
           let adg: State["adg"] = undefined;
           let prev: State["step"] | undefined = undefined;
-          let stats: State["stats"] = undefined;
 
           // ─────────────────────────────────────
 
@@ -167,7 +167,7 @@ export function useRun() {
                         progress[d.agent] = pick(d, "finished", "total");
                         break;
                       case "stats":
-                        stats = omit(d, "type");
+                        setStats(omit(d, "type"));
                         break;
                       case "error":
                         console.error(d.error);
@@ -190,7 +190,6 @@ export function useRun() {
                     adg,
                     agentState: structuredClone(agentState),
                     progress: structuredClone(progress),
-                    stats: structuredClone(stats),
                   });
                 }
                 s.unsubscribe();

src/client/state.ts

@@ -32,9 +32,11 @@ export type State = {
   adg?: AdgProgress;
   agentState?: Record<number, StateChange["value"]>;
   progress?: Record<number, Pick<ExecProgress, "finished" | "total">>;
-  stats?: Omit<Stats, "type">;
 };
 
+export const statsAtom = atom<Omit<Stats, "type">>();
+export const useStats = () => useAtom(statsAtom);
+
 export const logAtom = atom<string[]>([]);
 export const useLog = () => useAtom(logAtom);
 
@@ -241,6 +243,7 @@ export const clearAtom = atom<null, never[], unknown>(null, (_get, set) => {
     set(selectionAtom, new Set());
     set(lengthAtom, 0);
     set(timespanAtom, 0);
+    set(statsAtom, undefined);
     await clear();
     await set(setCacheAtom);
   }, 0);

src/Status.tsx src/components/Status.tsxsrc/Status.tsx renamed to src/components/Status.tsx

@@ -3,7 +3,7 @@ import { useControls } from "leva";
 import { jsx } from "leva-plugins/jsx";
 import { thru } from "lodash";
 import { useEffect } from "react";
-import { Status } from "Status";
+import { Status } from "components/Status";
 
 export function Selection() {
   const [selection] = useSelection();

src/leva-controls/Selection.tsx

@@ -0,0 +1,46 @@
+import { useSolutionContents } from "client/run";
+import { useLength, useStats } from "client/state";
+import { useControls } from "leva";
+import { jsx } from "leva-plugins/jsx";
+import { Components } from "leva/plugin";
+import { round, sum, values } from "lodash";
+
+function Statistics1() {
+  const [stats] = useStats();
+  const length = useLength();
+  return stats ? (
+    <div>
+      <Components.Row input>
+        <Components.Label>Sum of costs</Components.Label>
+        <Components.Label>{stats.mapf_plan_cost}</Components.Label>
+      </Components.Row>
+      <Components.Row input>
+        <Components.Label>Makespan</Components.Label>
+        <Components.Label>{round(length / 10, 1)}s</Components.Label>
+      </Components.Row>
+      <Components.Row input>
+        <Components.Label>Average time</Components.Label>
+        <Components.Label>
+          {round(
+            sum(values(stats.agent_exec_cost)) /
+              values(stats.agent_exec_cost).length /
+              10,
+            1
+          )}
+          s
+        </Components.Label>
+      </Components.Row>
+    </div>
+  ) : (
+    "You'll see trends here once simulation ends."
+  );
+}
+
+export function Statistics() {
+  useControls("Statistics", () => ({
+    selection: jsx({
+      value: <Statistics1 />,
+    }),
+  }));
+  return null;
+}