@marimo-team/islands 0.25.3-dev322 → 0.25.3-dev348

package/src/core/wasm/bridge.ts

@@ -76,6 +76,9 @@ export class PyodideBridge implements RunRequests, EditRequests {
   /** Runs asked to stop before they ran; the buffer is raised once they do. */
   private pendingInterrupts = new Set<string>();
 
+  // Match the worker mutation receipt window, including requests still in flight.
+  private interruptReceipts = new Map<string, { expiresAt: number }>();
+
   public initialized = new Deferred<void>();
 
   private getSaveWorker(): SaveWorker {
@@ -251,19 +254,53 @@ export class PyodideBridge implements RunRequests, EditRequests {
           throw error;
         }
       },
-      call: (call) => {
+      call: async (call) => {
+        if (
+          call.operation !== "runtime.interrupt" &&
+          call.operation !== "runtime.cancel"
+        ) {
+          return this.rpc.proxy.request.notebookCall(call);
+        }
+        const now = performance.now();
+        for (const [key, receipt] of this.interruptReceipts) {
+          if (receipt.expiresAt <= now) {
+            this.interruptReceipts.delete(key);
+          }
+        }
+        const key = call.headers["idempotency-key"];
+        if (!key || this.interruptReceipts.has(key)) {
+          return this.rpc.proxy.request.notebookCall(call);
+        }
+        const receipt = { expiresAt: Infinity };
+        this.interruptReceipts.set(key, receipt);
+        // The worker cannot take a call while a cell runs, so the interrupt
+        // is raised on the shared buffer first and the call follows.
+        // A queued run is ended by the worker, unless it starts before the
+        // call arrives. Then it is raised once the run reports running.
         if (call.operation === "runtime.interrupt") {
-          // The worker cannot take the call while a cell runs; raise the
-          // interrupt there first. A queued run is cancelled by the worker,
-          // unless it starts before the call arrives: then it is raised
-          // when the run is reported running.
+          this.interruptEveryRun();
+        } else if (call.operation === "runtime.cancel") {
           if (this.isRunning(call.params.run_id)) {
-            void this.sendInterrupt();
+            this.raiseInterrupt();
           } else {
             this.pendingInterrupts.add(call.params.run_id);
           }
         }
-        return this.rpc.proxy.request.notebookCall(call);
+        try {
+          const reply = await this.rpc.proxy.request.notebookCall(call);
+          if (
+            typeof reply === "object" &&
+            reply !== null &&
+            "status" in reply &&
+            reply.status !== 202
+          ) {
+            this.interruptReceipts.delete(key);
+          }
+          return reply;
+        } finally {
+          // A lost reply may still have committed; retries must not signal new work.
+          receipt.expiresAt = performance.now() + 300_000;
+        }
       },
     });
   }
@@ -283,12 +320,29 @@ export class PyodideBridge implements RunRequests, EditRequests {
     }
     if (run.status === "running") {
       this.pendingInterrupts.delete(run.id);
-      void this.sendInterrupt();
+      this.raiseInterrupt();
     } else if (run.status === "completed") {
       this.pendingInterrupts.delete(run.id);
     }
   }
 
+  /**
+   * Signal work outside runs too. Python ignores the signal while idle;
+   * the following host call consumes it before acknowledging the interrupt.
+   */
+  private interruptEveryRun(): void {
+    this.raiseInterrupt();
+    const replica = store.get(activeNotebookReplicaAtom);
+    if (replica === null) {
+      return;
+    }
+    for (const run of store.get(replica.executionsAtom).runs.values()) {
+      if (run.status === "queued") {
+        this.pendingInterrupts.add(run.id);
+      }
+    }
+  }
+
   /** Whether the host reports `runId` as running, so a cell is executing. */
   private isRunning(runId: string): boolean {
     const replica = store.get(activeNotebookReplicaAtom);
@@ -324,14 +378,6 @@ export class PyodideBridge implements RunRequests, EditRequests {
     throwNotImplemented();
   };
 
-  public sendStdin: EditRequests["sendStdin"] = async (request) => {
-    await this.rpc.proxy.request.bridge({
-      functionName: "put_input",
-      payload: request.text,
-    });
-    return null;
-  };
-
   public sendPdb: EditRequests["sendPdb"] = async () => {
     throwNotImplemented();
   };
@@ -351,13 +397,12 @@ export class PyodideBridge implements RunRequests, EditRequests {
     });
     return null;
   };
