@marimo-team/frontend 0.23.16-dev8 → 0.23.16

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/columns.tsx

@@ -175,7 +175,17 @@ export function generateColumns<T>({
 
   const columnKeys: string[] = [
     ...rowHeadersSet,
-    ...fieldTypes.map(([columnName]) => columnName),
+    ...fieldTypes
+      .filter(([columnName]) => {
+        if (rowHeadersSet.has(columnName)) {
+          Logger.warn(
+            `Skipping field type for row header column ${columnName}`,
+          );
+          return false;
+        }
+        return true;
+      })
+      .map(([columnName]) => columnName),
   ];
 
   // Remove the index column if it exists

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/editor/__tests__/viewer-banner.test.tsx

@@ -54,6 +54,20 @@ describe("ViewerBanner", () => {
     expect(container).toBeEmptyDOMElement();
   });
 
+  it("pins the banner without reserving layout space", () => {
+    const store = createStore();
+    store.set(kioskModeAtom, true);
+    render(
+      <Provider store={store}>
+        <TooltipProvider>
+          <ViewerBanner />
+        </TooltipProvider>
+      </Provider>,
+    );
+    const wrapper = screen.getByTestId("takeover-button").closest("div.sticky");
+    expect(wrapper).toHaveClass("sticky", "top-2", "h-0");
+  });
+
   it("renders nothing in present mode", () => {
     const store = createStore();
     store.set(kioskModeAtom, true);