@marimo-team/frontend 0.25.3-dev13 → 0.25.3-dev134

package/src/components/data-table/__tests__/search-highlight.test.tsx

@@ -0,0 +1,109 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  buildHighlightPattern,
+  findMatchRanges,
+  highlightMatches,
+  highlightRanges,
+} from "../search-highlight";
+
+function highlight(text: string, query: string) {
+  return highlightMatches(text, buildHighlightPattern(query));
+}
+
+function marksOf(node: React.ReactNode) {
+  const { container } = render(<span>{node}</span>);
+  return {
+    container,
+    marks: [...container.querySelectorAll("mark")].map((m) => m.textContent),
+  };
+}
+
+describe("buildHighlightPattern", () => {
+  it("returns undefined for an empty or missing query", () => {
+    expect(buildHighlightPattern("")).toBeUndefined();
+    expect(buildHighlightPattern(undefined)).toBeUndefined();
+  });
+
+  it("escapes regex metacharacters so the query matches literally", () => {
+    const { marks } = marksOf(highlight("a.b a-b (x)", ".b"));
+    expect(marks).toEqual([".b"]);
+    expect(marksOf(highlight("f(x)", "(x)")).marks).toEqual(["(x)"]);
+    expect(marksOf(highlight("C and C++", "c++")).marks).toEqual(["C++"]);
+  });
+});
+
+describe("highlightMatches", () => {
+  it("returns the input unchanged without a pattern", () => {
+    expect(highlightMatches("Alice Smith", undefined)).toBe("Alice Smith");
+  });
+
+  it("returns the input unchanged when there is no match", () => {
+    expect(highlight("Alice Smith", "zzz")).toBe("Alice Smith");
+  });
+
+  it("returns the input unchanged when the query is longer than the text", () => {
+    expect(highlight("ab", "abc")).toBe("ab");
+  });
+
+  it("wraps a single match and keeps the surrounding text", () => {
+    const { container, marks } = marksOf(highlight("Alice Smith", "ce S"));
+    expect(marks).toEqual(["ce S"]);
+    expect(container.textContent).toBe("Alice Smith");
+  });
+
+  it("matches case-insensitively and keeps the original casing", () => {
+    const { marks } = marksOf(highlight("Alice Smith", "smi"));
+    expect(marks).toEqual(["Smi"]);
+  });
+
+  it("wraps every occurrence", () => {
+    const { container, marks } = marksOf(highlight("a-A-a", "a"));
+    expect(marks).toEqual(["a", "A", "a"]);
+    expect(container.textContent).toBe("a-A-a");
+  });
+
+  it("produces no empty segments for matches at the edges", () => {
+    const segments = highlight("xax", "x") as React.ReactNode[];
+    expect(Array.isArray(segments)).toBe(true);
+    expect(segments).toHaveLength(3);
+    expect(segments[1]).toBe("a");
+  });
+
+  it("is safe to reuse one global pattern across calls", () => {
+    const pattern = buildHighlightPattern("a");
+    expect(marksOf(highlightMatches("aa", pattern)).marks).toEqual(["a", "a"]);
+    expect(marksOf(highlightMatches("aa", pattern)).marks).toEqual(["a", "a"]);
+  });
+});
+
+describe("Unicode case folding", () => {
+  it("folds the Kelvin sign to k like the backend engines", () => {
+    expect(marksOf(highlight("K", "k")).marks).toEqual(["K"]);
+  });
+
+  it("folds every Greek sigma form", () => {
+    expect(marksOf(highlight("ΟΣ ος οσ", "σ")).marks).toEqual(["Σ", "ς", "σ"]);
+  });
+});
+
+describe("highlightRanges", () => {
+  it("applies shared ranges to a segment at an offset", () => {
+    const ranges = findMatchRanges(
+      "see https://x",
+      buildHighlightPattern("see https"),
+    );
+    expect(ranges).toEqual([[0, 9]]);
+    const { marks: textMarks } = marksOf(highlightRanges("see ", ranges, 0));
+    expect(textMarks).toEqual(["see "]);
+    const { marks: linkMarks } = marksOf(
+      highlightRanges("https://x", ranges, 4),
+    );
+    expect(linkMarks).toEqual(["https"]);
+  });
+
+  it("returns the segment unchanged when no range overlaps it", () => {
+    expect(highlightRanges("zzz", [[10, 12]], 0)).toBe("zzz");
+  });
+});

