From ed00558e84fcde4c1bac17ef6cf0c2544b118be2 Mon Sep 17 00:00:00 2001
From: Sandro Weber <webers@in.tum.de>
Date: Sun, 20 Feb 2022 15:12:33 +0100
Subject: [PATCH] trying to include compiled proto, google closure refuses to
 load

---
 package-lock.json                             | 10 ++++
 package.json                                  |  2 +
 public/index.html                             |  2 +
 src/App.js                                    |  4 +-
 .../nrp-core-dashboard/nrp-core-dashboard.js  | 51 +++++++++++++++++++
 .../simulation-tools-service.js               |  6 +++
 src/services/nrp-core/mqtt-client-service.js  | 30 ++++++-----
 7 files changed, 91 insertions(+), 14 deletions(-)
 create mode 100644 src/components/nrp-core-dashboard/nrp-core-dashboard.js

diff --git a/package-lock.json b/package-lock.json
index 0d328d4..987f269 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7489,6 +7489,11 @@
         "slash": "^3.0.0"
       }
     },
+    "google-closure-library": {
+      "version": "20220104.0.0",
+      "resolved": "https://registry.npmjs.org/google-closure-library/-/google-closure-library-20220104.0.0.tgz",
+      "integrity": "sha512-gHrIxIKcnn9pR/8sVwCLH6C4urmAekSYZKYzTawKG72HQsRnadXOCuRTA+kf6nagDCbsu6HzhSWA2rMBb2L1Aw=="
+    },
     "graceful-fs": {
       "version": "4.2.6",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@@ -11569,6 +11574,11 @@
         "path-key": "^2.0.0"
       }
     },
+    "nrp-jsproto": {
+      "version": "1.1.1-alpha.10",
+      "resolved": "https://registry.npmjs.org/nrp-jsproto/-/nrp-jsproto-1.1.1-alpha.10.tgz",
+      "integrity": "sha512-KFe2AQuhtx4wD76PIzxlhKFXtWYeUtyqSkONA8nYvIV9HfG67q09Qcnzhl745jZHZHZMC03xj9QVEr0x5so8Cg=="
+    },
     "nth-check": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
diff --git a/package.json b/package.json
index 1790b6f..02d0c98 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,11 @@
     "@material-ui/lab": "4.0.0-alpha.57",
     "bootstrap": "4.5",
     "flexlayout-react": "0.5.5",
+    "google-closure-library": "20220104.0.0",
     "jquery": "3.6.0",
     "jszip": "3.2.0",
     "mqtt": "4.3.5",
+    "nrp-jsproto": "1.1.1-alpha.10",
     "react": "^17.0.1",
     "react-bootstrap": "1.4.0",
     "react-dom": "^17.0.1",
diff --git a/public/index.html b/public/index.html
index 7f0865c..0224056 100644
--- a/public/index.html
+++ b/public/index.html
@@ -28,7 +28,9 @@
     <title>Neurorobotics Platform</title>
   </head>
   <body>
+    <script src="./google-closure-library/closure/goog/base.js"></script>
     <script src="https://iam.ebrains.eu/auth/js/keycloak.js"></script>
+
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/App.js b/src/App.js
index 3bd90d7..dad8a10 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,12 +7,12 @@ import ErrorDialog from './components/dialog/error-dialog.js';
 import ExperimentOverview from './components/experiment-overview/experiment-overview';
 import SimulationView from './components/simulation-view/simulation-view';
 import NotificationDialog from './components/dialog/notification-dialog.js';
