upgrade to vega lite 6, react-vega 8

frontend/package.json

@@ -152,7 +152,7 @@
     "react-plotly.js": "^2.6.0",
     "react-resizable-panels": "2.1.9",
     "react-use-event-hook": "^0.9.6",
-    "react-vega": "^7.7.1",
+    "react-vega": "^8.0.0",
     "react-virtuoso": "^4.14.0",
     "reactflow": "^11.11.4",
     "remark-gfm": "^4.0.1",
@@ -168,8 +168,8 @@
     "typescript-memoize": "^1.1.1",
     "use-acp": "0.2.5",
     "use-resize-observer": "^9.1.0",
-    "vega-lite": "^5.23.0",
-    "vega-loader": "^4.5.3",
+    "vega-lite": "^6.4.1",
+    "vega-loader": "^5.1.0",
     "vega-tooltip": "^1.1.0",
     "vscode-jsonrpc": "^8.2.1",
     "vscode-languageserver-protocol": "^3.17.5",
@@ -249,6 +249,7 @@
     "stylelint": "^16.23.1",
     "stylelint-config-standard": "^36.0.1",
     "tailwindcss": "^4.1.15",
+    "vega-typings": "^2.1.0",
     "vite": "npm:rolldown-vite@^7.1.19",
     "vite-plugin-top-level-await": "^1.6.0",
     "vite-plugin-wasm": "^3.5.0",

frontend/src/components/charts/lazy.tsx

@@ -0,0 +1,7 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import React from "react";
+
+export const LazyVegaEmbed = React.lazy(() =>
+  import("react-vega").then((m) => ({ default: m.VegaEmbed })),
+);

frontend/src/components/charts/types.ts

@@ -0,0 +1,8 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { SignalListenerHandler } from "vega-typings";
+
+export interface SignalListener {
+  signalName: string;
+  handler: SignalListenerHandler;
+}

frontend/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": {

frontend/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,

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

