add filter support to datatable (#439)

Author: heswell

vuu-ui/packages/vuu-data/src/data-source.ts

@@ -75,8 +75,7 @@ export interface DataSourceColumnsMessage extends MessageWithClientViewportId {
 }
 export interface DataSourceFilterMessage extends MessageWithClientViewportId {
   type: "filter";
-  filter: Filter;
-  filterQuery: string;
+  filter: DataSourceFilter;
 }
 export interface DataSourceGroupByMessage extends MessageWithClientViewportId {
   type: "groupBy";

vuu-ui/packages/vuu-datagrid-types/index.d.ts

@@ -1,3 +1,4 @@
+import { Filter } from "@finos/vuu-filter-types";
 import {
   VuuAggType,
   VuuColumnDataType,
@@ -56,6 +57,7 @@ export interface ColumnDescriptor {
 export interface KeyedColumnDescriptor extends ColumnDescriptor {
   align?: "left" | "right";
   className?: string;
+  filter?: Filter;
   flex?: number;
   heading?: [...string[]];
   isGroup?: boolean;

vuu-ui/packages/vuu-datatable/package.json

@@ -19,6 +19,7 @@
     "@salt-ds/core": "1.0.0",
     "@salt-ds/icons": "1.0.0",
     "@heswell/salt-lab": "1.0.0-alpha.0",
+    "@finos/vuu-filters": "0.0.26",
     "@finos/vuu-utils": "0.0.26",
     "classnames": "^2.2.6",
     "react": "^17.0.2",

vuu-ui/packages/vuu-datatable/src/TableHeaderCell.css

@@ -25,6 +25,10 @@
     padding: 0 0 0 3px;
   }
 
+  .vuuTable-headerCell-inner:has(.vuuFilterIndicator){
+    padding-left: 0;
+  }
+
   .vuuTable-headerCell-label {
     align-items: center;
     justify-content: var(--cell-align);

vuu-ui/packages/vuu-datatable/src/TableHeaderCell.tsx

@@ -8,6 +8,7 @@ import { TableColumnResizeHandler } from "./dataTableTypes";
 
 import "./TableHeaderCell.css";
 import { useContextMenu } from "@finos/vuu-popups";
+import { FilterIndicator } from "./filter-indicator";
 
 const classBase = "vuuTable-headerCell";
 
@@ -73,6 +74,7 @@ export const TableHeaderCell = ({
       ref={rootRef}
     >
       <div className={`${classBase}-inner`}>
+        <FilterIndicator column={column} />
         <div className={`${classBase}-label`}>{column.label}</div>
         <SortIndicator sorted={column.sorted} />
         {column.resizeable !== false ? (

vuu-ui/packages/vuu-datatable/src/filter-indicator.css

@@ -0,0 +1,15 @@
+.vuuFilterIndicator {
+  --menu-icon-size: 12px;
+  --menu-item-icon-color: black;
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex: 0 0 18px;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.vuuFilterIndicator + .vuuTable-headerCell-inner {
+  padding-left: 0;
+}

vuu-ui/packages/vuu-datatable/src/filter-indicator.tsx

@@ -0,0 +1,43 @@
+import { KeyedColumnDescriptor } from "@finos/vuu-datagrid-types";
+import { Filter } from "@finos/vuu-filter-types";
+import { useContextMenu } from "@finos/vuu-popups";
+import cx from "classnames";
+import { HTMLAttributes, useCallback } from "react";
+
+import "./filter-indicator.css";
+
+export const Direction = {
+  ASC: "asc",
+  DSC: "dsc",
+};
+
+export interface FilterIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  column: KeyedColumnDescriptor;
+  filter?: Filter;
+}
+
+export const FilterIndicator = ({ column, filter }: FilterIndicatorProps) => {
+  //TODO handle this at header level
+  const showContextMenu = useContextMenu();
+
+  const handleClick = useCallback(
+    (evt) => {
+      // if we do this through keyboard, need to get co-ords
+      evt.stopPropagation();
+      showContextMenu(evt, "filter", { column, filter });
+    },
+    [column, filter, showContextMenu]
+  );
+
+  if (!column.filter) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cx("vuuFilterIndicator")}
+      data-icon="filter"
+      onClick={handleClick}
+    />
+  );
+};

vuu-ui/packages/vuu-datatable/src/useDataTable.ts

@@ -131,6 +131,11 @@ export const useDataTable = ({
             type: "tableConfig",
             groupBy: message.groupBy,
           });
+        case "filter":
+          return dispatchColumnAction({
+            type: "tableConfig",
+            filter: message.filter,
+          });
         case "sort":
           return dispatchColumnAction({
             type: "tableConfig",

vuu-ui/packages/vuu-datatable/src/useTableModel.ts

@@ -10,12 +10,16 @@ import {
   metadataKeys,
 } from "@finos/vuu-utils";
 
+// TOSO eliminate this dependency
+import { extractFilterForColumn } from "@finos/vuu-filters";
+
 import { Reducer, useReducer } from "react";
 import {
   VuuColumnDataType,
   VuuGroupBy,
   VuuSort,
 } from "@finos/vuu-protocol-types";
+import { DataSourceFilter } from "@finos/vuu-data";
 
 const DEFAULT_COLUMN_WIDTH = 100;
 const KEY_OFFSET = metadataKeys.count;
@@ -87,6 +91,7 @@ export interface ColumnActionUpdateProp {
 
 export interface ColumnActionTableConfig {
   type: "tableConfig";
+  filter?: DataSourceFilter;
   groupBy?: VuuGroupBy;
   sort?: VuuSort;
 }
@@ -263,9 +268,10 @@ function updateColumnProp(
 
 function updateTableConfig(
   state: GridModel,
-  { groupBy, sort }: ColumnActionTableConfig
+  { filter, groupBy, sort }: ColumnActionTableConfig
 ) {
   const hasGroupBy = groupBy !== undefined;
+  const hasFilter = typeof filter?.filter === "string";
   const hasSort = sort && sort.sortDefs.length > 0;
 
   let result = state;
@@ -284,6 +290,13 @@ function updateTableConfig(
     };
   }
 
+  if (hasFilter) {
+    result = {
+      ...state,
+      columns: applyFilterToColumns(state.columns, filter),
+    };
+  }
+
   return result;
 }
 
@@ -294,6 +307,7 @@ function replaceColumn(
   return state.map((col) => (col.name === column.name ? column : col));
 }
 
+//TOSDO move these functions to utils
 const applyGroupByToColumns = (
   columns: KeyedColumnDescriptor[],
   groupBy: VuuGroupBy
@@ -330,6 +344,28 @@ const applySortToColumns = (colunms: KeyedColumnDescriptor[], sort: VuuSort) =>
     }
   });
 
+const applyFilterToColumns = (
+  columns: KeyedColumnDescriptor[],
+  { filterStruct }: DataSourceFilter
+) =>
+  columns.map((column) => {
+    // TODO this gives us a dependency on vuu-filters
+    const filter = extractFilterForColumn(filterStruct, column.name);
+    if (filter !== undefined) {
+      return {
+        ...column,
+        filter,
+      };
+    } else if (column.filter) {
+      return {
+        ...column,
+        filter: undefined,
+      };
+    } else {
+      return column;
+    }
+  });
+
 const getSortType = (column: ColumnDescriptor, { sortDefs }: VuuSort) => {
   const sortDef = sortDefs.find((sortCol) => sortCol.column === column.name);
   if (sortDef) {

vuu-ui/packages/vuu-filters/src/filter-input/FilterInput.tsx

@@ -22,6 +22,7 @@ export const FilterInput = ({
   existingFilter,
   onSubmitFilter,
   suggestionProvider,
+  ...props
 }: FilterInputProps) => {
   const { editorRef, clearInput } = useCodeMirrorEditor({
     existingFilter,
@@ -30,7 +31,7 @@ export const FilterInput = ({
   });
 
   return (
-    <div className={classBase}>
+    <div {...props} className={classBase}>
       <Button className={`${classBase}-FilterButton`} data-icon="filter" />
       <div className={`${classBase}-Editor`} ref={editorRef} />
       <Button