script-build-and-framework-tmp/visualization/frontend/components/FieldTree.tsx

import { Fragment } from "react";

function scalar(value: unknown): string {
  if (value === null) return "null";
  if (typeof value === "boolean") return value ? "true" : "false";
  if (typeof value === "string") return value || '""';
  return String(value);
}

export function FieldTree({ value, depth = 0 }: { value: unknown; depth?: number }) {
  if (Array.isArray(value)) {
    if (!value.length) return <span className="emptyValue">[]</span>;
    return <div className="nestedValue">{value.map((item, index) => <div className="arrayItem" key={index}>
      <span className="indexBadge">{index}</span><FieldTree value={item} depth={depth + 1} />
    </div>)}</div>;
  }
  if (value !== null && typeof value === "object") {
    const entries = Object.entries(value as Record<string, unknown>);
    if (!entries.length) return <span className="emptyValue">{"{}"}</span>;
    return <dl className={`fieldTree depth-${Math.min(depth, 3)}`}>
      {entries.map(([key, item]) => <Fragment key={key}>
        <dt>{key}</dt>
        <dd><FieldTree value={item} depth={depth + 1} /></dd>
      </Fragment>)}
    </dl>;
  }
  return <span className={`scalar scalar-${value === null ? "null" : typeof value}`}>{scalar(value)}</span>;
}