@@ -1,6 +1,6 @@
 /* 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 {
@@ -14,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,
@@ -169,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);
@@ -262,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,
@@ -345,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 },
@@ -410,7 +415,7 @@ describe("getTooltips", () => {
   });
 
   it("should handle count aggregate with no field set", () => {
-    const formValues = {
+    const formValues: ChartSchemaType = {
       general: {
         xColumn: {
           field: "category",

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

@@ -1,17 +1,20 @@
 /* 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";
 import {
   type AggregationFn,
   BIN_AGGREGATION,
   ChartType,
-  type ColorScheme,
   NONE_VALUE,
   type SelectableDataType,
   STRING_AGGREGATION_FNS,

frontend/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";
@@ -285,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: [] },

frontend/src/components/data-table/charts/chart-spec/tooltips.ts

@@ -4,7 +4,7 @@ import type {
   ColorDef,
   PositionDef,
   StringFieldDef,
-} from "vega-lite/build/src/channeldef";
+} from "vega-lite/types_unstable/channeldef.js";
 import type { DataType } from "@/core/kernel/messages";
 import type { ChartSchemaType } from "../schemas";
 import { isFieldSet } from "./spec";

frontend/src/components/data-table/charts/chart-spec/types.ts

@@ -1,6 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
-import type { StandardType } from "vega-lite/build/src/type";
+import type { StandardType } from "vega-lite/types_unstable/type.js";
 import type { DataType } from "@/core/kernel/messages";
 import type { Mark } from "@/plugins/impl/vega/types";
 import { logNever } from "@/utils/assertNever";

frontend/src/components/data-table/charts/components/form-fields.tsx

@@ -728,11 +728,11 @@ export const AggregationSelect = ({
                   {availableAggregations.map((agg) => {
                     const Icon = AGGREGATION_TYPE_ICON[agg];
                     const subtitle = renderSubtitle(
-                      AGGREGATION_TYPE_DESCRIPTIONS[agg],
+                      AGGREGATION_TYPE_DESCRIPTIONS[agg] ?? "Other",
                     );
                     const selectItem = renderSelectItem({
                       value: agg,
-                      Icon,
+                      Icon: Icon ?? SquareFunctionIcon,
                       subtitle,
                     });
                     if (agg === BIN_AGGREGATION) {

frontend/src/components/data-table/charts/constants.ts

@@ -18,10 +18,10 @@ import {
   SquareFunctionIcon,
   TableIcon,
 } from "lucide-react";
+import type { ColorScheme } from "vega-typings";
 import type {
   AggregationFn,
   ChartType,
-  ColorScheme,
   SelectableDataType,
   TimeUnit,
   ValidAggregationFn,
@@ -45,7 +45,9 @@ export const CHART_TYPE_ICON: Record<ChartType, React.ElementType> = {
 };
 
 export const DEFAULT_AGGREGATION: ValidAggregationFn = "mean"; // For y-axis, we default to mean
-export const AGGREGATION_TYPE_ICON: Record<AggregationFn, React.ElementType> = {
+export const AGGREGATION_TYPE_ICON: Partial<
+  Record<AggregationFn, React.ElementType>
+> = {
   none: SquareFunctionIcon,
   count: HashIcon,
   sum: SigmaIcon,
@@ -62,7 +64,9 @@ export const AGGREGATION_TYPE_ICON: Record<AggregationFn, React.ElementType> = {
   bin: RulerDimensionLine,
 };
 
-export const AGGREGATION_TYPE_DESCRIPTIONS: Record<AggregationFn, string> = {
+export const AGGREGATION_TYPE_DESCRIPTIONS: Partial<
+  Record<AggregationFn, string>
+> = {
   none: "No aggregation",
   count: "Count of records",
   sum: "Sum of values",

frontend/src/components/data-table/charts/lazy-chart.tsx

@@ -2,15 +2,13 @@
 
 import React from "react";
 import type { TopLevelSpec } from "vega-lite";
+import { LazyVegaEmbed } from "@/components/charts/lazy";
 import { tooltipHandler } from "@/components/charts/tooltip";
 import { useTheme } from "@/theme/useTheme";
 import type { ErrorMessage } from "./chart-spec/spec";
 import { augmentSpecWithData } from "./chart-spec/spec";
 import { ChartInfoState } from "./components/chart-states";
 
-const LazyVega = React.lazy(() =>
-  import("react-vega").then((m) => ({ default: m.Vega })),
-);
 export const LazyChart: React.FC<{
   baseSpec: TopLevelSpec | ErrorMessage;
   data?: object[];
@@ -30,16 +28,19 @@ export const LazyChart: React.FC<{
 
     return (
       <React.Suspense fallback={<LoadingChart />}>
-        <LazyVega
+        <LazyVegaEmbed
           spec={spec}
-          theme={theme === "dark" ? "dark" : undefined}
-          height={height}
-          tooltip={tooltipHandler.call}
-          actions={{
-            export: true,
-            source: false,
-            compiled: false,
-            editor: true,
+          options={{
+            theme: theme === "dark" ? "dark" : undefined,
+            height: height,
+            actions: {
+              export: true,
+              source: false,
+              compiled: false,
+              editor: true,
+            },
+            mode: "vega",
+            tooltip: tooltipHandler.call,
           }}
         />
       </React.Suspense>

frontend/src/components/data-table/charts/types.ts

@@ -1,11 +1,6 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import type { Scale } from "vega-lite/build/src/scale";
 
-/**
- * Valid string-based color scheme options from
- * Vega-Lite `Scale["scheme"]` (aka `vega.ColorScheme`).
- */
-export type ColorScheme = NonNullable<Scale["scheme"] & string>;
+import type { AggregateOp } from "vega-typings";
 
 /**
  * Similar to VegaLite's ScaleType, https://vega.github.io/vega-lite/docs/scale.html#type
@@ -74,7 +69,7 @@ export const BIN_AGGREGATION = "bin"; // We use this not to aggregate, but to bi
 /**
  * Subset of VegaLite's AggregateOp, https://vega.github.io/vega-lite/docs/aggregate.html#op
  */
