Json table (#1525)

* json table functioning again * json and tree tables * improve keyboard navigation in treed table * fix behaviour broken by fix to aria row and cell index * keyboard navigation within table group headers * fix tests
finos · Oct 28, 2024 · df0c91e · df0c91e
1 parent 4b6700a
commit df0c91e
Show file tree

Hide file tree

Showing 77 changed files with 1,722 additions and 534 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
@@ -299,7 +299,19 @@ export class ArrayDataSource
     this.emit("row-selection", selected, this.#selectedRowsCount);
   }
 
-  openTreeNode(key: string) {
+  private getRowKey(keyOrIndex: string | number) {
+    if (typeof keyOrIndex === "string") {
+      return keyOrIndex;
+    }
+    const row = this.getRowAtIndex(keyOrIndex);
+    if (row === undefined) {
+      throw Error(`row not found at index ${keyOrIndex}`);
+    }
+    return row?.[KEY];
+  }
+
+  openTreeNode(keyOrIndex: string | number) {
+    const key = this.getRowKey(keyOrIndex);
     this.openTreeNodes.push(key);
     this.processedData = expandGroup(
       this.openTreeNodes,
@@ -312,7 +324,8 @@ export class ArrayDataSource
     this.setRange(resetRange(this.#range), true);
   }
 
-  closeTreeNode(key: string) {
+  closeTreeNode(keyOrIndex: string | number) {
+    const key = this.getRowKey(keyOrIndex);
     this.openTreeNodes = this.openTreeNodes.filter((value) => value !== key);
     if (this.processedData) {
       this.processedData = collapseGroup(key, this.processedData);
@@ -357,7 +370,7 @@ export class ArrayDataSource
     return this._config;
   }
 
-  set config(config: WithBaseFilter<DataSourceConfig>) {
+  set config(config: WithBaseFilter<WithFullConfig>) {
     const configChanges = this.applyConfig(config);
     if (configChanges) {
       if (config) {
@@ -418,6 +431,7 @@ export class ArrayDataSource
             config.groupBy,
             this.#columnMap,
           );
+          console.log({ groupedData });
           this.groupMap = groupMap;
           processedData = groupedData;
 
@@ -502,6 +516,10 @@ export class ArrayDataSource
     this.setRange(range);
   }
 
+  getRowAtIndex(rowIndex: number) {
+    return this.processedData?.[rowIndex];
+  }
+
   protected delete(row: VuuRowDataItemType[]) {
     console.log(`delete row ${row.join(",")}`);
   }

diff --git a/vuu-ui/packages/vuu-data-local/src/array-data-source/group-utils.ts b/vuu-ui/packages/vuu-data-local/src/array-data-source/group-utils.ts
@@ -9,7 +9,7 @@ const { DEPTH, IS_EXPANDED, KEY } = metadataKeys;
 
 export const collapseGroup = (
   key: string,
-  groupedRows: readonly DataSourceRow[]
+  groupedRows: readonly DataSourceRow[],
 ): DataSourceRow[] => {
   const rows: DataSourceRow[] = [];
 
@@ -50,7 +50,7 @@ export const expandGroup = (
   groupBy: VuuGroupBy,
   columnMap: ColumnMap,
   groupMap: GroupMap,
-  processedData: readonly DataSourceRow[]
+  processedData: readonly DataSourceRow[],
 ): DataSourceRow[] => {
   const groupIndices = groupBy.map<number>((column) => columnMap[column]);
   return dataRowsFromGroups2(
@@ -61,7 +61,7 @@ export const expandGroup = (
     undefined,
     undefined,
     undefined,
-    processedData
+    processedData,
   );
 };
 
@@ -73,14 +73,23 @@ const dataRowsFromGroups2 = (
   root = "$root",
   depth = 1,
   rows: DataSourceRow[] = [],
-  processedData: readonly DataSourceRow[]
+  processedData: readonly DataSourceRow[],
 ) => {
   console.log(`dataRowsFromGroups2 1)`);
   const keys = Object.keys(groupMap).sort();
   for (const key of keys) {
     const idx = rows.length;
     const groupKey = `${root}|${key}`;
-    const row: DataSourceRow = [idx, idx, false, false, depth, 0, groupKey, 0];
+    const row: DataSourceRow = [
+      idx,
+      idx,
+      false,
+      false,
+      depth,
+      childCount(groupMap[key]),
+      groupKey,
+      0,
+    ];
     // TODO whats this
     row[groupIndices[depth - 1]] = key;
     rows.push(row);
@@ -93,7 +102,7 @@ const dataRowsFromGroups2 = (
           groupMap[key] as KeyList,
           sourceRows,
           groupKey,
-          depth + 1
+          depth + 1,
         );
       } else {
         dataRowsFromGroups2(
@@ -104,7 +113,7 @@ const dataRowsFromGroups2 = (
           groupKey,
           depth + 1,
           rows,
-          processedData
+          processedData,
         );
       }
     }
@@ -120,8 +129,8 @@ const dataRowsFromGroups2 = (
           rows[key] = rows[key].splice(0, 8).concat(
             processedData[index].slice(
               8, // groupIndices[0] + 1,
-              processedData[index].length
-            )
+              processedData[index].length,
+            ),
           ) as DataSourceRow;
           break;
         }
@@ -138,7 +147,7 @@ const pushChildren = (
   tree: KeyList,
   sourceRows: readonly DataSourceRow[],
   parentKey: string,
-  depth: number
+  depth: number,
 ) => {
   for (const rowIdx of tree) {
     const idx = rows.length;
@@ -154,7 +163,7 @@ const pushChildren = (
 export const groupRows = (
   rows: readonly DataSourceRow[],
   groupBy: VuuGroupBy,
-  columnMap: ColumnMap
+  columnMap: ColumnMap,
 ): [DataSourceRow[], GroupMap] => {
   const groupIndices = groupBy.map<number>((column) => columnMap[column]);
   const groupTree = groupLeafRows(rows, groupIndices);
@@ -176,7 +185,7 @@ const dataRowsFromGroups = (groupTree: GroupMap, groupIndices: number[]) => {
       false,
       false,
       1,
-      0,
+      childCount(groupTree[key]),
       `$root|${key}`,
       0,
     ];
@@ -187,6 +196,14 @@ const dataRowsFromGroups = (groupTree: GroupMap, groupIndices: number[]) => {
   return rows;
 };
 
+function childCount(list: GroupMap | KeyList) {
+  if (Array.isArray(list)) {
+    return list.length;
+  } else {
+    return Object.keys(list).length;
+  }
+}
+
 function groupLeafRows(leafRows: readonly DataSourceRow[], groupby: number[]) {
   const groups: GroupMap = {};
   const levels = groupby.length;
@@ -214,6 +231,5 @@ function groupLeafRows(leafRows: readonly DataSourceRow[], groupby: number[]) {
       }
     }
   }
-  console.log("!! groups", groups);
   return groups;
 }
diff --git a/vuu-ui/packages/vuu-data-local/src/index.ts b/vuu-ui/packages/vuu-data-local/src/index.ts
@@ -1,2 +1,3 @@
 export * from "./array-data-source/array-data-source";
-export * from "./json-data-source/json-data-source";
+export * from "./json-data-source/JsonDataSource";
+export * from "./tree-data-source/TreeDataSource";
diff --git a/.../src/json-data-source/json-data-source.ts → ...al/src/json-data-source/JsonDataSource.ts b/.../src/json-data-source/json-data-source.ts → ...al/src/json-data-source/JsonDataSource.ts
@@ -32,6 +32,8 @@ import {
   KeySet,
   metadataKeys,
   NO_CONFIG_CHANGES,
+  NULL_RANGE,
+  rangesAreSame,
   uuid,
   vanillaConfig,
 } from "@finos/vuu-utils";
@@ -88,7 +90,6 @@ export class JsonDataSource
     viewport,
   }: JsonDataSourceConstructorProps) {
     super();
-
     if (!data) {
       throw Error("JsonDataSource constructor called without data");
     }
@@ -151,9 +152,6 @@ export class JsonDataSource
     if (groupBy) {
       this.#groupBy = groupBy;
     }
-    if (range) {
-      this.#range = range;
-    }
     if (sort) {
       this.#sort = sort;
     }
@@ -185,6 +183,12 @@ export class JsonDataSource
       type: "viewport-update",
       size: this.visibleRows.length,
     });
+
+    if (range && !rangesAreSame(this.#range, range)) {
+      this.range = range;
+    } else if (this.#range !== NULL_RANGE) {
+      this.sendRowsToClient();
+    }
   }
 
   unsubscribe() {
@@ -211,7 +215,6 @@ export class JsonDataSource
     return this;
   }
   set data(data: JsonData) {
-    console.log(`set JsonDataSource data`);
     [this.columnDescriptors, this.#data] = jsonToDataSourceRows(data);
     this.visibleRows = this.#data
       .filter((row) => row[DEPTH] === 0)
@@ -248,7 +251,20 @@ export class JsonDataSource
     }
   }
 
-  openTreeNode(key: string) {
+  private getRowKey(keyOrIndex: string | number) {
+    if (typeof keyOrIndex === "string") {
+      return keyOrIndex;
+    }
+    const row = this.visibleRows[keyOrIndex];
+    if (row === undefined) {
+      throw Error(`row not found at index ${keyOrIndex}`);
+    }
+    return row?.[KEY];
+  }
+
+  openTreeNode(keyOrIndex: string | number) {
+    const key = this.getRowKey(keyOrIndex);
+
     this.expandedRows.add(key);
     this.visibleRows = getVisibleRows(this.#data, this.expandedRows);
     const { from, to } = this.#range;
@@ -264,7 +280,9 @@ export class JsonDataSource
     });
   }
 
-  closeTreeNode(key: string, cascade = false) {
+  closeTreeNode(keyOrIndex: string | number, cascade = false) {
+    const key = this.getRowKey(keyOrIndex);
+
     this.expandedRows.delete(key);
     if (cascade) {
       for (const rowKey of this.expandedRows.keys()) {

diff --git a/vuu-ui/packages/vuu-data-local/src/tree-data-source/IconProvider.ts b/vuu-ui/packages/vuu-data-local/src/tree-data-source/IconProvider.ts
@@ -0,0 +1,15 @@
+import { DataSourceRow } from "@finos/vuu-data-types";
+import { metadataKeys } from "@finos/vuu-utils";
+
+const { KEY } = metadataKeys;
+
+export class IconProvider {
+  #iconMap: Record<string, string> = {};
+  getIcon = (row: DataSourceRow) => {
+    const key = row[KEY];
+    return this.#iconMap[key];
+  };
+  setIcon(key: string, icon: string) {
+    this.#iconMap[key] = icon;
+  }
+}