diff --git a/app/components/InfoPanel.tsx b/app/components/InfoPanel.tsx index bcdf5ee..f616829 100644 --- a/app/components/InfoPanel.tsx +++ b/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 ( <>
@@ -34,7 +26,7 @@ export function InfoPanel() { - {isSelectedLeafNode && } +
); diff --git a/app/utilities/relatedValues.ts b/app/utilities/relatedValues.ts index f3abd7f..0b4371c 100644 --- a/app/utilities/relatedValues.ts +++ b/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; diff --git a/tests/relatedValues.test.ts b/tests/relatedValues.test.ts index 1e1834c..b0eef6a 100644 --- a/tests/relatedValues.test.ts +++ b/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"], }, ]);