add suppport for grouping data outside ag grid (#792)

Author: heswell

vuu-ui/packages/vuu-data-ag-grid/src/AgGridColumnUtils.ts

@@ -0,0 +1,29 @@
+import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
+import { VuuGroupBy } from "@finos/vuu-protocol-types";
+import { FilterDataProvider } from "./FilterDataProvider";
+
+export interface AgGridColDef {
+  [key: string]: unknown;
+  field?: string;
+  enableRowGroup?: boolean;
+  rowGroup?: boolean;
+}
+
+export const createColumnDefs = (
+  setFilterDataProvider: FilterDataProvider,
+  columns: ColumnDescriptor[],
+  groupBy: VuuGroupBy = []
+): AgGridColDef[] => {
+  return columns.map((column) => ({
+    // cellRenderer: cellRenderers[column.name],
+    // enableRowGroup: groupableColumns.has(column.name),
+    enableRowGroup: true,
+    field: column.name,
+    hide: column.hidden || groupBy.includes(column.name),
+    rowGroup: groupBy.includes(column.name),
+
+    // ...getFilterAttributes(column, setFilterDataProvider),
+    sortable: true,
+    width: 100,
+  }));
+};

vuu-ui/packages/vuu-data-ag-grid/src/ViewportRowModelDataSource.ts

@@ -31,6 +31,11 @@ const reverseColumnMap = (columnMap: ColumnMap): Map<number, string> =>
     )
   );
 
