upgrade to vega lite 6, react-vega 8 (#5641)

## 📝 Summary

<!--
Provide a concise summary of what this pull request is addressing.

If this PR fixes any issues, list them here by number (e.g., Fixes
#123).
-->

Points of contact:
- data explorer
- column header charts
- column preview in right panel
- column preview in left panel
- tracing panel
- altair charts
- mo.ui.altair_chart
- chart builder

Altair hasn't been released with the new version, although charts are
supported, they raise a warning:
`vega-component.tsx:81 The input spec uses Vega-Lite v5.20.1, but the
current version of Vega-Lite is v6.4.1.`

## 🔍 Description of Changes

<!--
Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->

## 📋 Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [x] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] I have added tests for the changes made.
- [x] I have run the code and verified that it works as expected.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: Light2Dark

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";