@marimo-team/frontend 0.23.10-dev2 → 0.23.10-dev21

package/src/components/datasources/datasources.tsx

@@ -1,13 +1,17 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { CommandList } from "cmdk";
-import { atom, useAtomValue, useSetAtom } from "jotai";
+import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 import { PlusIcon, PlusSquareIcon, XIcon } from "lucide-react";
 import React from "react";
 import { dbDisplayName } from "@/components/databases/display";
 import { EngineVariable } from "@/components/databases/engine-variable";
 import { DatabaseLogo } from "@/components/databases/icon";
-import { RefreshIconButton } from "@/components/editor/file-tree/tree-actions";
+import {
+  RefreshIconButton,
+  VisibilityToggleButton,
+} from "@/components/editor/file-tree/tree-actions";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { Button } from "@/components/ui/button";
 import { Command, CommandInput, CommandItem } from "@/components/ui/command";
@@ -52,6 +56,7 @@ import { sortBy } from "@/utils/arrays";
 import { logNever } from "@/utils/assertNever";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
+import { jotaiJsonStorage } from "@/utils/storage/jotai";
 import {
   DatabaseIcon,
   SchemaIcon,
@@ -116,6 +121,63 @@ const sortedTablesAtom = atom((get) => {
   });
 });
 