-import MqttClientService from './services/nrp-core/mqtt-client-service';
+//import MqttClientService from './services/nrp-core/mqtt-client-service';
 
 class App extends React.Component {
 
   componentDidMount() {
-    MqttClientService.instance.connect('ws://' + window.location.hostname + ':1884');
+    //MqttClientService.instance.connect('ws://' + window.location.hostname + ':1884');
   }
 
   render() {
diff --git a/src/components/nrp-core-dashboard/nrp-core-dashboard.js b/src/components/nrp-core-dashboard/nrp-core-dashboard.js
new file mode 100644
index 0000000..108037b
--- /dev/null
+++ b/src/components/nrp-core-dashboard/nrp-core-dashboard.js
@@ -0,0 +1,51 @@
+import React from 'react';
+
+import MqttClientService from '../../services/nrp-core/mqtt-client-service';
+
+export default class NrpCoreDashboard extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.mqttBrokerUrl = 'ws://' + window.location.hostname + ':1884';
+  }
+
+  componentDidMount() {
+    MqttClientService.instance.on(MqttClientService.EVENTS.CONNECTED, this.onMqttClientConnected);
+    MqttClientService.instance.connect(this.mqttBrokerUrl);
+  }
+
+  onMqttClientConnected() {
+    this.client.subscribe('#', (err) => {
+      if (err) {
+        console.error(err);
+      }
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        {this.mqttBrokerUrl}
+      </div>
+    );
+  }
+}
+
+NrpCoreDashboard.CONSTANTS = Object.freeze({
+  TOOL_CONFIG: {
+    singleton: true,
+    flexlayoutNode: {
+      'type': 'tab',
+      'name': 'NRP-Core Dashboard',
+      'component': 'nrp-core-dashboard'
+    },
+    flexlayoutFactoryCb: () =>  {
+      return <NrpCoreDashboard />;
+    },
+    getIcon: () => {
+      return <div>
+        <span>NRP-Core Dashboard</span>
+      </div>;
+    }
+  }
+});
diff --git a/src/components/simulation-view/simulation-tools-service.js b/src/components/simulation-view/simulation-tools-service.js
index 243460a..1d16e53 100644
--- a/src/components/simulation-view/simulation-tools-service.js
+++ b/src/components/simulation-view/simulation-tools-service.js
@@ -1,3 +1,6 @@
+import NrpCoreDashboard from '../nrp-core-dashboard/nrp-core-dashboard';
+
+
 let _instance = null;
 const SINGLETON_ENFORCER = Symbol();
 
@@ -14,6 +17,7 @@ class SimulationToolsService {
     for (const toolEntry in SimulationToolsService.TOOLS) {
       this.registerToolConfig(SimulationToolsService.TOOLS[toolEntry]);
     }
+    this.registerToolConfig(NrpCoreDashboard.CONSTANTS.TOOL_CONFIG);
   }
 
   static get instance() {
@@ -25,6 +29,8 @@ class SimulationToolsService {
   }
 
   registerToolConfig(toolConfig) {
+    console.info('registerToolConfig');
+    console.info(toolConfig);
     let id = toolConfig.flexlayoutNode.component;
     if (this.tools.has(id)) {
       console.warn('SimulationToolsService.registerToolConfig() - tool with ID ' + id + ' already exists');
diff --git a/src/services/nrp-core/mqtt-client-service.js b/src/services/nrp-core/mqtt-client-service.js
index ca824d4..06ac19e 100644
--- a/src/services/nrp-core/mqtt-client-service.js
+++ b/src/services/nrp-core/mqtt-client-service.js
@@ -1,4 +1,7 @@
 import mqtt from 'mqtt';
+import { EventEmitter } from 'events';
+
+import 'nrp-jsproto/nrp-jsproto';
 
 let _instance = null;
 const SINGLETON_ENFORCER = Symbol();
@@ -6,11 +9,14 @@ const SINGLETON_ENFORCER = Symbol();
 /**
  * Service handling state and info of running simulations.
  */
-export default class MqttClientService {
+export default class MqttClientService extends EventEmitter {
   constructor(enforcer) {
+    super();
     if (enforcer !== SINGLETON_ENFORCER) {
       throw new Error('Use ' + this.constructor.name + '.instance');
     }
+
+    //console.info(proto);
   }
 
   static get instance() {
@@ -30,12 +36,6 @@ export default class MqttClientService {
     });
     this.client.on('error', this.onError);
     this.client.on('message', this.onMessage);
-
-    this.client.subscribe('#', (err) => {
-      if (err) {
-        console.error(err);
-      }
-    });
   }
 
   onError(error) {
@@ -43,9 +43,15 @@ export default class MqttClientService {
   }
 
   onMessage(topic, payload, packet) {
-    console.info('MQTT message');
-    console.info(topic);
-    console.info(payload);
-    console.info(packet);
+    console.info('MQTT message: [topic, payload, packet]');
+    console.info([topic, payload, packet]);
+
+    /*try {
+      let dump =
+    }*/
   }
-}
\ No newline at end of file
+}
+
+MqttClientService.EVENTS = Object.freeze({
+  CONNECTED: 'CONNECTED'
+});
\ No newline at end of file
-- 
GitLab