+/**
+ * This is a custom ViewportRowModelDataSource that complies with the interface
+ * expected by AgGrid. Internally, it interacts with a remote Vuu server to
+ * fetch data. It wraps a Vuu RemoteDataSource.
+ */
 export class ViewportRowModelDataSource {
   private columnMap: ColumnMap;
   private reverseColumnMap: Map<number, string>;
@@ -42,6 +47,7 @@ export class ViewportRowModelDataSource {
     private onFeatureEnabled?: (message: VuuFeatureMessage) => void
   ) {
     this.dataSource.subscribe({}, this.handleMessageFromDataSource);
+    // this.dataSource.on("config", this.handleConfigChange);
     this.columnMap = buildColumnMap(dataSource.columns);
     this.reverseColumnMap = reverseColumnMap(this.columnMap);
   }

vuu-ui/packages/vuu-data-ag-grid/src/useViewportRowModel.ts

@@ -1,9 +1,10 @@
 import {
-  DataSource,
+  DataSourceConfig,
   isViewportMenusAction,
   isVisualLinksAction,
   MenuActionConfig,
   MenuRpcResponse,
+  RemoteDataSource,
   SuggestionFetcher,
   useTypeaheadSuggestions,
   useVuuMenuActions,
@@ -12,8 +13,8 @@ import {
   VuuUIMessageInRPCEditReject,
   VuuUIMessageInRPCEditSuccess,
 } from "@finos/vuu-data";
-import { VuuMenu, VuuTable } from "@finos/vuu-protocol-types";
-import { useCallback, useMemo, useRef } from "react";
+import { VuuGroupBy, VuuMenu, VuuTable } from "@finos/vuu-protocol-types";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { bySortIndex, isSortedColumn, toSortDef } from "./AgGridDataUtils";
 
 import {
@@ -23,9 +24,11 @@ import {
 import { FilterDataProvider } from "./FilterDataProvider";
 import { GroupCellRenderer } from "./GroupCellRenderer";
 import { ViewportRowModelDataSource } from "./ViewportRowModelDataSource";
-import { buildColumnMap } from "@finos/vuu-utils";
+import { buildColumnMap, itemsOrOrderChanged } from "@finos/vuu-utils";
 import { vuuMenuToAgGridMenu } from "./agGridMenuUtils";
 import { AgData } from "./AgDataWindow";
+import { ColumnDescriptor } from "@finos/vuu-datagrid-types";
+import { createColumnDefs } from "./AgGridColumnUtils";
 
 type Column = {
   getId: () => string;
@@ -38,11 +41,23 @@ interface FilterChangedEvent {
     getFilterModel: () => AgGridFilter;
   };
 }
+
+export interface AgGridDataRow {
+  [key: string]: unknown;
+  expanded?: boolean;
+  groupKey: string;
+  groupKeys?: string;
+  groupRow: boolean;
+}
+
+const isAgGridGroupDataRow = (data: unknown): data is AgGridDataRow =>
+  typeof data === "object" &&
+  data !== null &&
+  typeof (data as AgGridDataRow)["groupKey"] === "string";
+
 type RowGroupOpenedEvent = {
-  data: {
-    expanded: boolean;
-    groupKey: string;
-  };
+  data?: AgGridDataRow;
+  expanded: boolean;
   node: { expanded?: boolean };
 };
 type ColumnState = { colId: string; sortIndex: number }[];
@@ -55,7 +70,8 @@ type SortChangedEvent = {
 const NullSuggestionFetcher: SuggestionFetcher = async () => [];
 
 export interface ViewportRowModelHookProps {
-  dataSource: DataSource;
+  columns?: ColumnDescriptor[];
+  dataSource: RemoteDataSource;
   onFeatureEnabled?: (message: VuuFeatureMessage) => void;
   onRpcResponse?: (
     response:
@@ -65,7 +81,16 @@ export interface ViewportRowModelHookProps {
   ) => void;
 }
 
+type GroupByConfigChange = {
+  groupBy: VuuGroupBy;
+};
+
+const hasGroupByChange = (
+  message?: Partial<DataSourceConfig>
+): message is GroupByConfigChange => Array.isArray(message?.groupBy);
+
 export const useViewportRowModel = ({
+  columns,
   dataSource,
   onRpcResponse,
   onFeatureEnabled,
@@ -74,8 +99,12 @@ export const useViewportRowModel = ({
   const getTypeaheadSuggestionsRef = useRef<SuggestionFetcher>(
     NullSuggestionFetcher
   );
+  const groupByRef = useRef<VuuGroupBy>([]);
+  const [groupBy, setGroupBy] = useState<VuuGroupBy>(groupByRef.current);
   getTypeaheadSuggestionsRef.current = useTypeaheadSuggestions();
 
+  const { table } = dataSource;
+
   // It is important that these values are not assigned in advance. They
   // are accessed at the point of construction of ContextMenu
   const menuActionConfig: MenuActionConfig = useMemo(
@@ -140,23 +169,57 @@ export const useViewportRowModel = ({
     return new FilterDataProvider(table, getTypeaheadSuggestionsRef);
   }, []);
 
+  const columnDefs = useMemo(() => {
+    return Array.isArray(columns)
+      ? createColumnDefs(createFilterDataProvider(table), columns, groupBy)
+      : undefined;
+  }, [columns, createFilterDataProvider, groupBy, table]);
+
+  useEffect(() => {
+    // We listen to dsataSource config changes to detect changes applied
+    // directly to the dataSource, i.e. not applied via AgGrid and detected via
+    // AgGrid event callbacks. For the former, AgGrid has no knowledge
+    // that a change has occurred, so will not render the subsequent row refresh
+    // correctly. In the case of GroupBy, for example. we need to recompute the
+    // column defs to apply grouping. This will cause AgGrid to re-render columns
+    // taking grouping into account and will enable subsequent refresh of grouped
+    // data to be handled correctly.
+    // Where a config change DOES originate from AgGrid (e.g user has applied
+    // grouping from the Ag Grid context menu), we store latest value in a ref,
+    // so that we can ignore the config change event(s) that will be fired by
+    // the dataSource for this config change.
+    dataSource.on("config", (config) => {
+      if (
+        hasGroupByChange(config) &&
+        itemsOrOrderChanged(groupByRef.current, config.groupBy)
+      ) {
+        setGroupBy(config.groupBy);
+      }
+    });
+  }, [dataSource]);
+
+  // Fired when user has applied grouping from AG Grid, either via the
+  // column menu or by dragging a column onto the group bar.
   const handleColumnRowGroupChanged = useCallback(
     (evt: unknown) => {
       const columnRowGroupChangedEvent = evt as ColumnRowGroupChangedEvent;
       const { columns } = columnRowGroupChangedEvent;
       if (columns !== null) {
-        const colIds = columns.map((c) => c.getId());
-        viewportDatasource.setRowGroups(colIds);
+        const vuuGroupBy: VuuGroupBy = columns.map((c) => c.getId());
+        groupByRef.current = vuuGroupBy;
+        viewportDatasource.setRowGroups(vuuGroupBy);
       }
     },
     [viewportDatasource]
   );
 
   const handleRowGroupOpened = useCallback(
     (evt: RowGroupOpenedEvent) => {
-      const { groupKey } = evt.data;
-      const { expanded = false } = evt.node;
-      viewportDatasource.setExpanded(groupKey, !expanded);
+      if (isAgGridGroupDataRow(evt.data)) {
+        const { groupKey } = evt.data;
+        const { expanded = false } = evt.node;
+        viewportDatasource.setExpanded(groupKey, !expanded);
+      }
     },
     [viewportDatasource]
   );
@@ -238,6 +301,7 @@ export const useViewportRowModel = ({
 
   return {
     autoGroupColumnDef,
+    columnDefs,
     createFilterDataProvider,
     viewportDatasource,
     defaultColDef: {

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

@@ -41,6 +41,7 @@ import {
 } from "../vuuUIMessageTypes";
 
 import { collapseGroup, expandGroup, GroupMap, groupRows } from "./group-utils";
+import { TableSchema } from "../message-utils";
 
 export interface ArrayDataSourceConstructorProps
   extends Omit<DataSourceConstructorProps, "bufferSize" | "table"> {
@@ -69,20 +70,18 @@ const toDataSourceRow = (
   ...data,
 ];
 
-const buildTableMeta = (columns: ColumnDescriptor[]): VuuTableMeta => {
-  const meta = {
-    columns: [],
-    dataTypes: [],
+const buildTableSchema = (columns: ColumnDescriptor[]): TableSchema => {
+  const schema: TableSchema = {
+    columns: columns.map(({ name, serverDataType = "string" }) => ({
+      name,
+      serverDataType,
+    })),
     // how do we identify the key field ?
     key: columns[0].name,
-  } as VuuTableMeta;
+    table: { module: "", table: "Array" },
+  };
 
-  columns.forEach((column) => {
-    meta.columns.push(column.name);
-    meta.dataTypes.push(column.serverDataType ?? "string");
-  });
-
-  return meta;
+  return schema;
 };
 
 const toClientRow = (row: DataSourceRow, keys: KeySet) => {
@@ -104,7 +103,7 @@ export class ArrayDataSource
   private groupMap: undefined | GroupMap;
   private suspended = false;
   private clientCallback: SubscribeCallback | undefined;
-  private tableMeta: VuuTableMeta;
+  private tableSchema: TableSchema;
   private lastRangeServed: VuuRange = { from: 0, to: 0 };
   private rangeChangeRowset: "delta" | "full";
   private openTreeNodes: string[] = [];
@@ -154,7 +153,7 @@ export class ArrayDataSource
     this.#columns = columnDescriptors.map((column) => column.name);
     this.#columnMap = buildColumnMap(this.#columns);
     this.rangeChangeRowset = rangeChangeRowset;
-    this.tableMeta = buildTableMeta(columnDescriptors);
+    this.tableSchema = buildTableSchema(columnDescriptors);
 
     this.#data = data.map<DataSourceRow>(toDataSourceRow);
     this.viewport = viewport || uuid();
@@ -205,7 +204,7 @@ export class ArrayDataSource
       type: "subscribed",
       clientViewportId: this.viewport,
       range: this.#range,
-      tableMeta: this.tableMeta,
+      tableSchema: this.tableSchema,
     });
 
     this.clientCallback({

vuu-ui/packages/vuu-data/src/connection-manager.ts

@@ -31,9 +31,9 @@ import {
 
 // Note: inlined-worker is a generated file, it must be built
 import { workerSourceCode } from "./inlined-worker";
-import { VuuTableMetaWithTable } from "./hooks";
 import { ConnectionQualityMetrics } from "./vuuUIMessageTypes";
 import { WebSocketProtocol } from "./websocket-connection";
+import { TableSchema } from "./message-utils";
 
 const workerBlob = new Blob([getLoggingConfigForWorker() + workerSourceCode], {
   type: "text/javascript",
@@ -205,7 +205,7 @@ const asyncRequest = <T = unknown>(
 
 export interface ServerAPI {
   destroy: (viewportId?: string) => void;
-  getTableMeta: (table: VuuTable) => Promise<VuuTableMetaWithTable>;
+  getTableSchema: (table: VuuTable) => Promise<TableSchema>;
   getTableList: () => Promise<VuuTableList>;
   rpcCall: <T = unknown>(
     msg: VuuRpcRequest | ClientToServerMenuRPC
@@ -249,8 +249,8 @@ const connectedServerAPI: ServerAPI = {
   getTableList: async () =>
     asyncRequest<VuuTableList>({ type: Message.GET_TABLE_LIST }),
 
-  getTableMeta: async (table) =>
-    asyncRequest<VuuTableMetaWithTable>({
+  getTableSchema: async (table) =>
+    asyncRequest<TableSchema>({
       type: Message.GET_TABLE_META,
       table,
     }),

vuu-ui/packages/vuu-data/src/hooks/useVuuTables.ts

@@ -1,15 +1,14 @@
-import { VuuTableMetaWithTable } from "@finos/vuu-protocol-types";
 import { useCallback, useEffect, useState } from "react";
 import { getServerAPI } from "../connection-manager";
-import { createSchemaFromTableMetadata, TableSchema } from "../message-utils";
+import { TableSchema } from "../message-utils";
 
 export const useVuuTables = () => {
   const [tables, setTables] = useState<Map<string, TableSchema> | undefined>();
 
-  const buildTables = useCallback((schemas: VuuTableMetaWithTable[]) => {
+  const buildTables = useCallback((schemas: TableSchema[]) => {
     const vuuTables = new Map<string, TableSchema>();
     schemas.forEach((schema) => {
-      vuuTables.set(schema.table.table, createSchemaFromTableMetadata(schema));
+      vuuTables.set(schema.table.table, schema);
     });
     return vuuTables;
   }, []);
@@ -20,7 +19,9 @@ export const useVuuTables = () => {
       const { tables } = await server.getTableList();
       const tableSchemas = buildTables(
         await Promise.all(
-          tables.map((tableDescriptor) => server.getTableMeta(tableDescriptor))
+          tables.map((tableDescriptor) =>
+            server.getTableSchema(tableDescriptor)
+          )
         )
       );
       setTables(tableSchemas);

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

@@ -32,6 +32,8 @@ import {
   VuuUIMessageInRPCEditSuccess,
 } from "./vuuUIMessageTypes";
 
+const NULL_SCHEMA = { columns: [], key: "", table: { module: "", table: "" } };
+
 export interface JsonDataSourceConstructorProps
   extends Omit<DataSourceConstructorProps, "bufferSize" | "table"> {
   data: JsonData;
@@ -165,7 +167,7 @@ export class JsonDataSource
       groupBy: this.#groupBy,
       range: this.#range,
       sort: this.#sort,
-      tableMeta: { columns: [], dataTypes: [] },
+      tableSchema: NULL_SCHEMA,
     });
 
     this.clientCallback({

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

@@ -519,7 +519,6 @@ export class RemoteDataSource
         rows: [],
       });
     }
-    console.log("emit config changed");
     this.emit("config", this.#config);
     this.setConfigPending({ groupBy });
   }

vuu-ui/packages/vuu-data/src/server-proxy/server-proxy.ts

@@ -903,9 +903,7 @@ export class ServerProxy {
           } else {
             this.postMessageToClient({
               type: Message.TABLE_META_RESP,
-              table: body.table,
-              columns: body.columns,
-              dataTypes: body.dataTypes,
+              tableSchema,
               requestId,
             } as VuuUIMessageInTableMeta);
           }