Merge pull request #1462 from finos/array-datasource-fix

Array datasource fix

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

@@ -50,6 +50,7 @@ import {
   vanillaConfig,
   withConfigDefaults,
   DataSourceConfigChanges,
+  selectionCount,
 } from "@finos/vuu-utils";
 import { aggregateData } from "./aggregate-utils";
 import { buildDataToClientMap, toClientRow } from "./array-data-utils";
@@ -117,6 +118,7 @@ export class ArrayDataSource
   #columnMap: ColumnMap;
   #config: WithFullConfig = vanillaConfig;
   #data: DataSourceRow[];
+  #keys = new KeySet(NULL_RANGE);
   #links: LinkDescriptorWithLabel[] | undefined;
   #range: VuuRange = NULL_RANGE;
   #selectedRowsCount = 0;
@@ -130,7 +132,6 @@ export class ArrayDataSource
   public tableSchema: TableSchema;
   public viewport: string;
 
-  private keys = new KeySet(this.#range);
   protected processedData: DataSourceRow[] | undefined = undefined;
 
   constructor({
@@ -206,7 +207,7 @@ export class ArrayDataSource
       aggregations || columns || filterSpec || groupBy || sort;
     if (hasConfigProps) {
       if (range) {
-        this.#range = range;
+        this.setRange(range);
       }
       config = {
         ...config,
@@ -278,10 +279,11 @@ export class ArrayDataSource
   }
 
   select(selected: Selection) {
-    this.#selectedRowsCount = selected.length;
+    this.#selectedRowsCount = selectionCount(selected);
     debug?.(`select ${JSON.stringify(selected)}`);
     this.selectedRows = selected;
     this.setRange(resetRange(this.#range), true);
+    this.emit("row-selection", selected, this.#selectedRowsCount);
   }
 
   openTreeNode(key: string) {
@@ -563,7 +565,7 @@ export class ArrayDataSource
   private setRange(range: VuuRange, forceFullRefresh = false) {
     if (range.from !== this.#range.from || range.to !== this.#range.to) {
       this.#range = range;
-      const keysResequenced = this.keys.reset(range);
+      const keysResequenced = this.#keys.reset(range);
       this.sendRowsToClient(forceFullRefresh || keysResequenced);
     } else if (forceFullRefresh) {
       this.sendRowsToClient(forceFullRefresh);
@@ -576,7 +578,7 @@ export class ArrayDataSource
         clientViewportId: this.viewport,
         mode: "update",
         rows: [
-          toClientRow(row, this.keys, this.selectedRows, this.dataIndices),
+          toClientRow(row, this.#keys, this.selectedRows, this.dataIndices),
         ],
         type: "viewport-update",
       });
@@ -590,7 +592,7 @@ export class ArrayDataSource
       const rowsWithinViewport = data
         .slice(rowRange.from, rowRange.to)
         .map((row) =>
-          toClientRow(row, this.keys, this.selectedRows, this.dataIndices)
+          toClientRow(row, this.#keys, this.selectedRows, this.dataIndices)
         );
 
       this.clientCallback?.({

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

@@ -45,6 +45,7 @@ import {
   vanillaConfig,
   withConfigDefaults,
   DataSourceConfigChanges,
+  selectionCount,
 } from "@finos/vuu-utils";
 import { getServerAPI, ServerAPI } from "./connection-manager";
 import { isDataSourceConfigMessage } from "./data-source";
@@ -314,13 +315,14 @@ export class VuuDataSource
   select(selected: Selection) {
     //TODO this isn't always going to be correct - need to count
     // selection block items
-    this.#selectedRowsCount = selected.length;
+    this.#selectedRowsCount = selectionCount(selected);
     if (this.viewport) {
       this.server?.send({
         viewport: this.viewport,
         type: "select",
         selected,
       });
+      this.emit("row-selection", selected, this.#selectedRowsCount);
     }
   }
 

vuu-ui/packages/vuu-data-test/src/TickingArrayDataSource.ts

@@ -235,10 +235,9 @@ export class TickingArrayDataSource extends ArrayDataSource {
           return rpcService.service(rpcRequest) as Promise<T>;
         }
       }
-      const selectedRows = this.getSelectedRows();
       return rpcService.service({
         ...rpcRequest,
-        selectedRows,
+        selectedRowIds: this.getSelectedRowIds(),
       }) as Promise<T>;
     } else {
       console.log(`no implementation for PRC service ${rpcRequest.rpcName}`);

vuu-ui/packages/vuu-data-test/src/VuuModule.ts

@@ -190,6 +190,14 @@ export class VuuModule<T extends string = string> implements IVuuModule<T> {
     return () => this.suggestionFetcher;
   }
 
+  protected get sessionTableMap() {
+    return this.#sessionTableMap;
+  }
+
+  protected get tables() {
+    return this.#tables;
+  }
+
   private getSessionTable() {
     if (Object.keys(this.#sessionTableMap).length === 1) {
       const [sessionTable] = Object.values(this.#sessionTableMap);
@@ -273,7 +281,11 @@ export class VuuModule<T extends string = string> implements IVuuModule<T> {
         const newRow = sessionTable.data[i];
         const { column, value } = rpcRequest.namedParams;
         const keyIndex = sessionTable.map[sessionTable.schema.key];
-        sessionTable.update(String(newRow[keyIndex]), column as string, value);
+        sessionTable.update(
+          String(newRow[keyIndex]),
+          column as string,
+          value as VuuRowDataItemType
+        );
       }
       return {
         action: {
@@ -310,7 +322,7 @@ export class VuuModule<T extends string = string> implements IVuuModule<T> {
     }
   };
 
-  private createSessionTableFromSelectedRows(
+  protected createSessionTableFromSelectedRows(
     { data, map, schema }: Table,
     selectedRowIds: string[]
   ) {

vuu-ui/packages/vuu-data-test/src/simul/SimulModule.ts

@@ -0,0 +1,61 @@
+import { uuid } from "@finos/vuu-utils";
+import { VuuTable } from "@finos/vuu-protocol-types";
+import {
+  RpcService,
+  RpcServiceRequest,
+  VuuModule,
+  VuuModuleConstructorProps,
+  withParams,
+} from "../VuuModule";
+import { SimulTableName } from "./simul-schemas";
+
+/**
+ * This is an example of how we might extend the built-in VuuModule to
+ * implement a module-specific service in such a way that it can invoke
+ * methods on the VuuModule.
+ */
+export class SimulModule extends VuuModule<SimulTableName> {
+  constructor(props: VuuModuleConstructorProps) {
+    super(props);
+  }
+
+  getServices(tableName: SimulTableName) {
+    return this.#services.concat(super.getServices(tableName));
+  }
+
+  private openEditSession = async (rpcRequest: RpcServiceRequest) => {
+    if (withParams(rpcRequest)) {
+      const { namedParams, selectedRowIds } = rpcRequest;
+      if (selectedRowIds && namedParams.table) {
+        const table = namedParams.table as VuuTable;
+        const dataTable = this.tables[table.table as SimulTableName];
+
+        const sessionTable = this.createSessionTableFromSelectedRows(
+          dataTable,
+          selectedRowIds
+        );
+
+        const sessionTableName = `${table.table}-${uuid()}`;
+        this.sessionTableMap[sessionTableName] = sessionTable;
+
+        return {
+          table: {
+            module: "SIMUL",
+            table: sessionTableName,
+          },
+          tableSchema: dataTable.schema,
+          type: "VIEW_PORT_RPC_REPONSE",
+          requestId: "request_id",
+          rpcName: "openEditSession",
+        };
+      }
+    }
+  };
+
+  #services: RpcService[] = [
+    {
+      rpcName: "openEditSession",
+      service: this.openEditSession,
+    },
+  ];
+}

vuu-ui/packages/vuu-data-test/src/simul/simul-module.ts

@@ -10,8 +10,9 @@ import { instrumentsExtendedTable } from "./reference-data/instruments-extended"
 import { ordersTable } from "./reference-data/orders";
 import { pricesTable } from "./reference-data/prices";
 import { schemas, type SimulTableName } from "./simul-schemas";
-import { RpcService, RpcServiceRequest, VuuModule } from "../VuuModule";
+import { RpcService, RpcServiceRequest } from "../VuuModule";
 import { MenuRpcResponse } from "packages/vuu-data-types";
+import { SimulModule } from "./SimulModule";
 
 const undefinedTables = {
   childOrders: undefined,
@@ -122,7 +123,7 @@ const services: Record<SimulTableName, RpcService[] | undefined> = {
   ],
 };
 
-export const simulModule = new VuuModule<SimulTableName>({
+export const simulModule = new SimulModule({
   menus,
   name: "SIMUL",
   schemas,

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

@@ -340,6 +340,7 @@ export type DataSourceEvents = {
   optimize: (optimize: OptimizeStrategy) => void;
   range: (range: VuuRange) => void;
   resize: (size: number) => void;
+  "row-selection": (selection: Selection, selectedRowCount: number) => void;
   subscribed: (subscription: DataSourceSubscribedMessage) => void;
   unsubscribed: DataSourceEventHandler;
   disabled: DataSourceEventHandler;

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

@@ -411,7 +411,7 @@ export interface ServerToClientRPC {
 export interface ClientToServerViewportRpcCall {
   type: "VIEW_PORT_RPC_CALL";
   rpcName: string;
-  namedParams: { [key: string]: VuuRowDataItemType };
+  namedParams: { [key: string]: VuuRowDataItemType | VuuTable };
   params: string[];
   vpId: string;
 }
@@ -424,7 +424,7 @@ export interface ServerToClientViewportRpcResponse {
   };
   type: "VIEW_PORT_RPC_REPONSE";
   method: string;
-  namedParams: { [key: string]: VuuRowDataItemType };
+  namedParams: { [key: string]: VuuRowDataItemType | VuuTable };
   params: string[];
   vpId: string;
 }

vuu-ui/packages/vuu-shell/src/__tests__/ShellLayout.cy.tsx

@@ -63,7 +63,7 @@ describe("ShellLayout", () => {
         cy.mount(<SimpleShellMultiLayouts />);
         cy.findByRole("img", { name: "Create Tab" }).realClick();
         cy.findAllByRole("tab").should("have.length", 4);
-        cy.findByTestId("custom-placeholder2").should("be.visible");
+        cy.findByTestId("custom-placeholder").should("be.visible");
       });
     });
   });

vuu-ui/packages/vuu-utils/src/selection-utils.ts

@@ -330,3 +330,14 @@ export type SelectionDiff = {
   added: SelectionItem[];
   removed: SelectionItem[];
 };
+
+export const selectionCount = (selected: Selection) => {
+  let count = selected.length;
+  for (const selectionItem of selected){
+    if (Array.isArray(selectionItem)){
+      const [from, to] = selectionItem;
+      count += (to - (from + 1));
+    }
+  }
+  return count;
+}

vuu-ui/showcase/src/examples/Shell/ShellLayout.examples.tsx

@@ -210,7 +210,7 @@ export const SimpleShellMultiLayouts = () => {
   const persistNothing = useMemo(() => new StaticPersistenceManager({}), []);
 
   const workspaceProps = useMemo<WorkspaceProps>(() => {
-    const placeHolder = {
+    const layoutPlaceholderJSON = {
       type: "Placeholder",
       props: {
         "data-testid": "custom-placeholder",
@@ -219,11 +219,10 @@ export const SimpleShellMultiLayouts = () => {
         },
       },
     };
-    const layouts = [
+    const layoutJSON = [
       {
         type: "Placeholder",
         props: {
-          "data-testid": "custom-placeholder1",
           style: {
             background: "yellow",
           },
@@ -241,16 +240,15 @@ export const SimpleShellMultiLayouts = () => {
       {
         type: "Placeholder",
         props: {
-          "data-testid": "custom-placeholder3",
           style: {
             background: "green",
           },
         },
       },
     ];
     return {
-      layoutJSON: layouts,
-      layoutPlaceholderJSON: placeHolder,
+      layoutJSON,
+      layoutPlaceholderJSON,
       activeLayoutIndex: 1,
     };
   }, []);