@marimo-team/islands 0.25.3-dev17 → 0.25.3-dev170

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";
@@ -78,6 +78,7 @@ import {
   areChildSchemasResolved,
   areSchemasResolved,
   areTablesResolved,
+  fullyQualifiedTableName,
   isSchemaless,
   schemaSubtreeMatchesSearch,
   shouldExpandDatabaseForSearch,
@@ -284,6 +285,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("")}
           >
@@ -636,7 +638,7 @@ const SchemaNode: React.FC<SchemaNodeProps> = (props) => {
   const [prevSearchValue, setPrevSearchValue] = React.useState(searchValue);
   const [prevExpandForSearch, setPrevExpandForSearch] =
     React.useState(expandForSearch);
-  const uniqueValue = `${databaseName}:${schemaPath.join(".")}`;
+  const uniqueValue = JSON.stringify(["schema", databaseName, ...schemaPath]);
   const childSchemas = schema.child_schemas ?? [];
 
   // Re-sync when the query changes or when newly resolved data turns this
@@ -702,7 +704,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 +766,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 +980,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 +1071,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>
@@ -1082,9 +1096,7 @@ const DatasetColumnItem: React.FC<{
               column={column}
               onAddColumnChart={handleAddColumn}
               preview={columnsPreviews.get(
-                sqlTableContext
-                  ? `${sqlTableContext.database}.${sqlTableContext.schema}.${table.name}:${column.name}`
-                  : `${table.name}:${column.name}`,
+                `${fullyQualifiedTableName(sqlTableContext, table.name)}:${column.name}`,
               )}
               sqlTableContext={sqlTableContext}
             />

package/src/components/datasources/utils.ts

@@ -13,26 +13,29 @@ import type {
 import { logNever } from "@/utils/assertNever";
 import type { ColumnHeaderStatsKey } from "../data-table/types";
 
-/**
- * Stable id for a table node in the datasources tree.
- *
- * schemaPath already includes the leaf schema for nested namespaces, so use it
- * when present and fall back to the flat schema name otherwise (avoids
- * duplicating the leaf, e.g. `top.nested.nested.table`).
- */
+function tablePath(context: SQLTableContext, tableName: string): string[] {
+  const segments = context.schemaPath?.length
+    ? context.schemaPath
+    : [context.schema];
+  return [context.database, ...segments.filter(Boolean), tableName];
+}
+
 export function tableUniqueId(
-  sqlTableContext: SQLTableContext | undefined,
+  context: SQLTableContext | undefined,
   tableName: string,
 ): string {
-  if (!sqlTableContext) {
-    return tableName;
-  }
-  const segments = (
-    sqlTableContext.schemaPath?.length
-      ? sqlTableContext.schemaPath
-      : [sqlTableContext.schema]
-  ).filter(Boolean);
-  return [sqlTableContext.database, ...segments, tableName].join(".");
+  return context ? JSON.stringify(tablePath(context, tableName)) : tableName;
+}
+
+export function fullyQualifiedTableName(
+  context: SQLTableContext | undefined,
+  tableName: string,
+): string {
+  return context
+    ? getFormatter(context.dialect).formatTablePath(
+        tablePath(context, tableName),
+      )
+    : tableName;
 }
 
 // Some databases have no schemas, so we don't show it (eg. Clickhouse)
@@ -114,6 +117,10 @@ const defaultFormatter: SqlCodeFormatter = {
     `SELECT ${columnName} FROM ${tableName} LIMIT 100`,
 };
 
+function quoteIdentifier(identifier: string): string {
+  return `"${identifier.replaceAll('"', '""')}"`;
+}
+
 function getFormatter(dialect: string): SqlCodeFormatter {
   dialect = dialect.toLowerCase();
   if (!isKnownDialect(dialect)) {
@@ -146,9 +153,9 @@ function getFormatter(dialect: string): SqlCodeFormatter {
       // Quote column and table names to avoid raising errors on weird characters
       return {
         formatTablePath: (tablePath: string[]) =>
-          tablePath.map((part) => `"${part}"`).join("."),
+          tablePath.map(quoteIdentifier).join("."),
         formatSelectClause: (columnName: string, tableName: string) =>
-          `SELECT ${columnName === "*" ? "*" : `"${columnName}"`} FROM ${tableName} LIMIT 100`,
+          `SELECT ${columnName === "*" ? "*" : quoteIdentifier(columnName)} FROM ${tableName} LIMIT 100`,
       };
     case "db2":
     case "db2i":
@@ -194,6 +201,7 @@ export function sqlCode({
       engine,
       schema,
       defaultSchema,
+      schemaPath,
       defaultDatabase,
       database,
       dialect,
@@ -207,12 +215,13 @@ export function sqlCode({
       }
     } else {
       // Include schema if it's not the default schema
-      if (schema !== defaultSchema) {
-        tablePath.unshift(schema);
+      const path = schemaPath?.length ? schemaPath : [schema];
+      if (path.length > 1 || path[0] !== defaultSchema) {
+        tablePath.unshift(...path);
       }
 
-      // Include database if it's not the default database
-      if (database !== defaultDatabase) {
+      // Nested schema names can also be attached catalog names.
+      if (path.length > 1 || database !== defaultDatabase) {
         tablePath.unshift(database);
       }
     }

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,

package/src/{core/attachments/__tests__/toast.test.tsx → components/editor/__tests__/agent-toast.test.tsx}

@@ -5,7 +5,7 @@ import { act, render, renderHook } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { Toaster } from "@/components/ui/toaster";
 import { clearToasts, toast, useToast } from "@/components/ui/use-toast";
-import { agentToast } from "../toast";
+import { agentToast } from "../agent-toast";
 
 describe("agent notifications", () => {
   beforeEach(() => {

package/src/components/editor/__tests__/data-attributes.test.tsx

@@ -57,7 +57,7 @@ describe("Cell data attributes", () => {
           signature_hint_on_typing: false,
           copilot: false,
         },
-        formatting: { line_length: 88 },
+        formatting: { line_length: 88, infer_types: "off" },
         package_management: { manager: "pip" },
         runtime: {
           auto_instantiate: false,
@@ -75,7 +75,11 @@ describe("Cell data attributes", () => {
           browser: "default",
           follow_symlink: false,
         },
-        save: { autosave: "off", autosave_delay: 1000, format_on_save: false },
+        save: {
+          autosave: "off",
+          autosave_delay: 1000,
+          format_on_save: false,
+        },
         ai: {},
       } as UserConfig;