SYNC: most important tables diagram setting

packages/tools/src/chooseTopTables.ts

@@ -0,0 +1,41 @@
+import { DatabaseInfo, TableInfo } from 'dbgate-types';
+import { extendDatabaseInfo } from './structureTools';
+import _sortBy from 'lodash/sortBy';
+
+function tableWeight(table: TableInfo, maxRowcount?: number) {
+  let weight = 0;
+  if (table.primaryKey) weight += 1;
+  if (table.foreignKeys) weight += table.foreignKeys.length * 1;
+  if (maxRowcount && table.tableRowCount) {
+    const rowcount = parseInt(table.tableRowCount as string);
+    if (rowcount > 0)
+      weight +=
+        Math.log(rowcount) * table.columns.length * (table.dependencies.length || 1) * (table.dependencies.length || 1);
+  } else {
+    if (table.columns) weight += table.columns.length * 2;
+  }
+  if (table.dependencies) weight += table.dependencies.length * 10;
+  if (maxRowcount) return weight;
+}
+
+export function chooseTopTables(tables: TableInfo[], count: number) {
+  const dbinfo: DatabaseInfo = {
+    tables,
+  } as DatabaseInfo;
+
+  const extended = extendDatabaseInfo(dbinfo);
+
+  const maxRowcount = Math.max(
+    ...extended.tables
+      .map(x => x.tableRowCount || 0)
+      .map(x => parseInt(x as string))
+      .filter(x => x > 0)
+  );
+
+  const sorted = _sortBy(
+    _sortBy(extended.tables, x => `${x.schemaName}.${x.pureName}`),
+    table => -tableWeight(table, maxRowcount)
+  );
+
+  return sorted.slice(0, count);
+}

packages/tools/src/index.ts

@@ -26,3 +26,4 @@ export * from './filterBehaviours';
 export * from './schemaInfoTools';
 export * from './dbKeysLoader';
 export * from './rowProgressReporter';
+export * from './chooseTopTables';

packages/web/src/designer/Designer.svelte

@@ -47,10 +47,11 @@
   import { showModal } from '../modals/modalTools';
   import ChooseColorModal from '../modals/ChooseColorModal.svelte';
   import { currentThemeDefinition } from '../stores';
-  import { extendDatabaseInfoFromApps } from 'dbgate-tools';
+  import { chooseTopTables, extendDatabaseInfoFromApps } from 'dbgate-tools';
   import SearchInput from '../elements/SearchInput.svelte';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import DragColumnMemory from './DragColumnMemory.svelte';
+  import createRef from '../utility/createRef';
 
   export let value;
   export let onChange;
@@ -76,14 +77,19 @@
   const dbInfo = settings?.updateFromDbInfo ? useDatabaseInfo({ conid, database }) : null;
   $: dbInfoExtended = $dbInfo ? extendDatabaseInfoFromApps($dbInfo, $apps) : null;
 
-  $: tables = value?.tables as any[];
+  $: tables =
-  $: references = value?.references as any[];
+    (value?.style?.topTables > 0 && value?.tables
+      ? chooseTopTables(value?.tables, value?.style?.topTables)
+      : value?.tables) || ([] as any[]);
+  $: references = (value?.references || [])?.filter(
+    ref => tables.find(x => x.designerId == ref.sourceId) && tables.find(x => x.designerId == ref.targetId)
+  ) as any[];
   $: zoomKoef = settings?.customizeStyle && value?.style?.zoomKoef ? value?.style?.zoomKoef : 1;
   $: apps = useUsedApps();
 
   $: isMultipleTableSelection = tables.filter(x => x.isSelectedTable).length >= 2;
 
-  const tableRefs = {};
+  let tableRefs = {};
   const referenceRefs = {};
   let domTables;
   $: {
@@ -663,7 +669,7 @@
 
   export function arrange(skipUndoChain = false, arrangeAll = true, circleMiddle = { x: 0, y: 0 }) {
     const graph = new GraphDefinition();
-    for (const table of value?.tables || []) {
+    for (const table of tables || []) {
       const domTable = domTables[table.designerId] as any;
       if (!domTable) continue;
       const rect = domTable.getRect();
@@ -676,8 +682,8 @@
     }
 
     for (const reference of settings?.sortAutoLayoutReferences
-      ? settings?.sortAutoLayoutReferences(value?.references)
+      ? settings?.sortAutoLayoutReferences(references)
-      : value?.references) {
+      : references) {
       graph.addEdge(reference.sourceId, reference.targetId);
     }
 
@@ -877,6 +883,20 @@
       recomputeDomTables();
     });
   }
+
+  const oldTopTablesRef = createRef(value?.style?.topTables);
+  $: {
+    if (value?.style?.topTables > 0 && oldTopTablesRef.get() != value?.style?.topTables) {
+      oldTopTablesRef.set(value?.style?.topTables);
+      tick().then(() => {
+        arrange();
+        tick().then(() => {
+          recomputeReferencePositions();
+          recomputeDomTables();
+        });
+      });
+    }
+  }
 </script>
 
 <div class="wrapper noselect" use:contextMenu={createMenu}>

packages/web/src/designer/DiagramSettings.svelte

@@ -5,6 +5,7 @@
   import FormProviderCore from '../forms/FormProviderCore.svelte';
   import FormSelectField from '../forms/FormSelectField.svelte';
   import FormTextField from '../forms/FormTextField.svelte';
+  import { isProApp } from '../utility/proTools';
 
   export let values;
 </script>
@@ -102,4 +103,8 @@
   <FormCheckboxField name="showDataType" label="Show data type" data-testid="DiagramSettings_showDataType" />
 
   <FormTextField name="columnFilter" label="Column filter" />
+
+  {#if isProApp()}
+    <FormTextField name="topTables" label="Only N most important tables" type="number" />
+  {/if}
 </FormProviderCore>