Merge pull request #141 from bcdev/clarasb-132-update_VegaChart

Update react-vega to v8 and adapt VegaChart accordingly

Author: forman

chartlets.js/CHANGES.md

@@ -2,6 +2,8 @@
 
 * Updated dependencies
 	- `glob: ^13.0.1`
+	- `react-vega: ^8.0.0`
+	- `vega-lite: ^6.4.1`
 	- `@vitest/coverage-istanbul: ^3.2.4`
 	- `vite: ^7.1.11`
 	- `vitest: ^3.2.4`
@@ -10,6 +12,10 @@
  (#124).
 
 * Added (MUI) component `Accordion`. (#41, #134)
+ (#124)
+ 
+* Adjusted `VegaChart` component, due to `react-vega` upgrade
+  from v7 to v8. (#132)
 
 * Fixed handling of `style` prop in `Tabs` component and added prop 
   `iconPosition`. (#135, #136)

chartlets.js/package-lock.json

@@ -34,10 +34,10 @@
     "chartlets": "file:../lib",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-vega": "^7.7.1",
+    "react-vega": "^8.0.0",
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
-    "vega-lite": "^6.4.1",
+    "vega-lite": "^6.4.2",
     "vega-themes": ">=2",
     "zustand": "^5.0.0"
   },

chartlets.js/packages/demo/package.json

@@ -65,10 +65,10 @@
     "@mui/x-data-grid": ">=7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-vega": "^7.7.1",
+    "react-vega": "^8.0.0",
     "vega": "^6.2.0",
     "vega-embed": "^7.1.0",
-    "vega-lite": "^6.4.1",
+    "vega-lite": "^6.4.2",
     "vega-themes": ">=2"
   },
   "peerDependenciesMeta": {

chartlets.js/packages/lib/package.json

@@ -50,7 +50,7 @@ describe("VegaChart", () => {
 });
 
 const chart: TopLevelSpec = {
-  $schema: "https://vega.github.io/schema/vega-lite/v5.20.1.json",
+  $schema: "https://vega.github.io/schema/vega-lite/v6.json",
   config: { view: { continuousWidth: 300, continuousHeight: 300 } },
   data: { name: "data-0" },
   mark: { type: "bar" },

chartlets.js/packages/lib/src/plugins/vega/VegaChart.test.tsx

@@ -4,7 +4,8 @@
  * https://opensource.org/licenses/MIT.
  */
 
-import { VegaLite } from "react-vega";
+import { useRef } from "react";
+import { VegaEmbed } from "react-vega";
 import type { TopLevelSpec } from "vega-lite";
 
 import type { ComponentProps, ComponentState } from "@/index";
@@ -14,9 +15,7 @@ import { useResizeObserver } from "./hooks/useResizeObserver";
 
 interface VegaChartState extends ComponentState {
   theme?: VegaTheme | "default" | "system";
-  chart?:
-    | TopLevelSpec // This is the vega-lite specification type
-    | null;
+  chart?: TopLevelSpec | null;
 }
 
 interface VegaChartProps extends ComponentProps, VegaChartState {}
@@ -29,19 +28,25 @@ export function VegaChart({
   chart,
   onChange,
 }: VegaChartProps) {
-  const signalListeners = useSignalListeners(chart, type, id, onChange);
+  const { onEmbed } = useSignalListeners(chart, type, id, onChange);
   const vegaTheme = useVegaTheme(theme);
   const { containerSizeKey, containerCallbackRef } = useResizeObserver();
+
+  const embedDivRef = useRef<HTMLDivElement | null>(null);
+
   if (chart) {
     return (
       <div id="chart-container" ref={containerCallbackRef} style={style}>
-        <VegaLite
+        <VegaEmbed
           key={containerSizeKey}
-          theme={vegaTheme}
+          ref={embedDivRef}
           spec={chart}
+          onEmbed={onEmbed}
+          options={{
+            actions: false,
+            theme: vegaTheme,
+          }}
           style={style}
-          signalListeners={signalListeners}
-          actions={false}
         />
       </div>
     );

chartlets.js/packages/lib/src/plugins/vega/VegaChart.tsx

@@ -11,7 +11,7 @@ import { useSignalListeners } from "./useSignalListeners";
 import { createChangeHandler } from "@/plugins/mui/common.test";
 
 const chart: TopLevelSpec = {
-  $schema: "https://vega.github.io/schema/vega-lite/v5.20.1.json",
+  $schema: "https://vega.github.io/schema/vega-lite/v6.json",
   config: { view: { continuousWidth: 300, continuousHeight: 300 } },
   data: { name: "data-0" },
   mark: { type: "bar" },
@@ -54,9 +54,9 @@ describe("useSignalListeners", () => {
     const { result, rerender } = renderHook(() =>
       useSignalListeners(chart, "VegaChart", "my_chart", () => {}),
     );
-    const signalHandlers1 = result.current;
+    const signalHandlers1 = result.current.signalListenerMap;
     rerender();
-    const signalHandlers2 = result.current;
+    const signalHandlers2 = result.current.signalListenerMap;
     expect(signalHandlers1).toEqual({});
     expect(signalHandlers2).toEqual({});
     expect(signalHandlers1).toBe(signalHandlers1);
@@ -66,21 +66,21 @@ describe("useSignalListeners", () => {
     const { result } = renderHook(() =>
       useSignalListeners(chartWithSelect, "VegaChart", "my_chart", () => {}),
     );
-    const signalHandlers = result.current;
+    const signalHandlers = result.current.signalListenerMap;
     expect(signalHandlers).toBeDefined();
     expect(signalHandlers["sel_point"]).toBeTypeOf("function");
     expect(signalHandlers["sel_interval"]).toBeTypeOf("function");
     expect(signalHandlers["sel_point_a"]).toBeTypeOf("function");
     // "wheel" not supported
-    expect(signalHandlers["sel_point_b"]).toBeUndefined();
+    expect(signalHandlers["sel_interval_b"]).toBeUndefined();
   });
 
   it("should call onChange", () => {
     const { recordedEvents, onChange } = createChangeHandler();
     const { result } = renderHook(() =>
       useSignalListeners(chartWithSelect, "VegaChart", "my_chart", onChange),
     );
-    const signalHandlers = result.current;
+    const signalHandlers = result.current.signalListenerMap;
     expect(signalHandlers).toBeDefined();
     const signalHandler = signalHandlers["sel_point_a"];
     expect(signalHandler).toBeTypeOf("function");

chartlets.js/packages/lib/src/plugins/vega/hooks/useSignalListeners.test.ts

@@ -5,11 +5,13 @@
  */
 
 import { useCallback, useMemo } from "react";
+import type { Result as VegaEmbedResult } from "vega-embed";
 import type { TopLevelSpec } from "vega-lite";
 
 import { type ComponentChangeHandler } from "@/index";
 import { isString } from "@/utils/isString";
 import { isObject } from "@/utils/isObject";
+import { useVegaSignalEmbed } from "./useVegaSignalEmbed";
 
 type SignalHandler = (signalName: string, signalValue: unknown) => void;
 
@@ -24,6 +26,11 @@ type SelectionParameter = {
   select: "point" | "interval" | { type: "point" | "interval"; on: string };
 };
 
+type UseSignalListenersReturn = {
+  onEmbed: (result: VegaEmbedResult) => void;
+  signalListenerMap: Record<string, SignalHandler>;
+};
+
 const isSelectionParameter = (param: unknown): param is SelectionParameter =>
   isObject(param) &&
   (param.select === "point" ||
@@ -37,7 +44,7 @@ export function useSignalListeners(
   type: string,
   id: string | undefined,
   onChange: ComponentChangeHandler,
-): Record<string, SignalHandler> {
+): UseSignalListenersReturn {
   /*
    * Here, we create map of signals which will be then used to create the
    * map of signal-listeners because not all params are event-listeners, and we
@@ -65,7 +72,7 @@ export function useSignalListeners(
       }, signalNames);
   }, [chart]);
 
-  const handleClickSignal = useCallback(
+  const handleSignal = useCallback(
     (signalName: string, signalValue: unknown) => {
       if (id) {
         return onChange({
@@ -83,14 +90,14 @@ export function useSignalListeners(
    * Creates the map of signal listeners based on
    * the `signals` map computed above.
    */
-  return useMemo(() => {
+  const signalListenerMap = useMemo(() => {
     /*
      * Currently, we only have click events support, but if more are required,
      * they can be implemented and added in the map below.
      */
     const signalHandlers: Record<string, SignalHandler> = {
-      click: handleClickSignal,
-      drag: handleClickSignal,
+      click: handleSignal,
+      drag: handleSignal,
     };
 
     const signalListeners: Record<string, SignalHandler> = {};
@@ -104,5 +111,9 @@ export function useSignalListeners(
       }
     });
     return signalListeners;
-  }, [signalNames, handleClickSignal]);
+  }, [signalNames, handleSignal]);
+
+  const onEmbed = useVegaSignalEmbed(signalListenerMap);
+
+  return { onEmbed, signalListenerMap };
 }

chartlets.js/packages/lib/src/plugins/vega/hooks/useSignalListeners.ts

@@ -0,0 +1,134 @@
+/*
+ * Copyright (c) 2019-2026 by Brockmann Consult Development team
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import type { Result as VegaEmbedResult } from "vega-embed";
+
+import { useVegaSignalEmbed } from "./useVegaSignalEmbed";
+
+type SignalHandler = (signalName: string, signalValue: unknown) => void;
+
+describe("useVegaSignalEmbed", () => {
+  it("should register signal listeners on embed", () => {
+    const signalListenerMap: Record<string, SignalHandler> = {
+      sel_point: vi.fn(),
+      sel_interval: vi.fn(),
+      sel_point_a: vi.fn(),
+    };
+
+    const { result } = renderHook(() => useVegaSignalEmbed(signalListenerMap));
+
+    const view = createMockView();
+
+    act(() => {
+      result.current({ view } as unknown as VegaEmbedResult);
+    });
+
+    expect(view.addSignalListener).toHaveBeenCalledTimes(3);
+
+    const names = view.addSignalListener.mock.calls.map(([name]) => name);
+    expect(names).toEqual(
+      expect.arrayContaining(["sel_point", "sel_interval", "sel_point_a"]),
+    );
+  });
+
+  it("should remove old listeners when embedding again", () => {
+    const signalListenerMap: Record<string, SignalHandler> = {
+      sel_point: vi.fn(),
+      sel_interval: vi.fn(),
+    };
+
+    const { result } = renderHook(() => useVegaSignalEmbed(signalListenerMap));
+
+    const view1 = createMockView();
+    const view2 = createMockView();
+
+    act(() => {
+      result.current({ view: view1 } as unknown as VegaEmbedResult);
+    });
+
+    const attachedToView1 = view1.addSignalListener.mock.calls.map(
+      ([name, fn]) => ({ name, fn }),
+    );
+
+    act(() => {
+      result.current({ view: view2 } as unknown as VegaEmbedResult);
+    });
+
+    expect(view1.removeSignalListener).toHaveBeenCalledTimes(
+      attachedToView1.length,
+    );
+
+    for (const { name, fn } of attachedToView1) {
+      expect(view1.removeSignalListener).toHaveBeenCalledWith(name, fn);
+    }
+
+    expect(view2.addSignalListener).toHaveBeenCalledTimes(2);
+  });
+
+  it("should cleanup listeners on unmount", () => {
+    const signalListenerMap: Record<string, SignalHandler> = {
+      sel_point: vi.fn(),
+      sel_interval: vi.fn(),
+    };
+
+    const { result, unmount } = renderHook(() =>
+      useVegaSignalEmbed(signalListenerMap),
+    );
+
+    const view = createMockView();
+
+    act(() => {
+      result.current({ view } as unknown as VegaEmbedResult);
+    });
+
+    const attached = view.addSignalListener.mock.calls.map(([name, fn]) => ({
+      name,
+      fn,
+    }));
+
+    unmount();
+
+    expect(view.removeSignalListener).toHaveBeenCalledTimes(attached.length);
+
+    for (const { name, fn } of attached) {
+      expect(view.removeSignalListener).toHaveBeenCalledWith(name, fn);
+    }
+  });
+
+  it("should do nothing if embed result has no view", () => {
+    const signalListenerMap: Record<string, SignalHandler> = {
+      sel_point: vi.fn(),
+    };
+
+    const { result } = renderHook(() => useVegaSignalEmbed(signalListenerMap));
+
+    act(() => {
+      result.current({} as VegaEmbedResult);
+    });
+  });
+
+  it("should register no listeners if the signal listener map is empty", () => {
+    const { result } = renderHook(() => useVegaSignalEmbed({}));
+
+    const view = createMockView();
+
+    act(() => {
+      result.current({ view } as unknown as VegaEmbedResult);
+    });
+
+    expect(view.addSignalListener).not.toHaveBeenCalled();
+    expect(view.removeSignalListener).not.toHaveBeenCalled();
+  });
+});
+
+function createMockView() {
+  return {
+    addSignalListener: vi.fn(),
+    removeSignalListener: vi.fn(),
+  };
+}