array data source grouping I (#731)

Author: heswell

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

@@ -40,6 +40,8 @@ import {
   VuuUIMessageInRPCEditSuccess,
 } from "../vuuUIMessageTypes";
 
+import { groupRows } from "./group-utils";
+
 export interface ArrayDataSourceConstructorProps
   extends Omit<DataSourceConstructorProps, "bufferSize" | "table"> {
   columnDescriptors: ColumnDescriptor[];
@@ -96,6 +98,7 @@ export class ArrayDataSource
   private status = "initialising";
   private disabled = false;
   private filteredData: undefined | DataSourceRow[];
+  private groupedData: undefined | DataSourceRow[];
   private suspended = false;
   private clientCallback: SubscribeCallback | undefined;
   private tableMeta: VuuTableMeta;
@@ -312,7 +315,7 @@ export class ArrayDataSource
       this.rangeChangeRowset === "delta" && !forceFullRefresh
         ? rangeNewItems(this.lastRangeServed, this.#range)
         : this.#range;
-    const data = this.filteredData ?? this.#data;
+    const data = this.groupedData ?? this.filteredData ?? this.#data;
     this.clientCallback?.({
       clientViewportId: this.viewport,
       rows: data
@@ -364,11 +367,6 @@ export class ArrayDataSource
     debug?.(`filter ${JSON.stringify(filter)}`);
     // TODO should we wait until server ACK before we assign #sort ?
 
-    this.#config = {
-      ...this.#config,
-      filter,
-    };
-
     this.#config = {
       ...this.#config,
       filter,
@@ -395,7 +393,28 @@ export class ArrayDataSource
   }
 
   set groupBy(groupBy: VuuGroupBy) {
-    // this.#config.groupBy = groupBy;
+    this.#config = {
+      ...this.#config,
+      groupBy,
+    };
+
+    if (groupBy.length) {
+      console.time("group");
+      this.groupedData = groupRows(this.#data, groupBy, this.#columnMap).map(
+        (row, i) => {
+          const dolly = row.slice() as DataSourceRow;
+          dolly[0] = i;
+          dolly[1] = i;
+          return dolly;
+        }
+      );
+      console.timeEnd("group");
+    } else {
+      this.groupedData = undefined;
+    }
+    this.setRange(resetRange(this.#range), true);
+
+    this.emit("config", this.#config);
   }
 
   get title() {

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

@@ -0,0 +1,30 @@
+import { VuuGroupBy } from "@finos/vuu-protocol-types";
+import { ColumnMap } from "@finos/vuu-utils";
+import { DataSourceRow } from "../data-source";
+
+type RowSortComparator = (
+  item1: DataSourceRow,
+  item2: DataSourceRow
+) => 0 | -1 | 1;
+
+const sortComparator =
+  (idx: number): RowSortComparator =>
+  (row1, row2) => {
+    const v1 = row1[idx];
+    const v2 = row2[idx];
+    return v1 > v2 ? 1 : v2 > v1 ? -1 : 0;
+  };
+
+export const groupRows = (
+  rows: readonly DataSourceRow[],
+  groupBy: VuuGroupBy,
+  columnMap: ColumnMap
+): DataSourceRow[] => {
+  const sortIndices = groupBy.map<number>((colName) => columnMap[colName]);
+  // 1) sort the data
+  const sortedRows = rows.slice().sort(sortComparator(sortIndices[0]));
+
+  // 2) collapse int groups
+
+  return sortedRows;
+};

vuu-ui/showcase/scripts/showcase.mjs

@@ -6,7 +6,8 @@ import { execWait } from "../../scripts/utils.mjs";
 
 fs.copyFileSync("./templates/index.html", "./index.html");
 
-execWait("yarn vite");
+// execWait("yarn vite");
+execWait("node ../node_modules/.bin/vite");
 
 console.log(`opening showcase at ${chalk.green("http://127.0.0.1:5173/")} ...`);