Merge branch '67-edit-controls-fix' into 'develop'

Resolve "While editing a widget, update the rest of the fields after changing one."

See merge request !12

package.json

@@ -26,6 +26,7 @@
     "rc-slider": "^7.0.1"
   },
   "devDependencies": {
+    "chai": "^3.5.0",
     "react-scripts": "0.9.3"
   },
   "scripts": {

src/__tests__/components/dialog/edit-widget-control-creator.js

@@ -0,0 +1,42 @@
+
+import { expect } from 'chai';
+
+import createControls from '../../../components/dialog/edit-widget-control-creator';
+import EditWidgetTextControl from '../../../components/dialog/edit-widget-text-control';
+import EditWidgetColorControl from '../../../components/dialog/edit-widget-color-control';
+import EditWidgetTimeControl from '../../../components/dialog/edit-widget-time-control';
+import EditImageWidgetControl from '../../../components/dialog/edit-widget-image-control';
+import EditWidgetSimulatorControl from '../../../components/dialog/edit-widget-simulator-control';
+import EditWidgetSignalControl from '../../../components/dialog/edit-widget-signal-control';
+import EditWidgetSignalsControl from '../../../components/dialog/edit-widget-signals-control';
+import EditWidgetOrientation from '../../../components/dialog/edit-widget-orientation';
+
+describe('edit widget control creator', () => {
+    it('should not return null', () => {
+        let controls = createControls('Value', null, null, null, null, null, null);
+        expect(controls).to.be.defined;
+    });
+
+    var runs = [
+        { args: { widgetType: 'Value' }, result: { controlNumber: 2, controlTypes: [EditWidgetSimulatorControl, EditWidgetSignalControl] } },
+        { args: { widgetType: 'Plot' }, result: { controlNumber: 4, controlTypes: [EditWidgetTimeControl, EditWidgetSimulatorControl, EditWidgetSignalsControl, EditWidgetTextControl] } },
+        { args: { widgetType: 'Table' }, result: { controlNumber: 1, controlTypes: [EditWidgetSimulatorControl] } },
+        { args: { widgetType: 'Image' }, result: { controlNumber: 1, controlTypes: [EditImageWidgetControl] } },
+        { args: { widgetType: 'Gauge' }, result: { controlNumber: 2, controlTypes: [EditWidgetSimulatorControl, EditWidgetSignalControl] } },
+        { args: { widgetType: 'PlotTable' }, result: { controlNumber: 3, controlTypes: [EditWidgetSimulatorControl, EditWidgetSignalsControl, EditWidgetTextControl] } },
+        { args: { widgetType: 'Slider' }, result: { controlNumber: 1, controlTypes: [EditWidgetOrientation] } },
+        { args: { widgetType: 'Button' }, result: { controlNumber: 2, controlTypes: [EditWidgetColorControl] } },
+        { args: { widgetType: 'Box' }, result: { controlNumber: 1, controlTypes: [EditWidgetColorControl] } },
+    ];
+
+    runs.forEach( (run) => {
+        let itMsg = run.args.widgetType + ' widget edit model should have correct controls';
+        it(itMsg, () => {
+            let controls = createControls(run.args.widgetType, null, null, null, null, null, null);
+            
+            expect(controls).to.have.lengthOf(run.result.controlNumber);
+            
+            controls.forEach( (control) => expect(control.type).to.be.oneOf(run.result.controlTypes))
+        });
+    });
+});

src/components/dialog/edit-widget-control-creator.js

@@ -0,0 +1,109 @@
+/**
+ * File: edit-widget-control-creator.js
+ * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
+ * Date: 23.05.2017
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ **********************************************************************************/
+
+import React from 'react';
+
+import EditWidgetTextControl from './edit-widget-text-control';
+import EditWidgetColorControl from './edit-widget-color-control';
+import EditWidgetTimeControl from './edit-widget-time-control';
+import EditImageWidgetControl from './edit-widget-image-control';
+import EditWidgetSimulatorControl from './edit-widget-simulator-control';
+import EditWidgetSignalControl from './edit-widget-signal-control';
+import EditWidgetSignalsControl from './edit-widget-signals-control';
+import EditWidgetOrientation from './edit-widget-orientation';
+
+export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulation, handleChange) {
+    // Use a list to concatenate the controls according to the widget type
+    var dialogControls = [];
+
+    switch(widgetType) {
+        case 'Value': {
+            let valueBoundOnChange = (e) => {
+                handleChange([e, {target: {id: 'signal', value: 0}}]);
+            }
+            dialogControls.push(
+                <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)} />
+            )
+        }
+        break;
+        case 'Plot': {
+            let plotBoundOnChange = (e) => {
+                handleChange([e, {target: {id: 'signals', value: []}}]);
+            }
+            dialogControls.push(
+                <EditWidgetTimeControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetSimulatorControl key={2} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotBoundOnChange(e)} />,
+                <EditWidgetSignalsControl key={3} controlId={'signals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTextControl key={4} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />)
+            }
+            break;
+        case 'Table': {
+            dialogControls.push(
+                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
+            }
+            break;
+        case 'Image': {
+            dialogControls.push(
+                <EditImageWidgetControl key={1} sessionToken={sessionToken} widget={widget} files={files} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
+            }
+            break;
+        case 'Gauge': {
+            let gaugeBoundOnChange = (e) => {
+                handleChange([e, {target: {id: 'signal', value: ''}}]);
+            }
+            dialogControls.push(
+                <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)} />)
+            }
+            break;
+        case 'PlotTable': {
+            let plotTableBoundOnChange = (e) => {
+                handleChange([e, {target: {id: 'preselectedSignals', value: []}}]);
+            }
+            dialogControls.push(
+                <EditWidgetSimulatorControl key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => plotTableBoundOnChange(e)} />,
+                <EditWidgetSignalsControl key={2} controlId={'preselectedSignals'} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={widget} handleChange={(e) => handleChange(e)} />)
+            }
+            break;
+        case 'Slider': {
+            dialogControls.push(
+                <EditWidgetOrientation key={1} widget={widget} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
+            }
+            break;
+        case 'Button': {
+            dialogControls.push(
+                <EditWidgetColorControl key={1} widget={widget} controlId={'background_color'} label={'Background'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetColorControl key={2} widget={widget} controlId={'font_color'} label={'Font color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />)
+            }
+            break;
+        case 'Box': {
+            dialogControls.push(
+                <EditWidgetColorControl key={1} widget={widget} controlId={'border_color'} label={'Border color'} validate={(id) => validateForm(id)} handleChange={(e) => handleChange(e)} />)
+            }
+            break;
+        default:
+            console.log('Non-valid widget type');
+        }
+
+    return dialogControls;
+}

src/components/dialog/edit-widget-orientation.js

@@ -2,9 +2,21 @@
  * File: edit-widget-orientation.js
  * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
  * Date: 10.04.2017
- * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
- *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
- *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  **********************************************************************************/
 
 import React, { Component } from 'react';

src/components/dialog/edit-widget-signal-control.js

@@ -2,9 +2,21 @@
  * File: edit-widget-signal-control.js
  * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
  * Date: 03.04.2017
- * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
- *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
- *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  **********************************************************************************/
 
 import React, { Component } from 'react';
@@ -31,7 +43,7 @@ class EditWidgetSignalControl extends Component {
 
     if (this.props.simulation) {
       // get selected simulation model
-      const simulationModel = this.props.simulation.models.find( model => model.simulation === this.state.widget.simulation );
+      const simulationModel = this.props.simulation.models.find( model => model.simulator === this.state.widget.simulator );
 
       // If simulation model update the signals to render
       signalsToRender = simulationModel? simulationModel.mapping : [];

src/components/dialog/edit-widget-signal-type-control.js

@@ -1,64 +0,0 @@
-/**
- * File: edit-widget-signal-type-control.js
- * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
- * Date: 03.04.2017
- * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
- *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
- *   Unauthorized copying of this file, via any medium is strictly prohibited.
- **********************************************************************************/
-
-import React, { Component } from 'react';
-import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
-
-class EditWidgetSignalTypeControl extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      widget: {}
-    };
-  }
-
-  componentWillReceiveProps(nextProps) {
-      // Update state's widget with props
-    this.setState({ widget: nextProps.widget });
-  }
-
-  render() {
-    // get selected simulation model
-    var simulationModel = {};
-
-    if (this.props.simulation) {
-      this.props.simulation.models.forEach((model) => {
-        if (model.simulation === this.state.widget.simulation) {
-          simulationModel = model;
-        }
-      });
-    }
-
-    // Obtain unique signal types with the help of dictionary keys
-    var signalTypes = Object.keys(simulationModel.mapping.reduce( (collection, signal) => {
-        var lower = signal.type.toLowerCase();
-        collection[lower] = '';
-        return collection;
-      }, {}));
-
-    var capitalize = (str) => { return str.charAt(0).toUpperCase() + str.slice(1); }
-    
-    var selectedValue = signalTypes.includes(this.state.widget.signalType) ? this.state.widget.signalType : '';
-
-    return (
-        <FormGroup controlId="signalType">
-          <ControlLabel>Signal type</ControlLabel>
-          <FormControl componentClass="select" placeholder="Select signal type" value={ selectedValue } onChange={(e) => this.props.handleChange(e)}>
-            <option disabled value style={{ display: 'none' }}> Select signal type </option>
-            {signalTypes.map((type, index) => (
-              <option key={type} value={type}>{ capitalize(type) }</option>
-            ))}
-          </FormControl>
-        </FormGroup>
-    );
-  }
-}
-
-export default EditWidgetSignalTypeControl;

src/components/dialog/edit-widget-signals-control.js

@@ -2,9 +2,21 @@
  * File: edit-widget-signals-control.js
  * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
  * Date: 03.04.2017
- * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
- *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
- *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  **********************************************************************************/
 
 import React, { Component } from 'react';
@@ -46,7 +58,7 @@ class EditWidgetSignalsControl extends Component {
 
     if (this.props.simulation) {
       // get selected simulation model
-      const simulationModel = this.props.simulation.models.find( model => model.simulation === this.state.widget.simulation );
+      const simulationModel = this.props.simulation.models.find( model => model.simulator === this.state.widget.simulator );
 
       // If simulation model update the signals to render
       signalsToRender = simulationModel? simulationModel.mapping : [];

src/components/dialog/edit-widget-simulator-control.js

@@ -2,9 +2,21 @@
  * File: edit-widget-simulator-control.js
  * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
  * Date: 03.04.2017
- * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
- *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
- *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  **********************************************************************************/
 
 import React, { Component } from 'react';

src/components/dialog/edit-widget-text-control.js

@@ -2,9 +2,21 @@
  * File: edit-widget-text-control.js
  * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
  * Date: 21.04.2017
- * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
- *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
- *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  **********************************************************************************/
 
 import React, { Component } from 'react';

src/components/dialog/edit-widget-time-control.js

@@ -2,9 +2,21 @@
  * File: edit-widget-time-control.js
  * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
  * Date: 13.04.2017
- * Copyright: 2017, Institute for Automation of Complex Power Systems, EONERC
- *   This file is part of VILLASweb. All Rights Reserved. Proprietary and confidential.
- *   Unauthorized copying of this file, via any medium is strictly prohibited.
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  **********************************************************************************/
 
 import React, { Component } from 'react';

src/components/dialog/edit-widget.js

@@ -24,14 +24,7 @@ import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
 
 import Dialog from './dialog';
 
-import EditWidgetTextControl from './edit-widget-text-control';
-import EditWidgetColorControl from './edit-widget-color-control';
-import EditWidgetTimeControl from './edit-widget-time-control';
-import EditImageWidgetControl from './edit-widget-image-control';
-import EditWidgetSimulatorControl from './edit-widget-simulator-control';
-import EditWidgetSignalControl from './edit-widget-signal-control';
-import EditWidgetSignalsControl from './edit-widget-signals-control';
-import EditWidgetOrientation from './edit-widget-orientation';
+import createControls from './edit-widget-control-creator';
 
 class EditWidgetDialog extends Component {
   static propTypes = {
@@ -62,10 +55,16 @@ class EditWidgetDialog extends Component {
     }
   }
 
-  handleChange(e, index) {
-    var update = this.state.temporal;
-    update[e.target.id] = e.target.value;
-    this.setState({ temporal: update });
+  handleChange(e) {
+    if (e.constructor === Array) {
+      // Every property in the array will be updated
+      let changes = e.reduce( (changesObject, event) => { changesObject[event.target.id] = event.target.value; return changesObject }, {});
+      this.setState({ temporal: Object.assign({}, this.state.temporal, changes ) });
+    } else {
+        let changeObject = {};
+        changeObject[e.target.id] = e.target.value;
+        this.setState({ temporal: Object.assign({}, this.state.temporal, changeObject ) });
+    }
   }
 
   resetState() {
@@ -88,55 +87,17 @@ class EditWidgetDialog extends Component {
   }
 
   render() {
-    // Use a list to concatenate the controls according to the widget type
-    var dialogControls = [];
-
+    
+    let controls = null;
     if (this.props.widget) {
-      if (this.props.widget.type === 'Value') {
-        dialogControls.push(
-          <EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
-          <EditWidgetSignalsControl key={2} controlId={'signals'} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
-        )
-      } else if (this.props.widget.type === 'Plot') {
-        dialogControls.push(
-          <EditWidgetTimeControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />,
-          <EditWidgetSimulatorControl key={2} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
-          <EditWidgetSignalsControl key={3} controlId={'signals'} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
-          <EditWidgetTextControl key={4} controlId={'ylabel'} label={'Y-Axis name'} placeholder={'Enter a name for the y-axis'} widget={this.state.temporal} handleChange={(e) => this.handleChange(e)} />
-        )
-      } else if (this.props.widget.type === 'Table') {
-        dialogControls.push(
-          <EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
-        )
-      } else if (this.props.widget.type === 'Image') {
-        dialogControls.push(
-          <EditImageWidgetControl key={1} sessionToken={this.props.sessionToken} widget={this.state.temporal} files={this.props.files} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e, index) => this.handleChange(e, index)} />
-        )
-      } else if (this.props.widget.type === 'Gauge') {
-        dialogControls.push(
-          <EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
-          <EditWidgetSignalControl key={2} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
-        )
-      } else if (this.props.widget.type === 'PlotTable') {
-        dialogControls.push(
-          <EditWidgetSimulatorControl key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
-          <EditWidgetSignalsControl key={2} controlId={'preselectedSignals'} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
-          <EditWidgetTextControl key={3} controlId={'ylabel'} label={'Y-Axis'} placeholder={'Enter a name for the Y-axis'} widget={this.state.temporal} handleChange={(e) => this.handleChange(e)} />
-        )
-      } else if (this.props.widget.type === 'Slider') {
-        dialogControls.push(
-          <EditWidgetOrientation key={1} widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
-        )
-      } else if (this.props.widget.type === 'Button') {
-        dialogControls.push(
-          <EditWidgetColorControl key={1} widget={this.state.temporal} controlId={'background_color'} label={'Background'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />,
-          <EditWidgetColorControl key={2} widget={this.state.temporal} controlId={'font_color'} label={'Font color'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />
-        )
-      } else if (this.props.widget.type === 'Box') {
-        dialogControls.push(
-          <EditWidgetColorControl key={1} widget={this.state.temporal} controlId={'border_color'} label={'Border color'} validate={(id) => this.validateForm(id)} handleChange={(e, index) => this.handleChange(e, index)} />
-        )
-      }
+      controls = createControls(
+            this.props.widget.type,
+            this.state.temporal,
+            this.props.sessionToken,
+            this.props.files,
+            (id) => this.validateForm(id),
+            this.props.simulation,
+            (e) => this.handleChange(e));
     }
 
     return (
@@ -147,7 +108,7 @@ class EditWidgetDialog extends Component {
             <FormControl type="text" placeholder="Enter name" value={this.state.temporal.name} onChange={(e) => this.handleChange(e)} />
             <FormControl.Feedback />
           </FormGroup>
-          { dialogControls }
+          { controls || '' }
         </form>
       </Dialog>
     );