From 26ef6c12f08b3a4078edb8d5003da36111e29527 Mon Sep 17 00:00:00 2001
From: Matt Aitken <matt@mattaitken.com>
Date: Fri, 11 Mar 2022 16:59:33 +0000
Subject: [PATCH] Added caching for calculating related paths

---
 app/components/InfoPanel.tsx |  8 ++------
 app/hooks/useRelatedPaths.ts | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 6 deletions(-)
 create mode 100644 app/hooks/useRelatedPaths.ts

diff --git a/app/components/InfoPanel.tsx b/app/components/InfoPanel.tsx
index 0c25efd..bcdf5ee 100644
--- a/app/components/InfoPanel.tsx
+++ b/app/components/InfoPanel.tsx
@@ -8,11 +8,12 @@ import { useMemo } from "react";
 import { useJson } from "~/hooks/useJson";
 import { getRelatedPathsAtPath } from "~/utilities/relatedValues";
 import { useJsonColumnViewState } from "~/hooks/useJsonColumnView";
+import { useRelatedPaths } from "~/hooks/useRelatedPaths";
 
 export function InfoPanel() {
   const selectedInfo = useSelectedInfo();
-  const [json] = useJson();
   const { selectedNodeId } = useJsonColumnViewState();
+  const relatedPaths = useRelatedPaths();
 
   if (!selectedInfo) {
     return <></>;
@@ -21,11 +22,6 @@ export function InfoPanel() {
   const isSelectedLeafNode =
     selectedInfo.name !== "object" && selectedInfo.name !== "array";
 
-  const relatedPaths = useMemo(() => {
-    if (!selectedNodeId) return [];
-    return getRelatedPathsAtPath(selectedNodeId, json);
-  }, [selectedNodeId, json]);
-
   return (
     <>
       <div className="h-inspectorHeight p-4 bg-white border-l-[1px] border-slate-300 overflow-y-auto no-scrollbar transition dark:bg-slate-800 dark:border-slate-600">
diff --git a/app/hooks/useRelatedPaths.ts b/app/hooks/useRelatedPaths.ts
new file mode 100644
index 0000000..ef1c371
--- /dev/null
+++ b/app/hooks/useRelatedPaths.ts
@@ -0,0 +1,35 @@
+import { useMemo, useRef } from "react";
+import { getRelatedPathsAtPath } from "~/utilities/relatedValues";
+import { useJson } from "./useJson";
+import { useJsonColumnViewState } from "./useJsonColumnView";
+
+export function useRelatedPaths(): string[] {
+  const cache = useRef<RelatedPathCache>({});
+  const { selectedNodeId } = useJsonColumnViewState();
+  const [json] = useJson();
+
+  return useMemo(() => {
+    if (!selectedNodeId) return [];
+
+    //check cache
+    const cachedPaths = cache.current[selectedNodeId];
+    if (cachedPaths) {
+      return cachedPaths;
+    }
+
+    //fetch result
+    let paths = getRelatedPathsAtPath(selectedNodeId, json);
+
+    //cache
+    for (let index = 0; index < paths.length; index++) {
+      const path = paths[index];
+      cache.current[path] = paths;
+    }
+
+    return paths;
+  }, [selectedNodeId, json]);
+}
+
+type RelatedPathCache = {
+  [index: string]: Array<string>;
+};