-export const VALID_AGGREGATION_FNS = [
+export const VALID_AGGREGATION_FNS: AggregateOp[] = [
   "count",
   "sum",
   "mean",
@@ -99,12 +94,10 @@ export type ValidAggregationFn = (typeof VALID_AGGREGATION_FNS)[number];
 /*
  * Subset of AGGREGATION_FNS that are valid for string data types
  */
-export const STRING_AGGREGATION_FNS: ValidAggregationFn[] = [
-  "none",
-  "count",
-  "distinct",
-  "valid",
-];
+export const STRING_AGGREGATION_FNS: (
+  | ValidAggregationFn
+  | typeof NONE_VALUE
+)[] = [NONE_VALUE, "count", "distinct", "valid"];
 
 /**
  * Subset of VegaLite's MarkType, https://vega.github.io/vega-lite/docs/mark.html#types
@@ -121,4 +114,3 @@ export type ChartType = (typeof ChartType)[keyof typeof ChartType];
 export const CHART_TYPES = Object.values(ChartType);
 
 export const COLOR_BY_FIELDS = ["X", "Y", "Color", NONE_VALUE] as const;
-export type ColorByField = (typeof COLOR_BY_FIELDS)[number];

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

@@ -2,7 +2,7 @@
 
 import { mint, orange, slate } from "@radix-ui/colors";
 import type { TopLevelSpec } from "vega-lite";
-import type { StringFieldDef } from "vega-lite/build/src/channeldef";
+import type { StringFieldDef } from "vega-lite/types_unstable/channeldef.js";
 import type { TopLevelFacetedUnitSpec } from "@/plugins/impl/data-explorer/queries/types";
 import { logNever } from "@/utils/assertNever";
 import type {

frontend/src/components/data-table/column-summary/column-summary.tsx

@@ -1,6 +1,7 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 import React, { Suspense } from "react";
 import { useLocale } from "react-aria";
+import { LazyVegaEmbed } from "@/components/charts/lazy";
 import { createBatchedLoader } from "@/plugins/impl/vega/batched";
 import { useTheme } from "@/theme/useTheme";
 import { logNever } from "@/utils/assertNever";
@@ -19,10 +20,6 @@ interface Props<TData, TValue> {
   columnId: string;
 }
 
-const LazyVegaLite = React.lazy(() =>
-  import("react-vega").then((m) => ({ default: m.VegaLite })),
-);
-
 // We batch multiple calls to the same URL returning the same promise
 // for all calls with the same key.
 const batchedLoader = createBatchedLoader();
@@ -46,16 +43,19 @@ export const TableColumnSummary = <TData, TValue>({
         fallback={skeleton}
       >
         <Suspense fallback={skeleton}>
-          <LazyVegaLite
+          <LazyVegaEmbed
             spec={spec}
-            width={80}
-            height={30}
-            renderer="svg"
-            // @ts-expect-error - Our `loader.load` method is broader than VegaLite's typings but is functionally supported.
-            loader={batchedLoader}
+            options={{
+              width: 80,
+              height: 30,
+              renderer: "svg",
+              actions: false,
+              theme: theme === "dark" ? "dark" : "vox",
+              // @ts-expect-error - Our `loader.load` method is broader than VegaLite's typings but is functionally supported.
+              loader: batchedLoader,
+              mode: "vega-lite",
+            }}
             style={{ minWidth: "unset", maxHeight: "40px" }}
-            actions={false}
-            theme={theme === "dark" ? "dark" : "vox"}
           />
         </Suspense>
       </DelayMount>

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

@@ -4,7 +4,7 @@
 
 import { mint, orange, slate } from "@radix-ui/colors";
 import type { TopLevelSpec } from "vega-lite";
-import type { Scale } from "vega-lite/build/src/scale";
+import type { Scale } from "vega-lite/types_unstable/scale.js";
 // @ts-expect-error vega-typings does not include formats
 import { formats } from "vega-loader";
 import { asRemoteURL } from "@/core/runtime/config";