Add dynamic resizing for Vega charts (#121)

* initial commit

* dev version bump

* fix vega versions mishap (new release brought dep issue hell)

* fix test

* update package-lock.json

* update CHANGES.md

* extract hook and add tests

Author: b-yogesh

chartlets.js/CHANGES.md

@@ -1,4 +1,10 @@
-## Version 0.1.5
+## Version 0.1.6 (in development)
+
+* Implemented dynamic resizing for Vega Charts when the side panel's 
+  width changes.
+  See https://github.com/xcube-dev/xcube/issues/1134
+ 
+## Version 0.1.5 (from 2025/03/21)
 
 * Add `multiple` property for `Select` component to enable the selection
   of multiple elements. The `default` mode is supported at the moment.

chartlets.js/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets-demo",
-  "version": "0.1.5",
+  "version": "0.1.6-dev.0",
   "description": "Demonstrator for the Chartlets framework.",
   "type": "module",
   "files": [
@@ -34,7 +34,11 @@
     "chartlets": "file:../lib",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-vega": "^7.6.0",
+    "react-vega": ">=7",
+    "vega": "^5.33.0",
+    "vega-embed": "^6.5.1",
+    "vega-lite": "^5.23.0",
+    "vega-themes": ">=2",
     "zustand": "^5.0.0"
   },
   "devDependencies": {

chartlets.js/packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets",
-  "version": "0.1.5",
+  "version": "0.1.6-dev.0",
   "description": "An experimental library for integrating interactive charts into existing JavaScript applications.",
   "type": "module",
   "files": [
@@ -66,6 +66,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-vega": ">=7",
+    "vega": "^5.33.0",
+    "vega-embed": "^6.5.1",
+    "vega-lite": "^5.23.0",
     "vega-themes": ">=2"
   },
   "peerDependenciesMeta": {

chartlets.js/packages/lib/package.json

@@ -1,10 +1,16 @@
-import { describe, it, expect } from "vitest";
+import { describe, expect, it } from "vitest";
 import { render } from "@testing-library/react";
 // import { render, screen, fireEvent } from "@testing-library/react";
 import type { TopLevelSpec } from "vega-lite";
 import { createChangeHandler } from "@/plugins/mui/common.test";
 import { VegaChart } from "./VegaChart";
 
+global.ResizeObserver = class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
 describe("VegaChart", () => {
   it("should render if chart is not given", () => {
     render(

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

@@ -1,9 +1,10 @@
 import { VegaLite } from "react-vega";
 import type { TopLevelSpec } from "vega-lite";
 
-import type { ComponentState, ComponentProps } from "@/index";
+import type { ComponentProps, ComponentState } from "@/index";
 import { useSignalListeners } from "./hooks/useSignalListeners";
 import { useVegaTheme, type VegaTheme } from "./hooks/useVegaTheme";
+import { useResizeObserver } from "./hooks/useResizeObserver";
 
 interface VegaChartState extends ComponentState {
   theme?: VegaTheme | "default" | "system";
@@ -24,17 +25,21 @@ export function VegaChart({
 }: VegaChartProps) {
   const signalListeners = useSignalListeners(chart, type, id, onChange);
   const vegaTheme = useVegaTheme(theme);
+  const { containerSizeKey, containerCallbackRef } = useResizeObserver();
   if (chart) {
     return (
-      <VegaLite
-        theme={vegaTheme}
-        spec={chart}
-        style={style}
-        signalListeners={signalListeners}
-        actions={false}
-      />
+      <div id="chart-container" ref={containerCallbackRef} style={style}>
+        <VegaLite
+          key={containerSizeKey}
+          theme={vegaTheme}
+          spec={chart}
+          style={style}
+          signalListeners={signalListeners}
+          actions={false}
+        />
+      </div>
     );
   } else {
-    return <div id={id} style={style} />;
+    return <div id={id} />;
   }
 }

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

@@ -0,0 +1,103 @@
+import { describe, expect, it, vi } from "vitest";
+import { useResizeObserver } from "./useResizeObserver";
+import { act, render } from "@testing-library/react";
+import { useEffect } from "react";
+
+global.ResizeObserver = class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+describe("useResizeObserver", () => {
+  it("should observe a node", () => {
+    let callbackRef: (node: Element | null) => void;
+
+    const TestComponent = () => {
+      const { containerCallbackRef } = useResizeObserver();
+      callbackRef = containerCallbackRef;
+      return <div ref={containerCallbackRef} />;
+    };
+
+    render(<TestComponent />);
+
+    const observeSpy = vi.spyOn(global.ResizeObserver.prototype, "observe");
+
+    const node = document.createElement("div");
+    act(() => {
+      if (callbackRef) {
+        callbackRef(node);
+      }
+    });
+
+    expect(observeSpy).toHaveBeenCalledWith(node);
+  });
+
+  it("should disconnect previous observer when node changes", () => {
+    let callbackRef: (node: Element | null) => void;
+
+    const TestComponent = () => {
+      const { containerCallbackRef } = useResizeObserver();
+      callbackRef = containerCallbackRef;
+      return null;
+    };
+
+    render(<TestComponent />);
+
+    const disconnectSpy = vi.spyOn(
+      global.ResizeObserver.prototype,
+      "disconnect",
+    );
+
+    const observeSpy = vi.spyOn(global.ResizeObserver.prototype, "observe");
+
+    const node1 = document.createElement("div");
+    const node2 = document.createElement("div");
+
+    act(() => {
+      if (callbackRef) {
+        callbackRef(node1);
+        callbackRef(node2);
+      }
+    });
+
+    expect(disconnectSpy).toHaveBeenCalled();
+    expect(observeSpy).toHaveBeenCalledWith(node2);
+  });
+
+  it("should update containerSizeKey on resize", () => {
+    let observerCallback: ResizeObserverCallback | null = null;
+
+    global.ResizeObserver = class {
+      constructor(cb: ResizeObserverCallback) {
+        observerCallback = cb;
+      }
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    };
+
+    let lastKey = 0;
+
+    const TestComponent = () => {
+      const { containerCallbackRef, containerSizeKey } = useResizeObserver();
+
+      useEffect(() => {
+        lastKey = containerSizeKey;
+      }, [containerSizeKey]);
+
+      return <div ref={containerCallbackRef} />;
+    };
+
+    render(<TestComponent />);
+    const initialKey = lastKey;
+
+    act(() => {
+      if (observerCallback) {
+        observerCallback([], {} as ResizeObserver);
+      }
+    });
+
+    expect(lastKey).not.toBe(initialKey);
+  });
+});

chartlets.js/packages/lib/src/plugins/vega/hooks/useResizeObserver.test.tsx

@@ -0,0 +1,29 @@
+import { useCallback, useRef, useState } from "react";
+
+export interface ResizeObserverResult {
+  containerSizeKey: number;
+  containerCallbackRef: (node: Element | null) => void;
+}
+
+export function useResizeObserver(): ResizeObserverResult {
+  const containerRef = useRef<ResizeObserver | null>(null);
+  const [containerSizeKey, setContainerSizeKey] = useState(0);
+  const containerCallbackRef = useCallback((node: Element | null) => {
+    if (containerRef.current) {
+      containerRef.current.disconnect();
+      containerRef.current = null;
+    }
+    if (node !== null) {
+      const resizeObserver = new ResizeObserver((_entries) => {
+        // We only need to know that a resize happened because it triggers a
+        // re-render allowing vega to get the latest layout.
+        setContainerSizeKey(Date.now());
+      });
+
+      resizeObserver.observe(node);
+      containerRef.current = resizeObserver;
+    }
+  }, []);
+
+  return { containerSizeKey, containerCallbackRef };
+}