Filter ux fixes (#1078)

* UX fixes in FilterCLauseEditor

* Filterbar improvements

* add basic Filterbar tests for both mouse and keyboard

* add tooltips for filter pills

* tooltip style fix

* fix layout issues

* enab;e typeahead on TickingDataSource

* save renamed filter

* add first cut of filterbarmenu

vuu-ui/cypress.config.ts

@@ -14,6 +14,11 @@ const viteConfig: UserConfig = {
   build: {
     sourcemap: true,
   },
+  define: {
+    "process.env.NODE_DEBUG": false,
+    "process.env.LOCAL": true,
+    "process.env.LAYOUT_BASE_URL": `"http://127.0.0.1:8081/api"`,
+  },
   resolve: {
     alias: {
       "cypress/react18": reactVersion.startsWith("18")

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

@@ -44,6 +44,5 @@ export const useTypeaheadSuggestions = () =>
             params,
             ...TYPEAHEAD_MESSAGE_CONSTANTS,
           } as ClientToServerGetUniqueValuesStartingWith);
-
     return makeRpcCall<string[]>(rpcMessage);
   }, []);

vuu-ui/packages/vuu-data-test/src/TickingArrayDataSource.ts

@@ -19,6 +19,7 @@ import {
 } from "@finos/vuu-protocol-types";
 import { SelectionItem } from "@finos/vuu-table-types";
 import { metadataKeys } from "@finos/vuu-utils";
+import { makeSuggestions } from "./makeSuggestions";
 import { Table } from "./Table";
 
 export type RpcService = {
@@ -109,7 +110,6 @@ export class TickingArrayDataSource extends ArrayDataSource {
     columnName: string,
     value: VuuRowDataItemType
   ): Promise<true> {
-    console.log(`applyEdit ${columnName} ${value}`);
     const key = row[metadataKeys.KEY];
     this.#table?.update(key, columnName, value);
     return Promise.resolve(true);
@@ -160,4 +160,14 @@ export class TickingArrayDataSource extends ArrayDataSource {
     }
     return super.menuRpcCall(rpcRequest);
   }
+
+  getTypeaheadSuggestions(column: string, pattern?: string): Promise<string[]> {
+    if (this.#table) {
+      return makeSuggestions(this.#table, column, pattern);
+    } else {
+      throw Error(
+        "cannot call getTypeaheadSuggestions on TickingDataSOurce if table has not been provided"
+      );
+    }
+  }
 }

vuu-ui/packages/vuu-data-test/src/makeSuggestions.ts

@@ -20,6 +20,7 @@ const getUniqueValues = (table: Table, column: string, pattern = "") => {
         uniqueValues.push(value);
       }
     }
+    uniqueValues.sort();
     if (cachedEntry) {
       cachedEntry.set(column, uniqueValues);
     } else {
@@ -31,15 +32,28 @@ const getUniqueValues = (table: Table, column: string, pattern = "") => {
     : uniqueValues;
 };
 
+// export const makeSuggestions = (
+//   table: Table,
+//   column: string,
+//   pattern?: string
+// ) => {
+//   const uniqueValues = getUniqueValues(table, column, pattern);
+//   if (uniqueValues.length > 20) {
+//     return uniqueValues?.slice(0, 20).map((v) => v.toString());
+//   } else {
+//     return uniqueValues.map((v) => v.toString());
+//   }
+// };
 export const makeSuggestions = (
   table: Table,
   column: string,
   pattern?: string
-) => {
-  const uniqueValues = getUniqueValues(table, column, pattern);
-  if (uniqueValues.length > 20) {
-    return uniqueValues?.slice(0, 20).map((v) => v.toString());
-  } else {
-    return uniqueValues.map((v) => v.toString());
-  }
-};
+): Promise<string[]> =>
+  new Promise((resolve) => {
+    const uniqueValues = getUniqueValues(table, column, pattern);
+    const result =
+      uniqueValues.length > 20
+        ? uniqueValues?.slice(0, 20).map((v) => v.toString())
+        : uniqueValues.map((v) => v.toString());
+    setTimeout(() => resolve(result), 100);
+  });