+/**
+ * Whether to hide empty schemas and databases (those with no tables) in the
+ * datasources panel.
+ */
+export const hideEmptyDatasourcesAtom = atomWithStorage<boolean>(
+  "marimo:datasources:hideEmpty",
+  false,
+  jotaiJsonStorage,
+  { getOnInit: true },
+);
+
+function isKnownEmptySchema(schema: DatabaseSchema): boolean {
+  return schema.tables_resolved !== false && schema.tables.length === 0;
+}
+
+/**
+ * Apply the "hide empty" filter to a connection's databases.
+ *
+ * - Schemas with confirmed-empty table lists are hidden.
+ * - Databases are hidden when either (a) their schemas have been enumerated
+ *   and the list is empty, or (b) every schema in them was hidden by the
+ *   schema-level filter.
+ * - Databases / schemas whose contents haven't been resolved yet (deferred
+ *   discovery — `schemas_resolved === false` or `tables_resolved === false`)
+ *   are preserved so the user can expand them to trigger a fetch.
+ */
+export function filterEmptyDatabases(databases: Database[]): Database[] {
+  let changed = false;
+  const result: Database[] = [];
+  for (const database of databases) {
+    // Known-empty database: schema list was enumerated and is empty.
+    if (database.schemas_resolved !== false && database.schemas.length === 0) {
+      changed = true;
+      continue;
+    }
+    // Deferred schema discovery — keep so the user can expand and load.
+    if (database.schemas.length === 0) {
+      result.push(database);
+      continue;
+    }
+    const visibleSchemas = database.schemas.filter(
+      (schema) => !isKnownEmptySchema(schema),
+    );
+    if (visibleSchemas.length === 0) {
+      changed = true;
+      continue;
+    }
+    if (visibleSchemas.length === database.schemas.length) {
+      result.push(database);
+      continue;
+    }
+    changed = true;
+    result.push({ ...database, schemas: visibleSchemas });
+  }
+  return changed ? result : databases;
+}
+
 /**
  * This atom is used to get the data connections that are available to the user.
  * It filters out the internal engines if it has no databases or if it has only the in-memory database and no schemas.
@@ -152,10 +214,27 @@ export const connectionsAtom = atom((get) => {
 
 export const DataSources: React.FC = () => {
   const [searchValue, setSearchValue] = React.useState<string>("");
+  const [hideEmpty, setHideEmpty] = useAtom(hideEmptyDatasourcesAtom);
 
   const closeAllColumns = useSetAtom(closeAllColumnsAtom);
   const tables = useAtomValue(sortedTablesAtom);
-  const dataConnections = useAtomValue(connectionsAtom);
+  const rawConnections = useAtomValue(connectionsAtom);
+
+  const dataConnections = React.useMemo(() => {
+    if (!hideEmpty) {
+      return rawConnections;
+    }
+    let changed = false;
+    const filtered = rawConnections.map((connection) => {
+      const databases = filterEmptyDatabases(connection.databases);
+      if (databases === connection.databases) {
+        return connection;
+      }
+      changed = true;
+      return { ...connection, databases };
+    });
+    return changed ? filtered : rawConnections;
+  }, [rawConnections, hideEmpty]);
 
   if (tables.length === 0 && dataConnections.length === 0) {
     return (
@@ -204,6 +283,16 @@ export const DataSources: React.FC = () => {
           </button>
         )}
 
+        <VisibilityToggleButton
+          data-testid="datasources-hide-empty-button"
+          isVisible={!hideEmpty}
+          onToggle={() => setHideEmpty(!hideEmpty)}
+          showTooltip="Show empty schemas and databases"
+          hideTooltip="Hide empty schemas and databases"
+          size="sm"
+          className="px-2 rounded-none focus-visible:outline-hidden"
+        />
+
         <AddConnectionDialog>
           <Button
             variant="ghost"

package/src/components/editor/cell/cell-context-menu.tsx

@@ -61,6 +61,7 @@ export const CellActionsContextMenu = ({
   });
   const [imageRightClicked, setImageRightClicked] =
     React.useState<HTMLImageElement>();
+  const suppressCloseAutoFocus = React.useRef(false);
 
   const DEFAULT_CONTEXT_MENU_ITEMS: ActionButton[] = [
     {
@@ -166,7 +167,10 @@ export const CellActionsContextMenu = ({
       handle: () => {
         const editorView = getEditorView();
         if (editorView) {
-          goToDefinitionAtCursorPosition(editorView);
+          // Only suppress focus restoration when we actually navigated;
+          // otherwise let Radix return focus to the trigger cell.
+          suppressCloseAutoFocus.current =
+            goToDefinitionAtCursorPosition(editorView);
         }
       },
     },
@@ -194,7 +198,16 @@ export const CellActionsContextMenu = ({
       >
         {children}
       </ContextMenuTrigger>
-      <ContextMenuContent className="w-[300px]" scrollable={true}>
+      <ContextMenuContent
+        className="w-[300px]"
+        scrollable={true}
+        onCloseAutoFocus={(evt) => {
+          if (suppressCloseAutoFocus.current) {
+            evt.preventDefault();
+            suppressCloseAutoFocus.current = false;
+          }
+        }}
+      >
         {visibleActions.map((group, i) => (
           <Fragment key={i}>
             {group.map((action) => {

package/src/components/editor/documentation.css

@@ -51,6 +51,22 @@
     }
   }
 
+  a {
+    cursor: pointer;
+    text-decoration: inherit;
+
+    @apply text-link;
+  }
+
+  a:hover,
+  a:active {
+    text-decoration: underline;
+  }
+
+  a:visited {
+    @apply text-link-visited;
+  }
+
   code {
     @apply border px-1 rounded font-mono bg-[var(--slate-2)] text-sm mb-4 mt-2;
   }

package/src/components/editor/file-tree/file-explorer.tsx

@@ -9,8 +9,6 @@ import {
   CopyMinusIcon,
   DownloadIcon,
   ExternalLinkIcon,
-  EyeIcon,
-  EyeOffIcon,
   FilePlus2Icon,
   FolderPlusIcon,
   ListTreeIcon,
@@ -43,6 +41,7 @@ import {
   MENU_ITEM_ICON_CLASS,
   RefreshIconButton,
   TreeChevron,
+  VisibilityToggleButton,
 } from "@/components/editor/file-tree/tree-actions";
 import { MarimoIcon, MarimoPlusIcon } from "@/components/icons/marimo-icons";
 import { Spinner } from "@/components/icons/spinner";
@@ -338,22 +337,13 @@ const Toolbar = ({
         data-testid="file-explorer-refresh-button"
         onClick={onRefresh}
       />
-      <Tooltip
-        content={showHiddenFiles ? "Hide hidden files" : "Show hidden files"}
-      >
-        <Button
-          data-testid="file-explorer-hidden-files-button"
-          onClick={onHidden}
-          variant="text"
-          size="xs"
-        >
-          {showHiddenFiles ? (
-            <EyeIcon size={16} className="text-primary" />
-          ) : (
-            <EyeOffIcon size={16} />
-          )}
-        </Button>
-      </Tooltip>
+      <VisibilityToggleButton
+        data-testid="file-explorer-hidden-files-button"
+        isVisible={showHiddenFiles}
+        onToggle={onHidden}
+        showTooltip="Show hidden files"
+        hideTooltip="Hide hidden files"
+      />
       <Tooltip content="Collapse all folders">
         <Button
           data-testid="file-explorer-collapse-button"

package/src/components/editor/file-tree/tree-actions.tsx

@@ -2,11 +2,13 @@
 
 import {
   ChevronRightIcon,
+  EyeIcon,
+  EyeOffIcon,
   MoreVerticalIcon,
   RefreshCwIcon,
 } from "lucide-react";
 import React, { useCallback, useState } from "react";
-import { Button } from "@/components/ui/button";
+import { Button, type ButtonProps } from "@/components/ui/button";
 import { Tooltip } from "@/components/ui/tooltip";
 import { cn } from "@/utils/cn";
 
@@ -73,6 +75,49 @@ export const RefreshIconButton: React.FC<{
   return <Tooltip content={tooltip}>{button}</Tooltip>;
 };
 
+/**
+ * Toggle button that switches between an eye (visible) and crossed-out eye
+ * (hidden) icon. Used to show/hide optional items in toolbars, e.g. hidden
+ * files in the file explorer or empty schemas in the data sources panel.
+ */
+export const VisibilityToggleButton: React.FC<{
+  /** Whether the optional items are currently visible. */
+  isVisible: boolean;
+  onToggle: () => void;
+  showTooltip: string;
+  hideTooltip: string;
+  size?: ButtonProps["size"];
+  className?: string;
+  iconClassName?: string;
+  "data-testid"?: string;
+}> = ({
+  isVisible,
+  onToggle,
+  showTooltip,
+  hideTooltip,
+  size = "xs",
+  className,
+  iconClassName,
+  "data-testid": dataTestId,
+}) => {
+  const Icon = isVisible ? EyeIcon : EyeOffIcon;
+  return (
+    <Tooltip content={isVisible ? hideTooltip : showTooltip}>
+      <Button
+        data-testid={dataTestId}
+        variant="text"
+        size={size}
+        className={className}
+        onClick={onToggle}
+      >
+        <Icon
+          className={cn("h-4 w-4", isVisible && "text-primary", iconClassName)}
+        />
+      </Button>
+    </Tooltip>
+  );
+};
+
 /**
  * Three-dot menu trigger that fades in on row hover.
  * Must be inside a `group` container.

package/src/components/slides/__tests__/minimap-actions.test.tsx

@@ -0,0 +1,166 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import type { CellId } from "@/core/cells/ids";
+import type { CellData, CellRuntimeState } from "@/core/cells/types";
+import { MultiColumn } from "@/utils/id-tree";
+import { SlidesMinimap } from "../minimap";
+
+const A = cellId("a");
+const B = cellId("b");
+
+// Spies shared with the hoisted module mocks below.
+const { createNewCell, deleteCell, moveCellToIndex } = vi.hoisted(() => ({
+  createNewCell: vi.fn(),
+  deleteCell: vi.fn(),
+  moveCellToIndex: vi.fn(),
+}));
+
+vi.mock("@/core/cells/cells", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@/core/cells/cells")>();
+  return {
+    ...actual,
+    useCellActions: () => ({ moveCellToIndex, createNewCell }),
+    useCellIds: () => MultiColumn.from([[A, B]]),
+  };
+});
+
+vi.mock("@/components/editor/cell/useDeleteCell", () => ({
+  useDeleteCellCallback: () => deleteCell,
+}));
+
+beforeAll(() => {
+  // jsdom doesn't implement these; radix menus poke at them.
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    /* noop */
+  };
+  if (!global.HTMLElement.prototype.hasPointerCapture) {
+    global.HTMLElement.prototype.hasPointerCapture = () => false;
+  }
+  if (!global.HTMLElement.prototype.releasePointerCapture) {
+    global.HTMLElement.prototype.releasePointerCapture = () => {
+      /* noop */
+    };
+  }
+  global.IntersectionObserver ??= class {
+    observe() {
+      /* noop */
+    }
+    unobserve() {
+      /* noop */
+    }
+    disconnect() {
+      /* noop */
+    }
+    takeRecords() {
+      return [];
+    }
+    root = null;
+    rootMargin = "";
+    thresholds = [];
+  } as unknown as typeof IntersectionObserver;
+});
+
+// The minimap only reads `id`/`code`/`status`/`output`, so a minimal stub is
+// enough; the cast is confined to this helper.
+function makeCell(id: CellId): CellRuntimeState & CellData {
+  return {
+    id,
+    code: `print("${id}")`,
+    output: null,
+    status: "idle",
+  } as unknown as CellRuntimeState & CellData;
+}
+
+function renderMinimap() {
+  const onSlideClick = vi.fn();
+  const utils = render(
+    <TooltipProvider>
+      <SlidesMinimap
+        cells={[makeCell(A), makeCell(B)]}
+        thumbnailWidth={200}
+        canReorder={false}
+        activeCellId={null}
+        onSlideClick={onSlideClick}
+      />
+    </TooltipProvider>,
+  );
+  return { ...utils, onSlideClick };
+}
+
+const EMPTY_CELL = { code: "", autoFocus: false } as const;
+
+describe("SlidesMinimap insert lines", () => {
+  it("inserts a blank cell above the first row and below any row", () => {
+    renderMinimap();
+    // First row exposes both an above and a below line; later rows only below.
+    // DOM order: [A-above, A-below, B-below].
+    const inserts = screen.getAllByTestId("minimap-insert-cell");
+    expect(inserts).toHaveLength(3);
+
+    fireEvent.click(inserts[0]);
+    expect(createNewCell).toHaveBeenLastCalledWith({
+      cellId: A,
+      before: true,
+      ...EMPTY_CELL,
+    });
+
+    fireEvent.click(inserts[1]);
+    expect(createNewCell).toHaveBeenLastCalledWith({
+      cellId: A,
+      before: false,
+      ...EMPTY_CELL,
+    });
+
+    fireEvent.click(inserts[2]);
+    expect(createNewCell).toHaveBeenLastCalledWith({
+      cellId: B,
+      before: false,
+      ...EMPTY_CELL,
+    });
+  });
+});
+
+describe("SlidesMinimap context menu", () => {
+  const openRowMenu = (container: HTMLElement, id: CellId) => {
+    const row = container.querySelector<HTMLElement>(`[data-cell-id="${id}"]`);
+    expect(row).not.toBeNull();
+    fireEvent.contextMenu(row!);
+  };
+
+  it('"Add cell" inserts a blank cell below the row', () => {
+    const { container } = renderMinimap();
+    openRowMenu(container, A);
+    fireEvent.click(screen.getByText("Add cell"));
+    expect(createNewCell).toHaveBeenCalledWith({
+      cellId: A,
+      before: false,
+      ...EMPTY_CELL,
+    });
+  });
+
+  it('"Delete cell" deletes the row\'s cell', () => {
+    const { container } = renderMinimap();
+    openRowMenu(container, B);
+    fireEvent.click(screen.getByText("Delete cell"));
+    expect(deleteCell).toHaveBeenCalledWith({ cellId: B });
+  });
+});
+
+describe("SlidesMinimap keyboard activation", () => {
+  it("activates the row on Enter but ignores Space (reserved by reveal.js)", () => {
+    const { container, onSlideClick } = renderMinimap();
+    const row = container.querySelector<HTMLElement>(`[data-cell-id="${A}"]`);
+    expect(row).not.toBeNull();
+
+    fireEvent.keyDown(row!, { key: "Enter" });
+    expect(onSlideClick).toHaveBeenCalledWith(0);
+
+    onSlideClick.mockClear();
+    fireEvent.keyDown(row!, { key: " " });
+    expect(onSlideClick).not.toHaveBeenCalled();
+  });
+});