@marimo-team/frontend 0.25.3-dev104 → 0.25.3-dev108

package/src/components/data-table/charts/__tests__/spec.test.ts

@@ -29,10 +29,12 @@ describe("getAxisEncoding", () => {
         aggregate: "sum",
         timeUnit: undefined,
       },
-      { binned: true, step: 10 },
-      COUNT_FIELD,
-      true,
-      ChartType.BAR,
+      {
+        binValues: { binned: true, step: 10 },
+        label: COUNT_FIELD,
+        stack: true,
+        chartType: ChartType.BAR,
+      },
     );
 
     expect(result).toEqual({
@@ -52,10 +54,12 @@ describe("getAxisEncoding", () => {
         aggregate: "mean",
         timeUnit: undefined,
       },
-      undefined,
-      "Average Price",
-      false,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: "Average Price",
+        stack: false,
+        chartType: ChartType.BAR,
+      },
     );
 
     expect(result).toEqual({
@@ -79,10 +83,12 @@ describe("getAxisEncoding", () => {
           aggregate: NONE_VALUE,
           timeUnit,
         },
-        undefined,
-        "Date",
-        undefined,
-        ChartType.LINE,
+        {
+          binValues: undefined,
+          label: "Date",
+          stack: undefined,
+          chartType: ChartType.LINE,
+        },
       );
 
       expect(result).toEqual({
@@ -105,10 +111,12 @@ describe("getAxisEncoding", () => {
         aggregate: NONE_VALUE,
         timeUnit: undefined,
       },
-      undefined,
-      "Category",
-      true,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: "Category",
+        stack: true,
+        chartType: ChartType.BAR,
+      },
     );
 
     expect(result).toEqual({
@@ -129,10 +137,12 @@ describe("getAxisEncoding", () => {
         aggregate: "sum",
         timeUnit: undefined,
       },
-      undefined,
-      "Value",
-      false,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: "Value",
+        stack: false,
+        chartType: ChartType.BAR,
+      },
     );
 
     expect((result as { bin?: unknown }).bin).toBeUndefined();
@@ -146,10 +156,12 @@ describe("getAxisEncoding", () => {
         aggregate: "sum",
         timeUnit: undefined,
       },
-      undefined,
-      undefined,
-      false,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: undefined,
+        stack: false,
+        chartType: ChartType.BAR,
+      },
     );
 
     expect((result as { title?: string }).title).toBeUndefined();
@@ -164,10 +176,12 @@ describe("getAxisEncoding", () => {
           aggregate: agg,
           timeUnit: undefined,
         },
-        undefined,
-        "Value",
-        false,
-        ChartType.BAR,
+        {
+          binValues: undefined,
+          label: "Value",
+          stack: false,
+          chartType: ChartType.BAR,
+        },
       );
 
       const expectedAggregate = (result as { aggregate?: string }).aggregate;
@@ -189,10 +203,12 @@ describe("getAxisEncoding", () => {
           aggregate: agg,
           timeUnit: undefined,
         },
-        undefined,
-        "Date",
-        false,
-        ChartType.BAR,
+        {
+          binValues: undefined,
+          label: "Date",
+          stack: false,
+          chartType: ChartType.BAR,
+        },
       );
 
       const expectedAggregate = (result as { aggregate?: string }).aggregate;
@@ -209,10 +225,12 @@ describe("getAxisEncoding", () => {
           sort: sort as "ascending" | "descending",
           aggregate: NONE_VALUE,
         },
-        undefined,
-        "Value",
-        false,
-        ChartType.BAR,
+        {
+          binValues: undefined,
+          label: "Value",
+          stack: false,
+          chartType: ChartType.BAR,
+        },
       );
 
       const expectedSort = (result as { sort?: string }).sort;
@@ -1009,10 +1027,12 @@ describe("Special character escaping in specs", () => {
         aggregate: "sum",
         timeUnit: undefined,
       },
-      undefined,
-      "Value",
-      false,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: "Value",
+        stack: false,
+        chartType: ChartType.BAR,
+      },
     );
 
     invariant("field" in result, "field should be defined");
@@ -1027,10 +1047,12 @@ describe("Special character escaping in specs", () => {
         aggregate: "mean",
         timeUnit: undefined,
       },
-      undefined,
-      "Data",
-      false,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: "Data",
+        stack: false,
+        chartType: ChartType.BAR,
+      },
     );
 
     invariant("field" in result, "field should be defined");
@@ -1045,10 +1067,12 @@ describe("Special character escaping in specs", () => {
         aggregate: NONE_VALUE,
         timeUnit: "yearmonth",
       },
-      undefined,
-      "Timestamp",
-      false,
-      ChartType.LINE,
+      {
+        binValues: undefined,
+        label: "Timestamp",
+        stack: false,
+        chartType: ChartType.LINE,
+      },
     );
 
     invariant("field" in result, "field should be defined");
@@ -1063,10 +1087,12 @@ describe("Special character escaping in specs", () => {
         aggregate: "sum",
         timeUnit: undefined,
       },
-      undefined,
-      "Result",
-      false,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: "Result",
+        stack: false,
+        chartType: ChartType.BAR,
+      },
     );
 
     invariant("field" in result, "field should be defined");

package/src/components/data-table/charts/chart-spec/spec.ts

@@ -51,13 +51,19 @@ export type ErrorMessage = TypedString<"ErrorMessage">;
 export const X_AXIS_REQUIRED = "X-axis column is required" as ErrorMessage;
 export const Y_AXIS_REQUIRED = "Y-axis column is required" as ErrorMessage;
 
-export function createSpecWithoutData(
-  chartType: ChartType,
-  formValues: ChartSchemaType,
-  theme: ResolvedTheme,
-  width: number | "container",
-  height: number,
-): TopLevelSpec | ErrorMessage {
+export function createSpecWithoutData({
+  chartType,
+  formValues,
+  theme,
+  width,
+  height,
+}: {
+  chartType: ChartType;
+  formValues: ChartSchemaType;
+  theme: ResolvedTheme;
+  width: number | "container";
+  height: number;
+}): TopLevelSpec | ErrorMessage {
   const {
     xColumn,
     yColumn,
@@ -85,27 +91,25 @@ export function createSpecWithoutData(
   const yEncodingKey = "y";
 
   // Create encodings
-  const xEncoding = getAxisEncoding(
-    xColumn,
-    formValues.xAxis?.bin,
-    getFieldLabel(formValues.xAxis?.label),
-    colorByColumn?.field && horizontal ? stacking : undefined,
+  const xEncoding = getAxisEncoding(xColumn, {
+    binValues: formValues.xAxis?.bin,
+    label: getFieldLabel(formValues.xAxis?.label),
+    stack: colorByColumn?.field && horizontal ? stacking : undefined,
     chartType,
-  );
+  });
 
   let defaultYAggregation: ValidAggregationFn = DEFAULT_AGGREGATION;
   if (yColumn?.selectedDataType === "string") {
     defaultYAggregation = "count";
   }
 
-  const yEncoding = getAxisEncoding(
-    yColumn,
-    formValues.yAxis?.bin,
-    getFieldLabel(formValues.yAxis?.label),
-    colorByColumn?.field && !horizontal ? stacking : undefined,
+  const yEncoding = getAxisEncoding(yColumn, {
+    binValues: formValues.yAxis?.bin,
+    label: getFieldLabel(formValues.yAxis?.label),
+    stack: colorByColumn?.field && !horizontal ? stacking : undefined,
     chartType,
-    defaultYAggregation,
-  );
+    defaultAggregate: defaultYAggregation,
+  });
 
   const rowFacet = facet?.row.field
     ? getFacetEncoding(facet.row, chartType)
@@ -115,14 +119,14 @@ export function createSpecWithoutData(
     : undefined;
 
   const colorByEncoding = getColorEncoding(chartType, formValues);
-  const baseSpec = getBaseSpec(
+  const baseSpec = getBaseSpec({
     chartType,
     formValues,
     theme,
     width,
     height,
     title,
-  );
+  });
   const baseEncoding: Encoding<Field> = {
     [xEncodingKey]: horizontal ? yEncoding : xEncoding,
     [yEncodingKey]: horizontal ? xEncoding : yEncoding,
@@ -160,11 +164,19 @@ export function augmentSpecWithData(
 
 export function getAxisEncoding(
   column: NonNullable<z.infer<typeof AxisSchema>>,
-  binValues: z.infer<typeof BinSchema> | undefined,
-  label: string | undefined,
-  stack: boolean | undefined,
-  chartType: ChartType,
-  defaultAggregate?: ValidAggregationFn,
+  {
+    binValues,
+    label,
+    stack,
+    chartType,
+    defaultAggregate,
+  }: {
+    binValues: z.infer<typeof BinSchema> | undefined;
+    label: string | undefined;
+    stack: boolean | undefined;
+    chartType: ChartType;
+    defaultAggregate?: ValidAggregationFn;
+  },
 ): PositionDef<string> {
   const selectedDataType = column.selectedDataType || "string";
 
@@ -236,13 +248,12 @@ function getPieChartSpec(
     return "Size by column is required" as ErrorMessage;
   }
 
-  const thetaEncoding: PolarDef<string> = getAxisEncoding(
-    yColumn,
-    formValues.xAxis?.bin,
-    getFieldLabel(formValues.xAxis?.label),
-    undefined,
-    ChartType.PIE,
-  );
+  const thetaEncoding: PolarDef<string> = getAxisEncoding(yColumn, {
+    binValues: formValues.xAxis?.bin,
+    label: getFieldLabel(formValues.xAxis?.label),
+    stack: undefined,
+    chartType: ChartType.PIE,
+  });
 
   const colorEncoding: ColorDef<string> = {
     field: escapeFieldName(colorByColumn.field),
@@ -252,7 +263,14 @@ function getPieChartSpec(
   };
 
   return {
-    ...getBaseSpec(ChartType.PIE, formValues, theme, width, height, title),
+    ...getBaseSpec({
+      chartType: ChartType.PIE,
+      formValues,
+      theme,
+      width,
+      height,
+      title,
+    }),
     mark: {
       type: convertChartTypeToMark(ChartType.PIE),
       innerRadius: formValues.style?.innerRadius,
@@ -270,14 +288,21 @@ function getPieChartSpec(
   };
 }
 
-function getBaseSpec(
-  chartType: ChartType,
-  formValues: ChartSchemaType,
-  theme: ResolvedTheme,
-  width: number | "container",
-  height: number,
-  title?: string,
-): BaseSpec {
+function getBaseSpec({
+  chartType,
+  formValues,
+  theme,
+  width,
+  height,
+  title,
+}: {
+  chartType: ChartType;
+  formValues: ChartSchemaType;
+  theme: ResolvedTheme;
+  width: number | "container";
+  height: number;
+  title?: string;
+}): BaseSpec {
   let gridLines = formValues.style?.gridLines ?? false;
   // Scatter charts have grid lines by default
   if (chartType === ChartType.SCATTER) {

package/src/components/data-table/charts/charts.tsx

@@ -387,13 +387,13 @@ export const ChartPanel: React.FC<{
   // deeply partial, but the form always starts from complete defaults.
   const formValues = useWatch({ control: form.control }) as ChartSchemaType;
 
-  const specWithoutData = createSpecWithoutData(
-    selectedChartType,
+  const specWithoutData = createSpecWithoutData({
+    chartType: selectedChartType,
     formValues,
     theme,
-    "container",
-    CHART_HEIGHT,
-  );
+    width: "container",
+    height: CHART_HEIGHT,
+  });
 
   // Prevent unnecessary re-renders of the chart
   const memoizedChart = useMemo(() => {

package/src/components/data-table/column-summary/chart-spec-model.tsx

@@ -119,16 +119,16 @@ export class ColumnChartSpecModel<T> {
   private columnBinValues = new Map<ColumnName, BinValues>();
   private columnValueCounts = new Map<ColumnName, ValueCounts>();
 
-  public static readonly EMPTY = new ColumnChartSpecModel(
-    [],
-    new Map(),
-    {},
-    {},
-    {},
-    {
+  public static readonly EMPTY = new ColumnChartSpecModel({
+    data: [],
+    fieldTypes: new Map(),
+    stats: {},
+    binValues: {},
+    valueCounts: {},
+    opts: {
       includeCharts: false,
     },
-  );
+  });
 
   private dataSpec: TopLevelSpec["data"];
 
@@ -144,16 +144,23 @@ export class ColumnChartSpecModel<T> {
     includeCharts: boolean;
   };
 
-  public constructor(
-    data: T[] | string,
-    fieldTypes: FieldTypes,
-    stats: Record<ColumnName, Partial<ColumnHeaderStats>>,
-    binValues: Record<ColumnName, BinValues>,
-    valueCounts: Record<ColumnName, ValueCounts>,
+  public constructor({
+    data,
+    fieldTypes,
+    stats,
+    binValues,
+    valueCounts,
+    opts,
+  }: {
+    data: T[] | string;
+    fieldTypes: FieldTypes;
+    stats: Record<ColumnName, Partial<ColumnHeaderStats>>;
+    binValues: Record<ColumnName, BinValues>;
+    valueCounts: Record<ColumnName, ValueCounts>;
     opts: {
       includeCharts: boolean;
-    },
-  ) {
+    };
+  }) {
     this.fieldTypes = fieldTypes;
     this.stats = stats;
     this.binValues = binValues;

package/src/components/dependency-graph/dependency-graph-tree.tsx

@@ -85,13 +85,13 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
 
   // oxlint-disable-next-line react/hook-use-state
   const [initial] = useState(() => {
-    const elements = elementsBuilder.createElements(
+    const elements = elementsBuilder.createElements({
       cellIds,
       cellAtoms,
       variables,
-      settings.hidePureMarkdown,
-      settings.hideReusableFunctions,
-    );
+      hidePureMarkdown: settings.hidePureMarkdown,
+      hideReusableFunctions: settings.hideReusableFunctions,
+    });
     return layoutElements({
       nodes: withExpansion(elements.nodes, expandedIds),
       edges: elements.edges,
@@ -163,13 +163,13 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
 
   // Rebuild + re-layout when the graph inputs or the expand/collapse set change.
   useEffect(() => {
-    const elements = elementsBuilder.createElements(
+    const elements = elementsBuilder.createElements({
       cellIds,
       cellAtoms,
       variables,
-      settings.hidePureMarkdown,
-      settings.hideReusableFunctions,
-    );
+      hidePureMarkdown: settings.hidePureMarkdown,
+      hideReusableFunctions: settings.hideReusableFunctions,
+    });
     syncChanges({
       nodes: withExpansion(elements.nodes, expandedIds),
       edges: elements.edges,

package/src/components/dependency-graph/elements.ts

@@ -42,6 +42,14 @@ export interface NodeData {
 }
 export type CustomNodeProps = NodeProps<NodeData>;
 
+interface CreateElementsOptions {
+  cellIds: CellId[];
+  cellAtoms: Atom<CellData>[];
+  variables: Variables;
+  hidePureMarkdown: boolean;
+  hideReusableFunctions: boolean;
+}
+
 const LINE_HEIGHT = 11; // matches TinyCode.css
 
 export function getNodeHeight(linesOfCode: number) {
@@ -176,13 +184,10 @@ export function computeDefsByCell(
 }
 
 interface ElementsBuilder {
-  createElements: (
-    cellIds: CellId[],
-    cellAtoms: Atom<CellData>[],
-    variables: Variables,
-    hidePureMarkdown: boolean,
-    hideReusableFunctions: boolean,
-  ) => { nodes: Node<NodeData>[]; edges: Edge[] };
+  createElements: (options: CreateElementsOptions) => {
+    nodes: Node<NodeData>[];
+    edges: Edge[];
+  };
 }
 
 export class VerticalElementsBuilder implements ElementsBuilder {
@@ -225,13 +230,11 @@ export class VerticalElementsBuilder implements ElementsBuilder {
     };
   }
 
-  public createElements(
-    cellIds: CellId[],
-    cellAtoms: Atom<CellData>[],
-    variables: Variables,
-    _hidePureMarkdown: boolean,
-    _hideReusableFunctions: boolean,
-  ) {
+  public createElements({
+    cellIds,
+    cellAtoms,
+    variables,
+  }: CreateElementsOptions) {
     let prevY = 0;
     const nodes: Node<NodeData>[] = [];
     const edges: Edge[] = [];
@@ -311,13 +314,13 @@ export class TreeElementsBuilder implements ElementsBuilder {
     };
   }
 
-  public createElements(
-    cellIds: CellId[],
-    cellAtoms: Atom<CellData>[],
-    variables: Variables,
-    hidePureMarkdown: boolean,
-    hideReusableFunctions: boolean,
-  ) {
+  public createElements({
+    cellIds,
+    cellAtoms,
+    variables,
+    hidePureMarkdown,
+    hideReusableFunctions,
+  }: CreateElementsOptions) {
     const nodes: Node<NodeData>[] = [];
 
     const cellRuntime = getNotebook().cellRuntime;

package/src/components/dependency-graph/utils/__tests__/layout.test.ts

@@ -7,10 +7,12 @@ import { boundingBox, placeIslands } from "../layout";
 
 function node(
   id: string,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
+  {
+    x,
+    y,
+    width,
+    height,
+  }: { x: number; y: number; width: number; height: number },
 ): Node<NodeData> {
   return {
     id,
@@ -28,8 +30,8 @@ describe("boundingBox", () => {
 
   it("spans position + size across nodes", () => {
     const box = boundingBox([
-      node("a", 0, 0, 50, 50),
-      node("b", 10, 20, 100, 40),
+      node("a", { x: 0, y: 0, width: 50, height: 50 }),
+      node("b", { x: 10, y: 20, width: 100, height: 40 }),
     ]);
     expect(box).toEqual({ minX: 0, minY: 0, maxX: 110, maxY: 60 });
   });
@@ -52,12 +54,17 @@ describe("boundingBox", () => {
 
 describe("placeIslands", () => {
   it("returns nothing when there are no islands", () => {
-    expect(placeIslands([], [node("a", 0, 0, 100, 100)])).toEqual([]);
+    expect(
+      placeIslands([], [node("a", { x: 0, y: 0, width: 100, height: 100 })]),
+    ).toEqual([]);
   });
 
   it("stacks islands in a column to the right of the placed graph", () => {
-    const placed = [node("main", 0, 0, 200, 300)];
-    const islands = [node("i0", 0, 0, 90, 40), node("i1", 0, 0, 90, 40)];
+    const placed = [node("main", { x: 0, y: 0, width: 200, height: 300 })];
+    const islands = [
+      node("i0", { x: 0, y: 0, width: 90, height: 40 }),
+      node("i1", { x: 0, y: 0, width: 90, height: 40 }),
+    ];
     const result = placeIslands(islands, placed);
     // startX = maxX(200) + margin(40) = 240; startY = minY(0).
     expect(result[0].position).toEqual({ x: 240, y: 0 });
@@ -66,9 +73,9 @@ describe("placeIslands", () => {
   });
 
   it("wraps into a new column when the column gets too tall", () => {
-    const placed = [node("main", 0, 0, 200, 300)];
+    const placed = [node("main", { x: 0, y: 0, width: 200, height: 300 })];
     const islands = Array.from({ length: 10 }, (_, i) =>
-      node(`i${i}`, 0, 0, 90, 40),
+      node(`i${i}`, { x: 0, y: 0, width: 90, height: 40 }),
     );
     const result = placeIslands(islands, placed);
     const firstColumnX = result[0].position.x;