@marimo-team/islands 0.17.2 → 0.17.4

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

@@ -61,7 +61,7 @@ describe("ColumnChartSpecModel", () => {
 
   it("should create an instance", () => {
     const model = new ColumnChartSpecModel(
-      mockData,
+      [],
       mockFieldTypes,
       mockStats,
       mockBinValues,
@@ -78,7 +78,7 @@ describe("ColumnChartSpecModel", () => {
 
   it("should return header summary with spec when includeCharts is true", () => {
     const model = new ColumnChartSpecModel(
-      mockData,
+      [],
       mockFieldTypes,
       mockStats,
       mockBinValues,
@@ -93,7 +93,7 @@ describe("ColumnChartSpecModel", () => {
 
   it("should return header summary without spec when includeCharts is false", () => {
     const model = new ColumnChartSpecModel(
-      mockData,
+      [],
       mockFieldTypes,
       mockStats,
       mockBinValues,
@@ -106,17 +106,17 @@ describe("ColumnChartSpecModel", () => {
     expect(numberSummary.spec).toBeUndefined();
   });
 
-  it("should return null spec for string and unknown types", () => {
+  it("should return null spec for unknown types", () => {
     const model = new ColumnChartSpecModel(
-      mockData,
+      [],
       mockFieldTypes,
       mockStats,
       mockBinValues,
       mockValueCounts,
       { includeCharts: true },
     );
-    const stringSummary = model.getHeaderSummary("string");
-    expect(stringSummary.spec).toBeNull();
+    const unknownSummary = model.getHeaderSummary("unknown");
+    expect(unknownSummary.spec).toBeNull();
   });
 
   it("should handle special characters in column names", () => {
@@ -126,11 +126,18 @@ describe("ColumnChartSpecModel", () => {
     const specialStats: Record<ColumnName, Partial<ColumnHeaderStats>> = {
       "column.with[special:chars]": { min: "2023-01-01", max: "2023-12-31" },
     };
+    const specialBinValues: Record<ColumnName, BinValues> = {
+      ...mockBinValues,
+      "column.with[special:chars]": [
+        { bin_start: "2023-01-01", bin_end: "2023-06-01", count: 10 },
+        { bin_start: "2023-06-01", bin_end: "2023-12-31", count: 20 },
+      ],
+    };
     const model = new ColumnChartSpecModel(
-      mockData,
+      [],
       specialFieldTypes,
       specialStats,
-      mockBinValues,
+      specialBinValues,
       mockValueCounts,
       { includeCharts: true },
     );
@@ -139,17 +146,17 @@ describe("ColumnChartSpecModel", () => {
     expect(
       // @ts-expect-error layer should be available
       (summary.spec?.layer[0].encoding?.x as { field: string })?.field,
-    ).toBe("column\\.with\\[special\\:chars\\]");
+    ).toBe("bin_start");
   });
 
-  it("should expect bin values to be used for number and integer columns when feat flag is true", () => {
+  it("should expect bin values to be used for number and integer columns", () => {
     const model = new ColumnChartSpecModel(
-      mockData,
+      [],
       mockFieldTypes,
       mockStats,
       mockBinValues,
       mockValueCounts,
-      { includeCharts: true, usePreComputedValues: true },
+      { includeCharts: true },
     );
     const summary = model.getHeaderSummary("number");
     expect(summary.spec).toBeDefined();
@@ -171,14 +178,14 @@ describe("ColumnChartSpecModel", () => {
     expect(summary2.spec?.data?.values).toEqual(mockBinValues.integer);
   });
 
-  it("should handle datetime bin values when feat flag is true", () => {
+  it("should handle datetime bin values", () => {
     const model = new ColumnChartSpecModel(
-      mockData,
+      [],
       mockFieldTypes,
       mockStats,
       mockBinValues,
       mockValueCounts,
-      { includeCharts: true, usePreComputedValues: true },
+      { includeCharts: true },
     );
 
     const summary = model.getHeaderSummary("datetime");
@@ -186,9 +193,6 @@ describe("ColumnChartSpecModel", () => {
     // @ts-expect-error data.values should be available
     expect(summary.spec?.data?.values).toEqual(mockBinValues.datetime);
 
-    // Expect hconcat since there are nulls
-    // @ts-expect-error hconcat should be available
-    expect(summary.spec?.hconcat).toBeDefined();
     expect(summary.spec).toMatchSnapshot();
 
     // Test again without the nulls
@@ -197,12 +201,12 @@ describe("ColumnChartSpecModel", () => {
       datetime: { min: "2023-01-01", max: "2023-12-31" },
     };
     const model2 = new ColumnChartSpecModel(
-      mockData,
+      [],
       mockFieldTypes,
       mockStats2,
       mockBinValues,
       mockValueCounts,
-      { includeCharts: true, usePreComputedValues: true },
+      { includeCharts: true },
     );
     const summary2 = model2.getHeaderSummary("datetime");
     expect(summary2.spec).toBeDefined();
@@ -212,14 +216,14 @@ describe("ColumnChartSpecModel", () => {
     expect(summary2.spec?.hconcat).toBeUndefined();
   });
 
-  it("should handle boolean stats when feat flag is true", () => {
+  it("should handle boolean stats", () => {
     const model = new ColumnChartSpecModel(
-      mockData,
+      [],
       mockFieldTypes,
       mockStats,
       mockBinValues,
       mockValueCounts,
-      { includeCharts: true, usePreComputedValues: true },
+      { includeCharts: true },
     );
     const summary = model.getHeaderSummary("boolean");
     expect(summary.spec).toBeDefined();
@@ -234,14 +238,14 @@ describe("ColumnChartSpecModel", () => {
     expect(summary.spec).toMatchSnapshot();
   });
 
-  it("should handle string value counts when feat flag is true", () => {
+  it("should handle string value counts", () => {
     const model = new ColumnChartSpecModel(
-      mockData,
+      [],
       mockFieldTypes,
       mockStats,
       mockBinValues,
       mockValueCounts,
-      { includeCharts: true, usePreComputedValues: true },
+      { includeCharts: true },
     );
     const summary = model.getHeaderSummary("string");
     expect(summary.spec).toBeDefined();
@@ -262,7 +266,7 @@ describe("ColumnChartSpecModel", () => {
     expect(summary.spec).toMatchSnapshot();
   });
 
-  describe("snapshot", () => {
+  describe("snapshot with legacy data spec", () => {
     const fieldTypes: FieldTypes = {
       ...mockFieldTypes,
       a: "number",

package/src/components/data-table/charts/__tests__/__snapshots__/spec-snapshot.test.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`create vega spec > should create and augment a spec 1`] = `
 {
-  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
   "background": "white",
   "config": {
     "axis": {

package/src/components/data-table/charts/__tests__/altair-generator.test.ts

@@ -422,4 +422,166 @@ describe("generateAltairChart", () => {
       )"
     `);
   });
+
+  it("should escape dots in field names", () => {
+    const spec = createSpec({
+      mark: "bar",
+      encoding: {
+        x: { field: "name.field" },
+        y: { field: "value.data" },
+      },
+    });
+    const datasource = "df";
+
+    const result = generateAltairChart(spec, datasource).toCode();
+
+    expect(result).toMatchInlineSnapshot(`
+      "alt.Chart(df)
+      .mark_bar()
+      .encode(
+          x=alt.X(field='name\\.field'),
+          y=alt.Y(field='value\\.data')
+      )"
+    `);
+  });
+
+  it("should escape brackets in field names", () => {
+    const spec = createSpec({
+      mark: "bar",
+      encoding: {
+        x: { field: "data[0]" },
+        y: { field: "values[key]" },
+      },
+    });
+    const datasource = "df";
+
+    const result = generateAltairChart(spec, datasource).toCode();
+
+    expect(result).toMatchInlineSnapshot(`
+      "alt.Chart(df)
+      .mark_bar()
+      .encode(
+          x=alt.X(field='data\\[0\\]'),
+          y=alt.Y(field='values\\[key\\]')
+      )"
+    `);
+  });
+
+  it("should escape colons in field names", () => {
+    const spec = createSpec({
+      mark: "bar",
+      encoding: {
+        x: { field: "time:stamp" },
+        y: { field: "value" },
+      },
+    });
+    const datasource = "df";
+
+    const result = generateAltairChart(spec, datasource).toCode();
+
+    expect(result).toMatchInlineSnapshot(`
+      "alt.Chart(df)
+      .mark_bar()
+      .encode(
+          x=alt.X(field='time\\:stamp'),
+          y=alt.Y(field='value')
+      )"
+    `);
+  });
+
+  it("should escape multiple special characters in field names", () => {
+    const spec = createSpec({
+      mark: "bar",
+      encoding: {
+        x: { field: "data[0].name:value" },
+        y: { field: "result" },
+      },
+    });
+    const datasource = "df";
+
+    const result = generateAltairChart(spec, datasource).toCode();
+
+    expect(result).toMatchInlineSnapshot(`
+      "alt.Chart(df)
+      .mark_bar()
+      .encode(
+          x=alt.X(field='data\\[0\\]\\.name\\:value'),
+          y=alt.Y(field='result')
+      )"
+    `);
+  });
+
+  it("should escape special characters in color encoding", () => {
+    const spec = createSpec({
+      mark: "bar",
+      encoding: {
+        x: { field: "category" },
+        y: { field: "value" },
+        color: { field: "group.name" },
+      },
+    });
+    const datasource = "df";
+
+    const result = generateAltairChart(spec, datasource).toCode();
+
+    expect(result).toMatchInlineSnapshot(`
+      "alt.Chart(df)
+      .mark_bar()
+      .encode(
+          x=alt.X(field='category'),
+          y=alt.Y(field='value'),
+          color=alt.Color(field='group\\.name')
+      )"
+    `);
+  });
+
+  it("should escape special characters in tooltip", () => {
+    const spec = createSpec({
+      mark: "bar",
+      encoding: {
+        x: { field: "category" },
+        y: { field: "value" },
+        tooltip: { field: "info.details" },
+      },
+    });
+    const datasource = "df";
+
+    const result = generateAltairChart(spec, datasource).toCode();
+
+    expect(result).toMatchInlineSnapshot(`
+      "alt.Chart(df)
+      .mark_bar()
+      .encode(
+          x=alt.X(field='category'),
+          y=alt.Y(field='value'),
+          tooltip=alt.Tooltip(field='info\\.details')
+      )"
+    `);
+  });
+
+  it("should escape special characters in facet encodings", () => {
+    const spec = createSpec({
+      mark: "bar",
+      encoding: {
+        x: { field: "category" },
+        y: { field: "value" },
+        row: { field: "row.label" },
+        column: { field: "col[0]" },
+      },
+    });
+    const datasource = "df";
+
+    const result = generateAltairChart(spec, datasource).toCode();
+
+    expect(result).toMatchInlineSnapshot(`
+      "alt.Chart(df)
+      .mark_bar()
+      .encode(
+          x=alt.X(field='category'),
+          y=alt.Y(field='value'),
+          row=alt.Row(field='row\\.label'),
+          column=alt.Column(field='col\\[0\\]')
+      )"
+    `);
+  });
 });

package/src/components/data-table/charts/__tests__/spec-snapshot.test.ts

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import type { TopLevelSpec } from "vega-lite/build/src/spec";
+import type { TopLevelSpec } from "vega-lite";
 import { describe, expect, it } from "vitest";
 import {
   augmentSpecWithData,

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

@@ -1,7 +1,8 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import type { PositionDef } from "vega-lite/build/src/channeldef";
+import type { PositionDef } from "vega-lite/types_unstable/channeldef.js";
 import { describe, expect, it } from "vitest";
+import { invariant } from "@/utils/invariant";
 import {
   getAggregate,
   getBinEncoding,
@@ -13,6 +14,7 @@ import { COUNT_FIELD, EMPTY_VALUE } from "../constants";
 import type { ChartSchemaType } from "../schemas";
 import {
   AGGREGATION_FNS,
+  BIN_AGGREGATION,
   ChartType,
   NONE_VALUE,
   STRING_AGGREGATION_FNS,
@@ -168,7 +170,11 @@ describe("getAxisEncoding", () => {
       const expectedAggregate = (result as { aggregate?: string }).aggregate;
 
       // For aggregations that are not valid for string data types, we should return undefined
-      if (agg === NONE_VALUE || !STRING_AGGREGATION_FNS.includes(agg)) {
+      if (
+        agg === NONE_VALUE ||
+        agg === BIN_AGGREGATION ||
+        !STRING_AGGREGATION_FNS.includes(agg)
+      ) {
         expect(expectedAggregate).toBeUndefined();
       } else if (STRING_AGGREGATION_FNS.includes(agg)) {
         expect(expectedAggregate).toEqual(agg);
@@ -261,13 +267,13 @@ describe("getTooltips", () => {
       xAxis: { label: "X Axis" },
     };
 
-    const xEncoding = {
+    const xEncoding: PositionDef<string> = {
       field: "x",
       type: "nominal",
       timeUnit: "year",
       aggregate: "sum",
       bin: { step: 10 },
-    } as PositionDef<string>;
+    };
 
     const result = getTooltips({
       formValues,
@@ -344,7 +350,7 @@ describe("getTooltips", () => {
   });
 
   it("should enhance tooltips with encoding parameters when field name matches encoding field", () => {
-    const formValues = {
+    const formValues: ChartSchemaType = {
       general: {
         xColumn: { type: "string" as const, aggregate: NONE_VALUE },
         yColumn: { type: "number" as const, aggregate: NONE_VALUE },
@@ -409,7 +415,7 @@ describe("getTooltips", () => {
   });
 
   it("should handle count aggregate with no field set", () => {
-    const formValues = {
+    const formValues: ChartSchemaType = {
       general: {
         xColumn: {
           field: "category",
@@ -995,3 +1001,136 @@ describe("getBinEncoding", () => {
     }
   });
 });
+
+describe("Special character escaping in specs", () => {
+  it("should escape dots in field names", () => {
+    const result = getAxisEncoding(
+      {
+        field: "value.data",
+        selectedDataType: "number",
+        aggregate: "sum",
+        timeUnit: undefined,
+      },
+      undefined,
+      "Value",
+      false,
+      ChartType.BAR,
+    );
+
+    invariant("field" in result, "field should be defined");
+    expect(result.field).toBe("value\\.data");
+  });
+
+  it("should escape brackets in field names", () => {
+    const result = getAxisEncoding(
+      {
+        field: "data[0]",
+        selectedDataType: "number",
+        aggregate: "mean",
+        timeUnit: undefined,
+      },
+      undefined,
+      "Data",
+      false,
+      ChartType.BAR,
+    );
+
+    invariant("field" in result, "field should be defined");
+    expect(result.field).toBe("data\\[0\\]");
+  });
+
+  it("should escape colons in field names", () => {
+    const result = getAxisEncoding(
+      {
+        field: "time:stamp",
+        selectedDataType: "temporal",
+        aggregate: NONE_VALUE,
+        timeUnit: "yearmonth",
+      },
+      undefined,
+      "Timestamp",
+      false,
+      ChartType.LINE,
+    );
+
+    invariant("field" in result, "field should be defined");
+    expect(result.field).toBe("time\\:stamp");
+  });
+
+  it("should escape multiple special characters in field names", () => {
+    const result = getAxisEncoding(
+      {
+        field: "data[0].value:result",
+        selectedDataType: "number",
+        aggregate: "sum",
+        timeUnit: undefined,
+      },
+      undefined,
+      "Result",
+      false,
+      ChartType.BAR,
+    );
+
+    invariant("field" in result, "field should be defined");
+    expect(result.field).toBe("data\\[0\\]\\.value\\:result");
+  });
+
+  it("should escape special characters in color encoding", () => {
+    const formValues: ChartSchemaType = {
+      general: {
+        colorByColumn: {
+          field: "group.name",
+          selectedDataType: "string",
+          aggregate: NONE_VALUE,
+        },
+      },
+    };
+
+    const result = getColorEncoding(ChartType.BAR, formValues);
+
+    invariant(result && "field" in result, "field should be defined");
+    expect(result?.field).toBe("group\\.name");
+  });
+
+  it("should escape special characters in tooltip field names", () => {
+    const formValues: ChartSchemaType = {
+      general: {
+        xColumn: {
+          field: "category",
+          selectedDataType: "string",
+          aggregate: NONE_VALUE,
+        },
+        yColumn: {
+          field: "value.data",
+          selectedDataType: "number",
+          aggregate: "sum",
+        },
+      },
+      tooltips: {
+        auto: true,
+        fields: [],
+      },
+    };
+
+    const xEncoding: PositionDef<string> = {
+      field: "category\\.escaped",
+      type: "nominal",
+    };
+
+    const yEncoding: PositionDef<string> = {
+      field: "value\\.data",
+      type: "quantitative",
+      aggregate: "sum",
+    };
+
+    const result = getTooltips({
+      formValues,
+      xEncoding,
+      yEncoding,
+    });
+
+    expect(result).toBeDefined();
+    expect(result?.[0]?.field).toBe("category\\.escaped");
+    expect(result?.[1]?.field).toBe("value\\.data");
+  });
+});

package/src/components/data-table/charts/chart-spec/altair-generator.ts

@@ -8,6 +8,7 @@ import {
   Variable,
   VariableDeclaration,
 } from "@/utils/python-poet/poet";
+import { escapeFieldName } from "./utils";
 
 /**
  * Generates Python code for an Altair chart.
@@ -154,7 +155,11 @@ function makeKwargs<T extends Record<string, any>>(obj: T) {
 
   for (const [key, value] of Object.entries(obj)) {
     if (value !== undefined) {
-      result[key] = new Literal(value);
+      // Escape special characters in field names
+      result[key] =
+        key === "field" && typeof value === "string"
+          ? new Literal(escapeFieldName(value))
+          : new Literal(value);
     }
   }
 

package/src/components/data-table/charts/chart-spec/encodings.ts

@@ -1,9 +1,13 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import type { Aggregate } from "vega-lite/build/src/aggregate";
-import type { BinParams } from "vega-lite/build/src/bin";
-import type { ColorDef, OffsetDef } from "vega-lite/build/src/channeldef";
-import type { Scale } from "vega-lite/build/src/scale";
+import type { Aggregate } from "vega-lite/types_unstable/aggregate.js";
+import type { BinParams } from "vega-lite/types_unstable/bin.js";
+import type {
+  ColorDef,
+  OffsetDef,
+} from "vega-lite/types_unstable/channeldef.js";
+import type { Scale } from "vega-lite/types_unstable/scale.js";
+import type { ColorScheme } from "vega-typings";
 import type { z } from "zod";
 import { COUNT_FIELD, DEFAULT_COLOR_SCHEME } from "../constants";
 import type { AxisSchema, BinSchema, ChartSchemaType } from "../schemas";
@@ -11,7 +15,6 @@ import {
   type AggregationFn,
   BIN_AGGREGATION,
   ChartType,
-  type ColorScheme,
   NONE_VALUE,
   type SelectableDataType,
   STRING_AGGREGATION_FNS,
@@ -19,6 +22,7 @@ import {
 } from "../types";
 import { isFieldSet } from "./spec";
 import { convertDataTypeToVega } from "./types";
+import { escapeFieldName } from "./utils";
 
 export function getBinEncoding(
   chartType: ChartType,
@@ -123,7 +127,7 @@ export function getColorEncoding(
   const aggregate = colorByColumn?.aggregate;
 
   return {
-    field: colorByColumn.field,
+    field: escapeFieldName(colorByColumn.field),
     type: convertDataTypeToVega(selectedDataType),
     scale: getColorInScale(formValues),
     aggregate: getAggregate(aggregate, selectedDataType),
@@ -143,7 +147,7 @@ export function getOffsetEncoding(
   ) {
     return undefined;
   }
-  return { field: formValues.general?.colorByColumn?.field };
+  return { field: escapeFieldName(formValues.general?.colorByColumn?.field) };
 }
 
 export function getAggregate(

package/src/components/data-table/charts/chart-spec/spec.ts

@@ -6,10 +6,10 @@ import type {
   Field,
   PolarDef,
   PositionDef,
-} from "vega-lite/build/src/channeldef";
-import type { Encoding } from "vega-lite/build/src/encoding";
-import type { Resolve } from "vega-lite/build/src/resolve";
-import type { FacetFieldDef } from "vega-lite/build/src/spec/facet";
+} from "vega-lite/types_unstable/channeldef.js";
+import type { Encoding } from "vega-lite/types_unstable/encoding.js";
+import type { Resolve } from "vega-lite/types_unstable/resolve.js";
+import type { FacetFieldDef } from "vega-lite/types_unstable/spec/facet.js";
 import type { z } from "zod";
 import type { ResolvedTheme } from "@/theme/useTheme";
 import type { TypedString } from "@/utils/typed";
@@ -41,6 +41,7 @@ import {
   convertChartTypeToMark,
   convertDataTypeToVega,
 } from "./types";
+import { escapeFieldName } from "./utils";
 
 /**
  * Convert marimo chart configuration to Vega-Lite specification.
@@ -178,7 +179,7 @@ export function getAxisEncoding(
   }
 
   return {
-    field: column.field,
+    field: escapeFieldName(column.field),
     type: convertDataTypeToVega(column.selectedDataType || "unknown"),
     bin: getBinEncoding(chartType, selectedDataType, binValues),
     title: label,
@@ -211,7 +212,7 @@ export function getFacetEncoding(
   );
 
   return {
-    field: facet.field,
+    field: escapeFieldName(facet.field),
     sort: facet.sort,
     timeUnit: getFacetTimeUnit(facet),
     type: convertDataTypeToVega(facet.selectedDataType || "unknown"),
@@ -244,7 +245,7 @@ function getPieChartSpec(
   );
 
   const colorEncoding: ColorDef<string> = {
-    field: colorByColumn.field,
+    field: escapeFieldName(colorByColumn.field),
     type: convertDataTypeToVega(colorByColumn.selectedDataType || "unknown"),
     scale: getColorInScale(formValues),
     title: getFieldLabel(formValues.yAxis?.label),
@@ -284,7 +285,7 @@ function getBaseSpec(
   }
 
   return {
-    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+    $schema: "https://vega.github.io/schema/vega-lite/v6.json",
     background: theme === "dark" ? "dark" : "white",
     title: title,
     data: { values: [] },