@marimo-team/frontend 0.16.1 → 0.16.3

package/src/plugins/plugins.ts

@@ -54,7 +54,7 @@ import type { IStatelessPlugin } from "./stateless-plugin";
 import type { IPlugin } from "./types";
 
 // List of UI plugins
-export const UI_PLUGINS: Array<IPlugin<any, unknown>> = [
+export const UI_PLUGINS: IPlugin<any, unknown>[] = [
   new ButtonPlugin(),
   new CheckboxPlugin(),
   DataTablePlugin,
@@ -91,7 +91,7 @@ export const UI_PLUGINS: Array<IPlugin<any, unknown>> = [
 ];
 
 // List of output / layout plugins
-const LAYOUT_PLUGINS: Array<IStatelessPlugin<unknown>> = [
+const LAYOUT_PLUGINS: IStatelessPlugin<unknown>[] = [
   new AccordionPlugin(),
   new CalloutPlugin(),
   new CarouselPlugin(),

package/src/stories/dataframe.stories.tsx

@@ -40,6 +40,8 @@ export const DataFrame: StoryObj = {
         get_dataframe={() => Promise.reject(new Error("not implemented"))}
         search={Functions.THROW}
         host={document.body}
+        showDownload={false}
+        download_as={async () => ""}
       />
     );
   },

package/src/utils/Logger.ts

@@ -1,5 +1,5 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-/* eslint-disable no-console */
+/** biome-ignore-all lint/suspicious/noConsole: For console logging */
 
 import { Functions } from "./functions";
 

package/src/utils/__tests__/data-views.test.ts

@@ -1,39 +1,11 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import { describe, expect, it } from "vitest";
-import { byteStringToDataView, updateBufferPaths } from "../data-views";
-import type { Base64String, ByteString } from "../json/base64";
+import { updateBufferPaths } from "../data-views";
 
 describe("updateBufferPaths", () => {
-  it("should return the original object if bufferPaths is null", () => {
+  it("should return the original object if bufferPaths.length === 0", () => {
     const input = { a: 1, b: 2 };
-    const result = updateBufferPaths(input, null);
-    expect(result).toEqual(input);
-  });
-
-  it("should update buffer paths correctly", () => {
-    const input = {
-      a: 1,
-      b: {
-        c: "Hello",
-        d: "World",
-      },
-    };
-    const bufferPaths = [
-      ["b", "c"],
-      ["b", "d"],
-    ];
-    const result = updateBufferPaths(input, bufferPaths);
-
-    expect(result.a).toBe(1);
-    expect(result.b.c).toBeInstanceOf(DataView);
-    expect(result.b.d).toBeInstanceOf(DataView);
-  });
-
-  it("should handle non-existent paths", () => {
-    const input = { a: 1 };
-    const bufferPaths = [["b", "c"]];
-    const result = updateBufferPaths(input, bufferPaths);
-
+    const result = updateBufferPaths(input, [], []);
     expect(result).toEqual(input);
   });
 
@@ -49,19 +21,32 @@ describe("updateBufferPaths", () => {
       ["b", "c"],
       ["b", "d"],
     ];
-    const buffers: Base64String[] = [
-      "SGVsbG8=" as Base64String,
-      "V29ybGQ=" as Base64String,
-    ]; // Base64 encoded "Hello" and "World"
+    const buffers = [
+      new TextEncoder().encode("Hello"),
+      new TextEncoder().encode("World"),
+    ].map((b) => new DataView(b.buffer));
     const result = updateBufferPaths(input, bufferPaths, buffers);
-
-    expect(result.a).toBe(1);
-    const cView = result.b.c as unknown as DataView;
-    const dView = result.b.d as unknown as DataView;
-    expect(cView).toBeInstanceOf(DataView);
-    expect(dView).toBeInstanceOf(DataView);
-    expect(cView.byteLength).toBe(5);
-    expect(dView.byteLength).toBe(5);
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "a": 1,
+        "b": {
+          "c": DataView [
+            72,
+            101,
+            108,
+            108,
+            111,
+          ],
+          "d": DataView [
+            87,
+            111,
+            114,
+            108,
+            100,
+          ],
+        },
+      }
+    `);
   });
 
   it("should throw error when buffers and paths length mismatch", () => {
@@ -70,7 +55,7 @@ describe("updateBufferPaths", () => {
       ["b", "c"],
       ["b", "d"],
     ];
-    const buffers: Base64String[] = ["SGVsbG8=" as Base64String]; // Only one buffer for two paths
+    const buffers = [new DataView(new ArrayBuffer())]; // Only one buffer for two paths
 
     expect(() => updateBufferPaths(input, bufferPaths, buffers)).toThrow(
       "Buffers and buffer paths not the same length",
@@ -80,33 +65,10 @@ describe("updateBufferPaths", () => {
   it("should handle empty buffers array", () => {
     const input = { a: 1 };
     const bufferPaths = [["b", "c"]];
-    const buffers: Base64String[] = [];
+    const buffers: DataView[] = [];
 
     expect(() => updateBufferPaths(input, bufferPaths, buffers)).toThrow(
       "Buffers and buffer paths not the same length",
     );
   });
 });
-
-describe("byteStringToDataView", () => {
-  it("should convert a base64 string to a DataView", () => {
-    const input = "Hello" as ByteString;
-    const result = byteStringToDataView(input);
-
-    expect(result).toBeInstanceOf(DataView);
-    expect(result.byteLength).toBe(5);
-    expect(result.getUint8(0)).toBe(72); // 'H'
-    expect(result.getUint8(1)).toBe(101); // 'e'
-    expect(result.getUint8(2)).toBe(108); // 'l'
-    expect(result.getUint8(3)).toBe(108); // 'l'
-    expect(result.getUint8(4)).toBe(111); // 'o'
-  });
-
-  it("should handle empty string", () => {
-    const input = "" as ByteString;
-    const result = byteStringToDataView(input);
-
-    expect(result).toBeInstanceOf(DataView);
-    expect(result.byteLength).toBe(0);
-  });
-});

package/src/utils/__tests__/dom.test.ts

@@ -0,0 +1,167 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { describe, expect, test } from "vitest";
+import { ansiToPlainText, parseHtmlContent } from "../dom";
+
+describe("parseHtmlContent", () => {
+  test("strips HTML tags and returns plain text", () => {
+    const htmlString =
+      '<span style="color: red;">Error: Something went wrong</span>';
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`"Error: Something went wrong"`);
+  });
+
+  test("handles ANSI color span tags", () => {
+    const htmlString =
+      '<span style="color:#d03050;">ERROR</span>: <span style="color:#8ad03a;">File not found</span>';
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`"ERROR: File not found"`);
+  });
+
+  test("normalizes whitespace", () => {
+    const htmlString = "<span>  Multiple   \n\n  spaces  and  \t tabs  </span>";
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`
+      "  Multiple
+
+        spaces  and  	 tabs"
+    `);
+  });
+
+  test("handles empty HTML", () => {
+    const htmlString = "";
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`""`);
+  });
+
+  test("handles plain text without HTML", () => {
+    const htmlString = "Simple error message";
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`"Simple error message"`);
+  });
+
+  test("handles nested HTML elements", () => {
+    const htmlString =
+      '<div><span>Traceback:</span><pre><code>  File "test.py", line 1\n    print("hello"</code></pre></div>';
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`
+      "Traceback:  File "test.py", line 1
+          print("hello""
+    `);
+  });
+
+  test("handles complex ANSI-converted HTML with styles", () => {
+    const htmlString =
+      '<span style="background:#fff;color:#000">  File "</span><span style="background:#fff;color:#0000ff">test.py</span><span style="background:#fff;color:#000">", line </span><span style="background:#fff;color:#008000">1</span>';
+    const result = parseHtmlContent(htmlString);
+    expect(result).toMatchInlineSnapshot(`"  File "test.py", line 1"`);
+  });
+});
+
+describe("ansiToPlainText", () => {
+  test("converts ANSI color codes to plain text", () => {
+    const ansiString = "\u001B[31mError:\u001B[0m Something went wrong";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`"Error: Something went wrong"`);
+  });
+
+  test("handles multiple ANSI color codes", () => {
+    const ansiString =
+      "\u001B[32mSUCCESS:\u001B[0m \u001B[34mOperation completed\u001B[0m successfully";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(
+      `"SUCCESS: Operation completed successfully"`,
+    );
+  });
+
+  test("handles ANSI bold and color combinations", () => {
+    const ansiString =
+      "\u001B[1;31mBOLD RED ERROR:\u001B[0m \u001B[33mWarning message\u001B[0m";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`"BOLD RED ERROR: Warning message"`);
+  });
+
+  test("handles Python traceback with ANSI codes", () => {
+    const ansiString =
+      "\u001B[0;36m  File \"\u001B[0m\u001B[0;32mtest.py\u001B[0m\u001B[0;36m\", line \u001B[0m\u001B[0;32m1\u001B[0m\u001B[0;36m, in \u001B[0m\u001B[0;35m<module>\u001B[0m\n\u001B[0;31mNameError\u001B[0m: name 'undefined_var' is not defined";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "  File "test.py", line 1, in <module>
+      NameError: name 'undefined_var' is not defined"
+    `);
+  });
+
+  test("handles error messages with background colors", () => {
+    const ansiString =
+      "\u001B[41;37m CRITICAL ERROR \u001B[0m \u001B[31mSystem failure detected\u001B[0m";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(
+      `" CRITICAL ERROR  System failure detected"`,
+    );
+  });
+
+  test("handles complex stack trace with mixed formatting", () => {
+    const ansiString =
+      'Traceback (most recent call last):\n  \u001B[36mFile "\u001B[32m/path/to/file.py\u001B[36m", line \u001B[32m42\u001B[36m, in \u001B[35mfunction_name\u001B[0m\n    \u001B[31mraise ValueError("Something went wrong")\u001B[0m\n\u001B[31mValueError\u001B[0m: Something went wrong';
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "Traceback (most recent call last):
+        File "/path/to/file.py", line 42, in function_name
+          raise ValueError("Something went wrong")
+      ValueError: Something went wrong"
+    `);
+  });
+
+  test("handles empty string", () => {
+    const ansiString = "";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`""`);
+  });
+
+  test("handles plain text without ANSI codes", () => {
+    const ansiString = "Plain error message without colors";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(
+      `"Plain error message without colors"`,
+    );
+  });
+
+  test("handles whitespace and newlines correctly", () => {
+    const ansiString =
+      "\u001B[31m  Error:  \u001B[0m\n\n  \u001B[33m  Warning  \u001B[0m  ";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "  Error:
+
+          Warning"
+    `);
+  });
+
+  test("handles JavaScript error stack trace", () => {
+    const ansiString =
+      "\u001B[31mReferenceError\u001B[0m: \u001B[33mvariable\u001B[0m is not defined\n    at \u001B[36mObject.<anonymous>\u001B[0m (\u001B[32m/path/to/script.js\u001B[0m:\u001B[33m5\u001B[0m:\u001B[33m1\u001B[0m)";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "ReferenceError: variable is not defined
+          at Object.<anonymous> (/path/to/script.js:5:1)"
+    `);
+  });
+
+  test("handles Rust panic with ANSI formatting", () => {
+    const ansiString =
+      "thread '\u001B[32mmain\u001B[0m' panicked at '\u001B[31massertion failed: `(left == right)`\u001B[0m'\n  \u001B[36mleft\u001B[0m: `\u001B[33m5\u001B[0m`\n \u001B[36mright\u001B[0m: `\u001B[33m10\u001B[0m`";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`
+      "thread 'main' panicked at 'assertion failed: \`(left == right)\`'
+        left: \`5\`
+       right: \`10\`"
+    `);
+  });
+
+  test("handles mix of 8-bit and 256-color ANSI codes", () => {
+    const ansiString =
+      "\u001B[38;5;196mBright Red\u001B[0m and \u001B[38;5;46mBright Green\u001B[0m text";
+    const result = ansiToPlainText(ansiString);
+    expect(result).toMatchInlineSnapshot(`"Bright Red and Bright Green text"`);
+  });
+});

package/src/utils/__tests__/id-tree.test.ts

@@ -740,7 +740,7 @@ describe("MultiColumn", () => {
   });
 
   it("creates from ids and columns", () => {
-    const idAndColumns: Array<[string, number | undefined | null]> = [
+    const idAndColumns: [string, number | undefined | null][] = [
       ["A1", 0],
       ["A2", 0],
       ["B1", 1],
@@ -1991,4 +1991,52 @@ describe("CollapsibleTree.fromWithPreviousShape", () => {
     expect(tree.isCollapsed("one")).toBe(false);
     expect(tree.topLevelIds).toEqual(["one", "three", "four"]);
   });
+
+  it("reproduces GitHub issue #6188: inOrderIds with nested collapses", () => {
+    // Simplified reproduction case:
+    // Cell A (markdown): # Section 1 Header
+    // Cell B (markdown): ## Subsection 1.1 Header
+    // Cell C (python): print("This cell should be in Subsection 1.1")
+    // Cell D (python): print("This cell should also be in Subsection 1.1")
+    // Cell E (markdown): ## Subsection 1.2 Header
+    // Cell F (python): print("This cell should be in Subsection 1.2")
+
+    const originalOrder = [
+      "CellA", // # Section 1 Header
+      "CellB", // ## Subsection 1.1 Header
+      "CellC", // print("This cell should be in Subsection 1.1")
+      "CellD", // print("This cell should also be in Subsection 1.1")
+      "CellE", // ## Subsection 1.2 Header
+      "CellF", // print("This cell should be in Subsection 1.2")
+    ];
+
+    // Create notebook with one column
+    let notebook = MultiColumn.from([originalOrder]);
+
+    // Before collapsing, order should be correct
+    expect(notebook.inOrderIds).toEqual(originalOrder);
+
+    const columnId = notebook.getColumnIds()[0];
+
+    // Follow the exact reproduction steps from the GitHub issue:
+    // 1. Collapse B (subsection 1.1) - includes C, D (stops before E)
+    notebook = notebook.transform(columnId, (tree) =>
+      tree.collapse("CellB", "CellD"),
+    );
+
+    // 2. Collapse E (subsection 1.2) - includes F (to end)
+    notebook = notebook.transform(columnId, (tree) =>
+      tree.collapse("CellE", undefined),
+    );
+
+    // 3. Collapse A (section 1) - includes all the rest (B, E and their children)
+    notebook = notebook.transform(columnId, (tree) =>
+      tree.collapse("CellA", undefined),
+    );
+
+    const finalOrder = notebook.inOrderIds;
+
+    // inOrderIds now correctly preserves logical order even with nested collapses
+    expect(finalOrder).toEqual(originalOrder);
+  });
 });

package/src/utils/__tests__/storage.test.ts

@@ -29,7 +29,7 @@ interface TestValue {
 
 interface SerializableValue {
   id: string;
-  data: Array<[string, number]>;
+  data: [string, number][];
 }
 
 describe("adaptForLocalStorage", () => {

package/src/utils/__tests__/traceback.test.ts

@@ -6,14 +6,20 @@ import { extractAllTracebackInfo } from "../traceback";
 describe("traceback", () => {
   test("extracts cell-link", () => {
     const errors = extractAllTracebackInfo(Tracebacks.raw);
-    expect(errors).toMatchInlineSnapshot(`
+    expect(
+      errors[0].kind === "file" &&
+        errors[0].filePath.endsWith("marimo/_runtime/executor.py"),
+    ).toBe(true);
+    expect(errors.slice(1)).toMatchInlineSnapshot(`
       [
         {
           "cellId": "Hbol",
+          "kind": "cell",
           "lineNumber": 4,
         },
         {
           "cellId": "Hbol",
+          "kind": "cell",
           "lineNumber": 2,
         },
       ]
@@ -22,10 +28,15 @@ describe("traceback", () => {
 
   test("extracts cell-link from assertion", () => {
     const info = extractAllTracebackInfo(Tracebacks.assertion);
-    expect(info).toMatchInlineSnapshot(`
+    expect(
+      info[0].kind === "file" &&
+        info[0].filePath.endsWith("marimo/_runtime/executor.py"),
+    ).toBe(true);
+    expect(info.slice(1)).toMatchInlineSnapshot(`
       [
         {
           "cellId": "Hbol",
+          "kind": "cell",
           "lineNumber": 1,
         },
       ]

package/src/utils/arrays.ts

@@ -55,7 +55,7 @@ export function arrayShallowEquals<T>(a: T[], b: T[]): boolean {
 export const Arrays = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   EMPTY: [] as any,
-  zip: <T, U>(a: T[], b: U[]): Array<[T, U]> => {
+  zip: <T, U>(a: T[], b: U[]): [T, U][] => {
     invariant(a.length === b.length, "Arrays must be the same length");
     return a.map((item, i) => [item, b[i]]);
   },

package/src/utils/createReducer.ts

@@ -79,11 +79,7 @@ type Middleware<State> = (
 export function createReducerAndAtoms<
   State,
   RH extends ReducerHandlers<NoInfer<State>>,
->(
-  initialState: () => State,
-  reducers: RH,
-  middleware?: Array<Middleware<State>>,
-) {
+>(initialState: () => State, reducers: RH, middleware?: Middleware<State>[]) {
   const { reducer, createActions } = createReducer(initialState, reducers);
 
   const reducerWithMiddleware = (state: State, action: ReducerAction<any>) => {

package/src/utils/data-views.ts

@@ -1,7 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import { get, set } from "lodash-es";
+import { set } from "lodash-es";
 import { invariant } from "./invariant";
-import { type Base64String, type ByteString, typedAtob } from "./json/base64";
 import { Logger } from "./Logger";
 
 /**
@@ -9,8 +8,8 @@ import { Logger } from "./Logger";
  */
 export function updateBufferPaths<T extends Record<string, unknown>>(
   inputObject: T,
-  bufferPaths: Array<Array<string | number>> | null | undefined,
-  buffers?: Base64String[] | null | undefined,
+  bufferPaths: readonly (readonly (string | number)[])[],
+  buffers: readonly DataView[],
 ): T {
   // If no buffer paths, return the original object
   if (!bufferPaths || bufferPaths.length === 0) {
@@ -30,25 +29,13 @@ export function updateBufferPaths<T extends Record<string, unknown>>(
   for (const [i, bufferPath] of bufferPaths.entries()) {
     // If buffers exists, we use that value
     // Otherwise we grab it from inside the inputObject
-    const bytes: ByteString = buffers
-      ? typedAtob(buffers[i])
-      : get(object, bufferPath);
-    if (!bytes) {
+    const dataView = buffers[i];
+    if (!dataView) {
       Logger.warn("Could not find buffer at path", bufferPath);
       continue;
     }
-    const buffer = byteStringToDataView(bytes);
-    object = set(object, bufferPath, buffer);
+    object = set(object, bufferPath, dataView);
   }
 
   return object;
 }
-
-export const byteStringToDataView = (bytes: ByteString) => {
-  const buffer = new ArrayBuffer(bytes.length);
-  const view = new DataView(buffer);
-  for (let i = 0; i < bytes.length; i++) {
-    view.setUint8(i, bytes.charCodeAt(i));
-  }
-  return view;
-};

package/src/utils/dom.ts

@@ -0,0 +1,55 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { AnsiUp } from "ansi_up";
+import { Logger } from "./Logger";
+
+// Create a shared AnsiUp instance
+const ansiUp = new AnsiUp();
+
+/**
+ * Extracts plain text content from HTML by removing all HTML tags and normalizing whitespace.
+ *
+ * @param htmlString The HTML string to parse
+ * @returns Plain text content with HTML tags removed and whitespace normalized
+ */
+export function parseHtmlContent(htmlString: string): string {
+  try {
+    // Create a temporary DOM element to parse HTML
+    const tempDiv = document.createElement("div");
+    tempDiv.innerHTML = htmlString;
+
+    // Extract text content, removing HTML tags
+    const textContent = tempDiv.textContent || tempDiv.innerText || "";
+    const lines = textContent.split("\n");
+    return lines.map((line) => line.trimEnd()).join("\n");
+  } catch (error) {
+    Logger.error("Error parsing HTML content:", error);
+    // If parsing fails, return the original string
+    return htmlString;
+  }
+}
+
+/**
+ * Converts ANSI escape sequences to plain text by first converting to HTML and then stripping HTML tags.
+ * This is useful for console output that may contain ANSI color codes or formatting.
+ *
+ * @param ansiString String that may contain ANSI escape sequences
+ * @returns Plain text with ANSI codes removed and HTML stripped
+ */
+export function ansiToPlainText(ansiString: string): string {
+  if (!ansiString) {
+    return "";
+  }
+
+  try {
+    // Convert ANSI escape sequences to HTML
+    const htmlString = ansiUp.ansi_to_html(ansiString);
+
+    // Strip HTML tags and return clean text
+    return parseHtmlContent(htmlString);
+  } catch (error) {
+    Logger.error("Error converting ANSI to plain text:", error);
+    // If conversion fails, return the original string
+    return ansiString;
+  }
+}

package/src/utils/edit-distance.ts

@@ -134,7 +134,7 @@ export function mergeArray<T, U>(
   arr2: U[],
   equals: (a: T, b: U) => boolean,
   stub: T,
-): { merged: Array<T | null>; edits: EditDistanceResult } {
+): { merged: (T | null)[]; edits: EditDistanceResult } {
   const edits = editDistanceGeneral(arr1, arr2, equals);
   return {
     merged: applyOperationsWithStub(arr1, edits.operations, stub),

package/src/utils/fileToBase64.ts

@@ -34,7 +34,7 @@ export function blobToString(
  *
  * Returns a promised array of tuples [file name, file contents].
  */
-export function filesToBase64(files: File[]): Promise<Array<[string, string]>> {
+export function filesToBase64(files: File[]): Promise<[string, string][]> {
   return Promise.all(
     files.map((file) =>
       blobToString(file, "base64").then(