datagrid: list of active filters in left column

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>