@marimo-team/frontend 0.16.2 → 0.16.3

package/src/core/islands/main.ts

@@ -16,7 +16,7 @@ import { renderHTML } from "@/plugins/core/RenderHTML";
 import { initializePlugins } from "@/plugins/plugins";
 import { logNever } from "@/utils/assertNever";
 import { Functions } from "@/utils/functions";
-import type { Base64String } from "@/utils/json/base64";
+import { safeExtractSetUIElementMessageBuffers } from "@/utils/json/base64";
 import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
 import { Logger } from "@/utils/Logger";
 import {
@@ -145,7 +145,7 @@ export async function initialize() {
         UI_ELEMENT_REGISTRY.broadcastMessage(
           msg.data.ui_element as UIElementId,
           msg.data.message,
-          msg.data.buffers as Base64String[],
+          safeExtractSetUIElementMessageBuffers(msg.data),
         );
         return;
 

package/src/core/islands/parse.ts

@@ -88,9 +88,7 @@ export function parseMarimoIslandApps(): MarimoIslandApp[] {
   return [...apps.values()];
 }
 
-export function createMarimoFile(app: {
-  cells: Array<{ code: string }>;
-}): string {
+export function createMarimoFile(app: { cells: { code: string }[] }): string {
   const lines = [
     "import marimo",
     "app = marimo.App()",

package/src/core/kernel/messages.ts

@@ -24,7 +24,7 @@ export type OutputChannel = schemas["CellChannel"];
 export type CellOutput = schemas["CellOutput"];
 export type MarimoError = Extract<
   CellOutput["data"],
-  Array<{ type: string }>
+  { type: string }[]
 >[number];
 export type OutputMessage = schemas["CellOutput"];
 export type CompletionOption = schemas["CompletionResult"]["options"][0];

package/src/core/network/CachingRequestRegistry.ts

@@ -0,0 +1,74 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { LRUCache } from "@/utils/lru";
+import type {
+  DeferredRequestRegistry,
+  RequestId,
+} from "./DeferredRequestRegistry";
+
+type ToKey<REQ> = (request: REQ) => string;
+
+interface CachingOptions<REQ> {
+  toKey?: ToKey<REQ>;
+  maxSize?: number;
+}
+
+/**
+ * Light wrapper adding memoization and in-flight de-duplication on top of
+ * DeferredRequestRegistry, keyed by a string representation of the request.
+ */
+export class CachingRequestRegistry<REQ, RES> {
+  private delegate: DeferredRequestRegistry<REQ, RES>;
+  private toKey: ToKey<REQ>;
+  private cache: LRUCache<string, Promise<RES>>;
+
+  static jsonStringifySortKeys<T>(): ToKey<T> {
+    return (o: T) => {
+      if (typeof o !== "object" || o === null) {
+        return String(o);
+      }
+      return JSON.stringify(o, Object.keys(o).sort(), 2);
+    };
+  }
+
+  constructor(
+    delegate: DeferredRequestRegistry<REQ, RES>,
+    options: CachingOptions<REQ> = {},
+  ) {
+    this.delegate = delegate;
+    this.toKey =
+      options.toKey ?? CachingRequestRegistry.jsonStringifySortKeys();
+    const maxSize = options.maxSize ?? 128;
+    this.cache = new LRUCache<string, Promise<RES>>(maxSize);
+  }
+
+  /**
+   * Resolve via cache if present, else delegate; de-duplicates concurrent
+   * requests with the same key and stores successful results in the cache.
+   */
+  public request(req: REQ): Promise<RES> {
+    const key = this.toKey(req);
+
+    const cached = this.cache.get(key);
+    if (cached !== undefined) {
+      return cached;
+    }
+
+    const promise = this.delegate.request(req);
+    this.cache.set(key, promise);
+    return promise.catch((err) => {
+      this.cache.delete(key);
+      throw err;
+    });
+  }
+
+  // Path through to the delegate
+  public resolve(requestId: RequestId, response: RES) {
+    this.delegate.resolve(requestId, response);
+  }
+
+  // Path through to the delegate
+  public reject(requestId: RequestId, error: Error) {
+    this.delegate.reject(requestId, error);
+  }
+}

package/src/core/network/DeferredRequestRegistry.ts

@@ -45,7 +45,9 @@ export class DeferredRequestRegistry<REQ, RES> {
   async request(opts: REQ): Promise<RES> {
     if (this.opts.resolveExistingRequests) {
       const result = this.opts.resolveExistingRequests();
-      this.requests.forEach((deferred) => deferred.resolve(result));
+      for (const deferred of this.requests.values()) {
+        deferred.resolve(result);
+      }
       this.requests.clear();
     }
 

package/src/core/network/__tests__/CachingRequestRegistry.test.ts

@@ -0,0 +1,73 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { CachingRequestRegistry } from "../CachingRequestRegistry";
+import {
+  DeferredRequestRegistry,
+  type RequestId,
+} from "../DeferredRequestRegistry";
+
+vi.mock("@/utils/uuid", () => ({
+  generateUUID: vi.fn().mockReturnValue("uuid"),
+}));
+
+describe("CachingRequestRegistry", () => {
+  const REQUEST_ID = "uuid" as RequestId;
+  let makeRequestMock = vi.fn();
+  let delegate: DeferredRequestRegistry<unknown, unknown>;
+  let caching: CachingRequestRegistry<unknown, unknown>;
+
+  beforeEach(() => {
+    makeRequestMock = vi.fn().mockResolvedValue(undefined);
+    delegate = new DeferredRequestRegistry("operation", makeRequestMock);
+    caching = new CachingRequestRegistry(delegate);
+  });
+
+  it("should cache successful responses for identical requests", async () => {
+    const req = { a: 1 };
+
+    const p1 = caching.request(req);
+    expect(makeRequestMock).toHaveBeenCalledTimes(1);
+    expect(makeRequestMock).toHaveBeenCalledWith(REQUEST_ID, req);
+
+    // Resolve first request
+    delegate.resolve(REQUEST_ID, "response");
+    await expect(p1).resolves.toBe("response");
+
+    // Second call with equivalent request gets served from cache
+    const p2 = caching.request({ a: 1 });
+    expect(makeRequestMock).toHaveBeenCalledTimes(1);
+    await expect(p2).resolves.toBe("response");
+  });
+
+  it("should de-duplicate in-flight requests with the same key", async () => {
+    const req = { q: "select *" };
+
+    const p1 = caching.request(req);
+    const p2 = caching.request({ q: "select *" });
+
+    // Only one network invocation while in-flight
+    expect(makeRequestMock).toHaveBeenCalledTimes(1);
+    expect(p1).toStrictEqual(p2);
+
+    // Resolve and ensure both resolve to same result
+    delegate.resolve(REQUEST_ID, "ok");
+    await expect(p1).resolves.toBe("ok");
+    await expect(p2).resolves.toBe("ok");
+  });
+
+  it("should not cache errors", async () => {
+    // First call rejects
+    makeRequestMock.mockRejectedValueOnce(new Error("boom"));
+
+    await expect(caching.request({ x: 1 })).rejects.toThrow("boom");
+    expect(makeRequestMock).toHaveBeenCalledTimes(1);
+
+    // Next call should attempt again (not cached)
+    const p2 = caching.request({ x: 1 });
+    expect(makeRequestMock).toHaveBeenCalledTimes(2);
+
+    // Resolve the second request
+    delegate.resolve(REQUEST_ID, "ok");
+    await expect(p2).resolves.toBe("ok");
+  });
+});

package/src/core/network/types.ts

@@ -142,7 +142,7 @@ export interface EditRequests {
     request: PreviewDataSourceConnectionRequest,
   ) => Promise<null>;
   validateSQL: (request: ValidateSQLRequest) => Promise<null>;
-  openFile: (request: { path: string }) => Promise<null>;
+  openFile: (request: { path: string; lineNumber?: number }) => Promise<null>;
   getUsageStats: () => Promise<UsageResponse>;
   // Debugger
   sendPdb: (request: PdbRequest) => Promise<null>;

package/src/core/variables/state.ts

@@ -38,11 +38,11 @@ const {
   },
   setMetadata: (
     state,
-    metadata: Array<{
+    metadata: {
       name: VariableName;
       value?: string | null;
       dataType?: string | null;
-    }>,
+    }[],
   ) => {
     const newVariables = { ...state };
     for (const { name, value, dataType } of metadata) {

package/src/core/wasm/__tests__/state.test.ts

@@ -13,7 +13,7 @@ import { hasAnyOutputAtom } from "../state";
 
 describe("hasAnyOutputAtom", () => {
   const createNotebookState = (
-    outputs: Array<OutputMessage | null>,
+    outputs: (OutputMessage | null)[],
   ): NotebookState => ({
     ...initialNotebookState(),
     cellIds: new MultiColumn([

package/src/core/websocket/useMarimoWebSocket.tsx

@@ -16,7 +16,10 @@ import {
 } from "@/plugins/impl/anywidget/model";
 import { logNever } from "@/utils/assertNever";
 import { prettyError } from "@/utils/errors";
-import type { Base64String, JsonString } from "@/utils/json/base64";
+import {
+  type JsonString,
+  safeExtractSetUIElementMessageBuffers,
+} from "@/utils/json/base64";
 import { jsonParseWithSpecialChar } from "@/utils/json/json-parser";
 import { Logger } from "@/utils/Logger";
 import { reloadSafe } from "@/utils/reload-safe";
@@ -112,7 +115,7 @@ export function useMarimoWebSocket(opts: {
         const modelId = msg.data.model_id;
         const uiElement = msg.data.ui_element;
         const message = msg.data.message;
-        const buffers = (msg.data.buffers ?? []) as Base64String[];
+        const buffers = safeExtractSetUIElementMessageBuffers(msg.data);
 
         if (modelId && isMessageWidgetState(message)) {
           handleWidgetMessage({

package/src/custom.d.ts

@@ -20,5 +20,5 @@ interface JSON {
 
 // Improve type inference for Array.filter with BooleanConstructor
 interface Array<T> {
-  filter(predicate: BooleanConstructor): Array<NonNullable<T>>;
+  filter(predicate: BooleanConstructor): NonNullable<T>[];
 }

package/src/hooks/useCellRenderCount.ts

@@ -8,6 +8,7 @@ export function useCellRenderCount() {
 
       const currentCount = Number.parseInt(
         document.body.dataset.cellRenderCount || "0",
+        10,
       );
       document.body.dataset.cellRenderCount = (currentCount + 1).toString();
     },

package/src/hooks/useResizeHandle.ts

@@ -29,7 +29,10 @@ export const useResizeHandle = ({
       return;
     }
 
-    let width = Number.parseInt(window.getComputedStyle(resizableDiv).width);
+    let width = Number.parseInt(
+      window.getComputedStyle(resizableDiv).width,
+      10,
+    );
     let lastX = 0;
     let isResizing = false;
     let activeDirection: "left" | "right" | null = null;

package/src/plugins/core/RenderHTML.tsx

@@ -89,7 +89,7 @@ const replaceSrcScripts = (domNode: DOMNode): JSX.Element | undefined => {
       script.src = src;
       document.head.append(script);
     }
-    // eslint-disable-next-line react/jsx-no-useless-fragment
+    // biome-ignore lint/complexity/noUselessFragments: this is intentional
     return <></>;
   }
 };
@@ -163,7 +163,6 @@ export const renderHTML = ({ html, additionalReplacements = [] }: Options) => {
           return transformed;
         }
       }
-      // eslint-disable-next-line react/jsx-no-useless-fragment
       return reactNode as JSX.Element;
     },
   });

package/src/plugins/impl/DataTablePlugin.tsx

@@ -112,7 +112,7 @@ export type CalculateTopKRows = (req: {
   column: string;
   k: number;
 }) => Promise<{
-  data: Array<[unknown, number]>;
+  data: [unknown, number][];
 }>;
 
 export type PreviewColumn = (opts: { column: string }) => Promise<{
@@ -172,6 +172,7 @@ interface Data<T> {
   totalRows: number | TooManyRows;
   pagination: boolean;
   pageSize: number;
+  maxHeight?: number;
   selection: DataTableSelection;
   showDownload: boolean;
   showFilters: boolean;
@@ -220,7 +221,7 @@ type DataTableFunctions = {
   preview_column?: PreviewColumn;
 };
 
-type S = Array<number | string | { rowId: string; columnName?: string }>;
+type S = (number | string | { rowId: string; columnName?: string })[];
 
 export const DataTablePlugin = createPlugin<S>("marimo-table")
   .withData(
@@ -259,6 +260,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       totalColumns: z.number(),
       maxColumns: z.union([z.number(), z.literal("all")]).default("all"),
       hasStableRowId: z.boolean().default(false),
+      maxHeight: z.number().optional(),
       cellStyles: z.record(z.record(z.object({}).passthrough())).optional(),
       hoverTemplate: z.string().optional(),
       // Whether to load the data lazily.
@@ -653,6 +655,7 @@ export const LoadingDataTableComponent = memo(
         toggleDisplayHeader={toggleDisplayHeader}
         getRow={getRow}
         cellId={cellId}
+        maxHeight={props.maxHeight}
       />
     );
 
@@ -720,6 +723,7 @@ const DataTableComponent = ({
   preview_column,
   getRow,
   cellId,
+  maxHeight,
 }: DataTableProps<unknown> &
   DataTableSearchProps & {
     data: unknown[];
@@ -901,6 +905,7 @@ const DataTableComponent = ({
             data={data}
             columns={columns}
             className={className}
+            maxHeight={maxHeight}
             sorting={sorting}
             totalRows={totalRows}
             totalColumns={totalColumns}

package/src/plugins/impl/FileUploadPlugin.tsx

@@ -31,7 +31,7 @@ interface Data {
   max_size: number;
 }
 
-type T = Array<[string, string]>;
+type T = [string, string][];
 
 export class FileUploadPlugin implements IPlugin<T, Data> {
   tagName = "marimo-file";

package/src/plugins/impl/RefreshPlugin.tsx

@@ -20,7 +20,7 @@ interface Data {
    * It may also be a human-readable string like "1m" or "1h" or "3h 30m".
    * These will be converted to seconds.
    */
-  options: Array<string | number>;
+  options: (string | number)[];
   /**
    * The initial value.
    */

package/src/plugins/impl/SliderPlugin.tsx

@@ -147,6 +147,10 @@ const SliderComponent = ({
           <NumberField
             value={valueMap(internalValue)}
             onChange={(nextValue) => {
+              // If nextValue is null/undefined/NaN (input cleared), set to start
+              if (nextValue == null || Number.isNaN(nextValue)) {
+                nextValue = Number(start);
+              }
               setInternalValue(nextValue);
               if (!debounce) {
                 setValue(nextValue);

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

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { AnyWidget, Experimental } from "@anywidget/types";
-import { isEqual } from "lodash-es";
+import { get, isEqual, set } from "lodash-es";
 import { useEffect, useMemo, useRef } from "react";
 import { z } from "zod";
 import { MarimoIncomingMessageEvent } from "@/core/dom/events";
@@ -16,7 +16,11 @@ import {
 import { createPlugin } from "@/plugins/core/builder";
 import { rpc } from "@/plugins/core/rpc";
 import type { IPluginProps } from "@/plugins/types";
-import { updateBufferPaths } from "@/utils/data-views";
+import {
+  type Base64String,
+  byteStringToBinary,
+  typedAtob,
+} from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 import { ErrorBanner } from "../common/error-banner";
 import { MODEL_MANAGER, Model } from "./model";
@@ -25,7 +29,7 @@ interface Data {
   jsUrl: string;
   jsHash: string;
   css?: string | null;
-  bufferPaths?: Array<Array<string | number>> | null;
+  bufferPaths?: (string | number)[][] | null;
   initialValue: T;
 }
 
@@ -59,6 +63,11 @@ type Props = IPluginProps<T, Data, PluginFunctions>;
 
 const AnyWidgetSlot = (props: Props) => {
   const { css, jsUrl, jsHash, bufferPaths } = props.data;
+
+  const valueWithBuffers = useMemo(() => {
+    return resolveInitialValue(props.value, bufferPaths ?? []);
+  }, [props.value, bufferPaths]);
+
   // JS is an ESM file with a render function on it
   // export function render({ model, el }) {
   //   ...
@@ -85,10 +94,6 @@ const AnyWidgetSlot = (props: Props) => {
     }
   }, [hasError, jsUrl]);
 
-  const valueWithBuffer = useMemo(() => {
-    return updateBufferPaths(props.value, bufferPaths);
-  }, [props.value, bufferPaths]);
-
   // Mount the CSS
   useEffect(() => {
     const shadowRoot = props.host.shadowRoot;
@@ -157,7 +162,7 @@ const AnyWidgetSlot = (props: Props) => {
       key={key}
       {...props}
       widget={module.default}
-      value={valueWithBuffer}
+      value={valueWithBuffers}
     />
   );
 };
@@ -174,7 +179,7 @@ async function runAnyWidgetModule(
   el: HTMLElement,
 ): Promise<() => void> {
   const experimental: Experimental = {
-    invoke: async (name, msg, options) => {
+    invoke: async (_name, _msg, _options) => {
       const message =
         "anywidget.invoke not supported in marimo. Please file an issue at https://github.com/marimo-team/marimo/issues";
       Logger.warn(message);
@@ -284,3 +289,16 @@ 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,7 +5,11 @@ 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, visibleForTesting } from "../AnyWidgetPlugin";
+import {
+  getDirtyFields,
+  resolveInitialValue,
+  visibleForTesting,
+} from "../AnyWidgetPlugin";
 import { Model } from "../model";
 
 const { LoadedSlot } = visibleForTesting;
@@ -129,7 +133,7 @@ describe("LoadedSlot", () => {
           method: "update",
           state: { count: 10 },
         },
-        buffers: undefined,
+        buffers: [],
       },
       bubbles: false,
       composed: true,
@@ -179,3 +183,55 @@ 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,7 +9,6 @@ import {
   vi,
 } from "vitest";
 import { TestUtils } from "@/__tests__/test-helpers";
-import type { Base64String } from "@/utils/json/base64";
 import {
   type AnyWidgetMessage,
   handleWidgetMessage,
@@ -246,7 +245,7 @@ describe("Model", () => {
         content,
       });
 
-      expect(callback).toHaveBeenCalledWith(content, undefined);
+      expect(callback).toHaveBeenCalledWith(content, []);
     });
 
     it("should handle custom messages with buffers", () => {
@@ -286,7 +285,7 @@ describe("ModelManager", () => {
   }: {
     modelId: string;
     message: AnyWidgetMessage;
-    buffers: Base64String[];
+    buffers: readonly DataView[];
   }) => {
     return handleWidgetMessage({
       modelId,
@@ -353,7 +352,7 @@ describe("ModelManager", () => {
       message: { method: "custom", content: { count: 1 } },
       buffers: [],
     });
-    expect(callback).toHaveBeenCalledWith({ count: 1 }, undefined);
+    expect(callback).toHaveBeenCalledWith({ count: 1 }, []);
   });
 
   it("should handle close messages", async () => {

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

@@ -10,7 +10,6 @@ import { assertNever } from "@/utils/assertNever";
 import { Deferred } from "@/utils/Deferred";
 import { updateBufferPaths } 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;
@@ -171,7 +170,7 @@ 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?: DataView[]): void {
+  receiveCustomMessage(message: any, buffers: readonly DataView[] = []): void {
     const response = AnyWidgetMessageSchema.safeParse(message);
     if (response.success) {
       const data = response.data;
@@ -260,7 +259,7 @@ export async function handleWidgetMessage({
 }: {
   modelId: string;
   msg: AnyWidgetMessage;
-  buffers: Base64String[];
+  buffers: readonly DataView[];
   modelManager: ModelManager;
 }): Promise<void> {
   if (msg.method === "echo_update") {

package/src/plugins/impl/data-editor/types.ts

@@ -30,7 +30,7 @@ export interface ColumnEdit {
 }
 
 export interface Edits {
-  edits: Array<PositionalEdit | RowEdit | ColumnEdit>;
+  edits: (PositionalEdit | RowEdit | ColumnEdit)[];
 }
 
 export type ModifiedGridColumn = GridColumn & {

package/src/plugins/impl/data-explorer/components/query-form.tsx

@@ -238,7 +238,7 @@ const FieldOptions = ({
     return null;
   }
 
-  let options: Array<[string, FieldFunction[]]> = [];
+  let options: [string, FieldFunction[]][] = [];
 
   if (field.type === ExpandedType.QUANTITATIVE) {
     options = [["", QUANTITATIVE_FUNCTIONS]];

package/src/plugins/impl/data-frames/types.ts

@@ -15,7 +15,7 @@ export type NumPyType = string;
  *
  * We cannot use a js map, since maps don't preserve keys as ints (e.g. "1" and 1 are the same key)
  */
-export type RawColumnDataTypes = Array<[ColumnId, [DataType, NumPyType]]>;
+export type RawColumnDataTypes = [ColumnId, [DataType, NumPyType]][];
 /**
  * Map of column Id and their data types
  * ES6 maps preserve keys as ints (e.g. "1" and 1 are different keys)

package/src/plugins/impl/panel/PanelPlugin.tsx

@@ -50,9 +50,9 @@ declare global {
           consume: (data: ArrayBuffer | string) => void;
           message: {
             content: {
-              events?: Array<{
+              events?: {
                 model?: { id?: string };
-              }>;
+              }[];
               [key: string]: unknown;
             };
             buffers: ArrayBuffer[];