@marimo-team/islands 0.25.3-dev2 → 0.25.3-dev200

package/src/components/datasources/datasources.tsx

@@ -13,11 +13,12 @@ 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";
-import { cellIdsAtom, useCellActions } from "@/core/cells/cells";
+import { cellIdsAtom } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { useLastFocusedCellId } from "@/core/cells/focus";
 import { autoInstantiateAtom } from "@/core/config/config";
 import {
@@ -78,6 +79,7 @@ import {
   areChildSchemasResolved,
   areSchemasResolved,
   areTablesResolved,
+  fullyQualifiedTableName,
   isSchemaless,
   schemaSubtreeMatchesSearch,
   shouldExpandDatabaseForSearch,
@@ -132,7 +134,7 @@ const sortedTablesAtom = atom((get) => {
       return 0;
     }
 
-    const index = cellIds.inOrderIds.indexOf(variable.declaredBy[0]);
+    const index = cellIds.indexOf(variable.declaredBy[0]);
     if (index === -1) {
       return 0;
     }
@@ -284,6 +286,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 +639,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 +705,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 +767,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]);
 
@@ -833,13 +850,13 @@ const DatasetTableItem: React.FC<{
 
   const autoInstantiate = useAtomValue(autoInstantiateAtom);
   const lastFocusedCellId = useLastFocusedCellId();
-  const { createNewCell } = useCellActions();
+  const { createCell } = useCellActions();
   const addCodeToNewCell = useAddCodeToNewCell();
 
   const handleAddTable = () => {
     maybeAddMarimoImport({
       autoInstantiate,
-      createNewCell,
+      createCell,
       fromCellId: lastFocusedCellId,
     });
     const getCode = () => {
@@ -964,6 +981,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 +1072,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 +1097,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/custom-node.tsx

@@ -30,7 +30,7 @@ const EQUALITY_CHECK = (
 export const CustomNode = memo((props: CustomNodeProps) => {
   const { data, selected } = props; // must match the equality check
   const cell = useAtomValue(data.atom);
-  const cellIndex = useCellIds().inOrderIds.indexOf(cell.id);
+  const cellIndex = useCellIds().indexOf(cell.id);
   const handleColor = selected ? "var(--gray-9)" : "var(--gray-3)";
   const edgeMarkers = use(EdgeMarkerContext);
 

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/minimap-content.tsx

@@ -7,14 +7,11 @@ import {
   cellGraphsAtom,
   isVariableAffectedBySelectedCell,
 } from "@/components/editor/chrome/wrapper/minimap-state";
-import {
-  useCellActions,
-  useCellData,
-  useCellIds,
-  useCellRuntime,
-} from "@/core/cells/cells";
+import { useCellData, useCellRuntime } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import { cellFocusAtom, useCellFocusActions } from "@/core/cells/focus";
 import type { CellId } from "@/core/cells/ids";
+import { useLayout } from "@/core/cells/layout";
 import { useVariables } from "@/core/variables/state";
 import { cn } from "@/utils/cn";
 import { extractCellPreview } from "./utils/cell-preview";
@@ -384,28 +381,25 @@ function isNonReferenceableCell(graph: CellGraph): boolean {
  * Shows a scrollable list of cells with dependency visualization.
  */
 export const MinimapContent: React.FC = () => {
-  const cellIds = useCellIds();
+  const layout = useLayout();
+  const rows = layout.columns.flatMap((column, index) =>
+    column.ids.map((cellId, position) => ({
+      cellId,
+      startsColumn: index > 0 && position === 0,
+    })),
+  );
   const cellPositions: Record<CellId, number> = Object.fromEntries(
-    cellIds.inOrderIds.map((id, idx) => [id, idx]),
+    rows.map(({ cellId }, idx) => [cellId, idx]),
   );
-  const columnBoundaries: number[] = [];
-  let cellCount = 0;
-  for (const [idx, column] of cellIds.getColumns().entries()) {
-    if (idx > 0) {
-      columnBoundaries.push(cellCount);
-    }
-    cellCount += column.inOrderIds.length;
-  }
 
   return (
     <div className="overflow-y-auto overflow-x-hidden flex-1 scrollbar-none h-full max-w-80">
       <div className="py-3 pl-3 pr-4 relative min-h-full">
-        {cellIds.inOrderIds.map((cellId, idx) => {
-          const isColumnBoundary = columnBoundaries.includes(idx);
+        {rows.map(({ cellId, startsColumn }, idx) => {
           return (
             <React.Fragment key={cellId}>
               {/* Subtle visual divider between nodes */}
-              {isColumnBoundary && (
+              {startsColumn && (
                 <div
                   className="absolute left-5 w-[36px] h-px bg-(--gray-4) pointer-events-none"
                   aria-hidden="true"

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

@@ -14,7 +14,8 @@ import {
 } from "lucide-react";
 import React, { memo, useId } from "react";
 import { type Edge, Panel } from "reactflow";
-import { getCellEditorView, useCellActions } from "@/core/cells/cells";
+import { getCellEditorView } from "@/core/cells/cells";
+import { useCellActions } from "@/core/cells/actions";
 import type { CellId } from "@/core/cells/ids";
 import { goToVariableDefinition } from "@/core/codemirror/go-to-definition/commands";
 import type { Variable, Variables } from "@/core/variables/types";
@@ -216,11 +217,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/Output.tsx

@@ -66,7 +66,10 @@ export type OnRefactorWithAI = (opts: {
  * Renders an output based on an OutputMessage.
  */
 export const OutputRenderer: React.FC<{
-  message: Pick<OutputMessage, "channel" | "data" | "mimetype">;
+  message: Pick<
+    OutputMessage,
+    "channel" | "data" | "mimetype" | "code" | "traceback_format"
+  >;
   cellId?: CellId;
   onRefactorWithAI?: OnRefactorWithAI;
   wrapText?: boolean;
@@ -172,7 +175,9 @@ export const OutputRenderer: React.FC<{
 
     case "application/vnd.marimo+error":
       invariant(Array.isArray(data), "Expected array data");
-      return <MarimoErrorOutput cellId={cellId} errors={data} />;
+      return (
+        <MarimoErrorOutput cellId={cellId} errors={data} code={message.code} />
+      );
 
     case "application/vnd.marimo+traceback":
       invariant(
@@ -183,6 +188,8 @@ export const OutputRenderer: React.FC<{
         <MarimoTracebackOutput
           onRefactorWithAI={onRefactorWithAI}
           traceback={data}
+          tracebackFormat={message.traceback_format}
+          code={message.code}
           cellId={cellId}
         />
       );

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,