@mastra/playground-ui 66.1.0-alpha.2 → 67.0.0

package/dist/domains/dashboards/kinds/table/table-cells.es.js

@@ -0,0 +1,63 @@
+import { changeTrend, formatChange, formatValue } from "../../lib/table.es.js";
+import { BreakdownFigure } from "../../../metrics/components/breakdown/breakdown-figure.es.js";
+import { BreakdownName } from "../../../metrics/components/breakdown/breakdown-name.es.js";
+import { BreakdownNotPriced } from "../../../metrics/components/breakdown/breakdown-not-priced.es.js";
+import { BreakdownEntityMark, BreakdownModelMark } from "../../../metrics/components/breakdown/breakdown-row-mark.es.js";
+import { BreakdownText } from "../../../metrics/components/breakdown/breakdown-text.es.js";
+import { BreakdownTrendText } from "../../../metrics/components/breakdown/breakdown-trend-text.es.js";
+import { useMetricsScope } from "../../../metrics/hooks/use-metrics-scope.es.js";
+import { jsx } from "react/jsx-runtime";
+// src/domains/dashboards/kinds/table/table-cells.tsx
+function RowMark({ mark, row }) {
+	if (!mark) return null;
+	if ("icon" in mark) return /* @__PURE__ */ jsx(BreakdownEntityMark, { entity: mark.icon });
+	return /* @__PURE__ */ jsx(BreakdownModelMark, { provider: row.dimensions[mark.providerDimension] });
+}
+/** The row's mark and name; with a provider mark, a model reads `openai › gpt-5-mini`. */
+function TableNameCell({ options, row }) {
+	const { projectLabel } = useMetricsScope();
+	const title = options.as === "project" ? projectLabel?.(row.name) ?? row.name : row.name || (options.unnamed ?? "Unnamed");
+	const provider = options.mark && "providerDimension" in options.mark ? options.mark.providerDimension : void 0;
+	return /* @__PURE__ */ jsx(BreakdownName, {
+		mark: /* @__PURE__ */ jsx(RowMark, {
+			mark: options.mark,
+			row
+		}),
+		title,
+		model: provider !== void 0 && row.name !== "" ? {
+			name: row.name,
+			provider: row.dimensions[provider]
+		} : void 0
+	});
+}
+function TableDimensionCell({ id, options, row }) {
+	const { projectLabel } = useMetricsScope();
+	const value = options.query === void 0 ? row.dimensions[options.dimension] : row.lookups[id];
+	if (!value) return /* @__PURE__ */ jsx(BreakdownText, { text: "—" });
+	return /* @__PURE__ */ jsx(BreakdownText, { text: options.as === "project" ? projectLabel?.(value) ?? value : value });
+}
+function ValueText({ column, row }) {
+	const value = row.values[column.id];
+	if (value !== void 0) return formatValue(column, value, row.units[column.id]);
+	const { unpricedWhen } = column.options;
+	return unpricedWhen && (row.values[unpricedWhen] ?? 0) > 0 ? /* @__PURE__ */ jsx(BreakdownNotPriced, {}) : "—";
+}
+function TableValueCell({ column, row }) {
+	return /* @__PURE__ */ jsx(BreakdownFigure, {
+		muted: !column.options.emphasis,
+		children: /* @__PURE__ */ jsx(ValueText, {
+			column,
+			row
+		})
+	});
+}
+function TableChangeCell({ change, column }) {
+	if (!change) return /* @__PURE__ */ jsx(BreakdownTrendText, { trend: void 0 });
+	return /* @__PURE__ */ jsx(BreakdownTrendText, {
+		trend: changeTrend(change, column),
+		children: formatChange(change, column)
+	});
+}
+export { TableChangeCell, TableDimensionCell, TableNameCell, TableValueCell };
+
+//# sourceMappingURL=table-cells.es.js.map

package/dist/domains/dashboards/kinds/table/table-cells.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-cells.es.js","names":[],"sources":["../../../../../src/domains/dashboards/kinds/table/table-cells.tsx"],"sourcesContent":["import { BreakdownFigure } from '../../../metrics/components/breakdown/breakdown-figure';\nimport { BreakdownName } from '../../../metrics/components/breakdown/breakdown-name';\nimport { BreakdownNotPriced } from '../../../metrics/components/breakdown/breakdown-not-priced';\nimport { BreakdownEntityMark, BreakdownModelMark } from '../../../metrics/components/breakdown/breakdown-row-mark';\nimport { BreakdownText } from '../../../metrics/components/breakdown/breakdown-text';\nimport { BreakdownTrendText } from '../../../metrics/components/breakdown/breakdown-trend-text';\nimport { useMetricsScope } from '../../../metrics/hooks/use-metrics-scope';\nimport { DASH, changeTrend, formatChange, formatValue } from '../../lib/table';\nimport type { Change, TableColumnOptions, TableRow, ValueColumn } from '../../lib/table';\n\ntype NameOptions = Extract<TableColumnOptions, { type: 'name' }>;\ntype DimensionOptions = Extract<TableColumnOptions, { type: 'dimension' }>;\n\nfunction RowMark({ mark, row }: { mark: NameOptions['mark']; row: TableRow }) {\n  if (!mark) return null;\n  if ('icon' in mark) return <BreakdownEntityMark entity={mark.icon} />;\n  return <BreakdownModelMark provider={row.dimensions[mark.providerDimension]} />;\n}\n\n/** The row's mark and name; with a provider mark, a model reads `openai › gpt-5-mini`. */\nexport function TableNameCell({ options, row }: { options: NameOptions; row: TableRow }) {\n  const { projectLabel } = useMetricsScope();\n  const title =\n    options.as === 'project' ? (projectLabel?.(row.name) ?? row.name) : row.name || (options.unnamed ?? 'Unnamed');\n  const provider = options.mark && 'providerDimension' in options.mark ? options.mark.providerDimension : undefined;\n  return (\n    <BreakdownName\n      mark={<RowMark mark={options.mark} row={row} />}\n      title={title}\n      model={\n        provider !== undefined && row.name !== '' ? { name: row.name, provider: row.dimensions[provider] } : undefined\n      }\n    />\n  );\n}\n\nexport function TableDimensionCell({ id, options, row }: { id: string; options: DimensionOptions; row: TableRow }) {\n  const { projectLabel } = useMetricsScope();\n  const value = options.query === undefined ? row.dimensions[options.dimension] : row.lookups[id];\n  if (!value) return <BreakdownText text={DASH} />;\n  return <BreakdownText text={options.as === 'project' ? (projectLabel?.(value) ?? value) : value} />;\n}\n\nfunction ValueText({ column, row }: { column: ValueColumn; row: TableRow }) {\n  const value = row.values[column.id];\n  if (value !== undefined) return formatValue(column, value, row.units[column.id]);\n  const { unpricedWhen } = column.options;\n  return unpricedWhen && (row.values[unpricedWhen] ?? 0) > 0 ? <BreakdownNotPriced /> : DASH;\n}\n\nexport function TableValueCell({ column, row }: { column: ValueColumn; row: TableRow }) {\n  return (\n    <BreakdownFigure muted={!column.options.emphasis}>\n      <ValueText column={column} row={row} />\n    </BreakdownFigure>\n  );\n}\n\nexport function TableChangeCell({ change, column }: { change: Change | undefined; column: ValueColumn }) {\n  if (!change) return <BreakdownTrendText trend={undefined} />;\n  return <BreakdownTrendText trend={changeTrend(change, column)}>{formatChange(change, column)}</BreakdownTrendText>;\n}\n"],"mappings":";;;;;;;;;;AAaA,SAAS,QAAQ,EAAE,MAAM,OAAqD;CAC5E,IAAI,CAAC,MAAM,OAAO;CAClB,IAAI,UAAU,MAAM,OAAO,oBAAC,qBAAD,EAAqB,QAAQ,KAAK,KAAO,CAAA;CACpE,OAAO,oBAAC,oBAAD,EAAoB,UAAU,IAAI,WAAW,KAAK,mBAAqB,CAAA;AAChF;;AAGA,SAAgB,cAAc,EAAE,SAAS,OAAgD;CACvF,MAAM,EAAE,iBAAiB,gBAAgB;CACzC,MAAM,QACJ,QAAQ,OAAO,YAAa,eAAe,IAAI,IAAI,KAAK,IAAI,OAAQ,IAAI,SAAS,QAAQ,WAAW;CACtG,MAAM,WAAW,QAAQ,QAAQ,uBAAuB,QAAQ,OAAO,QAAQ,KAAK,oBAAoB,KAAA;CACxG,OACE,oBAAC,eAAD;EACE,MAAM,oBAAC,SAAD;GAAS,MAAM,QAAQ;GAAW;EAAM,CAAA;EACvC;EACP,OACE,aAAa,KAAA,KAAa,IAAI,SAAS,KAAK;GAAE,MAAM,IAAI;GAAM,UAAU,IAAI,WAAW;EAAU,IAAI,KAAA;CAExG,CAAA;AAEL;AAEA,SAAgB,mBAAmB,EAAE,IAAI,SAAS,OAAiE;CACjH,MAAM,EAAE,iBAAiB,gBAAgB;CACzC,MAAM,QAAQ,QAAQ,UAAU,KAAA,IAAY,IAAI,WAAW,QAAQ,aAAa,IAAI,QAAQ;CAC5F,IAAI,CAAC,OAAO,OAAO,oBAAC,eAAD,EAAe,MAAA,IAAa,CAAA;CAC/C,OAAO,oBAAC,eAAD,EAAe,MAAM,QAAQ,OAAO,YAAa,eAAe,KAAK,KAAK,QAAS,MAAQ,CAAA;AACpG;AAEA,SAAS,UAAU,EAAE,QAAQ,OAA+C;CAC1E,MAAM,QAAQ,IAAI,OAAO,OAAO;CAChC,IAAI,UAAU,KAAA,GAAW,OAAO,YAAY,QAAQ,OAAO,IAAI,MAAM,OAAO,GAAG;CAC/E,MAAM,EAAE,iBAAiB,OAAO;CAChC,OAAO,iBAAiB,IAAI,OAAO,iBAAiB,KAAK,IAAI,oBAAC,oBAAD,CAAqB,CAAA,IAAA;AACpF;AAEA,SAAgB,eAAe,EAAE,QAAQ,OAA+C;CACtF,OACE,oBAAC,iBAAD;EAAiB,OAAO,CAAC,OAAO,QAAQ;EACtC,UAAA,oBAAC,WAAD;GAAmB;GAAa;EAAM,CAAA;CACvB,CAAA;AAErB;AAEA,SAAgB,gBAAgB,EAAE,QAAQ,UAA+D;CACvG,IAAI,CAAC,QAAQ,OAAO,oBAAC,oBAAD,EAAoB,OAAO,KAAA,EAAY,CAAA;CAC3D,OAAO,oBAAC,oBAAD;EAAoB,OAAO,YAAY,QAAQ,MAAM;EAAI,UAAA,aAAa,QAAQ,MAAM;CAAsB,CAAA;AACnH"}

