perspective column filter

packages/web/src/elements/SearchInput.svelte

@@ -36,6 +36,7 @@
   input {
     flex: 1;
     min-width: 10px;
+    min-height: 22px;
     width: 10px;
     border: none;
   }

packages/web/src/perspectives/PerspectiveTree.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
-  import { ChangeConfigFunc, ChangePerspectiveConfigFunc, GridConfig, PerspectiveConfig } from 'dbgate-datalib';
+  import {
+    ChangeConfigFunc,
+    ChangePerspectiveConfigFunc,
+    GridConfig,
+    PerspectiveConfig,
+    PerspectiveTreeNode,
+  } from 'dbgate-datalib';
+  import { filterName } from 'dbgate-tools';
 
   import PerspectiveNodeRow from './PerspectiveNodeRow.svelte';
 
@@ -8,23 +15,28 @@
   export let setConfig: ChangePerspectiveConfigFunc;
   export let conid;
   export let database;
+  export let filter;
 
-  function processFlatColumns(res, columns) {
+  function getFlatColumns(node: PerspectiveTreeNode, filter: string) {
-    for (const col of columns) {
+    const res = [];
-      res.push(col);
+    for (const col of node?.childNodes) {
-      if (col.isExpanded) {
+      if (filterName(filter, col.title)) {
-        processFlatColumns(res, col.childNodes);
+        res.push(col);
+        if (col.isExpanded) {
+          res.push(...getFlatColumns(col, filter));
+        }
+      } else if (col.isExpanded) {
+        const children = getFlatColumns(col, filter);
+        if (children.length > 0) {
+          res.push(col);
+          res.push(...children);
+        }
       }
     }
-  }
-
-  function getFlatColumns(root) {
-    const res = [];
-    processFlatColumns(res, root?.childNodes || []);
     return res;
   }
 </script>
 
-{#each getFlatColumns(root) as node}
+{#each getFlatColumns(root, filter) as node}
   <PerspectiveNodeRow {node} {config} {setConfig} {root} {conid} {database} />
 {/each}

packages/web/src/perspectives/PerspectiveView.svelte

@@ -51,6 +51,9 @@
   import CustomJoinModal from './CustomJoinModal.svelte';
   import JsonViewFilters from '../jsonview/JsonViewFilters.svelte';
   import PerspectiveFilters from './PerspectiveFilters.svelte';
+  import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
+  import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
 
   const dbg = debug('dbgate:PerspectiveView');
 
@@ -67,7 +70,7 @@
   export let cache;
 
   let managerSize;
-  let nextCacheRef = createRef(null);
+  let filter;
 
   export const activator = createActivator('PerspectiveView', true);
 
@@ -111,9 +114,14 @@
   <div class="left" slot="1">
     <WidgetColumnBar>
       <WidgetColumnBarItem title="Choose data" name="perspectiveTree" height={'70%'}>
+        <SearchBoxWrapper>
+          <SearchInput placeholder="Search column or table" bind:value={filter} />
+          <CloseSearchButton bind:filter />
+        </SearchBoxWrapper>
+
         <ManagerInnerContainer width={managerSize}>
           {#if root}
-            <PerspectiveTree {root} {config} {setConfig} {conid} {database} />
+            <PerspectiveTree {root} {config} {setConfig} {conid} {database} {filter} />
           {/if}
         </ManagerInnerContainer>
       </WidgetColumnBarItem>