perspective loader class

packages/datalib/src/PerspectiveDataLoader.ts

@@ -0,0 +1,68 @@
+import { Select } from 'dbgate-sqltree';
+import { PerspectiveDataLoadProps } from './PerspectiveTreeNode';
+
+export interface PerspectiveDatabaseConfig {
+  conid: string;
+  database: string;
+}
+
+export class PerspectiveDataLoader {
+  constructor(public apiCall, public dbg) {}
+
+  async loadData(props: PerspectiveDataLoadProps) {
+    const { schemaName, pureName, bindingColumns, bindingValues, dataColumns } = props;
+    const select: Select = {
+      commandType: 'select',
+      from: {
+        name: { schemaName, pureName },
+      },
+      columns: dataColumns?.map(columnName => ({
+        exprType: 'column',
+        columnName,
+        source: {
+          name: { schemaName, pureName },
+        },
+      })),
+      selectAll: !dataColumns,
+      orderBy: dataColumns
+        ? [
+            {
+              exprType: 'column',
+              direction: 'ASC',
+              columnName: dataColumns[0],
+              source: {
+                name: { schemaName, pureName },
+              },
+            },
+          ]
+        : null,
+      range: props.range,
+    };
+    if (bindingColumns?.length == 1) {
+      select.where = {
+        conditionType: 'in',
+        expr: {
+          exprType: 'column',
+          columnName: bindingColumns[0],
+          source: {
+            name: { schemaName, pureName },
+          },
+        },
+        values: bindingValues,
+      };
+    }
+
+    if (this.dbg?.enabled) {
+      this.dbg(`LOAD DATA, table=${props.pureName}, columns=${props.dataColumns?.join(',')}, range=${props.range}}`);
+    }
+
+    const response = await this.apiCall('database-connections/sql-select', {
+      conid: props.databaseConfig.conid,
+      database: props.databaseConfig.database,
+      select,
+    });
+
+    if (response.errorMessage) return response;
+    return response.rows;
+  }
+}

packages/datalib/src/PerspectiveDataProvider.ts

@@ -1,3 +1,4 @@
+import { PerspectiveDataLoader } from './PerspectiveDataLoader';
 import { PerspectiveDataLoadProps } from './PerspectiveTreeNode';
 
 export interface PerspectiveDataCache {}
@@ -6,9 +7,12 @@ export class PerspectiveDataProvider {
   constructor(
     public cache: PerspectiveDataCache,
     public setCache: (value: PerspectiveDataCache) => void,
-    public loader: (props: PerspectiveDataLoadProps) => Promise<any[]>
+    public loader: PerspectiveDataLoader
   ) {}
-  async loadData(props: PerspectiveDataLoadProps) {
+  async loadData(props: PerspectiveDataLoadProps): Promise<{ rows: any[]; incomplete: boolean }> {
-    return await this.loader(props);
+    return {
+      rows: await this.loader.loadData(props),
+      incomplete: true,
+    };
   }
 }

packages/datalib/src/PerspectiveTreeNode.ts

@@ -1,4 +1,4 @@
-import { ColumnInfo, DatabaseInfo, ForeignKeyInfo, TableInfo } from 'dbgate-types';
+import { ColumnInfo, DatabaseInfo, ForeignKeyInfo, RangeDefinition, TableInfo } from 'dbgate-types';
 import { clearConfigCache } from 'prettier';
 import { ChangePerspectiveConfigFunc, PerspectiveConfig } from './PerspectiveConfig';
 import _isEqual from 'lodash/isEqual';
@@ -7,13 +7,17 @@ import _compact from 'lodash/compact';
 import _uniq from 'lodash/uniq';
 import _flatten from 'lodash/flatten';
 import { PerspectiveDataProvider } from './PerspectiveDataProvider';
+import { PerspectiveDatabaseConfig } from './PerspectiveDataLoader';
 
 export interface PerspectiveDataLoadProps {
+  databaseConfig: PerspectiveDatabaseConfig;
   schemaName: string;
   pureName: string;
   dataColumns: string[];
   bindingColumns?: string[];
   bindingValues?: any[][];
+  range?: RangeDefinition;
+  loadMore?: boolean;
 }
 
 export interface PerspectiveDataLoadPropsWithNode {
@@ -47,7 +51,8 @@ export abstract class PerspectiveTreeNode {
     public config: PerspectiveConfig,
     public setConfig: ChangePerspectiveConfigFunc,
     public parentNode: PerspectiveTreeNode,
-    public dataProvider: PerspectiveDataProvider
+    public dataProvider: PerspectiveDataProvider,
+    public databaseConfig: PerspectiveDatabaseConfig
   ) {}
   abstract get title();
   abstract get codeName();
@@ -142,10 +147,11 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
     public db: DatabaseInfo,
     config: PerspectiveConfig,
     setConfig: ChangePerspectiveConfigFunc,
-    public dataProvider: PerspectiveDataProvider,
+    dataProvider: PerspectiveDataProvider,
+    databaseConfig: PerspectiveDatabaseConfig,
     parentNode: PerspectiveTreeNode
   ) {
-    super(config, setConfig, parentNode, dataProvider);
+    super(config, setConfig, parentNode, dataProvider, databaseConfig);
 
     this.foreignKey =
       table.foreignKeys &&
@@ -175,6 +181,7 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
       bindingColumns: [this.foreignKey.columns[0].refColumnName],
       bindingValues: parentRows.map(row => row[this.foreignKey.columns[0].columnName]),
       dataColumns: this.getDataLoadColumns(),
+      databaseConfig: this.databaseConfig,
     };
   }
 
