@marimo-team/frontend 0.23.10-dev3 → 0.23.10-dev31

package/src/components/data-table/hover-tooltip/use-table-hover-tooltip.ts

@@ -0,0 +1,159 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+import type { Cell, RowData, Table } from "@tanstack/react-table";
+import {
+  type ReactNode,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import useEvent from "react-use-event-hook";
+import { computeCellTooltipContent } from "./content";
+
+// Matches the default TooltipProvider delay (MarimoApp.tsx) for visual parity
+// with the rest of the app's tooltips.
+const TOOLTIP_DELAY_MS = 400;
+
+export interface HoverTooltipState {
+  rect: { top: number; left: number; width: number; height: number };
+  content: ReactNode;
+}
+
+export function useTableHoverTooltip<TData extends RowData>({
+  table,
+}: {
+  table: Table<TData>;
+}) {
+  const hoverTemplate = table.getState().cellHoverTemplate || null;
+  const [tooltipState, setTooltipState] = useState<HoverTooltipState | null>(
+    null,
+  );
+  const timer = useRef<number | null>(null);
+
+  // Stable id linking the focused/hovered cell to the tooltip content for
+  // assistive tech (the radix trigger is an aria-hidden phantom anchor).
+  const tooltipContentId = useId();
+  const anchorCell = useRef<HTMLElement | null>(null);
+  // Focus fires for pointer interactions too; track pointer state so
+  // click/drag-select focus doesn't show a tooltip (keyboard focus still does).
+  const pointerDown = useRef(false);
+
+  const clearTimer = () => {
+    if (timer.current != null) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+  };
+
+  const hideTooltip = useEvent(() => {
+    clearTimer();
+    setTooltipState(null);
+  });
+
+  const showFor = (target: HTMLElement, content: ReactNode) => {
+    anchorCell.current = target;
+    const r = target.getBoundingClientRect();
+    setTooltipState({
+      rect: { top: r.top, left: r.left, width: r.width, height: r.height },
+      content,
+    });
+  };
+
+  // Point the real cell at the tooltip content while it is shown. Done in a
+  // layout effect (after commit) so React's re-render from `setTooltipState`
+  // can't clobber an imperatively set attribute; cleanup unlinks the previous
+  // cell.
+  useLayoutEffect(() => {
+    if (!tooltipState) {
+      return;
+    }
+    const cell = anchorCell.current;
+    cell?.setAttribute("aria-describedby", tooltipContentId);
+    return () => cell?.removeAttribute("aria-describedby");
+  }, [tooltipState, tooltipContentId]);
+
+  useEffect(() => {
+    const onDown = () => {
+      pointerDown.current = true;
+    };
+    const onUp = () => {
+      pointerDown.current = false;
+    };
+    window.addEventListener("mousedown", onDown, { capture: true });
+    window.addEventListener("mouseup", onUp, { capture: true });
+    return () => {
+      window.removeEventListener("mousedown", onDown, { capture: true });
+      window.removeEventListener("mouseup", onUp, { capture: true });
+    };
+  }, []);
+
+  const handleCellMouseOver = useEvent(
+    (e: React.MouseEvent, cell: Cell<TData, unknown>) => {
+      // Suppress while a mouse button is held (range-select drag).
+      if (e.buttons !== 0) {
+        return;
+      }
+      const target = e.currentTarget as HTMLElement;
+      const content = computeCellTooltipContent(cell, hoverTemplate);
+      if (content == null || content === "") {
+        hideTooltip();
+        return;
+      }
+      clearTimer();
+      timer.current = window.setTimeout(
+        () => showFor(target, content),
+        TOOLTIP_DELAY_MS,
+      );
+    },
+  );
+
+  const handleCellMouseLeave = useEvent(() => hideTooltip());
+
+  // Keyboard parity: cells are tabIndex=0, native `title` showed on focus too.
+  const handleCellFocus = useEvent(
+    (e: React.FocusEvent, cell: Cell<TData, unknown>) => {
+      // Cancel any pending hover-show so a stale timer can't overwrite the
+      // focus-triggered tooltip after the delay.
+      clearTimer();
+      // Focus also fires for click/drag-select; only keyboard focus (no pointer
+      // held) should show the tooltip, mirroring the hover drag suppression.
+      if (pointerDown.current) {
+        return;
+      }
+      const content = computeCellTooltipContent(cell, hoverTemplate);
+      if (content == null || content === "") {
+        return;
+      }
+      showFor(e.currentTarget as HTMLElement, content);
+    },
+  );
+
+  const handleCellBlur = useEvent(() => hideTooltip());
+
+  // The anchor rect is captured at hover time, so any scroll or resize leaves
+  // it stale; hide instead of tracking. Capture catches scrolls inside the
+  // table's own container too (scroll events don't bubble but do fire in
+  // capture).
+  useEffect(() => {
+    const opts = { passive: true, capture: true } as const;
+    window.addEventListener("scroll", hideTooltip, opts);
+    window.addEventListener("resize", hideTooltip);
+    return () => {
+      window.removeEventListener("scroll", hideTooltip, { capture: true });
+      window.removeEventListener("resize", hideTooltip);
+    };
+  }, [hideTooltip]);
+
+  useEffect(() => clearTimer, []);
+
+  return {
+    tooltipState,
+    tooltipContentId,
+    hideTooltip,
+    handleCellMouseOver,
+    handleCellMouseLeave,
+    handleCellFocus,
+    handleCellBlur,
+  };
+}

package/src/components/data-table/renderers.tsx

@@ -24,11 +24,12 @@ import { cn } from "@/utils/cn";
 import { getCellDomProps } from "./cell-utils";
 import { COLUMN_WRAPPING_STYLES } from "./column-wrapping/feature";
 import { DataTableContextMenu } from "./context-menu";
+import { HoverTooltip } from "./hover-tooltip/hover-tooltip";
+import { useTableHoverTooltip } from "./hover-tooltip/use-table-hover-tooltip";
 import { CellRangeSelectionIndicator } from "./range-focus/cell-selection-indicator";
 import { useCellRangeSelection } from "./range-focus/use-cell-range-selection";
 import { useScrollIntoViewOnFocus } from "./range-focus/use-scroll-into-view";
 import { AUTO_WIDTH_MAX_COLUMNS, TABLE_ROW_HEIGHT_PX } from "./types";
-import { stringifyUnknownValue } from "./utils";
 
 export function renderTableHeader<TData>(
   table: Table<TData>,
@@ -135,24 +136,7 @@ export const DataTableBody = <TData,>({
     contextMenuCell.current = cell;
   });
 
-  function applyHoverTemplate(
-    template: string,
-    cells: Cell<TData, unknown>[],
-  ): string {
-    const variableRegex = /{{(\w+)}}/g;
-    // Map column id -> stringified value
-    const idToValue = new Map<string, string>();
-    for (const c of cells) {
-      const v = c.getValue();
-      // Prefer empty string for nulls to keep tooltip clean
-      const s = stringifyUnknownValue({ value: v, nullAsEmptyString: true });
-      idToValue.set(c.column.id, s);
-    }
-    return template.replaceAll(variableRegex, (_substr, varName: string) => {
-      const val = idToValue.get(varName);
-      return val === undefined ? `{{${varName}}}` : val;
-    });
-  }
+  const hoverTooltip = useTableHoverTooltip({ table });
 
   const renderCells = (cells: Cell<TData, unknown>[]) => {
     return cells.map((cell) => {
@@ -163,7 +147,6 @@ export const DataTableBody = <TData,>({
         pinningstyle,
       );
 
-      const title = cell.getHoverTitle?.() ?? undefined;
       return (
         <TableCell
           tabIndex={0}
@@ -178,10 +161,18 @@ export const DataTableBody = <TData,>({
             className,
           )}
           style={style}
-          title={title}
-          onMouseDown={(e) => handleCellMouseDown(e, cell)}
+          onMouseDown={(e) => {
+            handleCellMouseDown(e, cell);
+            hoverTooltip.hideTooltip();
+          }}
           onMouseUp={handleCellMouseUp}
-          onMouseOver={(e) => handleCellMouseOver(e, cell)}
+          onMouseOver={(e) => {
+            handleCellMouseOver(e, cell);
+            hoverTooltip.handleCellMouseOver(e, cell);
+          }}
+          onMouseLeave={hoverTooltip.handleCellMouseLeave}
+          onFocus={(e) => hoverTooltip.handleCellFocus(e, cell)}
+          onBlur={hoverTooltip.handleCellBlur}
           onContextMenu={() => handleContextMenu(cell)}
         >
           <CellRangeSelectionIndicator cellId={cell.id} />
@@ -200,8 +191,6 @@ export const DataTableBody = <TData,>({
     }
   };
 
-  const hoverTemplate = table.getState().cellHoverTemplate || null;
-
   const renderRow = (row: Row<TData>) => {
     // Only find the row index if the row viewer panel is open
     const rowIndex = rowViewerPanelOpen
@@ -209,22 +198,10 @@ export const DataTableBody = <TData,>({
       : undefined;
     const isRowViewedInPanel = rowViewerPanelOpen && viewedRowIdx === rowIndex;
 
-    // Compute hover title once per row using all visible cells
-    let rowTitle: string | undefined;
-    if (hoverTemplate) {
-      const visibleCells = row.getVisibleCells?.() ?? [
-        ...row.getLeftVisibleCells(),
-        ...row.getCenterVisibleCells(),
-        ...row.getRightVisibleCells(),
-      ];
-      rowTitle = applyHoverTemplate(hoverTemplate, visibleCells);
-    }
-
     return (
       <TableRow
         key={row.id}
         data-state={row.getIsSelected() && "selected"}
-        title={rowTitle}
         // These classes ensure that empty rows (nulls) still render
         className={cn(
           "border-t h-6",
@@ -296,12 +273,19 @@ export const DataTableBody = <TData,>({
   );
 
   return (
-    <DataTableContextMenu
-      tableBody={tableBody}
-      contextMenuRef={contextMenuCell}
-      tableRef={tableRef}
-      copyAllCells={handleCopyAllCells}
-    />
+    <>
+      <DataTableContextMenu
+        tableBody={tableBody}
+        contextMenuRef={contextMenuCell}
+        tableRef={tableRef}
+        copyAllCells={handleCopyAllCells}
+      />
+      <HoverTooltip
+        state={hoverTooltip.tooltipState}
+        contentId={hoverTooltip.tooltipContentId}
+        onClose={hoverTooltip.hideTooltip}
+      />
+    </>
   );
 };
 

package/src/components/datasources/__tests__/filter-empty.test.ts

@@ -0,0 +1,183 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { describe, expect, it } from "vitest";
+import type {
+  Database,
+  DatabaseSchema,
+  DataTable,
+} from "@/core/kernel/messages";
+import { filterEmptyDatabases } from "../datasources";
+
+function makeTable(name: string): DataTable {
+  return {
+    name,
+    columns: [],
+    source: "memory",
+    source_type: "local",
+    type: "table",
+    engine: null,
+    indexes: null,
+    num_columns: null,
+    num_rows: null,
+    variable_name: null,
+    primary_keys: null,
+  };
+}
+
+function makeSchema(opts: {
+  name: string;
+  tables: DataTable[];
+  tables_resolved?: boolean;
+}): DatabaseSchema {
+  return {
+    name: opts.name,
+    tables: opts.tables,
+    tables_resolved: opts.tables_resolved ?? true,
+  };
+}
+
+function makeDatabase(
+  name: string,
+  schemas: DatabaseSchema[],
+  schemas_resolved = true,
+): Database {
+  return {
+    name,
+    dialect: "duckdb",
+    schemas,
+    schemas_resolved,
+    engine: null,
+  };
+}
+
+describe("filterEmptyDatabases", () => {
+  it("hides schemas whose tables are resolved and empty", () => {
+    const databases = [
+      makeDatabase("memory", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+        makeSchema({ name: "empty_schema", tables: [] }),
+      ]),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toEqual([
+      makeDatabase("memory", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+      ]),
+    ]);
+  });
+
+  it("preserves databases whose schemas have not been resolved yet (lazy state)", () => {
+    const databases = [
+      makeDatabase("not_loaded_yet", [], /* schemas_resolved */ false),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toEqual([
+      makeDatabase("not_loaded_yet", [], false),
+    ]);
+  });
+
+  it("hides databases that have been resolved as empty", () => {
+    const databases = [
+      makeDatabase("really_empty", [], /* schemas_resolved */ true),
+      makeDatabase("has_tables", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+      ]),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toEqual([
+      makeDatabase("has_tables", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+      ]),
+    ]);
+  });
+
+  it("hides databases whose schemas all filtered to empty", () => {
+    const databases = [
+      makeDatabase("only_empty", [
+        makeSchema({ name: "a", tables: [] }),
+        makeSchema({ name: "b", tables: [] }),
+      ]),
+      makeDatabase("has_tables", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+      ]),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toEqual([
+      makeDatabase("has_tables", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+      ]),
+    ]);
+  });
+
+  it("treats missing schemas_resolved as resolved (backward compatible)", () => {
+    const databases = [
+      { name: "memory", dialect: "duckdb", schemas: [], engine: null },
+    ] as Database[];
+
+    expect(filterEmptyDatabases(databases)).toEqual([]);
+  });
+
+  it("preserves schemas whose tables have not been resolved yet", () => {
+    const databases = [
+      makeDatabase("snowflake_db", [
+        // include_tables=False was used; the schema is not actually empty,
+        // tables will be fetched lazily on expand.
+        makeSchema({ name: "public", tables: [], tables_resolved: false }),
+        makeSchema({ name: "audit", tables: [], tables_resolved: false }),
+        makeSchema({
+          name: "really_empty",
+          tables: [],
+          tables_resolved: true,
+        }),
+      ]),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toEqual([
+      makeDatabase("snowflake_db", [
+        makeSchema({ name: "public", tables: [], tables_resolved: false }),
+        makeSchema({ name: "audit", tables: [], tables_resolved: false }),
+      ]),
+    ]);
+  });
+
+  it("treats missing tables_resolved as resolved (backward compatible)", () => {
+    // Older payloads predating the new flag may omit it; default semantics
+    // treat the schema as resolved/authoritative.
+    const databases = [
+      makeDatabase("memory", [
+        { name: "main", tables: [makeTable("t1")] },
+        { name: "empty_schema", tables: [] },
+      ] as DatabaseSchema[]),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toEqual([
+      makeDatabase("memory", [
+        { name: "main", tables: [makeTable("t1")] },
+      ] as DatabaseSchema[]),
+    ]);
+  });
+
+  it("returns the same reference when nothing was filtered", () => {
+    const databases = [
+      makeDatabase("memory", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+      ]),
+    ];
+
+    expect(filterEmptyDatabases(databases)).toBe(databases);
+  });
+
+  it("does not mutate the input", () => {
+    const databases = [
+      makeDatabase("memory", [
+        makeSchema({ name: "main", tables: [makeTable("t1")] }),
+        makeSchema({ name: "empty_schema", tables: [] }),
+      ]),
+    ];
+    const snapshot = JSON.parse(JSON.stringify(databases));
+
+    filterEmptyDatabases(databases);
+
+    expect(databases).toEqual(snapshot);
+  });
+});

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/cell/code/language-toggle.tsx

@@ -17,6 +17,11 @@ interface LanguageTogglesProps {
   code: string;
   currentLanguageAdapter: LanguageAdapter["type"] | undefined;
   onAfterToggle: () => void;
+  /**
+   * Classes for the wrapper element. Defaults to the absolutely-positioned,
+   * hover-revealed placement used inside the notebook cell editor.
+   */
+  className?: string;
 }
 
 export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
@@ -24,6 +29,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   code,
   currentLanguageAdapter,
   onAfterToggle,
+  className = "absolute right-3 top-2 z-20 flex hover-action gap-1",
 }) => {
   const canUseMarkdown = useMemo(
     () => LanguageAdapters.markdown.isSupported(code) || code.trim() === "",
@@ -35,7 +41,7 @@ export const LanguageToggles: React.FC<LanguageTogglesProps> = ({
   );
 
   return (
-    <div className="absolute right-3 top-2 z-20 flex hover-action gap-1">
+    <div className={className}>
       <LanguageToggle
         editorView={editorView}
         currentLanguageAdapter={currentLanguageAdapter}