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

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,

package/src/core/runtime/__tests__/runtime.test.ts

@@ -275,14 +275,14 @@ describe("RuntimeManager", () => {
     });
   });
 
-  describe("isHealthy", () => {
+  describe("probeHealth", () => {
     it("should return true for successful health check", async () => {
       global.fetch = vi.fn().mockResolvedValue({
         ok: true,
       });
 
       const runtime = new RuntimeManager(mockConfig);
-      const result = await runtime.isHealthy();
+      const result = await runtime.probeHealth();
 
       expect(result).toBe(true);
       expect(fetch).toHaveBeenCalledWith("https://example.com/health");
@@ -294,7 +294,7 @@ describe("RuntimeManager", () => {
       });
 
       const runtime = new RuntimeManager(mockConfig);
-      const result = await runtime.isHealthy();
+      const result = await runtime.probeHealth();
 
       expect(result).toBe(false);
     });
@@ -304,11 +304,32 @@ describe("RuntimeManager", () => {
       global.fetch = vi.fn().mockRejectedValue(error);
 
       const runtime = new RuntimeManager(mockConfig);
-      const result = await runtime.isHealthy();
+      const result = await runtime.probeHealth();
 
       expect(result).toBe(false);
     });
 
+    it("should not mutate config.url on redirect", async () => {
+      global.fetch = vi.fn().mockResolvedValue({
+        ok: true,
+        redirected: true,
+        url: "https://sandbox.example.com/health?some_value=abc123",
+      });
+
+      const runtime = new RuntimeManager(
+        {
+          ...mockConfig,
+          url: "https://backend.example.com/lazy?some_value=abc123",
+        },
+        true,
+      );
+      const result = await runtime.probeHealth();
+      expect(result).toBe(true);
+      expect(runtime.httpURL.hostname).toBe("backend.example.com");
+    });
+  });
+
+  describe("reconcileFromHealth", () => {
     it("should update config.url on redirect, stripping /health from pathname", async () => {
       global.fetch = vi.fn().mockResolvedValue({
         ok: true,
@@ -323,7 +344,7 @@ describe("RuntimeManager", () => {
         },
         true, // lazy — don't call init() in constructor
       );
-      const result = await runtime.isHealthy();
+      const result = await runtime.reconcileFromHealth();
 
       expect(result).toBe(true);
       // Should strip /health from pathname but preserve query params
@@ -342,7 +363,7 @@ describe("RuntimeManager", () => {
     it("should resolve immediately if healthy", async () => {
       const runtime = new RuntimeManager(mockConfig, true);
 
-      vi.spyOn(runtime, "isHealthy").mockResolvedValue(true);
+      vi.spyOn(runtime, "reconcileFromHealth").mockResolvedValue(true);
       runtime.init();
 
       await expect(runtime.waitForHealthy()).resolves.toBeUndefined();
@@ -351,7 +372,7 @@ describe("RuntimeManager", () => {
     it("should retry and eventually succeed", async () => {
       const runtime = new RuntimeManager(mockConfig, true);
       const healthySpy = vi
-        .spyOn(runtime, "isHealthy")
+        .spyOn(runtime, "reconcileFromHealth")
         .mockResolvedValueOnce(false)
         .mockResolvedValueOnce(false)
         .mockResolvedValueOnce(true);
@@ -364,7 +385,7 @@ describe("RuntimeManager", () => {
 
     it("should throw after max retries", async () => {
       const runtime = new RuntimeManager(mockConfig, true);
-      vi.spyOn(runtime, "isHealthy").mockResolvedValue(false);
+      vi.spyOn(runtime, "reconcileFromHealth").mockResolvedValue(false);
       runtime.init({ disableRetryDelay: true });
 
       await expect(runtime.waitForHealthy()).rejects.toThrow(
@@ -431,7 +452,7 @@ describe("RuntimeManager", () => {
       // Mock failed health check
       global.fetch = vi.fn().mockResolvedValue({ ok: false });
 
-      await runtime.isHealthy();
+      await runtime.reconcileFromHealth();
 
       baseElement = document.querySelector("base");
       expect(baseElement).toBeNull();
@@ -443,7 +464,7 @@ describe("RuntimeManager", () => {
       // Mock successful health check
       global.fetch = vi.fn().mockResolvedValue({ ok: true });
 
-      await runtime.isHealthy();
+      await runtime.reconcileFromHealth();
 
       const baseElement = document.querySelector("base");
       expect(baseElement).toBeTruthy();
@@ -461,7 +482,7 @@ describe("RuntimeManager", () => {
       // Mock successful health check
       global.fetch = vi.fn().mockResolvedValue({ ok: true });
 
-      await runtime.isHealthy();
+      await runtime.reconcileFromHealth();
 
       const baseElement = document.querySelector("base");
       expect(baseElement).toBe(existingBase); // Should be the same element
@@ -483,7 +504,7 @@ describe("RuntimeManager", () => {
       // Mock successful health check
       global.fetch = vi.fn().mockResolvedValue({ ok: true });
 
-      await runtime.isHealthy();
+      await runtime.reconcileFromHealth();
 
       const baseElement = document.querySelector("base");
       expect(baseElement).toBeTruthy();
@@ -524,11 +545,11 @@ describe("RuntimeManager", () => {
       });
 
       const wsUrl = runtime.getWsURL("test" as SessionId);
-      const httpUrl = runtime.formatHttpURL(
-        "api/test",
-        new URLSearchParams(),
-        false,
-      );
+      const httpUrl = runtime.formatHttpURL({
+        path: "api/test",
+        searchParams: new URLSearchParams(),
+        restrictToKnownQueryParams: false,
+      });
 
       // Should preserve base URL query params
       expect(wsUrl.searchParams.get("base_param")).toBe("existing");

package/src/core/runtime/runtime.ts

@@ -44,17 +44,22 @@ export class RuntimeManager {
     return this.httpURL.origin === window.location.origin;
   }
 
+  private get isServerless(): boolean {
+    return isWasm() || isIslands() || isStaticNotebook();
+  }
+
   /**
    * The base URL of the runtime.
    */
-  formatHttpURL(
-    path?: string,
-    searchParams?: URLSearchParams,
+  formatHttpURL({
+    path = "",
+    searchParams,
     restrictToKnownQueryParams = true,
-  ): URL {
-    if (!path) {
-      path = "";
-    }
+  }: {
+    path?: string;
+    searchParams?: URLSearchParams;
+    restrictToKnownQueryParams?: boolean;
+  }): URL {
     // URL may be something like "http://localhost:8000?auth=123"
     const baseUrl = this.httpURL;
     const currentParams = new URLSearchParams(window.location.search);
@@ -84,11 +89,11 @@ export class RuntimeManager {
   formatWsURL(path: string, searchParams?: URLSearchParams): URL {
     // We don't restrict to known query parameters, since mo.query_params()
     // can accept arbitrary parameters.
-    const url = this.formatHttpURL(
+    const url = this.formatHttpURL({
       path,
       searchParams,
-      /* restrictToKnownQueryParams =*/ false,
-    );
+      restrictToKnownQueryParams: false,
+    });
 
     // For cross-origin runtimes, pass the auth token as a query parameter.
     // WebSocket connections cannot send custom headers (no Authorization
@@ -168,45 +173,63 @@ export class RuntimeManager {
   }
 
   getAiURL(path: "completion" | "chat"): URL {
-    return this.formatHttpURL(`/api/ai/${path}`);
+    return this.formatHttpURL({ path: `/api/ai/${path}` });
   }
 
   /**
    * The URL of the health check endpoint.
    */
   healthURL(): URL {
-    return this.formatHttpURL("/health");
+    return this.formatHttpURL({ path: "/health" });
   }
 
-  async isHealthy(): Promise<boolean> {
-    // Always healthy if WASM, Islands, or a static notebook (no server)
-    if (isWasm() || isIslands() || isStaticNotebook()) {
-      return true;
-    }
-
+  private async fetchHealth(): Promise<Response | null> {
     try {
-      const response = await fetch(this.healthURL().toString());
-      // If there is a redirect, update the URL in the config
-      if (response.redirected) {
-        Logger.debug(`Runtime redirected to ${response.url}`);
-        // strip /health from the URL, using URL parsing to handle query params
-        const redirected = new URL(response.url);
-        redirected.pathname = redirected.pathname.replace(/\/health$/, "");
-        this.config.url = redirected.toString();
-      }
-
-      const success = response.ok;
-      if (success) {
-        this.setDOMBaseUri(this.config.url);
-      }
-      return success;
+      return await fetch(this.healthURL().toString());
     } catch (error) {
       Logger.error(
         `Failed to check health: ${error instanceof Error ? error.message : "Unknown error"}`,
         { cause: error },
       );
+      return null;
+    }
+  }
+
+  async reconcileFromHealth(): Promise<boolean> {
+    // Always healthy if WASM, Islands, or a static notebook (no server)
+    if (this.isServerless) {
+      return true;
+    }
+
+    const response = await this.fetchHealth();
+
+    if (!response) {
       return false;
     }
+
+    if (response.redirected) {
+      Logger.debug(`Runtime redirected to ${response.url}`);
+      // strip /health from the URL, using URL parsing to handle query params
+      const redirected = new URL(response.url);
+      redirected.pathname = redirected.pathname.replace(/\/health$/, "");
+      this.config.url = redirected.toString();
+    }
+
+    if (response.ok) {
+      this.setDOMBaseUri(this.config.url);
+    }
+
+    return response.ok;
+  }
+
+  async probeHealth(): Promise<boolean> {
+    // Always healthy if WASM, Islands, or a static notebook (no server)
+    if (this.isServerless) {
+      return true;
+    }
+
+    const response = await this.fetchHealth();
+    return response?.ok ?? false;
   }
 
   /**
@@ -251,7 +274,7 @@ export class RuntimeManager {
     const growthFactor = 1.2;
     const maxDelay = 2000;
 
-    while (!(await this.isHealthy())) {
+    while (!(await this.reconcileFromHealth())) {
       if (retries >= maxRetries) {
         Logger.error(`Failed to connect after ${maxRetries} retries`);
         this.initialHealthyCheck.reject(

package/src/core/websocket/__tests__/useMarimoKernelConnection.hook.test.tsx

@@ -35,7 +35,6 @@ import { useConnectionTransport } from "../useWebSocket";
 
 interface MockTransport {
   readyState: 0 | 1 | 2 | 3;
-  retryCount: number;
   reconnect: ReturnType<typeof vi.fn>;
   close: ReturnType<typeof vi.fn>;
   send: ReturnType<typeof vi.fn>;
@@ -48,7 +47,6 @@ function makeTransport(
 ): MockTransport {
   return {
     readyState,
-    retryCount: 0,
     reconnect: vi.fn(),
     close: vi.fn(),
     send: vi.fn(),
@@ -57,9 +55,12 @@ function makeTransport(
   };
 }
 
-function makeRuntimeManager(isHealthy = vi.fn().mockResolvedValue(true)) {
+function makeRuntimeManager(
+  reconcileFromHealth = vi.fn().mockResolvedValue(true),
+) {
   return {
-    isHealthy,
+    reconcileFromHealth,
+    probeHealth: vi.fn().mockResolvedValue(true),
     getWsURL: () => new URL("ws://localhost/ws"),
     waitForHealthy: vi.fn().mockResolvedValue(undefined),
     isSameOrigin: true,