some layouting, removed mqtt test code

src/components/entry-page/entry-page.js

@@ -3,7 +3,6 @@ import React from 'react';
 import NrpHeader from '../nrp-header/nrp-header.js';
 
 import './entry-page.css';
-import PlaceholderImage from '../../assets/images/Artificial_Intelligence_2.jpg';
 import NrpCoreDashboard from '../nrp-core-dashboard/nrp-core-dashboard.js';
 import TransceiverFunctionEditor from '../tf-editor/tf-editor';
 

src/components/nrp-core-dashboard/nrp-core-dashboard.js

@@ -20,14 +20,6 @@ export default class NrpCoreDashboard extends React.Component {
         console.error(err);
       }
     });
-    // As a test to make sure MqttClientService can subscribe to multiple topics (and the same topic) at once
-    let token1 = MqttClientService.instance.subscribeToTopic('test_topic', (param1) => (console.info(param1)));
-    let token2 = MqttClientService.instance.subscribeToTopic('test_topic', (param1) => (console.info(param1)));
-    let token3 = MqttClientService.instance.subscribeToTopic('test_topic', (param1) => (console.info(param1)));
-    let token4 = MqttClientService.instance.subscribeToTopic('test_topic_proto', (param1) => (console.info(param1)));
-
-    // Test unsubscribe
-    MqttClientService.instance.unsubscribe(token3);
   }
 
   render() {

src/components/tf-editor/tf-editor.css

+.tf-editor-container {
+  margin: 10px;
+}
+
+.tf-editor-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.tf-editor-icon {
+  width: 40px;
+  height: 40px;
+  background-color: yellow;
+  text-align: center;
+  border: 1px solid black;
+  margin: 5px;
+  font-size: 1.5em;
+}
+
+.tf-editor-file-ui {
+  padding: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.tf-editor-file-ui-item {
+  margin: 5px;
+}
+
+.tf-editor-ui-save {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.tf-editor-text-saved {
+  color: green;
+}
+
+.tf-editor-text-unsaved {
+  color: orange;
+}
\ No newline at end of file

src/components/tf-editor/tf-editor.js

@@ -5,6 +5,8 @@ import { Modal, Button } from 'react-bootstrap';
 import ExperimentStorageService from '../../services/experiments/files/experiment-storage-service';
 
 
+import './tf-editor.css';
+
 export default class TransceiverFunctionEditor extends React.Component {
 
   constructor(props) {
@@ -14,6 +16,7 @@ export default class TransceiverFunctionEditor extends React.Component {
     this.state = {
       selectedFilename: this.testListTfFiles[0],
       code: '',
+      textChanges: '',
       showDialogUnsavedChanges: false
     };
   }
@@ -58,6 +61,9 @@ export default class TransceiverFunctionEditor extends React.Component {
     this.setState({code: change});
     this.hasUnsavedChanges = !this.fileLoading;
     this.fileLoading = false;
+    if (this.hasUnsavedChanges) {
+      this.setState({textChanges: 'unsaved changes'});
+    }
     console.info(['this.hasUnsavedChanges', this.hasUnsavedChanges]);
   }
 
@@ -67,6 +73,10 @@ export default class TransceiverFunctionEditor extends React.Component {
       this.props.experimentId, this.state.selectedFilename, this.state.code);
     if (response.ok) {
       this.hasUnsavedChanges = false;
+      this.setState({textChanges: 'saved'});
+      setTimeout(() => {
+        this.setState({textChanges: ''});
+      }, 3000);
       return true;
     }
     else {
@@ -78,16 +88,29 @@ export default class TransceiverFunctionEditor extends React.Component {
 
   render() {
     return (
-      <div>
-        <select
-          name="selectTFFile"
-          value={this.state.selectedFilename}
-          onChange={(event) => this.onChangeSelectedFile(event)}>
-          {this.testListTfFiles.map(file => {
-            return (<option key={file} value={file}>{file}</option>);
-          })}
-        </select>
-        <button onClick={() => this.saveTF()}>Save</button>
+      <div className='tf-editor-container'>
+        <div className='tf-editor-header'>
+          <div className='tf-editor-icon'>TF</div>
+          <div className='tf-editor-file-ui'>
+            <select
+              className='tf-editor-file-ui-item'
+              name="selectTFFile"
+              value={this.state.selectedFilename}
+              onChange={(event) => this.onChangeSelectedFile(event)}>
+              {this.testListTfFiles.map(file => {
+                return (<option key={file} value={file}>{file}</option>);
+              })}
+            </select>
+            <button className='tf-editor-file-ui-item' onClick={() => this.saveTF()}>Save</button>
+            <div className={this.hasUnsavedChanges ?
+              'tf-editor-text-unsaved' : 'tf-editor-text-saved'}>
+              {this.state.textChanges}
+            </div>
+            {/*<div className='tf-editor-ui-save'>
+            </div>*/}
+          </div>
+        </div>
+
         <CodeMirror
           value={this.state.code}
           maxHeight="100%"