@marimo-team/islands 0.18.3 → 0.18.4

package/dist/{vega-component-HUc7bIGs.js → vega-component-BFcH2SqR.js}

@@ -2,7 +2,7 @@ import { s as __toESM } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-BSzAiXXz.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-CNX0xYDF.js";
 import "./Combination-DnWHe36P.js";
-import { C as CircleQuestionMark, h as asRemoteURL, i as Alert, n as useDeepCompareMemoize, o as AlertTitle, s as isValid, t as arrow } from "./formats-4m4HuHTj.js";
+import { S as CircleQuestionMark, a as AlertTitle, m as asRemoteURL, n as useDeepCompareMemoize, o as isValid, r as Alert, t as arrow } from "./formats-Bi_tbdwB.js";
 import "./clsx-D2KVTYnW.js";
 import { l as Events } from "./button-XnD6ylpt.js";
 import { o as Objects, s as Logger } from "./hotkeys-CwkyZ6ZF.js";
@@ -509,8 +509,8 @@ async function resolveVegaSpecData(e) {
     } catch {
       return e2;
     }
-    let O = await vegaLoadData(E2.href, e2.data.format);
-    return w[E2.pathname] = O, {
+    let D = await vegaLoadData(E2.href, e2.data.format);
+    return w[E2.pathname] = D, {
       ...e2,
       data: { name: E2.pathname }
     };
@@ -540,17 +540,17 @@ var VegaComponent = (e) => {
     spec: P,
     embedOptions: A
   }), w[5] = D, w[6] = A, w[7] = O, w[8] = P, w[9] = E, w[10] = T, w[11] = I) : I = w[11], I;
