enable context menu on basket constituents (finos#965)

* fix behaviour in baskets module in data-test

* fix pinned column rendering gap

* enable context menu in basket constituent table in basket feature

* remove console log

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

@@ -1,12 +1,7 @@
 import {
   DataSource,
-  DataSourceMenusMessage,
   DataSourceVisualLinkCreatedMessage,
-  DataSourceVisualLinkRemovedMessage,
-  DataSourceVisualLinksMessage,
   MenuRpcResponse,
-  VuuFeatureInvocationMessage,
-  VuuFeatureMessage,
   VuuUIMessageInRPCEditReject,
   VuuUIMessageInRPCEditResponse,
 } from "@finos/vuu-data";
@@ -16,7 +11,6 @@ import {
   MenuActionHandler,
   MenuBuilder,
 } from "@finos/vuu-data-types";
-import { GridAction } from "@finos/vuu-datagrid-types";
 import { getFilterPredicate } from "@finos/vuu-filter-parser";
 import {
   ClientToServerMenuCellRPC,

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

@@ -7,10 +7,6 @@ import {
   VuuUIMessageInRPCEditReject,
   VuuUIMessageInRPCEditResponse,
 } from "@finos/vuu-data";
-import {
-  UpdateGenerator,
-  UpdateHandler,
-} from "@finos/vuu-data-test/src/rowUpdates";
 import { DataSourceRow } from "@finos/vuu-data-types";
 import {
   ClientToServerEditRpc,
@@ -19,6 +15,7 @@ import {
   VuuRange,
   VuuRowDataItemType,
 } from "@finos/vuu-protocol-types";
+import { UpdateGenerator, UpdateHandler } from "./rowUpdates";
 import { Table } from "./Table";
 
 export type RpcService = {
@@ -38,6 +35,7 @@ export interface TickingArrayDataSourceConstructorProps
 export class TickingArrayDataSource extends ArrayDataSource {
   #rpcServices: RpcService[] | undefined;
   #updateGenerator: UpdateGenerator | undefined;
+
   constructor({
     data,
     rpcServices,
@@ -87,7 +85,7 @@ export class TickingArrayDataSource extends ArrayDataSource {
       switch (updateType) {
         case "U": {
           const [rowIndex, ...updates] = updateRecord;
-          const row = data[rowIndex].slice() as DataSourceRow;
+          const row = data[rowIndex as number].slice() as DataSourceRow;
           if (row) {
             for (let i = 0; i < updates.length; i += 2) {
               const colIdx = updates[i] as number;

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

@@ -7,7 +7,7 @@ import ftse from "./reference-data/ftse100";
 import nasdaq from "./reference-data/nasdaq100";
 import sp500 from "./reference-data/sp500";
 import hsi from "./reference-data/hsi";
-import { VuuMenu } from "@finos/vuu-protocol-types";
+import { VuuMenu, VuuRowDataItemType } from "@finos/vuu-protocol-types";
 import { Table } from "../Table";
 
 // This is a 'local' columnMap
@@ -21,7 +21,6 @@ const buildDataColumnMap = (tableName: BasketsTableName) =>
   );
 
 //---------------
-// export const BasketColumnMap = buildColumnMap("basket");
 
 const { KEY } = metadataKeys;
 
@@ -116,18 +115,18 @@ function createTradingBasket(basketId: string, basketName: string) {
   );
 
   constituents.forEach(([, , description, , ric, , , quantity, weighting]) => {
-    const algo = undefined;
+    const algo = "";
     const algoParams = "";
     const limitPrice = 95;
     const notionalLocal = 0;
     const notionalUsd = 0;
     const pctFilled = 0;
     const priceSpread = 0;
-    const priceStrategyId = undefined;
-    const side = "buy";
+    const priceStrategyId = "";
+    const side = "BUY";
     const venue = "venue";
 
-    const basketTradingConstituentRow = [
+    const basketTradingConstituentRow: VuuRowDataItemType[] = [
       algo,
       algoParams,
       basketId,
@@ -157,6 +156,7 @@ function createTradingBasket(basketId: string, basketName: string) {
     const open = 0;
     const phase = "market";
     const scenario = "scenario";
+    const status = "on market";
 
     const basketTradingConstituentJoinRow = [
       algo,
@@ -183,6 +183,7 @@ function createTradingBasket(basketId: string, basketName: string) {
       ric,
       scenario,
       side,
+      status,
       venue,
       weighting,
     ];
@@ -201,7 +202,19 @@ async function createNewBasket(rpcRequest: any) {
 
 //-------------------
 
-const tables: Record<BasketsTableName, Table> = {
+const tableMaps: Record<BasketsTableName, ColumnMap> = {
+  algoType: buildDataColumnMap("algoType"),
+  basket: buildDataColumnMap("basket"),
+  basketTrading: buildDataColumnMap("basketTrading"),
+  basketTradingConstituent: buildDataColumnMap("basketTradingConstituent"),
+  basketConstituent: buildDataColumnMap("basketConstituent"),
+  basketTradingConstituentJoin: buildDataColumnMap(
+    "basketTradingConstituentJoin"
+  ),
+  priceStrategyType: buildDataColumnMap("priceStrategyType"),
+};
+
+export const tables: Record<BasketsTableName, Table> = {
   algoType: new Table(schemas.algoType, [
     ["Sniper", 0],
     ["Dark Liquidity", 1],
@@ -277,10 +290,11 @@ const createDataSource = (tableName: BasketsTableName) => {
   const { key } = schemas[tableName];
   return new TickingArrayDataSource({
     columnDescriptors,
+    dataMap: tableMaps[tableName],
     keyColumn: key,
-    table: tables[tableName],
     menu: menus[tableName],
     rpcServices: services[tableName],
+    table: tables[tableName],
     // updateGenerator: createUpdateGenerator?.(),
   });
 };

vuu-ui/packages/vuu-data-test/src/basket/basket-schemas.ts

@@ -53,6 +53,7 @@ export const schemas: Readonly<
       { name: "filledPct", serverDataType: "double" },
       { name: "fxRateToUsd", serverDataType: "double" },
       { name: "instanceId", serverDataType: "string" },
+      { name: "side", serverDataType: "string" },
       { name: "status", serverDataType: "string" },
       { name: "totalNotional", serverDataType: "double" },
       { name: "totalNotionalUsd", serverDataType: "double" },
@@ -78,6 +79,7 @@ export const schemas: Readonly<
       { name: "quantity", serverDataType: "long" },
       { name: "ric", serverDataType: "string" },
       { name: "side", serverDataType: "string" },
+      { name: "status", serverDataType: "string" },
       { name: "venue", serverDataType: "string" },
       { name: "weighting", serverDataType: "double" },
     ],
@@ -111,6 +113,7 @@ export const schemas: Readonly<
       { name: "ric", serverDataType: "string" },
       { name: "scenario", serverDataType: "string" },
       { name: "side", serverDataType: "string" },
+      { name: "status", serverDataType: "string" },
       { name: "venue", serverDataType: "string" },
       { name: "weighting", serverDataType: "double" },
     ],

vuu-ui/packages/vuu-data-test/src/basket/data-generators/index.ts

@@ -5,11 +5,14 @@ import basketConstituentGenerators from "./basketConstituent-generator";
 import basketTradingGenerators from "./basketTrading-generator";
 import basketTradingConstituentGenerators from "./basketTradingConstituent-generator";
 
-const generators: Record<BasketsTableName, RowGeneratorFactory> = {
+const generators: Record<BasketsTableName, RowGeneratorFactory | undefined> = {
+  algoType: undefined,
   basket: basketGenerators,
   basketConstituent: basketConstituentGenerators,
   basketTrading: basketTradingGenerators,
   basketTradingConstituent: basketTradingConstituentGenerators,
+  basketTradingConstituentJoin: basketTradingConstituentGenerators,
+  priceStrategyType: undefined,
 };
 
 export default generators;

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

@@ -8,15 +8,8 @@ import type {
   UpdateGenerator,
   UpdateHandler,
 } from "../rowUpdates";
-import { random } from "./reference-data";
 import { metadataKeys } from "@finos/vuu-utils";
 
-const getNewValue = (value: number) => {
-  const multiplier = random(0, 100) / 1000;
-  const direction = random(0, 10) >= 5 ? 1 : -1;
-  return value + value * multiplier * direction;
-};
-
 let _orderId = 1;
 const orderId = () => `0000000${_orderId++}`.slice(-3);
 const createOrder = (): ["I", ...VuuRowDataItemType[]] => {
@@ -45,7 +38,7 @@ export class OrderUpdateGenerator implements UpdateGenerator {
   private timer: number | undefined;
   private phase: OrderPhase = "create-order";
   private orderCount: number;
-  private columnMap: ColumnMap;
+  private columnMap?: ColumnMap;
 
   constructor(orderCount = 20) {
     this.orderCount = orderCount;
@@ -103,7 +96,7 @@ export class OrderUpdateGenerator implements UpdateGenerator {
         console.log("fill-order");
         const data = this.dataSource?.data;
         let filledCount = 0;
-        if (data) {
+        if (data && this.columnMap) {
           const count = data.length;
           const { IDX } = metadataKeys;
           const { filledQuantity: filledKey, quantity: qtyKey } =
@@ -116,8 +109,8 @@ export class OrderUpdateGenerator implements UpdateGenerator {
             } = order;
             if (filledQty < quantity) {
               const newFilledQty = Math.min(
-                quantity,
-                Math.max(100, filledQty * 1.1)
+                quantity as number,
+                Math.max(100, (filledQty as number) * 1.1)
               );
               updates.push(["U", rowIdx, filledKey, newFilledQty]);
             } else {

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

@@ -6,7 +6,6 @@ import {
   ClientToServerMenuRPC,
   LinkDescriptorWithLabel,
   VuuAggregation,
-  VuuColumnDataType,
   VuuGroupBy,
   VuuMenu,
   VuuRange,
@@ -19,10 +18,8 @@ import {
   EventEmitter,
   getAddedItems,
   getMissingItems,
-  getSelectionStatus,
   KeySet,
   logger,
-  metadataKeys,
   NULL_RANGE,
   rangeNewItems,
   resetRange,
@@ -54,18 +51,18 @@ import {
 import { aggregateData } from "./aggregate-utils";
 import { collapseGroup, expandGroup, GroupMap, groupRows } from "./group-utils";
 import { sortRows } from "./sort-utils";
+import { buildDataToClientMap, toClientRow } from "./array-data-utils";
 
 export interface ArrayDataSourceConstructorProps
   extends Omit<DataSourceConstructorProps, "bufferSize" | "table"> {
   columnDescriptors: ColumnDescriptor[];
   data: Array<VuuRowDataItemType[]>;
+  dataMap?: ColumnMap;
   keyColumn?: string;
   rangeChangeRowset?: "delta" | "full";
 }
 const { debug } = logger("ArrayDataSource");
 
-const { RENDER_IDX, SELECTED } = metadataKeys;
-
 const toDataSourceRow =
   (key: number) =>
   (data: VuuRowDataItemType[], index: number): DataSourceRow => {
@@ -88,24 +85,18 @@ const buildTableSchema = (
   return schema;
 };
 
-const toClientRow = (
-  row: DataSourceRow,
-  keys: KeySet,
-  selection: Selection
-) => {
-  const [rowIndex] = row;
-  const clientRow = row.slice() as DataSourceRow;
-  clientRow[RENDER_IDX] = keys.keyFor(rowIndex);
-  clientRow[SELECTED] = getSelectionStatus(selection, rowIndex);
-  return clientRow;
-};
-
 export class ArrayDataSource
   extends EventEmitter<DataSourceEvents>
   implements DataSource
 {
   private clientCallback: SubscribeCallback | undefined;
   private columnDescriptors: ColumnDescriptor[];
+  /** sorted offsets of data within raw data, reflecting sort order
+   * of columns specified by client.
+   */
+  private dataIndices: number[] | undefined;
+  /** Map reflecting positions of data items in raw data */
+  private dataMap: ColumnMap | undefined;
   private disabled = false;
   private groupedData: undefined | DataSourceRow[];
   private groupMap: undefined | GroupMap;
@@ -117,6 +108,7 @@ export class ArrayDataSource
   private rangeChangeRowset: "delta" | "full";
   private openTreeNodes: string[] = [];
 
+  /** Map reflecting positions of columns in client data sent to user */
   #columnMap: ColumnMap;
   #config: WithFullConfig = vanillaConfig;
   #data: readonly DataSourceRow[];
@@ -140,6 +132,7 @@ export class ArrayDataSource
     // different from RemoteDataSource
     columnDescriptors,
     data,
+    dataMap,
     filter,
     groupBy,
     keyColumn,
@@ -157,20 +150,19 @@ export class ArrayDataSource
     }
 
     this.columnDescriptors = columnDescriptors;
+    this.dataMap = dataMap;
     this.key = keyColumn
       ? this.columnDescriptors.findIndex((col) => col.name === keyColumn)
       : 0;
     this.rangeChangeRowset = rangeChangeRowset;
     this.tableSchema = buildTableSchema(columnDescriptors, keyColumn);
     this.viewport = viewport || uuid();
-
     this.#size = data.length;
-
     this.#title = title;
 
     const columns = columnDescriptors.map((col) => col.name);
-
     this.#columnMap = buildColumnMap(columns);
+    this.dataIndices = buildDataToClientMap(this.#columnMap, this.dataMap);
     this.#data = data.map<DataSourceRow>(toDataSourceRow(this.key));
 
     this.config = {
@@ -463,7 +455,9 @@ export class ArrayDataSource
 
     const rowsWithinViewport = data
       .slice(rowRange.from, rowRange.to)
-      .map((row) => toClientRow(row, this.keys, this.selectedRows));
+      .map((row) =>
+        toClientRow(row, this.keys, this.selectedRows, this.dataIndices)
+      );
 
     this.clientCallback?.({
       clientViewportId: this.viewport,
@@ -498,9 +492,11 @@ export class ArrayDataSource
       });
     }
     this.#columnMap = buildColumnMap(columns);
-    console.log({
-      columnMap: this.#columnMap,
-    });
+    this.dataIndices = buildDataToClientMap(this.#columnMap, this.dataMap);
+
+    const dataToClientMap = buildDataToClientMap(this.#columnMap, this.dataMap);
+    console.log({ dataToClientMap });
+
     this.config = {
       ...this.#config,
       columns,