package/dist/domains/dashboards/kinds/table/table-columns.cjs.js

@@ -0,0 +1,72 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_metrics_components_breakdown_breakdown_change_description = require("../../../metrics/components/breakdown/breakdown-change-description.cjs.js");
+const require_domains_metrics_components_breakdown_breakdown_figure = require("../../../metrics/components/breakdown/breakdown-figure.cjs.js");
+const require_domains_dashboards_kinds_table_table_cells = require("./table-cells.cjs.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/domains/dashboards/kinds/table/table-columns.tsx
+/** The MetricsTable column for one of the view's columns. */
+function tableColumn(column, window, compared, changeOf) {
+	const o = column.options;
+	const base = {
+		id: column.id,
+		header: column.label,
+		description: o.description
+	};
+	switch (o.type) {
+		case "name": return {
+			...base,
+			width: o.width,
+			sortValue: o.sortable ? (row) => row.name : void 0,
+			firstDirection: "asc",
+			cell: (row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_kinds_table_table_cells.TableNameCell, {
+				options: o,
+				row
+			})
+		};
+		case "dimension": return {
+			...base,
+			width: o.width,
+			sortValue: o.sortable ? (row) => o.query === void 0 ? row.dimensions[o.dimension] : row.lookups[column.id] : void 0,
+			firstDirection: "asc",
+			cell: (row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_kinds_table_table_cells.TableDimensionCell, {
+				id: column.id,
+				options: o,
+				row
+			})
+		};
+		case "value": {
+			const value = {
+				id: column.id,
+				label: column.label,
+				options: o
+			};
+			return {
+				...base,
+				align: "end",
+				width: o.width,
+				sortValue: o.sortable === false ? void 0 : (row) => row.values[column.id],
+				cell: (row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_kinds_table_table_cells.TableValueCell, {
+					column: value,
+					row
+				})
+			};
+		}
+		case "change": return {
+			id: column.id,
+			header: column.label,
+			align: "end",
+			description: o.description ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_breakdown_breakdown_change_description.BreakdownChangeDescription, {
+				window,
+				label: compared?.label ?? ""
+			}),
+			sortValue: (row) => changeOf(row)?.change,
+			cell: (row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_breakdown_breakdown_figure.BreakdownFigure, { children: compared && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_kinds_table_table_cells.TableChangeCell, {
+				change: changeOf(row),
+				column: compared
+			}) })
+		};
+	}
+}
+exports.tableColumn = tableColumn;
+
+//# sourceMappingURL=table-columns.cjs.js.map

