table resets scroll position to top on filter of group events (#1227)

* table resets scroll position to top on filter of group events * fix type issues caused by removed messages * fix type issues caused by removed messages
finos · Feb 25, 2024 · 5520304 · 5520304
1 parent d86b100
commit 5520304
Show file tree

Hide file tree

Showing 17 changed files with 347 additions and 192 deletions.
diff --git a/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts b/vuu-ui/packages/vuu-data-local/src/array-data-source/array-data-source.ts
@@ -31,11 +31,11 @@ import { ColumnDescriptor } from "@finos/vuu-table-types";
 import {
   buildColumnMap,
   ColumnMap,
-  configChanged,
+  isConfigChanged,
   EventEmitter,
   getAddedItems,
   getMissingItems,
-  groupByChanged,
+  isGroupByChanged,
   hasFilter,
   hasGroupBy,
   hasSort,
@@ -48,6 +48,7 @@ import {
   uuid,
   vanillaConfig,
   withConfigDefaults,
+  DataSourceConfigChanges,
 } from "@finos/vuu-utils";
 import { aggregateData } from "./aggregate-utils";
 import { buildDataToClientMap, toClientRow } from "./array-data-utils";
@@ -332,7 +333,8 @@ export class ArrayDataSource
   }
 
   set config(config: DataSourceConfig) {
-    if (this.applyConfig(config)) {
+    const configChanges = this.applyConfig(config);
+    if (configChanges) {
       if (config) {
         const originalConfig = this.#config;
         const newConfig: DataSourceConfig =
@@ -370,7 +372,7 @@ export class ArrayDataSource
 
         if (
           this.openTreeNodes.length > 0 &&
-          groupByChanged(originalConfig, config)
+          isGroupByChanged(originalConfig, config)
         ) {
           if (this.#config.groupBy.length === 0) {
             this.openTreeNodes.length = 0;
@@ -414,12 +416,17 @@ export class ArrayDataSource
 
       this.setRange(resetRange(this.#range), true);
 
-      this.emit("config", this.#config);
+      this.emit("config", this.#config, undefined, configChanges);
     }
   }
 
-  applyConfig(config: DataSourceConfig) {
-    if (configChanged(this.#config, config)) {
+  applyConfig(config: DataSourceConfig): DataSourceConfigChanges | undefined {
+    const { noChanges, ...otherChanges } = isConfigChanged(
+      this.#config,
+      config
+    );
+
+    if (noChanges !== true) {
       if (config) {
         const newConfig: DataSourceConfig =
           config?.filter?.filter && config?.filter.filterStruct === undefined
@@ -432,7 +439,7 @@ export class ArrayDataSource
               }
             : config;
         this.#config = withConfigDefaults(newConfig);
-        return true;
+        return otherChanges;
       }
     }
   }

diff --git a/vuu-ui/packages/vuu-data-local/src/json-data-source/json-data-source.ts b/vuu-ui/packages/vuu-data-local/src/json-data-source/json-data-source.ts
@@ -31,6 +31,7 @@ import {
   jsonToDataSourceRows,
   KeySet,
   metadataKeys,
+  NO_CONFIG_CHANGES,
   uuid,
   vanillaConfig,
 } from "@finos/vuu-utils";
@@ -285,7 +286,7 @@ export class JsonDataSource
   }
 
   applyConfig() {
-    return true as const;
+    return NO_CONFIG_CHANGES;
   }
 
   get selectedRowsCount() {

diff --git a/vuu-ui/packages/vuu-data-remote/src/inlined-worker.js b/vuu-ui/packages/vuu-data-remote/src/inlined-worker.js
diff --git a/vuu-ui/packages/vuu-data-remote/src/server-proxy/server-proxy.ts b/vuu-ui/packages/vuu-data-remote/src/server-proxy/server-proxy.ts
@@ -14,8 +14,6 @@ import {
   VuuUIMessageOutConfig,
   VuuUIMessageOutConnect,
   VuuUIMessageOutCreateLink,
-  VuuUIMessageOutFilter,
-  VuuUIMessageOutGroupby,
   VuuUIMessageOutOpenTreeNode,
   VuuUIMessageOutSelect,
   VuuUIMessageOutSetTitle,
@@ -419,19 +417,6 @@ export class ServerProxy {
     this.sendIfReady(request, requestId, viewport.status === "subscribed");
   }
 
-  private groupBy(viewport: Viewport, message: VuuUIMessageOutGroupby) {
-    const requestId = nextRequestId();
-    const request = viewport.groupByRequest(requestId, message.groupBy);
-    this.sendIfReady(request, requestId, viewport.status === "subscribed");
-  }
-
-  private filter(viewport: Viewport, message: VuuUIMessageOutFilter) {
-    const requestId = nextRequestId();
-    const { filter } = message;
-    const request = viewport.filterRequest(requestId, filter);
-    this.sendIfReady(request, requestId, viewport.status === "subscribed");
-  }
-
   private setColumns(viewport: Viewport, message: VuuUIMessageOutColumns) {
     const requestId = nextRequestId();
     const { columns } = message;
@@ -638,10 +623,6 @@ export class ServerProxy {
             return this.aggregate(viewport, message);
           case "sort":
             return this.sort(viewport, message);
-          case "groupBy":
-            return this.groupBy(viewport, message);
-          case "filter":
-            return this.filter(viewport, message);
           case "select":
             return this.select(viewport, message);
           case "suspend":

diff --git a/vuu-ui/packages/vuu-data-remote/src/server-proxy/viewport.ts b/vuu-ui/packages/vuu-data-remote/src/server-proxy/viewport.ts
@@ -57,8 +57,6 @@ import { getFirstAndLastRows } from "../message-utils";
 import { ArrayBackedMovingWindow } from "./array-backed-moving-window";
 import * as Message from "./messages";
 
-const EMPTY_GROUPBY: VuuGroupBy = [];
-
 const { debug, debugEnabled, error, info, infoEnabled, warn } =
   logger("viewport");
 
@@ -692,20 +690,6 @@ export class Viewport {
     return this.createRequest({ columns });
   }
 
-  filterRequest(requestId: string, dataSourceFilter: DataSourceFilter) {
-    this.awaitOperation(requestId, {
-      type: "filter",
-      data: dataSourceFilter,
-    });
-
-    if (this.useBatchMode) {
-      this.batchMode = true;
-    }
-    const { filter } = dataSourceFilter;
-    info?.(`filterRequest: ${filter}`);
-    return this.createRequest({ filterSpec: { filter } });
-  }
-
   setConfig(requestId: string, config: WithFullConfig) {
     this.awaitOperation(requestId, { type: "config", data: config });
 
@@ -719,6 +703,10 @@ export class Viewport {
       ? debug?.(`setConfig ${JSON.stringify(config)}`)
       : info?.(`setConfig`);
 
+    if (!this.isTree && config.groupBy.length > 0) {
+      this.dataWindow?.clear();
+    }
+
     return this.createRequest(
       {
         ...remainingConfig,
@@ -747,17 +735,6 @@ export class Viewport {
     return this.createRequest({ sort });
   }
 
-  groupByRequest(requestId: string, groupBy: VuuGroupBy = EMPTY_GROUPBY) {
-    this.awaitOperation(requestId, { type: "groupBy", data: groupBy });
-    if (this.useBatchMode) {
-      this.batchMode = true;
-    }
-    if (!this.isTree) {
-      this.dataWindow?.clear();
-    }
-    return this.createRequest({ groupBy });
-  }
-
   selectRequest(requestId: string, selected: Selection) {
     // This is a simplistic implementation, there is a possibility we might be out of sync with
     // server if server responses are too slow.

diff --git a/vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts b/vuu-ui/packages/vuu-data-remote/src/vuu-data-source.ts
@@ -32,7 +32,7 @@ import {
 
 import { parseFilter } from "@finos/vuu-filter-parser";
 import {
-  configChanged,
+  isConfigChanged,
   debounce,
   EventEmitter,
   isViewportMenusAction,
@@ -44,6 +44,7 @@ import {
   uuid,
   vanillaConfig,
   withConfigDefaults,
+  DataSourceConfigChanges,
 } from "@finos/vuu-utils";
 import { getServerAPI, ServerAPI } from "./connection-manager";
 import { isDataSourceConfigMessage } from "./data-source";
@@ -435,8 +436,9 @@ export class VuuDataSource
   }
 
   set config(config: DataSourceConfig) {
-    if (this.applyConfig(config)) {
-      if (this.#config && this.viewport && this.server) {
+    const configChanges = this.applyConfig(config);
+    if (configChanges) {
+      if (this.#config && this.viewport) {
         if (config) {
           this.server?.send({
             viewport: this.viewport,
@@ -445,12 +447,16 @@ export class VuuDataSource
           });
         }
       }
-      this.emit("config", this.#config);
+      this.emit("config", this.#config, undefined, configChanges);
     }
   }
 
-  applyConfig(config: DataSourceConfig) {
-    if (configChanged(this.#config, config)) {
+  applyConfig(config: DataSourceConfig): DataSourceConfigChanges | undefined {
+    const { noChanges, ...otherChanges } = isConfigChanged(
+      this.#config,
+      config
+    );
+    if (noChanges !== true) {
       if (config) {
         const newConfig: DataSourceConfig =
           config?.filter?.filter && config?.filter.filterStruct === undefined
@@ -463,7 +469,7 @@ export class VuuDataSource
               }
             : config;
         this.#config = withConfigDefaults(newConfig);
-        return true;
+        return otherChanges;
       }
     }
   }
@@ -526,9 +532,7 @@ export class VuuDataSource
         type: "sort",
         sort,
       } as const;
-      if (this.server) {
-        this.server.send(message);
-      }
+      this.server?.send(message);
     }
     this.emit("config", this.#config);
   }
@@ -538,22 +542,10 @@ export class VuuDataSource
   }
 
   set filter(filter: DataSourceFilter) {
-    // TODO should we wait until server ACK before we assign #sort ?
-    this.#config = {
+    this.config = {
       ...this.#config,
       filter,
     };
-    if (this.viewport) {
-      const message = {
-        viewport: this.viewport,
-        type: "filter",
-        filter,
-      } as const;
-      if (this.server) {
-        this.server.send(message);
-      }
-    }
-    this.emit("config", this.#config);
   }
 
   get groupBy() {
@@ -563,21 +555,22 @@ export class VuuDataSource
   set groupBy(groupBy: VuuGroupBy) {
     if (itemsOrOrderChanged(this.groupBy, groupBy)) {
       const wasGrouped = this.#groupBy.length > 0;
-      this.#config = {
+
+      this.config = {
         ...this.#config,
         groupBy,
       };
-      if (this.viewport) {
-        const message = {
-          viewport: this.viewport,
-          type: "groupBy",
-          groupBy: this.#config.groupBy,
-        } as const;
-
-        if (this.server) {
-          this.server.send(message);
-        }
-      }
+      // if (this.viewport) {
+      //   const message = {
+      //     viewport: this.viewport,
+      //     type: "groupBy",
+      //     groupBy: this.#config.groupBy,
+      //   } as const;
+
+      //   if (this.server) {
+      //     this.server.send(message);
+      //   }
+      // }
       if (!wasGrouped && groupBy.length > 0 && this.viewport) {
         this.clientCallback?.({
           clientViewportId: this.viewport,
@@ -587,7 +580,10 @@ export class VuuDataSource
           rows: [],
         });
       }
-      this.emit("config", this.#config);
+      // this.emit("config", this.#config, undefined, {
+      //   ...NO_CONFIG_CHANGES,
+      //   groupByChanged: true,
+      // });
       this.setConfigPending({ groupBy });
     }
   }