@marimo-team/islands 0.23.7-dev56 → 0.23.7-dev58

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/core/websocket/transports/ws.ts

@@ -55,7 +55,9 @@ export class WsTransport implements IConnectionTransport {
       // Match native EventTarget dedupe: a second addEventListener with the
       // same listener is a no-op. Without this, repeated adds leak wrappers
       // on the inner socket and double-fire on close.
-      if (this.closeWrappers.has(userCb)) return;
+      if (this.closeWrappers.has(userCb)) {
+        return;
+      }
       const wrapper: ConnectionTransportCallback<"close"> = (e) => {
         if (this.inner.retryCount >= MAX_RETRIES) {
           userCb(