{ selectedName ?? "nothing" }

import { inferType } from "@jsonhero/json-infer-types"; import { JSONHeroPath } from "@jsonhero/path"; import { useCallback, useMemo, useState } from "react"; import { useJson } from "~/hooks/useJson"; import { useJsonColumnViewAPI, useJsonColumnViewState, } from "~/hooks/useJsonColumnView"; import { concatenated, getHierarchicalTypes } from "~/utilities/dataType"; import { formatRawValue } from "~/utilities/formatter"; import { isNullable } from "~/utilities/nullable"; import { CopyTextButton } from "./CopyTextButton"; import { Body } from "./Primitives/Body"; import { LargeMono } from "./Primitives/LargeMono"; import { Title } from "./Primitives/Title"; import { ValueIcon, ValueIconSize } from "./ValueIcon"; export type InfoHeaderProps = { relatedPaths: string[]; }; export function InfoHeader({ relatedPaths }: InfoHeaderProps) { const { selectedNodeId, highlightedNodeId, selectedNodes } = useJsonColumnViewState(); const { goToNodeId } = useJsonColumnViewAPI(); if (!selectedNodeId || !highlightedNodeId || selectedNodes.length === 0) { return ; } const selectedNode = selectedNodes[selectedNodes.length - 1]; const [json] = useJson(); const selectedHeroPath = new JSONHeroPath(selectedNodeId); const selectedJson = selectedHeroPath.first(json); const selectedInfo = inferType(selectedJson); const formattedSelectedInfo = formatRawValue(selectedInfo); const selectedName = selectedNode.longTitle ?? selectedNode.title; const isSelectedLeafNode = selectedInfo.name !== "object" && selectedInfo.name !== "array"; const canBeNull = useMemo(() => { return isNullable(relatedPaths, json); }, [relatedPaths, json]); const [hovering, setHovering] = useState(false); console.warn(selectedInfo); const newPath = formattedSelectedInfo.replace(/^#/, "$").replace(/\//g, "."); const handleClick = useCallback(() => { goToNodeId(newPath, "pathBar"); }, [newPath, goToNodeId]); return (

setHovering(true)} onMouseLeave={() => setHovering(false)} > {isSelectedLeafNode && ( {selectedNode.name === "$ref" && checkPathExists(json, newPath) ? ( ) : ( formatRawValue(selectedInfo) )} )}

{concatenated(getHierarchicalTypes(selectedInfo))} {canBeNull && Can be null}

); } function checkPathExists(json: unknown, newPath: string) { const heroPath = new JSONHeroPath(newPath); const node = heroPath.first(json); return Boolean(node); } function EmptyState() { return (

Nothing selected

null

); }