From f702c2062c7aa81074ac896bcadbc97c098a86d2 Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
Date: Fri, 4 May 2018 10:55:32 +0200
Subject: [PATCH] Fix simulator and signal selection in widget edit

---
 .../dialog/edit-widget-control-creator.js     | 46 +++++++++----------
 .../dialog/edit-widget-signal-control.js      | 11 ++---
 .../dialog/edit-widget-simulator-control.js   | 12 ++---
 src/components/dialog/edit-widget.js          | 14 ++----
 src/components/widget-gauge.js                |  1 +
 src/components/widget-lamp.js                 |  1 +
 src/components/widget-plot.js                 |  1 +
 src/components/widget-table.js                |  2 +
 src/containers/visualization.js               | 15 ++++--
 9 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/src/components/dialog/edit-widget-control-creator.js b/src/components/dialog/edit-widget-control-creator.js
index 99ef3ba..1f033c0 100644
--- a/src/components/dialog/edit-widget-control-creator.js
+++ b/src/components/dialog/edit-widget-control-creator.js
@@ -36,7 +36,7 @@ import EditWidgetColorZonesControl from './edit-widget-color-zones-control';
 import EditWidgetMinMaxControl from './edit-widget-min-max-control';
 import EditWidgetHTMLContent from './edit-widget-html-content';
 
-export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulation, handleChange) {
+export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels, handleChange) {
     // Use a list to concatenate the controls according to the widget type
     var dialogControls = [];
 
@@ -47,8 +47,8 @@ export default function createControls(widgetType = null, widget = null, session
             }
             dialogControls.push(
                 <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
-                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />,
-                <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => valueBoundOnChange(e)} />,
+                <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetTextSizeControl key={3} widget={widget} handleChange={e => handleChange(e)} />,
                 <EditWidgetCheckboxControl key={4} widget={widget} controlId={'showUnit'} text="Show unit" handleChange={e => handleChange(e)} />
             );
