connect filterbar to persistence

vuu-ui/packages/vuu-data-react/src/hooks/useTypeaheadSuggestions.ts

@@ -30,32 +30,20 @@ export const getTypeaheadParams = (
 // const containSpace = (text: string) => text.indexOf(" ") !== -1;
 // const replaceSpace = (text: string) => text.replace(/\s/g, SPECIAL_SPACE);
 
-export const useTypeaheadSuggestions = () => {
-  const getTypeaheadSuggestions: SuggestionFetcher = useCallback(
-    async (params: TypeaheadParams) => {
-      const rpcMessage =
-        params.length === 2
-          ? ({
-              method: "getUniqueFieldValues",
-              params,
-              ...TYPEAHEAD_MESSAGE_CONSTANTS,
-            } as ClientToServerGetUniqueValues)
-          : ({
-              method: "getUniqueFieldValuesStartingWith",
-              params,
-              ...TYPEAHEAD_MESSAGE_CONSTANTS,
-            } as ClientToServerGetUniqueValuesStartingWith);
-
-      const suggestions = await makeRpcCall<string[]>(rpcMessage);
-
-      // TODO replacing space with underscores like this is not being correctly handled elsewhere
-      return suggestions;
-      // return suggestions.some(containSpace)
-      //   ? suggestions.map(replaceSpace)
-      //   : suggestions;
-    },
-    []
-  );
-
-  return getTypeaheadSuggestions;
-};
+export const useTypeaheadSuggestions = () =>
+  useCallback<SuggestionFetcher>(async (params: TypeaheadParams) => {
+    const rpcMessage =
+      params.length === 2
+        ? ({
+            method: "getUniqueFieldValues",
+            params,
+            ...TYPEAHEAD_MESSAGE_CONSTANTS,
+          } as ClientToServerGetUniqueValues)
+        : ({
+            method: "getUniqueFieldValuesStartingWith",
+            params,
+            ...TYPEAHEAD_MESSAGE_CONSTANTS,
+          } as ClientToServerGetUniqueValuesStartingWith);
+
+    return makeRpcCall<string[]>(rpcMessage);
+  }, []);

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

@@ -110,6 +110,10 @@ export class RemoteDataSource
       visualLink: visualLink || this.#config.visualLink,
     };
 
+    console.log(`1)`, {
+      config: this.#config,
+    });
+
     this.#title = title;
     this.rangeRequest = this.throttleRangeRequest;
   }
@@ -158,6 +162,14 @@ export class RemoteDataSource
 
     const { bufferSize } = this;
 
