@marimo-team/frontend 0.23.7-dev55 → 0.23.7-dev57

package/src/components/data-table/filter-pill-editor.tsx

@@ -17,23 +17,46 @@ import {
   SelectValue,
 } from "../ui/select";
 import { Button } from "../ui/button";
+import { DateLikeInput, DateLikeRangeInput } from "./date-filter-inputs";
 import { FilterByValuesPicker } from "./filter-by-values-picker";
 import { RegexInput } from "./regex-input";
 import {
   type ColumnFilterValue,
+  DATETIME_OPS,
   Filter,
+  isDatetimeComparisonOp,
+  isNumberComparisonOp,
+  isTextScalarOp,
   MEMBERSHIP_OPS,
-  NUMBER_COMPARISON_OPS,
-  type NumberComparisonOp,
   NUMBER_OPS,
   TEXT_OPS,
-  TEXT_SCALAR_OPS,
-  type TextScalarOp,
 } from "./filters";
 import { OPERATOR_LABELS } from "./operator-labels";
 import { Tooltip } from "../ui/tooltip";
 
-type EditableFilterType = "number" | "text" | "boolean" | "select";
+type EditableFilterType =
+  | "number"
+  | "text"
+  | "boolean"
+  | "select"
+  | "date"
+  | "datetime"
+  | "time";
+
+type DateLikeEditableFilterType = Extract<
+  EditableFilterType,
+  "date" | "datetime" | "time"
+>;
+
+const DATE_LIKE_TYPES: ReadonlySet<EditableFilterType> = new Set([
+  "date",
+  "datetime",
+  "time",
+]);
+
+const isDateLikeType = (
+  type: EditableFilterType,
+): type is DateLikeEditableFilterType => DATE_LIKE_TYPES.has(type);
 
 const BOOLEAN_OPS = ["is_true", "is_false", "is_null", "is_not_null"] as const;
 const SELECT_OPS = MEMBERSHIP_OPS;
@@ -46,6 +69,9 @@ const OPERATORS_BY_TYPE: Record<
   text: TEXT_OPS,
   boolean: BOOLEAN_OPS,
   select: SELECT_OPS,
