Function InfoHeader

app/components/InfoHeader.tsx:22–110

({ relatedPaths }: InfoHeaderProps)

};

export function InfoHeader({ relatedPaths }: InfoHeaderProps) {
  const { selectedNodeId, highlightedNodeId, selectedNodes } =
    useJsonColumnViewState();
  const { goToNodeId } = useJsonColumnViewAPI();

  if (!selectedNodeId || !highlightedNodeId || selectedNodes.length === 0) {
    return <EmptyState />;
  }

  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 (
    <div className="mb-4 pb-4">
      <div className="flex items-center">
        <Title className="flex-1 mr-2 overflow-hidden overflow-ellipsis break-words text-slate-700 transition dark:text-slate-200">
          { selectedName ?? "nothing" }
        </Title>
        <div>
          <ValueIcon
            monochrome
            type={selectedInfo}
            size={ValueIconSize.Medium}
          />
        </div>
      </div>
      <div
        className="relative w-full h-full"
        onMouseEnter={() => setHovering(true)}
        onMouseLeave={() => setHovering(false)}
      >
        {isSelectedLeafNode && (
          <LargeMono
            className={`z-10 py-1 mb-1 text-slate-800 overflow-ellipsis break-words transition rounded-sm dark:text-slate-300 ${
              hovering ? "bg-slate-100 dark:bg-slate-700" : "bg-transparent"