+    console.log(`subscribe`, {
+      config: this.#config,
+    });
+
+    console.log(`3)`, {
+      config: this.#config,
+    });
+
     this.server?.subscribe(
       {
         ...this.#config,
@@ -388,6 +400,9 @@ export class RemoteDataSource
   }
 
   set config(config: DataSourceConfig) {
+    console.log(`2)`, {
+      config,
+    });
     if (configChanged(this.#config, config)) {
       if (config) {
         const newConfig: DataSourceConfig =
@@ -437,6 +452,7 @@ export class RemoteDataSource
         this.server.send(message);
       }
     }
+    console.log("set columns");
     this.emit("config", this.#config);
   }
 

vuu-ui/packages/vuu-filters/src/filter-bar/FilterBar.tsx

@@ -1,7 +1,7 @@
 import { TableSchema } from "@finos/vuu-data";
 import { DataSourceFilter } from "@finos/vuu-data-types";
 import { Filter } from "@finos/vuu-filter-types";
-import { Toolbar } from "@finos/vuu-layout";
+import { ActiveItemChangeHandler, Toolbar } from "@finos/vuu-layout";
 import { Prompt } from "@finos/vuu-popups";
 import { Button } from "@salt-ds/core";
 import cx from "classnames";
@@ -19,6 +19,7 @@ export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
   activeFilterIndex?: number[];
   filters: Filter[];
   onApplyFilter: (filter: DataSourceFilter) => void;
+  onChangeActiveFilterIndex: ActiveItemChangeHandler;
   onFiltersChanged?: (filters: Filter[]) => void;
   showMenu?: boolean;
   tableSchema: TableSchema;
@@ -32,6 +33,7 @@ export const FilterBar = ({
   className: classNameProp,
   filters: filtersProp,
   onApplyFilter,
+  onChangeActiveFilterIndex: onChangeActiveFilterIndexProp,
   onFiltersChanged,
   showMenu: showMenuProp = false,
   tableSchema,
@@ -58,6 +60,7 @@ export const FilterBar = ({
     containerRef: rootRef,
     filters: filtersProp,
     onApplyFilter,
+    onChangeActiveFilterIndex: onChangeActiveFilterIndexProp,
     onFiltersChanged,
     showMenu: showMenuProp,
   });

vuu-ui/packages/vuu-filters/src/filter-bar/useFilterBar.ts

@@ -33,6 +33,7 @@ export interface FilterBarHookProps
     | "activeFilterIndex"
     | "filters"
     | "onApplyFilter"
+    | "onChangeActiveFilterIndex"
     | "onFiltersChanged"
     | "showMenu"
   > {
@@ -46,6 +47,7 @@ export const useFilterBar = ({
   containerRef,
   filters: filtersProp,
   onApplyFilter,
+  onChangeActiveFilterIndex: onChangeActiveFilterIndexProp,
   onFiltersChanged,
   showMenu: showMenuProp,
 }: FilterBarHookProps) => {
@@ -308,8 +310,9 @@ export const useFilterBar = ({
   const handleChangeActiveFilterIndex = useCallback<ActiveItemChangeHandler>(
     (itemIndex) => {
       setActiveFilterIndex(itemIndex);
+      onChangeActiveFilterIndexProp?.(itemIndex);
     },
-    []
+    [onChangeActiveFilterIndexProp]
   );
 
   const handleClickAddFilter = useCallback(() => {
@@ -327,7 +330,6 @@ export const useFilterBar = ({
   };
 
   const handleChangeFilterClause = (filterClause: Partial<FilterClause>) => {
-    console.log({ filterClause });
     if (filterClause !== undefined) {
       setEditFilter((filter) => replaceClause(filter, filterClause));
       setShowMenu(true);

vuu-ui/packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx

@@ -75,7 +75,6 @@ export const ExpandoCombobox = forwardRef(function ExpandoCombobox<
   );
 
   const handleSetSelectedText = useCallback((text: string) => {
-    console.log(`handleSetSelectedText ${text}`);
     setText(text);
   }, []);
 
@@ -132,7 +131,7 @@ export const ExpandoCombobox = forwardRef(function ExpandoCombobox<
     minWidth: 102,
   };
 
-  return (
+  return props.source?.length === 0 ? null : (
     <div
       className={cx(classBase, classNameProp)}
       data-text={text}

vuu-ui/packages/vuu-filters/src/filter-clause/TextInput.tsx

@@ -82,7 +82,7 @@ export const TextInput = forwardRef(function TextInput(
           setTypeaheadValues(suggestions);
         })
         .catch((err) => {
-          console.error("Error getting suggsetions", err);
+          console.error("Error getting suggestions", err);
         });
     }
   }, [table, column, valueInputValue, getSuggestions]);

vuu-ui/packages/vuu-filters/src/filter-pill/FilterPill.css

@@ -2,7 +2,7 @@
     align-items: center;
     background: var(--salt-taggable-background);
     border: solid 1px var(--salt-taggable-foreground);
-    border-radius: 26px;
+    border-radius: 24px;
     color: var(--vuu-color-gray-50);
     display: inline-flex;
     max-width: var(--vuuFilterPill-maxWidth, 200px);
@@ -13,7 +13,7 @@
 }
 
 .vuuFilterPill.vuuToolbarItem {
-    height: 26px;
+    height: 24px;
 }
 
 .vuuFilterPill[aria-selected="true"]{

vuu-ui/packages/vuu-table-extras/src/column-expression-input/ColumnExpressionInput.tsx

@@ -1,4 +1,4 @@
-import { FocusEventHandler, HTMLAttributes, memo, useCallback } from "react";
+import { HTMLAttributes, memo } from "react";
 import { ColumnDefinitionExpression } from "./column-language-parser";
 import {
   ExpressionSuggestionConsumer,

vuu-ui/packages/vuu-table-extras/src/column-expression-input/column-function-descriptors.ts

@@ -25,7 +25,7 @@ export const columnFunctionDescriptors: ColumnFunctionDescriptor[] = [
   {
     accepts: ["boolean"],
     description:
-      "Applies boolean and operator across supplied parameters to retuner a single boolean result",
+      "Applies boolean and operator across supplied parameters to returns a single boolean result",
     example: {
       expression: 'and(ccy="EUR",quantity=0)',
       result: "true | false",
@@ -124,6 +124,24 @@ export const columnFunctionDescriptors: ColumnFunctionDescriptor[] = [
     },
     type: "string",
   },
+  /**
+   * or
+   */
+  {
+    accepts: ["boolean"],
+    description:
+      "Applies boolean or operator across supplied parameters to returns a single boolean result",
+    example: {
+      expression: 'or(status="cancelled",quantity=0)',
+      result: "true | false",
+    },
+    name: "or",
+    params: {
+      description: "( boolean, [ boolean* ] )",
+    },
+    type: "boolean",
+  },
+
   /**
    * upper()
    */

vuu-ui/packages/vuu-table-extras/src/column-expression-input/column-language-parser/ColumnExpressionTreeWalker.ts

@@ -469,7 +469,9 @@ class ColumnExpression {
           : new RelationalExpressionImpl();
         this.addExpression(condition);
       }
-    } else {
+    } /*else if (isCallExpression(this.#expression)) {
+      this.addExpression(new RelationalExpressionImpl());
+    } */ else {
       console.error("setCondition called unexpectedly");
     }
   }
@@ -586,6 +588,7 @@ export const walkTree = (tree: Tree, source: string) => {
   const cursor = tree.cursor();
   do {
     const { name, from, to } = cursor;
+    console.log(`walkTree ${name}`);
     switch (name) {
       case "AndCondition":
         columnExpression.setCondition("and");
@@ -596,6 +599,7 @@ export const walkTree = (tree: Tree, source: string) => {
         break;
 
       case "RelationalExpression":
+        // TODO this breaks when the relationalexpression is an argument to a CallExpression
         columnExpression.setCondition();
         break;
 

vuu-ui/packages/vuu-table-extras/src/column-expression-input/column-language-parser/grammar/column.grammar

@@ -1,10 +1,10 @@
 
 @precedence {
-  call,
   or @left,
   and @left
   times @left,
   plus @left
+  op @left
 }
 
 @top ColumnDefinitionExpression { expression }
@@ -18,7 +18,8 @@ expression {
   ParenthesizedExpression |
   ArithmeticExpression |
   ConditionalExpression |
-  CallExpression
+  RelationalExpression |
+  CallExpression 
 }
 
 ParenthesizedExpression { OpenBrace expression CloseBrace }
@@ -44,7 +45,7 @@ AndCondition {  booleanCondition !and "and" booleanCondition }
 OrCondition { booleanCondition !or "or" booleanCondition }
 
 RelationalExpression {
-  expression RelationalOperator expression
+  expression !op RelationalOperator expression
 }
 
 RelationalOperator {

vuu-ui/packages/vuu-table-extras/test/ColumnExpressionTreeWalker.test.ts

@@ -386,6 +386,20 @@ describe("Column Expression treeWalker", () => {
       });
     });
   });
+
+  it.only("parses and expressions with boolean conditions", () => {
+    const str = 'and(bid > 100, currency="EUR")';
+    const result = parser.parse(str);
+    const expression = walkTree(result, str);
+    expect(expression).toEqual({
+      type: "callExpression",
+      functionName: "and",
+      arguments: [
+        { type: "relationalExpression" },
+        { type: "relationalExpression" },
+      ],
+    });
+  });
 });
 
 // expect(evaluateExpression('if(side="Sell","N","Y")')).toEqual(Ok);

vuu-ui/packages/vuu-table-extras/test/column-parser.test.ts

@@ -74,6 +74,14 @@ describe("ColumnExpressionParser", () => {
     ).toEqual(Ok);
   });
 
+  it("parses and function", () => {
+    expect(evaluateExpression('and(price > 100, ccy="EUR")')).toEqual(Ok);
+  });
+
+  it("parses or function", () => {
+    expect(evaluateExpression('or(price > 100, ccy="EUR")')).toEqual(Ok);
+  });
+
   it("parses conditional expressions", () => {
     expect(evaluateExpression("if(price > 100, true, false)")).toEqual(Ok);
     expect(evaluateExpression('if(side="Sell","N","Y")')).toEqual(Ok);

vuu-ui/packages/vuu-table/src/table-next/useTableNext.ts

@@ -187,7 +187,7 @@ export const useTable = ({
         //   tableSchema,
         // });
       } else {
-        console.log("usbscription message with no schema");
+        console.log("subscription message with no schema");
       }
     },
     []

vuu-ui/packages/vuu-utils/src/filter-utils.ts

@@ -67,11 +67,14 @@ export function isMultiClauseFilter(
 const filterValue = (value: string | number | boolean) =>
   typeof value === "string" ? `"${value}"` : value;
 
+const quotedStrings = (value: string | number | boolean) =>
+  typeof value === "string" ? `"${value}"` : value;
+
 export const filterAsQuery = (f: Filter): string => {
   if (isMultiClauseFilter(f)) {
     return f.filters.map((filter) => filterAsQuery(filter)).join(` ${f.op} `);
   } else if (isMultiValueFilter(f)) {
-    return `${f.column} ${f.op} [${f.values.join(",")}]`;
+    return `${f.column} ${f.op} [${f.values.map(quotedStrings).join(",")}]`;
   } else {
     return `${f.column} ${f.op} ${filterValue(f.value)}`;
   }