perspective - load hiearchic JSON

packages/datalib/src/PerspectiveConfig.ts

@@ -1,16 +1,14 @@
 export interface PerspectiveConfig {
-  hiddenColumns: string[];
-  shownColumns: string[];
   expandedColumns: string[];
-  collapsedColumns: string[];
+  checkedColumns: string[];
+  uncheckedColumns: string[];
 }
 
 export function createPerspectiveConfig(): PerspectiveConfig {
   return {
-    hiddenColumns: [],
-    shownColumns: [],
     expandedColumns: [],
-    collapsedColumns: [],
+    checkedColumns: [],
+    uncheckedColumns: [],
   };
 }
 

packages/datalib/src/PerspectiveTreeNode.ts

@@ -1,18 +1,62 @@
 import { ColumnInfo, DatabaseInfo, ForeignKeyInfo, TableInfo } from 'dbgate-types';
 import { clearConfigCache } from 'prettier';
 import { ChangePerspectiveConfigFunc, PerspectiveConfig } from './PerspectiveConfig';
+import _isEqual from 'lodash/isEqual';
+import _cloneDeep from 'lodash/cloneDeep';
+
+export interface PerspectiveDataLoadProps {
+  schemaName: string;
+  pureName: string;
+  bindingColumns?: string[];
+  bindingValues?: any[][];
+}
+
+export interface PerspectiveDataLoadPropsWithNode {
+  props: PerspectiveDataLoadProps;
+  node: PerspectiveTreeNode;
+}
+
+// export function groupPerspectiveLoadProps(
+//   ...list: PerspectiveDataLoadPropsWithNode[]
+// ): PerspectiveDataLoadPropsWithNode[] {
+//   const res: PerspectiveDataLoadPropsWithNode[] = [];
+//   for (const item of list) {
+//     const existing = res.find(
+//       x =>
+//         x.node == item.node &&
+//         x.props.schemaName == item.props.schemaName &&
+//         x.props.pureName == item.props.pureName &&
+//         _isEqual(x.props.bindingColumns, item.props.bindingColumns)
+//     );
+//     if (existing) {
+//       existing.props.bindingValues.push(...item.props.bindingValues);
+//     } else {
+//       res.push(_cloneDeep(item));
+//     }
+//   }
+//   return res;
+// }
 
 export abstract class PerspectiveTreeNode {
   constructor(
     public config: PerspectiveConfig,
     public setConfig: ChangePerspectiveConfigFunc,
-    public parentNode: PerspectiveTreeNode
+    public parentNode: PerspectiveTreeNode,
+    public loader: (props: PerspectiveDataLoadProps) => Promise<any[]>
   ) {}
   abstract get title();
   abstract get codeName();
   abstract get isExpandable();
   abstract get childNodes(): PerspectiveTreeNode[];
   abstract get icon(): string;
+  abstract getNodeLoadProps(parentRows: any[]): PerspectiveDataLoadProps;
+  get isRoot() {
+    return this.parentNode == null;
+  }
+  matchChildRow(parentRow: any, childRow: any): boolean {
+    return true;
+  }
+
   get uniqueName() {
     if (this.parentNode) return `${this.parentNode.uniqueName}.${this.codeName}`;
     return this.codeName;
@@ -24,11 +68,18 @@ export abstract class PerspectiveTreeNode {
   get isExpanded() {
     return this.config.expandedColumns.includes(this.uniqueName);
   }
+  get isChecked() {
+    return this.config.checkedColumns.includes(this.uniqueName);
+  }
 
   toggleExpanded(value?: boolean) {
     this.includeInColumnSet('expandedColumns', this.uniqueName, value == null ? !this.isExpanded : value);
   }
 
+  toggleChecked(value?: boolean) {
+    this.includeInColumnSet('checkedColumns', this.uniqueName, value == null ? !this.isChecked : value);
+  }
+
   includeInColumnSet(field: keyof PerspectiveConfig, uniqueName: string, isIncluded: boolean) {
     if (isIncluded) {
       this.setConfig(cfg => ({
@@ -52,15 +103,31 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
     public db: DatabaseInfo,
     config: PerspectiveConfig,
     setConfig: ChangePerspectiveConfigFunc,
-    parentColumn: PerspectiveTreeNode
+    loader: (props: PerspectiveDataLoadProps) => Promise<any[]>,
+    parentNode: PerspectiveTreeNode
   ) {
-    super(config, setConfig, parentColumn);
+    super(config, setConfig, parentNode, loader);
 
     this.foreignKey =
       table.foreignKeys &&
       table.foreignKeys.find(fk => fk.columns.length == 1 && fk.columns[0].columnName == column.columnName);
   }
 
+  matchChildRow(parentRow: any, childRow: any): boolean {
+    if (!this.foreignKey) return false;
+    return parentRow[this.foreignKey.columns[0].columnName] == childRow[this.foreignKey.columns[0].refColumnName];
+  }
+
+  getNodeLoadProps(parentRows: any[]): PerspectiveDataLoadProps {
+    if (!this.foreignKey) return null;
+    return {
+      schemaName: this.foreignKey.refSchemaName,
+      pureName: this.foreignKey.refTableName,
+      bindingColumns: [this.foreignKey.columns[0].refColumnName],
+      bindingValues: parentRows.map(row => row[this.foreignKey.columns[0].columnName]),
+    };
+  }
+
   get icon() {
     if (this.column.autoIncrement) return 'img autoincrement';
     if (this.foreignKey) return 'img foreign-key';
@@ -84,21 +151,27 @@ 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);
+    return getTableChildPerspectiveNodes(tbl, this.db, this.config, this.setConfig, this.loader, this);
   }
 }
 
-export class PerspectiveTableReferenceNode extends PerspectiveTreeNode {
+export class PerspectiveTableNode extends PerspectiveTreeNode {
-  foreignKey: ForeignKeyInfo;
   constructor(
-    public fk: ForeignKeyInfo,
     public table: TableInfo,
     public db: DatabaseInfo,
     config: PerspectiveConfig,
     setConfig: ChangePerspectiveConfigFunc,
-    parentColumn: PerspectiveTreeNode
+    loader: (props: PerspectiveDataLoadProps) => Promise<any[]>,
+    parentNode: PerspectiveTreeNode
   ) {
-    super(config, setConfig, parentColumn);
+    super(config, setConfig, parentNode, loader);
+  }
+
+  getNodeLoadProps(parentRows: any[]) {
+    return {
+      schemaName: this.table.schemaName,
+      pureName: this.table.pureName,
+    };
   }
 
   get codeName() {
@@ -114,7 +187,7 @@ export class PerspectiveTableReferenceNode extends PerspectiveTreeNode {
   }
 
   get childNodes(): PerspectiveTreeNode[] {
-    return getTableChildPerspectiveNodes(this.table, this.db, this.config, this.setConfig, this);
+    return getTableChildPerspectiveNodes(this.table, this.db, this.config, this.setConfig, this.loader, this);
   }
 
   get icon() {
@@ -122,22 +195,52 @@ export class PerspectiveTableReferenceNode extends PerspectiveTreeNode {
   }
 }
 
+export class PerspectiveTableReferenceNode extends PerspectiveTableNode {
+  constructor(
+    public foreignKey: ForeignKeyInfo,
+    table: TableInfo,
+    db: DatabaseInfo,
+    config: PerspectiveConfig,
+    setConfig: ChangePerspectiveConfigFunc,
+    loader: (props: PerspectiveDataLoadProps) => Promise<any[]>,
+    parentNode: PerspectiveTreeNode
+  ) {
+    super(table, db, config, setConfig, loader, parentNode);
+  }
+
+  matchChildRow(parentRow: any, childRow: any): boolean {
+    if (!this.foreignKey) return false;
+    return parentRow[this.foreignKey.columns[0].refColumnName] == childRow[this.foreignKey.columns[0].columnName];
+  }
+
+  getNodeLoadProps(parentRows: any[]): PerspectiveDataLoadProps {
+    if (!this.foreignKey) return null;
+    return {
+      schemaName: this.table.schemaName,
+      pureName: this.table.pureName,
+      bindingColumns: [this.foreignKey.columns[0].columnName],
+      bindingValues: parentRows.map(row => row[this.foreignKey.columns[0].refColumnName]),
+    };
+  }
+}
+
 export function getTableChildPerspectiveNodes(
   table: TableInfo,
   db: DatabaseInfo,
   config: PerspectiveConfig,
   setConfig: ChangePerspectiveConfigFunc,
+  loader: (props: PerspectiveDataLoadProps) => Promise<any[]>,
   parentColumn: PerspectiveTreeNode
 ) {
   if (!table) return [];
   const res = [];
   res.push(
-    ...table.columns.map(col => new PerspectiveTableColumnNode(col, table, db, config, setConfig, parentColumn))
+    ...table.columns.map(col => new PerspectiveTableColumnNode(col, table, db, config, setConfig, loader, 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, parentColumn));
+      if (tbl) res.push(new PerspectiveTableReferenceNode(fk, tbl, db, config, setConfig, loader, parentColumn));
     }
   }
   return res;

packages/sqltree/src/dumpSqlCondition.ts

@@ -68,5 +68,9 @@ export function dumpSqlCondition(dmp: SqlDumper, condition: Condition) {
       dmp.put(' ^and ');
       dumpSqlExpression(dmp, condition.right);
       break;
+    case 'in':
+      dumpSqlExpression(dmp, condition.expr);
+      dmp.put(' ^in (%,v)', condition.values);
+      break;
   }
 }

packages/sqltree/src/types.ts

@@ -99,6 +99,12 @@ export interface BetweenCondition {
   right: Expression;
 }
 
+export interface InCondition {
+  conditionType: 'in';
+  expr: Expression;
+  values: any[];
+}
+
 export type Condition =
   | BinaryCondition
   | NotCondition
@@ -107,7 +113,8 @@ export type Condition =
   | LikeCondition
   | ExistsCondition
   | NotExistsCondition
-  | BetweenCondition;
+  | BetweenCondition
+  | InCondition;
 
 export interface Source {
   name?: NamedObjectInfo;

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
+  import { PerspectiveTreeNode } from 'dbgate-datalib';
+
   import ColumnLabel from '../elements/ColumnLabel.svelte';
   import { plusExpandIcon } from '../icons/expandIcons';
   import FontIcon from '../icons/FontIcon.svelte';
 
-  export let node;
+  export let node: PerspectiveTreeNode;
 </script>
 
 <div class="row">
   <span class="expandColumnIcon" style={`margin-right: ${5 + node.level * 10}px`}>
     <FontIcon
       icon={node.isExpandable ? plusExpandIcon(node.isExpanded) : 'icon invisible-box'}
-      on:click={() => node.toggleExpanded()}
+      on:click={() => {
+        node.toggleExpanded();
+      }}
     />
   </span>
 
@@ -24,9 +28,7 @@
       e.stopPropagation();
     }}
     on:change={() => {
-      const newValue = !node.isChecked;
+      node.toggleChecked();
-      // display.setColumnVisibility(column.uniquePath, newValue);
-      // dispatch('setvisibility', newValue);
     }}
   />
 

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import {
+    // groupPerspectiveLoadProps,
+    PerspectiveDataLoadProps,
+    PerspectiveDataLoadPropsWithNode,
+    PerspectiveTreeNode,
+  } from 'dbgate-datalib';
+  import _ from 'lodash';
+  import { onMount } from 'svelte';
+  import { prop_dev } from 'svelte/internal';
+
+  export let root: PerspectiveTreeNode;
+
+  async function loadLevelData(node: PerspectiveTreeNode, parentRows: any[]) {
+    // const loadProps: PerspectiveDataLoadPropsWithNode[] = [];
+    const loadChildNodes = [];
+    const loadChildRows = [];
+    const loadProps = node.getNodeLoadProps(parentRows);
+    console.log('LOADER', loadProps.pureName);
+    const rows = await node.loader(loadProps);
+    // console.log('ROWS', rows, node.isRoot);
+
+    if (node.isRoot) {
+      parentRows.push(...rows);
+      // console.log('PUSH PARENTROWS', parentRows);
+    } else {
+      for (const parentRow of parentRows) {
+        const childRows = rows.filter(row => node.matchChildRow(parentRow, row));
+        parentRow[node.codeName] = childRows;
+      }
+    }
+
+    for (const child of node.childNodes) {
+      if (child.isExpandable && child.isChecked) {
+        loadLevelData(child, rows);
+        // loadProps.push(child.getNodeLoadProps());
+      }
+    }
+
+    //   loadProps.push({
+    //     props: node.getNodeLoadProps(parentRows),
+    //     node,
+    //   });
+
+    // const grouped = groupPerspectiveLoadProps(...loadProps);
+    // for (const item of grouped) {
+    //   const rows = await item.node.loader(item.props);
+    //   if (item.node.isRoot) {
+    //     parentRows.push(...rows);
+    //   } else {
+    //     const childRows = rows.filter(row => node.matchChildRow(row));
+    //   }
+    // }
+  }
+
+  async function loadData(node: PerspectiveTreeNode) {
+    // console.log('LOADING', node);
+    if (!node) return;
+    const rows = [];
+    await loadLevelData(node, rows);
+    console.log('RESULT', rows);
+    // const rows = await node.loadLevelData();
+    // for (const child of node.childNodes) {
+    //   const loadProps = [];
+    //   if (child.isExpandable && child.isChecked) {
+    //     loadProps.push(child.getNodeLoadProps());
+    //   }
+    // }
+  }
+
+  $: loadData(root);
+</script>
+
+<table>
+  <tr><td>xxx</td></tr>
+</table>

packages/web/src/perspectives/PerspectiveTree.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import PerspectiveNodeRow from './PerspectiveNodeRow.svelte';
 
-  export let nodes = [];
+  export let root;
 
   function processFlatColumns(res, columns) {
     for (const col of columns) {
@@ -12,13 +12,13 @@
     }
   }
 
-  function getFlatColumns(columns) {
+  function getFlatColumns(root) {
     const res = [];
-    processFlatColumns(res, columns);
+    processFlatColumns(res, root?.childNodes || []);
     return res;
   }
 </script>
 
-{#each getFlatColumns(nodes) as node}
+{#each getFlatColumns(root) as node}
   <PerspectiveNodeRow {node} />
 {/each}

packages/web/src/perspectives/PerspectiveView.svelte

@@ -1,5 +1,10 @@
 <script lang="ts">
-  import { getTableChildPerspectiveNodes, PerspectiveTableColumnNode } from 'dbgate-datalib';
+  import {
+    getTableChildPerspectiveNodes,
+    PerspectiveDataLoadProps,
+    PerspectiveTableColumnNode,
+    PerspectiveTableNode,
+  } from 'dbgate-datalib';
 
   import _ from 'lodash';
 
@@ -10,7 +15,9 @@
   import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
   import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
   import PerspectiveTree from './PerspectiveTree.svelte';
-  import PerspectiveCore from './PerspectiveCore.svelte';
+  import PerspectiveTable from './PerspectiveTable.svelte';
+  import { apiCall } from '../utility/api';
+  import { Select } from 'dbgate-sqltree';
 
   export let conid;
   export let database;
@@ -39,36 +46,70 @@
   // $: console.log('tableInfo', $tableInfo);
   // $: console.log('viewInfo', $viewInfo);
 
-  function getTableNodes(table, dbInfo, config, setConfig) {
+  // function getTableNodes(table, dbInfo, config, setConfig) {
-    return getTableChildPerspectiveNodes(table, dbInfo, config, setConfig, null);
+  //   return getTableChildPerspectiveNodes(table, dbInfo, config, setConfig, null);
+  // }
+
+  // function getViewNodes(view, dbInfo, config, setConfig) {
+  //   return [];
+  // }
+
+  // // $: console.log('CFG', config);
+
+  // $: nodes = $tableInfo
+  //   ? getTableNodes($tableInfo, $dbInfo, config, setConfig)
+  //   : $viewInfo
+  //   ? getViewNodes($viewInfo, $dbInfo, config, setConfig)
+  //   : null;
+
+  async function loader(props: PerspectiveDataLoadProps) {
+    const { schemaName, pureName, bindingColumns, bindingValues } = props;
+    const select: Select = {
+      commandType: 'select',
+      from: {
+        name: { schemaName, pureName },
+      },
+      selectAll: true,
+    };
+    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,
+    });
+
+    if (response.errorMessage) return response;
+    return response.rows;
   }
 
-  function getViewNodes(view, dbInfo, config, setConfig) {
+  $: root = $tableInfo ? new PerspectiveTableNode($tableInfo, $dbInfo, config, setConfig, loader as any, null) : null;
-    return [];
-  }
-
-  // $: console.log('CFG', config);
-
-  $: nodes = $tableInfo
-    ? getTableNodes($tableInfo, $dbInfo, config, setConfig)
-    : $viewInfo
-    ? getViewNodes($viewInfo, $dbInfo, config, setConfig)
-    : null;
 </script>
 
 <HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize}>
   <div class="left" slot="1">
     <WidgetColumnBar>
       <WidgetColumnBarItem title="Choose data" name="perspectiveTree" height="45%">
-        {#if nodes}
+        {#if root}
-          <PerspectiveTree {nodes} />
+          <PerspectiveTree {root} />
         {/if}
       </WidgetColumnBarItem>
     </WidgetColumnBar>
   </div>
 
   <svelte:fragment slot="2">
-    <PerspectiveCore />
+    <PerspectiveTable {root} />
   </svelte:fragment>
 </HorizontalSplitter>