@marimo-team/islands 0.18.2 → 0.18.4

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

@@ -2,14 +2,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { AnyModel } from "@anywidget/types";
-import { dequal } from "dequal";
 import { debounce } from "lodash-es";
 import { z } from "zod";
 import { getRequestClient } from "@/core/network/requests";
 import { assertNever } from "@/utils/assertNever";
 import { Deferred } from "@/utils/Deferred";
-import { updateBufferPaths } from "@/utils/data-views";
+import { decodeFromWire, serializeBuffersToBase64 } from "@/utils/data-views";
 import { throwNotImplemented } from "@/utils/functions";
+import type { Base64String } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 
 export type EventHandler = (...args: any[]) => void;
@@ -63,28 +63,30 @@ export const MODEL_MANAGER = new ModelManager();
 
 export class Model<T extends Record<string, any>> implements AnyModel<T> {
   private ANY_CHANGE_EVENT = "change";
-  private dirtyFields;
+  private dirtyFields: Map<keyof T, unknown>;
   public static _modelManager: ModelManager = MODEL_MANAGER;
   private data: T;
   private onChange: (value: Partial<T>) => void;
   private sendToWidget: (req: {
-    content?: any;
-    buffers?: ArrayBuffer[] | ArrayBufferView[];
+    content: unknown;
+    buffers: Base64String[];
   }) => Promise<null | undefined>;
 
   constructor(
     data: T,
     onChange: (value: Partial<T>) => void,
     sendToWidget: (req: {
-      content?: any;
-      buffers?: ArrayBuffer[] | ArrayBufferView[];
+      content: unknown;
+      buffers: Base64String[];
     }) => Promise<null | undefined>,
     initialDirtyFields: Set<keyof T>,
   ) {
     this.data = data;
     this.onChange = onChange;
     this.sendToWidget = sendToWidget;
-    this.dirtyFields = new Set(initialDirtyFields);
+    this.dirtyFields = new Map(
+      [...initialDirtyFields].map((key) => [key, this.data[key]]),
+    );
   }
 
   private listeners: Record<string, Set<EventHandler>> = {};
@@ -106,12 +108,16 @@ export class Model<T extends Record<string, any>> implements AnyModel<T> {
   send(
     content: any,
     callbacks?: any,
-    buffers?: ArrayBuffer[] | ArrayBufferView[],
+    _buffers?: ArrayBuffer[] | ArrayBufferView[],
   ): void {
-    if (buffers) {
-      Logger.warn("buffers not supported in marimo anywidget.send");
-    }
-    this.sendToWidget({ content, buffers }).then(callbacks);
+    const { state, bufferPaths, buffers } = serializeBuffersToBase64(content);
+    this.sendToWidget({
+      content: {
+        state: state,
+        bufferPaths: bufferPaths,
+      },
+      buffers: buffers,
+    }).then(callbacks);
   }
 
   widget_manager = {
@@ -134,7 +140,7 @@ export class Model<T extends Record<string, any>> implements AnyModel<T> {
 
   set<K extends keyof T>(key: K, value: T[K]): void {
     this.data = { ...this.data, [key]: value };
-    this.dirtyFields.add(key);
+    this.dirtyFields.set(key, value);
     this.emit(`change:${key as K & string}`, value);
     this.emitAnyChange();
   }
@@ -143,24 +149,25 @@ export class Model<T extends Record<string, any>> implements AnyModel<T> {
     if (this.dirtyFields.size === 0) {
       return;
     }
-    const partialData: Partial<T> = {};
-    this.dirtyFields.forEach((key) => {
-      partialData[key] = this.data[key];
-    });
-    // We don't clear the dirty fields here, because we want
-    // to send all fields that different from the initial value (have ever been changed).
-    // This is less performant, but more correct, because the backend
-    // stores the last value sent, and not a merge of the values.
-    // When the backend knows to merge the partial updates, then we can clear
-    // the dirty fields.
-    // this.dirtyFields.clear();
+    // Only send the dirty fields, not the entire state.
+    const partialData = Object.fromEntries(
+      this.dirtyFields.entries(),
+    ) as Partial<T>;
+
+    // Clear the dirty fields to avoid sending again.
+    this.dirtyFields.clear();
     this.onChange(partialData);
   }
 
   updateAndEmitDiffs(value: T): void {
+    if (value == null) {
+      return;
+    }
+
     Object.keys(value).forEach((key) => {
       const k = key as keyof T;
-      if (!dequal(this.data[k], value[k])) {
+      // Shallow equal since these can be large objects
+      if (this.data[k] !== value[k]) {
         this.set(k, value[k]);
       }
     });
@@ -170,13 +177,22 @@ export class Model<T extends Record<string, any>> implements AnyModel<T> {
    * When receiving a message from the backend.
    * We want to notify all listeners with `msg:custom`
    */
-  receiveCustomMessage(message: any, buffers: readonly DataView[] = []): void {
+  receiveCustomMessage(
+    message: unknown,
+    buffers: readonly DataView[] = [],
+  ): void {
     const response = AnyWidgetMessageSchema.safeParse(message);
     if (response.success) {
       const data = response.data;
       switch (data.method) {
         case "update":
-          this.updateAndEmitDiffs(data.state as T);
+          this.updateAndEmitDiffs(
+            decodeFromWire<T>({
+              state: data.state as T,
+              bufferPaths: data.buffer_paths ?? [],
+              buffers,
+            }),
+          );
           break;
         case "custom":
           this.listeners["msg:custom"]?.forEach((cb) =>
@@ -184,7 +200,19 @@ export class Model<T extends Record<string, any>> implements AnyModel<T> {
           );
           break;
         case "open":
-          this.updateAndEmitDiffs(data.state as T);
+          this.updateAndEmitDiffs(
+            decodeFromWire<T>({
+              state: data.state as T,
+              bufferPaths: data.buffer_paths ?? [],
+              buffers,
+            }),
+          );
+          break;
+        case "echo_update":
+          // We don't need to do anything with this message
+          break;
+        default:
+          Logger.error("[anywidget] Unknown message method", data.method);
           break;
       }
     } else {
@@ -269,7 +297,7 @@ export async function handleWidgetMessage({
 
   if (msg.method === "custom") {
     const model = await modelManager.get(modelId);
-    model.receiveCustomMessage(msg);
+    model.receiveCustomMessage(msg, buffers);
     return;
   }
 
@@ -279,24 +307,23 @@ export async function handleWidgetMessage({
   }
 
   const { method, state, buffer_paths = [] } = msg;
-  const stateWithBuffers = updateBufferPaths(state, buffer_paths, buffers);
+  const stateWithBuffers = decodeFromWire({
+    state,
+    bufferPaths: buffer_paths,
+    buffers,
+  });
 
   if (method === "open") {
     const handleDataChange = (changeData: Record<string, any>) => {
-      if (buffer_paths) {
-        Logger.warn(
-          "Changed data with buffer paths may not be supported",
-          changeData,
-        );
-        // TODO: we may want to extract/undo DataView, to get back buffers and buffer_paths
-      }
+      const { state, buffers, bufferPaths } =
+        serializeBuffersToBase64(changeData);
       getRequestClient().sendModelValue({
         modelId: modelId,
         message: {
-          state: changeData,
-          bufferPaths: [],
+          state,
+          bufferPaths,
         },
-        buffers: [],
+        buffers,
       });
     };
 

package/src/plugins/impl/data-frames/utils/__tests__/operators.test.ts

@@ -100,12 +100,14 @@ describe("isConditionValueValid", () => {
     );
     expect(isConditionValueValid("contains", "test")).toBe(true);
     expect(isConditionValueValid("in", ["test"])).toBe(true);
+    expect(isConditionValueValid("not_in", ["test"])).toBe(true);
   });
 
   it("should return false if the value is not valid according to the schema for the given operator", () => {
     expect(isConditionValueValid("==", "not a number")).toBe(false);
     expect(isConditionValueValid("contains", 123)).toBe(false);
     expect(isConditionValueValid("in", "not an array")).toBe(false);
+    expect(isConditionValueValid("not_in", "not an array")).toBe(false);
   });
 
   it("should return true if the operator does not require a value", () => {

package/src/plugins/impl/data-frames/utils/operators.ts

@@ -58,6 +58,7 @@ export const STRING_OPERATORS = {
   starts_with: [Schema.string],
   ends_with: [Schema.string],
   in: [Schema.stringMultiColumnValues],
+  not_in: [Schema.stringMultiColumnValues],
   is_null: [],
   is_not_null: [],
 };

package/src/plugins/impl/vega/vega.css

@@ -8,6 +8,11 @@
   @media (min-width: 500px) {
     min-width: 300px;
   }
+
+  /* For vega embeds in slots, reset the styles to let the user set the width */
+  @container style(--slot: true) {
+    min-width: unset;
+  }
 }
 
 .vega-embed > .chart-wrapper {

package/src/plugins/layout/NavigationMenuPlugin.tsx

@@ -113,28 +113,30 @@ const NavMenuComponent = ({
   const renderMenuItem = (item: MenuItem | MenuItemGroup) => {
     if ("items" in item) {
       return orientation === "horizontal" ? (
-        <NavigationMenuItem key={item.label}>
-          <NavigationMenuTrigger>
-            {renderHTML({ html: item.label })}
-          </NavigationMenuTrigger>
-          <NavigationMenuContent>
-            <NavigationMenuList>
-              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                {item.items.map((subItem) => (
-                  <ListItem
-                    key={subItem.label}
-                    label={subItem.label}
-                    href={preserveQueryParams(subItem.href)}
-                    target={target(subItem.href)}
-                  >
-                    {subItem.description &&
-                      renderHTML({ html: subItem.description })}
-                  </ListItem>
-                ))}
-              </ul>
-            </NavigationMenuList>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
+        <NavigationMenu orientation="horizontal" key={item.label}>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>
+                {renderHTML({ html: item.label })}
+              </NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                  {item.items.map((subItem) => (
+                    <ListItem
+                      key={subItem.label}
+                      label={subItem.label}
+                      href={preserveQueryParams(subItem.href)}
+                      target={target(subItem.href)}
+                    >
+                      {subItem.description &&
+                        renderHTML({ html: subItem.description })}
+                    </ListItem>
+                  ))}
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
       ) : (
         <NavigationMenuItem key={item.label}>
           <div

package/src/plugins/layout/StatPlugin.tsx

@@ -4,8 +4,11 @@ import { TriangleIcon } from "lucide-react";
 import type { JSX } from "react";
 import { useLocale } from "react-aria";
 import { z } from "zod";
+import { getMimeValues } from "@/components/data-table/mime-cell";
 import { cn } from "@/utils/cn";
+import { Logger } from "@/utils/Logger";
 import { prettyNumber } from "@/utils/numbers";
+import { renderHTML } from "../core/RenderHTML";
 import type {
   IStatelessPlugin,
   IStatelessPluginProps,
@@ -18,6 +21,7 @@ interface Data {
   bordered?: boolean;
   direction?: "increase" | "decrease";
   target_direction?: "increase" | "decrease";
+  slot?: object;
 }
 
 export class StatPlugin implements IStatelessPlugin<Data> {
@@ -30,6 +34,7 @@ export class StatPlugin implements IStatelessPlugin<Data> {
     bordered: z.boolean().default(false),
     direction: z.enum(["increase", "decrease"]).optional(),
     target_direction: z.enum(["increase", "decrease"]).default("increase"),
+    slot: z.any().optional(),
   });
 
   render({ data }: IStatelessPluginProps<Data>): JSX.Element {
@@ -44,6 +49,7 @@ export const StatComponent: React.FC<Data> = ({
   bordered,
   direction,
   target_direction,
+  slot,
 }) => {
   const { locale } = useLocale();
 
@@ -71,39 +77,53 @@ export const StatComponent: React.FC<Data> = ({
   const fillColor = onTarget ? "var(--grass-8)" : "var(--red-8)";
   const strokeColor = onTarget ? "var(--grass-9)" : "var(--red-9)";
 
+  const renderSlot = () => {
+    const mimeValues = getMimeValues(slot);
+    if (mimeValues?.[0]) {
+      const { mimetype, data } = mimeValues[0];
+      if (mimetype !== "text/html") {
+        Logger.warn(`Expected text/html, got ${mimetype}`);
+      }
+      return renderHTML({ html: data, alwaysSanitizeHtml: true });
+    }
+  };
+
   return (
     <div
       className={cn(
-        "text-card-foreground",
+        "text-card-foreground p-6",
         bordered && "rounded-xl border shadow bg-card",
       )}
     >
       {label && (
-        <div className="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
+        <div className="flex flex-row items-center justify-between space-y-0 pb-2">
           <h3 className="tracking-tight text-sm font-medium">{label}</h3>
         </div>
       )}
-      <div className="p-6 pt-0">
-        <div className="text-2xl font-bold">{renderPrettyValue()}</div>
-        {caption && (
-          <p className="pt-1 text-xs text-muted-foreground flex align-center">
-            {direction === "increase" && (
-              <TriangleIcon
-                className="w-4 h-4 mr-1 p-0.5"
-                fill={fillColor}
-                stroke={strokeColor}
-              />
-            )}
-            {direction === "decrease" && (
-              <TriangleIcon
-                className="w-4 h-4 mr-1 p-0.5 transform rotate-180"
-                fill={fillColor}
-                stroke={strokeColor}
-              />
-            )}
-            {caption}
-          </p>
-        )}
+      <div className="pt-0 flex flex-row gap-3.5">
+        <div>
+          <div className="text-2xl font-bold">{renderPrettyValue()}</div>
+          {caption && (
+            <p className="pt-1 text-xs text-muted-foreground flex align-center whitespace-nowrap">
+              {direction === "increase" && (
+                <TriangleIcon
+                  className="w-4 h-4 mr-1 p-0.5"
+                  fill={fillColor}
+                  stroke={strokeColor}
+                />
+              )}
+              {direction === "decrease" && (
+                <TriangleIcon
+                  className="w-4 h-4 mr-1 p-0.5 transform rotate-180"
+                  fill={fillColor}
+                  stroke={strokeColor}
+                />
+              )}
+              {caption}
+            </p>
+          )}
+        </div>
+        {slot && <div className="[--slot:true]">{renderSlot()}</div>}
       </div>
     </div>
   );