tool configs and service for testing

src/components/experiment-list/import-experiment-buttons.css

@@ -10,9 +10,9 @@
     top: 15%;
     box-shadow: 5px 5px 5px #000;
     z-index: 10001;
-  }
+}
   
-  .import-button {
+.import-button {
     cursor: pointer;
     height: 50%;
-  }
\ No newline at end of file
+}
\ No newline at end of file

src/components/simulation-view/simulation-tools-service.js

+let _instance = null;
+const SINGLETON_ENFORCER = Symbol();
+
+/**
+ * Service handling server resources for simulating experiments.
+ */
+class SimulationToolsService {
+  constructor(enforcer) {
+    if (enforcer !== SINGLETON_ENFORCER) {
+      throw new Error('Use ' + this.constructor.name + '.instance');
+    }
+
+    this.tools = new Map();
+    for (const toolEntry in SimulationToolsService.TOOLS) {
+      this.registerToolConfig(SimulationToolsService.TOOLS[toolEntry]);
+    }
+  }
+
+  static get instance() {
+    if (_instance == null) {
+      _instance = new SimulationToolsService(SINGLETON_ENFORCER);
+    }
+
+    return _instance;
+  }
+
+  registerToolConfig(toolConfig) {
+    let id = toolConfig.flexlayoutNode.component;
+    if (this.tools.has(id)) {
+      console.warn('SimulationToolsService.registerToolConfig() - tool with ID ' + id + ' already exists');
+      return;
+    }
+
+    this.tools.set(id, toolConfig);
+  }
+
+  flexlayoutNodeFactory(node) {
+    var component = node.getComponent();
+
+    let toolConfig = this.tools.get(component);
+    if (toolConfig && toolConfig.flexlayoutFactoryCb) {
+      return toolConfig.flexlayoutFactoryCb();
+    }
+
+    if (component === 'button') {
+      return <button>{node.getName()}</button>;
+    }
+    else if (component === 'nest_wiki') {
+      return <iframe src='https://en.wikipedia.org/wiki/NEST_(software)' title='nest_wiki'
+        className='flexlayout-iframe'></iframe>;
+    }
+  }
+
+  startToolDrag(flexlayoutNode, layoutReference) {
+    layoutReference.current.addTabWithDragAndDrop(flexlayoutNode.name, flexlayoutNode);
+  }
+}
+
+SimulationToolsService.TOOLS = Object.freeze({
+  NEST_DESKTOP: {
+    singleton: true,
+    flexlayoutNode: {
+      'type': 'tab',
+      'name': 'NEST Desktop',
+      'component': 'nest-desktop'
+    },
+    flexlayoutFactoryCb: () =>  {
+      return <iframe src='http://localhost:8000' title='NEST Desktop' />;
+    }
+  },
+  TEST_NEST_SERVER_DOCU: {
+    singleton: true,
+    flexlayoutNode: {
+      'type': 'tab',
+      'name': 'NRP-Core Documentation',
+      'component': 'nrp-core-docu'
+    },
+    flexlayoutFactoryCb: () =>  {
+      return <iframe src='https://hbpneurorobotics.bitbucket.io/index.html'
+        title='NRP-Core Documentation' />;
+    }
+  }
+});
+
+SimulationToolsService.CONSTANTS = Object.freeze({
+  CATEGORY: {
+    EXTERNAL_IFRAME: 'EXTERNAL_IFRAME',
+    REACT_COMPONENT: 'REACT_COMPONENT'
+  }
+});
+
+export default SimulationToolsService;

src/components/simulation-view/simulation-view.css

 .simulation-view-wrapper {
   display: grid;
-  grid-template-rows: auto auto;
+  grid-template-rows: 63px auto;
   grid-template-columns: 100px auto;
   grid-template-areas: 
       "simulation-view-header simulation-view-header"
@@ -18,9 +18,9 @@
 }
 
 .simulation-view-sidebar {
+  padding: 2px;
   grid-area: simulation-view-sidebar;
   background-color: green;
-  height: 100vh;
 }
 
 .simulation-view-mainview {
@@ -30,7 +30,11 @@
 
 .simulation-view-flexlayout {
   position: relative;
-  height: 100vh;
+  height: calc(100vh - 63px);
+}
+
+.flexlayout__tab {
+  overflow: hidden;
 }
 
 .simulation-view-controls {
@@ -59,7 +63,7 @@
   font-weight: bold;
 }
 
-.flexlayout-iframe {
+iframe {
   width: 100%;
   height: 100%;
 }
\ No newline at end of file

src/components/simulation-view/simulation-view.js

@@ -5,6 +5,8 @@ import { GiExitDoor } from 'react-icons/gi';
 import { TiMediaRecord } from 'react-icons/ti';
 import { VscDebugRestart } from 'react-icons/vsc';
 
+import SimulationToolsService from './simulation-tools-service';
+
 import '../../../node_modules/flexlayout-react/style/light.css';
 import './simulation-view.css';
 
@@ -15,18 +17,6 @@ const jsonBaseLayout = {
     'type': 'row',
     'weight': 100,
     'children': [
-      {
-        'type': 'tabset',
-        'weight': 50,
-        'selected': 0,
-        'children': [
-          {
-            'type': 'tab',
-            'name': 'FX',
-            'component':'grid'
-          }
-        ]
-      },
       {
         'type': 'tabset',
         'weight': 50,
@@ -60,17 +50,12 @@ export default class SimulationView extends React.Component {
 
     this.state = {model: FlexLayout.Model.fromJson(jsonBaseLayout)};
     console.info(this.state);
+
+    this.refLayout = React.createRef();
   }
 
   factory = (node) => {
-    var component = node.getComponent();
-    if (component === 'button') {
-      return <button>{node.getName()}</button>;
-    }
-    else if (component === 'nest_wiki') {
-      return <iframe src='https://en.wikipedia.org/wiki/NEST_(software)' title='nest_wiki'
-        className='flexlayout-iframe'></iframe>;
-    }
+    return SimulationToolsService.instance.flexlayoutNodeFactory(node);
   }
 
   render() {
@@ -99,10 +84,16 @@ export default class SimulationView extends React.Component {
           <button className='nrp-btn btn-default'><RiLayout6Line className='icon' /></button>
         </div>
         <div className='simulation-view-sidebar'>
-          sidebar
+          {Array.from(SimulationToolsService.instance.tools.values()).map(tool => {
+            return (<button onMouseDown={() => {
+              SimulationToolsService.instance.startToolDrag(
+                tool.flexlayoutNode,
+                this.refLayout);
+            }}>{tool.flexlayoutNode.name}</button>);
+          })}
         </div>
         <div className='simulation-view-mainview'>
-          <FlexLayout.Layout model={this.state.model} factory={this.factory}
+          <FlexLayout.Layout ref={this.refLayout} model={this.state.model} factory={this.factory}
             classNameMapper={classNameMapper}/>
         </div>
       </div>