From fe8ae6c0df567c2e33dc5edf97de14bdf0c133e7 Mon Sep 17 00:00:00 2001
From: Kevin Zheng <kaiwen530@gmail.com>
Date: Tue, 25 Apr 2023 02:16:45 +1000
Subject: [PATCH] Fix bug with path

---
 client/src/components/renderer/grid/Path.tsx    | 6 +++---
 client/src/components/renderer/mesh/Path.tsx    | 6 +++---
 client/src/components/renderer/network/Path.tsx | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/components/renderer/grid/Path.tsx b/client/src/components/renderer/grid/Path.tsx
index 525890d1..8f7f8f4c 100644
--- a/client/src/components/renderer/grid/Path.tsx
+++ b/client/src/components/renderer/grid/Path.tsx
@@ -1,6 +1,6 @@
 import { Graphics } from "@inlet/react-pixi";
 import { Graphics as PixiGraphics } from "@pixi/graphics";
-import { isNull, isUndefined, keyBy } from "lodash";
+import { isNull, isUndefined, keyBy, range } from "lodash";
 import { TraceEvent } from "protocol/Trace";
 import { useMemo } from "react";
 import { getColor } from "../colors";
@@ -22,13 +22,13 @@ type PathProps = {
 
 export function Path({ nodes = [], step = 0, scale: { to } }: PathProps) {
   const path = useMemo(() => {
-    const memo = keyBy(nodes, "id");
+    const memo = range(nodes.length).map((i) => keyBy(nodes.slice(0, i), "id"));
     return (s: number) => {
       const out = [];
       let next: TraceEvent | undefined = nodes[s];
       while (next) {
         out.push(next);
-        next = defined(next.pId) ? memo[`${next.pId}`] : undefined;
+        next = defined(next.pId) ? memo[s][`${next.pId}`] : undefined;
       }
       return out;
     };
diff --git a/client/src/components/renderer/mesh/Path.tsx b/client/src/components/renderer/mesh/Path.tsx
index d30af703..53c250a5 100644
--- a/client/src/components/renderer/mesh/Path.tsx
+++ b/client/src/components/renderer/mesh/Path.tsx
@@ -1,6 +1,6 @@
 import { Graphics } from "@inlet/react-pixi";
 import { Graphics as PixiGraphics } from "@pixi/graphics";
-import { isNull, isUndefined, keyBy } from "lodash";
+import { isNull, isUndefined, keyBy, range } from "lodash";
 import { TraceEvent } from "protocol/Trace";
 import { useMemo } from "react";
 import { getColor } from "../colors";
@@ -22,13 +22,13 @@ type PathProps = {
 
 export function Path({ nodes = [], step = 0, scale }: PathProps) {
   const path = useMemo(() => {
-    const memo = keyBy(nodes, "id");
+    const memo = range(nodes.length).map((i) => keyBy(nodes.slice(0, i), "id"));
     return (s: number) => {
       const out = [];
       let next: TraceEvent | undefined = nodes[s];
       while (next) {
         out.push(next);
-        next = defined(next.pId) ? memo[`${next.pId}`] : undefined;
+        next = defined(next.pId) ? memo[s][`${next.pId}`] : undefined;
       }
       return out;
     };
diff --git a/client/src/components/renderer/network/Path.tsx b/client/src/components/renderer/network/Path.tsx
index c6ffe394..ebe5866f 100644
--- a/client/src/components/renderer/network/Path.tsx
+++ b/client/src/components/renderer/network/Path.tsx
@@ -1,6 +1,6 @@
 import { Graphics } from "@inlet/react-pixi";
 import { Graphics as PixiGraphics } from "@pixi/graphics";
-import { isNull, isUndefined, keyBy } from "lodash";
+import { isNull, isUndefined, keyBy, range } from "lodash";
 import { TraceEvent } from "protocol/Trace";
 import { useMemo } from "react";
 import { getColor } from "../colors";
@@ -22,13 +22,13 @@ type PathProps = {
 
 export function Path({ nodes = [], step = 0, scale: { to } }: PathProps) {
   const path = useMemo(() => {
-    const memo = keyBy(nodes, "id");
+    const memo = range(nodes.length).map((i) => keyBy(nodes.slice(0, i), "id"));
     return (s: number) => {
       const out = [];
       let next: TraceEvent | undefined = nodes[s];
       while (next) {
         out.push(next);
-        next = defined(next.pId) ? memo[`${next.pId}`] : undefined;
+        next = defined(next.pId) ? memo[s][`${next.pId}`] : undefined;
       }
       return out;
     };