temp root in perspectives

packages/web/src/designer/DesignerTable.svelte

@@ -241,6 +241,7 @@
     use:moveDrag={settings?.canSelectColumns ? [handleMoveStart, handleMove, handleMoveEnd] : null}
     use:contextMenu={settings?.canSelectColumns ? createMenu : '__no_menu'}
     style={getTableColorStyle($currentThemeDefinition, table)}
+    on:click={settings?.onClickTableHeader ? () => settings?.onClickTableHeader(designerId) : null}
   >
     <div>
       {#if settings?.canCheckTables}

packages/web/src/perspectives/PerspectiveDesigner.svelte

@@ -25,6 +25,8 @@
 
   export let setConfig;
 
+  export let onClickTableHeader = null;
+
   function createDesignerModel(config: PerspectiveConfig, dbInfos: MultipleDatabaseInfo) {
     return {
       ...config,
@@ -272,6 +274,7 @@
 
       return false;
     },
+    onClickTableHeader,
   }}
   referenceComponent={QueryDesignerReference}
   value={createDesignerModel(config, dbInfos)}

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -14,6 +14,7 @@
   export let database;
   export let node: PerspectiveTreeNode;
   export let root: PerspectiveTreeNode;
+  export let tempRoot: PerspectiveTreeNode;
   export let config: PerspectiveConfig;
   export let setConfig: ChangePerspectiveConfigFunc;
 
@@ -25,12 +26,13 @@
       root,
       config,
       setConfig,
+      designerId: node?.designerId,
     });
   }
 </script>
 
 <div class="row" use:contextMenu={createMenu}>
-  <span class="expandColumnIcon" style={`margin-right: ${5 + node.level * 10}px`}>
+  <span class="expandColumnIcon" style={`margin-right: ${5 + (node.level - (tempRoot?.level ?? 0)) * 10}px`}>
     <FontIcon
       icon={node.isExpandable ? plusExpandIcon(node.isExpanded) : 'icon invisible-box'}
       on:click={() => {
@@ -74,7 +76,7 @@
   <span>{node.title}</span>
 
   <SortOrderIcon order={node.sortOrder} orderIndex={node.sortOrderIndex} />
-  
+
   {#if node.getFilter()}
     <FontIcon icon="img filter" />
   {/if}

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -181,6 +181,7 @@
             node: column.dataNode,
             root,
             setConfig,
+            designerId: null,
           })
         );
       td.classList.add('highlight');

packages/web/src/perspectives/PerspectiveTree.svelte

@@ -10,7 +10,8 @@
 
   import PerspectiveNodeRow from './PerspectiveNodeRow.svelte';
 
-  export let root;
+  export let root: PerspectiveTreeNode;
+  export let tempRoot: PerspectiveTreeNode;
   export let config: PerspectiveConfig;
   export let setConfig: ChangePerspectiveConfigFunc;
   export let conid;
@@ -37,6 +38,6 @@
   }
 </script>
 
-{#each getFlatColumns(root, filter) as node}
-  <PerspectiveNodeRow {node} {config} {setConfig} {root} {conid} {database} />
+{#each getFlatColumns(tempRoot ?? root, filter) as node}
+  <PerspectiveNodeRow {node} {config} {setConfig} {root} {tempRoot} {conid} {database} />
 {/each}

packages/web/src/perspectives/PerspectiveView.svelte

@@ -31,6 +31,7 @@
     PerspectiveConfig,
     PerspectiveDataProvider,
     PerspectiveTableNode,
+    PerspectiveTreeNode,
     processPerspectiveDefaultColunns,
     shouldProcessPerspectiveDefaultColunns,
   } from 'dbgate-datalib';
@@ -60,6 +61,10 @@
   import { useMultipleDatabaseInfo } from '../utility/useMultipleDatabaseInfo';
   import VerticalSplitter from '../elements/VerticalSplitter.svelte';
   import PerspectiveDesigner from './PerspectiveDesigner.svelte';
+  import { tick } from 'svelte';
+  import { sleep } from '../utility/common';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import InlineButton from '../buttons/InlineButton.svelte';
 
   const dbg = debug('dbgate:PerspectiveView');
 
@@ -69,6 +74,9 @@
 
   export let config: PerspectiveConfig;
   export let setConfig: ChangePerspectiveConfigFunc;
+
+  let tempRootDesignerId: string = null;
+
   export let loadedCounts;
 
   export let cache;
@@ -140,6 +148,7 @@
           config.rootDesignerId
         )
       : null;
+  $: tempRoot = root?.findNodeByDesignerId(tempRootDesignerId);
 
   $: {
     if (shouldProcessPerspectiveDefaultColunns(config, $dbInfos, conid, database)) {
@@ -155,6 +164,20 @@
   <div class="left" slot="1">
     <WidgetColumnBar>
       <WidgetColumnBarItem title="Choose data" name="perspectiveTree" height={'70%'}>
+        {#if tempRoot && tempRoot != root}
+          <div class="temp-root">
+            <div>
+              <FontIcon icon="img table" />
+              {tempRoot.title}
+            </div>
+            <InlineButton
+              on:click={() => {
+                tempRootDesignerId = tempRoot?.parentNode?.designerId;
+              }}>Go up</InlineButton
+            >
+          </div>
+        {/if}
+
         <SearchBoxWrapper>
           <SearchInput placeholder="Search column or table" bind:value={filter} />
           <CloseSearchButton bind:filter />
@@ -162,7 +185,7 @@
 
         <ManagerInnerContainer width={managerSize}>
           {#if root}
-            <PerspectiveTree {root} {config} {setConfig} {conid} {database} {filter} />
+            <PerspectiveTree {root} {tempRoot} {config} {setConfig} {conid} {database} {filter} />
           {/if}
         </ManagerInnerContainer>
       </WidgetColumnBarItem>
@@ -176,7 +199,19 @@
   <svelte:fragment slot="2">
     <VerticalSplitter allowCollapseChild1 allowCollapseChild2>
       <svelte:fragment slot="1">
-        <PerspectiveDesigner {config} {conid} {database} {setConfig} dbInfos={$dbInfos} {root} />
+        <PerspectiveDesigner
+          {config}
+          {conid}
+          {database}
+          {setConfig}
+          dbInfos={$dbInfos}
+          {root}
+          onClickTableHeader={designerId => {
+            sleep(100).then(() => {
+              tempRootDesignerId = designerId;
+            });
+          }}
+        />
       </svelte:fragment>
       <svelte:fragment slot="2">
         <PerspectiveTable {root} {loadedCounts} {config} {setConfig} {conid} {database} />
@@ -191,4 +226,13 @@
     flex: 1;
     background-color: var(--theme-bg-0);
   }
+
+  .temp-root {
+    border: 1px solid var(--theme-border);
+    background-color: var(--theme-bg-1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: 2px;
+  }
 </style>