solved configStore problem

packages/web/src/charts/ChartEditor.svelte

@@ -21,8 +21,7 @@
   import _ from 'lodash';
 
   export let data;
-  export let config;
-  export let setConfig;
+  export let configStore;
   export let conid;
   export let database;
   export let sql;
@@ -31,6 +30,8 @@
   let error = null;
   let loadedData = null;
 
+  $: config = $configStore;
+
   const getDriver = async () => {
     const conn = await getConnectionInfo({ conid });
     if (!conn) return;
@@ -61,18 +62,6 @@
     };
   };
 
-  const configStore = writable(config);
-  const changingRef = createRef(false);
-  $: {
-    if (!changingRef.get()) {
-      $configStore = config;
-    }
-  }
-  // $: {
-  //   changingRef.set(true);
-  //   setConfig($configStore);
-  //   changingRef.set(false);
-  // }
   $: {
     $extensions;
     if (sql && conid && database) {

packages/web/src/tabs/ChartTab.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import _ from 'lodash';
+  import { derived } from 'svelte/store';
   import ChartEditor from '../charts/ChartEditor.svelte';
 
   import ErrorInfo from '../elements/ErrorInfo.svelte';
@@ -38,6 +39,15 @@
       type: 'compute',
       compute: v => ({ ...v, config: _.isFunction(config) ? config(v.config) : config }),
     });
+
+  const configDerivedStore = derived(modelState, ($modelState: any) =>
+    $modelState.value ? $modelState.value.config || {} : {}
+  );
+  const configStore = {
+    ...configDerivedStore,
+    update: setConfig,
+    set: setConfig,
+  };
 </script>
 
 {#if $editorState.isLoading}
@@ -47,8 +57,7 @@
 {:else}
   <ChartEditor
     data={$modelState.value && $modelState.value.data}
-    config={$modelState.value ? $modelState.value.config || {} : {}}
-    {setConfig}
+    {configStore}
     sql={$modelState.value && $modelState.value.sql}
     {conid}
     {database}