@@ -58,8 +58,8 @@ export default function createControls(widgetType = null, widget = null, session
                   handleChange([e, {target: {id: 'signal', value: 0}}]);
               }
               dialogControls.push(
-                <EditWidgetSimulatorControl key={0} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => lampBoundOnChange(e)} />,
-                <EditWidgetSignalControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSimulatorControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => lampBoundOnChange(e)} />,
+                <EditWidgetSignalControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetTextControl key={2} widget={widget} controlId={'threshold'} label={'Threshold'} placeholder={'0.5'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
                 <EditWidgetColorControl key={3} widget={widget} controlId={'on_color'} label={'Color On'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetColorControl key={4} widget={widget} controlId={'off_color'} label={'Color Off'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
@@ -70,23 +70,23 @@ export default function createControls(widgetType = null, widget = null, session
                 handleChange([e, {target: {id: 'signals', value: []}}]);
             }
             dialogControls.push(
-                <EditWidgetTimeControl key={0} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotBoundOnChange(e)} />,
-                <EditWidgetSignalsControl key={2} controlId={'signals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTimeControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => plotBoundOnChange(e)} />,
+                <EditWidgetSignalsControl key={2} controlId={'signals'} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetMinMaxControl key={4} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
             );
             break;
         case 'Table':
             dialogControls.push(
-                <EditWidgetSimulatorControl key={0} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
+                <EditWidgetSimulatorControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
             );
             break;
         case 'Image':
             // Restrict to only image file types (MIME)
             let imageControlFiles = files == null? [] : files.filter(file => file.type.includes('image'));
             dialogControls.push(
-                <EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={imageControlFiles} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={imageControlFiles} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetAspectControl key={1} widget={widget} handleChange={e => handleChange(e)} />
             );
             break;
@@ -96,8 +96,8 @@ export default function createControls(widgetType = null, widget = null, session
             }
             dialogControls.push(
                 <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
-                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => gaugeBoundOnChange(e) } />,
-                <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => gaugeBoundOnChange(e) } />,
+                <EditWidgetSignalControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetCheckboxControl key={3} widget={widget} controlId="colorZones" text="Show color zones" handleChange={e => handleChange(e)} />,
                 <EditWidgetColorZonesControl key={4} widget={widget} handleChange={e => handleChange(e)} />,
                 <EditWidgetMinMaxControl key={5} widget={widget} controlId="value" handleChange={e => handleChange(e)} />
@@ -108,26 +108,26 @@ export default function createControls(widgetType = null, widget = null, session
                 handleChange([e, {target: {id: 'preselectedSignals', value: []}}]);
             }
             dialogControls.push(
-                <EditWidgetSimulatorControl key={0} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotTableBoundOnChange(e)} />,
-                <EditWidgetSignalsControl key={1} controlId={'preselectedSignals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSimulatorControl key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => plotTableBoundOnChange(e)} />,
+                <EditWidgetSignalsControl key={1} controlId={'preselectedSignals'} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetTextControl key={2} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetTimeControl key={3} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTimeControl key={3} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetMinMaxControl key={4} widget={widget} controlId="y" handleChange={e => handleChange(e)} />
             );
             break;
         case 'Slider':
             dialogControls.push(
-                <EditWidgetOrientation key={0} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />,
-                <EditWidgetSignalControl key={2} widget={widget} input validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
+                <EditWidgetOrientation key={0} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => valueBoundOnChange(e)} />,
+                <EditWidgetSignalControl key={2} widget={widget} input validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
             );
             break;
         case 'Button':
             dialogControls.push(
                 <EditWidgetColorControl key={0} widget={widget} controlId={'background_color'} label={'Background'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
                 <EditWidgetColorControl key={1} widget={widget} controlId={'font_color'} label={'Font color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
-                <EditWidgetSimulatorControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />,
-                <EditWidgetSignalControl key={3} widget={widget} input validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
+                <EditWidgetSimulatorControl key={2} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => valueBoundOnChange(e)} />,
+                <EditWidgetSignalControl key={3} widget={widget} input validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
             );
             break;
         case 'Box':
@@ -151,15 +151,15 @@ export default function createControls(widgetType = null, widget = null, session
             // Restrict to only xml files (MIME)
             let topologyControlFiles = files == null? [] : files.filter( file => file.type.includes('xml'));
             dialogControls.push(
-                <EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={topologyControlFiles} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
+                <EditImageWidgetControl key={0} sessionToken={sessionToken} widget={widget} files={topologyControlFiles} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
             );
             break;
 
         case 'NumberInput':
             dialogControls.push(
                 <EditWidgetTextControl key={0} widget={widget} controlId={'name'} label={'Text'} placeholder={'Enter text'} validate={id => validateForm(id)} handleChange={e => handleChange(e)} />,
-                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => valueBoundOnChange(e)} />,
-                <EditWidgetSignalControl key={2} widget={widget} input validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />
+                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => valueBoundOnChange(e)} />,
+                <EditWidgetSignalControl key={2} widget={widget} input validate={(id) => validateForm(id)} simulationModels={simulationModels} handleChange={(e) => handleChange(e)} />
             );
             break;
 
diff --git a/src/components/dialog/edit-widget-signal-control.js b/src/components/dialog/edit-widget-signal-control.js
index b0deda1..4664936 100644
--- a/src/components/dialog/edit-widget-signal-control.js
+++ b/src/components/dialog/edit-widget-signal-control.js
@@ -28,7 +28,7 @@ class EditWidgetSignalControl extends Component {
 
     this.state = {
       widget: {
-        simulator: {}
+        simulationModel: ''
       }
     };
   }
@@ -39,19 +39,16 @@ class EditWidgetSignalControl extends Component {
   }
 
   render() {
+    const simulationModel = this.props.simulationModels.find(m => m._id === this.state.widget.simulationModel);
+
     let signalsToRender = [];
 
-    if (this.props.simulation) {
-      // get selected simulation model
-      const simulationModel = this.props.simulation.models.find( model => model.simulator.node === this.state.widget.simulator.node && model.simulator.simulator === this.state.widget.simulator.simulator );
-
-      // If simulation model update the signals to render
+    if (simulationModel != null) {
       if (this.props.input) {
         signalsToRender = simulationModel ? simulationModel.inputMapping : [];
       } else {
         signalsToRender = simulationModel ? simulationModel.outputMapping : [];
       }
-      
     }
 
     return (
diff --git a/src/components/dialog/edit-widget-simulator-control.js b/src/components/dialog/edit-widget-simulator-control.js
index ec4cec5..b0a2ea9 100644
--- a/src/components/dialog/edit-widget-simulator-control.js
+++ b/src/components/dialog/edit-widget-simulator-control.js
@@ -28,7 +28,7 @@ class EditWidgetSimulatorControl extends Component {
 
     this.state = {
       widget: {
-        simulator: {}
+        simulationModel: ''
       }
     };
   }
@@ -40,15 +40,15 @@ class EditWidgetSimulatorControl extends Component {
 
   render() {
     return (
-        <FormGroup controlId="simulator">
+        <FormGroup controlId="simulationModel">
             <ControlLabel>Simulation Model</ControlLabel>
-            <FormControl componentClass="select" placeholder="Select simulation model" value={JSON.stringify(this.state.widget.simulator) || '' } onChange={(e) => this.props.handleChange(e)}>
+            <FormControl componentClass="select" placeholder="Select simulation model" value={this.state.widget.simulationModel || '' } onChange={(e) => this.props.handleChange(e)}>
             {
-              this.props.simulation.models.length === 0? (
+              this.props.simulationModels.length === 0 ? (
               <option disabled value style={{ display: 'none' }}> No simulation models available. </option>
             ) : (
-              this.props.simulation.models.map((model, index) => (
-                <option key={index} value={JSON.stringify(model.simulator)}>{model.name}</option>
+              this.props.simulationModels.map((model, index) => (
+                <option key={index} value={model._id}>{model.name}</option>
               )))
             }
             </FormControl>
diff --git a/src/components/dialog/edit-widget.js b/src/components/dialog/edit-widget.js
index daf51fe..95e20c7 100644
--- a/src/components/dialog/edit-widget.js
+++ b/src/components/dialog/edit-widget.js
@@ -35,7 +35,7 @@ class EditWidgetDialog extends React.Component {
     this.state = {
       temporal: {
         name: '',
-        simulator: {},
+        simulationModel: '',
         signal: 0
       }
     };
@@ -66,11 +66,7 @@ class EditWidgetDialog extends React.Component {
     if (e.constructor === Array) {
       // Every property in the array will be updated
       let changes = e.reduce( (changesObject, event) => {
-        if (event.target.id === 'simulator') {
-          changesObject[event.target.id] = JSON.parse(event.target.value);
-        } else {
-          changesObject[event.target.id] = event.target.value;
-        }
+        changesObject[event.target.id] = event.target.value;
 
         return changesObject;
       }, {});
@@ -78,9 +74,7 @@ class EditWidgetDialog extends React.Component {
       this.setState({ temporal: Object.assign({}, this.state.temporal, changes ) });
     } else {
         let changeObject = {};
-        if (e.target.id === 'simulator') {
-          changeObject[e.target.id] = JSON.parse(e.target.value);
-        } else if (e.target.id === 'lockAspect') {
+        if (e.target.id === 'lockAspect') {
           changeObject[e.target.id] = e.target.checked;
 
           // correct image aspect if turned on
@@ -135,7 +129,7 @@ class EditWidgetDialog extends React.Component {
             this.props.sessionToken,
             this.props.files,
             (id) => this.validateForm(id),
-            this.props.simulation,
+            this.props.simulationModels,
             (e) => this.handleChange(e));
     }
 
diff --git a/src/components/widget-gauge.js b/src/components/widget-gauge.js
index 91add2b..be1ba9c 100644
--- a/src/components/widget-gauge.js
+++ b/src/components/widget-gauge.js
@@ -36,6 +36,7 @@ class WidgetGauge extends Component {
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.simulationModel == null) {
+      this.setState({ value: 0 });
       return;
     }
 
diff --git a/src/components/widget-lamp.js b/src/components/widget-lamp.js
index c969fa0..baefe98 100644
--- a/src/components/widget-lamp.js
+++ b/src/components/widget-lamp.js
@@ -35,6 +35,7 @@ class WidgetLamp extends Component {
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.simulationModel == null) {
+      this.setState({ value: '' });
       return;
     }
 
diff --git a/src/components/widget-plot.js b/src/components/widget-plot.js
index 7187829..5ccfa5f 100644
--- a/src/components/widget-plot.js
+++ b/src/components/widget-plot.js
@@ -36,6 +36,7 @@ class WidgetPlot extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.simulationModel == null) {
+      this.setState({ data: [], legend: [] });
       return;
     }
 
diff --git a/src/components/widget-table.js b/src/components/widget-table.js
index 0e4b2ef..52d98d3 100644
--- a/src/components/widget-table.js
+++ b/src/components/widget-table.js
@@ -36,6 +36,7 @@ class WidgetTable extends Component {
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.simulationModel == null) {
+      this.setState({ rows: [], sequence: null });
       return;
     }
 
@@ -44,6 +45,7 @@ class WidgetTable extends Component {
     // check data
     if (nextProps.data == null
       || nextProps.data[simulator] == null
+      || nextProps.data[simulator].output == null
       || nextProps.data[simulator].output.length === 0 
       || nextProps.data[simulator].output.values.length === 0  
       || nextProps.data[simulator].output.values[0].length === 0) {
diff --git a/src/containers/visualization.js b/src/containers/visualization.js
index 532d856..1c41118 100644
--- a/src/containers/visualization.js
+++ b/src/containers/visualization.js
@@ -38,6 +38,7 @@ import UserStore from '../stores/user-store';
 import VisualizationStore from '../stores/visualization-store';
 import ProjectStore from '../stores/project-store';
 import SimulationStore from '../stores/simulation-store';
+import SimulationModelStore from '../stores/simulation-model-store';
 import FileStore from '../stores/file-store';
 import AppDispatcher from '../app-dispatcher';
 import NotificationsDataManager from '../data-managers/notifications-data-manager';
@@ -47,14 +48,19 @@ import '../styles/context-menu.css';
 
 class Visualization extends React.Component {
   static getStores() {
-    return [ VisualizationStore, ProjectStore, SimulationStore, FileStore, UserStore ];
+    return [ VisualizationStore, ProjectStore, SimulationStore, SimulationModelStore, FileStore, UserStore ];
   }
 
-  static calculateState(prevState) {
+  static calculateState(prevState, props) {
     if (prevState == null) {
       prevState = {};
     }
 
+    let simulationModels = [];
+    if (prevState.simulation != null) {
+      simulationModels = SimulationModelStore.getState().filter(m => prevState.simulation.models.includes(m._id));
+    }
+
     return {
       sessionToken: UserStore.getState().token,
       visualizations: VisualizationStore.getState(),
@@ -65,6 +71,7 @@ class Visualization extends React.Component {
       visualization: prevState.visualization || {},
       project: prevState.project || null,
       simulation: prevState.simulation || null,
+      simulationModels,
       editing: prevState.editing || false,
       paused: prevState.paused || false,
 
@@ -529,11 +536,11 @@ class Visualization extends React.Component {
               </ContextMenu>
           ))}
 
-          <EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={(data) => this.closeEdit(data)} widget={this.state.modalData} simulation={this.state.simulation} files={this.state.files} />
+          <EditWidget sessionToken={this.state.sessionToken} show={this.state.editModal} onClose={(data) => this.closeEdit(data)} widget={this.state.modalData} simulationModels={this.state.simulationModels} files={this.state.files} />
         </div>
       </div>
     );
   }
 }
 
-export default Fullscreenable()(Container.create(Visualization));
+export default Fullscreenable()(Container.create(Visualization, { withProps: true }));