package/src/components/data-table/__tests__/url-detector.test.tsx

@@ -2,6 +2,7 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 import { parseContent } from "@/utils/url-parser";
+import { buildHighlightPattern } from "../search-highlight";
 import { isMarkdown, UrlDetector } from "../url-detector";
 
 describe("UrlDetector", () => {
@@ -201,3 +202,76 @@ describe("isMarkdown", () => {
     expect(isMarkdown("Visit [marimo](https://marimo.io)")).toBe(true);
   });
 });
+
+describe("UrlDetector with highlightPattern", () => {
+  it("wraps a text match in a mark", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("Alice Smith")}
+        highlightPattern={buildHighlightPattern("smi")}
+      />,
+    );
+    const marks = container.querySelectorAll("mark");
+    expect(marks).toHaveLength(1);
+    expect(marks[0].textContent).toBe("Smi");
+    expect(container.textContent).toBe("Alice Smith");
+  });
+
+  it("wraps a match inside a link label", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("see https://marimo.io/docs")}
+        highlightPattern={buildHighlightPattern("marimo")}
+      />,
+    );
+    const link = container.querySelector("a");
+    expect(link).not.toBeNull();
+    const mark = link?.querySelector("mark");
+    expect(mark?.textContent).toBe("marimo");
+    expect(link).toHaveAttribute("href", "https://marimo.io/docs");
+  });
+
+  it("renders no mark for an empty query", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("Alice Smith")}
+        highlightPattern={buildHighlightPattern("")}
+      />,
+    );
+    expect(container.querySelector("mark")).toBeNull();
+  });
+});
+
+describe("UrlDetector highlight across part boundaries", () => {
+  it("marks a query that spans a text part and a link", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("see https://marimo.io/docs")}
+        highlightPattern={buildHighlightPattern("see https")}
+      />,
+    );
+    const marks = [...container.querySelectorAll("mark")].map(
+      (m) => m.textContent,
+    );
+    expect(marks).toEqual(["see ", "https"]);
+    const link = container.querySelector("a");
+    expect(link?.querySelector("mark")?.textContent).toBe("https");
+    expect(link).toHaveAttribute("href", "https://marimo.io/docs");
+    expect(container.textContent).toBe("see https://marimo.io/docs");
+  });
+
+  it("marks the fallback link when an image fails to load", () => {
+    const { container } = render(
+      <UrlDetector
+        parts={parseContent("https://example.com/image.png")}
+        highlightPattern={buildHighlightPattern("image")}
+      />,
+    );
+    const img = container.querySelector("img");
+    expect(img).not.toBeNull();
+    fireEvent.error(img as HTMLImageElement);
+    const link = container.querySelector("a");
+    expect(link).toHaveAttribute("href", "https://example.com/image.png");
+    expect(link?.querySelector("mark")?.textContent).toBe("image");
+  });
+});

package/src/components/data-table/cell-selection/feature.ts

