Function createArrayNode

src/lib/table/createNode.ts:60–176

* Creates a `TableNode` for a JSON array. This is one of the most complex parts of the builder, * as it needs to handle arrays of primitives, arrays of objects, and mixed (heterogeneous) arrays. * It creates a columnar layout for arrays of objects. * @param ctx The current build context. * @para

(ctx: CreateContext, tree: Tree, node: Node)

 * @param node The JSON `Node` representing the array.
 */
function createArrayNode(ctx: CreateContext, tree: Tree, node: Node): TableNode {
  // An array is considered heterogeneous if it contains both primitive values (leaf nodes) and objects/arrays (non-leaf nodes).
  // The `existsLeafNode` flag is used to track whether at least one primitive value exists.
  // e.g., `[1, {"a": 2}, 3]`
  let existsLeafNode = false;
  // Collect all unique keys from child objects to form the table headers.
  const headers = union(
    ...tree.childrenNodes(node).map((child) => {
      existsLeafNode = existsLeafNode || !hasChildren(child);
      return child.childrenKeys;
    }),
  );

  const rows: TableNode[][] = [];

  // If there are headers, it means we have an array of objects. Create a header row.
  if (headers.length > 0) {
    let firstRow = headers.map((key) =>
      newNode(ctx, "header")
        .setText(key || '""')
        .addClass(key ? "text-hl-key" : "text-hl-empty")
        .setId(node.id),
    );

    // For heterogeneous arrays, add dummy columns for the index and value of primitive elements.
    if (existsLeafNode) {
      const dummyIdxNode = newNode(ctx, "dummyIndex", node.id);
      const dummyNode = newNode(ctx, "dummyHeader", node.id);
      firstRow = [dummyIdxNode, dummyNode, ...firstRow];
    }

    rows.push(firstRow);
  }

  let deltaSpan = rows.length;

  // Iterate over each child of the array to create the data rows.
  tree.mapChildren(node, (child, idxAsKey) => {
    const newCtx = { ...ctx, row: ctx.row + deltaSpan };
    const rowNodes: TableNode[] = [];

    if (existsLeafNode) {
      // For heterogeneous arrays, create an index cell and a value cell for primitives.
      const idxNode = newNode(newCtx, "index").setId(child.id).setText(idxAsKey);
      const valNode = hasChildren(child) ? newNode(newCtx, "dummyValue") : createNode(newCtx, tree, child);
      rowNodes.push(idxNode, valNode);
    }

    // Create cells for each header key.
    for (let i = 0; i < headers.length; i++) {
      const key = headers[i];
      const colNode = hasChildren(child)
        ? createNode(newCtx, tree, tree.getChild(child, key)!) // If child is object, get value for key.
        : newNode(newCtx, "dummyValue"); // If child is primitive, add a placeholder.

      rowNodes.push(colNode);
    }