graphein 0.21.0 → 0.22.0

package/dist/charts/matrix.js

@@ -1,72 +1,48 @@
 import { drawTitleBlock } from "./chrome.js";
 import {
-  buildTable,
-  createSketchGridCanvas,
-  paintSketchGridOverlay,
+  buildColumnFormatter,
+  mountTable,
   paintTableCanvas,
   resolveConditionalDomain,
-  densityMetrics
+  resolveTableStyle
 } from "./tableView.js";
-import { aggregateValues, pivot } from "../pivot/index.js";
+import { aggregateValues, buildPivotCube } from "../pivot/index.js";
 import { resolveSketch } from "../spec/sketch.js";
-import { accessor } from "../util/data.js";
-const PATH_SEPARATOR = "\0";
-const BUFFER_ROWS = 8;
-function drawMatrix(surface, spec, tokens, size) {
+import { accessor, toKey } from "../util/data.js";
+import { formatValue } from "../format/index.js";
+import { applyPick } from "../interaction/select.js";
+const SEP = "\0";
+const GRAND_TOTAL = "Grand Total";
+const TOTAL = "Total";
+const BLANK = "(Blank)";
+const matrixStates = /* @__PURE__ */ new WeakMap();
+const prepCache = /* @__PURE__ */ new WeakMap();
+let collator = null;
+function compareLabels(a, b) {
+  collator ??= new Intl.Collator(void 0, { numeric: true, sensitivity: "base" });
+  return collator.compare(a, b) || (a < b ? -1 : a > b ? 1 : 0);
+}
+function drawMatrix(surface, spec, tokens, size, context) {
   if (spec.type !== "matrix") return;
   surface.evidence?.begin("aggregate");
+  const rect = drawTitleBlock(surface, tokens, size, spec.title);
+  const prep = prepareMatrix(spec);
   if (surface.headless) {
-    drawMatrixCanvas(surface, spec, tokens, size);
+    const rows = visibleRows(prep, spec, null, /* @__PURE__ */ new Map());
+    paintTableCanvas({
+      ...viewInput(prep, spec, tokens, rect, rows, null),
+      ctx: surface.marks.ctx,
+      evidence: surface.evidence,
+      labels: surface.labels
+    });
     return;
   }
-  renderMatrix(surface, spec, tokens, size);
-}
-function drawMatrixCanvas(surface, spec, tokens, size) {
-  const rect = drawTitleBlock(surface, tokens, size, spec.title);
-  const prepared = prepareMatrix(spec);
-  paintTableCanvas({
-    ...matrixTableOptions(prepared, spec, tokens, rect),
-    ctx: surface.marks.ctx,
-    evidence: surface.evidence,
-    labels: surface.labels,
-    sketch: resolveSketch(spec)
-  });
+  renderMatrix(surface, spec, tokens, size, rect, prep, context);
 }
-function renderMatrix(surface, spec, tokens, size) {
-  const rect = drawTitleBlock(surface, tokens, size, spec.title);
-  const prepared = prepareMatrix(spec);
-  const sketch = resolveSketch(spec);
-  const host = document.createElement("div");
-  surface.overlay.appendChild(host);
-  let buildOpts = null;
-  let drawSketch = () => {
-  };
-  const rowHeight = densityMetrics(spec.density).rowHeight;
-  const renderWindow = () => {
-    surface.evidence?.reset(size, spec.data?.length ?? 0, spec.background ?? tokens.color.background);
-    surface.evidence?.begin("aggregate");
-    if (surface.labels) surface.labels.records.splice(
-      0,
-      surface.labels.records.length,
-      ...surface.labels.records.filter((l) => l.role === "title" || l.role === "subtitle")
-    );
-    const scrollTop = host.scrollTop || 0;
-    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - BUFFER_ROWS);
-    const visible = Math.ceil(Math.max(rect.height, host.clientHeight || rect.height) / rowHeight) + BUFFER_ROWS * 2;
-    const end = Math.min(prepared.rows.length, start + visible);
-    buildOpts = {
-      ...matrixTableOptions(prepared, spec, tokens, rect),
-      container: host,
-      evidence: surface.evidence,
-      labels: surface.labels,
-      stickyHeader: true,
-      visibleRange: { start, end, rowHeight },
-      sketch
-    };
-    buildTable(buildOpts);
-    drawSketch();
-  };
-  surface.collectEvidence = () => {
+function renderMatrix(surface, spec, tokens, size, rect, prep, context) {
+  const state = matrixStateFor(surface, spec);
+  let rows = visibleRows(prep, spec, state.sort, state.expanded);
+  const resetEvidence = () => {
     surface.evidence?.reset(size, spec.data?.length ?? 0, spec.background ?? tokens.color.background);
     surface.evidence?.begin("aggregate");
     if (surface.labels) surface.labels.records.splice(
@@ -74,148 +50,474 @@ function renderMatrix(surface, spec, tokens, size) {
       surface.labels.records.length,
       ...surface.labels.records.filter((l) => l.role === "title" || l.role === "subtitle")
     );
-    buildOpts?.refreshEvidence?.();
   };
-  if (sketch) {
-    const overlay = createSketchGridCanvas(rect);
-    if (overlay.ctx) {
-      surface.overlay.appendChild(overlay.canvas);
-      const ctx = overlay.ctx;
-      drawSketch = () => {
-        paintSketchGridOverlay(ctx, {
-          sketch,
-          tokens,
-          rect,
-          dpr: overlay.dpr,
-          columns: prepared.columns,
-          widths: buildOpts?.widths ?? [],
-          rowCount: prepared.rows.length,
-          headerRowCount: prepared.headerRows.length,
-          hasFooter: false,
-          rowHeaderSpan: 1,
-          density: spec.density,
-          scrollLeft: host.scrollLeft || 0,
-          scrollTop: host.scrollTop || 0
-        });
-      };
-      let frame2 = 0;
-      host.addEventListener("scroll", () => {
-        if (frame2 !== 0) return;
-        frame2 = typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => {
-          frame2 = 0;
-          renderWindow();
-        }) : window.setTimeout(() => {
-          frame2 = 0;
-          renderWindow();
-        }, 16);
-      });
-      renderWindow();
-      return;
+  const select = context?.store && context.param ? { store: context.store, param: context.param, def: context.def ?? { type: "point" } } : null;
+  const refresh = (top) => {
+    if (top !== void 0) {
+      view.host.scrollTop = top;
+      state.scrollTop = top;
     }
-  }
-  let frame = 0;
-  host.addEventListener("scroll", () => {
-    if (frame !== 0) return;
-    frame = typeof requestAnimationFrame === "function" ? requestAnimationFrame(() => {
-      frame = 0;
-      renderWindow();
-    }) : window.setTimeout(() => {
-      frame = 0;
-      renderWindow();
-    }, 16);
+    resetEvidence();
+    view.update(options());
+  };
+  const options = () => ({
+    ...viewInput(prep, spec, tokens, rect, rows, state.sort),
+    highlighted: selectedRows(spec, rows, context),
+    container: surface.overlay,
+    evidence: surface.evidence,
+    labels: surface.labels,
+    stickyHeader: true,
+    scrollTop: state.scrollTop,
+    scrollLeft: state.scrollLeft,
+    onScroll(top, left) {
+      state.scrollTop = top;
+      state.scrollLeft = left;
+    },
+    onToggle(row) {
+      const target = rows[row];
+      if (!target || target.kind !== "group") return;
+      state.expanded.set(target.node.id, !target.expanded);
+      rows = visibleRows(prep, spec, state.sort, state.expanded);
+      refresh();
+    },
+    onSort(colIndex) {
+      const id = colIndex === 0 ? "__row__" : prep.columns[colIndex]?.id;
+      if (!id) return;
+      const previous = state.sort;
+      state.sort = previous?.col === id ? { col: id, dir: previous.dir === "asc" ? "desc" : "asc" } : { col: id, dir: "asc" };
+      rows = visibleRows(prep, spec, state.sort, state.expanded);
+      refresh(0);
+    },
+    onRowClick: select ? (row, col) => {
+      const target = rows[row];
+      if (!target) return;
+      const fields = spec.rows.slice(0, target.node.depth + 1);
+      const tuple = [...target.node.values];
+      const leaf = col > 0 ? prep.valueColumns[col - 1]?.leaf : void 0;
+      if (leaf && leaf.path.length) {
+        fields.push(...(spec.columns ?? []).slice(0, leaf.path.length));
+        tuple.push(...leaf.values);
+      }
+      const pick = { kind: "point", fields, tuples: [tuple] };
+      applyPick(select, pick);
+      refresh();
+    } : void 0,
+    measure: measureSource(prep, spec)
   });
-  renderWindow();
+  const view = mountTable(options());
+  surface.collectEvidence = () => {
+    resetEvidence();
+    view.recordEvidence();
+  };
 }
-function matrixTableOptions(prepared, spec, tokens, rect) {
+function viewInput(prep, spec, tokens, rect, rows, sort) {
+  const style = resolveTableStyle(tokens, spec.density, spec.gridlines);
+  const sortCol = sort ? sort.col === "__row__" ? 0 : prep.columns.findIndex((column) => column.id === sort.col) : -1;
+  const byLevel = /* @__PURE__ */ new Map();
+  const formattersAt = (depth) => {
+    let formatters = byLevel.get(depth);
+    if (!formatters) {
+      const domains = prep.levelDomains[depth] ?? [];
+      formatters = prep.columns.map((column, i) => buildColumnFormatter(column.conditionalFormat, domains[i] ?? null, tokens, style.color.background));
+      byLevel.set(depth, formatters);
+    }
+    return formatters;
+  };
   return {
-    dataRepresentation: "aggregate",
-    sourceRepresentedRows: prepared.sourceRepresentedRows,
     tokens,
     rect,
-    columns: prepared.columns,
-    rowCount: prepared.rows.length,
-    getCell(rowIndex, colIndex) {
-      const row = prepared.rows[rowIndex];
-      if (colIndex === 0) return { value: rowLabel(row), raw: null };
-      const { leaf, valueIndex } = prepared.leafValueColumns[colIndex - 1];
-      const value = row.cellsByColumnKey.get(leaf.path.join(PATH_SEPARATOR))?.values[valueIndex] ?? null;
-      const display = displayMatrixValue(value, rowIndex, colIndex - 1, prepared.denominators, spec);
-      return { value: display, raw: display };
-    },
-    rowClass(rowIndex) {
-      const row = prepared.rows[rowIndex];
-      return row.isGrandTotal === true ? "grandtotal" : row.isSubtotal === true ? "subtotal" : "normal";
-    },
-    cellIndent(rowIndex, colIndex) {
-      return colIndex === 0 ? prepared.rows[rowIndex].depth * 16 : 0;
+    columns: prep.columns,
+    rowCount: rows.length,
+    getCell: (rowIndex, colIndex) => matrixCell(prep, rows[rowIndex], colIndex),
+    rowInfo: (rowIndex) => rowInfo(rows[rowIndex]),
+    frozenColumns: 1,
+    formatters: formattersAt(Math.max(0, spec.rows.length - 1)),
+    // Format the visible detail: leaves and collapsed groups; expanded group subtotals stay plain.
+    rowFormatters: (rowIndex) => {
+      const row = rows[rowIndex];
+      if (!row || row.kind === "subtotal" || row.kind === "group" && row.expanded) return null;
+      return formattersAt(row.node.depth);
     },
-    rowHeaderSpan: 1,
-    striped: false,
-    conditionalDomains: prepared.bodyDomains,
-    headerRows: prepared.headerRows,
-    density: spec.density
+    extremes: prep.extremes,
+    headerRows: prep.headerRows,
+    footerRow: spec.grandTotals === true ? {
+      kind: "grandtotal",
+      cells: prep.columns.map((_, col) => {
+        if (col === 0) return { value: GRAND_TOTAL, raw: null, label: true };
+        const value = prep.display(0, prep.valueColumns[col - 1]);
+        return { value, raw: value };
+      })
+    } : void 0,
+    density: spec.density,
+    gridlines: spec.gridlines,
+    sortState: sortCol >= 0 && sort ? { col: sortCol, dir: sort.dir } : void 0,
+    sketch: resolveSketch(spec),
+    dataRepresentation: "aggregate",
+    sourceRepresentedRows: prep.sourceRepresentedRows
+  };
+}
+function measureSource(prep, spec) {
+  const all = visibleRows(prep, { ...spec, expandDepth: void 0 }, null, /* @__PURE__ */ new Map());
+  return {
+    rowCount: all.length,
+    getCell: (row, col) => matrixCell(prep, all[row], col),
+    rowInfo: (row) => rowInfo(all[row])
+  };
+}
+function selectedRows(spec, rows, context) {
+  const value = context?.param ? context.store?.get(context.param) : null;
+  if (!value || value.kind !== "point" || !value.tuples.length) return void 0;
+  const depth = value.fields.findIndex((field, i) => spec.rows[i] !== field);
+  const count = depth < 0 ? value.fields.length : depth;
+  if (count === 0) return void 0;
+  const keys = new Set(value.tuples.map((tuple) => tuple.slice(0, count).map(toKey).join(SEP)));
+  return (row) => {
+    const node = rows[row]?.node;
+    if (!node || node.values.length < count) return false;
+    return keys.has(node.values.slice(0, count).map(toKey).join(SEP));
+  };
+}
+function matrixCell(prep, row, col) {
+  if (!row) return { value: null, raw: null };
+  if (col === 0) {
+    const label = row.kind === "subtotal" ? `${row.node.label} ${TOTAL}` : row.node.label;
+    return { value: label, raw: null, label: true };
+  }
+  if (!row.showValues) return { value: null, raw: null };
+  const value = prep.display(row.node.pid, prep.valueColumns[col - 1]);
+  return { value, raw: value };
+}
+function rowInfo(row) {
+  if (!row) return { kind: "leaf", depth: 0 };
+  return {
+    kind: row.kind === "group" ? "group" : row.kind === "subtotal" ? "subtotal" : "leaf",
+    depth: row.node.depth,
+    expandable: row.kind === "group",
+    expanded: row.expanded,
+    label: row.node.label
+  };
+}
+function matrixStateFor(surface, spec) {
+  const signature = JSON.stringify([spec.rows, spec.columns ?? [], spec.values.map((v) => [v.field, v.op, v.showAs]), spec.expandDepth, spec.rowSort, spec.subtotals]);
+  const existing = matrixStates.get(surface);
+  if (existing && existing.signature === signature) return existing;
+  const state = { signature, expanded: /* @__PURE__ */ new Map(), sort: null, scrollTop: 0, scrollLeft: 0 };
+  matrixStates.set(surface, state);
+  return state;
+}
+function visibleRows(prep, spec, sort, expanded) {
+  const out = [];
+  const subtotals = spec.subtotals === true;
+  const bottom = spec.subtotalPosition === "bottom";
+  const depthLimit = spec.expandDepth ?? Infinity;
+  const ordered = siblingOrder(prep, spec, sort);
+  const walk = (nodes, parentId) => {
+    for (const node of ordered(nodes, parentId)) {
+      if (!node.children.length) {
+        out.push({ kind: "leaf", node, expanded: true, showValues: true });
+        continue;
+      }
+      const open = expanded.get(node.id) ?? node.depth < depthLimit;
+      out.push({ kind: "group", node, expanded: open, showValues: !open || subtotals && !bottom });
+      if (!open) continue;
+      walk(node.children, node.id);
+      if (subtotals && bottom) out.push({ kind: "subtotal", node, expanded: true, showValues: true });
+    }
   };
+  walk(prep.rowTree, "");
+  return out;
+}
+function siblingOrder(prep, spec, sort) {
+  const byLabel = !sort ? spec.rowSort?.by !== "value" : sort.col === "__row__";
+  const dir = (sort?.dir ?? spec.rowSort?.order ?? "asc") === "desc" ? -1 : 1;
+  if (byLabel && dir === 1) return (nodes) => nodes;
+  const signature = sort ? `${sort.col}|${sort.dir}` : `rowSort|${spec.rowSort?.by}|${spec.rowSort?.valueIndex ?? 0}|${spec.rowSort?.order}`;
+  let memo = prep.orders.get(signature);
+  if (!memo) {
+    memo = /* @__PURE__ */ new Map();
+    prep.orders.set(signature, memo);
+  }
+  const valueOf = byLabel ? null : sortValue(prep, spec, sort);
+  return (nodes, parentId) => {
+    const hit = memo.get(parentId);
+    if (hit) return hit;
+    const sorted = [...nodes];
+    if (valueOf) {
+      const keys = new Map(sorted.map((node) => [node, valueOf(node)]));
+      sorted.sort((a, b) => {
+        const va = keys.get(a);
+        const vb = keys.get(b);
+        if (va == null || vb == null) return va == null && vb == null ? compareLabels(a.label, b.label) : va == null ? 1 : -1;
+        return va === vb ? compareLabels(a.label, b.label) : (va - vb) * dir;
+      });
+    } else sorted.reverse();
+    memo.set(parentId, sorted);
+    return sorted;
+  };
+}
+function sortValue(prep, spec, sort) {
+  if (sort) {
+    const col = prep.columns.findIndex((column2) => column2.id === sort.col);
+    const column = prep.valueColumns[col - 1];
+    return (node) => column ? prep.display(node.pid, column) : null;
+  }
+  const valueIndex = Math.min(spec.rowSort?.valueIndex ?? 0, spec.values.length - 1);
+  return (node) => prep.cube.valueAtIds(node.pid, 0, valueIndex);
 }
 function prepareMatrix(spec) {
   const data = spec.data ?? [];
-  const result = pivot(data, {
-    rows: spec.rows,
-    columns: spec.columns ?? [],
-    values: spec.values.map((value) => ({ field: value.field, op: value.op, label: value.label })),
-    includeRowSubtotals: spec.subtotals === true,
-    includeColumnSubtotals: spec.subtotals === true,
-    includeGrandTotals: spec.grandTotals === true,
-    sort: "asc"
-  });
-  const sortedLeaves = sortColumnLeaves(result.columnLeaves, result.rows, spec);
-  const denominators = computeShowAsDenominators(result.rows, sortedLeaves, spec);
-  const leafValueColumns = flattenLeafValueColumns(sortedLeaves, spec);
-  const columns = [
-    {
-      key: "__row__",
-      title: spec.rows.join(" / ") || "Rows",
-      align: "left",
-      type: "nominal",
-      width: Math.max(180, Math.min(280, 120 + spec.rows.length * 34))
-    },
-    ...leafValueColumns.map(({ leaf, valueIndex }) => {
-      const valueDef = spec.values[valueIndex];
-      const title = spec.values.length > 1 ? valueDef.label ?? valueDef.field : leaf.key;
+  const signature = JSON.stringify([spec.rows, spec.columns ?? [], spec.values, spec.subtotals, spec.grandTotals, spec.columnSort]);
+  let byConfig = prepCache.get(data);
+  const hit = byConfig?.get(signature);
+  if (hit) return { ...hit, spec };
+  const rowFields = spec.rows;
+  const columnFields = spec.columns ?? [];
+  const valueDefs = spec.values;
+  const cube = buildPivotCube(data, rowFields, columnFields, valueDefs.map((v) => ({ field: v.field, op: v.op, label: v.label })));
+  const rowTree = axisTree(cube.rowAxis);
+  const leafRows = [];
+  const collectLeaves = (nodes) => {
+    for (const node of nodes) {
+      if (node.children.length) collectLeaves(node.children);
+      else leafRows.push(node);
+    }
+  };
+  collectLeaves(rowTree);
+  const colTree = axisTree(cube.columnAxis);
+  sortColumnTree(colTree, cube, spec);
+  const leaves = columnLeaves(colTree, spec);
+  const dataLeaves = leaves.filter((leaf) => leaf.kind === "data");
+  const valueColumns = leaves.flatMap((leaf) => valueDefs.map((_, valueIndex) => ({ leaf, valueIndex })));
+  const rowDenominators = /* @__PURE__ */ new Map();
+  const columnDenominators = /* @__PURE__ */ new Map();
+  const totalDenominators = /* @__PURE__ */ new Map();
+  const sumLeafCells = (rows, cols, valueIndex) => {
+    let total = 0;
+    for (const row of rows) for (const col of cols) total += cube.valueAtIds(row, col.pid, valueIndex) ?? 0;
+    return total;
+  };
+  const leafRowIds = leafRows.map((row) => row.pid);
+  const display = (rowPid, column) => {
+    const value = cube.valueAtIds(rowPid, column.leaf.pid, column.valueIndex);
+    const showAs = valueDefs[column.valueIndex]?.showAs;
+    if (!showAs || showAs === "value") return value;
+    let denominator;
+    if (showAs === "percentOfRow") {
+      const key = `${rowPid}|${column.valueIndex}`;
+      denominator = rowDenominators.get(key);
+      if (denominator === void 0) {
+        denominator = sumLeafCells([rowPid], dataLeaves, column.valueIndex);
+        rowDenominators.set(key, denominator);
+      }
+    } else if (showAs === "percentOfColumn") {
+      const key = `${column.leaf.id}|${column.valueIndex}`;
+      denominator = columnDenominators.get(key);
+      if (denominator === void 0) {
+        denominator = sumLeafCells(leafRowIds, [column.leaf], column.valueIndex);
+        columnDenominators.set(key, denominator);
+      }
+    } else {
+      denominator = totalDenominators.get(column.valueIndex);
+      if (denominator === void 0) {
+        denominator = sumLeafCells(leafRowIds, dataLeaves, column.valueIndex);
+        totalDenominators.set(column.valueIndex, denominator);
+      }
+    }
+    return computeShowAsValue(value, showAs, denominator);
+  };
+  const columns = buildViewColumns(spec, valueColumns, leaves.length);
+  const levels = [];
+  const collectLevels = (nodes) => {
+    for (const node of nodes) {
+      (levels[node.depth] ??= []).push(node.pid);
+      if (node.children.length) collectLevels(node.children);
+    }
+  };
+  collectLevels(rowTree);
+  const levelExtents = levels.map((pids) => valueColumns.map((column) => {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const pid of pids) {
+      const v = display(pid, column);
+      if (v == null || !Number.isFinite(v)) continue;
+      if (v < min) min = v;
+      if (v > max) max = v;
+    }
+    return min === Infinity ? null : [min, max];
+  }));
+  const levelDomains = levelExtents.map((extents) => [null, ...extents.map((extent, i) => {
+    const cf = columns[i + 1].conditionalFormat;
+    return cf ? resolveConditionalDomain(cf, extent ?? []) : null;
+  })]);
+  const extremes = [null, ...valueColumns.map((_, i) => {
+    const all = levelExtents.map((extents) => extents[i]).filter((e) => e != null);
+    return all.length ? [Math.min(...all.map((e) => e[0])), Math.max(...all.map((e) => e[1]))] : null;
+  })];
+  const prep = {
+    spec,
+    cube,
+    rowTree,
+    leafRows,
+    valueColumns,
+    columns,
+    headerRows: buildHeaderRows(spec, colTree, leaves, valueColumns),
+    levelDomains,
+    extremes,
+    sourceRepresentedRows: countRepresentedSourceRows(data, spec),
+    display,
+    orders: /* @__PURE__ */ new Map()
+  };
+  if (!byConfig) {
+    byConfig = /* @__PURE__ */ new Map();
+    prepCache.set(data, byConfig);
+  }
+  if (byConfig.size > 8) byConfig.clear();
+  byConfig.set(signature, prep);
+  return prep;
+}
+function axisTree(entries) {
+  const roots = [];
+  const byPid = /* @__PURE__ */ new Map();
+  for (const entry of entries) {
+    const parent = byPid.get(entry.parent);
+    const key = entry.key;
+    const node = {
+      key,
+      label: key === "" ? BLANK : entry.value instanceof Date ? formatValue(entry.value) : key,
+      path: parent ? [...parent.path, key] : [key],
+      values: parent ? [...parent.values, entry.value] : [entry.value],
+      id: parent ? `${parent.id}${SEP}${key}` : key,
+      pid: entry.id,
+      depth: entry.depth,
+      children: []
+    };
+    byPid.set(entry.id, node);
+    (parent ? parent.children : roots).push(node);
+  }
+  const sortTree = (nodes) => {
+    nodes.sort((a, b) => compareLabels(a.key, b.key));
+    for (const node of nodes) if (node.children.length) sortTree(node.children);
+  };
+  sortTree(roots);
+  return roots;
+}
+function sortColumnTree(nodes, cube, spec) {
+  const sort = spec.columnSort;
+  if (!sort) return;
+  const dir = sort.order === "desc" ? -1 : 1;
+  const valueIndex = Math.min(sort.valueIndex ?? 0, spec.values.length - 1);
+  const walk = (siblings) => {
+    if (sort.by === "label") siblings.sort((a, b) => compareLabels(a.key, b.key) * dir);
+    else {
+      const totals = new Map(siblings.map((node) => [node, cube.valueAtIds(0, node.pid, valueIndex) ?? -Infinity]));
+      siblings.sort((a, b) => {
+        const d = totals.get(a) - totals.get(b);
+        return d === 0 || !Number.isFinite(d) ? compareLabels(a.key, b.key) : d * dir;
+      });
+    }
+    for (const node of siblings) if (node.children.length) walk(node.children);
+  };
+  walk(nodes);
+}
+function columnLeaves(tree, spec) {
+  const fields = spec.columns ?? [];
+  if (!fields.length) {
+    return [{ id: "", pid: 0, path: [], values: [], label: spec.values.length === 1 ? valueLabel(spec, 0) : GRAND_TOTAL, kind: "data", group: 0 }];
+  }
+  const out = [];
+  const subtotals = spec.subtotals === true && fields.length > 1;
+  const walk = (nodes, group) => {
+    nodes.forEach((node, i) => {
+      const g = group ?? i;
+      if (node.children.length) {
+        walk(node.children, g);
+        if (subtotals) out.push({ id: `${node.id}${SEP}${TOTAL}`, pid: node.pid, path: node.path, values: node.values, label: TOTAL, kind: "subtotal", group: g });
+      } else {
+        out.push({ id: node.id, pid: node.pid, path: node.path, values: node.values, label: node.label, kind: "data", group: g });
+      }
+    });
+  };
+  walk(tree, null);
+  if (spec.grandTotals === true) out.push({ id: `${SEP}${GRAND_TOTAL}`, pid: 0, path: [], values: [], label: GRAND_TOTAL, kind: "grand", group: tree.length });
+  return out;
+}
+function valueLabel(spec, valueIndex) {
+  const def = spec.values[valueIndex];
+  return def.label ?? def.field;
+}
+function rowsTitle(spec) {
+  return spec.rows.join(" / ") || "Rows";
+}
+function buildViewColumns(spec, valueColumns, leafCount) {
+  const multi = spec.values.length > 1;
+  const nested = (spec.columns?.length ?? 0) > 1;
+  return [
+    { key: "__row__", id: "__row__", title: rowsTitle(spec), align: "left", type: "nominal", rowHeader: true },
+    ...valueColumns.map(({ leaf, valueIndex }, i) => {
+      const def = spec.values[valueIndex];
+      const percent = def.showAs !== void 0 && def.showAs !== "value";
+      const previous = valueColumns[i - 1];
+      const groupStart = i > 0 && valueIndex === 0 && leafCount > 1 && (multi || nested && previous.leaf.group !== leaf.group || leaf.kind === "grand");
       return {
-        key: `${leaf.path.join(PATH_SEPARATOR)}:${valueIndex}`,
-        title,
+        key: `${leaf.id}:${valueIndex}`,
+        id: `${leaf.id}:${valueIndex}`,
+        title: multi ? valueLabel(spec, valueIndex) : leaf.label,
         align: "right",
         type: "quantitative",
-        format: valueDef.showAs && valueDef.showAs !== "value" ? ".1%" : valueDef.format,
-        width: 118,
-        conditionalFormat: valueDef.conditionalFormat,
+        format: percent ? def.format?.includes("%") ? def.format : ".1%" : def.format,
+        conditionalFormat: leaf.kind === "data" ? def.conditionalFormat : void 0,
         isMeasure: true,
-        prefix: valueDef.showAs && valueDef.showAs !== "value" ? void 0 : valueDef.prefix,
-        suffix: valueDef.showAs && valueDef.showAs !== "value" ? void 0 : valueDef.suffix,
-        negativeStyle: valueDef.negativeStyle
+        prefix: percent ? void 0 : def.prefix,
+        suffix: percent ? void 0 : def.suffix,
+        negativeStyle: def.negativeStyle,
+        total: leaf.kind !== "data",
+        groupStart
       };
     })
   ];
-  const bodyDomains = columns.map((column, colIndex) => {
-    if (colIndex === 0) return null;
-    const { leaf, valueIndex } = leafValueColumns[colIndex - 1];
-    const colKey = leaf.path.join(PATH_SEPARATOR);
-    return resolveConditionalDomain(
-      column.conditionalFormat,
-      result.rows.map(
-        (row, rowIndex) => row.isSubtotal === true || row.isGrandTotal === true ? null : displayMatrixValue(row.cellsByColumnKey.get(colKey)?.values[valueIndex] ?? null, rowIndex, colIndex - 1, denominators, spec)
-      )
-    );
-  });
-  return {
-    rows: result.rows,
-    columns,
-    leafValueColumns,
-    denominators,
-    bodyDomains,
-    headerRows: buildMatrixHeaderRows(result.columnTree, sortedLeaves, spec, sortedLeaves !== result.columnLeaves),
-    sourceRepresentedRows: countRepresentedSourceRows(data, spec)
+}
+function buildHeaderRows(spec, tree, leaves, valueColumns) {
+  const fields = spec.columns ?? [];
+  const valueCount = spec.values.length;
+  const rowHeader = { title: rowsTitle(spec), align: "left", colIndex: 0 };
+  if (!fields.length) {
+    return [[rowHeader, ...valueColumns.map((_, i) => ({ title: valueCount > 1 ? valueLabel(spec, i) : leaves[0].label, align: "right", colIndex: i + 1 }))]];
+  }
+  const levels = fields.length;
+  const total = levels + (valueCount > 1 ? 1 : 0);
+  const rows = Array.from({ length: total }, () => []);
+  rows[0].push({ ...rowHeader, rowSpan: total });
+  const leafIndex = new Map(leaves.map((leaf, i) => [leaf.id, i]));
+  const leafCell = (leaf, depth) => {
+    const index = leafIndex.get(leaf.id) ?? 0;
+    return {
+      title: leaf.label,
+      colSpan: valueCount,
+      rowSpan: levels - depth,
+      align: valueCount > 1 ? "center" : "right",
+      colIndex: valueCount > 1 ? void 0 : 1 + index
+    };
+  };
+  const span = (node) => node.children.length ? node.children.reduce((s, child) => s + span(child), 0) + (spec.subtotals === true && levels > 1 ? 1 : 0) : 1;
+  const walk = (nodes) => {
+    for (const node of nodes) {
+      if (!node.children.length) {
+        rows[node.depth].push(leafCell(leaves[leafIndex.get(node.id) ?? 0], node.depth));
+        continue;
+      }
+      rows[node.depth].push({ title: node.label, colSpan: span(node) * valueCount, align: "center" });
+      walk(node.children);
+      const subtotal = leaves.find((leaf) => leaf.kind === "subtotal" && leaf.id === `${node.id}${SEP}${TOTAL}`);
+      if (subtotal) rows[node.depth + 1].push(leafCell(subtotal, node.depth + 1));
+    }
   };
+  walk(tree);
+  const grand = leaves.find((leaf) => leaf.kind === "grand");
+  if (grand) rows[0].push(leafCell(grand, 0));
+  if (valueCount > 1) {
+    valueColumns.forEach(({ valueIndex }, i) => rows[total - 1].push({ title: valueLabel(spec, valueIndex), align: "right", colIndex: i + 1 }));
+  }
+  return rows;
 }
 function countRepresentedSourceRows(data, spec) {
   const reads = spec.values.map((value) => ({ value, read: accessor(value.field) }));
@@ -225,21 +527,6 @@ function countRepresentedSourceRows(data, spec) {
   }
   return count;
 }
-function rowLabel(row) {
-  if (row.isGrandTotal === true) return row.label;
-  if (row.isSubtotal === true) {
-    const name = row.path[row.path.length - 1] ?? "";
-    return name === "" ? row.label : `${name} ${row.label}`;
-  }
-  return row.label;
-}
-function flattenLeafValueColumns(columnLeaves, spec) {
-  const out = [];
-  for (const leaf of columnLeaves) {
-    spec.values.forEach((_value, valueIndex) => out.push({ leaf, valueIndex }));
-  }
-  return out;
-}
 function computeShowAsValue(value, showAs, denominator) {
   if (value == null || !Number.isFinite(value)) return null;
   if (!showAs || showAs === "value") return value;
@@ -247,131 +534,6 @@ function computeShowAsValue(value, showAs, denominator) {
   const ratio = value / denominator;
   return Number.isFinite(ratio) ? ratio : null;
 }
-function computeShowAsDenominators(rows, leaves, spec) {
-  const valueCount = spec.values.length;
-  const rowTotals = rows.map((row) => {
-    const totals = Array.from({ length: valueCount }, () => 0);
-    leaves.forEach((leaf) => {
-      const cell = row.cellsByColumnKey.get(leaf.path.join(PATH_SEPARATOR));
-      for (let i = 0; i < valueCount; i += 1) totals[i] += cell?.values[i] ?? 0;
-    });
-    return totals;
-  });
-  const columnTotals = leaves.map((leaf) => {
-    const totals = Array.from({ length: valueCount }, () => 0);
-    rows.forEach((row) => {
-      if (row.isSubtotal || row.isGrandTotal) return;
-      const cell = row.cellsByColumnKey.get(leaf.path.join(PATH_SEPARATOR));
-      for (let i = 0; i < valueCount; i += 1) totals[i] += cell?.values[i] ?? 0;
-    });
-    return totals;
-  });
-  const grandTotals = Array.from(
-    { length: valueCount },
-    (_, valueIndex) => columnTotals.reduce((sum, totals) => sum + totals[valueIndex], 0)
-  );
-  return { rowTotals, columnTotals, grandTotals };
-}
-function displayMatrixValue(value, rowIndex, leafValueIndex, denominators, spec) {
-  const valueIndex = leafValueIndex % spec.values.length;
-  const leafIndex = Math.floor(leafValueIndex / spec.values.length);
-  const showAs = spec.values[valueIndex].showAs;
-  if (!showAs || showAs === "value") return value;
-  const denominator = showAs === "percentOfRow" ? denominators.rowTotals[rowIndex]?.[valueIndex] ?? 0 : showAs === "percentOfColumn" ? denominators.columnTotals[leafIndex]?.[valueIndex] ?? 0 : denominators.grandTotals[valueIndex] ?? 0;
-  return computeShowAsValue(value, showAs, denominator);
-}
-function sortColumnLeaves(leaves, rows, spec) {
-  const order = spec.columnSort?.order === "desc" ? -1 : 1;
-  if (!spec.columnSort) return leaves;
-  const sorted = [...leaves];
-  if (spec.columnSort.by === "label") {
-    return sorted.sort((left, right) => left.key.localeCompare(right.key, void 0, { numeric: true }) * order);
-  }
-  const valueIndex = spec.columnSort.valueIndex ?? 0;
-  return sorted.sort((left, right) => {
-    const leftTotal = columnTotal(rows, left, valueIndex);
-    const rightTotal = columnTotal(rows, right, valueIndex);
-    return (leftTotal === rightTotal ? left.key.localeCompare(right.key) : leftTotal - rightTotal) * order;
-  });
-}
-function columnTotal(rows, leaf, valueIndex) {
-  const key = leaf.path.join(PATH_SEPARATOR);
-  return rows.reduce((sum, row) => {
-    if (row.isSubtotal || row.isGrandTotal) return sum;
-    return sum + (row.cellsByColumnKey.get(key)?.values[valueIndex] ?? 0);
-  }, 0);
-}
-function buildMatrixHeaderRows(columnTree, columnLeaves, spec, flatLeaves = false) {
-  if (flatLeaves) return buildFlatMatrixHeaderRows(columnLeaves, spec);
-  const groupRows = Math.max(1, maxDepth(columnTree) + 1);
-  const showMeasureRow = spec.values.length > 1;
-  const totalRows = groupRows + (showMeasureRow ? 1 : 0);
-  const rows = Array.from({ length: totalRows }, () => []);
-  rows[0].push({
-    title: spec.rows.join(" / ") || "Rows",
-    rowSpan: totalRows,
-    align: "left",
-    colIndex: 0
-  });
-  for (const node of columnTree) appendHeaderNode(rows, node, 0, groupRows, spec.values.length);
-  if (showMeasureRow) {
-    for (let leafIndex = 0; leafIndex < columnLeaves.length; leafIndex += 1) {
-      for (let valueIndex = 0; valueIndex < spec.values.length; valueIndex += 1) {
-        rows[totalRows - 1].push({
-          title: spec.values[valueIndex].label ?? spec.values[valueIndex].field,
-          align: "right",
-          colIndex: 1 + leafIndex * spec.values.length + valueIndex
-        });
-      }
-    }
-  }
-  return rows;
-}
-function buildFlatMatrixHeaderRows(columnLeaves, spec) {
-  const showMeasureRow = spec.values.length > 1;
-  const rows = [[], ...showMeasureRow ? [[]] : []];
-  rows[0].push({
-    title: spec.rows.join(" / ") || "Rows",
-    rowSpan: showMeasureRow ? 2 : 1,
-    align: "left",
-    colIndex: 0
-  });
-  columnLeaves.forEach((leaf, leafIndex) => {
-    rows[0].push({
-      title: leaf.path.join(" / ") || leaf.key,
-      colSpan: spec.values.length,
-      align: "center",
-      colIndex: showMeasureRow ? void 0 : 1 + leafIndex
-    });
-    if (showMeasureRow) {
-      spec.values.forEach(
-        (value, valueIndex) => rows[1].push({
-          title: value.label ?? value.field,
-          align: "right",
-          colIndex: 1 + leafIndex * spec.values.length + valueIndex
-        })
-      );
-    }
-  });
-  return rows;
-}
-function appendHeaderNode(rows, node, depth, groupRows, valueCount) {
-  const isLeaf = node.children.length === 0;
-  rows[depth].push({
-    title: node.key,
-    colSpan: node.span * valueCount,
-    rowSpan: isLeaf ? groupRows - depth : 1,
-    align: "center"
-  });
-  for (const child of node.children) appendHeaderNode(rows, child, depth + 1, groupRows, valueCount);
-}
-function maxDepth(nodes) {
-  let depth = 0;
-  for (const node of nodes) {
-    depth = Math.max(depth, node.depth, maxDepth(node.children));
-  }
-  return depth;
-}
 export {
   computeShowAsValue,
   drawMatrix