refactor(chart-playground-web): dedupe prettifyJson, memoize handler, single key source

Author: yordan-st

packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/prettifyJson.spec.ts

@@ -0,0 +1,11 @@
+import { prettifyJson } from "../prettifyJson";
+
+describe("prettifyJson", () => {
+    it("formats valid JSON with two-space indentation", () => {
+        expect(prettifyJson('{"a":1}')).toBe('{\n  "a": 1\n}');
+    });
+
+    it("returns an error object string for invalid JSON", () => {
+        expect(prettifyJson("{ not json")).toBe('{ "error": "invalid JSON" }');
+    });
+});

packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/stubObjectURL.ts

@@ -0,0 +1,7 @@
+// shared-charts' main barrel imports plotly, which calls URL.createObjectURL at load time.
+// jsdom/happy-dom doesn't implement it. Import this module BEFORE the barrel to stub it.
+if (typeof window.URL.createObjectURL !== "function") {
+    window.URL.createObjectURL = () => "";
+}
+
+export {};

packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/useComposedEditorController.spec.ts

@@ -0,0 +1,32 @@
+import "./stubObjectURL";
+import { renderHook } from "@testing-library/react";
+import { PlaygroundDataV1 } from "@mendix/shared-charts/main";
+import { useComposedEditorController } from "../useComposedEditorController";
+
+// The controller only reads `store.state` and calls `store.set`; a duck-typed store keeps the
+// fixture free of the plotly-heavy real EditorStore (which is a type-only public export anyway).
+function makeData(): PlaygroundDataV1 {
+    const store = {
+        state: { layout: '{"a":1}', config: '{"b":2}', data: ['{"name":"t0"}'] },
+        set: () => undefined
+    } as unknown as PlaygroundDataV1["store"];
+
+    return {
+        store,
+        plotData: [{ name: "t0" }],
+        layoutOptions: {},
+        configOptions: {}
+    };
+}
+
+describe("useComposedEditorController", () => {
+    it("keeps onViewSelectChange identity stable across re-renders", () => {
+        const data = makeData();
+        const { result, rerender } = renderHook(() => useComposedEditorController(data));
+        const first = result.current.onViewSelectChange;
+
+        rerender();
+
+        expect(result.current.onViewSelectChange).toBe(first);
+    });
+});

packages/pluggableWidgets/chart-playground-web/src/helpers/__tests__/useV2EditorController.spec.ts

@@ -0,0 +1,63 @@
+import "./stubObjectURL";
+import { renderHook, act } from "@testing-library/react";
+import { observable } from "mobx";
+import { EditableChartStore, EditableChartStoreProps, PlaygroundDataV2 } from "@mendix/shared-charts/main";
+import { SetupHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { useV2EditorController } from "../useV2EditorController";
+
+class TestHost extends SetupHost {}
+
+function makeContext(initial: EditableChartStoreProps): { context: PlaygroundDataV2; dispose: () => void } {
+    const props = observable.box<EditableChartStoreProps>(initial, { deep: false });
+    const host = new TestHost();
+    const store = new EditableChartStore(host, { get: () => props.get() });
+    const dispose = host.setup();
+    return {
+        context: {
+            type: "editor.data.v2",
+            store,
+            plotData: initial.data,
+            layoutOptions: {},
+            configOptions: {}
+        },
+        dispose
+    };
+}
+
+describe("useV2EditorController", () => {
+    it("keeps onViewSelectChange identity stable across re-renders", () => {
+        const { context, dispose } = makeContext({ layout: { a: 1 }, config: {}, data: [] });
+
+        const { result, rerender } = renderHook(() => useV2EditorController(context));
+        const first = result.current.onViewSelectChange;
+
+        rerender();
+
+        expect(result.current.onViewSelectChange).toBe(first);
+
+        dispose();
+    });
+
+    it("tracks the selected view without desyncing value and editor code", () => {
+        const { context, dispose } = makeContext({
+            layout: { a: 1 },
+            config: { b: 2 },
+            data: [{ name: "t0", x: [1] }]
+        });
+
+        const { result } = renderHook(() => useV2EditorController(context));
+
+        expect(result.current.viewSelectValue).toBe("layout");
+        expect(JSON.parse(result.current.value)).toEqual({ a: 1 });
+
+        act(() => result.current.onViewSelectChange("config"));
+        expect(result.current.viewSelectValue).toBe("config");
+        expect(JSON.parse(result.current.value)).toEqual({ b: 2 });
+
+        act(() => result.current.onViewSelectChange("0"));
+        expect(result.current.viewSelectValue).toBe("0");
+        expect(JSON.parse(result.current.value)).toEqual({ name: "t0", x: [1] });
+
+        dispose();
+    });
+});

packages/pluggableWidgets/chart-playground-web/src/helpers/prettifyJson.ts

@@ -0,0 +1,7 @@
+export function prettifyJson(json: string): string {
+    try {
+        return JSON.stringify(JSON.parse(json), null, 2);
+    } catch {
+        return '{ "error": "invalid JSON" }';
+    }
+}

packages/pluggableWidgets/chart-playground-web/src/helpers/useComposedEditorController.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { fallback, PlaygroundDataV1 } from "@mendix/shared-charts/main";
+import { prettifyJson } from "./prettifyJson";
 import { ComposedEditorProps } from "../components/ComposedEditor";
 import { SelectOption } from "../components/Sidebar";
 
@@ -30,25 +31,18 @@ function getModelerCode(data: PlaygroundDataV1, key: ConfigKey): Partial<Data> |
     const entries = Object.entries(data.plotData.at(key) ?? {}).filter(([key]) => !irrelevantSeriesKeys.includes(key));
     return Object.fromEntries(entries) as Partial<Data>;
 }
