perspective tre shows dependencies

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>