package/dist/domains/dashboards/kinds/table/table-columns.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-columns.cjs.js","names":["TableNameCell","TableDimensionCell","TableValueCell","BreakdownChangeDescription","BreakdownFigure","TableChangeCell"],"sources":["../../../../../src/domains/dashboards/kinds/table/table-columns.tsx"],"sourcesContent":["import { BreakdownChangeDescription } from '../../../metrics/components/breakdown/breakdown-change-description';\nimport { BreakdownFigure } from '../../../metrics/components/breakdown/breakdown-figure';\nimport type { Change, TableColumn, TableRow, ValueColumn } from '../../lib/table';\nimport { TableChangeCell, TableDimensionCell, TableNameCell, TableValueCell } from './table-cells';\nimport type { MetricsTableColumn } from '@/ds/components/MetricsTable';\n\n/** The MetricsTable column for one of the view's columns. */\nexport function tableColumn(\n  column: TableColumn,\n  window: { start: Date; end: Date },\n  compared: ValueColumn | undefined,\n  changeOf: (row: TableRow) => Change | undefined,\n): MetricsTableColumn<TableRow> {\n  const o = column.options;\n  const base = { id: column.id, header: column.label, description: o.description };\n  switch (o.type) {\n    case 'name':\n      return {\n        ...base,\n        width: o.width,\n        sortValue: o.sortable ? (row: TableRow) => row.name : undefined,\n        firstDirection: 'asc',\n        cell: row => <TableNameCell options={o} row={row} />,\n      };\n    case 'dimension':\n      return {\n        ...base,\n        width: o.width,\n        sortValue: o.sortable\n          ? (row: TableRow) => (o.query === undefined ? row.dimensions[o.dimension] : row.lookups[column.id])\n          : undefined,\n        firstDirection: 'asc',\n        cell: row => <TableDimensionCell id={column.id} options={o} row={row} />,\n      };\n    case 'value': {\n      const value: ValueColumn = { id: column.id, label: column.label, options: o };\n      return {\n        ...base,\n        align: 'end',\n        width: o.width,\n        sortValue: o.sortable === false ? undefined : (row: TableRow) => row.values[column.id],\n        cell: row => <TableValueCell column={value} row={row} />,\n      };\n    }\n    case 'change':\n      return {\n        id: column.id,\n        header: column.label,\n        align: 'end',\n        description: o.description ?? <BreakdownChangeDescription window={window} label={compared?.label ?? ''} />,\n        // Sorted by the change shown: biggest rise first, biggest fall first the other way. New rows\n        // have no change to rank, so they sort last.\n        sortValue: row => changeOf(row)?.change,\n        cell: row => (\n          <BreakdownFigure>{compared && <TableChangeCell change={changeOf(row)} column={compared} />}</BreakdownFigure>\n        ),\n      };\n  }\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,YACd,QACA,QACA,UACA,UAC8B;CAC9B,MAAM,IAAI,OAAO;CACjB,MAAM,OAAO;EAAE,IAAI,OAAO;EAAI,QAAQ,OAAO;EAAO,aAAa,EAAE;CAAY;CAC/E,QAAQ,EAAE,MAAV;EACE,KAAK,QACH,OAAO;GACL,GAAG;GACH,OAAO,EAAE;GACT,WAAW,EAAE,YAAY,QAAkB,IAAI,OAAO,KAAA;GACtD,gBAAgB;GAChB,OAAM,QAAO,iBAAA,GAAA,kBAAA,IAAA,CAACA,mDAAAA,eAAD;IAAe,SAAS;IAAQ;GAAM,CAAA;EACrD;EACF,KAAK,aACH,OAAO;GACL,GAAG;GACH,OAAO,EAAE;GACT,WAAW,EAAE,YACR,QAAmB,EAAE,UAAU,KAAA,IAAY,IAAI,WAAW,EAAE,aAAa,IAAI,QAAQ,OAAO,MAC7F,KAAA;GACJ,gBAAgB;GAChB,OAAM,QAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,mDAAAA,oBAAD;IAAoB,IAAI,OAAO;IAAI,SAAS;IAAQ;GAAM,CAAA;EACzE;EACF,KAAK,SAAS;GACZ,MAAM,QAAqB;IAAE,IAAI,OAAO;IAAI,OAAO,OAAO;IAAO,SAAS;GAAE;GAC5E,OAAO;IACL,GAAG;IACH,OAAO;IACP,OAAO,EAAE;IACT,WAAW,EAAE,aAAa,QAAQ,KAAA,KAAa,QAAkB,IAAI,OAAO,OAAO;IACnF,OAAM,QAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,mDAAAA,gBAAD;KAAgB,QAAQ;KAAY;IAAM,CAAA;GACzD;EACF;EACA,KAAK,UACH,OAAO;GACL,IAAI,OAAO;GACX,QAAQ,OAAO;GACf,OAAO;GACP,aAAa,EAAE,eAAe,iBAAA,GAAA,kBAAA,IAAA,CAACC,0EAAAA,4BAAD;IAAoC;IAAQ,OAAO,UAAU,SAAS;GAAK,CAAA;GAGzG,YAAW,QAAO,SAAS,GAAG,CAAC,EAAE;GACjC,OAAM,QACJ,iBAAA,GAAA,kBAAA,IAAA,CAACC,8DAAAA,iBAAD,EAAA,UAAkB,YAAY,iBAAA,GAAA,kBAAA,IAAA,CAACC,mDAAAA,iBAAD;IAAiB,QAAQ,SAAS,GAAG;IAAG,QAAQ;GAAW,CAAA,EAAmB,CAAA;EAEhH;CACJ;AACF"}

package/dist/domains/dashboards/kinds/table/table-columns.d.ts

@@ -0,0 +1 @@
+export * from '../../../../src/domains/dashboards/kinds/table/table-columns';

package/dist/domains/dashboards/kinds/table/table-columns.es.js

@@ -0,0 +1,71 @@
+import { BreakdownChangeDescription } from "../../../metrics/components/breakdown/breakdown-change-description.es.js";
+import { BreakdownFigure } from "../../../metrics/components/breakdown/breakdown-figure.es.js";
+import { TableChangeCell, TableDimensionCell, TableNameCell, TableValueCell } from "./table-cells.es.js";
+import { jsx } from "react/jsx-runtime";
+// src/domains/dashboards/kinds/table/table-columns.tsx
+/** The MetricsTable column for one of the view's columns. */
+function tableColumn(column, window, compared, changeOf) {
+	const o = column.options;
+	const base = {
+		id: column.id,
+		header: column.label,
+		description: o.description
+	};
+	switch (o.type) {
+		case "name": return {
+			...base,
+			width: o.width,
+			sortValue: o.sortable ? (row) => row.name : void 0,
+			firstDirection: "asc",
+			cell: (row) => /* @__PURE__ */ jsx(TableNameCell, {
+				options: o,
+				row
+			})
+		};
+		case "dimension": return {
+			...base,
+			width: o.width,
+			sortValue: o.sortable ? (row) => o.query === void 0 ? row.dimensions[o.dimension] : row.lookups[column.id] : void 0,
+			firstDirection: "asc",
+			cell: (row) => /* @__PURE__ */ jsx(TableDimensionCell, {
+				id: column.id,
+				options: o,
+				row
+			})
+		};
+		case "value": {
+			const value = {
+				id: column.id,
+				label: column.label,
+				options: o
+			};
+			return {
+				...base,
+				align: "end",
+				width: o.width,
+				sortValue: o.sortable === false ? void 0 : (row) => row.values[column.id],
+				cell: (row) => /* @__PURE__ */ jsx(TableValueCell, {
+					column: value,
+					row
+				})
+			};
+		}
+		case "change": return {
+			id: column.id,
+			header: column.label,
+			align: "end",
+			description: o.description ?? /* @__PURE__ */ jsx(BreakdownChangeDescription, {
+				window,
+				label: compared?.label ?? ""
+			}),
+			sortValue: (row) => changeOf(row)?.change,
+			cell: (row) => /* @__PURE__ */ jsx(BreakdownFigure, { children: compared && /* @__PURE__ */ jsx(TableChangeCell, {
+				change: changeOf(row),
+				column: compared
+			}) })
+		};
+	}
+}
+export { tableColumn };
+
+//# sourceMappingURL=table-columns.es.js.map

package/dist/domains/dashboards/kinds/table/table-columns.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-columns.es.js","names":[],"sources":["../../../../../src/domains/dashboards/kinds/table/table-columns.tsx"],"sourcesContent":["import { BreakdownChangeDescription } from '../../../metrics/components/breakdown/breakdown-change-description';\nimport { BreakdownFigure } from '../../../metrics/components/breakdown/breakdown-figure';\nimport type { Change, TableColumn, TableRow, ValueColumn } from '../../lib/table';\nimport { TableChangeCell, TableDimensionCell, TableNameCell, TableValueCell } from './table-cells';\nimport type { MetricsTableColumn } from '@/ds/components/MetricsTable';\n\n/** The MetricsTable column for one of the view's columns. */\nexport function tableColumn(\n  column: TableColumn,\n  window: { start: Date; end: Date },\n  compared: ValueColumn | undefined,\n  changeOf: (row: TableRow) => Change | undefined,\n): MetricsTableColumn<TableRow> {\n  const o = column.options;\n  const base = { id: column.id, header: column.label, description: o.description };\n  switch (o.type) {\n    case 'name':\n      return {\n        ...base,\n        width: o.width,\n        sortValue: o.sortable ? (row: TableRow) => row.name : undefined,\n        firstDirection: 'asc',\n        cell: row => <TableNameCell options={o} row={row} />,\n      };\n    case 'dimension':\n      return {\n        ...base,\n        width: o.width,\n        sortValue: o.sortable\n          ? (row: TableRow) => (o.query === undefined ? row.dimensions[o.dimension] : row.lookups[column.id])\n          : undefined,\n        firstDirection: 'asc',\n        cell: row => <TableDimensionCell id={column.id} options={o} row={row} />,\n      };\n    case 'value': {\n      const value: ValueColumn = { id: column.id, label: column.label, options: o };\n      return {\n        ...base,\n        align: 'end',\n        width: o.width,\n        sortValue: o.sortable === false ? undefined : (row: TableRow) => row.values[column.id],\n        cell: row => <TableValueCell column={value} row={row} />,\n      };\n    }\n    case 'change':\n      return {\n        id: column.id,\n        header: column.label,\n        align: 'end',\n        description: o.description ?? <BreakdownChangeDescription window={window} label={compared?.label ?? ''} />,\n        // Sorted by the change shown: biggest rise first, biggest fall first the other way. New rows\n        // have no change to rank, so they sort last.\n        sortValue: row => changeOf(row)?.change,\n        cell: row => (\n          <BreakdownFigure>{compared && <TableChangeCell change={changeOf(row)} column={compared} />}</BreakdownFigure>\n        ),\n      };\n  }\n}\n"],"mappings":";;;;;;AAOA,SAAgB,YACd,QACA,QACA,UACA,UAC8B;CAC9B,MAAM,IAAI,OAAO;CACjB,MAAM,OAAO;EAAE,IAAI,OAAO;EAAI,QAAQ,OAAO;EAAO,aAAa,EAAE;CAAY;CAC/E,QAAQ,EAAE,MAAV;EACE,KAAK,QACH,OAAO;GACL,GAAG;GACH,OAAO,EAAE;GACT,WAAW,EAAE,YAAY,QAAkB,IAAI,OAAO,KAAA;GACtD,gBAAgB;GAChB,OAAM,QAAO,oBAAC,eAAD;IAAe,SAAS;IAAQ;GAAM,CAAA;EACrD;EACF,KAAK,aACH,OAAO;GACL,GAAG;GACH,OAAO,EAAE;GACT,WAAW,EAAE,YACR,QAAmB,EAAE,UAAU,KAAA,IAAY,IAAI,WAAW,EAAE,aAAa,IAAI,QAAQ,OAAO,MAC7F,KAAA;GACJ,gBAAgB;GAChB,OAAM,QAAO,oBAAC,oBAAD;IAAoB,IAAI,OAAO;IAAI,SAAS;IAAQ;GAAM,CAAA;EACzE;EACF,KAAK,SAAS;GACZ,MAAM,QAAqB;IAAE,IAAI,OAAO;IAAI,OAAO,OAAO;IAAO,SAAS;GAAE;GAC5E,OAAO;IACL,GAAG;IACH,OAAO;IACP,OAAO,EAAE;IACT,WAAW,EAAE,aAAa,QAAQ,KAAA,KAAa,QAAkB,IAAI,OAAO,OAAO;IACnF,OAAM,QAAO,oBAAC,gBAAD;KAAgB,QAAQ;KAAY;IAAM,CAAA;GACzD;EACF;EACA,KAAK,UACH,OAAO;GACL,IAAI,OAAO;GACX,QAAQ,OAAO;GACf,OAAO;GACP,aAAa,EAAE,eAAe,oBAAC,4BAAD;IAAoC;IAAQ,OAAO,UAAU,SAAS;GAAK,CAAA;GAGzG,YAAW,QAAO,SAAS,GAAG,CAAC,EAAE;GACjC,OAAM,QACJ,oBAAC,iBAAD,EAAA,UAAkB,YAAY,oBAAC,iBAAD;IAAiB,QAAQ,SAAS,GAAG;IAAG,QAAQ;GAAW,CAAA,EAAmB,CAAA;EAEhH;CACJ;AACF"}

package/dist/domains/dashboards/kinds/table/table-frame.cjs.js

@@ -0,0 +1,16 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_metrics_components_chart_card = require("../../../metrics/components/chart-card.cjs.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/domains/dashboards/kinds/table/table-frame.tsx
+/** The table's card: the open view's title, as a menu of every view when there are several. */
+function TableFrame({ heading, isUpdating, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card.ChartCard, {
+		...heading,
+		isUpdating,
+		bodyHeight: "fit",
+		children
+	});
+}
+exports.TableFrame = TableFrame;
+
+//# sourceMappingURL=table-frame.cjs.js.map

package/dist/domains/dashboards/kinds/table/table-frame.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-frame.cjs.js","names":["ChartCard"],"sources":["../../../../../src/domains/dashboards/kinds/table/table-frame.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { ChartCard } from '../../../metrics/components/chart-card';\nimport type { ViewHeading } from '../../lib/chrome';\nimport type { TableOptions } from '../../lib/table';\nimport type { ResolvedView, WidgetKindProps } from '../../widget-kind';\n\nexport type TableTabProps = WidgetKindProps<TableOptions> & {\n  view: ResolvedView<TableOptions>;\n  heading: ViewHeading;\n};\n\n/** The table's card: the open view's title, as a menu of every view when there are several. */\nexport function TableFrame({\n  heading,\n  isUpdating,\n  children,\n}: Pick<TableTabProps, 'heading'> & { isUpdating?: boolean; children: ReactNode }) {\n  return (\n    <ChartCard {...heading} isUpdating={isUpdating} bodyHeight=\"fit\">\n      {children}\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;;AAYA,SAAgB,WAAW,EACzB,SACA,YACA,YACiF;CACjF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACA,8CAAAA,WAAD;EAAW,GAAI;EAAqB;EAAY,YAAW;EACxD;CACQ,CAAA;AAEf"}

package/dist/domains/dashboards/kinds/table/table-frame.d.ts

@@ -0,0 +1 @@
+export * from '../../../../src/domains/dashboards/kinds/table/table-frame';

package/dist/domains/dashboards/kinds/table/table-frame.es.js

@@ -0,0 +1,15 @@
+import { ChartCard } from "../../../metrics/components/chart-card.es.js";
+import { jsx } from "react/jsx-runtime";
+// src/domains/dashboards/kinds/table/table-frame.tsx
+/** The table's card: the open view's title, as a menu of every view when there are several. */
+function TableFrame({ heading, isUpdating, children }) {
+	return /* @__PURE__ */ jsx(ChartCard, {
+		...heading,
+		isUpdating,
+		bodyHeight: "fit",
+		children
+	});
+}
+export { TableFrame };
+
+//# sourceMappingURL=table-frame.es.js.map

package/dist/domains/dashboards/kinds/table/table-frame.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-frame.es.js","names":[],"sources":["../../../../../src/domains/dashboards/kinds/table/table-frame.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { ChartCard } from '../../../metrics/components/chart-card';\nimport type { ViewHeading } from '../../lib/chrome';\nimport type { TableOptions } from '../../lib/table';\nimport type { ResolvedView, WidgetKindProps } from '../../widget-kind';\n\nexport type TableTabProps = WidgetKindProps<TableOptions> & {\n  view: ResolvedView<TableOptions>;\n  heading: ViewHeading;\n};\n\n/** The table's card: the open view's title, as a menu of every view when there are several. */\nexport function TableFrame({\n  heading,\n  isUpdating,\n  children,\n}: Pick<TableTabProps, 'heading'> & { isUpdating?: boolean; children: ReactNode }) {\n  return (\n    <ChartCard {...heading} isUpdating={isUpdating} bodyHeight=\"fit\">\n      {children}\n    </ChartCard>\n  );\n}\n"],"mappings":";;;;AAYA,SAAgB,WAAW,EACzB,SACA,YACA,YACiF;CACjF,OACE,oBAAC,WAAD;EAAW,GAAI;EAAqB;EAAY,YAAW;EACxD;CACQ,CAAA;AAEf"}

package/dist/domains/dashboards/kinds/table/table-tabs.cjs.js

@@ -0,0 +1,55 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_domains_dashboards_lib_requests = require("../../lib/requests.cjs.js");
+const require_domains_dashboards_hooks_use_dashboard_requests = require("../../hooks/use-dashboard-requests.cjs.js");
+const require_domains_dashboards_lib_values = require("../../lib/values.cjs.js");
+const require_MetricsCard = require("../../../../MetricsCard-CEB-f2sv.cjs");
+const require_domains_dashboards_lib_table = require("../../lib/table.cjs.js");
+const require_domains_dashboards_lib_chrome = require("../../lib/chrome.cjs.js");
+const require_domains_dashboards_hooks_use_widget_views = require("../../hooks/use-widget-views.cjs.js");
+const require_domains_dashboards_kinds_table_table_frame = require("./table-frame.cjs.js");
+const require_domains_dashboards_kinds_table_table_view = require("./table-view.cjs.js");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/domains/dashboards/kinds/table/table-tabs.tsx
+/** Filters an aggregate can't apply, named as the filter bar names them. */
+var FILTER_NAMES = {
+	serviceName: "service",
+	requestId: "request ID",
+	experimentId: "experiment",
+	tags: "tags",
+	provider: "provider",
+	model: "model"
+};
+/** The opener view's sorted column and every query it reads, when the opener can count its rows. */
+function openerSource(views, blocked) {
+	const opener = views.find((v) => v.options.openWhen);
+	if (!opener || blocked(opener.queries)) return void 0;
+	const column = require_domains_dashboards_lib_table.parseColumns(opener.columns).columns.filter(require_domains_dashboards_lib_table.isValueColumn).find((c) => c.id === opener.options.defaultSort.column);
+	if (!column) return void 0;
+	const read = new Set(require_domains_dashboards_lib_values.exprRefs(column.options.value).map((r) => r.query));
+	const queries = opener.queries.filter((q) => q.id !== void 0 && read.has(q.id));
+	return queries.length > 0 && queries.length === read.size ? {
+		view: opener,
+		column,
+		queries
+	} : void 0;
+}
+function TableTabs({ page, blocked, ...props }) {
+	const opener = openerSource(props.views, blocked);
+	const openerResults = require_domains_dashboards_hooks_use_dashboard_requests.useDashboardRequests(opener?.queries.map((q) => require_domains_dashboards_lib_requests.buildRequest(q, page, {})) ?? []);
+	const rows = opener ? require_domains_dashboards_lib_table.countRows(opener.view.options, opener.column, opener.queries, openerResults.map((r) => r?.data)) : "uncountable";
+	const { view, index, heading } = require_domains_dashboards_hooks_use_widget_views.useViewMenu(props.widget, props.views, require_domains_dashboards_lib_table.openingView(props.views, rows));
+	const unsupported = blocked(view.queries);
+	if (unsupported) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_kinds_table_table_frame.TableFrame, {
+		heading,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsCard.MetricsCard.NoData, { message: require_domains_dashboards_lib_chrome.unsupportedMessage(unsupported, FILTER_NAMES) })
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_kinds_table_table_view.TableView, {
+		...props,
+		view,
+		heading,
+		page
+	}, index);
+}
+exports.TableTabs = TableTabs;
+
+//# sourceMappingURL=table-tabs.cjs.js.map

package/dist/domains/dashboards/kinds/table/table-tabs.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-tabs.cjs.js","names":["parseColumns","isValueColumn","exprRefs","useDashboardRequests","buildRequest","countRows","useViewMenu","openingView","TableFrame","MetricsCard","unsupportedMessage","TableView"],"sources":["../../../../../src/domains/dashboards/kinds/table/table-tabs.tsx"],"sourcesContent":["import type { BlockedFields } from '../../components/view-gate';\nimport { useDashboardRequests } from '../../hooks/use-dashboard-requests';\nimport { useViewMenu } from '../../hooks/use-widget-views';\nimport { unsupportedMessage } from '../../lib/chrome';\nimport { buildRequest } from '../../lib/requests';\nimport type { DashboardPageContext } from '../../lib/requests';\nimport { countRows, isValueColumn, openingView, parseColumns } from '../../lib/table';\nimport type { TableOptions } from '../../lib/table';\nimport { exprRefs } from '../../lib/values';\nimport type { WidgetKindProps } from '../../widget-kind';\nimport { TableFrame } from './table-frame';\nimport { TableView } from './table-view';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\n\ntype Props = WidgetKindProps<TableOptions>;\n\n/** Filters an aggregate can't apply, named as the filter bar names them. */\nconst FILTER_NAMES: Record<string, string> = {\n  serviceName: 'service',\n  requestId: 'request ID',\n  experimentId: 'experiment',\n  tags: 'tags',\n  provider: 'provider',\n  model: 'model',\n};\n\n/** The opener view's sorted column and every query it reads, when the opener can count its rows. */\nfunction openerSource(views: Props['views'], blocked: BlockedFields) {\n  const opener = views.find(v => v.options.openWhen);\n  if (!opener || blocked(opener.queries)) return undefined;\n  const column = parseColumns(opener.columns)\n    .columns.filter(isValueColumn)\n    .find(c => c.id === opener.options.defaultSort.column);\n  if (!column) return undefined;\n  const read = new Set(exprRefs(column.options.value).map(r => r.query));\n  const queries = opener.queries.filter(q => q.id !== undefined && read.has(q.id));\n  return queries.length > 0 && queries.length === read.size ? { view: opener, column, queries } : undefined;\n}\n\nexport function TableTabs({ page, blocked, ...props }: Props & { page: DashboardPageContext; blocked: BlockedFields }) {\n  // A view that opens only with enough rows counts them from its sorted column's own request, so\n  // opening on it costs nothing more.\n  const opener = openerSource(props.views, blocked);\n  const openerResults = useDashboardRequests(opener?.queries.map(q => buildRequest(q, page, {})) ?? []);\n  const rows = opener\n    ? countRows(\n        opener.view.options,\n        opener.column,\n        opener.queries,\n        openerResults.map(r => r?.data),\n      )\n    : 'uncountable';\n  const { view, index, heading } = useViewMenu(props.widget, props.views, openingView(props.views, rows));\n\n  const unsupported = blocked(view.queries);\n  if (unsupported) {\n    return (\n      <TableFrame heading={heading}>\n        <MetricsCard.NoData message={unsupportedMessage(unsupported, FILTER_NAMES)} />\n      </TableFrame>\n    );\n  }\n  return <TableView key={index} {...props} view={view} heading={heading} page={page} />;\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,IAAM,eAAuC;CAC3C,aAAa;CACb,WAAW;CACX,cAAc;CACd,MAAM;CACN,UAAU;CACV,OAAO;AACT;;AAGA,SAAS,aAAa,OAAuB,SAAwB;CACnE,MAAM,SAAS,MAAM,MAAK,MAAK,EAAE,QAAQ,QAAQ;CACjD,IAAI,CAAC,UAAU,QAAQ,OAAO,OAAO,GAAG,OAAO,KAAA;CAC/C,MAAM,SAASA,qCAAAA,aAAa,OAAO,OAAO,CAAC,CACxC,QAAQ,OAAOC,qCAAAA,aAAa,CAAC,CAC7B,MAAK,MAAK,EAAE,OAAO,OAAO,QAAQ,YAAY,MAAM;CACvD,IAAI,CAAC,QAAQ,OAAO,KAAA;CACpB,MAAM,OAAO,IAAI,IAAIC,sCAAAA,SAAS,OAAO,QAAQ,KAAK,CAAC,CAAC,KAAI,MAAK,EAAE,KAAK,CAAC;CACrE,MAAM,UAAU,OAAO,QAAQ,QAAO,MAAK,EAAE,OAAO,KAAA,KAAa,KAAK,IAAI,EAAE,EAAE,CAAC;CAC/E,OAAO,QAAQ,SAAS,KAAK,QAAQ,WAAW,KAAK,OAAO;EAAE,MAAM;EAAQ;EAAQ;CAAQ,IAAI,KAAA;AAClG;AAEA,SAAgB,UAAU,EAAE,MAAM,SAAS,GAAG,SAAyE;CAGrH,MAAM,SAAS,aAAa,MAAM,OAAO,OAAO;CAChD,MAAM,gBAAgBC,wDAAAA,qBAAqB,QAAQ,QAAQ,KAAI,MAAKC,wCAAAA,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;CACpG,MAAM,OAAO,SACTC,qCAAAA,UACE,OAAO,KAAK,SACZ,OAAO,QACP,OAAO,SACP,cAAc,KAAI,MAAK,GAAG,IAAI,CAChC,IACA;CACJ,MAAM,EAAE,MAAM,OAAO,YAAYC,kDAAAA,YAAY,MAAM,QAAQ,MAAM,OAAOC,qCAAAA,YAAY,MAAM,OAAO,IAAI,CAAC;CAEtG,MAAM,cAAc,QAAQ,KAAK,OAAO;CACxC,IAAI,aACF,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,mDAAAA,YAAD;EAAqB;EACnB,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,oBAAAA,YAAY,QAAb,EAAoB,SAASC,sCAAAA,mBAAmB,aAAa,YAAY,EAAI,CAAA;CACnE,CAAA;CAGhB,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAACC,kDAAAA,WAAD;EAAuB,GAAI;EAAa;EAAe;EAAe;CAAO,GAA7D,KAA6D;AACtF"}

package/dist/domains/dashboards/kinds/table/table-tabs.d.ts

@@ -0,0 +1 @@
+export * from '../../../../src/domains/dashboards/kinds/table/table-tabs';

package/dist/domains/dashboards/kinds/table/table-tabs.es.js

@@ -0,0 +1,54 @@
+import { buildRequest } from "../../lib/requests.es.js";
+import { useDashboardRequests } from "../../hooks/use-dashboard-requests.es.js";
+import { exprRefs } from "../../lib/values.es.js";
+import { t as MetricsCard } from "../../../../MetricsCard-M8awJ2B_.js";
+import { countRows, isValueColumn, openingView, parseColumns } from "../../lib/table.es.js";
+import { unsupportedMessage } from "../../lib/chrome.es.js";
+import { useViewMenu } from "../../hooks/use-widget-views.es.js";
+import { TableFrame } from "./table-frame.es.js";
+import { TableView } from "./table-view.es.js";
+import { jsx } from "react/jsx-runtime";
+// src/domains/dashboards/kinds/table/table-tabs.tsx
+/** Filters an aggregate can't apply, named as the filter bar names them. */
+var FILTER_NAMES = {
+	serviceName: "service",
+	requestId: "request ID",
+	experimentId: "experiment",
+	tags: "tags",
+	provider: "provider",
+	model: "model"
+};
+/** The opener view's sorted column and every query it reads, when the opener can count its rows. */
+function openerSource(views, blocked) {
+	const opener = views.find((v) => v.options.openWhen);
+	if (!opener || blocked(opener.queries)) return void 0;
+	const column = parseColumns(opener.columns).columns.filter(isValueColumn).find((c) => c.id === opener.options.defaultSort.column);
+	if (!column) return void 0;
+	const read = new Set(exprRefs(column.options.value).map((r) => r.query));
+	const queries = opener.queries.filter((q) => q.id !== void 0 && read.has(q.id));
+	return queries.length > 0 && queries.length === read.size ? {
+		view: opener,
+		column,
+		queries
+	} : void 0;
+}
+function TableTabs({ page, blocked, ...props }) {
+	const opener = openerSource(props.views, blocked);
+	const openerResults = useDashboardRequests(opener?.queries.map((q) => buildRequest(q, page, {})) ?? []);
+	const rows = opener ? countRows(opener.view.options, opener.column, opener.queries, openerResults.map((r) => r?.data)) : "uncountable";
+	const { view, index, heading } = useViewMenu(props.widget, props.views, openingView(props.views, rows));
+	const unsupported = blocked(view.queries);
+	if (unsupported) return /* @__PURE__ */ jsx(TableFrame, {
+		heading,
+		children: /* @__PURE__ */ jsx(MetricsCard.NoData, { message: unsupportedMessage(unsupported, FILTER_NAMES) })
+	});
+	return /* @__PURE__ */ jsx(TableView, {
+		...props,
+		view,
+		heading,
+		page
+	}, index);
+}
+export { TableTabs };
+
+//# sourceMappingURL=table-tabs.es.js.map

package/dist/domains/dashboards/kinds/table/table-tabs.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-tabs.es.js","names":[],"sources":["../../../../../src/domains/dashboards/kinds/table/table-tabs.tsx"],"sourcesContent":["import type { BlockedFields } from '../../components/view-gate';\nimport { useDashboardRequests } from '../../hooks/use-dashboard-requests';\nimport { useViewMenu } from '../../hooks/use-widget-views';\nimport { unsupportedMessage } from '../../lib/chrome';\nimport { buildRequest } from '../../lib/requests';\nimport type { DashboardPageContext } from '../../lib/requests';\nimport { countRows, isValueColumn, openingView, parseColumns } from '../../lib/table';\nimport type { TableOptions } from '../../lib/table';\nimport { exprRefs } from '../../lib/values';\nimport type { WidgetKindProps } from '../../widget-kind';\nimport { TableFrame } from './table-frame';\nimport { TableView } from './table-view';\nimport { MetricsCard } from '@/ds/components/MetricsCard';\n\ntype Props = WidgetKindProps<TableOptions>;\n\n/** Filters an aggregate can't apply, named as the filter bar names them. */\nconst FILTER_NAMES: Record<string, string> = {\n  serviceName: 'service',\n  requestId: 'request ID',\n  experimentId: 'experiment',\n  tags: 'tags',\n  provider: 'provider',\n  model: 'model',\n};\n\n/** The opener view's sorted column and every query it reads, when the opener can count its rows. */\nfunction openerSource(views: Props['views'], blocked: BlockedFields) {\n  const opener = views.find(v => v.options.openWhen);\n  if (!opener || blocked(opener.queries)) return undefined;\n  const column = parseColumns(opener.columns)\n    .columns.filter(isValueColumn)\n    .find(c => c.id === opener.options.defaultSort.column);\n  if (!column) return undefined;\n  const read = new Set(exprRefs(column.options.value).map(r => r.query));\n  const queries = opener.queries.filter(q => q.id !== undefined && read.has(q.id));\n  return queries.length > 0 && queries.length === read.size ? { view: opener, column, queries } : undefined;\n}\n\nexport function TableTabs({ page, blocked, ...props }: Props & { page: DashboardPageContext; blocked: BlockedFields }) {\n  // A view that opens only with enough rows counts them from its sorted column's own request, so\n  // opening on it costs nothing more.\n  const opener = openerSource(props.views, blocked);\n  const openerResults = useDashboardRequests(opener?.queries.map(q => buildRequest(q, page, {})) ?? []);\n  const rows = opener\n    ? countRows(\n        opener.view.options,\n        opener.column,\n        opener.queries,\n        openerResults.map(r => r?.data),\n      )\n    : 'uncountable';\n  const { view, index, heading } = useViewMenu(props.widget, props.views, openingView(props.views, rows));\n\n  const unsupported = blocked(view.queries);\n  if (unsupported) {\n    return (\n      <TableFrame heading={heading}>\n        <MetricsCard.NoData message={unsupportedMessage(unsupported, FILTER_NAMES)} />\n      </TableFrame>\n    );\n  }\n  return <TableView key={index} {...props} view={view} heading={heading} page={page} />;\n}\n"],"mappings":";;;;;;;;;;;;AAiBA,IAAM,eAAuC;CAC3C,aAAa;CACb,WAAW;CACX,cAAc;CACd,MAAM;CACN,UAAU;CACV,OAAO;AACT;;AAGA,SAAS,aAAa,OAAuB,SAAwB;CACnE,MAAM,SAAS,MAAM,MAAK,MAAK,EAAE,QAAQ,QAAQ;CACjD,IAAI,CAAC,UAAU,QAAQ,OAAO,OAAO,GAAG,OAAO,KAAA;CAC/C,MAAM,SAAS,aAAa,OAAO,OAAO,CAAC,CACxC,QAAQ,OAAO,aAAa,CAAC,CAC7B,MAAK,MAAK,EAAE,OAAO,OAAO,QAAQ,YAAY,MAAM;CACvD,IAAI,CAAC,QAAQ,OAAO,KAAA;CACpB,MAAM,OAAO,IAAI,IAAI,SAAS,OAAO,QAAQ,KAAK,CAAC,CAAC,KAAI,MAAK,EAAE,KAAK,CAAC;CACrE,MAAM,UAAU,OAAO,QAAQ,QAAO,MAAK,EAAE,OAAO,KAAA,KAAa,KAAK,IAAI,EAAE,EAAE,CAAC;CAC/E,OAAO,QAAQ,SAAS,KAAK,QAAQ,WAAW,KAAK,OAAO;EAAE,MAAM;EAAQ;EAAQ;CAAQ,IAAI,KAAA;AAClG;AAEA,SAAgB,UAAU,EAAE,MAAM,SAAS,GAAG,SAAyE;CAGrH,MAAM,SAAS,aAAa,MAAM,OAAO,OAAO;CAChD,MAAM,gBAAgB,qBAAqB,QAAQ,QAAQ,KAAI,MAAK,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;CACpG,MAAM,OAAO,SACT,UACE,OAAO,KAAK,SACZ,OAAO,QACP,OAAO,SACP,cAAc,KAAI,MAAK,GAAG,IAAI,CAChC,IACA;CACJ,MAAM,EAAE,MAAM,OAAO,YAAY,YAAY,MAAM,QAAQ,MAAM,OAAO,YAAY,MAAM,OAAO,IAAI,CAAC;CAEtG,MAAM,cAAc,QAAQ,KAAK,OAAO;CACxC,IAAI,aACF,OACE,oBAAC,YAAD;EAAqB;EACnB,UAAA,oBAAC,YAAY,QAAb,EAAoB,SAAS,mBAAmB,aAAa,YAAY,EAAI,CAAA;CACnE,CAAA;CAGhB,OAAO,oBAAC,WAAD;EAAuB,GAAI;EAAa;EAAe;EAAe;CAAO,GAA7D,KAA6D;AACtF"}

package/dist/domains/dashboards/kinds/table/table-view.cjs.js

@@ -0,0 +1,80 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Txt = require("../../../../Txt-BnoSqxKE.cjs");
+const require_domains_metrics_lib_chart_format = require("../../../metrics/lib/chart-format.cjs.js");
+const require_domains_dashboards_lib_requests = require("../../lib/requests.cjs.js");
+const require_domains_dashboards_hooks_use_dashboard_requests = require("../../hooks/use-dashboard-requests.cjs.js");
+const require_domains_metrics_components_chart_area = require("../../../metrics/components/chart-area.cjs.js");
+const require_domains_metrics_components_chart_card_error = require("../../../metrics/components/chart-card-error.cjs.js");
+const require_domains_dashboards_lib_table = require("../../lib/table.cjs.js");
+const require_domains_dashboards_hooks_use_widget_views = require("../../hooks/use-widget-views.cjs.js");
+const require_domains_dashboards_kinds_table_table_frame = require("./table-frame.cjs.js");
+const require_domains_dashboards_kinds_table_table_columns = require("./table-columns.cjs.js");
+const require_MetricsTable = require("../../../../MetricsTable-D-aZf3dk.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/domains/dashboards/kinds/table/table-view.tsx
+var isAggregate = (query) => query !== void 0 && require_domains_dashboards_lib_requests.aggregateSource(query) !== void 0;
+function TableView(props) {
+	const { view, page, widget, onDrilldown } = props;
+	const { options, queries } = view;
+	const onClick = require_domains_dashboards_hooks_use_widget_views.useDrilldown(widget, view, onDrilldown);
+	const { columns } = require_domains_dashboards_lib_table.parseColumns(view.columns);
+	const values = columns.filter(require_domains_dashboards_lib_table.isValueColumn);
+	const [sort, setSort] = (0, react.useState)(options.defaultSort);
+	const [compared, setCompared] = (0, react.useState)(() => values.find((c) => c.id === options.defaultSort.column)?.id ?? values[0]?.id);
+	const onSortChange = (next = options.defaultSort) => {
+		setSort(next);
+		if (values.some((c) => c.id === next.column)) setCompared(next.column);
+	};
+	const rowIds = new Set(require_domains_dashboards_lib_table.rowQueries(columns, queries));
+	const isRowQuery = (i) => {
+		const id = queries[i]?.id;
+		return id !== void 0 && rowIds.has(id);
+	};
+	const current = require_domains_dashboards_hooks_use_dashboard_requests.useDashboardRequests(queries.map((q) => require_domains_dashboards_lib_requests.buildRequest(q, page, {})));
+	const previous = require_domains_dashboards_hooks_use_dashboard_requests.useDashboardRequests(queries.map((q) => require_domains_dashboards_lib_requests.buildPreviousRequest(q, page, {})));
+	const waited = current.flatMap((r, i) => r && isRowQuery(i) ? [r] : []);
+	if (waited.some((r) => r.isError)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_kinds_table_table_frame.TableFrame, {
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_metrics_components_chart_card_error.ChartCardError, {
+			error: waited.find((r) => r.isError)?.error,
+			onRetry: () => waited.forEach((r) => r.isError && void r.refetch())
+		})
+	});
+	const isLoading = waited.some((r) => r.isLoading);
+	const previousSettled = previous.every((r, i) => !r || !isRowQuery(i) || !r.isLoading && !r.isError);
+	const content = isLoading ? void 0 : require_domains_dashboards_lib_table.tableContent(options, columns, queries, current.map((r) => r?.data), previousSettled ? previous.map((r) => r?.data) : void 0);
+	const before = content?.before;
+	const aggregates = current.flatMap((r, i) => r && isRowQuery(i) && isAggregate(queries[i]) ? [r] : []);
+	const comparedColumn = values.find((c) => c.id === compared);
+	const changeOf = (row) => before && comparedColumn ? require_domains_dashboards_lib_table.valueChange(comparedColumn, row.values[comparedColumn.id], before.get(row.key)?.[comparedColumn.id]) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_dashboards_kinds_table_table_frame.TableFrame, {
+		...props,
+		isUpdating: aggregates.length ? aggregates.some((r) => r.isRefetching) : void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_domains_metrics_components_chart_area.ChartArea, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MetricsTable.MetricsTable, {
+			"aria-label": options.ariaLabel,
+			columns: columns.map((c) => require_domains_dashboards_kinds_table_table_columns.tableColumn(c, page.window, comparedColumn, changeOf)),
+			rows: content?.rows ?? [],
+			getRowKey: (row) => row.key,
+			sort,
+			defaultSort: options.defaultSort,
+			onSortChange,
+			onRowClick: onClick && ((row) => onClick(require_domains_dashboards_lib_table.rowDrilldown(options, row))),
+			pageSize: options.pageSize,
+			isLoading,
+			empty: options.emptyMessage
+		}), content?.truncated && content.limit !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Txt.Txt, {
+			variant: "caption",
+			tone: "muted",
+			className: "pt-2",
+			children: [
+				"Showing the ",
+				require_domains_metrics_lib_chart_format.formatCount(content.limit),
+				" busiest; sorting covers only these."
+			]
+		})] })
+	});
+}
+exports.TableView = TableView;
+
+//# sourceMappingURL=table-view.cjs.js.map

package/dist/domains/dashboards/kinds/table/table-view.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-view.cjs.js","names":["aggregateSource","useDrilldown","parseColumns","isValueColumn","useState","rowQueries","useDashboardRequests","buildRequest","buildPreviousRequest","TableFrame","ChartCardError","tableContent","valueChange","ChartArea","MetricsTable","tableColumn","rowDrilldown","Txt","formatCount"],"sources":["../../../../../src/domains/dashboards/kinds/table/table-view.tsx"],"sourcesContent":["import type { DashboardQuery } from '@mastra/client-js';\nimport { useState } from 'react';\nimport { ChartArea } from '../../../metrics/components/chart-area';\nimport { ChartCardError } from '../../../metrics/components/chart-card-error';\nimport { formatCount } from '../../../metrics/lib/chart-format';\nimport { useDashboardRequests } from '../../hooks/use-dashboard-requests';\nimport { useDrilldown } from '../../hooks/use-widget-views';\nimport { aggregateSource, buildPreviousRequest, buildRequest } from '../../lib/requests';\nimport type { DashboardPageContext } from '../../lib/requests';\nimport { isValueColumn, parseColumns, rowDrilldown, rowQueries, tableContent, valueChange } from '../../lib/table';\nimport type { TableRow } from '../../lib/table';\nimport { tableColumn } from './table-columns';\nimport { TableFrame } from './table-frame';\nimport type { TableTabProps } from './table-frame';\nimport { MetricsTable } from '@/ds/components/MetricsTable';\nimport type { MetricsTableSort } from '@/ds/components/MetricsTable';\nimport { Txt } from '@/ds/components/Txt';\n\nconst isAggregate = (query: DashboardQuery | undefined) => query !== undefined && aggregateSource(query) !== undefined;\n\nexport function TableView(props: TableTabProps & { page: DashboardPageContext }) {\n  const { view, page, widget, onDrilldown } = props;\n  const { options, queries } = view;\n  const onClick = useDrilldown(widget, view, onDrilldown);\n  const { columns } = parseColumns(view.columns);\n  const values = columns.filter(isValueColumn);\n  const [sort, setSort] = useState<MetricsTableSort>(options.defaultSort);\n  // % Change compares the value column sorted last, starting from the default sort's.\n  const [compared, setCompared] = useState(\n    () => values.find(c => c.id === options.defaultSort.column)?.id ?? values[0]?.id,\n  );\n  const onSortChange = (next: MetricsTableSort = options.defaultSort) => {\n    setSort(next);\n    if (values.some(c => c.id === next.column)) setCompared(next.column);\n  };\n\n  const rowIds = new Set(rowQueries(columns, queries));\n  const isRowQuery = (i: number) => {\n    const id = queries[i]?.id;\n    return id !== undefined && rowIds.has(id);\n  };\n  const current = useDashboardRequests(queries.map(q => buildRequest(q, page, {})));\n  // The previous window never holds the table up: until it answers, or if it fails, Change shows a dash.\n  const previous = useDashboardRequests(queries.map(q => buildPreviousRequest(q, page, {})));\n\n  const waited = current.flatMap((r, i) => (r && isRowQuery(i) ? [r] : []));\n  if (waited.some(r => r.isError)) {\n    return (\n      <TableFrame {...props}>\n        <ChartCardError\n          error={waited.find(r => r.isError)?.error}\n          onRetry={() => waited.forEach(r => r.isError && void r.refetch())}\n        />\n      </TableFrame>\n    );\n  }\n\n  const isLoading = waited.some(r => r.isLoading);\n  const previousSettled = previous.every((r, i) => !r || !isRowQuery(i) || (!r.isLoading && !r.isError));\n  const content = isLoading\n    ? undefined\n    : tableContent(\n        options,\n        columns,\n        queries,\n        current.map(r => r?.data),\n        previousSettled ? previous.map(r => r?.data) : undefined,\n      );\n  const before = content?.before;\n  const aggregates = current.flatMap((r, i) => (r && isRowQuery(i) && isAggregate(queries[i]) ? [r] : []));\n\n  const comparedColumn = values.find(c => c.id === compared);\n  const changeOf = (row: TableRow) =>\n    before && comparedColumn\n      ? valueChange(comparedColumn, row.values[comparedColumn.id], before.get(row.key)?.[comparedColumn.id])\n      : undefined;\n\n  return (\n    <TableFrame {...props} isUpdating={aggregates.length ? aggregates.some(r => r.isRefetching) : undefined}>\n      <ChartArea>\n        <MetricsTable\n          aria-label={options.ariaLabel}\n          columns={columns.map(c => tableColumn(c, page.window, comparedColumn, changeOf))}\n          rows={content?.rows ?? []}\n          getRowKey={row => row.key}\n          sort={sort}\n          defaultSort={options.defaultSort}\n          onSortChange={onSortChange}\n          onRowClick={onClick && (row => onClick(rowDrilldown(options, row)))}\n          pageSize={options.pageSize}\n          isLoading={isLoading}\n          empty={options.emptyMessage}\n        />\n        {content?.truncated && content.limit !== undefined && (\n          <Txt variant=\"caption\" tone=\"muted\" className=\"pt-2\">\n            Showing the {formatCount(content.limit)} busiest; sorting covers only these.\n          </Txt>\n        )}\n      </ChartArea>\n    </TableFrame>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/dashboards/kinds/table/table-view.d.ts

@@ -0,0 +1 @@
+export * from '../../../../src/domains/dashboards/kinds/table/table-view';

package/dist/domains/dashboards/kinds/table/table-view.es.js

@@ -0,0 +1,79 @@
+import { t as Txt } from "../../../../Txt-BM6TVV_c.js";
+import { formatCount } from "../../../metrics/lib/chart-format.es.js";
+import { aggregateSource, buildPreviousRequest, buildRequest } from "../../lib/requests.es.js";
+import { useDashboardRequests } from "../../hooks/use-dashboard-requests.es.js";
+import { ChartArea } from "../../../metrics/components/chart-area.es.js";
+import { ChartCardError } from "../../../metrics/components/chart-card-error.es.js";
+import { isValueColumn, parseColumns, rowDrilldown, rowQueries, tableContent, valueChange } from "../../lib/table.es.js";
+import { useDrilldown } from "../../hooks/use-widget-views.es.js";
+import { TableFrame } from "./table-frame.es.js";
+import { tableColumn } from "./table-columns.es.js";
+import { t as MetricsTable } from "../../../../MetricsTable-CRPeLHe1.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/domains/dashboards/kinds/table/table-view.tsx
+var isAggregate = (query) => query !== void 0 && aggregateSource(query) !== void 0;
+function TableView(props) {
+	const { view, page, widget, onDrilldown } = props;
+	const { options, queries } = view;
+	const onClick = useDrilldown(widget, view, onDrilldown);
+	const { columns } = parseColumns(view.columns);
+	const values = columns.filter(isValueColumn);
+	const [sort, setSort] = useState(options.defaultSort);
+	const [compared, setCompared] = useState(() => values.find((c) => c.id === options.defaultSort.column)?.id ?? values[0]?.id);
+	const onSortChange = (next = options.defaultSort) => {
+		setSort(next);
+		if (values.some((c) => c.id === next.column)) setCompared(next.column);
+	};
+	const rowIds = new Set(rowQueries(columns, queries));
+	const isRowQuery = (i) => {
+		const id = queries[i]?.id;
+		return id !== void 0 && rowIds.has(id);
+	};
+	const current = useDashboardRequests(queries.map((q) => buildRequest(q, page, {})));
+	const previous = useDashboardRequests(queries.map((q) => buildPreviousRequest(q, page, {})));
+	const waited = current.flatMap((r, i) => r && isRowQuery(i) ? [r] : []);
+	if (waited.some((r) => r.isError)) return /* @__PURE__ */ jsx(TableFrame, {
+		...props,
+		children: /* @__PURE__ */ jsx(ChartCardError, {
+			error: waited.find((r) => r.isError)?.error,
+			onRetry: () => waited.forEach((r) => r.isError && void r.refetch())
+		})
+	});
+	const isLoading = waited.some((r) => r.isLoading);
+	const previousSettled = previous.every((r, i) => !r || !isRowQuery(i) || !r.isLoading && !r.isError);
+	const content = isLoading ? void 0 : tableContent(options, columns, queries, current.map((r) => r?.data), previousSettled ? previous.map((r) => r?.data) : void 0);
+	const before = content?.before;
+	const aggregates = current.flatMap((r, i) => r && isRowQuery(i) && isAggregate(queries[i]) ? [r] : []);
+	const comparedColumn = values.find((c) => c.id === compared);
+	const changeOf = (row) => before && comparedColumn ? valueChange(comparedColumn, row.values[comparedColumn.id], before.get(row.key)?.[comparedColumn.id]) : void 0;
+	return /* @__PURE__ */ jsx(TableFrame, {
+		...props,
+		isUpdating: aggregates.length ? aggregates.some((r) => r.isRefetching) : void 0,
+		children: /* @__PURE__ */ jsxs(ChartArea, { children: [/* @__PURE__ */ jsx(MetricsTable, {
+			"aria-label": options.ariaLabel,
+			columns: columns.map((c) => tableColumn(c, page.window, comparedColumn, changeOf)),
+			rows: content?.rows ?? [],
+			getRowKey: (row) => row.key,
+			sort,
+			defaultSort: options.defaultSort,
+			onSortChange,
+			onRowClick: onClick && ((row) => onClick(rowDrilldown(options, row))),
+			pageSize: options.pageSize,
+			isLoading,
+			empty: options.emptyMessage
+		}), content?.truncated && content.limit !== void 0 && /* @__PURE__ */ jsxs(Txt, {
+			variant: "caption",
+			tone: "muted",
+			className: "pt-2",
+			children: [
+				"Showing the ",
+				formatCount(content.limit),
+				" busiest; sorting covers only these."
+			]
+		})] })
+	});
+}
+export { TableView };
+
+//# sourceMappingURL=table-view.es.js.map