@@ -98,7 +98,7 @@ export const CellSelectionFeature: TableFeature = {
           ]);
         } else {
           // This cell becomes the single selected cell
-          table.setCellSelection((_) => [
+          table.setCellSelection(() => [
             {
               rowId: rowId,
               columnName: columnName,
@@ -115,7 +115,7 @@ export const CellSelectionFeature: TableFeature = {
           );
         } else {
           // Clear the selection
-          table.setCellSelection((_) => []);
+          table.setCellSelection(() => []);
         }
       }
     };

package/src/components/data-table/cell-selection/types.ts

@@ -30,7 +30,7 @@ export interface CellSelectionCell {
 }
 
 // These are additional properties add to the table instance in createTable
-export interface CellSelectionInstance<TData extends RowData> {
+export interface CellSelectionInstance {
   setCellSelection?: (updater: Updater<CellSelectionState>) => void;
 
   resetCellSelection?(defaultValue?: CellSelectionState): void;
@@ -44,7 +44,7 @@ declare module "@tanstack/react-table" {
     TData extends RowData,
   > extends CellSelectionOptions {}
 
-  interface Table<TData extends RowData> extends CellSelectionInstance<TData> {}
+  interface Table<TData extends RowData> extends CellSelectionInstance {}
 
   interface Cell<TData extends RowData, TValue> extends CellSelectionCell {}
 }

package/src/components/data-table/charts/__tests__/chart-panel.test.tsx

@@ -10,13 +10,27 @@ import { cellId } from "@/__tests__/branded";
 import { LazyVegaEmbed } from "@/components/charts/lazy";
 import { vegaLoader } from "@/plugins/impl/vega/loader";
 import { ChartPanel, TablePanel, type TablePanelProps } from "../charts";
-import { getChartTabName, tabsStorageAtom } from "../storage";
+import { createTabId, getChartTabName, tabsStorageAtom } from "../storage";
 import { ChartType, NONE_VALUE } from "../types";
+import { TOO_MANY_ROWS } from "../../types";
 
 vi.mock("@/components/charts/lazy", () => ({
   LazyVegaEmbed: vi.fn(() => null),
 }));
 
+vi.mock("../components/chart-items", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("../components/chart-items")>()),
+  ChartTypeSelect: ({
+    onValueChange,
+  }: {
+    onValueChange: (value: string) => void;
+  }) => (
+    <button type="button" onClick={() => onValueChange("line")}>
+      Change chart type
+    </button>
+  ),
+}));
+
 beforeAll(() => {
   SetupMocks.resizeObserver();
 });
@@ -38,6 +52,7 @@ describe("ChartPanel", () => {
             id,
             [
               {
+                id: createTabId(),
                 tabName,
                 chartType: ChartType.BAR,
                 config: {
@@ -283,4 +298,62 @@ describe("ChartPanel", () => {
       });
     },
   );
+  it("keeps panel state when a chart type change renames the tab", async () => {
+    const store = createStore();
+    const id = cellId("rename-keeps-state");
+    const tabName = getChartTabName(0, ChartType.BAR);
+    store.set(
+      tabsStorageAtom,
+      new Map([
+        [
+          id,
+          [
+            {
+              id: createTabId(),
+              tabName,
+              chartType: ChartType.BAR,
+              config: {
+                general: {
+                  xColumn: { field: "value", type: "number" },
+                  yColumn: {
+                    field: "value",
+                    type: "integer",
+                    aggregate: NONE_VALUE,
+                  },
+                },
+              },
+            },
+          ],
+        ],
+      ]),
+    );
+    const sample = [{ value: 1 }];
+    const props: TablePanelProps = {
+      cellId: id,
+      data: sample,
+      dataTable: <div />,
+      totalRows: TOO_MANY_ROWS,
+      columns: 1,
+      displayHeader: true,
+      fieldTypes: [["value", ["number", "float64"]]],
+    };
+    const { getByRole, findByRole, queryByRole } = render(
+      <Provider store={store}>
+        <Tooltip.Provider>
+          <TablePanel {...props} />
+        </Tooltip.Provider>
+      </Provider>,
+    );
+    fireEvent.click(getByRole("tab", { name: tabName }));
+    fireEvent.click(await findByRole("button", { name: "Proceed" }));
+    await waitFor(() => {
+      expect(queryByRole("button", { name: "Proceed" })).toBeNull();
+    });
+
+    fireEvent.click(getByRole("button", { name: "Change chart type" }));
+
+    const renamed = getChartTabName(0, ChartType.LINE);
+    await findByRole("tab", { name: renamed });
+    expect(queryByRole("button", { name: "Proceed" })).toBeNull();
+  });
 });

package/src/components/data-table/charts/__tests__/spec-snapshot.test.ts

@@ -39,13 +39,13 @@ describe("create vega spec", () => {
   });
 
   it("should create and augment a spec", () => {
-    const spec = createSpecWithoutData(
-      ChartType.BAR,
-      createBasicFormValues(),
-      "light",
-      400,
-      300,
-    );
+    const spec = createSpecWithoutData({
+      chartType: ChartType.BAR,
+      formValues: createBasicFormValues(),
+      theme: "light",
+      width: 400,
+      height: 300,
+    });
     expect(spec).toMatchSnapshot();
     expect(typeof spec !== "string").toBe(true); // Not error message
     expect((spec as TopLevelSpec).data).toEqual({ values: [] });
@@ -59,25 +59,25 @@ describe("create vega spec", () => {
     const formValues = createBasicFormValues();
     formValues.general!.xColumn!.field = undefined;
 
-    const spec = createSpecWithoutData(
-      ChartType.BAR,
+    const spec = createSpecWithoutData({
+      chartType: ChartType.BAR,
       formValues,
-      "light",
-      400,
-      300,
-    );
+      theme: "light",
+      width: 400,
+      height: 300,
+    });
     expect(spec).toEqual(X_AXIS_REQUIRED);
 
     // Undefined yColumn
     const formValues2 = createBasicFormValues();
     formValues2.general!.yColumn!.field = undefined;
-    const spec2 = createSpecWithoutData(
-      ChartType.BAR,
-      formValues2,
-      "light",
-      400,
-      300,
-    );
+    const spec2 = createSpecWithoutData({
+      chartType: ChartType.BAR,
+      formValues: formValues2,
+      theme: "light",
+      width: 400,
+      height: 300,
+    });
     expect(spec2).toEqual(Y_AXIS_REQUIRED);
   });
 });

package/src/components/data-table/charts/__tests__/spec.test.ts

@@ -29,10 +29,12 @@ describe("getAxisEncoding", () => {
         aggregate: "sum",
         timeUnit: undefined,
       },
-      { binned: true, step: 10 },
-      COUNT_FIELD,
-      true,
-      ChartType.BAR,
+      {
+        binValues: { binned: true, step: 10 },
+        label: COUNT_FIELD,
+        stack: true,
+        chartType: ChartType.BAR,
+      },
     );
 
     expect(result).toEqual({
@@ -52,10 +54,12 @@ describe("getAxisEncoding", () => {
         aggregate: "mean",
         timeUnit: undefined,
       },
-      undefined,
-      "Average Price",
-      false,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: "Average Price",
+        stack: false,
+        chartType: ChartType.BAR,
+      },
     );
 
     expect(result).toEqual({
@@ -79,10 +83,12 @@ describe("getAxisEncoding", () => {
           aggregate: NONE_VALUE,
           timeUnit,
         },
-        undefined,
-        "Date",
-        undefined,
-        ChartType.LINE,
+        {
+          binValues: undefined,
+          label: "Date",
+          stack: undefined,
+          chartType: ChartType.LINE,
+        },
       );
 
       expect(result).toEqual({
@@ -105,10 +111,12 @@ describe("getAxisEncoding", () => {
         aggregate: NONE_VALUE,
         timeUnit: undefined,
       },
-      undefined,
-      "Category",
-      true,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: "Category",
+        stack: true,
+        chartType: ChartType.BAR,
+      },
     );
 
     expect(result).toEqual({
@@ -129,10 +137,12 @@ describe("getAxisEncoding", () => {
         aggregate: "sum",
         timeUnit: undefined,
       },
-      undefined,
-      "Value",
-      false,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: "Value",
+        stack: false,
+        chartType: ChartType.BAR,
+      },
     );
 
     expect((result as { bin?: unknown }).bin).toBeUndefined();
@@ -146,10 +156,12 @@ describe("getAxisEncoding", () => {
         aggregate: "sum",
         timeUnit: undefined,
       },
-      undefined,
-      undefined,
-      false,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: undefined,
+        stack: false,
+        chartType: ChartType.BAR,
+      },
     );
 
     expect((result as { title?: string }).title).toBeUndefined();
@@ -164,10 +176,12 @@ describe("getAxisEncoding", () => {
           aggregate: agg,
           timeUnit: undefined,
         },
-        undefined,
-        "Value",
-        false,
-        ChartType.BAR,
+        {
+          binValues: undefined,
+          label: "Value",
+          stack: false,
+          chartType: ChartType.BAR,
+        },
       );
 
       const expectedAggregate = (result as { aggregate?: string }).aggregate;
@@ -189,10 +203,12 @@ describe("getAxisEncoding", () => {
           aggregate: agg,
           timeUnit: undefined,
         },
-        undefined,
-        "Date",
-        false,
-        ChartType.BAR,
+        {
+          binValues: undefined,
+          label: "Date",
+          stack: false,
+          chartType: ChartType.BAR,
+        },
       );
 
       const expectedAggregate = (result as { aggregate?: string }).aggregate;
@@ -209,10 +225,12 @@ describe("getAxisEncoding", () => {
           sort: sort as "ascending" | "descending",
           aggregate: NONE_VALUE,
         },
-        undefined,
-        "Value",
-        false,
-        ChartType.BAR,
+        {
+          binValues: undefined,
+          label: "Value",
+          stack: false,
+          chartType: ChartType.BAR,
+        },
       );
 
       const expectedSort = (result as { sort?: string }).sort;
@@ -1009,10 +1027,12 @@ describe("Special character escaping in specs", () => {
         aggregate: "sum",
         timeUnit: undefined,
       },
-      undefined,
-      "Value",
-      false,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: "Value",
+        stack: false,
+        chartType: ChartType.BAR,
+      },
     );
 
     invariant("field" in result, "field should be defined");
@@ -1027,10 +1047,12 @@ describe("Special character escaping in specs", () => {
         aggregate: "mean",
         timeUnit: undefined,
       },
-      undefined,
-      "Data",
-      false,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: "Data",
+        stack: false,
+        chartType: ChartType.BAR,
+      },
     );
 
     invariant("field" in result, "field should be defined");
@@ -1045,10 +1067,12 @@ describe("Special character escaping in specs", () => {
         aggregate: NONE_VALUE,
         timeUnit: "yearmonth",
       },
-      undefined,
-      "Timestamp",
-      false,
-      ChartType.LINE,
+      {
+        binValues: undefined,
+        label: "Timestamp",
+        stack: false,
+        chartType: ChartType.LINE,
+      },
     );
 
     invariant("field" in result, "field should be defined");
@@ -1063,10 +1087,12 @@ describe("Special character escaping in specs", () => {
         aggregate: "sum",
         timeUnit: undefined,
       },
-      undefined,
-      "Result",
-      false,
-      ChartType.BAR,
+      {
+        binValues: undefined,
+        label: "Result",
+        stack: false,
+        chartType: ChartType.BAR,
+      },
     );
 
     invariant("field" in result, "field should be defined");

package/src/components/data-table/charts/__tests__/storage.test.ts

@@ -16,7 +16,7 @@ import { cellId } from "@/__tests__/branded";
 import { availableStorage } from "@/utils/storage/storage";
 import { ChartSchema } from "../schemas";
 import type { TabName } from "../storage";
-import { KEY, tabsStorageAtom } from "../storage";
+import { createTabId, KEY, tabsStorageAtom } from "../storage";
 import { ChartType } from "../types";
 
 describe("Chart Transforms Storage", () => {
@@ -39,6 +39,7 @@ describe("Chart Transforms Storage", () => {
       const store = getDefaultStore();
       const cid = cellId("cell-1");
       const tabData = {
+        id: createTabId(),
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
         config: ChartSchema.parse({
@@ -63,6 +64,7 @@ describe("Chart Transforms Storage", () => {
       const store = getDefaultStore();
       const cid = cellId("cell-1");
       const tabData1 = {
+        id: createTabId(),
         tabName: "Tab 1" as TabName,
         chartType: ChartType.LINE,
         config: ChartSchema.parse({
@@ -73,6 +75,7 @@ describe("Chart Transforms Storage", () => {
         }),
       };
       const tabData2 = {
+        id: createTabId(),
         tabName: "Tab 2" as TabName,
         chartType: ChartType.BAR,
         config: ChartSchema.parse({