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

package/src/components/datasources/__tests__/table-list.test.tsx

@@ -0,0 +1,118 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render, screen, waitFor } from "@testing-library/react";
+import { Provider } from "jotai";
+import type React from "react";
+import { describe, expect, it } from "vitest";
+import { MockRequestClient } from "@/__mocks__/requests";
+import type { SQLTableContext } from "@/core/datasets/data-source-connections";
+import { PreviewSQLTableList } from "@/core/datasets/request-registry";
+import type { SQLTableListPreview } from "@/core/kernel/messages";
+import type { RequestId } from "@/core/network/DeferredRequestRegistry";
+import { requestClientAtom } from "@/core/network/requests";
+import { store } from "@/core/state/jotai";
+import { TableList } from "../datasources";
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <Provider store={store}>{children}</Provider>
+);
+
+const sqlTableContext: SQLTableContext = {
+  engine: "my_engine",
+  database: "my_db",
+  schema: "public",
+  dialect: "postgres",
+  schemaPath: ["public"],
+};
+
+// The kernel answers table-list requests over the websocket, so the mock
+// settles the deferred request instead of returning the response directly.
+function renderDeferredTableList(settle?: (requestId: RequestId) => void) {
+  const client = MockRequestClient.create();
+  client.previewSQLTableList.mockImplementation(async ({ requestId }) => {
+    settle?.(requestId);
+    return null;
+  });
+  store.set(requestClientAtom, client);
+  render(
+    <TableList
+      tables={[]}
+      tablesResolved={false}
+      sqlTableContext={sqlTableContext}
+    />,
+    { wrapper },
+  );
+  return client;
+}
+
+describe("TableList deferred discovery", () => {
+  it("shows the error when the request rejects", async () => {
+    renderDeferredTableList((requestId) =>
+      PreviewSQLTableList.reject(requestId, new Error("engine offline")),
+    );
+
+    expect(screen.getByText("Loading tables...")).toBeInTheDocument();
+
+    await waitFor(() => {
+      expect(screen.getByText("engine offline")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("Loading tables...")).toBeNull();
+  });
+
+  it("shows the error when the response has no tables field", async () => {
+    renderDeferredTableList((requestId) =>
+      PreviewSQLTableList.resolve(requestId, {} as SQLTableListPreview),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("No tables available")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("Loading tables...")).toBeNull();
+  });
+
+  it("shows the empty state for an empty table list", async () => {
+    renderDeferredTableList((requestId) =>
+      PreviewSQLTableList.resolve(requestId, {
+        tables: [],
+      } as unknown as SQLTableListPreview),
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText("No tables found")).toBeInTheDocument();
+    });
+    expect(screen.queryByText("Loading tables...")).toBeNull();
+  });
+
+  it("requests the table list with the table context and waits for the kernel", async () => {
+    let pendingRequestId: RequestId | undefined;
+    const client = renderDeferredTableList((requestId) => {
+      pendingRequestId = requestId;
+    });
+
+    await waitFor(() => {
+      expect(client.previewSQLTableList).toHaveBeenCalledTimes(1);
+    });
+    expect(client.previewSQLTableList).toHaveBeenCalledWith(
+      expect.objectContaining({
+        engine: "my_engine",
+        database: "my_db",
+        schema: "public",
+        schemaPath: ["public"],
+      }),
+    );
+    expect(screen.getByText("Loading tables...")).toBeInTheDocument();
+
+    // Settle the request so the process-wide registry does not keep the entry.
+    expect(pendingRequestId).toBeDefined();
+    PreviewSQLTableList.resolve(
+      pendingRequestId as RequestId,
+      {
+        tables: [],
+      } as unknown as SQLTableListPreview,
+    );
+    await waitFor(() => {
+      expect(screen.queryByText("Loading tables...")).toBeNull();
+    });
+    expect(PreviewSQLTableList.requests.size).toBe(0);
+  });
+});

package/src/components/datasources/column-preview.tsx

