diagram - update tables from db info

packages/web/src/designer/Designer.svelte

@@ -5,7 +5,7 @@
   import DesignerTable from './DesignerTable.svelte';
   import { isConnectedByReference } from './designerTools';
   import uuidv1 from 'uuid/v1';
-  import { getTableInfo } from '../utility/metadataLoaders';
+  import { getTableInfo, useDatabaseInfo } from '../utility/metadataLoaders';
   import cleanupDesignColumns from './cleanupDesignColumns';
   import _ from 'lodash';
   import createRef from '../utility/createRef';
@@ -13,6 +13,7 @@
   import { writable } from 'svelte/store';
   import { tick } from 'svelte';
   import contextMenu from '../utility/contextMenu';
+  import stableStringify from 'json-stable-stringify';
 
   export let value;
   export let onChange;
@@ -26,6 +27,8 @@
   const sourceDragColumn$ = writable(null);
   const targetDragColumn$ = writable(null);
 
+  const dbInfo = settings?.updateFromDbInfo ? useDatabaseInfo({ conid, database }) : null;
+
   $: tables = value?.tables as any[];
   $: references = value?.references as any[];
 
@@ -48,6 +51,41 @@
     return tables;
   }
 
+  $: {
+    if (dbInfo) {
+      updateFromDbInfo($dbInfo);
+    }
+  }
+
+  function updateFromDbInfo(db) {
+    if (!settings?.updateFromDbInfo || !db) return;
+
+    onChange(current => {
+      let newTables = current.tables || [];
+      for (const table of current.tables || []) {
+        const dbTable = (db.tables || []).find(x => x.pureName == table.pureName && x.schemaName == table.schemaName);
+        if (
+          stableStringify(_.pick(dbTable, ['columns', 'primaryKey', 'foreignKeys'])) !=
+          stableStringify(_.pick(table, ['columns', 'primaryKey', 'foreignKeys']))
+        ) {
+          newTables = newTables.map(x =>
+            x == table
+              ? {
+                  ...table,
+                  ..._.pick(dbTable, ['columns', 'primaryKey', 'foreignKeys']),
+                }
+              : x
+          );
+        }
+      }
+
+      return {
+        ...current,
+        tables: newTables,
+      };
+    }, true);
+  }
+
   function callChange(changeFunc, skipUndoChain = undefined) {
     onChange(changeFunc, skipUndoChain);
     tick().then(recomputeReferencePositions);
@@ -169,19 +207,21 @@
             alias,
           },
         ],
-        references: [
+        references: settings?.allowCreateRefByDrag
-          ...(current.references || []),
+          ? [
-          {
+              ...(current.references || []),
-            designerId: uuidv1(),
+              {
-            sourceId: fromTable.designerId,
+                designerId: uuidv1(),
-            targetId: newTableDesignerId,
+                sourceId: fromTable.designerId,
-            joinType: 'INNER JOIN',
+                targetId: newTableDesignerId,
-            columns: foreignKey.columns.map(col => ({
+                joinType: 'INNER JOIN',
-              source: col.columnName,
+                columns: foreignKey.columns.map(col => ({
-              target: col.refColumnName,
+                  source: col.columnName,
-            })),
+                  target: col.refColumnName,
-          },
+                })),
-        ],
+              },
+            ]
+          : current.references,
       };
     });
   };

packages/web/src/designer/DiagramDesigner.svelte

@@ -9,5 +9,6 @@
     allowColumnOperations: false,
     allowCreateRefByDrag: false,
     allowTableAlias: false,
+    updateFromDbInfo: true,
   }}
 />

packages/web/src/designer/QueryDesigner.svelte

@@ -9,5 +9,6 @@
     allowColumnOperations: true,
     allowCreateRefByDrag: true,
     allowTableAlias: true,
+    updateFromDbInfo: false,
   }}
 />

packages/web/src/tabs/DiagramTab.svelte

@@ -16,7 +16,7 @@
 <script lang="ts">
   import useEditorData from '../query/useEditorData';
   import { extensions } from '../stores';
-  import { useConnectionInfo } from '../utility/metadataLoaders';
+  import { useConnectionInfo, useDatabaseInfo } from '../utility/metadataLoaders';
   import { registerFileCommands } from '../commands/stdCommands';
   import createUndoReducer from '../utility/createUndoReducer';
   import _ from 'lodash';
@@ -31,9 +31,6 @@
 
   export const activator = createActivator('DiagramTab', true);
 
-  $: connection = useConnectionInfo({ conid });
-  $: engine = findEngineDriver($connection, $extensions);
-
   $: setEditorData($modelState.value);
 
   export function getTabId() {
@@ -78,7 +75,6 @@
   const [modelState, dispatchModel] = createUndoReducer({
     tables: [],
     references: [],
-    columns: [],
   });
 
   function createMenu() {