@marimo-team/frontend 0.25.3-dev12 → 0.25.3-dev122

package/src/components/data-table/cell-selection/types.ts

@@ -30,7 +30,7 @@ export interface CellSelectionCell {
 }
 
 // These are additional properties add to the table instance in createTable
-export interface CellSelectionInstance<TData extends RowData> {
+export interface CellSelectionInstance {
   setCellSelection?: (updater: Updater<CellSelectionState>) => void;
 
   resetCellSelection?(defaultValue?: CellSelectionState): void;
@@ -44,7 +44,7 @@ declare module "@tanstack/react-table" {
     TData extends RowData,
   > extends CellSelectionOptions {}
 
-  interface Table<TData extends RowData> extends CellSelectionInstance<TData> {}
+  interface Table<TData extends RowData> extends CellSelectionInstance {}
 
   interface Cell<TData extends RowData, TValue> extends CellSelectionCell {}
 }

package/src/components/data-table/charts/__tests__/chart-panel.test.tsx

@@ -10,13 +10,27 @@ import { cellId } from "@/__tests__/branded";
 import { LazyVegaEmbed } from "@/components/charts/lazy";
 import { vegaLoader } from "@/plugins/impl/vega/loader";
 import { ChartPanel, TablePanel, type TablePanelProps } from "../charts";
-import { getChartTabName, tabsStorageAtom } from "../storage";
+import { createTabId, getChartTabName, tabsStorageAtom } from "../storage";
 import { ChartType, NONE_VALUE } from "../types";
+import { TOO_MANY_ROWS } from "../../types";
 
 vi.mock("@/components/charts/lazy", () => ({
   LazyVegaEmbed: vi.fn(() => null),
 }));
 
+vi.mock("../components/chart-items", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../components/chart-items")>()),
+  ChartTypeSelect: ({
+    onValueChange,
+  }: {
+    onValueChange: (value: string) => void;
+  }) => (
+    <button type="button" onClick={() => onValueChange("line")}>
+      Change chart type
+    </button>
+  ),
+}));
+
 beforeAll(() => {
   SetupMocks.resizeObserver();
 });
@@ -38,6 +52,7 @@ describe("ChartPanel", () => {
             id,
             [
               {
+                id: createTabId(),
                 tabName,
                 chartType: ChartType.BAR,
                 config: {
@@ -283,4 +298,62 @@ describe("ChartPanel", () => {
       });
     },
   );
+  it("keeps panel state when a chart type change renames the tab", async () => {
+    const store = createStore();
+    const id = cellId("rename-keeps-state");
+    const tabName = getChartTabName(0, ChartType.BAR);
+    store.set(
+      tabsStorageAtom,
+      new Map([
+        [
+          id,
+          [
+            {
+              id: createTabId(),
+              tabName,
+              chartType: ChartType.BAR,
+              config: {
+                general: {
+                  xColumn: { field: "value", type: "number" },
+                  yColumn: {
+                    field: "value",
+                    type: "integer",
+                    aggregate: NONE_VALUE,
+                  },
+                },
+              },
+            },
+          ],
+        ],
+      ]),
+    );
+    const sample = [{ value: 1 }];
+    const props: TablePanelProps = {
+      cellId: id,
+      data: sample,
+      dataTable: <div />,
+      totalRows: TOO_MANY_ROWS,
+      columns: 1,
+      displayHeader: true,
+      fieldTypes: [["value", ["number", "float64"]]],
+    };
+    const { getByRole, findByRole, queryByRole } = render(
+      <Provider store={store}>
+        <Tooltip.Provider>
+          <TablePanel {...props} />
+        </Tooltip.Provider>
+      </Provider>,
+    );
+    fireEvent.click(getByRole("tab", { name: tabName }));
+    fireEvent.click(await findByRole("button", { name: "Proceed" }));
+    await waitFor(() => {
+      expect(queryByRole("button", { name: "Proceed" })).toBeNull();
+    });
+
+    fireEvent.click(getByRole("button", { name: "Change chart type" }));
+
+    const renamed = getChartTabName(0, ChartType.LINE);
+    await findByRole("tab", { name: renamed });
+    expect(queryByRole("button", { name: "Proceed" })).toBeNull();
+  });
 });

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

@@ -39,13 +39,13 @@ describe("create vega spec", () => {
   });
 
   it("should create and augment a spec", () => {
-    const spec = createSpecWithoutData(
-      ChartType.BAR,
-      createBasicFormValues(),
-      "light",
-      400,
-      300,
-    );
+    const spec = createSpecWithoutData({
+      chartType: ChartType.BAR,
+      formValues: createBasicFormValues(),
+      theme: "light",
+      width: 400,
+      height: 300,
+    });
     expect(spec).toMatchSnapshot();
     expect(typeof spec !== "string").toBe(true); // Not error message
     expect((spec as TopLevelSpec).data).toEqual({ values: [] });
@@ -59,25 +59,25 @@ describe("create vega spec", () => {
     const formValues = createBasicFormValues();
     formValues.general!.xColumn!.field = undefined;
 
-    const spec = createSpecWithoutData(
-      ChartType.BAR,
+    const spec = createSpecWithoutData({
+      chartType: ChartType.BAR,
       formValues,
-      "light",
-      400,
-      300,
-    );
+      theme: "light",
+      width: 400,
+      height: 300,
+    });
     expect(spec).toEqual(X_AXIS_REQUIRED);
 
     // Undefined yColumn
     const formValues2 = createBasicFormValues();
     formValues2.general!.yColumn!.field = undefined;
-    const spec2 = createSpecWithoutData(
-      ChartType.BAR,
-      formValues2,
-      "light",
-      400,
-      300,
-    );
+    const spec2 = createSpecWithoutData({
+      chartType: ChartType.BAR,
+      formValues: formValues2,
+      theme: "light",
+      width: 400,
+      height: 300,
+    });
     expect(spec2).toEqual(Y_AXIS_REQUIRED);
   });
 });

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/__tests__/storage.test.ts

@@ -16,7 +16,7 @@ import { cellId } from "@/__tests__/branded";
 import { availableStorage } from "@/utils/storage/storage";
 import { ChartSchema } from "../schemas";
 import type { TabName } from "../storage";
-import { KEY, tabsStorageAtom } from "../storage";
+import { createTabId, KEY, tabsStorageAtom } from "../storage";
 import { ChartType } from "../types";
 
 describe("Chart Transforms Storage", () => {
@@ -39,6 +39,7 @@ describe("Chart Transforms Storage", () => {
       const store = getDefaultStore();
       const cid = cellId("cell-1");
       const tabData = {
+        id: createTabId(),
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
         config: ChartSchema.parse({
@@ -63,6 +64,7 @@ describe("Chart Transforms Storage", () => {
       const store = getDefaultStore();
       const cid = cellId("cell-1");
       const tabData1 = {
+        id: createTabId(),
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
         config: ChartSchema.parse({
@@ -73,6 +75,7 @@ describe("Chart Transforms Storage", () => {
         }),
       };
       const tabData2 = {
+        id: createTabId(),
         tabName: "Tab 2" as TabName,
         chartType: ChartType.BAR,
         config: ChartSchema.parse({

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) {