perspectives: added data provider layer

packages/datalib/src/PerspectiveDataProvider.ts

@@ -0,0 +1,14 @@
+import { PerspectiveDataLoadProps } from './PerspectiveTreeNode';
+
+export interface PerspectiveDataCache {}
+
+export class PerspectiveDataProvider {
+  constructor(
+    public cache: PerspectiveDataCache,
+    public setCache: (value: PerspectiveDataCache) => void,
+    public loader: (props: PerspectiveDataLoadProps) => Promise<any[]>
+  ) {}
+  async loadData(props: PerspectiveDataLoadProps) {
+    return await this.loader(props);
+  }
+}

packages/datalib/src/PerspectiveTreeNode.ts

@@ -6,6 +6,7 @@ import _cloneDeep from 'lodash/cloneDeep';
 import _compact from 'lodash/compact';
 import _uniq from 'lodash/uniq';
 import _flatten from 'lodash/flatten';
+import { PerspectiveDataProvider } from './PerspectiveDataProvider';
 
 export interface PerspectiveDataLoadProps {
   schemaName: string;
@@ -46,7 +47,7 @@ export abstract class PerspectiveTreeNode {
     public config: PerspectiveConfig,
     public setConfig: ChangePerspectiveConfigFunc,
     public parentNode: PerspectiveTreeNode,
-    public loader: (props: PerspectiveDataLoadProps) => Promise<any[]>
+    public dataProvider: PerspectiveDataProvider
   ) {}
   abstract get title();
   abstract get codeName();
@@ -141,10 +142,10 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
     public db: DatabaseInfo,
     config: PerspectiveConfig,
     setConfig: ChangePerspectiveConfigFunc,
-    loader: (props: PerspectiveDataLoadProps) => Promise<any[]>,
+    public dataProvider: PerspectiveDataProvider,
     parentNode: PerspectiveTreeNode
   ) {
-    super(config, setConfig, parentNode, loader);
+    super(config, setConfig, parentNode, dataProvider);
 
     this.foreignKey =
       table.foreignKeys &&
@@ -204,7 +205,7 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
     const tbl = this?.db?.tables?.find(
       x => x.pureName == this.foreignKey?.refTableName && x.schemaName == this.foreignKey?.refSchemaName
     );
-    return getTableChildPerspectiveNodes(tbl, this.db, this.config, this.setConfig, this.loader, this);
+    return getTableChildPerspectiveNodes(tbl, this.db, this.config, this.setConfig, this.dataProvider, this);
   }
 }
 
