Merge branch 'finos:main' into main

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

@@ -13,10 +13,10 @@ import {
   VuuRange,
   VuuRowDataItemType,
   VuuSort,
-  VuuSortCol,
   VuuTable,
 } from "@finos/vuu-protocol-types";
 import { MenuRpcResponse } from "./vuuUIMessageTypes";
+import { LinkWithLabel } from "./server-proxy/server-proxy";
 
 type RowIndex = number;
 type RenderKey = number;
@@ -27,6 +27,10 @@ type ChildCount = number;
 type RowKey = string;
 type IsSelected = 0 | 1 | 2;
 
+export interface DataSourceFilter extends VuuFilter {
+  filterStruct?: Filter;
+}
+
 export type DataSourceRow = [
   RowIndex,
   RenderKey,
@@ -71,8 +75,7 @@ export interface DataSourceColumnsMessage extends MessageWithClientViewportId {
 }
 export interface DataSourceFilterMessage extends MessageWithClientViewportId {
   type: "filter";
-  filter: Filter;
-  filterQuery: string;
+  filter: DataSourceFilter;
 }
 export interface DataSourceGroupByMessage extends MessageWithClientViewportId {
   type: "groupBy";
@@ -100,8 +103,7 @@ export interface DataSourceSubscribedMessage
     MessageWithClientViewportId {
   aggregations: VuuAggregation[];
   columns: VuuColumns;
-  filter: Filter;
-  filterSpec: VuuFilter;
+  filter: DataSourceFilter;
   groupBy: VuuGroupBy;
   range: VuuRange;
   sort: VuuSort;
@@ -189,11 +191,10 @@ export interface DataSourceProps {
   table: VuuTable;
   aggregations?: VuuAggregation[];
   columns: string[];
-  filter?: Filter;
-  filterQuery?: string;
+  filter?: DataSourceFilter;
   groupBy?: VuuGroupBy;
   sort?: VuuSort;
-  configUrl?: any;
+  configUrl?: string;
   serverUrl?: string;
   viewport?: string;
   "visual-link"?: any;
@@ -205,10 +206,9 @@ export interface SubscribeProps {
   columns?: string[];
   aggregations?: VuuAggregation[];
   range?: VuuRange;
-  sort?: VuuSortCol[];
+  sort?: VuuSort;
   groupBy?: VuuGroupBy;
-  filter?: Filter;
-  filterQuery?: string;
+  filter?: DataSourceFilter;
   title?: string;
 }
 
@@ -218,8 +218,11 @@ export interface DataSource extends IEventEmitter {
   aggregate: (aggregations: VuuAggregation[]) => void;
   closeTreeNode: (key: string) => void;
   columns: string[];
-  createLink: ({ parentVpId, link: { fromColumn, toColumn } }: any) => void;
-  filter: (filter: Filter | undefined, filterQuery: string) => void;
+  createLink: ({
+    parentVpId,
+    link: { fromColumn, toColumn },
+  }: LinkWithLabel) => void;
+  filter: DataSourceFilter;
   groupBy: VuuGroupBy;
   menuRpcCall: (
     rpcRequest: Omit<VuuMenuRpcRequest, "vpId">

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

@@ -78,8 +78,8 @@ export function useDataSource({
         }
       } else if (message.type === "filter") {
         // TODO
-        const { filter, filterQuery } = message;
-        console.log(`filter message ${filterQuery}`, {
+        const { filter } = message;
+        console.log("filter message", {
           filter,
         });
       }

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

@@ -1,3 +1,4 @@
+import { ContextMenuItemDescriptor } from "@finos/vuu-popups";
 import {
   VuuLink,
   VuuMenu,
@@ -18,12 +19,6 @@ import { MenuRpcResponse } from "../vuuUIMessageTypes";
 
 export const addRowsFromInstruments = "addRowsFromInstruments";
 
-export type VuuContextMenuDescriptor = {
-  action: string;
-  label: string;
-  options?: unknown;
-};
-
 type DataSourceVuuMenuMessage =
   | DataSourceVisualLinkCreatedMessage
   | DataSourceMenusMessage
@@ -122,7 +117,7 @@ export const useVuuMenuActions = ({
   const buildVuuMenuOptions = useCallback(
     (location, options) => {
       const { selectedRowCount = 0 } = options;
-      const descriptors: VuuContextMenuDescriptor[] = [];
+      const descriptors: ContextMenuItemDescriptor[] = [];
 
       if (visualLinks && !visualLink) {
         visualLinks.forEach((linkDescriptor: LinkWithLabel) => {
@@ -181,8 +176,7 @@ export const useVuuMenuActions = ({
         });
         return true;
       } else if (type === "link-table") {
-        // the createLink method only exists on dataSource
-        return dataSource.createLink(options), true;
+        return dataSource.createLink(options as LinkWithLabel), true;
       } else {
         console.log(
           `useViewServer handleMenuAction,  can't handle action type ${type}`

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

@@ -7,17 +7,18 @@ import {
   VuuMenuRpcRequest,
 } from "@finos/vuu-protocol-types";
 import { EventEmitter, uuid } from "@finos/vuu-utils";
-import { Filter } from "@finos/vuu-filter-types";
 import { ConnectionManager, ServerAPI } from "./connection-manager";
 import {
   DataSource,
   DataSourceCallbackMessage,
+  DataSourceFilter,
   DataSourceProps,
   SubscribeCallback,
   SubscribeProps,
 } from "./data-source";
 import { getServerUrl } from "./hooks/useServerConnection";
 import { MenuRpcResponse } from "./vuuUIMessageTypes";
+import { LinkWithLabel } from "./server-proxy/server-proxy";
 
 // const log = (message: string, ...rest: unknown[]) => {
 //   console.log(
@@ -38,18 +39,17 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
   private status: string;
   private disabled: boolean;
   private suspended: boolean;
-  private initialGroup: VuuGroupBy | undefined;
+  private initialGroupBy: VuuGroupBy = [];
   private initialRange: VuuRange = { from: 0, to: 0 };
-  private initialSort: any;
-  private initialFilter: Filter | undefined;
-  private initialFilterQuery: string | undefined;
+  private initialSort: VuuSort = { sortDefs: [] };
+  private initialFilter: DataSourceFilter = { filter: "" };
   private initialAggregations: any;
   private pendingServer: any;
   private clientCallback: any;
 
+  #filter: DataSourceFilter = { filter: "" };
   #groupBy: VuuGroupBy = [];
   #sort: VuuSort = { sortDefs: [] };
-  // private serverViewportId?: string;
 
   public columns: string[];
   public rowCount: number | undefined;
@@ -61,7 +61,6 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
     aggregations,
     columns,
     filter,
-    filterQuery,
     groupBy,
     sort,
     table,
@@ -83,11 +82,18 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
     this.disabled = false;
     this.suspended = false;
 
-    this.initialGroup = groupBy;
-    this.initialSort = sort;
-    this.initialFilter = filter;
-    this.initialFilterQuery = filterQuery;
-    this.initialAggregations = aggregations;
+    if (aggregations) {
+      this.initialAggregations = aggregations;
+    }
+    if (filter) {
+      this.initialFilter = filter;
+    }
+    if (groupBy) {
+      this.initialGroupBy = groupBy;
+    }
+    if (sort) {
+      this.initialSort = sort;
+    }
 
     if (!this.url) {
       throw Error(
@@ -106,9 +112,8 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
       aggregations = this.initialAggregations,
       range = this.initialRange,
       sort = this.initialSort,
-      groupBy = this.initialGroup,
+      groupBy = this.initialGroupBy,
       filter = this.initialFilter,
-      filterQuery = this.initialFilterQuery,
     }: SubscribeProps,
     callback: SubscribeCallback
   ) {
@@ -119,8 +124,10 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
     // store the range before we await the server. It's is possible the
     // range will be updated from the client before we have been able to
     // subscribe. This ensures we will subscribe with latest value.
-    this.initialGroup = groupBy;
+    this.initialFilter = filter;
+    this.initialGroupBy = groupBy;
     this.initialRange = range;
+    this.initialSort = sort;
 
     if (this.status !== "initialising") {
       //TODO check if subscription details are still the same
@@ -148,13 +155,12 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
         aggregations,
         bufferSize,
         columns,
-        filter,
-        filterQuery,
-        groupBy: this.initialGroup,
+        filter: this.initialFilter,
+        groupBy: this.initialGroupBy,
         viewport,
         table,
         range: this.initialRange,
-        sort,
+        sort: this.initialSort,
         visualLink: this.visualLink,
       },
       this.handleMessageFromServer
@@ -272,25 +278,6 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
     }
   }
 
-  //TODO I think we should have a clear filter for API clarity
-  filter(filter: Filter | undefined, filterQuery: string) {
-    if (this.viewport) {
-      const message = {
-        viewport: this.viewport,
-        type: "filterQuery",
-        filter,
-        filterQuery,
-      } as const;
-
-      if (this.server) {
-        this.server.send(message);
-      } else {
-        this.initialFilter = filter;
-        this.initialFilterQuery = filterQuery;
-      }
-    }
-  }
-
   select(selected: number[]) {
     if (this.viewport) {
       this.server?.send({
@@ -358,13 +345,39 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
   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({
+      const message = {
         viewport: this.viewport,
         type: "sort",
         sort,
-      });
+      } as const;
+      if (this.server) {
+        this.server.send(message);
+      } else {
+        this.initialSort = sort;
+      }
+    }
+  }
+
+  get filter() {
+    return this.#filter;
+  }
+
+  set filter(filter: DataSourceFilter) {
+    // TODO should we wait until server ACK before we assign #sort ?
+    this.#filter = filter;
+    console.log(`RemoteDataSource ${JSON.stringify(filter)}`);
+    if (this.viewport) {
+      const message = {
+        viewport: this.viewport,
+        type: "filter",
+        filter,
+      } as const;
+      if (this.server) {
+        this.server.send(message);
+      } else {
+        this.initialFilter = filter;
+      }
     }
   }
 
@@ -384,12 +397,12 @@ export class RemoteDataSource extends EventEmitter implements DataSource {
       if (this.server) {
         this.server.send(message);
       } else {
-        this.initialGroup = groupBy;
+        this.initialGroupBy = groupBy;
       }
     }
   }
 
-  createLink({ parentVpId, link: { fromColumn, toColumn } }: any) {
+  createLink({ parentVpId, link: { fromColumn, toColumn } }: LinkWithLabel) {
     if (this.viewport) {
       this.server?.send({
         viewport: this.viewport,

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

@@ -21,7 +21,7 @@ import {
   VuuUIMessageOutAggregate,
   VuuUIMessageOutConnect,
   VuuUIMessageOutCreateLink,
-  VuuUIMessageOutFilterQuery,
+  VuuUIMessageOutFilter,
   VuuUIMessageOutGroupby,
   VuuUIMessageOutOpenTreeNode,
   VuuUIMessageOutCloseTreeNode,
@@ -233,10 +233,10 @@ export class ServerProxy {
     this.sendIfReady(request, requestId, viewport.status === "subscribed");
   }
 
-  private filter(viewport: Viewport, message: VuuUIMessageOutFilterQuery) {
+  private filter(viewport: Viewport, message: VuuUIMessageOutFilter) {
     const requestId = nextRequestId();
-    const { filter, filterQuery } = message;
-    const request = viewport.filterRequest(requestId, filter, filterQuery);
+    const { filter } = message;
+    const request = viewport.filterRequest(requestId, filter);
     this.sendIfReady(request, requestId, viewport.status === "subscribed");
   }
 
@@ -380,7 +380,7 @@ export class ServerProxy {
             return this.sort(viewport, message);
           case "groupBy":
             return this.groupBy(viewport, message);
-          case "filterQuery":
+          case "filter":
             return this.filter(viewport, message);
           case "select":
             return this.select(viewport, message);