diff --git a/packages/datalib/src/PerspectiveDataLoader.ts b/packages/datalib/src/PerspectiveDataLoader.ts new file mode 100644 index 000000000..320639a95 --- /dev/null +++ b/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; + } +} diff --git a/packages/datalib/src/PerspectiveDataProvider.ts b/packages/datalib/src/PerspectiveDataProvider.ts index 9c8ef55b0..96eb1ba1e 100644 --- a/packages/datalib/src/PerspectiveDataProvider.ts +++ b/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 + public loader: PerspectiveDataLoader ) {} - async loadData(props: PerspectiveDataLoadProps) { - return await this.loader(props); + async loadData(props: PerspectiveDataLoadProps): Promise<{ rows: any[]; incomplete: boolean }> { + return { + rows: await this.loader.loadData(props), + incomplete: true, + }; } } diff --git a/packages/datalib/src/PerspectiveTreeNode.ts b/packages/datalib/src/PerspectiveTreeNode.ts index b244a8fe7..674f4f805 100644 --- a/packages/datalib/src/PerspectiveTreeNode.ts +++ b/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; diff --git a/packages/web/package.json b/packages/web/package.json index 371109fea..0be497b59 100644 --- a/packages/web/package.json +++ b/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" diff --git a/packages/web/src/perspectives/PerspectiveTable.svelte b/packages/web/src/perspectives/PerspectiveTable.svelte index 2dd19fb50..79b759400 100644 --- a/packages/web/src/perspectives/PerspectiveTable.svelte +++ b/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 = []; diff --git a/packages/web/src/perspectives/PerspectiveView.svelte b/packages/web/src/perspectives/PerspectiveView.svelte index 53e5f0c79..d46105216 100644 --- a/packages/web/src/perspectives/PerspectiveView.svelte +++ b/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) { - 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: { - offset: 0, - limit: 100, - }, - }; - if (bindingColumns?.length == 1) { - select.where = { - conditionType: 'in', - expr: { - exprType: 'column', - columnName: bindingColumns[0], - source: { - name: { schemaName, pureName }, - }, - }, - values: bindingValues, - }; - } - const response = await apiCall('database-connections/sql-select', { - conid, - database, - select, - }); + // async function loader(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 (response.errorMessage) return response; - return response.rows; - } + // dbg(`LOAD DATA, table=${props.pureName}, columns=${props.dataColumns?.join(',')}, range=${props.range}}`); + // 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;