@marimo-team/frontend 0.20.1 → 0.20.3-dev76

package/src/components/data-table/range-focus/__tests__/utils.test.ts

@@ -1,66 +1,20 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { Cell, Column, Row, Table } from "@tanstack/react-table";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { SELECT_COLUMN_ID } from "../../types";
-import type { SelectedCell } from "../atoms";
-import { getCellsBetween, getCellValues } from "../utils";
-
-function createMockCell(id: string, value: unknown): Cell<unknown, unknown> {
-  return {
-    id,
-    getValue: () => value,
-    column: {} as Column<unknown>,
-    row: {} as Row<unknown>,
-    getContext: vi.fn(),
-    renderValue: vi.fn(),
-  } as unknown as Cell<unknown, unknown>;
-}
-
-function createMockColumn(id: string): Column<unknown> {
-  return {
-    id: id,
-    getIndex: () => Number.parseInt(id, 10),
-  } as unknown as Column<unknown>;
-}
-
-function createMockRow(
-  id: string,
-  cells: Cell<unknown, unknown>[],
-): Row<unknown> {
-  return {
-    id,
-    index: Number.parseInt(id, 10),
-    getAllCells: () => cells,
-    original: {},
-    depth: 0,
-    subRows: [],
-    getVisibleCells: vi.fn(),
-    getValue: vi.fn(),
-    getUniqueValues: vi.fn(),
-    renderValue: vi.fn(),
-  } as unknown as Row<unknown>;
-}
-
-function createMockTable(
-  rows: Row<unknown>[],
-  columns: Column<unknown>[],
-): Table<unknown> {
-  return {
-    getRow: (id: string) => rows.find((row) => row.id === id),
-    getRowModel: () => ({ rows }),
-    getColumn: (columnId: string) => columns.find((col) => col.id === columnId),
-    getAllColumns: () => columns,
-  } as unknown as Table<unknown>;
-}
-
-function createSelectedCell(rowId: string, columnId: string): SelectedCell {
-  return {
-    rowId,
-    columnId,
-    cellId: `${rowId}_${columnId}`,
-  };
-}
+import {
+  countDataCellsInSelection,
+  getCellsBetween,
+  getCellValues,
+  getNumericValuesFromSelectedCells,
+} from "../utils";
+import {
+  createMockCell,
+  createMockColumn,
+  createMockRow,
+  createMockTable,
+  createSelectedCell,
+} from "./test-utils";
 
 describe("getCellValues", () => {
   it("should return empty string for empty selection", () => {
@@ -108,24 +62,25 @@ describe("getCellValues", () => {
     expect(result).toBe("row1\nrow2");
   });
 
-  it("should handle missing cells gracefully", () => {
+  it("should handle missing rows gracefully", () => {
     const cell = createMockCell("0_0", "test");
     const row = createMockRow("0", [cell]);
     const table = createMockTable([row], []);
 
-    const result = getCellValues(table, new Set(["0_0", "0_999", "999_0"]));
+    // Row "999" doesn't exist and is skipped
+    const result = getCellValues(table, new Set(["0_0", "999_0"]));
     expect(result).toBe("test");
   });
 
-  it("should handle missing cells in existing rows", () => {
+  it("should include undefined for missing columns on existing rows", () => {
     const cell1 = createMockCell("0_0", "test1");
     const cell2 = createMockCell("0_1", "test2");
     const row = createMockRow("0", [cell1, cell2]);
     const table = createMockTable([row], []);
 
-    // Should only return values for cells that exist
+    // Column "999" doesn't exist but row.getValue() returns undefined
     const result = getCellValues(table, new Set(["0_0", "0_1", "0_999"]));
-    expect(result).toBe("test1\ttest2");
+    expect(result).toBe("test1\ttest2\tundefined");
   });
 
   it("should handle complex data types", () => {
@@ -314,3 +269,188 @@ describe("getCellsBetween", () => {
     expect(result).toEqual([]);
   });
 });
+
+describe("getNumericValuesFromSelectedCells", () => {
+  it("should return empty array for empty selection", () => {
+    const mockTable = createMockTable([], []);
+    const result = getNumericValuesFromSelectedCells(mockTable, new Set());
+    expect(result).toEqual([]);
+  });
+
+  it("should ignore select checkbox in tables", () => {
+    const cell = createMockCell(`row_${SELECT_COLUMN_ID}`, 10);
+    const row = createMockRow("0", [cell]);
+    const table = createMockTable([row], []);
+    const result = getNumericValuesFromSelectedCells(
+      table,
+      new Set([`row_${SELECT_COLUMN_ID}`]),
+    );
+    expect(result).toEqual([]);
+  });
+
+  it("should extract numeric values from number cells", () => {
+    const cell1 = createMockCell("0_0", 10);
+    const cell2 = createMockCell("0_1", 20);
+    const row = createMockRow("0", [cell1, cell2]);
+    const table = createMockTable([row], []);
+    const result = getNumericValuesFromSelectedCells(
+      table,
+      new Set(["0_0", "0_1"]),
+    );
+    expect(result).toEqual([10, 20]);
+  });
+
+  it("should parse string numbers to numeric values", () => {
+    const cell1 = createMockCell("0_0", "42");
+    const cell2 = createMockCell("0_1", "3.14");
+    const row = createMockRow("0", [cell1, cell2]);
+    const table = createMockTable([row], []);
+    const result = getNumericValuesFromSelectedCells(
+      table,
+      new Set(["0_0", "0_1"]),
+    );
+    expect(result).toEqual([42, 3.14]);
+  });
+
+  it("should skip non-numeric values", () => {
+    const cell1 = createMockCell("0_0", 10);
+    const cell2 = createMockCell("0_1", "abc");
+    const cell3 = createMockCell("0_2", undefined);
+    const row = createMockRow("0", [cell1, cell2, cell3]);
+    const table = createMockTable([row], []);
+    const result = getNumericValuesFromSelectedCells(
+      table,
+      new Set(["0_0", "0_1", "0_2"]),
+    );
+    expect(result).toEqual([10]);
+  });
+
+  it("should skip NaN and Infinity", () => {
+    const cell1 = createMockCell("0_0", 5);
+    const cell2 = createMockCell("0_1", Number.NaN);
+    const cell3 = createMockCell("0_2", Infinity);
+    const row = createMockRow("0", [cell1, cell2, cell3]);
+    const table = createMockTable([row], []);
+    const result = getNumericValuesFromSelectedCells(
+      table,
+      new Set(["0_0", "0_1", "0_2"]),
+    );
+    expect(result).toEqual([5]);
+  });
+
+  it("should skip booleans (not treat as 1 or 0)", () => {
+    const cell1 = createMockCell("0_0", 10);
+    const cell2 = createMockCell("0_1", true);
+    const cell3 = createMockCell("0_2", false);
+    const row = createMockRow("0", [cell1, cell2, cell3]);
+    const table = createMockTable([row], []);
+    const result = getNumericValuesFromSelectedCells(
+      table,
+      new Set(["0_0", "0_1", "0_2"]),
+    );
+    expect(result).toEqual([10]);
+  });
+
+  it("should skip null and empty string (not treat as 0)", () => {
+    const cell1 = createMockCell("0_0", 10);
+    const cell2 = createMockCell("0_1", null);
+    const cell3 = createMockCell("0_2", "");
+    const row = createMockRow("0", [cell1, cell2, cell3]);
+    const table = createMockTable([row], []);
+    const result = getNumericValuesFromSelectedCells(
+      table,
+      new Set(["0_0", "0_1", "0_2"]),
+    );
+    expect(result).toEqual([10]);
+  });
+
+  it("should include string '0' as numeric zero", () => {
+    const cell1 = createMockCell("0_0", "0");
+    const cell2 = createMockCell("0_1", 0);
+    const row = createMockRow("0", [cell1, cell2]);
+    const table = createMockTable([row], []);
+    const result = getNumericValuesFromSelectedCells(
+      table,
+      new Set(["0_0", "0_1"]),
+    );
+    expect(result).toEqual([0, 0]);
+  });
+
+  it("should skip -Infinity", () => {
+    const cell1 = createMockCell("0_0", 5);
+    const cell2 = createMockCell("0_1", -Infinity);
+    const row = createMockRow("0", [cell1, cell2]);
+    const table = createMockTable([row], []);
+    const result = getNumericValuesFromSelectedCells(
+      table,
+      new Set(["0_0", "0_1"]),
+    );
+    expect(result).toEqual([5]);
+  });
+
+  it("should skip objects", () => {
+    const cell1 = createMockCell("0_0", 5);
+    const cell2 = createMockCell("0_1", { x: 1 });
+    const cell3 = createMockCell("0_2", [1, 2]);
+    const row = createMockRow("0", [cell1, cell2, cell3]);
+    const table = createMockTable([row], []);
+    const result = getNumericValuesFromSelectedCells(
+      table,
+      new Set(["0_0", "0_1", "0_2"]),
+    );
+    expect(result).toEqual([5]);
+  });
+
+  it("should handle missing cells gracefully", () => {
+    const cell = createMockCell("0_0", 100);
+    const row = createMockRow("0", [cell]);
+    const table = createMockTable([row], []);
+    const result = getNumericValuesFromSelectedCells(
+      table,
+      new Set(["0_0", "0_999", "999_0"]),
+    );
+    expect(result).toEqual([100]);
+  });
+
+  it("should return multiple numeric cells across rows", () => {
+    const row1 = createMockRow("0", [
+      createMockCell("0_0", 1),
+      createMockCell("0_1", 2),
+    ]);
+    const row2 = createMockRow("1", [
+      createMockCell("1_0", 3),
+      createMockCell("1_1", 4),
+    ]);
+    const table = createMockTable([row1, row2], []);
+    const result = getNumericValuesFromSelectedCells(
+      table,
+      new Set(["0_0", "0_1", "1_0", "1_1"]),
+    );
+    expect(result).toEqual([1, 2, 3, 4]);
+  });
+});
+
+describe("countDataCellsInSelection", () => {
+  it("should return 0 for empty selection", () => {
+    expect(countDataCellsInSelection(new Set())).toBe(0);
+  });
+
+  it("should count only non-checkbox cells", () => {
+    expect(countDataCellsInSelection(new Set(["0_0", "0_1", "1_0"]))).toBe(3);
+  });
+
+  it("should exclude select checkbox column cells", () => {
+    const selectCellId = `0_${SELECT_COLUMN_ID}`;
+    expect(
+      countDataCellsInSelection(new Set([selectCellId, "0_0", "0_1"])),
+    ).toBe(2);
+  });
+
+  it("should return 0 when only checkbox cells are selected", () => {
+    const selectCellId1 = `0_${SELECT_COLUMN_ID}`;
+    const selectCellId2 = `1_${SELECT_COLUMN_ID}`;
+    expect(
+      countDataCellsInSelection(new Set([selectCellId1, selectCellId2])),
+    ).toBe(0);
+  });
+});

package/src/components/data-table/range-focus/cell-selection-stats.tsx

@@ -0,0 +1,79 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { Table } from "@tanstack/react-table";
+import { useAtomValue } from "jotai";
+import { cn } from "@/utils/cn";
+import { selectedCellsAtom } from "./atoms";
+import {
+  countDataCellsInSelection,
+  getNumericValuesFromSelectedCells,
+} from "./utils";
+
+/**
+ * Displays summary stats (Count, Sum, Average) for the current cell selection.
+ * Renders only when 2+ data cells are selected (checkbox column excluded).
+ * Count excludes the checkbox column; Sum and Average are shown only when
+ * the selection contains at least one numeric value.
+ */
+export const CellSelectionStats = <TData,>({
+  table,
+  className,
+}: {
+  table: Table<TData>;
+  className?: string;
+}) => {
+  const selectedCells = useAtomValue(selectedCellsAtom);
+  const dataCellCount = countDataCellsInSelection(selectedCells);
+
+  if (dataCellCount < 2) {
+    return null;
+  }
+
+  const numericValues = getNumericValuesFromSelectedCells(table, selectedCells);
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-end gap-3 text-xs text-muted-foreground shrink-0",
+        className,
+      )}
+    >
+      <CountStat count={dataCellCount} />
+      <SumStat numericValues={numericValues} />
+      <AverageStat numericValues={numericValues} />
+    </div>
+  );
+};
+
+const StatSpan = (statName: string, statValue: number) => {
+  return (
+    <span>
+      {statName}: {statValue}
+    </span>
+  );
+};
+
+const CountStat = ({ count }: { count: number }) => {
+  return StatSpan("Count", count);
+};
+
+const SumStat = ({ numericValues }: { numericValues: number[] }) => {
+  if (numericValues.length === 0) {
+    return null;
+  }
+
+  const sum = numericValues.reduce((acc, n) => acc + n, 0);
+  const sumRounded = Number(sum.toFixed(8));
+  return StatSpan("Sum", sumRounded);
+};
+
+const AverageStat = ({ numericValues }: { numericValues: number[] }) => {
+  if (numericValues.length === 0) {
+    return null;
+  }
+
+  const average =
+    numericValues.reduce((acc, n) => acc + n, 0) / numericValues.length;
+  const averageRounded = Number(average.toFixed(8));
+  return StatSpan("Average", averageRounded);
+};

package/src/components/data-table/range-focus/utils.ts

@@ -20,19 +20,15 @@ export function getCellValues<TData>(
       continue;
     }
 
-    const [rowId] = cellId.split("_"); // CellId is rowId_columnId
+    const { rowId, columnId } = getRowAndColumnId(cellId);
     const row = table.getRow(rowId);
     if (!row) {
       continue;
     }
 
-    const tableCell = row.getAllCells().find((c) => c.id === cellId);
-    if (!tableCell) {
-      continue;
-    }
-
+    const cellValue = row.getValue(columnId);
     const values = rowValues.get(rowId) ?? [];
-    values.push(stringifyUnknownValue({ value: tableCell.getValue() }));
+    values.push(stringifyUnknownValue({ value: cellValue }));
     rowValues.set(rowId, values);
   }
 
@@ -43,6 +39,65 @@ export function getTabSeparatedValues(values: string[][]) {
   return values.map((row) => row.join("\t")).join("\n");
 }
 
+/**
+ * Count selected cells excluding the select checkbox column.
+ */
+export function countDataCellsInSelection(
+  selectedCellIds: Set<string>,
+): number {
+  let count = 0;
+  for (const cellId of selectedCellIds) {
+    if (!cellId.includes(SELECT_COLUMN_ID)) {
+      count += 1;
+    }
+  }
+  return count;
+}
+
+/**
+ * Extract numeric values from the selected cells. Only finite numbers and
+ * non-empty numeric strings (e.g. "42", "3.14", "0") are included. Skips select
+ * checkbox column, missing cells, and all other types (boolean, null, etc.).
+ */
+export function getNumericValuesFromSelectedCells<TData>(
+  table: Table<TData>,
+  selectedCellIds: Set<string>,
+): number[] {
+  const numericValues: number[] = [];
+  for (const cellId of selectedCellIds) {
+    if (cellId.includes(SELECT_COLUMN_ID)) {
+      continue;
+    }
+    const { rowId, columnId } = getRowAndColumnId(cellId);
+    const row = table.getRow(rowId);
+    if (!row) {
+      continue;
+    }
+
+    const value = row.getValue(columnId);
+
+    // Only accept numbers and strings
+    // Skip booleans, null, etc.
+    let num: number;
+    if (typeof value === "number") {
+      num = value;
+    } else if (typeof value === "string") {
+      if (value.trim() === "") {
+        continue;
+      }
+      num = Number(value);
+    } else {
+      continue;
+    }
+
+    // Skip NaN and Infinity
+    if (Number.isFinite(num)) {
+      numericValues.push(num);
+    }
+  }
+  return numericValues;
+}
+
 /**
  * Get the cell ids between two cells.
  */
@@ -103,3 +158,10 @@ export function getCellsBetween<TData>(
 function getCellId(rowId: string, columnId: string) {
   return `${rowId}_${columnId}`;
 }
+
+function getRowAndColumnId(cellId: string) {
+  const sepIdx = cellId.indexOf("_");
+  const rowId = cellId.slice(0, sepIdx);
+  const columnId = cellId.slice(sepIdx + 1);
+  return { rowId, columnId };
+}

package/src/components/data-table/types.ts

@@ -80,3 +80,7 @@ export function extractTimezone(dtype: string | undefined): string | undefined {
   const match = /^datetime(?:64)?\[[^,]+,([^,]+)]$/.exec(dtype);
   return match?.[1]?.trim();
 }
+
+export type PageRange =
+  | { type: "page"; page: number }
+  | { type: "ellipsis"; key: string };

package/src/components/databases/engine-variable.tsx

@@ -16,7 +16,8 @@ export const EngineVariable: React.FC<Props> = ({
   variableName,
   className,
 }) => {
-  const onClick = () => {
+  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
     const cellId = findCellId(variableName);
     if (!cellId) {
       return;

package/src/components/databases/icons/google-cloud-storage.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="standard_product_icon" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
+  <!-- Generator: Adobe Illustrator 29.1.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 142)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: none;
+      }
+
+      .st1 {
+        fill: #4285f4;
+      }
+
+      .st2 {
+        fill: #34a853;
+      }
+
+      .st3 {
+        fill: #fbbc04;
+      }
+
+      .st4 {
+        fill: #ea4335;
+      }
+    </style>
+  </defs>
+  <g id="bounding_box">
+    <rect class="st0" width="512" height="512"/>
+  </g>
+  <g id="art">
+    <path class="st2" d="M442,277.9H70c-8.8,0-16,7.2-16,16v148.1c0,8.8,7.2,16,16,16h107.2c1.5.5,3.1.7,4.8.7s3.3-.3,4.8-.7h255.2c8.8,0,16-7.2,16-16v-148.1c0-8.8-7.2-16-16-16ZM86,309.9h80v116.1h-80v-116.1ZM426,425.9h-228v-116.1h228v116.1Z"/>
+    <path class="st3" d="M442,54H70c-8.8,0-16,7.2-16,16v148.8c0,8.8,7.2,16,16,16h372c8.8,0,16-7.2,16-16V70c0-8.8-7.2-16-16-16ZM86,86h80v116.8h-80v-116.8ZM426,202.8h-228v-116.8h228v116.8Z"/>
+    <path class="st4" d="M442,234.8h-16V86H54v-16c0-8.8,7.2-16,16-16h372c8.8,0,16,7.2,16,16v148.8c0,8.8-7.2,16-16,16Z"/>
+    <path class="st1" d="M442,457.9h-16v-148.1H54v-16c0-8.8,7.2-16,16-16h372c8.8,0,16,7.2,16,16v148.1c0,8.8-7.2,16-16,16Z"/>
+    <circle class="st4" cx="349" cy="144.4" r="37"/>
+    <circle class="st1" cx="349" cy="367.9" r="37"/>
+  </g>
+</svg>

package/src/components/datasources/components.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { ChevronRightIcon, LoaderCircle, XIcon } from "lucide-react";
+import type { CSSProperties } from "react";
 import type { DataType } from "@/core/kernel/messages";
 import { cn } from "@/utils/cn";
 import { DATA_TYPE_ICON, getDataTypeColor } from "../datasets/icons";
@@ -42,16 +43,19 @@ export const EmptyState: React.FC<{ content: string; className?: string }> = ({
 
 export const ErrorState: React.FC<{
   error: Error;
+  style?: CSSProperties;
   className?: string;
-}> = ({ error, className }) => {
+  showIcon?: boolean;
+}> = ({ error, style, className, showIcon = true }) => {
   return (
     <div
       className={cn(
         "text-sm bg-red-50 dark:bg-red-900 text-red-600 dark:text-red-50 flex items-center gap-2 p-2 h-8",
         className,
       )}
+      style={style}
     >
-      <XIcon className="h-4 w-4 mt-0.5" />
+      {showIcon && <XIcon className="h-4 w-4 mt-0.5" />}
       {error.message}
     </div>
   );

package/src/components/dependency-graph/minimap-content.tsx

@@ -17,6 +17,7 @@ import { cellFocusAtom, useCellFocusActions } from "@/core/cells/focus";
 import type { CellId } from "@/core/cells/ids";
 import { useVariables } from "@/core/variables/state";
 import { cn } from "@/utils/cn";
+import { extractCellPreview } from "./utils/cell-preview";
 
 interface MinimapCellProps {
   cellId: CellId;
@@ -45,6 +46,7 @@ const MinimapCell: React.FC<MinimapCellProps> = (props) => {
   }
 
   const isSelected = selectedCell?.id === cell.id;
+  const preview = extractCellPreview(cell.code);
   const circleRadius = isNonReferenceableCell(cell.graph) ? 1.5 : 3;
 
   const handleClick = () => {
@@ -90,7 +92,7 @@ const MinimapCell: React.FC<MinimapCellProps> = (props) => {
             <VariablesList cell={cell} selectedCell={selectedCell} />
           ) : (
             <span className="overflow-hidden text-ellipsis whitespace-nowrap max-w-full">
-              {codePreview(cell.code) ?? <span className="italic">empty</span>}
+              {preview.text ?? <span className="italic">empty</span>}
             </span>
           )}
         </div>
@@ -123,10 +125,6 @@ const MinimapCell: React.FC<MinimapCellProps> = (props) => {
   );
 };
 
-function codePreview(code: string): string | undefined {
-  return code.split("\n")[0].trim() || undefined;
-}
-
 const VariablesList: React.FC<{
   cell: { id: CellId; graph: CellGraph };
   selectedCell?: { id: CellId; graph: CellGraph };