@marimo-team/frontend 0.23.2-dev8 → 0.23.2

package/src/plugins/impl/data-editor/__tests__/data-utils.test.ts

@@ -2,6 +2,7 @@
 
 import { describe, expect, it } from "vitest";
 import type { FieldTypes } from "@/components/data-table/types";
+import type { DataType } from "@/core/kernel/messages";
 import {
   insertColumn,
   modifyColumnFields,
@@ -9,6 +10,11 @@ import {
   renameColumn,
 } from "../data-utils";
 
+// Fixtures are written as object literals for readability; `FieldTypes`
+// is a `Map` (#9269).
+const asFieldTypes = (obj: Record<string, DataType>): FieldTypes =>
+  new Map(Object.entries(obj));
+
 describe("removeColumn", () => {
   const testData = [
     { int: 1, string: "a", bool: "True", datetime: "2025-07-12 00:07:13" },
@@ -481,12 +487,12 @@ describe("renameColumn", () => {
 });
 
 describe("modifyColumnFields", () => {
-  const testFieldTypes: FieldTypes = {
+  const testFieldTypes: FieldTypes = asFieldTypes({
     int: "integer",
     string: "string",
     bool: "boolean",
     datetime: "datetime",
-  };
+  });
 
   it("should insert a new column at index 0", () => {
     const result = modifyColumnFields({
@@ -496,16 +502,15 @@ describe("modifyColumnFields", () => {
       newColumnName: "newColumn",
     });
 
-    const expected = {
-      newColumn: "string",
-      int: "integer",
-      string: "string",
-      bool: "boolean",
-      datetime: "datetime",
-    };
-
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "newColumn" => "string",
+        "int" => "integer",
+        "string" => "string",
+        "bool" => "boolean",
+        "datetime" => "datetime",
+      }
+    `);
   });
 
   it("should insert a new column at index 1", () => {
@@ -516,16 +521,15 @@ describe("modifyColumnFields", () => {
       newColumnName: "newColumn",
     });
 
-    const expected = {
-      int: "integer",
-      newColumn: "string",
-      string: "string",
-      bool: "boolean",
-      datetime: "datetime",
-    };
-
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "int" => "integer",
+        "newColumn" => "string",
+        "string" => "string",
+        "bool" => "boolean",
+        "datetime" => "datetime",
+      }
+    `);
   });
 
   it("should insert a new column at index 2", () => {
@@ -536,16 +540,15 @@ describe("modifyColumnFields", () => {
       newColumnName: "newColumn",
     });
 
-    const expected = {
-      int: "integer",
-      string: "string",
-      newColumn: "string",
-      bool: "boolean",
-      datetime: "datetime",
-    };
-
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "int" => "integer",
+        "string" => "string",
+        "newColumn" => "string",
+        "bool" => "boolean",
+        "datetime" => "datetime",
+      }
+    `);
   });
 
   it("should insert a new column at the end", () => {
@@ -557,16 +560,15 @@ describe("modifyColumnFields", () => {
       dataType: "datetime",
     });
 
-    const expected = {
-      int: "integer",
-      string: "string",
-      bool: "boolean",
-      datetime: "datetime",
-      newColumn: "datetime", // Set to the same type as the data type
-    };
-
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "int" => "integer",
+        "string" => "string",
+        "bool" => "boolean",
+        "datetime" => "datetime",
+        "newColumn" => "datetime",
+      }
+    `);
   });
 
   it("should insert a new column beyond the array length", () => {
@@ -577,16 +579,15 @@ describe("modifyColumnFields", () => {
       newColumnName: "newColumn",
     });
 
-    const expected = {
-      int: "integer",
-      string: "string",
-      bool: "boolean",
-      datetime: "datetime",
-      newColumn: "string",
-    };
-
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "int" => "integer",
+        "string" => "string",
+        "bool" => "boolean",
+        "datetime" => "datetime",
+        "newColumn" => "string",
+      }
+    `);
   });
 
   it("should remove column at index 0", () => {
@@ -596,14 +597,13 @@ describe("modifyColumnFields", () => {
       type: "remove",
     });
 
-    const expected = {
-      string: "string",
-      bool: "boolean",
-      datetime: "datetime",
-    };
-
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "string" => "string",
+        "bool" => "boolean",
+        "datetime" => "datetime",
+      }
+    `);
   });
 
   it("should remove column at index 1", () => {
@@ -613,14 +613,13 @@ describe("modifyColumnFields", () => {
       type: "remove",
     });
 
-    const expected = {
-      int: "integer",
-      bool: "boolean",
-      datetime: "datetime",
-    };
-
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "int" => "integer",
+        "bool" => "boolean",
+        "datetime" => "datetime",
+      }
+    `);
   });
 
   it("should remove column at index 2", () => {
@@ -630,14 +629,13 @@ describe("modifyColumnFields", () => {
       type: "remove",
     });
 
-    const expected = {
-      int: "integer",
-      string: "string",
-      datetime: "datetime",
-    };
-
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "int" => "integer",
+        "string" => "string",
+        "datetime" => "datetime",
+      }
+    `);
   });
 
   it("should remove column at index 3", () => {
@@ -647,14 +645,13 @@ describe("modifyColumnFields", () => {
       type: "remove",
     });
 
-    const expected = {
-      int: "integer",
-      string: "string",
-      bool: "boolean",
-    };
-
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "int" => "integer",
+        "string" => "string",
+        "bool" => "boolean",
+      }
+    `);
   });
 
   it("should handle removing non-existent column index", () => {
@@ -685,15 +682,14 @@ describe("modifyColumnFields", () => {
       newColumnName: "number",
     });
 
-    const expected = {
-      number: "string", // Defaults to string type for renamed columns
-      string: "string",
-      bool: "boolean",
-      datetime: "datetime",
-    };
-
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "number" => "string",
+        "string" => "string",
+        "bool" => "boolean",
+        "datetime" => "datetime",
+      }
+    `);
   });
 
   it("should rename column at index 1", () => {
@@ -704,15 +700,14 @@ describe("modifyColumnFields", () => {
       newColumnName: "text",
     });
 
-    const expected = {
-      int: "integer",
-      text: "string", // Defaults to string type for renamed columns
-      bool: "boolean",
-      datetime: "datetime",
-    };
-
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "int" => "integer",
+        "text" => "string",
+        "bool" => "boolean",
+        "datetime" => "datetime",
+      }
+    `);
   });
 
   it("should rename column at index 3", () => {
@@ -724,15 +719,14 @@ describe("modifyColumnFields", () => {
       newColumnName: "timestamp",
     });
 
-    const expected = {
-      int: "integer",
-      string: "string",
-      bool: "boolean",
-      timestamp: "datetime",
-    };
-
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "int" => "integer",
+        "string" => "string",
+        "bool" => "boolean",
+        "timestamp" => "datetime",
+      }
+    `);
   });
 
   it("should handle renaming non-existent column index", () => {
@@ -758,7 +752,7 @@ describe("modifyColumnFields", () => {
   });
 
   it("should preserve original field types structure", () => {
-    const originalFieldTypes = { ...testFieldTypes };
+    const originalFieldTypes = new Map(testFieldTypes);
     modifyColumnFields({
       columnFields: testFieldTypes,
       columnIdx: 1,
@@ -769,7 +763,7 @@ describe("modifyColumnFields", () => {
   });
 
   it("should handle empty field types object", () => {
-    const emptyFieldTypes: FieldTypes = {};
+    const emptyFieldTypes: FieldTypes = new Map();
 
     // Insert
     const insertResult = modifyColumnFields({
@@ -778,7 +772,11 @@ describe("modifyColumnFields", () => {
       type: "insert",
       newColumnName: "newColumn",
     });
-    expect(insertResult).toEqual({ newColumn: "string" });
+    expect(insertResult).toMatchInlineSnapshot(`
+      Map {
+        "newColumn" => "string",
+      }
+    `);
 
     // Remove
     const removeResult = modifyColumnFields({
@@ -786,16 +784,16 @@ describe("modifyColumnFields", () => {
       columnIdx: 0,
       type: "remove",
     });
-    expect(removeResult).toEqual({});
+    expect(removeResult).toMatchInlineSnapshot(`Map {}`);
   });
 
   it("should handle field types with special characters in column names", () => {
-    const specialFieldTypes: FieldTypes = {
+    const specialFieldTypes: FieldTypes = asFieldTypes({
       "column-with-dash": "integer",
       column_with_underscore: "string",
       "column.with.dot": "boolean",
       "column with space": "datetime",
-    };
+    });
 
     // Insert
     const insertResult = modifyColumnFields({
@@ -804,15 +802,15 @@ describe("modifyColumnFields", () => {
       type: "insert",
       newColumnName: "new-column",
     });
-    const insertExpected = {
-      "column-with-dash": "integer",
-      "new-column": "string",
-      column_with_underscore: "string",
-      "column.with.dot": "boolean",
-      "column with space": "datetime",
-    };
-    expect(Object.keys(insertResult)).toEqual(Object.keys(insertExpected));
-    expect(insertResult).toEqual(insertExpected);
+    expect(insertResult).toMatchInlineSnapshot(`
+      Map {
+        "column-with-dash" => "integer",
+        "new-column" => "string",
+        "column_with_underscore" => "string",
+        "column.with.dot" => "boolean",
+        "column with space" => "datetime",
+      }
+    `);
 
     // Remove
     const removeResult = modifyColumnFields({
@@ -820,13 +818,13 @@ describe("modifyColumnFields", () => {
       columnIdx: 1,
       type: "remove",
     });
-    const removeExpected = {
-      "column-with-dash": "integer",
-      "column.with.dot": "boolean",
-      "column with space": "datetime",
-    };
-    expect(Object.keys(removeResult)).toEqual(Object.keys(removeExpected));
-    expect(removeResult).toEqual(removeExpected);
+    expect(removeResult).toMatchInlineSnapshot(`
+      Map {
+        "column-with-dash" => "integer",
+        "column.with.dot" => "boolean",
+        "column with space" => "datetime",
+      }
+    `);
 
     // Rename
     const renameResult = modifyColumnFields({
@@ -835,14 +833,14 @@ describe("modifyColumnFields", () => {
       type: "rename",
       newColumnName: "renamed-column",
     });
-    const renameExpected = {
-      "column-with-dash": "integer",
-      "renamed-column": "string",
-      "column.with.dot": "boolean",
-      "column with space": "datetime",
-    };
-    expect(Object.keys(renameResult)).toEqual(Object.keys(renameExpected));
-    expect(renameResult).toEqual(renameExpected);
+    expect(renameResult).toMatchInlineSnapshot(`
+      Map {
+        "column-with-dash" => "integer",
+        "renamed-column" => "string",
+        "column.with.dot" => "boolean",
+        "column with space" => "datetime",
+      }
+    `);
   });
 
   it("should handle multiple operations in sequence", () => {
@@ -864,13 +862,13 @@ describe("modifyColumnFields", () => {
       newColumnName: "renamed",
     });
 
-    const expected = {
-      renamed: "string",
-      newColumn: "string",
-      bool: "boolean",
-      datetime: "datetime",
-    };
-    expect(Object.keys(result)).toEqual(Object.keys(expected));
-    expect(result).toEqual(expected);
+    expect(result).toMatchInlineSnapshot(`
+      Map {
+        "renamed" => "string",
+        "newColumn" => "string",
+        "bool" => "boolean",
+        "datetime" => "datetime",
+      }
+    `);
   });
 });

package/src/plugins/impl/data-editor/data-utils.ts

@@ -79,24 +79,25 @@ export function modifyColumnFields(opts: {
         return columnFields;
       }
 
-      const entries = Object.entries(columnFields);
-      const newEntries = [
+      const entries = [...columnFields.entries()];
+      const newEntries: Array<[string, DataType]> = [
         ...entries.slice(0, columnIdx),
         [newColumnName, dataType || "string"],
         ...entries.slice(columnIdx),
       ];
-      return Object.fromEntries(newEntries);
+      return new Map(newEntries);
     }
     case "remove": {
-      if (columnIdx < 0 || columnIdx >= Object.keys(columnFields).length) {
+      if (columnIdx < 0 || columnIdx >= columnFields.size) {
         return columnFields;
       }
 
-      const entries = Object.entries(columnFields);
+      const entries = [...columnFields.entries()];
       const columnName = entries[columnIdx]?.[0];
       if (columnName) {
-        const { [columnName]: _, ...rest } = columnFields;
-        return rest;
+        const next = new Map(columnFields);
+        next.delete(columnName);
+        return next;
       }
       return columnFields;
     }
@@ -106,18 +107,18 @@ export function modifyColumnFields(opts: {
         return columnFields;
       }
 
-      if (columnIdx < 0 || columnIdx >= Object.keys(columnFields).length) {
+      if (columnIdx < 0 || columnIdx >= columnFields.size) {
         return columnFields;
       }
 
       // Rename at the right index
-      const entries = Object.entries(columnFields);
-      const newEntries = [
+      const entries = [...columnFields.entries()];
+      const newEntries: Array<[string, DataType]> = [
         ...entries.slice(0, columnIdx),
         [newColumnName, dataType || "string"],
         ...entries.slice(columnIdx + 1),
       ];
-      return Object.fromEntries(newEntries);
+      return new Map(newEntries);
     }
   }
 }

package/src/plugins/impl/data-editor/glide-data-editor.tsx

@@ -102,7 +102,7 @@ export const GlideDataEditor = <T,>({
 
   const columns: ModifiedGridColumn[] = useMemo(() => {
     const columns: ModifiedGridColumn[] = [];
-    for (const [columnName, fieldType] of Object.entries(columnFields)) {
+    for (const [columnName, fieldType] of columnFields) {
       const editable =
         editableColumns === "all" || editableColumns.includes(columnName);
 
@@ -311,7 +311,7 @@ export const GlideDataEditor = <T,>({
       const [col, _row] = cell;
       const key = columns[col].title;
 
-      const columnType = columnFields[key];
+      const columnType = columnFields.get(key);
       // Verify the new value is of the correct type
       switch (columnType) {
         case "number":
@@ -445,7 +445,7 @@ export const GlideDataEditor = <T,>({
       const oldColumnName = columns[menu.col].title;
 
       // Validate the new column name
-      if (columnFields[newName]) {
+      if (columnFields.has(newName)) {
         toastColumnExists(newName);
         return;
       }
@@ -498,7 +498,7 @@ export const GlideDataEditor = <T,>({
       const clampedColumnIdx = Math.max(0, Math.min(columnIdx, columns.length));
 
       // Validate the new column name
-      if (columnFields[columnName]) {
+      if (columnFields.has(columnName)) {
         toastColumnExists(columnName);
         return;
       }

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -29,8 +29,8 @@ import { LoadingDataTableComponent, TableProviders } from "../DataTablePlugin";
 import type { DataType } from "../vega/vega-loader";
 import { TransformPanel, type TransformPanelHandle } from "./panel";
 import {
-  ConditionSchema,
-  type ConditionType,
+  FilterGroupSchema,
+  type FilterGroupType,
   columnToFieldTypesSchema,
   type Transformations,
 } from "./schema";
@@ -75,7 +75,7 @@ type PluginFunctions = {
       descending: boolean;
     }[];
     query?: string;
-    filters?: ConditionType[];
+    filters?: FilterGroupType;
     page_number: number;
     page_size: number;
   }) => Promise<{
@@ -138,7 +138,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
             )
             .optional(),
           query: z.string().optional(),
-          filters: z.array(ConditionSchema).optional(),
+          filters: FilterGroupSchema.optional(),
           page_number: z.number(),
           page_size: z.number(),
         }),

package/src/plugins/impl/data-frames/schema.ts

@@ -73,16 +73,36 @@ const SortColumnTransformSchema = z.object({
     .default("last"),
 });
 
-export const ConditionSchema = z
+export const FilterConditionSchema = z
   .object({
     column_id: column_id,
     operator: z
       .enum(Object.keys(ALL_OPERATORS) as [OperatorType, ...OperatorType[]])
       .describe(FieldOptions.of({ label: " " })),
+    type: z.literal("condition").default("condition"),
     value: z.any().describe(FieldOptions.of({ label: "Value" })),
+    negate: z.boolean().default(false),
   })
   .describe(FieldOptions.of({ direction: "row", special: "column_filter" }));
-export type ConditionType = z.infer<typeof ConditionSchema>;
+export type FilterConditionType = z.infer<typeof FilterConditionSchema>;
+
+export interface FilterGroupType {
+  type: "group";
+  operator: "and" | "or";
+  children: (FilterConditionType | FilterGroupType)[];
+  negate: boolean;
+}
+
+export const FilterGroupSchema: z.ZodType<FilterGroupType> = z.lazy(() =>
+  z.object({
+    type: z.literal("group").default("group"),
+    operator: z.enum(["and", "or"]).default("and"),
+    children: z
+      .array(z.union([FilterConditionSchema, FilterGroupSchema]))
+      .default([]),
+    negate: z.boolean().default(false),
+  }),
+);
 
 const FilterRowsTransformSchema = z.object({
   type: z.literal("filter_rows"),
@@ -91,17 +111,29 @@ const FilterRowsTransformSchema = z.object({
     .default("keep_rows")
     .describe(FieldOptions.of({ special: "radio_group" })),
   where: z
-    .array(ConditionSchema)
+    .array(FilterConditionSchema)
     .min(1)
     .describe(FieldOptions.of({ label: "Value", minLength: 1 }))
-    .transform((value) => {
-      return value.filter((condition) => {
+    .default(() => [
+      {
+        column_id: "" as ColumnId,
+        operator: "==" as const,
+        value: "",
+        type: "condition" as const,
+        negate: false,
+      },
+    ])
+    .transform((value): FilterGroupType => {
+      const validConditions = value.filter((condition) => {
         return isConditionValueValid(condition.operator, condition.value);
       });
-    })
-    .default(() => [
-      { column_id: "" as ColumnId, operator: "==" as const, value: "" },
-    ]),
+      return {
+        type: "group",
+        operator: "and",
+        children: validConditions,
+        negate: false,
+      };
+    }),
 });
 
 const GroupByTransformSchema = z

package/src/plugins/impl/data-frames/utils/operators.ts

@@ -41,6 +41,7 @@ const createComparisonOperators = (schema: z.ZodType) => ({
   ">=": [schema],
   "<": [schema],
   "<=": [schema],
+  between: [z.object({ min: schema, max: schema })],
   is_null: [],
   is_not_null: [],
 });
@@ -59,6 +60,7 @@ export const STRING_OPERATORS = {
   ends_with: [Schema.string],
   in: [Schema.stringMultiColumnValues],
   not_in: [Schema.stringMultiColumnValues],
+  is_empty: [],
   is_null: [],
   is_not_null: [],
 };