@@ -205,7 +212,15 @@ 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.dataProvider, this);
+    return getTableChildPerspectiveNodes(
+      tbl,
+      this.db,
+      this.config,
+      this.setConfig,
+      this.dataProvider,
+      this.databaseConfig,
+      this
+    );
   }
 }
 
@@ -216,9 +231,10 @@ export class PerspectiveTableNode extends PerspectiveTreeNode {
     config: PerspectiveConfig,
     setConfig: ChangePerspectiveConfigFunc,
     public dataProvider: PerspectiveDataProvider,
+    databaseConfig: PerspectiveDatabaseConfig,
     parentNode: PerspectiveTreeNode
   ) {
-    super(config, setConfig, parentNode, dataProvider);
+    super(config, setConfig, parentNode, dataProvider, databaseConfig);
   }
 
   getNodeLoadProps(parentRows: any[]) {
@@ -226,6 +242,7 @@ export class PerspectiveTableNode extends PerspectiveTreeNode {
       schemaName: this.table.schemaName,
       pureName: this.table.pureName,
       dataColumns: this.getDataLoadColumns(),
+      databaseConfig: this.databaseConfig,
     };
   }
 
@@ -242,7 +259,15 @@ export class PerspectiveTableNode extends PerspectiveTreeNode {
   }
 
   get childNodes(): PerspectiveTreeNode[] {
-    return getTableChildPerspectiveNodes(this.table, this.db, this.config, this.setConfig, this.dataProvider, this);
+    return getTableChildPerspectiveNodes(
+      this.table,
+      this.db,
+      this.config,
+      this.setConfig,
+      this.dataProvider,
+      this.databaseConfig,
+      this
+    );
   }
 
   get icon() {
@@ -258,9 +283,10 @@ export class PerspectiveTableReferenceNode extends PerspectiveTableNode {
     config: PerspectiveConfig,
     setConfig: ChangePerspectiveConfigFunc,
     public dataProvider: PerspectiveDataProvider,
+    databaseConfig: PerspectiveDatabaseConfig,
     parentNode: PerspectiveTreeNode
   ) {
-    super(table, db, config, setConfig, dataProvider, parentNode);
+    super(table, db, config, setConfig, dataProvider, databaseConfig, parentNode);
   }
 
   matchChildRow(parentRow: any, childRow: any): boolean {
@@ -286,6 +312,7 @@ export class PerspectiveTableReferenceNode extends PerspectiveTableNode {
       bindingColumns: [this.foreignKey.columns[0].columnName],
       bindingValues: parentRows.map(row => row[this.foreignKey.columns[0].refColumnName]),
       dataColumns: this.getDataLoadColumns(),
+      databaseConfig: this.databaseConfig,
     };
   }
 
@@ -300,19 +327,24 @@ export function getTableChildPerspectiveNodes(
   config: PerspectiveConfig,
   setConfig: ChangePerspectiveConfigFunc,
   dataProvider: PerspectiveDataProvider,
+  databaseConfig: PerspectiveDatabaseConfig,
   parentColumn: PerspectiveTreeNode
 ) {
   if (!table) return [];
   const res = [];
   res.push(
     ...table.columns.map(
-      col => new PerspectiveTableColumnNode(col, table, db, config, setConfig, dataProvider, parentColumn)
+      col =>
+        new PerspectiveTableColumnNode(col, table, db, config, setConfig, dataProvider, databaseConfig, 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, dataProvider, parentColumn));
+      if (tbl)
+        res.push(
+          new PerspectiveTableReferenceNode(fk, tbl, db, config, setConfig, dataProvider, databaseConfig, parentColumn)
+        );
     }
   }
   return res;

packages/web/package.json

@@ -57,6 +57,7 @@
   "dependencies": {
     "chartjs-plugin-zoom": "^1.2.0",
     "date-fns": "^2.28.0",
+    "debug": "^4.3.4",
     "interval-operations": "^1.0.7",
     "leaflet": "^1.8.0",
     "wellknown": "^0.5.0"

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -24,7 +24,7 @@
     const loadChildNodes = [];
     const loadChildRows = [];
     const loadProps = node.getNodeLoadProps(parentRows);
-    const rows = await node.dataProvider.loadData(loadProps);
+    const { rows, incomplete } = 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 = [];

packages/web/src/perspectives/PerspectiveView.svelte

@@ -11,6 +11,7 @@
 
   import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
   import { useDatabaseInfo, useTableInfo, useViewInfo } from '../utility/metadataLoaders';
+  import debug from 'debug';
 
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
   import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
@@ -20,6 +21,9 @@
   import { apiCall } from '../utility/api';
   import { Select } from 'dbgate-sqltree';
   import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
+  import { PerspectiveDataLoader } from 'dbgate-datalib/lib/PerspectiveDataLoader';
+
+  const dbg = debug('dbgate:PerspectiveView');
 
   export let conid;
   export let database;
@@ -67,63 +71,66 @@
   //   ? getViewNodes($viewInfo, $dbInfo, config, setConfig)
   //   : null;
 
-  async function loader(props: PerspectiveDataLoadProps) {
+  // async function loader(props: PerspectiveDataLoadProps) {
-    const { schemaName, pureName, bindingColumns, bindingValues, dataColumns } = props;
+  //   const { schemaName, pureName, bindingColumns, bindingValues, dataColumns } = props;
-    const select: Select = {
+  //   const select: Select = {
-      commandType: 'select',
+  //     commandType: 'select',
-      from: {
+  //     from: {
-        name: { schemaName, pureName },
+  //       name: { schemaName, pureName },
-      },
+  //     },
-      columns: dataColumns?.map(columnName => ({
+  //     columns: dataColumns?.map(columnName => ({
-        exprType: 'column',
+  //       exprType: 'column',
-        columnName,
+  //       columnName,
-        source: {
+  //       source: {
-          name: { schemaName, pureName },
+  //         name: { schemaName, pureName },
-        },
+  //       },
-      })),
+  //     })),
-      selectAll: !dataColumns,
+  //     selectAll: !dataColumns,
-      orderBy: dataColumns
+  //     orderBy: dataColumns
-        ? [
+  //       ? [
-            {
+  //           {
-              exprType: 'column',
+  //             exprType: 'column',
-              direction: 'ASC',
+  //             direction: 'ASC',
-              columnName: dataColumns[0],
+  //             columnName: dataColumns[0],
-              source: {
+  //             source: {
-                name: { schemaName, pureName },
+  //               name: { schemaName, pureName },
-              },
+  //             },
-            },
+  //           },
-          ]
+  //         ]
-        : null,
+  //       : null,
-      range: {
+  //     range: props.range,
-        offset: 0,
+  //   };
-        limit: 100,
+  //   if (bindingColumns?.length == 1) {
-      },
+  //     select.where = {
-    };
+  //       conditionType: 'in',
-    if (bindingColumns?.length == 1) {
+  //       expr: {
-      select.where = {
+  //         exprType: 'column',
-        conditionType: 'in',
+  //         columnName: bindingColumns[0],
-        expr: {
+  //         source: {
-          exprType: 'column',
+  //           name: { schemaName, pureName },
-          columnName: bindingColumns[0],
+  //         },
-          source: {
+  //       },
-            name: { schemaName, pureName },
+  //       values: bindingValues,
-          },
+  //     };
-        },
+  //   }
-        values: bindingValues,
-      };
-    }
-    const response = await apiCall('database-connections/sql-select', {
-      conid,
-      database,
-      select,
-    });
 
-    if (response.errorMessage) return response;
+  //   dbg(`LOAD DATA, table=${props.pureName}, columns=${props.dataColumns?.join(',')}, range=${props.range}}`);
-    return response.rows;
-  }
 
+  //   const response = await apiCall('database-connections/sql-select', {
+  //     conid,
+  //     database,
+  //     select,
+  //   });
+
+  //   if (response.errorMessage) return response;
+  //   return response.rows;
+  // }
+
+  $: loader = new PerspectiveDataLoader(apiCall, dbg);
   $: dataProvider = new PerspectiveDataProvider(cache, setCache, loader);
-  $: root = $tableInfo ? new PerspectiveTableNode($tableInfo, $dbInfo, config, setConfig, dataProvider, null) : null;
+  $: root = $tableInfo
+    ? new PerspectiveTableNode($tableInfo, $dbInfo, config, setConfig, dataProvider, { conid, database }, null)
+    : null;
 </script>
 
 <HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize}>