+  date: DATETIME_OPS,
+  datetime: DATETIME_OPS,
+  time: DATETIME_OPS,
 };
 
 const DEFAULT_OPERATOR: Record<EditableFilterType, OperatorType> = {
@@ -53,6 +79,9 @@ const DEFAULT_OPERATOR: Record<EditableFilterType, OperatorType> = {
   text: "contains",
   boolean: "is_true",
   select: "in",
+  date: "between",
+  datetime: "between",
+  time: "between",
 };
 
 const OPERATORS_WITHOUT_VALUE = new Set<OperatorType>([
@@ -63,22 +92,14 @@ const OPERATORS_WITHOUT_VALUE = new Set<OperatorType>([
   "is_empty",
 ]);
 
-const NUMBER_COMPARISON_SET: ReadonlySet<OperatorType> = new Set(
-  NUMBER_COMPARISON_OPS,
-);
-const TEXT_SCALAR_SET: ReadonlySet<OperatorType> = new Set(TEXT_SCALAR_OPS);
-
-const isNumberComparisonOp = (op: OperatorType): op is NumberComparisonOp =>
-  NUMBER_COMPARISON_SET.has(op);
-const isTextScalarOp = (op: OperatorType): op is TextScalarOp =>
-  TEXT_SCALAR_SET.has(op);
-
 type DraftValue =
   | { kind: "between"; min?: number; max?: number }
   | { kind: "single-number"; value?: number }
   | { kind: "single-text"; text?: string }
   | { kind: "multi-text"; values?: string[] }
   | { kind: "options"; options?: unknown[] }
+  | { kind: "date-between"; min?: Date; max?: Date }
+  | { kind: "date-single"; value?: Date }
   | { kind: "none" };
 
 interface Snapshot {
@@ -116,7 +137,13 @@ export const FilterPillEditor = <TData,>({
   const editableColumns = table.getAllColumns().filter((c) => {
     const ft = c.columnDef.meta?.filterType;
     return (
-      ft === "number" || ft === "text" || ft === "boolean" || ft === "select"
+      ft === "number" ||
+      ft === "text" ||
+      ft === "boolean" ||
+      ft === "select" ||
+      ft === "date" ||
+      ft === "datetime" ||
+      ft === "time"
     );
   });
 
@@ -200,7 +227,7 @@ export const FilterPillEditor = <TData,>({
   const operatorTriggerRef = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     const firstInput = valueSlotRef.current?.querySelector<HTMLElement>(
-      'input, [role="combobox"], button',
+      'input, [role="spinbutton"], [role="combobox"], button',
     );
     if (firstInput) {
       firstInput.focus();
@@ -216,6 +243,11 @@ export const FilterPillEditor = <TData,>({
         e.preventDefault();
         handleApply();
       }}
+      onKeyDownCapture={(e) => {
+        if (e.key === "Tab") {
+          e.stopPropagation();
+        }
+      }}
     >
       <div className="flex flex-col gap-1">
         <label className="text-xs text-muted-foreground" htmlFor={columnId}>
@@ -426,6 +458,36 @@ const ValueSlot = <TData, TValue>({
       />
     );
   }
+  if (isDateLikeType(type) && operator === "between") {
+    const v =
+      value.kind === "date-between" ? value : { kind: "date-between" as const };
+    return (
+      <DateLikeRangeInput
+        key={`${column?.id ?? "_"}-${operator}`}
+        filterType={type}
+        min={v.min}
+        max={v.max}
+        onRangeChange={(min, max) =>
+          onChange({ kind: "date-between", min, max })
+        }
+        className="border-input"
+      />
+    );
+  }
+  if (isDateLikeType(type) && isDatetimeComparisonOp(operator)) {
+    const v =
+      value.kind === "date-single" ? value : { kind: "date-single" as const };
+    return (
+      <DateLikeInput
+        key={`${column?.id ?? "_"}-${operator}`}
+        filterType={type}
+        value={v.value}
+        onChange={(next) => onChange({ kind: "date-single", value: next })}
+        aria-label="value"
+        className="border-input"
+      />
+    );
+  }
   if (type === "select" && column) {
     const v = value.kind === "options" ? value : { kind: "options" as const };
     return (
@@ -443,19 +505,18 @@ const ValueSlot = <TData, TValue>({
 };
 
 function getEditableType(value: ColumnFilterValue): EditableFilterType {
-  if (value.type === "number") {
-    return "number";
-  }
-  if (value.type === "text") {
-    return "text";
-  }
-  if (value.type === "boolean") {
-    return "boolean";
-  }
-  if (value.type === "select") {
-    return "select";
+  switch (value.type) {
+    case "number":
+    case "text":
+    case "boolean":
+    case "select":
+    case "date":
+    case "datetime":
+    case "time":
+      return value.type;
+    default:
+      return "text";
   }
-  return "text";
 }
 
 function toDraftValue(value: ColumnFilterValue): DraftValue {
@@ -486,6 +547,21 @@ function toDraftValue(value: ColumnFilterValue): DraftValue {
   if (value.type === "select") {
     return { kind: "options", options: [...value.options] };
   }
+  if (
+    value.type === "date" ||
+    value.type === "datetime" ||
+    value.type === "time"
+  ) {
+    switch (value.operator) {
+      case "between":
+        return { kind: "date-between", min: value.min, max: value.max };
+      case "is_null":
+      case "is_not_null":
+        return { kind: "none" };
+      default:
+        return { kind: "date-single", value: value.value };
+    }
+  }
   return { kind: "none" };
 }
 
@@ -509,6 +585,11 @@ function emptyDraftFor(
   if (type === "select") {
     return { kind: "options", options: [] };
   }
+  if (isDateLikeType(type)) {
+    return operator === "between"
+      ? { kind: "date-between" }
+      : { kind: "date-single" };
+  }
   return { kind: "none" };
 }
 
@@ -516,7 +597,7 @@ function getMissingValueMessage(
   type: EditableFilterType,
   operator: OperatorType,
 ): string {
-  if (type === "number" && operator === "between") {
+  if (operator === "between") {
     return "Min and max are required";
   }
   if (type === "text" && (operator === "in" || operator === "not_in")) {
@@ -611,5 +692,33 @@ function buildFilterValue({
       operator: operator === "not_in" ? "not_in" : "in",
     });
   }
+  if (isDateLikeType(type)) {
+    const factory =
+      type === "date"
+        ? Filter.date
+        : type === "datetime"
+          ? Filter.datetime
+          : Filter.time;
+    if (operator === "is_null" || operator === "is_not_null") {
+      return factory({ operator });
+    }
+    if (operator === "between") {
+      if (
+        draft.kind !== "date-between" ||
+        draft.min === undefined ||
+        draft.max === undefined
+      ) {
+        return undefined;
+      }
+      return factory({ operator: "between", min: draft.min, max: draft.max });
+    }
+    if (!isDatetimeComparisonOp(operator)) {
+      return undefined;
+    }
+    if (draft.kind !== "date-single" || draft.value === undefined) {
+      return undefined;
+    }
+    return factory({ operator, value: draft.value });
+  }
   return undefined;
 }

package/src/components/data-table/filter-pills.tsx

@@ -12,7 +12,11 @@ import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { FilterPillEditor } from "./filter-pill-editor";
-import type { ColumnFilterValue } from "./filters";
+import {
+  type ColumnFilterValue,
+  dateToISODate,
+  dateToISODateTime,
+} from "./filters";
 import { OPERATOR_LABELS } from "./operator-labels";
 import { stringifyUnknownValue } from "./utils";
 
@@ -82,13 +86,6 @@ const FilterPill = <TData,>({
     return null;
   }
 
-  // this is temporary, with more operator & datatype support this goes away
-  const isReadOnly =
-    "type" in value &&
-    (value.type === "date" ||
-      value.type === "datetime" ||
-      value.type === "time");
-
   const twoSegment = formatted.value === undefined;
 
   const handleRemove = (e: React.MouseEvent) => {
@@ -130,20 +127,8 @@ const FilterPill = <TData,>({
     </Button>
   );
 
-  if (isReadOnly) {
-    return (
-      <Badge
-        variant="outline"
-        className="bg-background border-border text-foreground"
-      >
-        {segments}
-        {removeButton}
-      </Badge>
-    );
-  }
-
   return (
-    <Popover open={open} onOpenChange={setOpen} modal={true}>
+    <Popover open={open} onOpenChange={setOpen} modal={false}>
       <Badge
         variant="outline"
         className={cn(
@@ -249,23 +234,31 @@ function formatValue(
         };
     }
   }
-  if (value.type === "date") {
-    return formatMinMaxLegacy(
-      value.min?.toISOString(),
-      value.max?.toISOString(),
-    );
-  }
-  if (value.type === "time") {
-    return formatMinMaxLegacy(
-      value.min ? timeFormatter.format(value.min) : undefined,
-      value.max ? timeFormatter.format(value.max) : undefined,
-    );
-  }
-  if (value.type === "datetime") {
-    return formatMinMaxLegacy(
-      value.min?.toISOString(),
-      value.max?.toISOString(),
-    );
+  if (
+    value.type === "date" ||
+    value.type === "datetime" ||
+    value.type === "time"
+  ) {
+    const format =
+      value.type === "time"
+        ? (d: Date) => timeFormatter.format(d)
+        : value.type === "date"
+          ? dateToISODate
+          : dateToISODateTime;
+    switch (value.operator) {
+      case "between":
+        return {
+          operator: OPERATOR_LABELS.between.toLowerCase(),
+          value: `${format(value.min)} - ${format(value.max)}`,
+        };
+      case "==":
+      case "!=":
+      case ">":
+      case ">=":
+      case "<":
+      case "<=":
+        return { operator: value.operator, value: format(value.value) };
+    }
   }
   if (value.type === "boolean") {
     return { operator: `is ${value.value ? "True" : "False"}` };
@@ -282,22 +275,3 @@ function formatValue(
   logNever(value);
   return undefined;
 }
-
-function formatMinMaxLegacy(
-  min: string | number | undefined,
-  max: string | number | undefined,
-): FormattedFilter | undefined {
-  if (min === undefined && max === undefined) {
-    return;
-  }
-  if (min === max) {
-    return { operator: "==", value: String(min) };
-  }
-  if (min === undefined) {
-    return { operator: "<=", value: String(max) };
-  }
-  if (max === undefined) {
-    return { operator: ">=", value: String(min) };
-  }
-  return { operator: "between", value: `${min} - ${max}` };
-}

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

@@ -51,6 +51,15 @@ export const TEXT_SCALAR_OPS = [
   "ends_with",
 ] as const;
 
+export const DATETIME_COMPARISON_OPS = [
+  "==",
+  "!=",
+  ">",
+  ">=",
+  "<",
+  "<=",
+] as const;
+
 export const NUMBER_OPS = [
   "between",
   ...NUMBER_COMPARISON_OPS,
@@ -62,11 +71,26 @@ export const TEXT_OPS = [
   "is_empty",
   ...NULLISH_OPS,
 ] as const;
+export const DATETIME_OPS = [
+  "between",
+  ...DATETIME_COMPARISON_OPS,
+  ...NULLISH_OPS,
+] as const;
 
 export type NullishOp = (typeof NULLISH_OPS)[number];
 export type MembershipOp = (typeof MEMBERSHIP_OPS)[number];
 export type NumberComparisonOp = (typeof NUMBER_COMPARISON_OPS)[number];
 export type TextScalarOp = (typeof TEXT_SCALAR_OPS)[number];
+export type DatetimeComparisonOp = (typeof DATETIME_COMPARISON_OPS)[number];
+
+const makeOpGuard = <T extends OperatorType>(ops: readonly T[]) => {
+  const set = new Set<OperatorType>(ops);
+  return (op: OperatorType): op is T => set.has(op);
+};
+
+export const isNumberComparisonOp = makeOpGuard(NUMBER_COMPARISON_OPS);
+export const isTextScalarOp = makeOpGuard(TEXT_SCALAR_OPS);
+export const isDatetimeComparisonOp = makeOpGuard(DATETIME_COMPARISON_OPS);
 
 interface NullishOpts {
   operator: NullishOp;
@@ -83,6 +107,11 @@ type TextFilterOpts =
   | { operator: "is_empty" }
   | NullishOpts;
 
+type DateLikeFilterOpts =
+  | { operator: "between"; min: Date; max: Date }
+  | { operator: DatetimeComparisonOp; value: Date }
+  | NullishOpts;
+
 // Filter is a factory function that creates a filter object
 export const Filter = {
   number(opts: NumberFilterOpts) {
@@ -97,19 +126,19 @@ export const Filter = {
       ...opts,
     } as const;
   },
-  date(opts: { min?: Date; max?: Date; operator?: OperatorType }) {
+  date(opts: DateLikeFilterOpts) {
     return {
       type: "date",
       ...opts,
     } as const;
   },
-  datetime(opts: { min?: Date; max?: Date; operator?: OperatorType }) {
+  datetime(opts: DateLikeFilterOpts) {
     return {
       type: "datetime",
       ...opts,
     } as const;
   },
-  time(opts: { min?: Date; max?: Date; operator?: OperatorType }) {
+  time(opts: DateLikeFilterOpts) {
     return {
       type: "time",
       ...opts,
@@ -135,6 +164,26 @@ export type ColumnFilterForType<T extends FilterType> = T extends FilterType
   ? Extract<ColumnFilterValue, { type: T }>
   : never;
 
+function pad2(n: number): string {
+  return n.toString().padStart(2, "0");
+}
+
+function pad4(n: number): string {
+  return n.toString().padStart(4, "0");
+}
+
+export function dateToISODate(d: Date): string {
+  return `${pad4(d.getFullYear())}-${pad2(d.getMonth() + 1)}-${pad2(d.getDate())}`;
+}
+
+export function dateToISOTime(d: Date): string {
+  return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+
+export function dateToISODateTime(d: Date): string {
+  return `${dateToISODate(d)}T${dateToISOTime(d)}`;
+}
+
 function isNullishFilter(
   filter: ColumnFilterValue,
 ): filter is Extract<
@@ -235,71 +284,44 @@ export function filterToFilterCondition(
         default:
           assertNever(filter);
       }
-    case "datetime": {
-      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) {
-        conditions.push({
-          column_id: columnId,
-          operator: "<=",
-          value: filter.max.toISOString(),
-          type: "condition",
-          negate: false,
-        });
-      }
-      return conditions;
-    }
-    case "date": {
-      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) {
-        conditions.push({
-          column_id: columnId,
-          operator: "<=",
-          value: filter.max.toISOString(),
-          type: "condition",
-          negate: false,
-        });
-      }
-      return conditions;
-    }
+    case "date":
+    case "datetime":
     case "time": {
-      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) {
-        conditions.push({
-          column_id: columnId,
-          operator: "<=",
-          value: filter.max.toISOString(),
-          type: "condition",
-          negate: false,
-        });
+      const encode =
+        filter.type === "date"
+          ? dateToISODate
+          : filter.type === "time"
+            ? dateToISOTime
+            : dateToISODateTime;
+      switch (filter.operator) {
+        case "between":
+          return [
+            {
+              column_id: columnId,
+              operator: "between",
+              value: { min: encode(filter.min), max: encode(filter.max) },
+              type: "condition",
+              negate: false,
+            },
+          ];
+        case "==":
+        case "!=":
+        case ">":
+        case ">=":
+        case "<":
+        case "<=":
+          return [
+            {
+              column_id: columnId,
+              operator: filter.operator,
+              value: encode(filter.value),
+              type: "condition",
+              negate: false,
+            },
+          ];
+        default:
+          assertNever(filter);
       }
-      return conditions;
     }
     case "boolean":
       if (filter.value) {

package/src/components/editor/chrome/wrapper/footer-items/backend-status.tsx

@@ -57,7 +57,7 @@ export const BackendConnectionStatus: React.FC = () => {
     }
 
     try {
-      const isHealthy = await runtime.isHealthy();
+      const isHealthy = await runtime.probeHealth();
       setConnectionStatus(isHealthy ? "healthy" : "unhealthy");
       return {
         isHealthy,