Fix issue where visualisation is not possible when an agent doesn't move

Author: spaaaacccee

client/src/pages/visualiser/useSolution.tsx

@@ -1,7 +1,9 @@
 import { useQuery } from "@tanstack/react-query";
 import {
+  assign,
   clamp,
   entries,
+  fill,
   floor,
   head,
   last,
@@ -30,6 +32,12 @@ import {
 import { optimiseGridMap } from "./optimiseGridMap";
 import { text } from "queries/query";
 
+function padArray<T>(arr: T[], size: number, value: T) {
+  if (arr.length >= size) return arr;
+  const padding = fill(new Array(size - arr.length), value);
+  return [...arr, ...padding];
+}
+
 export function processAgent(agent: string) {
   const reader = new Reader(agent);
   const seeker = new Seeker(reader, -1);
@@ -204,8 +212,12 @@ export function useSolution({
   const { sources, paths, timespan } = result ?? {};
 
   const getters = useMemo(
-    () => createAgentPositionGetter(sources ?? [], paths ?? [], timespan),
-    [sources, paths, timespan]
+    () => createAgentPositionGetter(sources ?? [], padArray(
+      paths ?? [],
+      instance?.agents ?? 0,
+      ""
+    ), timespan),
+    [sources, paths, timespan, instance?.agents]
   );
 
   return {