-function prettifyJson(json: string): string {
-    try {
-        return JSON.stringify(JSON.parse(json), null, 2);
-    } catch {
-        return '{ "error": "invalid JSON" }';
-    }
-}
 
 export function useComposedEditorController(data: PlaygroundDataV1): ComposedEditorProps {
     const [key, setKey] = useState<ConfigKey>("layout");
 
-    const onViewSelectChange = (value: string): void => {
+    const onViewSelectChange = useCallback((value: string): void => {
         if (value === "layout" || value === "config") {
             setKey(value);
         } else {
             const n = parseInt(value, 10);
             setKey(isNaN(n) ? "layout" : n);
         }
-    };
+    }, []);
 
     const options: SelectOption[] = useMemo(() => {
         return [
@@ -78,6 +72,10 @@ export function useComposedEditorController(data: PlaygroundDataV1): ComposedEdi
         [store, key]
     );
 
+    // Syncs the editor input when the selected view's code changes externally (e.g. the store is
+    // updated elsewhere, or the user switches view). Setting state from this effect is intentional:
+    // it mirrors external code into local editor state. Accepted risk: an in-progress edit is
+    // overwritten if `code` changes mid-edit, which only happens on an external/view change.
     useEffect(
         () =>
             // eslint-disable-next-line react-hooks/set-state-in-effect

packages/pluggableWidgets/chart-playground-web/src/helpers/useV2EditorController.ts

@@ -1,6 +1,7 @@
-import { observable, reaction, runInAction } from "mobx";
+import { reaction } from "mobx";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { PlaygroundDataV2 } from "@mendix/shared-charts/main";
+import { prettifyJson } from "./prettifyJson";
 import { ComposedEditorProps } from "../components/ComposedEditor";
 import { SelectOption } from "../components/Sidebar";
 
@@ -29,29 +30,17 @@ function getModelerCode(data: PlaygroundDataV2, key: ConfigKey): object {
     return Object.fromEntries(entries);
 }
 
-function prettifyJson(json: string): string {
-    try {
-        return JSON.stringify(JSON.parse(json), null, 2);
-    } catch {
-        return '{ "error": "invalid JSON" }';
-    }
-}
-
 export function useV2EditorController(context: PlaygroundDataV2): ComposedEditorProps {
     const [key, setKey] = useState<ConfigKey>("layout");
-    const keyBox = useState(() => observable.box<ConfigKey>(key))[0];
 
-    const onViewSelectChange = (value: string): void => {
-        let newKey: ConfigKey;
+    const onViewSelectChange = useCallback((value: string): void => {
         if (value === "layout" || value === "config") {
-            newKey = value;
+            setKey(value);
         } else {
             const n = parseInt(value, 10);
-            newKey = isNaN(n) ? "layout" : n;
+            setKey(isNaN(n) ? "layout" : n);
         }
-        setKey(newKey);
-        runInAction(() => keyBox.set(newKey));
-    };
+    }, []);
 
     const store = context.store;
 
@@ -88,13 +77,16 @@ export function useV2EditorController(context: PlaygroundDataV2): ComposedEditor
         [store, key]
     );
 
+    // Re-subscribes whenever the selected key changes; fireImmediately syncs the editor to the
+    // current key's code on switch, then keeps tracking external store edits for that key.
     useEffect(
         () =>
             reaction(
-                () => getEditorCode(store, keyBox.get()),
-                code => setInput(prettifyJson(code))
+                () => getEditorCode(store, key),
+                code => setInput(prettifyJson(code)),
+                { fireImmediately: true }
             ),
-        [store, keyBox]
+        [store, key]
     );
 
     return {