-  public sendInterrupt: EditRequests["sendInterrupt"] = async () => {
+  private raiseInterrupt(): void {
     if (this.interruptBuffer !== undefined) {
       // 2 sends a SIGINT
       this.interruptBuffer[0] = 2;
     }
-    return null;
-  };
+  }
   public sendShutdown: EditRequests["sendShutdown"] = async () => {
     window.close();
     return null;

package/src/core/wasm/worker/types.ts

@@ -72,7 +72,6 @@ export interface WasmSession {
 
 export interface RawBridge {
   put_control_request(operation: ClientCommand): Promise<string>;
-  put_input(input: string): Promise<string>;
   code_complete(request: CodeCompletionRequest): Promise<string>;
   read_code(): Promise<{ contents: string }>;
   read_snippets(): Promise<Snippets>;

package/src/plugins/impl/DataEditorPlugin.tsx

@@ -2,7 +2,7 @@
 
 import glideCss from "@glideapps/glide-data-grid/dist/index.css?inline";
 import glideCellsCss from "@glideapps/glide-data-grid-cells/dist/index.css?inline";
-import React, { useEffect, useState } from "react";
+import React, { useMemo } from "react";
 import { z } from "zod";
 import { inferFieldTypes } from "@/components/data-table/columns";
 import { LoadingTable } from "@/components/data-table/loading-table";
@@ -90,15 +90,23 @@ interface Props {
 }
 
 const LoadingDataEditor = (props: Props) => {
-  const [editorState, setEditorState] = useState<EditorState | null>(null);
+  const source = useMemo(
+    () => ({
+      data: props.data,
+      fieldTypes: props.fieldTypes,
+      columnNames: props.columnNames,
+      columnTypes: props.columnTypes,
+    }),
+    [props.data, props.fieldTypes, props.columnNames, props.columnTypes],
+  );
 
   const { data: loadedState, error } = useAsyncData(async () => {
-    const withoutExternalTypes = toFieldTypes(props.fieldTypes ?? []);
+    const withoutExternalTypes = toFieldTypes(source.fieldTypes ?? []);
 
-    const localData = Array.isArray(props.data)
-      ? props.data
+    const localData = Array.isArray(source.data)
+      ? source.data
       : await vegaLoadData<EditorRow>(
-          props.data,
+          source.data,
           {
             type: "csv",
             parse: getVegaFieldTypes(Object.fromEntries(withoutExternalTypes)),
@@ -106,9 +114,9 @@ const LoadingDataEditor = (props: Props) => {
           { handleBigIntAndNumberLike: true },
         );
 
-    const columnTypes = new Map(Object.entries(props.columnTypes));
+    const columnTypes = new Map(Object.entries(source.columnTypes));
     const inferredFields = toFieldTypes(
-      props.fieldTypes ?? inferFieldTypes(localData),
+      source.fieldTypes ?? inferFieldTypes(localData),
     );
     for (const [columnName, columnType] of columnTypes) {
       inferredFields.set(
@@ -118,17 +126,23 @@ const LoadingDataEditor = (props: Props) => {
     }
 
     return {
-      data: normalizeConfiguredColumns(localData, columnTypes),
-      columnFields: orderColumnFields(inferredFields, props.columnNames),
-      columnTypes,
-    } satisfies EditorState;
-  }, [props.fieldTypes, props.columnNames, props.columnTypes, props.data]);
+      source,
+      state: {
+        data: normalizeConfiguredColumns(localData, columnTypes),
+        columnFields: orderColumnFields(inferredFields, source.columnNames),
+        columnTypes,
+      } satisfies EditorState,
+    };
+  }, [source]);
 
-  useEffect(() => {
-    if (loadedState !== undefined) {
-      setEditorState(applyEditorEdits(loadedState, props.edits.edits));
-    }
-  }, [loadedState, props.edits.edits]);
+  // useAsyncData retains previous data while a replacement source loads.
+  const editorState = useMemo(
+    () =>
+      loadedState?.source === source
+        ? applyEditorEdits(loadedState.state, props.edits.edits)
+        : null,
+    [loadedState, source, props.edits.edits],
+  );
 
   if (error) {
     return (
@@ -156,9 +170,6 @@ const LoadingDataEditor = (props: Props) => {
       columnTypes={editorState.columnTypes}
       editableColumns={props.editableColumns}
       onAddEdits={(edits) => {
-        setEditorState((state) =>
-          state === null ? null : applyEditorEdits(state, edits),
-        );
         props.onEdits((v) => ({ ...v, edits: [...v.edits, ...edits] }));
       }}
     />

package/src/plugins/impl/SliderPlugin.tsx

@@ -7,6 +7,8 @@ import { useInternalStateWithSync } from "@/hooks/useInternalStateWithSync";
 import { cn } from "@/utils/cn";
 import { clamp } from "@/utils/math";
 import {
+  countFractionDigits,
+  fractionDigitsForSlider,
   maxFractionDigitsForSteps,
   prettyScientificNumber,
   roundToFractionDigits,
@@ -155,6 +157,7 @@ const SliderComponent = ({
   const id = useId();
   const labelId = useId();
   const { locale } = useLocale();
+  const isFullWidthHorizontal = fullWidth && orientation === "horizontal";
 
   // Hold internal value
   const [internalValue, setInternalValue] = useInternalStateWithSync(
@@ -163,6 +166,18 @@ const SliderComponent = ({
   );
 
   const stepsConfig = useMemo(() => computeStepsConfig(steps), [steps]);
+  const stepDigits = countFractionDigits(step ?? 0);
+  // Keep exact decimals; repeating fractions need only enough digits to distinguish steps.
+  const isDecimalStep =
+    step != null && roundToFractionDigits(step, stepDigits) === step;
+  const fractionDigits =
+    step != null && Number.isFinite(step) && step > 0 && !steps?.length
+      ? Math.max(
+          countFractionDigits(start),
+          isDecimalStep ? stepDigits : 2,
+          Math.ceil(-Math.log10(step)),
+        )
+      : fractionDigitsForSlider(step, steps, start, [valueMap(internalValue)]);
 
   const handleInputChange = (nextValue: number | null | undefined): void => {
     if (stepsConfig) {
@@ -232,6 +247,10 @@ const SliderComponent = ({
       <div
         className={cn(
           "flex items-center gap-2",
+          isFullWidthHorizontal && "grid w-full grid-cols-1 gap-y-1",
+          isFullWidthHorizontal &&
+            includeInput &&
+            "grid-cols-[minmax(0,1fr)_auto]",
           orientation === "vertical" &&
             "items-end inline-flex justify-center self-center mx-2",
         )}
@@ -264,18 +283,31 @@ const SliderComponent = ({
             }
           }}
           valueMap={valueMap} // Pass valueMap to Slider
+          maximumFractionDigits={fractionDigits}
           disabled={disabled}
         />
         {showValue && (
-          <div className="text-xs text-muted-foreground min-w-[16px]">
-            {prettyScientificNumber(valueMap(internalValue), { locale })}
+          <div
+            className={cn(
+              "text-xs text-muted-foreground min-w-[16px]",
+              isFullWidthHorizontal &&
+                "col-span-full row-start-2 min-w-0 max-w-full justify-self-end break-all",
+            )}
+          >
+            {prettyScientificNumber(valueMap(internalValue), {
+              locale,
+              maximumFractionDigits: fractionDigits,
+            })}
           </div>
         )}
         {includeInput && (
           <NumberField
             {...inputProps}
             onChange={handleInputChange}
-            className="w-24"
+            className={cn(
+              "w-24",
+              isFullWidthHorizontal && "col-start-2 row-start-1",
+            )}
             aria-label={`${label || "Slider"} value input`}
             isDisabled={disabled}
           />

package/src/plugins/impl/__test__/slider-labels.test.tsx

@@ -134,3 +134,33 @@ describe("SliderPlugin accessible labels", () => {
     expect(screen.getByRole("tooltip")).toHaveTextContent("50");
   });
 });
+
+describe("SliderPlugin value formatting", () => {
+  test.each([
+    { step: 0.125, value: 0.125, expected: "0.125" },
+    { step: 0.025, value: 0.025, expected: "0.025" },
+    { step: 0.125, value: 0.5, expected: "0.5" },
+    { step: 0.025, value: 1, expected: "1" },
+    { step: 1 / 30, value: 1 / 30, expected: "0.03" },
+    { step: 1 / 30, value: 35.86666666666667, expected: "35.87" },
+    { step: 0.1, value: 0.30000000000000004, expected: "0.3" },
+  ])(
+    "formats $value with step $step consistently",
+    ({ step, value, expected }) => {
+      const initial = props("Value");
+      render(
+        plugin.render({
+          ...initial,
+          value,
+          data: { ...initial.data, step, stop: 60, showValue: true },
+        }),
+      );
+      expect(screen.getByText(expected)).toBeVisible();
+      const thumb = screen.getByRole("slider");
+      fireEvent.focus(thumb);
+      expect(screen.getByRole("tooltip")).toHaveTextContent(expected);
+      expect(thumb).toHaveAttribute("aria-valuenow", String(value));
+      expect(initial.setValue).not.toHaveBeenCalled();
+    },
+  );
+});

package/src/plugins/impl/__tests__/DataEditorPlugin.test.ts

@@ -4,14 +4,17 @@ import React, { Suspense } from "react";
 import { act, render, screen, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import type { z } from "zod";
-import type { IPluginProps } from "../../types";
-import type { EditorRow, Edits } from "../data-editor/types";
+import type { IPluginProps, Setter } from "../../types";
+import type { GlideDataEditor } from "../data-editor/glide-data-editor";
+import type { ColumnType, EditorRow, Edits } from "../data-editor/types";
 import { DataEditorPlugin } from "../DataEditorPlugin";
 
 type PluginData = z.infer<typeof DataEditorPlugin.validator>;
 
 const mocks = vi.hoisted(() => ({
   loadData: vi.fn(),
+  renderEditor:
+    vi.fn<(props: React.ComponentProps<typeof GlideDataEditor>) => void>(),
 }));
 
 vi.mock("../vega/loader", () => ({
@@ -21,8 +24,9 @@ vi.mock("../vega/loader", () => ({
 vi.mock("../data-editor/glide-data-editor", async () => {
   const React = await import("react");
   return {
-    default: (props: { data: EditorRow[]; columnFields: unknown }) =>
-      React.createElement(
+    default: (props: React.ComponentProps<typeof GlideDataEditor>) => {
+      mocks.renderEditor(props);
+      return React.createElement(
         React.Fragment,
         null,
         React.createElement(
@@ -33,22 +37,23 @@ vi.mock("../data-editor/glide-data-editor", async () => {
         React.createElement(
           "pre",
           { "data-testid": "editor-fields" },
-          JSON.stringify(
-            props.columnFields instanceof Map
-              ? [...props.columnFields]
-              : props.columnFields,
-          ),
+          JSON.stringify([...props.columnFields]),
         ),
-      ),
+      );
+    },
   };
 });
 
-function renderPlugin(data: PluginData, value: Edits) {
+function renderPlugin(
+  data: PluginData,
+  value: Edits,
+  setValue: Setter<Edits> = vi.fn(),
+) {
   const props: IPluginProps<Edits, PluginData> = {
     host: document.createElement("div"),
     data,
     value,
-    setValue: vi.fn(),
+    setValue,
     functions: {},
   };
   return React.createElement(
@@ -61,6 +66,7 @@ function renderPlugin(data: PluginData, value: Edits) {
 describe("DataEditorPlugin", () => {
   beforeEach(() => {
     mocks.loadData.mockReset();
+    mocks.renderEditor.mockClear();
   });
 
   it("normalizes an unrecognized field type", () => {
@@ -212,6 +218,7 @@ describe("DataEditorPlugin", () => {
       );
     });
 
+    mocks.renderEditor.mockClear();
     result.rerender(
       renderPlugin(data, {
         edits: [{ rowIdx: 0, columnId: "name", value: "updated" }],
@@ -223,6 +230,90 @@ describe("DataEditorPlugin", () => {
         JSON.stringify([{ name: "updated" }]),
       );
     });
+    expect(mocks.renderEditor).toHaveBeenCalled();
+    for (const [props] of mocks.renderEditor.mock.calls) {
+      expect(props.data).toEqual([{ name: "updated" }]);
+    }
+  });
+
+  it("accumulates cell edits through the plugin value", async () => {
+    const data = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: [{ name: "original" }],
+      editableColumns: "all",
+    });
+    const Editor = () => {
+      const [value, setValue] = React.useState<Edits>({ edits: [] });
+      return renderPlugin(data, value, setValue);
+    };
+    render(React.createElement(Editor));
+    await screen.findByTestId("editor-data");
+
+    act(() => {
+      const onAddEdits = mocks.renderEditor.mock.lastCall?.[0].onAddEdits;
+      onAddEdits?.([{ rowIdx: 0, columnId: "name", value: "updated" }]);
+      onAddEdits?.([{ rowIdx: 1, columnId: "name", value: "appended" }]);
+    });
+
+    expect(screen.getByTestId("editor-data").textContent).toBe(
+      JSON.stringify([{ name: "updated" }, { name: "appended" }]),
+    );
+  });
+
+  it("removes the previous editor while loading a replacement schema", async () => {
+    const original = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: [{ name: "original", day: "2026-11-06" }],
+      editableColumns: "all",
+    });
+    const result = render(renderPlugin(original, { edits: [] }));
+    await screen.findByTestId("editor-data");
+    mocks.renderEditor.mockClear();
+
+    let resolveLoad: ((data: EditorRow[]) => void) | undefined;
+    mocks.loadData.mockImplementationOnce(
+      () =>
+        new Promise<EditorRow[]>((resolve) => {
+          resolveLoad = resolve;
+        }),
+    );
+    const replacement = DataEditorPlugin.validator.parse({
+      initialValue: { edits: [] },
+      label: null,
+      data: "replacement.csv",
+      columnNames: ["task", "done", "priority"],
+      columnTypes: { done: "boolean", priority: ["01", "02", "10"] },
+      editableColumns: ["task"],
+    });
+    result.rerender(
+      renderPlugin(replacement, {
+        edits: [{ rowIdx: 0, columnId: "task", value: "latest" }],
+      }),
+    );
+
+    expect(screen.queryByTestId("editor-data")).toBeNull();
+    expect(mocks.renderEditor).not.toHaveBeenCalled();
+    await act(async () => {
+      resolveLoad?.([{ task: "Review", done: "yes", priority: "01" }]);
+    });
+    await screen.findByTestId("editor-data");
+    expect(mocks.renderEditor).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        data: [{ task: "latest", done: true, priority: "01" }],
+        columnFields: new Map([
+          ["task", "string"],
+          ["done", "boolean"],
+          ["priority", "string"],
+        ]),
+        columnTypes: new Map<string, ColumnType>([
+          ["done", "boolean"],
+          ["priority", ["01", "02", "10"]],
+        ]),
+        editableColumns: ["task"],
+      }),
+    );
   });
 
   it("ignores a superseded async data load", async () => {

package/src/plugins/impl/__tests__/SliderPlugin.test.tsx

@@ -134,6 +134,46 @@ describe("SliderPlugin", () => {
     });
   };
 
+  it.each([
+    { step: 1 / 30, value: 35.86666666666667, expected: "35.87" },
+    { step: 0.1, value: 0.30000000000000004, expected: "0.3" },
+    { step: 0.25, value: 1.25, expected: "1.25" },
+    { step: 0.001, value: 1.234, expected: "1.234" },
+    { step: 1e-7, value: 3e-7, expected: "3.0e-7" },
+    { step: 1e-15, value: 3e-15, expected: "3.0e-15" },
+    { step: 1, value: 1.0001, expected: "1.0001", start: 0.0001 },
+    { step: undefined, value: 0.1234, expected: "0.1234" },
+    { step: 1, value: 1, expected: "1.234", steps: [1, 1.234, 2] },
+  ])(
+    "formats the displayed value for step $step",
+    ({ step, value, expected, start = 0, steps = null }) => {
+      const plugin = new SliderPlugin();
+      const setValue = vi.fn();
+      const props = createProps({
+        debounce: false,
+        includeInput: false,
+        setValue,
+      });
+      const { getByText } = render(
+        plugin.render({
+          ...props,
+          value,
+          data: {
+            ...props.data,
+            step,
+            start,
+            steps,
+            stop: 60,
+            showValue: true,
+          },
+        }),
+      );
+
+      expect(getByText(expected)).toBeVisible();
+      expect(setValue).not.toHaveBeenCalled();
+    },
+  );
+
   it("slider triggers setValue immediately when debounce is false", () => {
     const plugin = new SliderPlugin();
     const setValue = vi.fn();