first flexlayout

package-lock.json

@@ -6939,6 +6939,11 @@
       "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
       "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg=="
     },
+    "flexlayout-react": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/flexlayout-react/-/flexlayout-react-0.5.5.tgz",
+      "integrity": "sha512-y8fQQ1nfBdSmBELoD/nEplEIxRZfDtHT1Lg50M4iXkvlF9blnkQktmngiYR2tO/wr6fy2+2cV+tX0HXoeHY8cQ=="
+    },
     "flush-write-stream": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",

package.json

@@ -13,6 +13,7 @@
   "private": true,
   "dependencies": {
     "bootstrap": "4.5",
+    "flexlayout-react": "0.5.5",
     "jszip": "3.2.0",
     "react": "^17.0.1",
     "react-bootstrap": "1.4.0",

src/App.js

@@ -2,20 +2,18 @@ import React from 'react';
 
 import { HashRouter, Switch, Route } from 'react-router-dom';
 
-import EntryPage from './components/entry-page/entry-page.js';
-import ExperimentOverview from './components/experiment-overview/experiment-overview.js';
+import EntryPage from './components/entry-page/entry-page';
+import ExperimentOverview from './components/experiment-overview/experiment-overview';
+import SimulationView from './components/simulation-view/simulation-view';
 
 class App extends React.Component {
   render() {
     return (
       <HashRouter>
         <Switch>
-          <Route path='/experiments-overview'>
-            <ExperimentOverview />
-          </Route>
-          <Route path='/'>
-            <EntryPage />
-          </Route>
+          <Route path='/experiments-overview'  component={ExperimentOverview} />
+          <Route path='/simulation-view/:simID' component={SimulationView} />
+          <Route path='/' component={EntryPage} />
         </Switch>
       </HashRouter>
     );

src/components/experiment-list/simulation-details.js

 import React from 'react';
 import { FaStop, FaStopCircle } from 'react-icons/fa';
 import { ImEnter } from 'react-icons/im';
+import { withRouter } from 'react-router-dom';
 
 import timeDDHHMMSS from '../../utility/time-filter.js';
 import { EXPERIMENT_STATE } from '../../services/experiments/experiment-constants.js';
@@ -8,7 +9,7 @@ import ExperimentExecutionService from '../../services/experiments/execution/exp
 
 import './simulation-details.css';
 
-export default class SimulationDetails extends React.Component {
+class SimulationDetails extends React.Component {
   constructor() {
     super();
 
@@ -78,7 +79,13 @@ export default class SimulationDetails extends React.Component {
                   ng-click="(simulation.runningSimulation.state === STATE.CREATED) ||
                     simulation.stopping || joinExperiment(simulation, exp);"*/
                   type="button" className='nrp-btn btn-default'
-                  disabled={this.isJoinDisabled(simulation)}>
+                  disabled={this.isJoinDisabled(simulation)}
+                  onClick={() => {
+                    console.info(simulation);
+                    this.props.history.push({
+                      pathname: '/simulation-view/' + simulation.runningSimulation.simulationID
+                    });
+                  }}>
                   <ImEnter className='icon' />Join
                 </button>
                 {/* Stop button enabled provided simulation state is consistent */}
@@ -106,3 +113,4 @@ export default class SimulationDetails extends React.Component {
     );
   }
 }
+export default withRouter(SimulationDetails);

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

+import React from 'react';
+import FlexLayout from 'flexlayout-react';
+
+import '../../../node_modules/flexlayout-react/style/light.css';
+
+const jsonBaseLayout = {
+  global: {},
+  borders: [],
+  layout:{
+    'type': 'row',
+    'weight': 100,
+    'children': [
+      {
+        'type': 'tabset',
+        'weight': 50,
+        'selected': 0,
+        'children': [
+          {
+            'type': 'tab',
+            'name': 'FX',
+            'component':'grid'
+          }
+        ]
+      },
+      {
+        'type': 'tabset',
+        'weight': 50,
+        'selected': 0,
+        'children': [
+          {
+            'type': 'tab',
+            'name': 'FI',
+            'component':'grid'
+          }
+        ]
+      }
+    ]
+  }
+};
+
+export default class SimulationView extends React.Component {
+  constructor(props) {
+    super(props);
+    console.info(this.state);
+    console.info(this.props);
+
+    this.state = {model: FlexLayout.Model.fromJson(jsonBaseLayout)};
+    console.info(this.state);
+  }
+
+  factory = (node) => {
+    var component = node.getComponent();
+    if (component === 'button') {
+      return <button>{node.getName()}</button>;
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <FlexLayout.Layout model={this.state.model} factory={this.factory}/>
+      </div>
+    );
+  }
+}