{ selectedName ?? "nothing" }

import { inferType } from "@jsonhero/json-infer-types"; import { JSONHeroPath } from "@jsonhero/path"; import { useMemo, useState } from "react"; import { useJson } from "~/hooks/useJson"; import { 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(); 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 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); return (

setHovering(true)} onMouseLeave={() => setHovering(false)} > {isSelectedLeafNode && ( {formatRawValue(selectedInfo)} )}

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

); } function EmptyState() { return (

Nothing selected

null

); }