vuu-ui/packages/vuu-data-test/src/simul/simul-module.ts

@@ -52,7 +52,7 @@ const createDataSource = (tableName: SimulTableName) => {
   });
 };
 
-const suggestionFetcher: SuggestionFetcher = async ([
+const suggestionFetcher: SuggestionFetcher = ([
   vuuTable,
   column,
   pattern,

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

@@ -320,7 +320,7 @@ export class ArrayDataSource
   }
 
   set config(config: DataSourceConfig) {
-    if (configChanged(this.#config, config)) {
+    if (this.applyConfig(config)) {
       if (config) {
         const originalConfig = this.#config;
         const newConfig: DataSourceConfig =
@@ -406,6 +406,25 @@ export class ArrayDataSource
     }
   }
 
+  applyConfig(config: DataSourceConfig) {
+    if (configChanged(this.#config, config)) {
+      if (config) {
+        const newConfig: DataSourceConfig =
+          config?.filter?.filter && config?.filter.filterStruct === undefined
+            ? {
+                ...config,
+                filter: {
+                  filter: config.filter.filter,
+                  filterStruct: parseFilter(config.filter.filter),
+                },
+              }
+            : config;
+        this.#config = withConfigDefaults(newConfig);
+        return true;
+      }
+    }
+  }
+
   get selectedRowsCount() {
     return this.#selectedRowsCount;
   }

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

@@ -514,9 +514,33 @@ export type DataSourceStatus =
   | "suspended"
   | "unsubscribed";
 
-export interface DataSource extends EventEmitter<DataSourceEvents> {
+export interface TypeaheadSuggestionProvider {
+  getTypeaheadSuggestions: (
+    columnName: string,
+    pattern?: string
+  ) => Promise<string[]>;
+}
+
+export const isTypeaheadSuggestionProvider = (
+  source: unknown
+): source is TypeaheadSuggestionProvider =>
+  typeof (source as TypeaheadSuggestionProvider)["getTypeaheadSuggestions"] ===
+  "function";
+
+export interface DataSource
+  extends EventEmitter<DataSourceEvents>,
+    Partial<TypeaheadSuggestionProvider> {
   aggregations: VuuAggregation[];
   applyEdit: DataSourceEditHandler;
+  /**
+   * set config without triggering config event. Use this method when initialising
+   * a dataSource that has been restored from session state. The dataSource will
+   * not yet be subscribed. Triggering the config event is unnecessary and might
+   * cause a React exception if the event were to cause a render.
+   * @param config DataSourceConfig
+   * @returns true if config has been applied (will not be if existig config is same)
+   */
+  applyConfig: (config: DataSourceConfig) => true | undefined;
   closeTreeNode: (key: string, cascade?: boolean) => void;
   columns: string[];
   config: DataSourceConfig;

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

@@ -437,6 +437,21 @@ export class RemoteDataSource
   }
 
   set config(config: DataSourceConfig) {
+    if (this.applyConfig(config)) {
+      if (this.#config && this.viewport && this.server) {
+        if (config) {
+          this.server?.send({
+            viewport: this.viewport,
+            type: "config",
+            config: this.#config,
+          });
+        }
+      }
+      this.emit("config", this.#config);
+    }
+  }
+
+  applyConfig(config: DataSourceConfig) {
     if (configChanged(this.#config, config)) {
       if (config) {
         const newConfig: DataSourceConfig =
@@ -449,19 +464,8 @@ export class RemoteDataSource
                 },
               }
             : config;
-
         this.#config = withConfigDefaults(newConfig);
-
-        if (this.#config && this.viewport && this.server) {
-          if (config) {
-            this.server?.send({
-              viewport: this.viewport,
-              type: "config",
-              config: this.#config,
-            });
-          }
-        }
-        this.emit("config", this.#config);
+        return true;
       }
     }
   }