perspective filter menu

packages/web/src/perspectives/PerspectiveDesigner.svelte

@@ -11,7 +11,12 @@
 
   import Designer from '../designer/Designer.svelte';
   import QueryDesignerReference from '../designer/QueryDesignerReference.svelte';
-  import { addToPerspectiveSort, clearPerspectiveSort, setPerspectiveSort } from './perspectiveMenu';
+  import {
+    addToPerspectiveFilter,
+    addToPerspectiveSort,
+    clearPerspectiveSort,
+    setPerspectiveSort,
+  } from './perspectiveMenu';
 
   export let config: PerspectiveConfig;
   export let dbInfos: MultipleDatabaseInfo;
@@ -153,6 +158,11 @@
           text: 'Clear sort criteria',
           onClick: () => onChange(cfg => clearPerspectiveSort(cfg, designerId)),
         },
+        { divider: true },
+        {
+          text: 'Add to filter',
+          onClick: () => onChange(cfg => addToPerspectiveFilter(cfg, designerId, column.columnName)),
+        },
       ];
     },
     createReferenceText: reference => (reference.isAutoGenerated ? 'FK' : 'Custom'),
@@ -195,6 +205,9 @@
       const orderIndex = sort.length > 1 ? _.findIndex(sort, x => x.columnName == columnName) : -1;
       return { order, orderIndex };
     },
+    isColumnFiltered: (designerId, columnName) => {
+      return !!config.nodes.find(x => x.designerId == designerId)?.filters?.[columnName];
+    },
   }}
   referenceComponent={QueryDesignerReference}
   value={createDesignerModel(config, dbInfos)}

packages/web/src/perspectives/PerspectiveNodeRow.svelte

@@ -74,6 +74,10 @@
   <span>{node.title}</span>
 
   <SortOrderIcon order={node.sortOrder} orderIndex={node.sortOrderIndex} />
+  
+  {#if node.getFilter()}
+    <FontIcon icon="img filter" />
+  {/if}
 </div>
 
 <style>

packages/web/src/perspectives/perspectiveMenu.ts

@@ -64,6 +64,28 @@ export function clearPerspectiveSort(cfg: PerspectiveConfig, designerId: string)
   };
 }
 
+export function addToPerspectiveFilter(
+  cfg: PerspectiveConfig,
+  designerId: string,
+  columnName: string,
+  filterValue: string = ''
+) {
+  return {
+    ...cfg,
+    nodes: cfg.nodes.map(n =>
+      n.designerId == designerId
+        ? {
+            ...n,
+            filters: {
+              ...n.filters,
+              [columnName]: filterValue,
+            },
+          }
+        : n
+    ),
+  };
+}
+
 export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
   const { node, conid, database, root, config, setConfig } = props;
   const customJoin = node.customJoinConfig;
@@ -120,21 +142,7 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
 
     filterInfo && {
       text: 'Add to filter',
-      onClick: () =>
-        setConfig(cfg => ({
-          ...cfg,
-          nodes: cfg.nodes.map(n =>
-            n.designerId == parentDesignerId
-              ? {
-                  ...n,
-                  filters: {
-                    ...n.filters,
-                    [columnName]: '',
-                  },
-                }
-              : n
-          ),
-        })),
+      onClick: () => setConfig(cfg => addToPerspectiveFilter(cfg, parentDesignerId, columnName)),
 
       // setConfig(cfg => ({
       //   ...cfg,