@marimo-team/frontend 0.23.16-dev26 → 0.23.16-dev29

package/src/components/data-table/column-summary/chart-spec-model.tsx

@@ -13,13 +13,18 @@ import type {
   ValueCounts,
 } from "../types";
 import {
+  DEFAULT_CHART_HEIGHT,
   getDataSpecAndSourceName,
   getLegacyBooleanSpec,
   getLegacyNumericSpec,
   getLegacyTemporalSpec,
   getScale,
 } from "./legacy-chart-spec";
-import { calculateBinStep, getPartialTimeTooltip } from "./utils";
+import {
+  calculateBinStep,
+  getPartialTimeTooltip,
+  isValidBinValue,
+} from "./utils";
 
 // We rely on vega's built-in binning to determine bar widths.
 const MAX_BAR_HEIGHT = 20; // px
@@ -34,6 +39,81 @@ const BAR_COLOR = mint.mint11;
 const UNHOVERED_BAR_OPACITY = 0.6;
 const NULL_BAR_COLOR = orange.orange11;
 
+// Full-height invisible hit targets (pixel coords). Do not use
+// `y: { aggregate: "max" }` without a field — Vega drops it (console warning)
+// and `aggregate: "max"` *with* a field shrinks the hit area to the bar
+// height, which causes hover flicker on short integer bars (#10303).
+const FULL_HEIGHT_TOOLTIP_Y = {
+  y: { value: 0 },
+  y2: { value: CONCAT_CHART_HEIGHT },
+};
+
+const NULLS_TOOLTIP = [
+  {
+    field: "count",
+    type: "quantitative" as const,
+    title: "nulls",
+    format: ",d",
+  },
+];
+
+/** Visible null bar + full-height invisible tooltip / hover layer. */
+function buildNullBarSpec(opts: {
+  width: number;
+  filterNullOnly?: boolean;
+}): TopLevelFacetedUnitSpec {
+  return {
+    height: CONCAT_CHART_HEIGHT,
+    width: opts.width,
+    // @ts-expect-error 'layer' property not in TopLevelFacetedUnitSpec
+    layer: [
+      {
+        mark: {
+          type: "bar",
+          color: NULL_BAR_COLOR,
+        },
+        encoding: {
+          x: {
+            field: "bin_start",
+            type: "nominal",
+            axis: null,
+          },
+          y: {
+            field: "count",
+            type: "quantitative",
+            axis: null,
+          },
+        },
+      },
+      {
+        mark: {
+          type: "bar",
+          opacity: 0,
+        },
+        encoding: {
+          x: {
+            field: "bin_start",
+            type: "nominal",
+            axis: null,
+          },
+          ...FULL_HEIGHT_TOOLTIP_Y,
+          tooltip: NULLS_TOOLTIP,
+        },
+      },
+    ],
+    ...(opts.filterNullOnly
+      ? {
+          transform: [
+            {
+              filter:
+                "datum['bin_start'] === null && datum['bin_end'] === null",
+            },
+          ],
+        }
+      : {}),
+  };
+}
+
 export class ColumnChartSpecModel<T> {
   private columnStats = new Map<ColumnName, Partial<ColumnHeaderStats>>();
   private columnBinValues = new Map<ColumnName, BinValues>();
@@ -114,7 +194,7 @@ export class ColumnChartSpecModel<T> {
           domain: false,
         },
       },
-      height: 100,
+      height: DEFAULT_CHART_HEIGHT,
     } as TopLevelFacetedUnitSpec;
   }
 
