Display related values on Array and Object paths as well

app/components/InfoPanel.tsx

@@ -4,24 +4,16 @@ import { PropertiesValue } from "./Properties/PropertiesValue";
 import { InfoHeader } from "./InfoHeader";
 import { ContainerInfo } from "./ContainerInfo";
 import { useSelectedInfo } from "~/hooks/useSelectedInfo";
-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 { selectedNodeId } = useJsonColumnViewState();
   const relatedPaths = useRelatedPaths();
 
   if (!selectedInfo) {
     return <></>;
   }
 
-  const isSelectedLeafNode =
-    selectedInfo.name !== "object" && selectedInfo.name !== "array";
-
   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">
@@ -34,7 +26,7 @@ export function InfoPanel() {
 
         <ContainerInfo />
 
-        {isSelectedLeafNode && <RelatedValues relatedPaths={relatedPaths} />}
+        <RelatedValues relatedPaths={relatedPaths} />
       </div>
     </>
   );

app/utilities/relatedValues.ts

@@ -28,6 +28,10 @@ export function groupRelatedValues(
       return "undefined";
     } else if (value == null) {
       return "null";
+    } else if (Array.isArray(value)) {
+      return "[...]";
+    } else if (typeof value === "object") {
+      return "{...}";
     } else {
       return value.toString();
     }
@@ -71,6 +75,8 @@ export function getRelatedPathsAtPath(
 
     if (inferredType.name !== "array") continue;
 
+    if (index + 1 === pathDepth) continue;
+
     for (
       let childIndex = 0;
       childIndex < inferredType.value.length;

tests/relatedValues.test.ts

@@ -46,6 +46,9 @@ const json = {
       },
       id: "B65hEUWW01ErVKDDGImKcBquYhwEAkjW6Ic3lPY0299Cc",
       created_at: "1607587513",
+      another_field: {
+        nested: "value",
+      },
       modifiedAt: null,
     },
     {
@@ -75,11 +78,62 @@ const json = {
       },
       id: "B65hEUWW01ErVKDDGImKcBquYhwEAkjW6Ic3lPY0299Cc",
       created_at: "1607587513",
+      another_field: {
+        nested: "value",
+      },
     },
   ],
 };
 
 describe("calculateRelatedValuesGroups", () => {
+  test("it should return the correct values when path is an object", () => {
+    const path = "$.data.1.another_field";
+
+    const result = calculateRelatedValuesGroups(path, json);
+
+    expect(result).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "paths": Array [
+      "$.data.1.another_field",
+      "$.data.2.another_field",
+    ],
+    "value": "{...}",
+  },
+  Object {
+    "paths": Array [
+      "$.data.0.another_field",
+    ],
+    "value": "undefined",
+  },
+]
+`);
+  });
+
+  test("it should return the correct values when path is an array", () => {
+    const path = "$.data.1.recent_asset_ids";
+
+    const result = calculateRelatedValuesGroups(path, json);
+
+    expect(result).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "paths": Array [
+      "$.data.1.recent_asset_ids",
+      "$.data.2.recent_asset_ids",
+    ],
+    "value": "[...]",
+  },
+  Object {
+    "paths": Array [
+      "$.data.0.recent_asset_ids",
+    ],
+    "value": "undefined",
+  },
+]
+`);
+  });
+
   test("it should return the correct related values grouped by value", () => {
     const path = "$.data.1.playback_ids.0.policy";
 
@@ -106,7 +160,7 @@ describe("calculateRelatedValuesGroups", () => {
         paths: ["$.data.2.playback_ids.1.policy"],
       },
       {
-        value: "[object Object]",
+        value: "{...}",
         paths: ["$.data.2.playback_ids.2.policy"],
       },
     ]);