@@ -214,10 +215,10 @@ export class PerspectiveTableNode extends PerspectiveTreeNode {
     public db: DatabaseInfo,
     config: PerspectiveConfig,
     setConfig: ChangePerspectiveConfigFunc,
-    loader: (props: PerspectiveDataLoadProps) => Promise<any[]>,
+    public dataProvider: PerspectiveDataProvider,
     parentNode: PerspectiveTreeNode
   ) {
-    super(config, setConfig, parentNode, loader);
+    super(config, setConfig, parentNode, dataProvider);
   }
 
   getNodeLoadProps(parentRows: any[]) {
@@ -241,7 +242,7 @@ export class PerspectiveTableNode extends PerspectiveTreeNode {
   }
 
   get childNodes(): PerspectiveTreeNode[] {
-    return getTableChildPerspectiveNodes(this.table, this.db, this.config, this.setConfig, this.loader, this);
+    return getTableChildPerspectiveNodes(this.table, this.db, this.config, this.setConfig, this.dataProvider, this);
   }
 
   get icon() {
@@ -256,10 +257,10 @@ export class PerspectiveTableReferenceNode extends PerspectiveTableNode {
     db: DatabaseInfo,
     config: PerspectiveConfig,
     setConfig: ChangePerspectiveConfigFunc,
-    loader: (props: PerspectiveDataLoadProps) => Promise<any[]>,
+    public dataProvider: PerspectiveDataProvider,
     parentNode: PerspectiveTreeNode
   ) {
-    super(table, db, config, setConfig, loader, parentNode);
+    super(table, db, config, setConfig, dataProvider, parentNode);
   }
 
   matchChildRow(parentRow: any, childRow: any): boolean {
@@ -298,18 +299,20 @@ export function getTableChildPerspectiveNodes(
   db: DatabaseInfo,
   config: PerspectiveConfig,
   setConfig: ChangePerspectiveConfigFunc,
-  loader: (props: PerspectiveDataLoadProps) => Promise<any[]>,
+  dataProvider: PerspectiveDataProvider,
   parentColumn: PerspectiveTreeNode
 ) {
   if (!table) return [];
   const res = [];
   res.push(
-    ...table.columns.map(col => new PerspectiveTableColumnNode(col, table, db, config, setConfig, loader, parentColumn))
+    ...table.columns.map(
+      col => new PerspectiveTableColumnNode(col, table, db, config, setConfig, dataProvider, parentColumn)
+    )
   );
   if (db && table.dependencies) {
     for (const fk of table.dependencies) {
       const tbl = db.tables.find(x => x.pureName == fk.pureName && x.schemaName == fk.schemaName);
-      if (tbl) res.push(new PerspectiveTableReferenceNode(fk, tbl, db, config, setConfig, loader, parentColumn));
+      if (tbl) res.push(new PerspectiveTableReferenceNode(fk, tbl, db, config, setConfig, dataProvider, parentColumn));
     }
   }
   return res;

packages/datalib/src/index.ts

@@ -15,3 +15,4 @@ export * from './TableFormViewDisplay';
 export * from './CollectionGridDisplay';
 export * from './deleteCascade';
 export * from './PerspectiveDisplay';
+export * from './PerspectiveDataProvider';

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -24,7 +24,7 @@
     const loadChildNodes = [];
     const loadChildRows = [];
     const loadProps = node.getNodeLoadProps(parentRows);
-    const rows = await node.loader(loadProps);
+    const rows = await node.dataProvider.loadData(loadProps);
     // console.log('ROWS', rows, node.isRoot);
 
     if (node.isRoot) {
@@ -67,7 +67,7 @@
     await loadLevelData(node, rows);
     dataRows = rows;
 
-    // console.log('DISPLAY ROWS', rows);
+    console.log('DISPLAY ROWS', rows);
     // const rows = await node.loadLevelData();
     // for (const child of node.childNodes) {
     //   const loadProps = [];
@@ -97,6 +97,8 @@
     }
   }
 
+  onMount(() => {});
+
   $: loadData(root);
   $: display = root && dataRows ? new PerspectiveDisplay(root, dataRows) : null;
 

packages/web/src/perspectives/PerspectiveView.svelte

@@ -2,6 +2,7 @@
   import {
     getTableChildPerspectiveNodes,
     PerspectiveDataLoadProps,
+    PerspectiveDataProvider,
     PerspectiveTableColumnNode,
     PerspectiveTableNode,
   } from 'dbgate-datalib';
@@ -18,7 +19,7 @@
   import PerspectiveTable from './PerspectiveTable.svelte';
   import { apiCall } from '../utility/api';
   import { Select } from 'dbgate-sqltree';
-import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
+  import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
 
   export let conid;
   export let database;
@@ -28,6 +29,9 @@ import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
   export let config;
   export let setConfig;
 
+  export let cache;
+  export let setCache;
+
   let managerSize;
 
   $: if (managerSize) setLocalStorage('perspectiveManagerWidth', managerSize);
@@ -78,6 +82,22 @@ import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
         },
       })),
       selectAll: !dataColumns,
+      orderBy: dataColumns
+        ? [
+            {
+              exprType: 'column',
+              direction: 'ASC',
+              columnName: dataColumns[0],
+              source: {
+                name: { schemaName, pureName },
+              },
+            },
+          ]
+        : null,
+      range: {
+        offset: 0,
+        limit: 100,
+      },
     };
     if (bindingColumns?.length == 1) {
       select.where = {
@@ -102,7 +122,8 @@ import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
     return response.rows;
   }
 
-  $: root = $tableInfo ? new PerspectiveTableNode($tableInfo, $dbInfo, config, setConfig, loader as any, null) : null;
+  $: dataProvider = new PerspectiveDataProvider(cache, setCache, loader);
+  $: root = $tableInfo ? new PerspectiveTableNode($tableInfo, $dbInfo, config, setConfig, dataProvider, null) : null;
 </script>
 
 <HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize}>

packages/web/src/tabs/PerspectiveTab.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import PerspectiveView from '../perspectives/PerspectiveView.svelte';
-  import usePerspectiveConfig from '../utility/usePerspectiveConfig';
+  import usePerspectiveConfig, { usePerspectiveCache } from '../utility/usePerspectiveConfig';
 
   export let tabid;
   export let conid;
@@ -9,6 +9,16 @@
   export let pureName;
 
   const config = usePerspectiveConfig(tabid);
+  const cache = usePerspectiveCache();
 </script>
 
-<PerspectiveView {conid} {database} {schemaName} {pureName} config={$config} setConfig={config.update} />
+<PerspectiveView
+  {conid}
+  {database}
+  {schemaName}
+  {pureName}
+  config={$config}
+  setConfig={config.update}
+  {cache}
+  setCache={cache.update}
+/>

packages/web/src/utility/usePerspectiveConfig.ts

@@ -19,7 +19,14 @@ function doLoadPerspectiveConfigFunc(tabid) {
 
 export default function usePerspectiveConfig(tabid) {
   const config = writable(doLoadPerspectiveConfigFunc(tabid));
-  const unsubscribe = config.subscribe(value => localStorage.setItem(`tabdata_perspective_${tabid}`, JSON.stringify(value)));
+  const unsubscribe = config.subscribe(value =>
+    localStorage.setItem(`tabdata_perspective_${tabid}`, JSON.stringify(value))
+  );
   onDestroy(unsubscribe);
   return config;
 }
+
+export function usePerspectiveCache() {
+  const cache = writable({});
+  return cache;
+}