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

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/core/codemirror/find-replace/__tests__/navigate.test.ts

@@ -20,6 +20,26 @@ vi.mock("@/core/cells/cells", () => ({
   getAllEditorViews: () => mockGetAllEditorViews(),
 }));
 
+/**
+ * A view stub that only carries what navigate needs
+ */
+function createMockView(state: EditorState): EditorView {
+  const cell = document.createElement("div");
+  cell.className = "marimo-cell";
+  // jsdom doesn't implement scrollIntoView.
+  cell.scrollIntoView = vi.fn();
+  const dom = document.createElement("div");
+  cell.append(dom);
+
+  return {
+    state,
+    dom,
+    // Don't actually apply changes; it's complex to mock properly and the
+    // assertions only care that dispatch was called.
+    dispatch: vi.fn(),
+  } as unknown as EditorView;
+}
+
 describe("navigate", () => {
   let view1: EditorView;
   let view2: EditorView;
@@ -36,20 +56,8 @@ describe("navigate", () => {
     });
 
     // Create mock views that track dispatch calls
-    view1 = {
-      state: state1,
-      dispatch: vi.fn(() => {
-        // Mock dispatch - in real tests we just need to verify it was called
-        // Don't actually apply changes as it's complex to mock properly
-      }),
-    } as unknown as EditorView;
-
-    view2 = {
-      state: state2,
-      dispatch: vi.fn(() => {
-        // Mock dispatch - in real tests we just need to verify it was called
-      }),
-    } as unknown as EditorView;
+    view1 = createMockView(state1);
+    view2 = createMockView(state2);
 
     mockViews = [view1, view2];
     mockGetAllEditorViews.mockReturnValue(mockViews);
@@ -234,6 +242,22 @@ describe("navigate", () => {
 
       expect(result).toBe(false);
     });
+
+    it("should scroll the cell owning the match into view", async () => {
+      const cell = view1.dom.closest(".marimo-cell");
+      invariant(cell, "mock view should be inside a cell");
+
+      expect(findNext()).toBeTruthy();
+
+      // The scroll is deferred a frame.
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+
+      expect(cell.scrollIntoView).toHaveBeenCalledWith({
+        behavior: "instant",
+        block: "nearest",
+        inline: "nearest",
+      });
+    });
   });
 
   describe("findPrev", () => {
@@ -319,10 +343,7 @@ describe("navigate", () => {
         extensions: [EditorState.readOnly.of(true)],
       });
 
-      const readOnlyView = {
-        state: readOnlyState,
-        dispatch: vi.fn(),
-      } as unknown as EditorView;
+      const readOnlyView = createMockView(readOnlyState);
 
       // Replace view1 with read-only view temporarily
       mockGetAllEditorViews.mockReturnValueOnce([readOnlyView, view2]);
@@ -568,10 +589,7 @@ describe("navigate", () => {
         doc: Text.of(["hello world hello there hello"]),
       });
 
-      const testView = {
-        state: testDoc,
-        dispatch: vi.fn(),
-      } as unknown as EditorView;
+      const testView = createMockView(testDoc);
 
       mockGetAllEditorViews.mockReturnValue([testView]);
 
@@ -613,10 +631,7 @@ describe("navigate", () => {
         doc: Text.of([""]),
       });
 
-      const emptyView = {
-        state: emptyState,
-        dispatch: vi.fn(),
-      } as unknown as EditorView;
+      const emptyView = createMockView(emptyState);
 
       mockGetAllEditorViews.mockReturnValue([emptyView]);
 
@@ -629,10 +644,7 @@ describe("navigate", () => {
         doc: Text.of(["orphan content"]),
       });
 
-      const orphanView = {
-        state: orphanState,
-        dispatch: vi.fn(),
-      } as unknown as EditorView;
+      const orphanView = createMockView(orphanState);
 
       store.set(findReplaceAtom, {
         type: "setCurrentView",

package/src/core/codemirror/find-replace/navigate.ts

@@ -6,6 +6,7 @@ import { EditorView } from "@codemirror/view";
 import { getAllEditorViews } from "@/core/cells/cells";
 import { replaceEditorContent } from "@/core/codemirror/replace-editor-content";
 import { store } from "@/core/state/jotai";
+import { scrollOwnerCell } from "../utils";
 import { asQueryCreator, type QueryType } from "./query";
 import { findReplaceAtom } from "./state";
 
@@ -85,6 +86,7 @@ const findInDirection = (direction: "next" | "prev") =>
         effects: [EditorView.scrollIntoView(selection.main, { y: "center" })],
         userEvent: "select.search",
       });
+      scrollOwnerCell(view);
       store.set(findReplaceAtom, {
         type: "setCurrentView",
         view,

package/src/core/codemirror/go-to-definition/__tests__/commands.test.ts

@@ -3,14 +3,14 @@
 import { python } from "@codemirror/lang-python";
 import { EditorState } from "@codemirror/state";
 import { EditorView } from "@codemirror/view";
-import { afterEach, describe, expect, test } from "vitest";
+import { afterEach, describe, expect, test, vi } from "vitest";
 import { goToVariableDefinition } from "../commands";
 
 async function tick(): Promise<void> {
   await new Promise((resolve) => requestAnimationFrame(resolve));
 }
 
-function createEditor(content: string) {
+function createEditor(content: string, parent: HTMLElement = document.body) {
   const state = EditorState.create({
     doc: content,
     extensions: [python()],
@@ -18,7 +18,7 @@ function createEditor(content: string) {
 
   const view = new EditorView({
     state,
-    parent: document.body,
+    parent,
   });
 
   return view;
@@ -383,6 +383,27 @@ print('myVar')`);
       "
     `);
   });
+
+  test("scrolls the cell owning the definition into view", async () => {
+    const cell = document.createElement("div");
+    cell.className = "marimo-cell";
+    // jsdom doesn't implement scrollIntoView.
+    cell.scrollIntoView = vi.fn();
+    document.body.append(cell);
+
+    view = createEditor("myVar = 10\nprint(myVar)", cell);
+    expect(goToVariableDefinition(view, "myVar")).toBe(true);
+    // The jump and the scroll are both deferred to the next frame.
+    await tick();
+
+    expect(cell.scrollIntoView).toHaveBeenCalledWith({
+      behavior: "instant",
+      block: "nearest",
+      inline: "nearest",
+    });
+
+    cell.remove();
+  });
 });
 
 /**