@marimo-team/frontend 0.23.2-dev12 → 0.23.2-dev14

package/src/components/data-table/filters.ts

@@ -1,9 +1,12 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 "use no memo";
 
-import type { RowData } from "@tanstack/react-table";
+import type { ColumnFiltersState, RowData } from "@tanstack/react-table";
 import type { DataType } from "@/core/kernel/messages";
-import type { ConditionType } from "@/plugins/impl/data-frames/schema";
+import type {
+  FilterConditionType,
+  FilterGroupType,
+} from "@/plugins/impl/data-frames/schema";
 import type { ColumnId } from "@/plugins/impl/data-frames/types";
 import type { OperatorType } from "@/plugins/impl/data-frames/utils/operators";
 import { assertNever } from "@/utils/assertNever";
@@ -84,28 +87,34 @@ export type ColumnFilterForType<T extends FilterType> = T extends FilterType
 export function filterToFilterCondition(
   columnIdString: string,
   filter: ColumnFilterValue | undefined,
-): ConditionType[] | ConditionType {
+): FilterConditionType[] {
   if (!filter) {
     return [];
   }
   const columnId = columnIdString as ColumnId;
 
   if (filter.operator === "is_null" || filter.operator === "is_not_null") {
-    return {
-      column_id: columnId,
-      operator: filter.operator,
-      value: undefined,
-    };
+    return [
+      {
+        column_id: columnId,
+        operator: filter.operator,
+        value: undefined,
+        type: "condition",
+        negate: false,
+      },
+    ];
   }
 
   switch (filter.type) {
     case "number": {
-      const conditions: ConditionType[] = [];
+      const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
         conditions.push({
           column_id: columnId,
           operator: ">=",
           value: filter.min,
+          type: "condition",
+          negate: false,
         });
       }
       if (filter.max !== undefined) {
@@ -113,23 +122,31 @@ export function filterToFilterCondition(
           column_id: columnId,
           operator: "<=",
           value: filter.max,
+          type: "condition",
+          negate: false,
         });
       }
       return conditions;
     }
     case "text":
