add visual links

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

@@ -38,6 +38,7 @@ import {
   isTableLocation,
 } from "@finos/vuu-utils";
 import { Button } from "@salt-ds/core";
+import { TickingArrayDataSource } from "@finos/vuu-data-test";
 import { useCallback } from "react";
 
 const NO_CONFIG: MenuActionConfig = {};
@@ -270,6 +271,16 @@ export const useVuuMenuActions = ({
         });
         return true;
       } else if (menuId === "link-table") {
+        const { links } = dataSource;
+        console.log("tables linked");
+        (dataSource as TickingArrayDataSource).sendBroadcastMessage({
+          sourceId: (dataSource as TickingArrayDataSource).viewport,
+          sourceColumn: "basketId",
+          type: "subscribe-link-filter",
+          targetId: links?.[0].parentClientVpId as string,
+          targetColumn: "id",
+        });
+
         return (
           (dataSource.visualLink = options as LinkDescriptorWithLabel), true
         );

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

@@ -46,9 +46,11 @@ type DataSourceBroadcastSubscribeMessage = {
   targetId: string;
   targetColumn: string;
   sourceId: string;
+  sourceColumn?: string;
 };
 
 type DataSourceBroadcastSelectionMessage = {
+  sourceColumnName?: string;
   columnName: string;
   linkType: "subscribe-link-filter" | "subscribe-link-select";
   targetId: string;
@@ -65,6 +67,7 @@ const isMessageForSelf = (message: DataSourceBroadcastMessage, id: string) =>
   message.targetId === id;
 
 type LinkSubscription = {
+  sourceColumnName?: string;
   columnName: string;
   linkType: "subscribe-link-filter" | "subscribe-link-select";
 };
@@ -148,8 +151,9 @@ export class TickingArrayDataSource extends ArrayDataSource {
       this.#selectionLinkSubscribers?.size ?? 0;
     if (numberOfSelectionSubscribers > 0) {
       this.#selectionLinkSubscribers?.forEach(
-        ({ columnName, linkType }, targetId) => {
+        ({ sourceColumnName, columnName, linkType }, targetId) => {
           this.sendBroadcastMessage({
+            sourceColumnName,
             columnName,
             linkType,
             sourceId: this.viewport,
@@ -320,6 +324,7 @@ export class TickingArrayDataSource extends ArrayDataSource {
               LinkSubscription
             >());
           subscribers.set(message.sourceId, {
+            sourceColumnName: message.sourceColumn,
             columnName: message.targetColumn,
             linkType: message.type,
           });
@@ -328,7 +333,8 @@ export class TickingArrayDataSource extends ArrayDataSource {
 
       case "selection-changed":
         {
-          const { columnName, linkType, selectedValues } = message;
+          const { sourceColumnName, columnName, linkType, selectedValues } =
+            message;
           const selectedIndices = [];
           const colIndex = this.columnMap[columnName];
           if (linkType === "subscribe-link-select") {
@@ -341,7 +347,9 @@ export class TickingArrayDataSource extends ArrayDataSource {
             this.select(selectedIndices);
           } else {
             this.filter = {
-              filter: `${columnName} in ["${selectedValues.join('","')}"]`,
+              filter: `${sourceColumnName} in ["${selectedValues.join(
+                '","'
+              )}"]`,
             };
           }
         }

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

@@ -9,16 +9,18 @@ import {
 import {
   ClientToServerMenuRPC,
   ClientToServerViewportRpcCall,
-  LinkDescriptorWithLabel,
   TypeaheadParams,
   VuuMenu,
   VuuRowDataItemType,
   VuuTable,
+  VuuLink,
+  LinkDescriptorWithLabel,
 } from "@finos/vuu-protocol-types";
 import { uuid } from "@finos/vuu-utils";
 import { Table, buildDataColumnMapFromSchema } from "./Table";
 import { TickingArrayDataSource } from "./TickingArrayDataSource";
 import { makeSuggestions } from "./makeSuggestions";
+import { BasketsTableName } from "./basket";
 
 export interface IVuuModule<T extends string = string> {
   createDataSource: (tableName: T) => DataSource;
@@ -31,7 +33,7 @@ export interface VuuModuleConstructorProps<T extends string = string> {
   schemas: Record<T, Readonly<TableSchema>>;
   services?: Record<T, RpcService[] | undefined>;
   tables: Record<T, Table>;
-  visualLinks?: Record<T, LinkDescriptorWithLabel[] | undefined>;
+  visualLinks?: Record<T, VuuLink[] | undefined>;
 }
 
 export type SessionTableMap = Record<string, Table>;
@@ -63,14 +65,71 @@ export type RpcService = {
   service: (rpcRequest: RpcServiceRequest) => Promise<unknown>;
 };
 
+class CompLink {
+  #compLinks: Record<BasketsTableName, LinkDescriptorWithLabel[] | undefined> =
+    {
+      algoType: undefined,
+      basket: undefined,
+      basketConstituent: undefined,
+      basketTrading: undefined,
+      basketTradingConstituent: undefined,
+      basketTradingConstituentJoin: undefined,
+      priceStrategyType: undefined,
+    };
+
+  getLink = (
+    childTable: BasketsTableName,
+    subscriptionMap: Map<string, string[]>,
+    tempLinks: VuuLink[]
+  ) => {
+    for (let i = 0; i < tempLinks.length; i++) {
+      if (subscriptionMap.get(tempLinks[i].toTable)) {
+        const newLink: LinkDescriptorWithLabel = {
+          parentClientVpId: subscriptionMap.get(
+            tempLinks[i].toTable
+          )?.[0] as string,
+          parentVpId: subscriptionMap.get(tempLinks[i].toTable)?.[0] as string,
+          link: tempLinks[i],
+        };
+        this.updateLink(childTable, newLink);
+      }
+    }
+    console.log("visualLinks: ", this.#compLinks);
+    return this.#compLinks;
+  };
+
+  updateLink = (
+    childTable: BasketsTableName,
+    newLink: LinkDescriptorWithLabel
+  ) => {
+    if (this.#compLinks[childTable]) {
+      const compLinks = this.#compLinks?.[
+        childTable
+      ] as LinkDescriptorWithLabel[];
+      for (let i = 0; i < compLinks.length; i++) {
+        if (compLinks[i].parentVpId === newLink.parentVpId) {
+          console.log("existed");
+        } else {
+          compLinks?.push(newLink);
+        }
+      }
+    } else {
+      this.#compLinks[childTable] = [newLink];
+    }
+  };
+}
+
+const vLink = new CompLink();
+
 export class VuuModule<T extends string = string> implements IVuuModule<T> {
   #menus: Record<T, VuuMenu | undefined> | undefined;
   #name: string;
   #schemas: Record<T, Readonly<TableSchema>>;
   #sessionTableMap: SessionTableMap = {};
   #tables: Record<T, Table>;
   #tableServices: Record<T, RpcService[] | undefined> | undefined;
-  #visualLinks: Record<T, LinkDescriptorWithLabel[] | undefined> | undefined;
+  #visualLinks: Record<T, VuuLink[] | undefined> | undefined;
+  #subscriptionMap: Map<string, string[]> = new Map();
 
   constructor({
     menus,
@@ -94,10 +153,24 @@ export class VuuModule<T extends string = string> implements IVuuModule<T> {
     console.log("<subscription-open> register new viewport", {
       subscriptionDetails,
     });
+
+    const parentTable = subscriptionDetails.tableSchema.table.table;
+    this.#subscriptionMap.set(parentTable, [
+      subscriptionDetails.clientViewportId,
+    ]);
+    console.log("subscriptionMap: ", this.#subscriptionMap);
   };
 
   private unregisterViewport = (viewportId: string) => {
     console.log(`<subscription-closed> unregister viewport ${viewportId}`);
+
+    for (const subscription of this.#subscriptionMap) {
+      if (subscription[1].toString() === viewportId) {
+        this.#subscriptionMap.delete(subscription[0]);
+      }
+    }
+    console.log("subscriptionMap: ", this.#subscriptionMap);
+    //TODO: update visual links
   };
 
   createDataSource = (tableName: T) => {
@@ -112,7 +185,14 @@ export class VuuModule<T extends string = string> implements IVuuModule<T> {
       menu: this.#menus?.[tableName],
       rpcServices: this.getServices(tableName),
       sessionTables: this.#sessionTableMap,
-      visualLinks: this.#visualLinks?.[tableName],
+      visualLinks:
+        this.#visualLinks?.[tableName] === undefined
+          ? undefined
+          : vLink.getLink(
+              tableName as BasketsTableName,
+              this.#subscriptionMap,
+              this.#visualLinks[tableName] as VuuLink[]
+            )[tableName],
     });
 
     dataSource.on("subscribed", this.registerViewport);

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

@@ -1,5 +1,6 @@
 import {
-  LinkDescriptorWithLabel,
+  // LinkDescriptorWithLabel,
+  VuuLink,
   VuuMenu,
   VuuRowDataItemType,
 } from "@finos/vuu-protocol-types";
@@ -214,11 +215,14 @@ export const tables: Record<BasketsTableName, Table> = {
 
 const visualLinks: Record<
   BasketsTableName,
-  LinkDescriptorWithLabel[] | undefined
+  // LinkDescriptorWithLabel[]
+  VuuLink[] | undefined
 > = {
   algoType: undefined,
   basket: undefined,
-  basketConstituent: undefined,
+  basketConstituent: [
+    { fromColumn: "basketId", toColumn: "id", toTable: "basket" },
+  ],
   basketTrading: undefined,
   basketTradingConstituent: undefined,
   basketTradingConstituentJoin: undefined,

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

@@ -1,7 +1,7 @@
 import {
   ClientToServerMenuRowRPC,
-  LinkDescriptorWithLabel,
   ShowNotificationAction,
+  VuuLink,
   VuuMenu,
 } from "@finos/vuu-protocol-types";
 import { Table, buildDataColumnMap, joinTables } from "../Table";
@@ -46,10 +46,7 @@ const tables: Record<SimulTableName, Table> = {
   prices: pricesTable,
 };
 
-const visualLinks: Record<
-  SimulTableName,
-  LinkDescriptorWithLabel[] | undefined
-> = {
+const visualLinks: Record<SimulTableName, VuuLink[] | undefined> = {
   ...undefinedTables,
 };