perspective WIP

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -116,6 +116,12 @@
           insert: true,
         },
       },
+      {
+        label: 'Create perspective',
+        tab: 'PerspectiveTab',
+        forceNewTab: true,
+        icon: 'img perspective',
+      },
     ],
     views: [
       {
@@ -179,6 +185,12 @@
           dropViews: true,
         },
       },
+      {
+        label: 'Create perspective',
+        tab: 'PerspectiveTab',
+        forceNewTab: true,
+        icon: 'img perspective',
+      },
     ],
     matviews: [
       {

packages/web/src/icons/FontIcon.svelte

@@ -171,6 +171,7 @@
     'img link': 'mdi mdi-link',
     'img filter': 'mdi mdi-filter',
     'img group': 'mdi mdi-group',
+    'img perspective': 'mdi mdi-eye color-icon-yellow',
 
     'img folder': 'mdi mdi-folder color-icon-yellow',
     'img type-string': 'mdi mdi-alphabetical color-icon-blue',

packages/web/src/perspectives/PerspectiveView.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import HorizontalSplitter from '../elements/HorizontalSplitter.svelte';
+  import { useTableInfo, useViewInfo } from '../utility/metadataLoaders';
+
+  import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
+  import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
+  import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
+  import PerspectiveColumns from './PerspectiveColumns.svelte';
+  import PerspectiveCore from './PerspectiveCore.svelte';
+
+  export let conid;
+  export let database;
+  export let schemaName;
+  export let pureName;
+
+  let managerSize;
+
+  $: if (managerSize) setLocalStorage('perspectiveManagerWidth', managerSize);
+
+  function getInitialManagerSize() {
+    const width = getLocalStorage('perspectiveManagerWidth');
+    if (_.isNumber(width) && width > 30 && width < 500) {
+      return `${width}px`;
+    }
+    return '300px';
+  }
+
+  const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
+  const viewInfo = useViewInfo({ conid, database, schemaName, pureName });
+
+  $: console.log('tableInfo', $tableInfo);
+  $: console.log('viewInfo', $viewInfo);
+</script>
+
+<HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize}>
+  <div class="left" slot="1">
+    <WidgetColumnBar>
+      <WidgetColumnBarItem title="Columns" name="columns" height="45%">
+        <PerspectiveColumns />
+      </WidgetColumnBarItem>
+    </WidgetColumnBar>
+  </div>
+
+  <svelte:fragment slot="2">
+    <PerspectiveCore />
+  </svelte:fragment>
+</HorizontalSplitter>
+
+<style>
+  .left {
+    display: flex;
+    flex: 1;
+    background-color: var(--theme-bg-0);
+  }
+</style>

packages/web/src/tabs/PerspectiveTab.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import PerspectiveView from '../perspectives/PerspectiveView.svelte';
+
+  export let tabid;
+  export let conid;
+  export let database;
+  export let schemaName;
+  export let pureName;
+</script>
+
+<PerspectiveView {conid} {database} {schemaName} {pureName} />

packages/web/src/tabs/index.js

@@ -25,6 +25,7 @@ import * as DbKeyDetailTab from './DbKeyDetailTab.svelte';
 import * as QueryDataTab from './QueryDataTab.svelte';
 import * as ConnectionTab from './ConnectionTab.svelte';
 import * as MapTab from './MapTab.svelte';
+import * as PerspectiveTab from './PerspectiveTab.svelte';
 
 export default {
   TableDataTab,
@@ -54,4 +55,5 @@ export default {
   QueryDataTab,
   ConnectionTab,
   MapTab,
+  PerspectiveTab,
 };