datagrid: list of active filters in left column

packages/datalib/src/GridDisplay.ts

@@ -127,6 +127,10 @@ export abstract class GridDisplay {
     return this.getColumns(null).filter(col => col.isChecked || col.uniquePath.length == 1);
   }
 
+  findColumn(uniqueName: string) {
+    return this.getColumns(null).find(x => x.uniqueName == uniqueName);
+  }
+
   getFkTarget(column: DisplayColumn): TableInfo {
     return null;
   }

packages/web/src/datagrid/DataGrid.svelte

@@ -176,10 +176,20 @@
       <WidgetColumnBarItem
         title="Filters"
         name="jsonFilters"
-        height="30%"
+        height={'30%'}
         skip={!isDynamicStructure || !display?.filterable}
       >
-        <JsonViewFilters {...$$props} {managerSize} />
+        <JsonViewFilters {...$$props} {managerSize} {isDynamicStructure} />
+      </WidgetColumnBarItem>
+
+      <WidgetColumnBarItem
+        title="Filters"
+        name="tableFilters"
+        height={'15%'}
+        skip={!display?.filterable || isDynamicStructure || display.filterCount == 0}
+        collapsed={isDetailView}
+      >
+        <JsonViewFilters {...$$props} {managerSize} {isDynamicStructure} />
       </WidgetColumnBarItem>
 
       <WidgetColumnBarItem

packages/web/src/jsonview/JsonViewFilterColumn.svelte

@@ -4,10 +4,21 @@
   import ColumnLabel from '../elements/ColumnLabel.svelte';
   import InlineButton from '../elements/InlineButton.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
+  import { getFilterType } from 'dbgate-filterparser';
 
   export let uniqueName;
   export let display;
   export let filters;
+  export let isDynamicStructure;
+
+  function computeFilterType(isDynamicStructure, display, uniqueName) {
+    if (isDynamicStructure) return 'mongo';
+    const col = display.findColumn(uniqueName);
+    if (col) {
+      return col.filterType || getFilterType(col.dataType);
+    }
+    return 'string';
+  }
 </script>
 
 <div class="m-1">
@@ -15,15 +26,16 @@
     <ColumnLabel columnName={uniqueName} />
     <InlineButton
       square
+      narrow
       on:click={() => {
         display.removeFilter(uniqueName);
       }}
     >
-      <FontIcon icon="icon delete" />
+      <FontIcon icon="icon close" />
     </InlineButton>
   </div>
   <DataFilterControl
-    filterType="mongo"
+    filterType={computeFilterType(isDynamicStructure, display, uniqueName)}
     filter={filters[uniqueName]}
     setFilter={value => display.setFilter(uniqueName, value)}
   />

packages/web/src/jsonview/JsonViewFilters.svelte

@@ -6,6 +6,7 @@
 
   export let managerSize;
   export let display;
+  export let isDynamicStructure;
 
   $: filters = display?.config?.filters;
 
@@ -14,6 +15,6 @@
 
 <ManagerInnerContainer width={managerSize}>
   {#each allFilterNames as uniqueName}
-    <JsonViewFilterColumn {uniqueName} {display} {filters} />
+    <JsonViewFilterColumn {uniqueName} {display} {filters} {isDynamicStructure} />
   {/each}
 </ManagerInnerContainer>