-      return {
-        column_id: columnId,
-        operator: filter.operator,
-        value: filter.text,
-      };
+      return [
+        {
+          column_id: columnId,
+          operator: filter.operator,
+          value: filter.text,
+          type: "condition",
+          negate: false,
+        },
+      ];
     case "datetime": {
-      const conditions: ConditionType[] = [];
+      const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
         conditions.push({
           column_id: columnId,
           operator: ">=",
           value: filter.min.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       if (filter.max !== undefined) {
@@ -137,17 +154,21 @@ export function filterToFilterCondition(
           column_id: columnId,
           operator: "<=",
           value: filter.max.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       return conditions;
     }
     case "date": {
-      const conditions: ConditionType[] = [];
+      const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
         conditions.push({
           column_id: columnId,
           operator: ">=",
           value: filter.min.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       if (filter.max !== undefined) {
@@ -155,17 +176,21 @@ export function filterToFilterCondition(
           column_id: columnId,
           operator: "<=",
           value: filter.max.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       return conditions;
     }
     case "time": {
-      const conditions: ConditionType[] = [];
+      const conditions: FilterConditionType[] = [];
       if (filter.min !== undefined) {
         conditions.push({
           column_id: columnId,
           operator: ">=",
           value: filter.min.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       if (filter.max !== undefined) {
@@ -173,24 +198,34 @@ export function filterToFilterCondition(
           column_id: columnId,
           operator: "<=",
           value: filter.max.toISOString(),
+          type: "condition",
+          negate: false,
         });
       }
       return conditions;
     }
     case "boolean":
       if (filter.value) {
-        return {
-          column_id: columnId,
-          operator: "is_true",
-          value: undefined,
-        };
+        return [
+          {
+            column_id: columnId,
+            operator: "is_true",
+            value: undefined,
+            type: "condition",
+            negate: false,
+          },
+        ];
       }
       if (!filter.value) {
-        return {
-          column_id: columnId,
-          operator: "is_false",
-          value: undefined,
-        };
+        return [
+          {
+            column_id: columnId,
+            operator: "is_false",
+            value: undefined,
+            type: "condition",
+            negate: false,
+          },
+        ];
       }
 
       return [];
@@ -200,16 +235,35 @@ export function filterToFilterCondition(
         Logger.warn("Invalid operator for select filter", {
           operator: filter.operator,
         });
-        operator = "in"; // default to in operator
+        operator = "in";
       }
-      return {
-        column_id: columnId,
-        operator,
-        value: filter.options,
-      };
+      return [
+        {
+          column_id: columnId,
+          operator,
+          value: filter.options,
+          type: "condition",
+          negate: false,
+        },
+      ];
     }
 
     default:
       assertNever(filter);
   }
 }
+
+export function filtersToFilterGroup(
+  columnFilters: ColumnFiltersState,
+): FilterGroupType {
+  const conditions = columnFilters.flatMap((filter) =>
+    filterToFilterCondition(filter.id, filter.value as ColumnFilterValue),
+  );
+  // To maintain existing behavior "and" all the conditions
+  return {
+    type: "group",
+    operator: "and",
+    children: conditions,
+    negate: false,
+  };
+}

package/src/core/codemirror/__tests__/__snapshots__/setup.test.ts.snap

@@ -9,9 +9,7 @@ exports[`snapshot all duplicate keymaps > default keymaps 2`] = `
     },
     {
       "key": "ArrowDown",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowDown",
@@ -27,9 +25,7 @@ exports[`snapshot all duplicate keymaps > default keymaps 2`] = `
     },
     {
       "key": "ArrowUp",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowUp",
@@ -118,15 +114,12 @@ exports[`snapshot all duplicate keymaps > vim keymaps 2`] = `
     },
     {
       "key": "ArrowDown",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowDown",
-      "preventDefault": true,
-      "run": "cursorLineDown",
-      "shift": "selectLineDown",
+      "run": "<no name>",
+      "shift": "<no name>",
     },
   ],
   "ArrowUp": [
@@ -136,15 +129,12 @@ exports[`snapshot all duplicate keymaps > vim keymaps 2`] = `
     },
     {
       "key": "ArrowUp",
-      "preventDefault": true,
       "run": "run",
-      "stopPropagation": true,
     },
     {
       "key": "ArrowUp",
-      "preventDefault": true,
-      "run": "cursorLineUp",
-      "shift": "selectLineUp",
+      "run": "<no name>",
+      "shift": "<no name>",
     },
   ],
   "Backspace": [

package/src/core/codemirror/cells/extensions.ts

@@ -169,8 +169,6 @@ function cellKeymaps({
       },
       {
         key: "ArrowUp",
-        preventDefault: true,
-        stopPropagation: true,
         run: (ev) => {
           // Skip if we are in the middle of an autocompletion
           const hasAutocomplete = completionStatus(ev.state);
@@ -188,8 +186,6 @@ function cellKeymaps({
       },
       {
         key: "ArrowDown",
-        preventDefault: true,
-        stopPropagation: true,
         run: (ev) => {
           // Skip if we are in the middle of an autocompletion
           const hasAutocomplete = completionStatus(ev.state);

package/src/core/codemirror/keymaps/keymaps.ts

@@ -1,8 +1,16 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import {
+  cursorCharLeft,
+  cursorCharRight,
+  cursorLineDown,
+  cursorLineUp,
   insertNewlineAndIndent,
   defaultKeymap as originalDefaultKeymap,
+  selectCharLeft,
+  selectCharRight,
+  selectLineDown,
+  selectLineUp,
   toggleBlockComment,
   toggleComment,
 } from "@codemirror/commands";
@@ -13,7 +21,7 @@ import {
   type KeyBinding,
   keymap,
 } from "@codemirror/view";
-import { getCM, vim } from "@replit/codemirror-vim";
+import { type CodeMirror, getCM, vim } from "@replit/codemirror-vim";
 import type { KeymapConfig } from "@/core/config/config-schema";
 import type { HotkeyProvider } from "@/core/hotkeys/hotkeys";
 import { logNever } from "@/utils/assertNever";
@@ -62,6 +70,12 @@ export function keymapBundle(
             },
           ),
         ),
+        // Arrow keys: use CodeMirror's cursor movement except in vim visual
+        // mode, where vim must handle them to maintain selection.
+        // The original cursorLineUp/Down bindings from the default keymap are
+        // filtered out (see defaultVimKeymap) because their preventDefault
+        // flag blocks vim's handler even when their run function returns false.
+        keymap.of(vimVisualModeArrowKeyBindings()),
         // Base vim mode
         vim({ status: false }),
         // Custom vim keymaps for cell navigation
@@ -101,12 +115,22 @@ const overrideKeymap = (keymap: HotkeyProvider): readonly KeyBinding[] => {
 };
 
 const defaultVimKeymap = once(() => {
-  const toRemove = new Set(["Enter", "Ctrl-v"]);
+  const toRemove = new Set([
+    "Enter",
+    "Ctrl-v",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+  ]);
   // Remove conflicting keys from the keymap
   // Enter (<CR>) adds a new line
   //   - it should just go to the next line
   // Ctrl-v goes to the bottom of the cell
   //   - should enter blockwise visual mode
+  // ArrowUp/ArrowDown (cursorLineUp/Down) always handle the event and have
+  //   preventDefault, which blocks vim's handler from processing arrow keys.
+  //   Replaced with visual-mode-aware wrappers in keymapBundle.
   return defaultKeymap().filter(
     (k) => !toRemove.has(k.key || k.mac || k.linux || k.win || ""),
   );
@@ -155,6 +179,49 @@ function doubleCharacterListener(
   ]);
 }
 
+function isInVimVisualMode(cm: CodeMirror | undefined | null): boolean {
+  return cm?.state.vim?.visualMode === true;
+}
+
+/**
+ * In vim visual mode, arrow keys must be handled by vim to maintain selection.
+ * Wrap each arrow key's run and shift so they defer to vim in visual mode,
+ * but use CodeMirror's cursor commands in all other modes.
+ */
+function vimVisualModeArrowKeyBindings(): KeyBinding[] {
+  const wrap =
+    (cmd: Command): Command =>
+    (view) => {
+      if (isInVimVisualMode(getCM(view))) {
+        return false;
+      }
+      return cmd(view);
+    };
+
+  return [
+    {
+      key: "ArrowDown",
+      run: wrap(cursorLineDown),
+      shift: wrap(selectLineDown),
+    },
+    {
+      key: "ArrowUp",
+      run: wrap(cursorLineUp),
+      shift: wrap(selectLineUp),
+    },
+    {
+      key: "ArrowLeft",
+      run: wrap(cursorCharLeft),
+      shift: wrap(selectCharLeft),
+    },
+    {
+      key: "ArrowRight",
+      run: wrap(cursorCharRight),
+      shift: wrap(selectCharRight),
+    },
+  ];
+}
+
 export const visibleForTesting = {
   defaultKeymap,
   defaultVimKeymap,

package/src/plugins/impl/DataTablePlugin.tsx

@@ -28,10 +28,7 @@ import { TablePanel } from "@/components/data-table/charts/charts";
 import { hasChart } from "@/components/data-table/charts/storage";
 import { ColumnChartSpecModel } from "@/components/data-table/column-summary/chart-spec-model";
 import { ColumnChartContext } from "@/components/data-table/column-summary/column-summary";
-import {
-  type ColumnFilterValue,
-  filterToFilterCondition,
-} from "@/components/data-table/filters";
+import { filtersToFilterGroup } from "@/components/data-table/filters";
 import { usePanelOwnership } from "@/components/data-table/hooks/use-panel-ownership";
 import { LoadingTable } from "@/components/data-table/loading-table";
 import {
@@ -86,8 +83,8 @@ import { rpc } from "../core/rpc";
 import { Banner } from "./common/error-banner";
 import { Labeled } from "./common/labeled";
 import {
-  ConditionSchema,
-  type ConditionType,
+  FilterGroupSchema,
+  type FilterGroupType,
   columnToFieldTypesSchema,
 } from "./data-frames/schema";
 
@@ -213,7 +210,7 @@ type DataTableFunctions = {
       descending: boolean;
     }[];
     query?: string;
-    filters?: ConditionType[];
+    filters?: FilterGroupType;
     page_number: number;
     page_size: number;
     max_columns?: number | null;
@@ -312,7 +309,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             )
             .optional(),
           query: z.string().optional(),
-          filters: z.array(ConditionSchema).optional(),
+          filters: FilterGroupSchema.optional(),
           page_number: z.number(),
           page_size: z.number(),
           max_columns: z.number().nullable().optional(),
@@ -578,12 +575,7 @@ export const LoadingDataTableComponent = memo(
         query: searchQuery,
         page_number: paginationState.pageIndex,
         page_size: paginationState.pageSize,
-        filters: filters.flatMap((filter) => {
-          return filterToFilterCondition(
-            filter.id,
-            filter.value as ColumnFilterValue,
-          );
-        }),
+        filters: filtersToFilterGroup(filters),
       });
 
       if (canShowInitialPage) {
@@ -641,12 +633,7 @@ export const LoadingDataTableComponent = memo(
           page_size: 1,
           sort: sortArgs,
           query: searchQuery,
-          filters: filters.flatMap((filter) => {
-            return filterToFilterCondition(
-              filter.id,
-              filter.value as ColumnFilterValue,
-            );
-          }),
+          filters: filtersToFilterGroup(filters),
           // Do not clamp number of columns since we are viewing a single row
           max_columns: null,
         });

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: [],
 };