feat: finish the editor

Author: iobuhov

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

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { fallback, PlaygroundDataV1 } from "@mendix/shared-charts/main";
 import { ComposedEditorProps } from "../components/ComposedEditor";
 import { SelectOption } from "../components/Sidebar";
@@ -30,6 +30,13 @@ 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");
@@ -56,8 +63,11 @@ export function useComposedEditorController(data: PlaygroundDataV1): ComposedEdi
     }, [data.plotData]);
 
     const store = data.store;
+    const code = prettifyJson(getEditorCode(data, key));
+    const [input, setInput] = useState(() => code);
     const onEditorChange = useCallback(
         (value: string): void => {
+            setInput(value);
             try {
                 const json = fallback(value);
                 JSON.parse(value);
@@ -68,11 +78,18 @@ export function useComposedEditorController(data: PlaygroundDataV1): ComposedEdi
         [store, key]
     );
 
+    useEffect(
+        () =>
+            // eslint-disable-next-line react-hooks/set-state-in-effect
+            setInput(code),
+        [code]
+    );
+
     return {
         viewSelectValue: key.toString(),
         viewSelectOptions: options,
         onViewSelectChange,
-        value: getEditorCode(data, key),
+        value: input,
         modelerCode: useMemo(() => JSON.stringify(getModelerCode(data, key), null, 2), [data, key]),
         onEditorChange
     };

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

@@ -1,4 +1,5 @@
-import { useCallback, useMemo, useState } from "react";
+import { observable, reaction, runInAction } from "mobx";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { PlaygroundDataV2 } from "@mendix/shared-charts/main";
 import { ComposedEditorProps } from "../components/ComposedEditor";
 import { SelectOption } from "../components/Sidebar";
@@ -7,7 +8,7 @@ type ConfigKey = "layout" | "config" | number;
 
 const irrelevantSeriesKeys = ["x", "y", "z", "customSeriesOptions", "dataSourceItems"];
 
-function getEditorCode({ store }: PlaygroundDataV2, key: ConfigKey): string {
+function getEditorCode(store: PlaygroundDataV2["store"], key: ConfigKey): string {
     if (key === "layout") {
         return store.layoutJson ?? '{ "error": "value is unavailable" }';
     }
@@ -28,38 +29,56 @@ function getModelerCode(data: PlaygroundDataV2, key: ConfigKey): object {
     return Object.fromEntries(entries);
 }
 
-export function useV2EditorController(data: PlaygroundDataV2): ComposedEditorProps {
+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;
         if (value === "layout" || value === "config") {
-            setKey(value);
+            newKey = value;
         } else {
             const n = parseInt(value, 10);
-            setKey(isNaN(n) ? "layout" : n);
+            newKey = isNaN(n) ? "layout" : n;
         }
+        setKey(newKey);
+        runInAction(() => keyBox.set(newKey));
     };
 
+    const store = context.store;
+
     const options: SelectOption[] = useMemo(() => {
         return [
             { name: "Layout", value: "layout", isDefaultSelected: true },
-            ...data.plotData.map((trace, index) => ({
-                name: trace.name || `trace ${index}`,
+            ...store.data.map((trace, index) => ({
+                name: (trace.name as string) || `trace ${index}`,
                 value: index,
                 isDefaultSelected: false
             })),
             { name: "Configuration", value: "config", isDefaultSelected: false }
         ];
-    }, [data.plotData]);
+    }, [store.data]);
 
-    const store = data.store;
+    const code = prettifyJson(getEditorCode(store, key));
+    const [input, setInput] = useState(() => code);
     const onEditorChange = useCallback(
         (value: string): void => {
+            setInput(value);
             try {
+                // Parse string before sending to store
+                const obj = JSON.parse(value);
                 if (key === "layout") {
-                    store.setLayout(JSON.parse(value));
+                    store.setLayout(obj);
                 } else if (key === "config") {
-                    store.setConfig(JSON.parse(value));
+                    store.setConfig(obj);
                 } else {
                     store.setDataAt(key, value);
                 }
@@ -69,12 +88,21 @@ export function useV2EditorController(data: PlaygroundDataV2): ComposedEditorPro
         [store, key]
     );
 
+    useEffect(
+        () =>
+            reaction(
+                () => getEditorCode(store, keyBox.get()),
+                code => setInput(prettifyJson(code))
+            ),
+        [store, keyBox]
+    );
+
     return {
         viewSelectValue: key.toString(),
         viewSelectOptions: options,
         onViewSelectChange,
-        value: getEditorCode(data, key),
-        modelerCode: useMemo(() => JSON.stringify(getModelerCode(data, key), null, 2), [data, key]),
+        value: input,
+        modelerCode: useMemo(() => JSON.stringify(getModelerCode(context, key), null, 2), [context, key]),
         onEditorChange
     };
 }

packages/pluggableWidgets/custom-chart-web/src/hooks/useCustomChart.ts

@@ -56,8 +56,8 @@ export function useCustomChart(props: CustomChartContainerProps): UseCustomChart
             type: "editor.data.v2",
             store,
             plotData: store.data,
-            layoutOptions: store.layout,
-            configOptions: store.config
+            layoutOptions: {},
+            configOptions: {}
         })
     ).get();
 

packages/shared/charts/src/model/stores/EditableChart.store.ts

@@ -1,4 +1,4 @@
-import { autorun, makeAutoObservable, observable } from "mobx";
+import { action, autorun, makeAutoObservable, observable } from "mobx";
 import { SetupComponentHost, SetupComponent, disposeBatch, ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
 
 export type JSONString = string;
@@ -38,7 +38,12 @@ export class EditableChartStore implements SetupComponent {
         makeAutoObservable(this, {
             layout: observable.ref,
             config: observable.ref,
-            data: observable.ref
+            data: observable.ref,
+            setup: false,
+            setLayout: action,
+            setConfig: action,
+            setDataAt: action,
+            reset: action
         });
     }