@marimo-team/frontend 0.23.16-dev9 → 0.23.16

package/src/components/data-table/__tests__/__snapshots__/chart-spec-model.test.ts.snap

@@ -109,9 +109,10 @@ exports[`ColumnChartSpecModel > file URL handling > should handle arrow data 1`]
           "type": "temporal",
         },
         "y": {
-          "aggregate": "max",
-          "axis": null,
-          "type": "quantitative",
+          "value": 0,
+        },
+        "y2": {
+          "value": 100,
         },
       },
       "mark": {
@@ -222,9 +223,10 @@ exports[`ColumnChartSpecModel > should expect bin values to be used for number a
           "field": "bin_end_extended",
         },
         "y": {
-          "aggregate": "max",
-          "axis": null,
-          "type": "quantitative",
+          "value": 0,
+        },
+        "y2": {
+          "value": 30,
         },
       },
       "mark": {
@@ -486,9 +488,10 @@ exports[`ColumnChartSpecModel > should handle datetime bin values 1`] = `
           "type": "ordinal",
         },
         "y": {
-          "aggregate": "max",
-          "axis": null,
-          "type": "quantitative",
+          "value": 0,
+        },
+        "y2": {
+          "value": 30,
         },
       },
       "mark": {
@@ -633,6 +636,152 @@ exports[`ColumnChartSpecModel > should handle string value counts 1`] = `
 }
 `;
 
+exports[`ColumnChartSpecModel > should render a null bar for all-null temporal columns 1`] = `
+{
+  "background": "transparent",
+  "config": {
+    "axis": {
+      "domain": false,
+    },
+    "view": {
+      "stroke": "transparent",
+    },
+  },
+  "data": {
+    "name": "bin_values",
+    "values": [
+      {
+        "bin_end": null,
+        "bin_start": null,
+        "count": 12,
+      },
+    ],
+  },
+  "height": 30,
+  "layer": [
+    {
+      "encoding": {
+        "x": {
+          "axis": null,
+          "field": "bin_start",
+          "type": "nominal",
+        },
+        "y": {
+          "axis": null,
+          "field": "count",
+          "type": "quantitative",
+        },
+      },
+      "mark": {
+        "color": "#cc4e00",
+        "type": "bar",
+      },
+    },
+    {
+      "encoding": {
+        "tooltip": [
+          {
+            "field": "count",
+            "format": ",d",
+            "title": "nulls",
+            "type": "quantitative",
+          },
+        ],
+        "x": {
+          "axis": null,
+          "field": "bin_start",
+          "type": "nominal",
+        },
+        "y": {
+          "value": 0,
+        },
+        "y2": {
+          "value": 30,
+        },
+      },
+      "mark": {
+        "opacity": 0,
+        "type": "bar",
+      },
+    },
+  ],
+  "width": 70,
+}
+`;
+
+exports[`ColumnChartSpecModel > should render only a null bar for all-null numeric columns 1`] = `
+{
+  "background": "transparent",
+  "config": {
+    "axis": {
+      "domain": false,
+    },
+    "view": {
+      "stroke": "transparent",
+    },
+  },
+  "data": {
+    "name": "bin_values",
+    "values": [
+      {
+        "bin_end": null,
+        "bin_start": null,
+        "count": 12,
+      },
+    ],
+  },
+  "height": 30,
+  "layer": [
+    {
+      "encoding": {
+        "x": {
+          "axis": null,
+          "field": "bin_start",
+          "type": "nominal",
+        },
+        "y": {
+          "axis": null,
+          "field": "count",
+          "type": "quantitative",
+        },
+      },
+      "mark": {
+        "color": "#cc4e00",
+        "type": "bar",
+      },
+    },
+    {
+      "encoding": {
+        "tooltip": [
+          {
+            "field": "count",
+            "format": ",d",
+            "title": "nulls",
+            "type": "quantitative",
+          },
+        ],
+        "x": {
+          "axis": null,
+          "field": "bin_start",
+          "type": "nominal",
+        },
+        "y": {
+          "value": 0,
+        },
+        "y2": {
+          "value": 30,
+        },
+      },
+      "mark": {
+        "opacity": 0,
+        "type": "bar",
+      },
+    },
+  ],
+  "width": 70,
+}
+`;
+
 exports[`ColumnChartSpecModel > snapshot with legacy data spec > array 1`] = `
 {
   "background": "transparent",
@@ -700,9 +849,10 @@ exports[`ColumnChartSpecModel > snapshot with legacy data spec > array 1`] = `
           "type": "quantitative",
         },
         "y": {
-          "aggregate": "max",
-          "axis": null,
-          "type": "quantitative",
+          "value": 0,
+        },
+        "y2": {
+          "value": 100,
         },
       },
       "mark": {
@@ -788,9 +938,10 @@ exports[`ColumnChartSpecModel > snapshot with legacy data spec > csv data 1`] =
           "type": "quantitative",
         },
         "y": {
-          "aggregate": "max",
-          "axis": null,
-          "type": "quantitative",
+          "value": 0,
+        },
+        "y2": {
+          "value": 100,
         },
       },
       "mark": {
@@ -876,9 +1027,10 @@ exports[`ColumnChartSpecModel > snapshot with legacy data spec > csv string 1`]
           "type": "quantitative",
         },
         "y": {
-          "aggregate": "max",
-          "axis": null,
-          "type": "quantitative",
+          "value": 0,
+        },
+        "y2": {
+          "value": 100,
         },
       },
       "mark": {
@@ -988,9 +1140,10 @@ exports[`ColumnChartSpecModel > snapshot with legacy data spec > url data 1`] =
           "type": "temporal",
         },
         "y": {
-          "aggregate": "max",
-          "axis": null,
-          "type": "quantitative",
+          "value": 0,
+        },
+        "y2": {
+          "value": 100,
         },
       },
       "mark": {

package/src/components/data-table/__tests__/chart-spec-model.test.ts

@@ -178,6 +178,104 @@ describe("ColumnChartSpecModel", () => {
     expect(summary2.spec?.data?.values).toEqual(mockBinValues.integer);
   });
 
+  it("should render only a null bar for all-null numeric columns", () => {
+    const allNullStats: Record<ColumnName, Partial<ColumnHeaderStats>> = {
+      number: { nulls: 12, total: 12 },
+    };
+    const allNullBins: Record<ColumnName, BinValues> = {
+      number: [],
+    };
+    const model = new ColumnChartSpecModel(
+      [],
+      mockFieldTypes,
+      allNullStats,
+      allNullBins,
+      {},
+      { includeCharts: true },
+    );
+    const summary = model.getHeaderSummary("number");
+    expect(summary.spec).toBeDefined();
+    // @ts-expect-error hconcat should be available
+    expect(summary.spec?.hconcat).toBeUndefined();
+    // @ts-expect-error data.values should be available
+    expect(summary.spec?.data?.values).toEqual([
+      { bin_start: null, bin_end: null, count: 12 },
+    ]);
+    // Full-width null-only chart (not the thin hconcat null strip)
+    expect(summary.spec?.width).toBe(70);
+    // Full-height tooltip hit area uses pixel y/y2 (no aggregate:max)
+    // @ts-expect-error layer should be available
+    expect(summary.spec?.layer?.[1]?.encoding?.y).toEqual({ value: 0 });
+    // @ts-expect-error layer should be available
+    expect(summary.spec?.layer?.[1]?.encoding?.y2).toEqual({ value: 30 });
+    expect(summary.spec).toMatchSnapshot();
+  });
+
+  it("should ignore NaN bins and not mutate stored bin values", () => {
+    const nanOnlyBins: Record<ColumnName, BinValues> = {
+      number: [
+        { bin_start: Number.NaN, bin_end: 0.1, count: 0 },
+        { bin_start: Number.NaN, bin_end: 1, count: 0 },
+      ],
+    };
+    const stats: Record<ColumnName, Partial<ColumnHeaderStats>> = {
+      number: { nulls: 12, total: 12 },
+    };
+    const model = new ColumnChartSpecModel(
+      [],
+      mockFieldTypes,
+      stats,
+      nanOnlyBins,
+      {},
+      { includeCharts: true },
+    );
+    const first = model.getHeaderSummary("number");
+    const second = model.getHeaderSummary("number");
+    // All NaN bins are invalid → null-only chart
+    // @ts-expect-error hconcat should be available
+    expect(first.spec?.hconcat).toBeUndefined();
+    expect(first.spec?.width).toBe(70);
+    // Stored bins must not grow across getHeaderSummary calls
+    expect(nanOnlyBins.number).toHaveLength(2);
+    expect(second.spec).toEqual(first.spec);
+  });
+
+  it("should render a null bar for all-null temporal columns", () => {
+    const model = new ColumnChartSpecModel(
+      [],
+      mockFieldTypes,
+      { datetime: { nulls: 12, total: 12 } },
+      { datetime: [] },
+      {},
+      { includeCharts: true },
+    );
+    const summary = model.getHeaderSummary("datetime");
+    expect(summary.spec).toBeDefined();
+    // @ts-expect-error data.values
+    expect(summary.spec?.data?.values).toEqual([
+      { bin_start: null, bin_end: null, count: 12 },
+    ]);
+    expect(summary.spec?.width).toBe(70);
+    // Same full-height hover hit area as numeric all-null charts
+    // @ts-expect-error layer should be available
+    expect(summary.spec?.layer?.[1]?.encoding?.y).toEqual({ value: 0 });
+    // @ts-expect-error layer should be available
+    expect(summary.spec?.layer?.[1]?.encoding?.y2).toEqual({ value: 30 });
+    expect(summary.spec).toMatchSnapshot();
+  });
+
+  it("should return null when numeric bins are empty and there are no nulls", () => {
+    const model = new ColumnChartSpecModel(
+      [],
+      mockFieldTypes,
+      { number: { min: 0, max: 1 } },
+      { number: [] },
+      {},
+      { includeCharts: true },
+    );
+    expect(model.getHeaderSummary("number").spec).toBeNull();
+  });
+
   it("should handle datetime bin values", () => {
     const model = new ColumnChartSpecModel(
       [],
@@ -191,7 +289,10 @@ describe("ColumnChartSpecModel", () => {
     const summary = model.getHeaderSummary("datetime");
     expect(summary.spec).toBeDefined();
     // @ts-expect-error data.values should be available
-    expect(summary.spec?.data?.values).toEqual(mockBinValues.datetime);
+    expect(summary.spec?.data?.values).toEqual([
+      ...mockBinValues.datetime,
+      { bin_start: null, bin_end: null, count: 10 },
+    ]);
 
     expect(summary.spec).toMatchSnapshot();
 

package/src/components/data-table/__tests__/columns.test.tsx

@@ -5,6 +5,7 @@ import { fireEvent, render } from "@testing-library/react";
 import { I18nProvider } from "react-aria";
 import { describe, expect, it, test, vi } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { Logger } from "@/utils/Logger";
 import { parseContent } from "@/utils/url-parser";
 import {
   generateColumns,
@@ -174,16 +175,23 @@ describe("generateColumns", () => {
   ];
 
   it("should generate columns with row headers", () => {
+    const loggerWarn = vi.spyOn(Logger, "warn").mockImplementation(() => {});
+    // "name" intentionally appears in both inputs; the row header takes precedence.
     const columns = generateColumns({
       rowHeaders: [["name", ["string", "text"]]],
       selection: null,
       fieldTypes,
     });
 
-    expect(columns).toHaveLength(3);
+    expect(columns).toHaveLength(2);
+    expect(columns.map((column) => column.id)).toEqual(["name", "age"]);
     expect(columns[0].id).toBe("name");
     expect(columns[0].meta?.rowHeader).toBe(true);
     expect(columns[0].enableSorting).toBe(true);
+    expect(loggerWarn).toHaveBeenCalledWith(
+      "Skipping field type for row header column name",
+    );
+    loggerWarn.mockRestore();
   });
 
   it("should generate columns with nameless row headers", () => {