JSON filters view

packages/web/src/jsonview/JsonViewFilterColumn.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import DataFilterControl from '../datagrid/DataFilterControl.svelte';
+
+  import ColumnLabel from '../elements/ColumnLabel.svelte';
+  import InlineButton from '../elements/InlineButton.svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let uniqueName;
+  export let display;
+  export let filters;
+</script>
+
+<div class="m-1">
+  <div class="space-between">
+    <ColumnLabel columnName={uniqueName} />
+    <InlineButton
+      square
+      on:click={() => {
+        display.removeFilter(uniqueName);
+      }}
+    >
+      <FontIcon icon="icon delete" />
+    </InlineButton>
+  </div>
+  <DataFilterControl
+    filterType="mongo"
+    filter={filters[uniqueName]}
+    setFilter={value => display.setFilter(uniqueName, value)}
+  />
+</div>

packages/web/src/jsonview/JsonViewFilters.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import _ from 'lodash';
+
+  import ManagerInnerContainer from '../elements/ManagerInnerContainer.svelte';
+  import JsonViewFilterColumn from './JsonViewFilterColumn.svelte';
+
+  export let managerSize;
+  export let display;
+
+  $: filters = display?.config?.filters;
+
+  $: allFilterNames = _.keys(filters || {});
+</script>
+
+<ManagerInnerContainer width={managerSize}>
+  {#each allFilterNames as uniqueName}
+    <JsonViewFilterColumn {uniqueName} {display} {filters} />
+  {/each}
+</ManagerInnerContainer>