feat(examples): Modified Chart and Datagrid examples to use the raise…

…Intent and addIntentListener methods (morganstanley#415)

* feat(examples): Moved js-chart and js-grid to examples/fdc3-chart-and-grid folder

* feat(examples): Update to the latest packages

* feat(examples): Added js-datagrid and js-chart to modulecatalog and appdirectory samples, modified examples to use raiseIntent and addIntentListener methods, added sample logo to the js-datagrid example in the Shell example on the Ribbon menu

* feat(examples): Fixed identation of sample appdirectory and module-catalog sample, removed sample EnvironmentImageSourcePolicy setup from example

* feat(examples): Modified chart and grid examples to retrieve instrument context, added back context handling, modified DesktopAgent backend so it would retrive the first listening app when raising intent and multiple app could handle the intent, little refactoring in js/ts files in fdc3-js-client, modified C# DesktopAgent tests, added Chart on the Ribbon menu without Icon

* feat(examples): Removed .vscode folder

* feat(examples): Corrected sentence

* feat(examples): Resolve merge conflicts

* feat(examples): Fix rebase conflicts

* feat(examples): Resolved merge conflicts - redirected to 8080 port as it was unreachable from the Shell with portnumber 8081

examples/fdc3-appdirectory/apps-with-intents.json

@@ -1,70 +1,109 @@
 {
-    "applications": [
-        {
-            "appId": "Morgan Stanley",
-            "name": "Morgan Stanley",
-            "type": "web",
-            "details": {
-              "url": "http://www.morganstanley.com"
-            },
-            "interop": {
-                "intents": {}
+  "applications": [
+    {
+      "appId": "Morgan Stanley",
+      "name": "Morgan Stanley",
+      "type": "web",
+      "details": {
+        "url": "http://www.morganstanley.com"
+      },
+      "interop": {
+        "intents": {}
+      }
+    },
+    {
+      "appId": "Microsoft",
+      "name": "Microsoft",
+      "type": "web",
+      "details": {
+        "url": "http://www.microsoft.com"
+      },
+      "interop": {
+        "intents": {
+          "listensFor": {
+            "startMicrosoft": {
+              "name": "startMicrosoft",
+              "displayName": "StartMicrosoft",
+              "contexts": [
+                "fdc3.nothing"
+              ]
             }
           },
-          {
-            "appId": "Microsoft",
-            "name": "Microsoft",
-            "type": "web",
-            "details": {
-              "url": "http://www.microsoft.com"
-            },
-            "interop": {
-                "intents": {
-                  "listensFor": {
-                    "startMicrosoft": {
-                      "name": "startMicrosoft",
-                      "displayName": "StartMicrosoft",
-                      "contexts": [
-                        "fdc3.nothing"
-                      ]
-                    }
-                  },
-                  "raises": {}
-                }
-              }
-          },
-          {
-            "appId": "Google",
-            "name": "Google",
-            "type": "web",
-            "details": {
-              "url": "http://www.google.com"
-            },
-            "interop": {
-                "intents": {
-                  "listensFor": {
-                    "viewGoogle": {
-                      "name": "viewGoogle",
-                      "displayName": "ViewGoogle",
-                      "contexts": [
-                        "fdc3.testContext"
-                      ]
-                    }
-                  },
-                  "raises": {}
-                }
-              }
+          "raises": {}
+        }
+      }
+    },
+    {
+      "appId": "Google",
+      "name": "Google",
+      "type": "web",
+      "details": {
+        "url": "http://www.google.com"
+      },
+      "interop": {
+        "intents": {
+          "listensFor": {
+            "viewGoogle": {
+              "name": "viewGoogle",
+              "displayName": "ViewGoogle",
+              "contexts": [
+                "fdc3.testContext"
+              ]
+            }
           },
-          {
-            "appId": "FINOS FDC3 Workbench",
-            "name": "FINOS FDC3 Workbench",
-            "type": "web",
-            "details": {
-              "url": "https://fdc3.finos.org/toolbox/fdc3-workbench/"
-            },
-            "interop": {
-                "intents": {}
+          "raises": {}
+        }
+      }
+    },
+    {
+      "appId": "FINOS FDC3 Workbench",
+      "name": "FINOS FDC3 Workbench",
+      "type": "web",
+      "details": {
+        "url": "https://fdc3.finos.org/toolbox/fdc3-workbench/"
+      },
+      "interop": {
+        "intents": {}
+      }
+    },
+    {
+      "appId": "js-grid",
+      "name": "Js Datagrid Example",
+      "type": "web",
+      "details": {
+        "url": "http://localhost:4200/"
+      },
+      "interop": {
+        "intents": {
+          "listensFor": {},
+          "raises": {
+            "ViewChart": [
+              "fdc3.instrument"
+            ]
+          }
+        }
+      }
+    },
+    {
+      "appId": "js-chart",
+      "name": "Js Chart Example",
+      "type": "web",
+      "details": {
+        "url": "http://localhost:8080/"
+      },
+      "interop": {
+        "intents": {
+          "listensFor": {
+            "ViewChart": {
+              "name": "ViewChart",
+              "displayName": "ViewChart",
+              "contexts": [
+                "fdc3.instrument"
+              ]
             }
           }
-    ]
+        }
+      }
+    }
+  ]
 }

examples/fdc3-chart-and-grid/js-chart/chart.js

@@ -0,0 +1,96 @@
+import Chart from 'highcharts/es-modules/Core/Chart/Chart.js';
+import ColumnSeries from 'highcharts/es-modules/Series/Column/ColumnSeries.js';
+import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
+import * as Highcharts from 'highcharts';
+import { ContextTypes } from '@finos/fdc3';
+import { Intents } from '@finos/fdc3';
+
+let chart;
+let intentListener;
+let contextListener;
+let currentChannel;
+
+NoDataToDisplay(Highcharts);
+
+window.addEventListener('load', function() {
+  chart = Highcharts.chart('container', {
+
+      chart: {
+        type: 'column',
+        events: {
+          load: requestData
+        }
+      },
+      title: {
+        text: 'Monthly Sales Data'
+      },
+      yAxis: {
+        minPadding: 0.2,
+        maxPadding: 0.2,
+        title: {
+          text: 'Value',
+          margin: 80,
+        }
+      },
+      xAxis: {
+        categories: ['Jan','Feb','March','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+      },
+      series: [{
+        name: 'Buy',
+        data: [] 
+      }, {
+        name: 'Sell',
+        data: []
+      }]
+    });
+});
+
+window.addEventListener('close', async function(){
+  if (this.intentListener) {
+    await this.intentListener.unsubscribe();
+    await this.contextListener.unsubscribe();
+  }
+});
+
+async function requestData() {
+  (async () => {
+    intentListener = await window.fdc3.addIntentListener(Intents.ViewChart, (context, contextMetada) => {
+      console.log("Intent was handled by the chart. Received context:", context, ", metadata:", contextMetada);
+    });
+
+    currentChannel = await window.fdc3.getCurrentChannel();
+
+    if(!currentChannel) {
+      await window.fdc3.joinUserChannel("default");
+    }
+
+    contextListener = await window.fdc3.addContextListener(ContextTypes.Instrument, (context, metadata) => {
+      if(context.id) {
+        chart.setTitle({ text: "Monthly sales for " + context.id.ticker });
+        chart.series[0].setData([]);
+        chart.series[1].setData([]);
+
+        const symbolData = symbols.find((element) => element.symbol == context.id.ticker);
+
+        symbolData.buy.forEach(function (p) {
+          chart.series[0].addPoint(p, false);
+        });
+
+        symbolData.sell.forEach(function (p) {
+          chart.series[1].addPoint(p, false);
+        });
+
+        chart.redraw();
+      }
+    });
+
+  })();
+}
+
+let symbols = [
+  {symbol: 'AAPL', sell: [ 62, 93, 114, 140, 150, 161, 191, 206, 224, 255, 286, 295], buy: [18, 49, 62, 110, 134, 162, 166, 210, 215, 277, 290, 297] },
+  {symbol: 'IBM', sell: [ 83, 78, 98, 93, 106, 82, 45, 305, 263, 33, 112, 87 ], buy: [49, 71, 106, 129, 144, 63, 89, 15, 203, 58, 115, 32] },
+  {symbol: 'TSLA', sell: [ 33, 62, 64, 94, 124, 166, 186, 191, 225, 247, 267, 294], buy: [33, 93, 124, 177, 187, 210, 225, 234, 236, 247, 250, 282] },
+  {symbol:'SMSN', sell: [30, 37, 67, 86, 182, 199, 219, 225, 238, 245, 250, 262], buy: [14, 25, 73, 84, 138, 155, 181, 195, 200, 209, 231, 254] },
+  {symbol: 'GOOG', sell: [28, 29, 57, 109, 129, 184, 196, 224, 230, 259, 277, 278], buy: [25, 42, 43, 175, 189, 190, 201, 218, 223, 231, 263, 284] }
+];

examples/js-chart/package.json → examples/fdc3-chart-and-grid/js-chart/package.json

@@ -13,16 +13,16 @@
   },
   "dependencies": {
     "@finos/fdc3": "^2.0.3",
-    "bootstrap": "5.2.3",
-    "highcharts": "11.1.0",
-    "jquery": "3.6.3",
-    "tslib": "2.5.0"
+    "bootstrap": "5.3.2",
+    "highcharts": "11.3.0",
+    "jquery": "3.7.1",
+    "tslib": "2.6.2"
   },
   "devDependencies": {
     "http-server": "14.1.1",
-    "rimraf": "^4.4.0",
-    "rollup": "^3.14.0",
-    "@rollup/plugin-commonjs": "24.0.1",
-    "@rollup/plugin-node-resolve": "15.1.0"
+    "rimraf": "5.0.5",
+    "rollup": "4.9.5",
+    "@rollup/plugin-commonjs": "25.0.7",
+    "@rollup/plugin-node-resolve": "15.2.3"
   }
 }

examples/fdc3-chart-and-grid/js-datagrid/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@morgan-stanley/composeui-example-grid",
+  "version": "0.1.0-alpha.1",
+  "private": true,
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test --watch=false"
+  },
+  "dependencies": {
+    "@angular/animations": "17.0.9",
+    "@angular/cdk": "17.0.5",
+    "@angular/common": "17.0.9",
+    "@angular/compiler": "17.0.9",
+    "@angular/core": "17.0.9",
+    "@angular/flex-layout": "^15.0.0-beta.42",
+    "@angular/forms": "17.0.9",
+    "@angular/material": "17.0.5",
+    "@angular/platform-browser": "17.0.9",
+    "@angular/platform-browser-dynamic": "17.0.9",
+    "@angular/router": "17.0.9",
+    "@finos/fdc3": "2.0.3",
+    "material-icons": "1.13.12",
+    "rxjs": "7.8.1",
+    "tslib": "2.6.2",
+    "zone.js": "0.14.3"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "17.0.10",
+    "@angular/cli": "17.0.10",
+    "@angular/compiler-cli": "17.0.9",
+    "@types/jasmine": "5.1.4",
+    "jasmine-core": "5.1.1",
+    "karma": "6.4.2",
+    "karma-chrome-launcher": "~3.2.0",
+    "karma-coverage": "2.2.1",
+    "karma-jasmine": "~5.1.0",
+    "karma-jasmine-html-reporter": "2.1.0",
+    "typescript": "5.2.2"
+  }
+}

examples/js-datagrid/src/app/main-view/datagrid/datagrid.component.ts → examples/fdc3-chart-and-grid/js-datagrid/src/app/main-view/datagrid/datagrid.component.ts

@@ -6,6 +6,7 @@ import { MatPaginator, MatPaginatorIntl, PageEvent } from '@angular/material/pag
 import { MatTableDataSource } from '@angular/material/table';
 import { Symbol } from '../models/Symbol';
 import { MockDataService } from '../services/mock-data.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'app-datagrid',
@@ -20,18 +21,17 @@ export class DatagridComponent implements OnInit, AfterViewInit {
   public marketData: MatTableDataSource<Symbol> = new MatTableDataSource<Symbol>();
   public displayedColumns: string[] = ['symbol', 'fullname', 'avarageProfit', 'amount', 'symbolRating'];
   public selection: SelectionModel<Symbol>;  
-
   public lowValue: number = 0;
   public highValue: number = 5;
-
-  private chartWindow: Window|null;
+  private latestSelectedSymbol: Symbol;
+  private subscription: Subscription;
 
   constructor(private ngZone: NgZone, private mockDataService: MockDataService){
     this.selection = new SelectionModel<Symbol>(false, []);
   }
 
   ngOnInit(){
-    const subscribingToMarketData = this.mockDataService.subject
+    this.subscription = this.mockDataService.subject
       .subscribe((data) => {
         this.marketData.data = data;
       });
@@ -45,8 +45,8 @@ export class DatagridComponent implements OnInit, AfterViewInit {
        (event) => console.log(event));
   }
 
-  public async onRowClicked(symbol: Symbol){
-    console.log(symbol.symbol);
+  public async onRowClicked(symbol: Symbol) {
+    this.latestSelectedSymbol = symbol;
     await this.mockDataService.publishSymbolData(symbol);
   }
 
@@ -61,11 +61,7 @@ export class DatagridComponent implements OnInit, AfterViewInit {
     return event;
   }
 
-  public onButtonClick(){
-    if(this.chartWindow == null || this.chartWindow.closed == true){
-      this.chartWindow = window.open('http://localhost:8080');
-    }else{
-      console.log('The chart is already opened.. ', this.chartWindow);
-    }
+  public async onButtonClick(){
+    await this.mockDataService.openChart(this.latestSelectedSymbol);
   }
 }