@@ -122,22 +202,28 @@ export class ColumnChartSpecModel<T> {
     const binValues = this.columnBinValues.get(column);
     const valueCounts = this.columnValueCounts.get(column);
     const hasValueCounts = valueCounts && valueCounts.length > 0;
-
-    let data = this.dataSpec as TopLevelFacetedUnitSpec["data"];
     const stats = this.columnStats.get(column);
+    const nullCount = typeof stats?.nulls === "number" ? stats.nulls : 0;
 
+    // Never mutate stored bin values; filter NaN/null junk from hist edge cases.
+    const validBins = (binValues ?? []).filter(isValidBinValue);
+
+    let data = this.dataSpec as TopLevelFacetedUnitSpec["data"];
     if (hasValueCounts) {
       data = { values: valueCounts, name: "value_counts" };
-    } else {
-      // Bin values can be empty if all values are nulls
-      if (stats?.nulls) {
-        binValues?.push({
-          bin_start: null,
-          bin_end: null,
-          count: stats.nulls as number,
-        });
-      }
-      data = { values: binValues, name: "bin_values" };
+    } else if (binValues !== undefined) {
+      const binsForChart =
+        nullCount > 0
+          ? [
+              ...validBins,
+              {
+                bin_start: null,
+                bin_end: null,
+                count: nullCount,
+              },
+            ]
+          : validBins;
+      data = { values: binsForChart, name: "bin_values" };
     }
 
     const base = this.createBase(data);
@@ -158,17 +244,26 @@ export class ColumnChartSpecModel<T> {
       case "date":
       case "datetime":
       case "time": {
-        if (!binValues) {
+        if (binValues === undefined) {
           const legacyBase = this.createBase(this.legacyDataSpec);
           const scale = getScale(this.legacySourceName);
           return getLegacyTemporalSpec(column, type, legacyBase, scale);
         }
 
-        const tooltip = getPartialTimeTooltip(binValues || []);
-        const singleValue = binValues?.length === 1;
+        if (validBins.length === 0) {
+          if (nullCount === 0) {
+            return null;
+          }
+          return {
+            ...base,
+            ...buildNullBarSpec({ width: CONCAT_CHART_WIDTH }),
+          };
+        }
+
+        const tooltip = getPartialTimeTooltip(validBins);
 
-        // Single value charts can be displayed as a full bar
-        if (singleValue) {
+        // Single non-null bin, no nulls — full-width bar
+        if (validBins.length === 1 && nullCount === 0) {
           return {
             ...base,
             mark: { type: "bar", color: BAR_COLOR },
@@ -251,7 +346,7 @@ export class ColumnChartSpecModel<T> {
               },
             },
 
-            // Invisible tooltip layer
+            // Invisible full-height tooltip / hover layer
             {
               mark: {
                 type: "bar",
@@ -265,11 +360,7 @@ export class ColumnChartSpecModel<T> {
                   type: "ordinal",
                   axis: null,
                 },
-                y: {
-                  aggregate: "max",
-                  type: "quantitative",
-                  axis: null,
-                },
+                ...FULL_HEIGHT_TOOLTIP_Y,
                 tooltip: [
                   {
                     field: "bin_start",
@@ -305,16 +396,55 @@ export class ColumnChartSpecModel<T> {
         // Create a histogram spec that properly handles null values
         const format = type === "integer" ? ",d" : ".2f";
 
-        if (!binValues) {
+        if (binValues === undefined) {
           const legacyBase = this.createBase(this.legacyDataSpec);
           return getLegacyNumericSpec(column, format, legacyBase);
         }
 
-        const binStep = calculateBinStep(binValues || []);
+        if (validBins.length === 0) {
+          if (nullCount === 0) {
+            return null;
+          }
+          // All-null: null bar only (no empty quantitative histogram) — #10303
+          return {
+            ...base,
+            ...buildNullBarSpec({ width: CONCAT_CHART_WIDTH }),
+          };
+        }
+
+        const nullBar = buildNullBarSpec({
+          width: CONCAT_NULL_BAR_WIDTH,
+          filterNullOnly: true,
+        });
+
+        const binStep = calculateBinStep(validBins);
+        const axisTickValues = [
+          stats?.min,
+          stats?.p25,
+          stats?.median,
+          stats?.p75,
+          stats?.p95,
+          stats?.max,
+        ].filter(
+          (value): value is number =>
+            typeof value === "number" && Number.isFinite(value),
+        );
 
         const histogram: TopLevelFacetedUnitSpec = {
           height: CONCAT_CHART_HEIGHT,
           width: CONCAT_CHART_WIDTH,
+          // When hconcat shares data with a null bin, exclude it from the
+          // quantitative histogram so Vega does not warn on null extents.
+          ...(nullCount > 0
+            ? {
+                transform: [
+                  {
+                    filter:
+                      "datum['bin_start'] !== null && datum['bin_end'] !== null",
+                  },
+                ],
+              }
+            : {}),
           // @ts-expect-error 'layer' property not in TopLevelFacetedUnitSpec
           layer: [
             {
@@ -349,7 +479,7 @@ export class ColumnChartSpecModel<T> {
               },
             },
 
-            // Tooltip layer
+            // Full-height tooltip / hover layer (covers short bars + inter-bar gaps)
             {
               mark: {
                 type: "bar",
@@ -376,25 +506,13 @@ export class ColumnChartSpecModel<T> {
                     labelOpacity: 0.5,
                     labelExpr:
                       "(datum.value >= 10000 || datum.value <= -10000) ? format(datum.value, '.2e') : format(datum.value, '.2~f')",
-                    // TODO: Tick count provides a better UI, but it did not work
-                    values: [
-                      stats?.min,
-                      stats?.p25,
-                      stats?.median,
-                      stats?.p75,
-                      stats?.p95,
-                      stats?.max,
-                    ].filter((value): value is number => value !== undefined),
+                    values: axisTickValues,
                   },
                 },
                 x2: {
                   field: "bin_end_extended",
                 },
-                y: {
-                  aggregate: "max",
-                  type: "quantitative",
-                  axis: null,
-                },
+                ...FULL_HEIGHT_TOOLTIP_Y,
                 tooltip: [
                   {
                     field: "bin_range",
@@ -424,68 +542,10 @@ export class ColumnChartSpecModel<T> {
           ],
         };
 
-        const nullBar: TopLevelFacetedUnitSpec = {
-          height: CONCAT_CHART_HEIGHT,
-          width: CONCAT_NULL_BAR_WIDTH,
-          // @ts-expect-error 'layer' property not in TopLevelFacetedUnitSpec
-          layer: [
-            {
-              mark: {
-                type: "bar",
-                color: NULL_BAR_COLOR,
-              },
-              encoding: {
-                x: {
-                  field: "bin_start",
-                  type: "nominal",
-                  axis: null,
-                },
-                y: {
-                  field: "count",
-                  type: "quantitative",
-                  axis: null,
-                },
-              },
-            },
-            {
-              mark: {
-                type: "bar",
-                opacity: 0,
-              },
-              encoding: {
-                x: {
-                  field: "bin_start",
-                  type: "nominal",
-                  axis: null,
-                },
-                y: {
-                  aggregate: "max",
-                  type: "quantitative",
-                  axis: null,
-                },
-                tooltip: [
-                  {
-                    field: "count",
-                    type: "quantitative",
-                    title: "nulls",
-                    format: ",d",
-                  },
-                ],
-              },
-            },
-          ],
-          transform: [
-            {
-              filter:
-                "datum['bin_start'] === null && datum['bin_end'] === null",
-            },
-          ],
-        };
-
         let chart: TopLevelFacetedUnitSpec = histogram;
         let numericBase = base;
 
-        if (stats?.nulls) {
+        if (nullCount > 0) {
           numericBase = {
             ...base,
             config: {
@@ -508,7 +568,7 @@ export class ColumnChartSpecModel<T> {
         }
 
         return {
-          ...numericBase, // Assuming base contains shared configurations
+          ...numericBase,
           ...chart,
         };
       }
@@ -684,7 +744,7 @@ export class ColumnChartSpecModel<T> {
             {
               name: "hover_bar",
               select: {
-                type: "point",
+                type: "point" as const,
                 on: "mouseover",
                 clear: "mouseout",
               },

package/src/components/data-table/column-summary/legacy-chart-spec.ts

@@ -17,6 +17,11 @@ import {
   isDataURLString,
 } from "@/utils/json/base64";
 
+// Height (px) of the fallback/legacy summary charts. The invisible full-height
+// hover layer's `y2` must match this so it covers the whole plot; shared with
+// `createBase` so the two can't drift apart.
+export const DEFAULT_CHART_HEIGHT = 100;
+
 export function getLegacyNumericSpec(
   column: string,
   format: string,
@@ -47,7 +52,8 @@ export function getLegacyNumericSpec(
         },
       },
 
-      // Tooltip layer
+      // Full-height invisible hit targets (pixel coords). Avoid
+      // `y: { aggregate: "max" }` without a field — Vega drops it (#10303).
       {
         mark: {
           type: "bar",
@@ -67,9 +73,10 @@ export function getLegacyNumericSpec(
             },
           },
           y: {
-            aggregate: "max",
-            type: "quantitative",
-            axis: null,
+            value: 0,
+          },
+          y2: {
+            value: DEFAULT_CHART_HEIGHT,
           },
           tooltip: [
             {
@@ -136,8 +143,8 @@ export function getLegacyTemporalSpec(
         },
       },
 
-      // 0 opacity full-height bars with tooltips, since it is too hard to trigger
-      // the tooltip for very small bars.
+      // Full-height invisible hit targets (pixel coords). Avoid
+      // `y: { aggregate: "max" }` without a field — Vega drops it (#10303).
       {
         mark: {
           type: "bar",
@@ -151,7 +158,8 @@ export function getLegacyTemporalSpec(
             bin: true,
             scale: scale,
           },
-          y: { aggregate: "max", type: "quantitative", axis: null },
+          y: { value: 0 },
+          y2: { value: DEFAULT_CHART_HEIGHT },
           tooltip: [
             {
               // Can also use column, but this is more explicit

package/src/components/data-table/column-summary/utils.ts

@@ -2,10 +2,29 @@
 
 import type { StringFieldDef } from "vega-lite/types_unstable/channeldef.js";
 import { Logger } from "@/utils/Logger";
-import type { BinValues } from "../types";
+import type { BinValue, BinValues } from "../types";
 
 const READABLE_TIME_FORMAT = "%-I:%M:%S %p"; // e.g., 1:02:30 AM (no leading zero on hour)
 
+/**
+ * True when a bin has finite, non-null start/end suitable for quantitative /
+ * temporal encodings. Rejects nulls and NaN (all-NaN hist garbage).
+ */
+export function isValidBinValue(value: BinValue): boolean {
+  const { bin_start, bin_end } = value;
+  if (bin_start == null || bin_end == null) {
+    return false;
+  }
+  // Reject NaN and ±Infinity; they break quantitative/temporal encodings.
+  if (typeof bin_start === "number" && !Number.isFinite(bin_start)) {
+    return false;
+  }
+  if (typeof bin_end === "number" && !Number.isFinite(bin_end)) {
+    return false;
+  }
+  return true;
+}
+
 export function getPartialTimeTooltip(
   values: BinValues,
 ): Partial<StringFieldDef<string>> {
@@ -13,9 +32,11 @@ export function getPartialTimeTooltip(
     return {};
   }
 
-  // Find non-null value
-  const value = values.find((v) => v.bin_start !== null)?.bin_start;
-  if (!value) {
+  // Find first valid bin. `isValidBinValue` guarantees a non-null, finite
+  // start, so only bail when no valid bin exists (nullish, not falsy — a
+  // numeric `0` / epoch timestamp is a legitimate value).
+  const value = values.find((v) => isValidBinValue(v))?.bin_start;
+  if (value == null) {
     return {};
   }
 
@@ -89,9 +110,7 @@ export function calculateBinStep(values: BinValues) {
     return 1;
   }
 
-  const validValues = values.filter(
-    (v) => v.bin_start !== null && v.bin_end !== null,
-  );
+  const validValues = values.filter(isValidBinValue);
 
   if (validValues.length === 0) {
     return 1;

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

@@ -70,7 +70,7 @@ export function toFieldTypes(
   return new Map(fieldTypes.map(([columnName, [type]]) => [columnName, type]));
 }
 
-interface BinValue {
+export interface BinValue {
   bin_start: number | string | Date | null;
   bin_end: number | string | Date | null;
   count: number;

package/src/components/slides/__tests__/cell-output-block.test.tsx

@@ -0,0 +1,40 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { CellOutputId } from "@/core/cells/ids";
+import { createCell, createCellRuntimeState } from "@/core/cells/types";
+import { CellOutputBlock } from "../reveal-component";
+
+describe("CellOutputBlock", () => {
+  it("renders the cell's data-cell-id and data-cell-name so it can be targeted by custom CSS", () => {
+    const id = cellId("test");
+    const cell = {
+      ...createCell({ id, name: "title" }),
+      ...createCellRuntimeState({
+        output: {
+          channel: "output",
+          mimetype: "text/plain",
+          data: "hello",
+          timestamp: 0,
+        },
+      }),
+    };
+
+    const { container } = render(
+      <TooltipProvider>
+        <CellOutputBlock cell={cell} />
+      </TooltipProvider>,
+    );
+
+    const cellElement = container.querySelector(`[data-cell-id="${id}"]`);
+    expect(cellElement).toBeTruthy();
+    expect(cellElement?.getAttribute("data-cell-name")).toBe("title");
+
+    // The wrapper's `data-cell-id` must coexist with the output's own
+    // `CellOutputId`-derived id, without colliding.
+    expect(document.getElementById(CellOutputId.create(id))).toBeTruthy();
+  });
+});

package/src/components/slides/__tests__/slide-cell-view.test.tsx

@@ -0,0 +1,33 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { render } from "@testing-library/react";
+import { beforeAll, describe, expect, it } from "vitest";
+import { SetupMocks } from "@/__mocks__/common";
+import { cellId } from "@/__tests__/branded";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { createCell, createCellRuntimeState } from "@/core/cells/types";
+import { SlideCellReadOnlyView } from "../slide-cell-view";
+
+beforeAll(() => {
+  SetupMocks.resizeObserver();
+});
+
+describe("SlideCellReadOnlyView", () => {
+  it("renders the cell's data-cell-id and data-cell-name so it can be targeted by custom CSS", () => {
+    const id = cellId("test");
+    const cell = {
+      ...createCell({ id, name: "title", code: "x = 1" }),
+      ...createCellRuntimeState(),
+    };
+
+    const { container } = render(
+      <TooltipProvider>
+        <SlideCellReadOnlyView cell={cell} />
+      </TooltipProvider>,
+    );
+
+    const cellElement = container.querySelector(`[data-cell-id="${id}"]`);
+    expect(cellElement).toBeTruthy();
+    expect(cellElement?.getAttribute("data-cell-name")).toBe("title");
+  });
+});

package/src/components/slides/reveal-component.tsx

@@ -13,6 +13,7 @@ import useEvent from "react-use-event-hook";
 import { CodeIcon, ExpandIcon, EyeOffIcon } from "lucide-react";
 import { Deck, Fragment, Slide, Stack } from "@revealjs/react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { cellDomProps } from "@/components/editor/common";
 import { Slide as CellOutputSlide } from "@/components/slides/slide";
 import { SlideScrollContainer } from "@/components/slides/slide-scroll-hint";
 import { Button } from "@/components/ui/button";
@@ -304,6 +305,25 @@ function resolveSlideContentStyle(
   }
 }
 
+/**
+ * Renders a cell's output wrapped in a `data-cell-id`/`data-cell-name` div
+ * (see `cellDomProps`), so it can be targeted by custom CSS in the slides
+ * view just like it can in the vertical layout. The wrapper is required
+ * because `CellOutputSlide` sets its own `id` from `CellOutputId` (a
+ * different scheme than `HTMLCellId`) and its inner `OutputArea` uses
+ * `display: contents`, which can't be targeted for background/border styling.
+ */
+export const CellOutputBlock = ({ cell }: { cell: RuntimeCell }) => (
+  <div className="flex flex-col" {...cellDomProps(cell.id, cell.name)}>
+    <CellOutputSlide
+      cellId={cell.id}
+      status={cell.status}
+      output={cell.output}
+      stale={outputIsStale(cell, false)}
+    />
+  </div>
+);
+
 const SubslideView = ({
   subslide,
   resolveShowCode,
@@ -340,15 +360,7 @@ const SubslideView = ({
           {subslide.blocks.map((block, i) => {
             const rendered = block.cells.map((cell) => {
               if (!resolveShowCode(cell.id)) {
-                return (
-                  <CellOutputSlide
-                    key={cell.id}
-                    cellId={cell.id}
-                    status={cell.status}
-                    output={cell.output}
-                    stale={outputIsStale(cell, false)}
-                  />
-                );
+                return <CellOutputBlock key={cell.id} cell={cell} />;
               }
               return isEditable ? (
                 <SlideCellView key={cell.id} cell={cell} />
@@ -406,14 +418,7 @@ const ParkedPreviewContent = ({
       <SlideCellReadOnlyView cell={cell} />
     );
   }
-  return (
-    <CellOutputSlide
-      cellId={cell.id}
-      status={cell.status}
-      output={cell.output}
-      stale={outputIsStale(cell, false)}
-    />
-  );
+  return <CellOutputBlock cell={cell} />;
 };
 
 // There is an upstream react bug in dev mode (https://github.com/facebook/react/issues/34840)

package/src/components/slides/slide-cell-view.tsx

@@ -202,7 +202,7 @@ export const SlideCellReadOnlyView = ({ cell }: { cell: RuntimeCell }) => {
   );
 
   const editor = (
-    <div className="marimo-cell">
+    <div className="marimo-cell" {...cellDomProps(cell.id, cell.name)}>
       <ReadonlyCode
         code={display.code}
         language={display.language}

package/src/components/slides/slides.css

@@ -15,8 +15,10 @@
     width: unset;
   }
 
-  /* If the first output is the only child, make it flex 1 */
-  > *:only-child > .output:only-child {
+  /* If the first output is the only child, make it flex 1. Cells are wrapped
+     in a `data-cell-id`/`data-cell-name` div (see `cellDomProps`), so `.output`
+     is a grandchild rather than a direct child here. */
+  > *:only-child:has(> .output:only-child, > * > .output:only-child) {
     flex: 1;
   }