@@ -112,12 +112,16 @@ export const DatasetColumnPreview: React.FC<{
 
   const addDataframeChart = preview.chart_code &&
     table.source_type === "local" && (
-      <AddDataframeChart chartCode={preview.chart_code} />
+      <AddDataframeChart
+        chartCode={preview.chart_code}
+        columnName={column.name}
+      />
     );
 
   const addSQLChart = table.source_type === "duckdb" && (
     <Tooltip content="Add SQL cell" delayDuration={400}>
       <Button
+        aria-label={`Add SQL cell for ${column.name}`}
         variant="outline"
         size="icon"
         className="z-10 bg-background absolute right-1 -top-1"
@@ -238,7 +242,8 @@ export function renderChart(chartSpec: string, theme: Theme) {
 
 export const AddDataframeChart: React.FC<{
   chartCode: string;
-}> = ({ chartCode }) => {
+  columnName: string;
+}> = ({ chartCode, columnName }) => {
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
   const lastFocusedCellId = useLastFocusedCellId();
   const { createNewCell } = useCellActions();
@@ -261,6 +266,7 @@ export const AddDataframeChart: React.FC<{
   return (
     <Tooltip content="Add chart to notebook" delayDuration={400}>
       <Button
+        aria-label={`Add chart to notebook for ${columnName}`}
         variant="outline"
         size="icon"
         className="z-10 bg-background absolute right-1 -top-0.5"

package/src/components/datasources/datasources.tsx

@@ -13,7 +13,7 @@ import {
   VisibilityToggleButton,
 } from "@/components/editor/file-tree/tree-actions";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
 import { Tooltip } from "@/components/ui/tooltip";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
@@ -284,6 +284,7 @@ export const DataSources: React.FC = () => {
         {hasSearch && (
           <button
             type="button"
+            aria-label="Clear table search"
             className="float-right border-b px-2 m-0 h-full hover:bg-accent hover:text-accent-foreground"
             onClick={() => setSearchValue("")}
           >
@@ -702,7 +703,40 @@ const SchemaNode: React.FC<SchemaNodeProps> = (props) => {
   );
 };
 
-const TableList: React.FC<{
+// Kept outside the component because the React Compiler does not yet
+// support try/finally inside component bodies.
+async function loadTableList(
+  sqlTableContext: SQLTableContext,
+  addTableList: ReturnType<typeof useDataSourceActions>["addTableList"],
+  setLoading: (loading: boolean) => void,
+) {
+  setLoading(true);
+  try {
+    const { engine, database, schema, schemaPath } = sqlTableContext;
+    const previewTableList = await PreviewSQLTableList.request({
+      engine: engine,
+      database: database,
+      schema: schema,
+      schemaPath: schemaPath ?? [],
+    });
+
+    if (!previewTableList?.tables) {
+      throw new Error("No tables available");
+    }
+
+    addTableList({
+      tables: previewTableList.tables,
+      sqlTableContext: sqlTableContext,
+    });
+  } finally {
+    setLoading(false);
+  }
+}
+
+/**
+ * This is exported for testing purposes only.
+ */
+export const TableList: React.FC<{
   tables: DataTable[];
   sqlTableContext?: SQLTableContext;
   searchValue?: string;
@@ -731,26 +765,7 @@ const TableList: React.FC<{
   // resets tablesResolved to false).
   const { isPending, error } = useAsyncData(async () => {
     if (!tablesResolved && sqlTableContext) {
-      setTablesLoading(true);
-
-      const { engine, database, schema, schemaPath } = sqlTableContext;
-      const previewTableList = await PreviewSQLTableList.request({
-        engine: engine,
-        database: database,
-        schema: schema,
-        schemaPath: schemaPath ?? [],
-      });
-
-      if (!previewTableList?.tables) {
-        setTablesLoading(false);
-        throw new Error("No tables available");
-      }
-
-      addTableList({
-        tables: previewTableList.tables,
-        sqlTableContext: sqlTableContext,
-      });
-      setTablesLoading(false);
+      await loadTableList(sqlTableContext, addTableList, setTablesLoading);
     }
   }, [tablesResolved, sqlTableContext]);
 
@@ -964,6 +979,7 @@ const DatasetTableItem: React.FC<{
         {renderRowsByColumns()}
         <Tooltip content="Add table to notebook" delayDuration={400}>
           <Button
+            aria-label={`Add table ${table.name} to notebook`}
             className="group-hover:inline-flex hidden"
             variant="text"
             size="icon"
@@ -1054,19 +1070,16 @@ const DatasetColumnItem: React.FC<{
           {isIndexed &&
             renderItemSubtext({ tooltipContent: "Indexed", content: "IDX" })}
         </div>
-        <Tooltip content="Copy column name" delayDuration={400}>
-          <Button
-            variant="text"
-            size="icon"
-            className="group-hover:opacity-100 opacity-0 hover:bg-muted text-muted-foreground hover:text-foreground"
-          >
-            <CopyClipboardIcon
-              tooltip={false}
-              value={column.name}
-              className="h-3 w-3"
-            />
-          </Button>
-        </Tooltip>
+        <CopyClipboardIcon
+          tooltip="Copy column name"
+          value={column.name}
+          ariaLabel={`Copy column name ${column.name}`}
+          className="h-3 w-3"
+          buttonClassName={cn(
+            buttonVariants({ variant: "text", size: "icon" }),
+            "group-hover:opacity-100 opacity-0 hover:bg-muted text-muted-foreground hover:text-foreground",
+          )}
+        />
         <span className="text-xs text-muted-foreground">
           {column.external_type}
         </span>

package/src/components/debugger/debugger-code.tsx

@@ -162,6 +162,7 @@ export const DebuggerControls: React.FC<{
     <div className="flex">
       <Tooltip content="Next line">
         <Button
+          aria-label="Next line"
           variant="text"
           size="icon"
           data-testid="debugger-next-button"
@@ -173,6 +174,7 @@ export const DebuggerControls: React.FC<{
       </Tooltip>
       <Tooltip content="Continue execution">
         <Button
+          aria-label="Continue execution"
           variant="text"
           size="icon"
           data-testid="debugger-continue-button"
@@ -187,6 +189,7 @@ export const DebuggerControls: React.FC<{
       </Tooltip>
       <Tooltip content="Print stack trace">
         <Button
+          aria-label="Print stack trace"
           variant="text"
           size="icon"
           data-testid="debugger-stack-button"
@@ -198,6 +201,7 @@ export const DebuggerControls: React.FC<{
       </Tooltip>
       <Tooltip content="Help">
         <Button
+          aria-label="Debugger help"
           variant="text"
           size="icon"
           data-testid="debugger-help-button"
@@ -210,6 +214,7 @@ export const DebuggerControls: React.FC<{
       {onClear && (
         <Tooltip content="Quit and clear">
           <Button
+            aria-label="Quit and clear debugger"
             variant="text"
             size="icon"
             data-testid="debugger-clear-button"

package/src/components/dependency-graph/dependency-graph-tree.tsx

@@ -85,13 +85,13 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
 
   // oxlint-disable-next-line react/hook-use-state
   const [initial] = useState(() => {
-    const elements = elementsBuilder.createElements(
+    const elements = elementsBuilder.createElements({
       cellIds,
       cellAtoms,
       variables,
-      settings.hidePureMarkdown,
-      settings.hideReusableFunctions,
-    );
+      hidePureMarkdown: settings.hidePureMarkdown,
+      hideReusableFunctions: settings.hideReusableFunctions,
+    });
     return layoutElements({
       nodes: withExpansion(elements.nodes, expandedIds),
       edges: elements.edges,
@@ -163,13 +163,13 @@ export const DependencyGraphTree: React.FC<PropsWithChildren<Props>> = ({
 
   // Rebuild + re-layout when the graph inputs or the expand/collapse set change.
   useEffect(() => {
-    const elements = elementsBuilder.createElements(
+    const elements = elementsBuilder.createElements({
       cellIds,
       cellAtoms,
       variables,
-      settings.hidePureMarkdown,
-      settings.hideReusableFunctions,
-    );
+      hidePureMarkdown: settings.hidePureMarkdown,
+      hideReusableFunctions: settings.hideReusableFunctions,
+    });
     syncChanges({
       nodes: withExpansion(elements.nodes, expandedIds),
       edges: elements.edges,

package/src/components/dependency-graph/elements.ts

@@ -42,6 +42,14 @@ export interface NodeData {
 }
 export type CustomNodeProps = NodeProps<NodeData>;
 
+interface CreateElementsOptions {
+  cellIds: CellId[];
+  cellAtoms: Atom<CellData>[];
+  variables: Variables;
+  hidePureMarkdown: boolean;
+  hideReusableFunctions: boolean;
+}
+
 const LINE_HEIGHT = 11; // matches TinyCode.css
 
 export function getNodeHeight(linesOfCode: number) {
@@ -176,13 +184,10 @@ export function computeDefsByCell(
 }
 
 interface ElementsBuilder {
-  createElements: (
-    cellIds: CellId[],
-    cellAtoms: Atom<CellData>[],
-    variables: Variables,
-    hidePureMarkdown: boolean,
-    hideReusableFunctions: boolean,
-  ) => { nodes: Node<NodeData>[]; edges: Edge[] };
+  createElements: (options: CreateElementsOptions) => {
+    nodes: Node<NodeData>[];
+    edges: Edge[];
+  };
 }
 
 export class VerticalElementsBuilder implements ElementsBuilder {
@@ -225,13 +230,11 @@ export class VerticalElementsBuilder implements ElementsBuilder {
     };
   }
 
-  public createElements(
-    cellIds: CellId[],
-    cellAtoms: Atom<CellData>[],
-    variables: Variables,
-    _hidePureMarkdown: boolean,
-    _hideReusableFunctions: boolean,
-  ) {
+  public createElements({
+    cellIds,
+    cellAtoms,
+    variables,
+  }: CreateElementsOptions) {
     let prevY = 0;
     const nodes: Node<NodeData>[] = [];
     const edges: Edge[] = [];
@@ -311,13 +314,13 @@ export class TreeElementsBuilder implements ElementsBuilder {
     };
   }
 
-  public createElements(
-    cellIds: CellId[],
-    cellAtoms: Atom<CellData>[],
-    variables: Variables,
-    hidePureMarkdown: boolean,
-    hideReusableFunctions: boolean,
-  ) {
+  public createElements({
+    cellIds,
+    cellAtoms,
+    variables,
+    hidePureMarkdown,
+    hideReusableFunctions,
+  }: CreateElementsOptions) {
     const nodes: Node<NodeData>[] = [];
 
     const cellRuntime = getNotebook().cellRuntime;

package/src/components/dependency-graph/panels.tsx

@@ -216,11 +216,12 @@ export const GraphSelectionPanel: React.FC<{
               </Button>
             </Tooltip>
             <ConnectionCellActionsDropdown cellId={selection.id}>
-              <Button variant="ghost" size="icon">
+              <Button aria-label="Cell actions" variant="ghost" size="icon">
                 <MoreVerticalIcon className="w-4 h-4" />
               </Button>
             </ConnectionCellActionsDropdown>
             <Button
+              aria-label="Close cell details"
               variant="text"
               size="icon"
               onClick={() => {

package/src/components/dependency-graph/utils/__tests__/layout.test.ts

@@ -7,10 +7,12 @@ import { boundingBox, placeIslands } from "../layout";
 
 function node(
   id: string,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
+  {
+    x,
+    y,
+    width,
+    height,
+  }: { x: number; y: number; width: number; height: number },
 ): Node<NodeData> {
   return {
     id,
@@ -28,8 +30,8 @@ describe("boundingBox", () => {
 
   it("spans position + size across nodes", () => {
     const box = boundingBox([
-      node("a", 0, 0, 50, 50),
-      node("b", 10, 20, 100, 40),
+      node("a", { x: 0, y: 0, width: 50, height: 50 }),
+      node("b", { x: 10, y: 20, width: 100, height: 40 }),
     ]);
     expect(box).toEqual({ minX: 0, minY: 0, maxX: 110, maxY: 60 });
   });
@@ -52,12 +54,17 @@ describe("boundingBox", () => {
 
 describe("placeIslands", () => {
   it("returns nothing when there are no islands", () => {
-    expect(placeIslands([], [node("a", 0, 0, 100, 100)])).toEqual([]);
+    expect(
+      placeIslands([], [node("a", { x: 0, y: 0, width: 100, height: 100 })]),
+    ).toEqual([]);
   });
 
   it("stacks islands in a column to the right of the placed graph", () => {
-    const placed = [node("main", 0, 0, 200, 300)];
-    const islands = [node("i0", 0, 0, 90, 40), node("i1", 0, 0, 90, 40)];
+    const placed = [node("main", { x: 0, y: 0, width: 200, height: 300 })];
+    const islands = [
+      node("i0", { x: 0, y: 0, width: 90, height: 40 }),
+      node("i1", { x: 0, y: 0, width: 90, height: 40 }),
+    ];
     const result = placeIslands(islands, placed);
     // startX = maxX(200) + margin(40) = 240; startY = minY(0).
     expect(result[0].position).toEqual({ x: 240, y: 0 });
@@ -66,9 +73,9 @@ describe("placeIslands", () => {
   });
 
   it("wraps into a new column when the column gets too tall", () => {
-    const placed = [node("main", 0, 0, 200, 300)];
+    const placed = [node("main", { x: 0, y: 0, width: 200, height: 300 })];
     const islands = Array.from({ length: 10 }, (_, i) =>
-      node(`i${i}`, 0, 0, 90, 40),
+      node(`i${i}`, { x: 0, y: 0, width: 90, height: 40 }),
     );
     const result = placeIslands(islands, placed);
     const firstColumnX = result[0].position.x;

package/src/components/editor/SortableCell.tsx

@@ -71,7 +71,6 @@ export const SortableCell = React.forwardRef(
     return (
       <SortableCellInternal
         ref={ref}
-        cellId={cellId}
         canMoveX={canMoveX}
         {...props}
         attributes={attributes}
@@ -86,7 +85,7 @@ export const SortableCell = React.forwardRef(
 );
 SortableCell.displayName = "SortableCell";
 
-interface SortableCellInternalProps extends Props {
+interface SortableCellInternalProps extends Omit<Props, "cellId"> {
   children: React.ReactNode;
   attributes: DraggableAttributes;
   listeners: SyntheticListenerMap | undefined;
@@ -99,7 +98,6 @@ interface SortableCellInternalProps extends Props {
 const SortableCellInternal = React.forwardRef(
   (
     {
-      cellId,
       canMoveX,
       children,
       attributes,