perspective tre shows dependencies

packages/datalib/src/PerspectiveTreeNode.ts

@@ -10,9 +10,9 @@ export abstract class PerspectiveTreeNode {
   ) {}
   abstract get title();
   abstract get codeName();
-  abstract get props();
   abstract get isExpandable();
   abstract get childNodes(): PerspectiveTreeNode[];
+  abstract get icon(): string;
   get uniqueName() {
     if (this.parentNode) return `${this.parentNode.uniqueName}.${this.codeName}`;
     return this.codeName;
@@ -61,6 +61,12 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
       table.foreignKeys.find(fk => fk.columns.length == 1 && fk.columns[0].columnName == column.columnName);
   }
 
+  get icon() {
+    if (this.column.autoIncrement) return 'img autoincrement';
+    if (this.foreignKey) return 'img foreign-key';
+    return 'img column';
+  }
+
   get codeName() {
     return this.column.columnName;
   }
@@ -69,10 +75,6 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
     return this.column.columnName;
   }
 
-  get props() {
-    return this.column;
-  }
-
   get isExpandable() {
     return !!this.foreignKey;
   }
@@ -83,10 +85,40 @@ export class PerspectiveTableColumnNode extends PerspectiveTreeNode {
       x => x.pureName == this.foreignKey?.refTableName && x.schemaName == this.foreignKey?.refSchemaName
     );
     return getTableChildPerspectiveNodes(tbl, this.db, this.config, this.setConfig, this);
-    // return (
-    //   tbl?.columns?.map(col => new PerspectiveTableColumnNode(col, tbl, this.db, this.config, this.setConfig, this)) ||
-    //   []
-    // );
+  }
+}
+
+export class PerspectiveTableReferenceNode extends PerspectiveTreeNode {
+  foreignKey: ForeignKeyInfo;
+  constructor(
+    public fk: ForeignKeyInfo,
+    public table: TableInfo,
+    public db: DatabaseInfo,
+    config: PerspectiveConfig,
+    setConfig: ChangePerspectiveConfigFunc,
+    parentColumn: PerspectiveTreeNode
+  ) {
+    super(config, setConfig, parentColumn);
+  }
+
+  get codeName() {
+    return this.table.schemaName ? `${this.table.schemaName}:${this.table.pureName}` : this.table.pureName;
+  }
+
+  get title() {
+    return this.table.pureName;
+  }
+
+  get isExpandable() {
+    return true;
+  }
+
+  get childNodes(): PerspectiveTreeNode[] {
+    return getTableChildPerspectiveNodes(this.table, this.db, this.config, this.setConfig, this);
+  }
+
+  get icon() {
+    return 'img table';
   }
 }
 
@@ -98,5 +130,15 @@ export function getTableChildPerspectiveNodes(
   parentColumn: PerspectiveTreeNode
 ) {
   if (!table) return [];
-  return table.columns.map(col => new PerspectiveTableColumnNode(col, table, db, config, setConfig, parentColumn));
+  const res = [];
+  res.push(
+    ...table.columns.map(col => new PerspectiveTableColumnNode(col, table, db, config, setConfig, 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));
+    }
+  }
+  return res;
 }

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -3,20 +3,20 @@
   import { plusExpandIcon } from '../icons/expandIcons';
   import FontIcon from '../icons/FontIcon.svelte';
 
-  export let column;
+  export let node;
 </script>
 
 <div class="row">
-  <span class="expandColumnIcon" style={`margin-right: ${5 + column.level * 10}px`}>
+  <span class="expandColumnIcon" style={`margin-right: ${5 + node.level * 10}px`}>
     <FontIcon
-      icon={column.isExpandable ? plusExpandIcon(column.isExpanded) : 'icon invisible-box'}
-      on:click={() => column.toggleExpanded()}
+      icon={node.isExpandable ? plusExpandIcon(node.isExpanded) : 'icon invisible-box'}
+      on:click={() => node.toggleExpanded()}
     />
   </span>
 
   <input
     type="checkbox"
-    checked={column.isChecked}
+    checked={node.isChecked}
     on:click={e => {
       e.stopPropagation();
     }}
@@ -24,13 +24,15 @@
       e.stopPropagation();
     }}
     on:change={() => {
-      const newValue = !column.isChecked;
+      const newValue = !node.isChecked;
       // display.setColumnVisibility(column.uniquePath, newValue);
       // dispatch('setvisibility', newValue);
     }}
   />
 
-  <ColumnLabel {...column.props} showDataType />
+  <FontIcon icon={node.icon} />
+
+  <span>{node.title}</span>
 </div>
 
 <style>

packages/web/src/perspectives/PerspectiveTree.svelte

@@ -1,9 +1,7 @@
 <script lang="ts">
-  import { each } from 'svelte/internal';
-  import ColumnLabel from '../elements/ColumnLabel.svelte';
-  import PerspectiveColumnRow from './PerspectiveColumnRow.svelte';
+  import PerspectiveNodeRow from './PerspectiveNodeRow.svelte';
 
-  export let columns = [];
+  export let nodes = [];
 
   function processFlatColumns(res, columns) {
     for (const col of columns) {
@@ -21,6 +19,6 @@
   }
 </script>
 
-{#each getFlatColumns(columns) as column}
-  <PerspectiveColumnRow {column} />
+{#each getFlatColumns(nodes) as node}
+  <PerspectiveNodeRow {node} />
 {/each}

packages/web/src/perspectives/PerspectiveView.svelte

@@ -9,7 +9,7 @@
   import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
   import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
   import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
-  import PerspectiveColumns from './PerspectiveColumns.svelte';
+  import PerspectiveTree from './PerspectiveTree.svelte';
   import PerspectiveCore from './PerspectiveCore.svelte';
 
   export let conid;
@@ -39,29 +39,29 @@
   // $: console.log('tableInfo', $tableInfo);
   // $: console.log('viewInfo', $viewInfo);
 
-  function getTableColumns(table, dbInfo, config, setConfig) {
+  function getTableNodes(table, dbInfo, config, setConfig) {
     return getTableChildPerspectiveNodes(table, dbInfo, config, setConfig, null);
   }
 
-  function getViewColumns(view, dbInfo, config, setConfig) {
+  function getViewNodes(view, dbInfo, config, setConfig) {
     return [];
   }
 
   // $: console.log('CFG', config);
 
-  $: columns = $tableInfo
-    ? getTableColumns($tableInfo, $dbInfo, config, setConfig)
+  $: nodes = $tableInfo
+    ? getTableNodes($tableInfo, $dbInfo, config, setConfig)
     : $viewInfo
-    ? getViewColumns($viewInfo, $dbInfo, config, setConfig)
+    ? getViewNodes($viewInfo, $dbInfo, config, setConfig)
     : null;
 </script>
 
 <HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize}>
   <div class="left" slot="1">
     <WidgetColumnBar>
-      <WidgetColumnBarItem title="Columns" name="columns" height="45%">
-        {#if columns}
-          <PerspectiveColumns {columns} />
+      <WidgetColumnBarItem title="Choose data" name="perspectiveTree" height="45%">
+        {#if nodes}
+          <PerspectiveTree {nodes} />
         {/if}
       </WidgetColumnBarItem>
     </WidgetColumnBar>