Merge branch 'main' of https://github.com/ScottLogic/finos-vuu

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

@@ -89,6 +89,12 @@ export interface DataSourceSortMessage extends MessageWithClientViewportId {
   sort: VuuSort;
 }
 
+export type DataSourceConfigMessage =
+  | DataSourceAggregateMessage
+  | DataSourceFilterMessage
+  | DataSourceGroupByMessage
+  | DataSourceSortMessage;
+
 export interface DataSourceSubscribedMessage
   extends MessageWithClientViewportId,
     MessageWithClientViewportId {
@@ -123,15 +129,12 @@ export interface DataSourceVisualLinksMessage
 }
 
 export type DataSourceCallbackMessage =
-  | DataSourceAggregateMessage
+  | DataSourceConfigMessage
   | DataSourceColumnsMessage
   | DataSourceDataMessage
   | DataSourceDisabledMessage
   | DataSourceEnabledMessage
-  | DataSourceFilterMessage
-  | DataSourceGroupByMessage
   | DataSourceMenusMessage
-  | DataSourceSortMessage
   | DataSourceSubscribedMessage
   | DataSourceVisualLinkCreatedMessage
   | DataSourceVisualLinkRemovedMessage
@@ -188,7 +191,7 @@ export interface DataSourceProps {
   columns: string[];
   filter?: Filter;
   filterQuery?: string;
-  group?: VuuGroupBy;
+  groupBy?: VuuGroupBy;
   sort?: VuuSort;
   configUrl?: any;
   serverUrl?: string;
@@ -217,7 +220,7 @@ export interface DataSource extends IEventEmitter {
   columns: string[];
   createLink: ({ parentVpId, link: { fromColumn, toColumn } }: any) => void;
   filter: (filter: Filter | undefined, filterQuery: string) => void;
-  group: (groupBy: VuuGroupBy) => void;
+  groupBy: VuuGroupBy;
   menuRpcCall: (
     rpcRequest: Omit<VuuMenuRpcRequest, "vpId">
   ) => Promise<MenuRpcResponse | undefined>;
@@ -229,7 +232,7 @@ export interface DataSource extends IEventEmitter {
   setSubscribedColumns: (columns: string[]) => void;
   /** Set the title associated with this viewport in UI. This can be used as a link target */
   setTitle?: (title: string) => void;
-  sort: (sort: VuuSort) => void;
+  sort: VuuSort;
   subscribe: (
     props: SubscribeProps,
     callback: SubscribeCallback

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

@@ -46,6 +46,9 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
   private initialAggregations: any;
   private pendingServer: any;
   private clientCallback: any;
+
+  #groupBy: VuuGroupBy = [];
+  #sort: VuuSort = { sortDefs: [] };
   // private serverViewportId?: string;
 
   public columns: string[];
@@ -59,7 +62,7 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
     columns,
     filter,
     filterQuery,
-    group,
+    groupBy,
     sort,
     table,
     configUrl,
@@ -80,7 +83,7 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
     this.disabled = false;
     this.suspended = false;
 
-    this.initialGroup = group;
+    this.initialGroup = groupBy;
     this.initialSort = sort;
     this.initialFilter = filter;
     this.initialFilterQuery = filterQuery;
@@ -269,23 +272,6 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
     }
   }
 
-  group(groupBy: VuuGroupBy) {
-    if (this.viewport) {
-      // log(`groupBy ${JSON.stringify(groupBy)}`);
-      const message = {
-        viewport: this.viewport,
-        type: "groupBy",
-        groupBy,
-      } as const;
-
-      if (this.server) {
-        this.server.send(message);
-      } else {
-        this.initialGroup = groupBy;
-      }
-    }
-  }
-
   //TODO I think we should have a clear filter for API clarity
   filter(filter: Filter | undefined, filterQuery: string) {
     if (this.viewport) {
@@ -365,17 +351,44 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
     }
   }
 
-  // TODO columns cannot simply be strings
-  sort(sort: VuuSort) {
+  get sort() {
+    return this.#sort;
+  }
+
+  set sort(sort: VuuSort) {
+    // TODO should we wait until server ACK before we assign #sort ?
+    this.#sort = sort;
+    console.log(`RemoteDataSource ${JSON.stringify(sort)}`);
     if (this.viewport) {
       this.server?.send({
         viewport: this.viewport,
         type: "sort",
-        sortDefs: sort.sortDefs,
+        sort,
       });
     }
   }
 
+  get groupBy() {
+    return this.#groupBy;
+  }
+
+  set groupBy(groupBy: VuuGroupBy) {
+    this.#groupBy = groupBy;
+    if (this.viewport) {
+      const message = {
+        viewport: this.viewport,
+        type: "groupBy",
+        groupBy,
+      } as const;
+
+      if (this.server) {
+        this.server.send(message);
+      } else {
+        this.initialGroup = groupBy;
+      }
+    }
+  }
+
   createLink({ parentVpId, link: { fromColumn, toColumn } }: any) {
     if (this.viewport) {
       this.server?.send({

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

@@ -223,7 +223,7 @@ export class ServerProxy {
 
   private sort(viewport: Viewport, message: VuuUIMessageOutSort) {
     const requestId = nextRequestId();
-    const request = viewport.sortRequest(requestId, message.sortDefs);
+    const request = viewport.sortRequest(requestId, message.sort);
     this.sendIfReady(request, requestId, viewport.status === "subscribed");
   }
 

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

@@ -14,7 +14,7 @@ import {
   VuuMenu,
   VuuRange,
   VuuRow,
-  VuuSortCol,
+  VuuSort,
   VuuTable,
 } from "@finos/vuu-protocol-types";
 import { getFullRange } from "@finos/vuu-utils";
@@ -63,7 +63,7 @@ interface Selection {
   type: "selection";
 }
 interface Sort {
-  data: VuuSortCol[];
+  data: VuuSort;
   type: "sort";
 }
 interface GroupBy {
@@ -120,7 +120,7 @@ export class Viewport {
     columns: string[];
     dataTypes: VuuColumnDataType[];
   } | null = null;
-  private sort: any;
+  private sort: VuuSort | undefined;
 
   public clientViewportId: string;
   public disabled = false;
@@ -140,7 +140,7 @@ export class Viewport {
     groupBy = [],
     table,
     range,
-    sort = [],
+    sort,
     title,
     viewport,
     visualLink,
@@ -158,9 +158,7 @@ export class Viewport {
     this.keys = new KeySet(range);
     this.pendingLinkedParent = visualLink;
     this.table = table;
-    this.sort = {
-      sortDefs: sort,
-    };
+    this.sort = sort;
     this.title = title;
   }
 
@@ -259,17 +257,9 @@ export class Viewport {
       //this.hasUpdates = true; // is this right ??????????
       this.pendingRangeRequest = null;
     } else if (type === "groupBy") {
-      this.isTree = true;
+      this.isTree = data.length > 0;
       this.groupBy = data;
       return { clientViewportId, type, groupBy: data };
-    } else if (type === "groupByClear") {
-      this.isTree = false;
-      this.groupBy = [];
-      return {
-        clientViewportId,
-        type: "groupBy",
-        groupBy: null,
-      };
     } else if (type === "columns") {
       console.log("columns changed");
       this.columns = data;
@@ -286,7 +276,7 @@ export class Viewport {
         aggregations: this.aggregations,
       };
     } else if (type === "sort") {
-      this.sort = { sortDefs: data };
+      this.sort = data;
       return { clientViewportId, type, sort: this.sort };
     } else if (type === "selection") {
       // should we do this here ?
@@ -509,14 +499,13 @@ export class Viewport {
     return this.createRequest({ aggregations });
   }
 
-  sortRequest(requestId: string, sortCols: VuuSortCol[]) {
-    this.awaitOperation(requestId, { type: "sort", data: sortCols });
-    return this.createRequest({ sort: { sortDefs: sortCols } });
+  sortRequest(requestId: string, sort: VuuSort) {
+    this.awaitOperation(requestId, { type: "sort", data: sort });
+    return this.createRequest({ sort });
   }
 
   groupByRequest(requestId: string, groupBy: VuuGroupBy = EMPTY_GROUPBY) {
-    const type = groupBy.length === 0 ? "groupByClear" : "groupBy";
-    this.awaitOperation(requestId, { type, data: groupBy });
+    this.awaitOperation(requestId, { type: "groupBy", data: groupBy });
     return this.createRequest({ groupBy });
   }
 

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

@@ -7,7 +7,7 @@ import {
   VuuColumns,
   VuuGroupBy,
   VuuRange,
-  VuuSortCol,
+  VuuSort,
   VuuTable,
 } from "@finos/vuu-protocol-types";
 import { Filter } from "@finos/vuu-filter-types";
@@ -39,7 +39,7 @@ export interface ServerProxySubscribeMessage {
   filterQuery?: string;
   groupBy?: VuuGroupBy;
   range: VuuRange;
-  sort?: VuuSortCol[];
+  sort?: VuuSort;
   table: VuuTable;
   title?: string;
   viewport: string;
@@ -186,7 +186,7 @@ export interface VuuUIMessageOutSelectNone extends ViewportMessageOut {
 }
 
 export interface VuuUIMessageOutSort extends ViewportMessageOut {
-  sortDefs: VuuSortCol[];
+  sort: VuuSort;
   type: "sort";
 }
 export interface VuuUIMessageOutSuspend extends ViewportMessageOut {

vuu-ui/packages/vuu-data/test/test-utils.js

@@ -107,7 +107,7 @@ export const createSubscription = ({
   groupBy = [],
   key = '1',
   to = 10,
-  sort = [],
+  sort = {sortDefs: []},
   viewport = `client-vp-${key}`
 } = {}) => [
   { bufferSize, filterSpec, groupBy, range: { from, to }, sort, table: {module: "TEST", table: 'test-table'}, viewport },
@@ -118,7 +118,7 @@ export const createSubscription = ({
       viewPortId: `server-vp-${key}`,
       columns: ['col-1', 'col-2', 'col-3', 'col-4'],
       range: { from, to: to + bufferSize },
-      sort: {sortDefs: sort},
+      sort,
       table: "test-table",
       groupBy,
       filterSpec

vuu-ui/packages/vuu-datagrid-types/index.d.ts

@@ -1,4 +1,8 @@
-import { VuuColumnDataType } from "@finos/vuu-protocol-types";
+import {
+  VuuAggType,
+  VuuColumnDataType,
+  VuuSortType,
+} from "@finos/vuu-protocol-types";
 
 export declare type GridConfig = {
   columns: ColumnDescriptor[];
@@ -25,7 +29,12 @@ export declare type ColumnTypeDescriptor = {
 
 export declare type ColumnType = ColumnTypeSimple | ColumnTypeDescriptor;
 
+export type ColumnSort = VuuSortType | number;
+
+/** This is a public description of a Column, defining all the
+ * column attributes that can be defined by client. */
 export interface ColumnDescriptor {
+  aggregate?: VuuAggType;
   align?: "left" | "right";
   className?: string;
   flex?: number;
@@ -42,6 +51,8 @@ export interface ColumnDescriptor {
   type?: ColumnType;
   width?: number;
 }
+/** This is an internal description of a Column that extends the public
+ * definitin with internal state values. */
 export interface KeyedColumnDescriptor extends ColumnDescriptor {
   align?: "left" | "right";
   className?: string;
@@ -61,6 +72,23 @@ export interface KeyedColumnDescriptor extends ColumnDescriptor {
   resizeable?: boolean;
   resizing?: boolean;
   sortable?: boolean;
+  sorted?: ColumnSort;
   type?: ColumnType;
-  width?: number;
+  width: number;
+}
+
+export interface GroupColumnDescriptor extends KeyedColumnDescriptor {
+  columns: KeyedColumnDescriptor[];
+}
+
+export interface Heading {
+  collapsed?: boolean;
+  key: string;
+  hidden?: boolean;
+  isHeading: true;
+  label: string;
+  name: string;
+  resizeable?: boolean;
+  resizing?: boolean;
+  width: number;
 }

vuu-ui/packages/vuu-datagrid/src/ColumnGroupHeader.tsx

@@ -7,20 +7,18 @@ import React, {
   useImperativeHandle,
   useRef,
 } from "react";
+import { Heading } from "@finos/vuu-datagrid-types";
 import { VuuSort } from "../../vuu-protocol-types";
 import ColumnGroupContext from "./column-group-context";
 import { SortType } from "./constants";
 import { GroupHeaderCell, HeaderCell, HeadingCell } from "./grid-cells";
 import { useGridContext } from "./grid-context";
-import {
-  ColumnGroupType,
-  Heading,
-  isGroupColumn,
-  KeyedColumnDescriptor,
-} from "./grid-model/gridModelTypes";
+import { ColumnGroupType } from "./grid-model/gridModelTypes";
 import { GridModel } from "./grid-model/gridModelUtils";
 import { ColumnDragStartHandler, resizePhase } from "./gridTypes";
 
+import { KeyedColumnDescriptor } from "@finos/vuu-datagrid-types";
+import { isGroupColumn } from "@finos/vuu-utils";
 import "./ColumnGroupHeader.css";
 
 const classBase = "hwColumnGroupHeader";

vuu-ui/packages/vuu-datagrid/src/DataGrid.css

@@ -3,7 +3,7 @@
   --grid-row-background: inherit;
   --grid-row-height: var(--grid-row-height, 20px);
   --grid-row-line-height: 19px;
-  --grid-row-background-selected: var(--salt-palette-neutral-highlight);
+  --grid-row-background-selected: var(--salt-selectable-background-selected);
   --grid-header-cell-highlight-bg: var(--surface3);
 
   --hw-activation-indicator-thumb-bg: #2c2c2c;