-}, LoadedVegaComponent = ({ value: e, setValue: w, chartSelection: T, fieldSelection: D, spec: M, embedOptions: N }) => {
+}, LoadedVegaComponent = ({ value: e, setValue: w, chartSelection: T, fieldSelection: O, spec: A, embedOptions: N }) => {
   let { theme: L } = useTheme(), R = (0, import_react.useRef)(null), z = (0, import_react.useRef)(void 0), [B, V] = (0, import_react.useState)(), H = (0, import_react.useMemo)(() => N && "actions" in N ? N.actions : {
     source: false,
     compiled: false
-  }, [N]), U = useDeepCompareMemoize(M), W = (0, import_react.useMemo)(() => makeSelectable(fixRelativeUrl(U), {
+  }, [N]), U = useDeepCompareMemoize(A), W = (0, import_react.useMemo)(() => makeSelectable(fixRelativeUrl(U), {
     chartSelection: T,
-    fieldSelection: D
+    fieldSelection: O
   }), [
     U,
     T,
-    D
+    O
   ]), G = (0, import_react.useMemo)(() => getSelectionParamNames(W), [W]), K = useEvent_default((T2) => {
     w({
       ...e,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.18.3",
+  "version": "0.18.4",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/data-table/context-menu.tsx

@@ -95,11 +95,11 @@ export const CellContextMenu = <TData,>({
   const column = cell.column;
   const canFilter = column.getCanFilter() && column.columnDef.meta?.filterType;
 
-  const handleFilterCell = () => {
+  const handleFilterCell = (operator: "in" | "not_in") => {
     column.setFilterValue(
       Filter.select({
         options: [cell.getValue()],
-        operator: "in",
+        operator,
       }),
     );
   };
@@ -119,10 +119,14 @@ export const CellContextMenu = <TData,>({
       {canFilter && (
         <>
           <ContextMenuSeparator />
-          <ContextMenuItem onClick={handleFilterCell}>
+          <ContextMenuItem onClick={() => handleFilterCell("in")}>
             <FilterIcon className="mo-dropdown-icon h-3 w-3" />
             Filter by this value
           </ContextMenuItem>
+          <ContextMenuItem onClick={() => handleFilterCell("not_in")}>
+            <FilterIcon className="mo-dropdown-icon h-3 w-3" />
+            Remove rows with this value
+          </ContextMenuItem>
         </>
       )}
     </ContextMenuContent>

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

@@ -96,7 +96,8 @@ function formatValue(value: ColumnFilterValue, timeFormatter: DateFormatter) {
     const stringifiedOptions = value.options.map((o) =>
       stringifyUnknownValue({ value: o }),
     );
-    return `is in [${stringifiedOptions.join(", ")}]`;
+    const operator = value.operator === "in" ? "is in" : "not in";
+    return `${operator} [${stringifiedOptions.join(", ")}]`;
   }
   if (value.type === "text") {
     return `contains "${value.text}"`;

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

@@ -7,6 +7,7 @@ import type { ConditionType } 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";
+import { Logger } from "@/utils/Logger";
 
 declare module "@tanstack/react-table" {
   //allows us to define custom properties for our columns
@@ -192,12 +193,20 @@ export function filterToFilterCondition(
       }
 
       return [];
-    case "select":
+    case "select": {
+      let operator = filter.operator;
+      if (filter.operator !== "in" && filter.operator !== "not_in") {
+        Logger.warn("Invalid operator for select filter", {
+          operator: filter.operator,
+        });
+        operator = "in"; // default to in operator
+      }
       return {
         column_id: columnId,
-        operator: "in",
+        operator,
         value: filter.options,
       };
+    }
 
     default:
       assertNever(filter);

package/src/components/editor/cell/CreateCellButton.tsx

@@ -46,7 +46,7 @@ export const CreateCellButton = ({
       <div>{baseTooltipContent}</div>
       <div className="text-xs text-muted-foreground font-medium pt-1 -mt-2 border-t border-border">
         {<MinimalHotkeys shortcut={shortcut} className="inline" />}{" "}
-        <span>to auto insert a cell</span>
+        <span>for other cell types</span>
       </div>
     </div>
   );
@@ -81,7 +81,9 @@ export const CreateCellButton = ({
   };
 
   const handleButtonClick = (e: React.MouseEvent) => {
-    if (oneClickShortcut === "shift" ? e.shiftKey : e.metaKey || e.ctrlKey) {
+    const hasModifier =
+      oneClickShortcut === "shift" ? e.shiftKey : e.metaKey || e.ctrlKey;
+    if (!hasModifier) {
       e.preventDefault();
       e.stopPropagation();
       addPythonCell();
@@ -123,7 +125,7 @@ export const CreateCellButton = ({
         >
           <Tooltip content={finalTooltipContent}>
             <PlusIcon
-              strokeWidth={4}
+              strokeWidth={3}
               size={14}
               className="opacity-60 hover:opacity-90"
             />

package/src/components/editor/cell/collapse.tsx

@@ -44,9 +44,9 @@ export const CollapseToggle: React.FC<Props> = (props) => {
 
 const Arrow = ({ isCollapsed }: { isCollapsed: boolean }) => {
   return isCollapsed ? (
-    <ChevronRightIcon className="w-5 h-5 shrink-0" />
+    <ChevronRightIcon className="w-5 h-5 shrink-0 opacity-60" strokeWidth={2} />
   ) : (
-    <ChevronDownIcon className="w-5 h-5 shrink-0" />
+    <ChevronDownIcon className="w-5 h-5 shrink-0 opacity-60" strokeWidth={2} />
   );
 };
 

package/src/components/editor/notebook-banner.tsx

@@ -26,7 +26,7 @@ export const NotebookBanner: React.FC<Props> = ({ width }) => {
     <div
       className={cn(
         "flex flex-col gap-4 mb-5 print:hidden",
-        width === "columns" && "sticky left-12 w-full max-w-[80vw]",
+        width === "columns" && "w-full max-w-[80vw]",
       )}
     >
       {banners.map((banner) => (

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -2,8 +2,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { AnyWidget, Experimental } from "@anywidget/types";
-import { get, isEqual, set } from "lodash-es";
+import { isEqual } from "lodash-es";
 import { useEffect, useMemo, useRef } from "react";
+import useEvent from "react-use-event-hook";
 import { z } from "zod";
 import { MarimoIncomingMessageEvent } from "@/core/dom/events";
 import { asRemoteURL } from "@/core/runtime/config";
@@ -17,10 +18,13 @@ import { createPlugin } from "@/plugins/core/builder";
 import { rpc } from "@/plugins/core/rpc";
 import type { IPluginProps } from "@/plugins/types";
 import {
-  type Base64String,
-  byteStringToBinary,
-  typedAtob,
-} from "@/utils/json/base64";
+  decodeFromWire,
+  isWireFormat,
+  serializeBuffersToBase64,
+  type WireFormat,
+} from "@/utils/data-views";
+import { prettyError } from "@/utils/errors";
+import type { Base64String } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 import { ErrorBanner } from "../common/error-banner";
 import { MODEL_MANAGER, Model } from "./model";
@@ -29,44 +33,56 @@ interface Data {
   jsUrl: string;
   jsHash: string;
   css?: string | null;
-  bufferPaths?: (string | number)[][] | null;
-  initialValue: T;
 }
 
-type T = Record<string, any>;
+type T = Record<string, unknown>;
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 type PluginFunctions = {
-  send_to_widget: <T>(req: { content?: any }) => Promise<null | undefined>;
+  send_to_widget: <T>(req: {
+    content: unknown;
+    buffers: Base64String[];
+  }) => Promise<null | undefined>;
 };
 
-export const AnyWidgetPlugin = createPlugin<T>("marimo-anywidget")
+export const AnyWidgetPlugin = createPlugin<WireFormat<T>>("marimo-anywidget")
   .withData(
     z.object({
       jsUrl: z.string(),
       jsHash: z.string(),
       css: z.string().nullish(),
-      bufferPaths: z
-        .array(z.array(z.union([z.string(), z.number()])))
-        .nullish(),
-      initialValue: z.object({}).passthrough(),
     }),
   )
   .withFunctions<PluginFunctions>({
     send_to_widget: rpc
-      .input(z.object({ content: z.any() }))
+      .input(
+        z.object({
+          content: z.unknown(),
+          buffers: z.array(z.string().transform((v) => v as Base64String)),
+        }),
+      )
       .output(z.null().optional()),
   })
   .renderer((props) => <AnyWidgetSlot {...props} />);
 
-type Props = IPluginProps<T, Data, PluginFunctions>;
-
-const AnyWidgetSlot = (props: Props) => {
-  const { css, jsUrl, jsHash, bufferPaths } = props.data;
+const AnyWidgetSlot = (
+  props: IPluginProps<WireFormat<T>, Data, PluginFunctions>,
+) => {
+  const { css, jsUrl, jsHash } = props.data;
 
+  // Decode wire format { state, bufferPaths, buffers } to state with DataViews
   const valueWithBuffers = useMemo(() => {
-    return resolveInitialValue(props.value, bufferPaths ?? []);
-  }, [props.value, bufferPaths]);
+    if (isWireFormat(props.value)) {
+      const decoded = decodeFromWire(props.value);
+      Logger.debug("AnyWidget decoded wire format:", {
+        bufferPaths: props.value.bufferPaths,
+        buffersCount: props.value.buffers?.length,
+        decodedKeys: Object.keys(decoded),
+      });
+      return decoded;
+    }
+    Logger.warn("AnyWidget value is not wire format:", props.value);
+    return props.value;
+  }, [props.value]);
 
   // JS is an ESM file with a render function on it
   // export function render({ model, el }) {
@@ -135,6 +151,12 @@ const AnyWidgetSlot = (props: Props) => {
     };
   }, [css, props.host]);
 
+  // Wrap setValue to serialize DataViews back to base64 before sending
+  // Structure matches ipywidgets protocol: { state, bufferPaths, buffers }
+  const wrappedSetValue = useEvent((partialValue: Partial<T>) =>
+    props.setValue(serializeBuffersToBase64(partialValue)),
+  );
+
   if (error) {
     return <ErrorBanner error={error} />;
   }
@@ -162,6 +184,7 @@ const AnyWidgetSlot = (props: Props) => {
       key={key}
       {...props}
       widget={module.default}
+      setValue={wrappedSetValue}
       value={valueWithBuffers}
     />
   );
@@ -191,10 +214,19 @@ async function runAnyWidgetModule(
   const widget =
     typeof widgetDef === "function" ? await widgetDef() : widgetDef;
   await widget.initialize?.({ model, experimental });
-  const unsub = await widget.render?.({ model, el, experimental });
-  return () => {
-    unsub?.();
-  };
+  try {
+    const unsub = await widget.render?.({ model, el, experimental });
+    return () => {
+      unsub?.();
+    };
+  } catch (error) {
+    Logger.error("Error rendering anywidget", error);
+    el.classList.add("text-error");
+    el.innerHTML = `Error rendering anywidget: ${prettyError(error)}`;
+    return () => {
+      // No-op
+    };
+  }
 }
 
 function isAnyWidgetModule(mod: any): mod is { default: AnyWidget } {
@@ -218,6 +250,13 @@ function hasModelId(message: unknown): message is { model_id: string } {
   );
 }
 
+interface Props
+  extends Omit<IPluginProps<T, Data, PluginFunctions>, "setValue"> {
+  widget: AnyWidget;
+  value: T;
+  setValue: (value: Partial<T>) => void;
+}
+
 const LoadedSlot = ({
   value,
   setValue,
@@ -228,15 +267,9 @@ const LoadedSlot = ({
 }: Props & { widget: AnyWidget }) => {
   const htmlRef = useRef<HTMLDivElement>(null);
 
+  // value is already decoded from wire format
   const model = useRef<Model<T>>(
-    new Model(
-      // Merge the initial value with the current value
-      // since we only send partial updates to the backend
-      { ...data.initialValue, ...value },
-      setValue,
-      functions.send_to_widget,
-      getDirtyFields(value, data.initialValue),
-    ),
+    new Model(value, setValue, functions.send_to_widget, new Set()),
   );
 
   // Listen to incoming messages
@@ -289,16 +322,3 @@ export const visibleForTesting = {
   isAnyWidgetModule,
   getDirtyFields,
 };
-
-export function resolveInitialValue(
-  raw: Record<string, any>,
-  bufferPaths: readonly (readonly (string | number)[])[],
-) {
-  const out = structuredClone(raw);
-  for (const bufferPath of bufferPaths) {
-    const base64String: Base64String = get(raw, bufferPath);
-    const bytes = byteStringToBinary(typedAtob(base64String));
-    set(out, bufferPath, new DataView(bytes.buffer));
-  }
-  return out;
-}

package/src/plugins/impl/anywidget/__tests__/AnyWidgetPlugin.test.tsx

@@ -5,11 +5,7 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
 import { TestUtils } from "@/__tests__/test-helpers";
 import type { UIElementId } from "@/core/cells/ids";
 import { MarimoIncomingMessageEvent } from "@/core/dom/events";
-import {
-  getDirtyFields,
-  resolveInitialValue,
-  visibleForTesting,
-} from "../AnyWidgetPlugin";
+import { getDirtyFields, visibleForTesting } from "../AnyWidgetPlugin";
 import { Model } from "../model";
 
 const { LoadedSlot } = visibleForTesting;
@@ -132,6 +128,7 @@ describe("LoadedSlot", () => {
         message: {
           method: "update",
           state: { count: 10 },
+          buffer_paths: [],
         },
         buffers: [],
       },
@@ -183,55 +180,3 @@ describe("LoadedSlot", () => {
     });
   });
 });
-
-describe("resolveInitialValue", () => {
-  it("should convert base64 strings to DataView at specified paths", () => {
-    const result = resolveInitialValue(
-      {
-        a: 10,
-        b: "aGVsbG8=", // "hello" in base64
-        c: [1, "d29ybGQ="], // "world" in base64
-        d: {
-          foo: "bWFyaW1vCg==", // "marimo" in base64
-          baz: 20,
-        },
-      },
-      [["b"], ["c", 1], ["d", "foo"]],
-    );
-
-    expect(result).toMatchInlineSnapshot(`
-      {
-        "a": 10,
-        "b": DataView [
-          104,
-          101,
-          108,
-          108,
-          111,
-        ],
-        "c": [
-          1,
-          DataView [
-            119,
-            111,
-            114,
-            108,
-            100,
-          ],
-        ],
-        "d": {
-          "baz": 20,
-          "foo": DataView [
-            109,
-            97,
-            114,
-            105,
-            109,
-            111,
-            10,
-          ],
-        },
-      }
-    `);
-  });
-});

package/src/plugins/impl/anywidget/__tests__/model.test.ts

@@ -9,6 +9,7 @@ import {
   vi,
 } from "vitest";
 import { TestUtils } from "@/__tests__/test-helpers";
+import type { Base64String } from "@/utils/json/base64";
 import {
   type AnyWidgetMessage,
   handleWidgetMessage,
@@ -23,7 +24,10 @@ describe("Model", () => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   let onChange: (value: any) => void;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let sendToWidget: (req: { content?: any }) => Promise<null | undefined>;
+  let sendToWidget: (req: {
+    content: unknown;
+    buffers: Base64String[];
+  }) => Promise<null | undefined>;
 
   beforeEach(() => {
     onChange = vi.fn();
@@ -72,7 +76,7 @@ describe("Model", () => {
       });
     });
 
-    it("should send all dirty fields", () => {
+    it("should clear dirty fields after save", () => {
       model.set("foo", "new value");
       model.save_changes();
 
@@ -83,14 +87,13 @@ describe("Model", () => {
       model.set("bar", 456);
       model.save_changes();
 
+      // After clearing, only the newly changed field is sent
       expect(onChange).toHaveBeenCalledWith({
-        foo: "new value",
         bar: 456,
       });
     });
 
-    // Skip because we don't clear the dirty fields after save
-    it.skip("should clear dirty fields after save", () => {
+    it("should not call onChange when no dirty fields", () => {
       model.set("foo", "new value");
       model.save_changes();
       model.save_changes(); // Second save should not call onChange
@@ -144,21 +147,16 @@ describe("Model", () => {
       const callback = vi.fn();
       model.send({ test: true }, callback);
 
-      expect(sendToWidget).toHaveBeenCalledWith({ content: { test: true } });
+      expect(sendToWidget).toHaveBeenCalledWith({
+        content: {
+          state: { test: true },
+          bufferPaths: [],
+        },
+        buffers: [],
+      });
       await TestUtils.nextTick(); // flush
       expect(callback).toHaveBeenCalledWith(null);
     });
-
-    it("should warn when buffers are provided", () => {
-      const consoleSpy = vi.spyOn(console, "warn").mockImplementation(() => {
-        // noop
-      });
-      model.send({ test: true }, null, [new ArrayBuffer(8)]);
-
-      expect(consoleSpy).toHaveBeenCalledWith(
-        "buffers not supported in marimo anywidget.send",
-      );
-    });
   });
 
   describe("widget_manager", () => {
@@ -228,7 +226,11 @@ describe("Model", () => {
     it("should handle update messages", () => {
       model.receiveCustomMessage({
         method: "update",
-        state: { foo: "updated", bar: 789 },
+        state: {
+          foo: "updated",
+          bar: 789,
+        },
+        buffer_paths: [],
       });
 
       expect(model.get("foo")).toBe("updated");
@@ -333,7 +335,9 @@ describe("ModelManager", () => {
 
     const updateMessage: AnyWidgetMessage = {
       method: "update",
-      state: { count: 1 },
+      state: {
+        count: 1,
+      },
       buffer_paths: [],
     };