diff --git a/src/common/dialogs/delete-dialog.js b/src/common/dialogs/delete-dialog.js
index 8bc39a1..32e583a 100644
--- a/src/common/dialogs/delete-dialog.js
+++ b/src/common/dialogs/delete-dialog.js
@@ -17,6 +17,7 @@
 
 import React from 'react';
 import { Button, Modal, Form } from 'react-bootstrap';
+import { Collapse } from 'react-collapse';
 
 class DeleteDialog extends React.Component {
     onModalKeyPress = (event) => {
diff --git a/src/common/icon.js b/src/common/icon.js
index 25155b4..f062c44 100644
--- a/src/common/icon.js
+++ b/src/common/icon.js
@@ -21,7 +21,6 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-//import '@fortawesome/free-regular-svg-icons';
 
 library.add(fas);
 
diff --git a/src/componentconfig/edit-config.js b/src/componentconfig/edit-config.js
index 37a2a3e..2ee19ec 100644
--- a/src/componentconfig/edit-config.js
+++ b/src/componentconfig/edit-config.js
@@ -17,6 +17,7 @@
 
 import React from 'react';
 import { Form } from 'react-bootstrap';
+import { Multiselect } from 'multiselect-react-dropdown'
 import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
 
diff --git a/src/dashboard/dashboard.js b/src/dashboard/dashboard.js
index b8a627b..c6d3922 100644
--- a/src/dashboard/dashboard.js
+++ b/src/dashboard/dashboard.js
@@ -587,8 +587,6 @@ class Dashboard extends Component {
           configs={this.state.configs}
           sessionToken={this.state.sessionToken}
         />
-
-
       </div>
     </div>;
   }
diff --git a/src/ic/edit-ic.js b/src/ic/edit-ic.js
index 0782b5b..be77e27 100644
--- a/src/ic/edit-ic.js
+++ b/src/ic/edit-ic.js
@@ -18,7 +18,6 @@
 import React from 'react';
 import { Form } from 'react-bootstrap';
 import _ from 'lodash';
-import {Collapse} from 'react-collapse';
 import Dialog from '../common/dialogs/dialog';
 import ParametersEditor from '../common/parameters-editor';
 
diff --git a/src/ic/ic-dialog.js b/src/ic/ic-dialog.js
index 8689334..197eb45 100644
--- a/src/ic/ic-dialog.js
+++ b/src/ic/ic-dialog.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, Row, Col} from 'react-bootstrap';
+import { Button, Row, Col } from 'react-bootstrap';
 import Dialog from '../common/dialogs/dialog';
 import Icon from "../common/icon";
 import ConfirmCommand from './confirm-command';
diff --git a/src/scenario/edit-scenario.js b/src/scenario/edit-scenario.js
index 19a2fb9..22fe3a9 100644
--- a/src/scenario/edit-scenario.js
+++ b/src/scenario/edit-scenario.js
@@ -53,13 +53,11 @@ class EditScenarioDialog extends React.Component {
     this.setState({ [event.target.id]: event.target.value });
 
     let name = true;
-
     if (this.state.name === '') {
       name = false;
     }
 
     this.valid = name;
-
   };
 
   resetState = () => {
diff --git a/src/scenario/scenario.js b/src/scenario/scenario.js
index 8436317..cf86fee 100644
--- a/src/scenario/scenario.js
+++ b/src/scenario/scenario.js
@@ -790,12 +790,6 @@ class Scenario extends React.Component {
           title='Name'
           dataKey='name'
         />
-        <TableColumn
-          title='Files'
-          dataKey='fileIDs'
-          modifier={(fileIDs) => this.getListOfFiles(this.state.files, fileIDs)}
-          onEdit={(index) => this.startPintura(index)}
-        />
         <TableColumn
           title='# Output Signals'
           dataKey='outputLength'
@@ -931,11 +925,25 @@ class Scenario extends React.Component {
         />
       </Table>
 
-      <NewDashboardDialog show={this.state.newDashboardModal} onClose={data => this.closeNewDashboardModal(data)} />
-      <EditDashboardDialog show={this.state.dashboardEditModal} dashboard={this.state.modalDashboardData} onClose={data => this.closeEditDashboardModal(data)} />
-      <ImportDashboardDialog show={this.state.importDashboardModal} onClose={data => this.closeImportDashboardModal(data)} />
-
-      <DeleteDialog title="dashboard" name={this.state.modalDashboardData.name} show={this.state.deleteDashboardModal} onClose={(e) => this.closeDeleteDashboardModal(e)} />
+      <NewDashboardDialog
+        show={this.state.newDashboardModal}
+        onClose={data => this.closeNewDashboardModal(data)}
+      />
+      <EditDashboardDialog
+        show={this.state.dashboardEditModal}
+        dashboard={this.state.modalDashboardData}
+        onClose={data => this.closeEditDashboardModal(data)}
+      />
+      <ImportDashboardDialog
+        show={this.state.importDashboardModal}
+        onClose={data => this.closeImportDashboardModal(data)}
+      />
+      <DeleteDialog
+        title="dashboard"
+        name={this.state.modalDashboardData.name}
+        show={this.state.deleteDashboardModal}
+        onClose={(e) => this.closeDeleteDashboardModal(e)}
+      />
 
       {/*Result table*/}
       <h2 style={tableHeadingStyle}>Results
@@ -972,7 +980,6 @@ class Scenario extends React.Component {
           dataKey='resultFileIDs'
           linkKey='filebuttons'
           data={this.state.files}
-          width='300'
           onDownload={(index) => this.downloadResultData(index)}
         />
         <TableColumn
@@ -1023,34 +1030,34 @@ class Scenario extends React.Component {
           />
           : <></>
         }
-          <TableColumn
-            title='Name'
-            dataKey='username'
-          />
-          <TableColumn
-            title='Mail'
-            dataKey='mail'
-          />
-          <TableColumn
-            title=''
-            width='200'
-            deleteButton
-            onDelete={(index) => this.setState({
-              deleteUserModal: true,
-              deleteUserName: this.state.scenario.users[index].username,
-              modalUserIndex: index
-            })}
-          />
-        </Table>
+        <TableColumn
+          title='Name'
+          dataKey='username'
+        />
+        <TableColumn
+          title='Role'
+          dataKey='role'
+        />
+        <TableColumn
+          title=''
+          width='200'
+          deleteButton
+          onDelete={(index) => this.setState({
+            deleteUserModal: true,
+            deleteUserName: this.state.scenario.users[index].username,
+            modalUserIndex: index
+          })}
+        />
+      </Table>
 
-        <InputGroup style={{ width: 400, float: 'right' }}>
-          <FormControl
-            placeholder="Username"
-            onChange={(e) => this.onUserInputChange(e)}
-            value={this.state.userToAdd}
-            type="text"
-          />
-          <InputGroup.Append>
+      <InputGroup style={{ width: 400, float: 'right' }}>
+        <Form.Control
+          placeholder="Username"
+          onChange={(e) => this.onUserInputChange(e)}
+          value={this.state.userToAdd}
+          type="text"
+        />
+        <InputGroup.Append>
           <span className='icon-button'>
             <Button
               variant='light'
@@ -1059,12 +1066,17 @@ class Scenario extends React.Component {
               onClick={() => this.addUser()}>
               <Icon icon="plus" classname={'icon-color'} style={iconStyle} />
             </Button>
-            </span>
-          </InputGroup.Append>
-        </InputGroup><br /><br />
-      </div>
+          </span>
+        </InputGroup.Append>
+      </InputGroup>
+      <br />
 
-      <DeleteDialog title="user from scenario:" name={this.state.deleteUserName} show={this.state.deleteUserModal} onClose={(c) => this.closeDeleteUserModal(c)} />
+      <DeleteDialog
+        title="Delete user from scenario"
+        name={this.state.deleteUserName}
+        show={this.state.deleteUserModal}
+        onClose={(c) => this.closeDeleteUserModal(c)}
+      />
     </div>;
   }
 }
diff --git a/src/signal/edit-signal-mapping.js b/src/signal/edit-signal-mapping.js
index e9ece22..9c5cb6e 100644
--- a/src/signal/edit-signal-mapping.js
+++ b/src/signal/edit-signal-mapping.js
@@ -18,6 +18,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Form, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { Collapse } from 'react-collapse';
 import Table from '../common/table';
 import TableColumn from '../common/table-column';
 import Dialog from "../common/dialogs/dialog";
@@ -30,13 +31,12 @@ class EditSignalMapping extends React.Component {
     super(props);
 
     let dir = "";
-    if ( this.props.direction === "Output"){
+    if ( this.props.direction === "Output") {
       dir = "out";
-    } else if ( this.props.direction === "Input" ){
+    } else if ( this.props.direction === "Input" ) {
       dir = "in";
     }
 
-
     this.state = {
       dir,
       signals: [],
@@ -45,38 +45,37 @@ class EditSignalMapping extends React.Component {
     };
   }
 
-  static getDerivedStateFromProps(props, state){
+  static getDerivedStateFromProps(props, state) {
 
     // filter all signals by configID and direction
     let signals = [];
-    if(props.signalID != null || typeof props.configs === "undefined"){
+    if (props.signalID != null || typeof props.configs === "undefined") {
       signals = props.signals.filter((sig) => {
         return (sig.configID === props.configID) && (sig.direction === state.dir);
       });
     }
-    else{
-      for(let i = 0; i < props.configs.length; i++){
+    else {
+      for (let i = 0; i < props.configs.length; i++) {
         let temp = props.signals.filter((sig) => {
           return (sig.configID === props.configs[i].id) && (sig.direction === state.dir);
         })
-      signals = signals.concat(temp);
+        signals = signals.concat(temp);
+      }
     }
-  }
-
-  signals.forEach(signal => {
-    if(signal.checked === undefined) signal.checked = false
-  });
 
+    signals.forEach(signal => {
+      if (signal.checked === undefined) {
+        signal.checked = false;
+      }
+    });
 
     return {
       signals: signals,
     };
   }
 
-
   onClose(canceled) {
-
-    for (let signalID of this.state.modifiedSignalIDs){
+    for (let signalID of this.state.modifiedSignalIDs) {
 
       let sig = this.state.signals.find(s => s.id === signalID);
 
@@ -99,23 +98,23 @@ class EditSignalMapping extends React.Component {
     console.log("HandleMappingChange", row, column)
       if (column === 2) { // Name change
         signals[row].name = event.target.value;
-        if (modifiedSignals.find(id => id === signals[row].id) === undefined){
+        if (modifiedSignals.find(id => id === signals[row].id) === undefined) {
           modifiedSignals.push(signals[row].id);
         }
       } else if (column === 3) { // unit change
         signals[row].unit = event.target.value;
-        if (modifiedSignals.find(id => id === signals[row].id) === undefined){
+        if (modifiedSignals.find(id => id === signals[row].id) === undefined) {
           modifiedSignals.push(signals[row].id);
         }
       } else if (column === 4) { // scaling factor change
         signals[row].scalingFactor = parseFloat(event.target.value);
-        if (modifiedSignals.find(id => id === signals[row].id) === undefined){
+        if (modifiedSignals.find(id => id === signals[row].id) === undefined) {
           modifiedSignals.push(signals[row].id);
         }
       } else if (column === 1) { //index change
         console.log("Index change")
         signals[row].index =parseInt(event.target.value, 10);
-        if (modifiedSignals.find(id => id === signals[row].id) === undefined){
+        if (modifiedSignals.find(id => id === signals[row].id) === undefined) {
           modifiedSignals.push(signals[row].id);
         }
       }
@@ -124,11 +123,9 @@ class EditSignalMapping extends React.Component {
         signals: signals,
         modifiedSignalIDs: modifiedSignals
       })
-
   };
 
   handleDelete = (index) => {
-
     let data = this.state.signals[index]
 
     AppDispatcher.dispatch({
@@ -136,11 +133,9 @@ class EditSignalMapping extends React.Component {
       data: data,
       token: this.props.sessionToken
     });
-
   };
 
   handleRemove = () => {
-
     let checkedSignals = this.state.signals.filter(signal => signal.checked === true);
 
     checkedSignals.forEach(signal => {
@@ -149,23 +144,20 @@ class EditSignalMapping extends React.Component {
         data: signal,
         token: this.props.sessionToken
       });
-
     })
-
   }
 
   handleAdd = (configID = null) => {
-
-    if(typeof this.props.configs !== "undefined"){
-
-      if(configID === null){
+    if (typeof this.props.configs !== "undefined") {
+      if (configID === null) {
         this.setState({openCollapse: true});
-        return
-        }
-      }
-      else{
-        configID = this.props.configID;
+        return;
       }
+    }
+    else {
+      configID = this.props.configID;
+    }
+
     let newSignal = {
       configID: configID,
       direction: this.state.dir,
@@ -185,7 +177,6 @@ class EditSignalMapping extends React.Component {
   };
 
   resetState() {
-
       let signals = this.props.signals.filter((sig) => {
         return (sig.configID === this.props.configID) && (sig.direction === this.state.dir);
       });
@@ -200,29 +191,27 @@ class EditSignalMapping extends React.Component {
     tempSignals[index].checked = !tempSignals[index].checked;
 
     this.setState({signals: tempSignals});
-
   }
 
-  checkAll(){
+  checkAll() {
     let tempSignals = this.state.signals;
     let allChecked = true;
 
-    tempSignals.forEach(signal =>
-      {
-        if(signal.checked === false){
+    tempSignals.forEach(signal => {
+      if (signal.checked === false) {
         signal.checked = true;
         allChecked = false;
       }
-      });
+    });
 
-    if(allChecked){
+    if (allChecked) {
       tempSignals.forEach(signal => signal.checked = false);
     }
+
     this.setState({signals: tempSignals});
   }
 
   render() {
-
       const buttonStyle = {
         marginLeft: '10px',
       };
diff --git a/src/user/new-user.js b/src/user/new-user.js
index c10dc85..7d6baa9 100644
--- a/src/user/new-user.js
+++ b/src/user/new-user.js
@@ -67,7 +67,14 @@ class NewUserDialog extends React.Component {
 
   render() {
     return (
-      <Dialog show={this.props.show} title="New user" buttonTitle="Add" onClose={(c) => this.onClose(c)} onReset={() => this.resetState()} valid={this.valid}>
+      <Dialog
+        show={this.props.show}
+        title="New User"
+        buttonTitle="Add"
+        onClose={(c) => this.onClose(c)}
+        onReset={() => this.resetState()}
+        valid={this.valid}
+      >
         <Form>
           <Form.Group as={Col} controlId="username">
             <Form.Label>Username</Form.Label>
diff --git a/src/user/recover-password.js b/src/user/recover-password.js
index 2602d9c..4105f4f 100644
--- a/src/user/recover-password.js
+++ b/src/user/recover-password.js
@@ -35,13 +35,20 @@ class RecoverPassword extends React.Component {
 
   render() {
     return (
-      <Dialog show={this.props.show} title="Recover password" buttonTitle="Close" onClose={(c) => this.onClose(c)} blendOutCancel = {true} valid={true} size = 'lg'>
+      <Dialog
+        show={this.props.show}
+        title="Recover password"
+        buttonTitle="Close"
+        onClose={(c) => this.onClose(c)}
+        blendOutCancel={true}
+        valid={true}
+      >
         <div>
-        <div>Please contact:</div>
-        <div>{this.state.admin.name}</div>
-        <div>E-Mail:</div>
-        <a href={`mailto:${this.state.admin.mail}`}>{this.state.admin.mail}</a>
-      </div>
+          <div>Please contact:</div>
+          <div>{this.state.admin.name}</div>
+          <div>E-Mail:</div>
+          <a href={`mailto:${this.state.admin.mail}`}>{this.state.admin.mail}</a>
+        </div>
       </Dialog>
     );
   }
diff --git a/src/widget/edit-widget/color-picker.js b/src/widget/edit-widget/color-picker.js
index a8e6615..8c148c0 100644
--- a/src/widget/edit-widget/color-picker.js
+++ b/src/widget/edit-widget/color-picker.js
@@ -16,6 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
+import { Form } from 'react-bootstrap';
 import { SketchPicker } from 'react-color';
 import Dialog from '../../common/dialogs/dialog';
 
@@ -31,8 +32,7 @@ class ColorPicker extends React.Component {
     };
   }
 
-  static getDerivedStateFromProps(props, state){
-
+  static getDerivedStateFromProps(props, state) {
     return {
       widget: props.widget
     };
@@ -49,25 +49,24 @@ class ColorPicker extends React.Component {
   }
 
   handleChangeComplete = (color) => {
-    
     let temp = this.state.widget;
 
-    if(this.props.controlId === 'strokeStyle'){
+    if (this.props.controlId === 'strokeStyle'){
       temp.customProperties.zones[this.props.zoneIndex]['strokeStyle'] = color.hex;
     }
-    else if(this.props.controlId === 'lineColor'){
+    else if (this.props.controlId === 'lineColor'){
       temp.customProperties.lineColors[this.props.lineIndex] = color.hex;
     }
-    else{
-    let parts = this.props.controlId.split('.');
-    let isCustomProperty = true;
+    else {
+      let parts = this.props.controlId.split('.');
+      let isCustomProperty = true;
 
-    if (parts.length === 1){
-      isCustomProperty = false;
-    }
+      if (parts.length === 1){
+        isCustomProperty = false;
+      }
 
-    isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex;
-    isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a;
+      isCustomProperty ? temp[parts[0]][parts[1]] = color.hex : temp[this.props.controlId] = color.hex;
+      isCustomProperty ? temp[parts[0]][parts[1] + "_opacity"] = color.rgb.a : temp[this.props.controlId +"_opacity"] = color.rgb.a;
     }
 
     this.setState({ widget: temp });
@@ -88,46 +87,45 @@ class ColorPicker extends React.Component {
   };
 
   render() {
-
     let hexColor;
     let opacity = 1;
     let parts = this.props.controlId.split('.');
     let isCustomProperty = true;
-    if (parts.length === 1){
+    if (parts.length === 1) {
       isCustomProperty = false;
     }
 
-    if(this.props.controlId === 'strokeStyle'){
-      if(typeof this.state.widget.customProperties.zones[this.props.zoneIndex] !== 'undefined'){
+    if (this.props.controlId === 'strokeStyle') {
+      if (typeof this.state.widget.customProperties.zones[this.props.zoneIndex] !== 'undefined') {
         hexColor = this.state.widget.customProperties.zones[this.props.zoneIndex]['strokeStyle'];
       }
     }
-    else if(this.props.controlId === 'lineColor'){
-      if(typeof this.state.widget.customProperties.lineColors[this.props.lineIndex] !== 'undefined'){
+    else if (this.props.controlId === 'lineColor') {
+      if (typeof this.state.widget.customProperties.lineColors[this.props.lineIndex] !== 'undefined') {
         hexColor = this.state.widget.customProperties.lineColors[this.props.lineIndex];
       }
     }
     else{
-    hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId];
-    opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"];
-
+      hexColor = isCustomProperty ? this.state.widget[parts[0]][parts[1]]: this.state.widget[this.props.controlId];
+      opacity = isCustomProperty ? this.state.widget[parts[0]][parts[1] + "_opacity"]: this.state.widget[this.props.controlId + "_opacity"];
     }
 
-    
     let rgbColor = this.hexToRgb(hexColor, opacity);
-
-
-
-      return <Dialog show={this.props.show} title='Color Picker' buttonTitle='Save' onClose={(c) => this.onClose(c)} valid={true}>
-          <form>
+      return <Dialog
+        show={this.props.show}
+        title='Color Picker'
+        buttonTitle='Save'
+        onClose={(c) => this.onClose(c)}
+        valid={true}
+        >
+          <Form>
               <SketchPicker
                   color={rgbColor}
-                  disableAlpha={this.props.disableOpacity} 
+                  disableAlpha={this.props.disableOpacity}
                   onChangeComplete={ this.handleChangeComplete }
-                  width={"300"}
+                  width={300}
               />
-
-          </form>
+          </Form>
       </Dialog>;
   }
 }
diff --git a/src/widget/edit-widget/edit-widget-color-zones-control.js b/src/widget/edit-widget/edit-widget-color-zones-control.js
index aa337b6..dd990bb 100644
--- a/src/widget/edit-widget/edit-widget-color-zones-control.js
+++ b/src/widget/edit-widget/edit-widget-color-zones-control.js
@@ -20,7 +20,7 @@ import { Form, Table, Button, Tooltip, OverlayTrigger } from 'react-bootstrap';
 import ColorPicker from './color-picker'
 
 import Icon from '../../common/icon';
-import {Collapse} from 'react-collapse';
+import { Collapse } from 'react-collapse';
 
 class EditWidgetColorZonesControl extends React.Component {
   constructor(props) {
@@ -51,8 +51,8 @@ class EditWidgetColorZonesControl extends React.Component {
     // add row
     const widget = this.state.widget;
     widget.customProperties.zones.push({ strokeStyle: '#d3cbcb', min: 0, max: 100 });
-    
-    if(widget.customProperties.zones.length > 0){      
+
+    if(widget.customProperties.zones.length > 0){
     let length = widget.customProperties.zones.length
 
     for(let i= 0 ; i < length; i++){
@@ -67,14 +67,14 @@ class EditWidgetColorZonesControl extends React.Component {
   }
 
   removeZones = () => {
-    
+
     let temp = this.state.widget;
 
     temp.customProperties.zones.splice(this.state.selectedIndex, 1);
 
-    if(temp.customProperties.zones.length > 0){      
+    if(temp.customProperties.zones.length > 0){
       let length = temp.customProperties.zones.length
-  
+
       for(let i= 0 ; i < length; i++){
       temp.customProperties.zones[i].min = i* 100/length;
       temp.customProperties.zones[i].max = (i+1)* 100/length;
@@ -111,8 +111,8 @@ class EditWidgetColorZonesControl extends React.Component {
     }
   }
 
-  openColorPicker = () =>{
-    
+  openColorPicker = () => {
+
     let color = this.state.selectedZone.strokeStyle;
 
     this.setState({showColorPicker: true, originalColor: color});
@@ -124,7 +124,7 @@ class EditWidgetColorZonesControl extends React.Component {
 
       let temp = this.state.selectedZone;
       temp.strokeStyle = this.state.originalColor;
-      
+
       this.setState({ selectedZone : temp });
     }
   }
@@ -155,7 +155,7 @@ class EditWidgetColorZonesControl extends React.Component {
     if(this.state.selectedIndex !== this.state.widget.customProperties.zones.length -1){
       temp.customProperties.zones[this.state.selectedIndex + 1]['min'] = e.target.value
     }
-    
+
     this.setState({ widget: temp });
     }
 
@@ -171,17 +171,17 @@ class EditWidgetColorZonesControl extends React.Component {
     this.props.handleChange(event);
   }
 
-  
+
 
   render() {
 
     const buttonStyle = {
-      marginBottom: '10px', 
+      marginBottom: '10px',
       marginLeft: '120px',
     };
 
     const iconStyle = {
-      height: '25px', 
+      height: '25px',
       width : '25px'
     }
 
@@ -194,7 +194,7 @@ class EditWidgetColorZonesControl extends React.Component {
 
     let pickerStyle = {
       backgroundColor: tempColor,
-      width: '260px', 
+      width: '260px',
       height: '40px',
       marginTop: '20px'
     }
@@ -213,21 +213,18 @@ class EditWidgetColorZonesControl extends React.Component {
       </span>
     <div>
       {
-          this.state.widget.customProperties.zones.map((zone, idx) => {
-            let color = zone.strokeStyle;
-            let width = (zone.max - zone.min)*(260/100);
-            let style = {
-              backgroundColor: color,
-              width: width,
-              height: '40px'
-            }
-            
-            return (<Button
-              style={style} key={idx} onClick={i => this.editColorZone(idx)} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="pen" /></Button>
-            )
+        this.state.widget.customProperties.zones.map((zone, idx) => {
+          let color = zone.strokeStyle;
+          let width = (zone.max - zone.min)*(260/100);
+          let style = {
+            backgroundColor: color,
+            width: width,
+            height: '40px'
           }
+          return (<Button
+            style={style} key={idx} onClick={i => this.editColorZone(idx)} disabled={!this.props.widget.customProperties.colorZones}><Icon icon="pen" /></Button>
           )
-
+        })
       }
     </div>
       <Collapse isOpened={collapse}>
diff --git a/src/widget/edit-widget/edit-widget-plot-colors-control.js b/src/widget/edit-widget/edit-widget-plot-colors-control.js
index f82d2ad..271cec2 100644
--- a/src/widget/edit-widget/edit-widget-plot-colors-control.js
+++ b/src/widget/edit-widget/edit-widget-plot-colors-control.js
@@ -19,8 +19,8 @@ import React, { Component } from 'react';
 import { OverlayTrigger, Tooltip , Button } from 'react-bootstrap';
 import ColorPicker from './color-picker'
 import Icon from "../../common/icon";
-import {scaleOrdinal} from "d3-scale";
-import {schemeCategory10} from "d3-scale-chromatic";
+import { scaleOrdinal } from "d3-scale";
+import { schemeCategory10 } from "d3-scale-chromatic";
 
 // schemeCategory20 no longer available in d3
 
diff --git a/src/widget/edit-widget/edit-widget.js b/src/widget/edit-widget/edit-widget.js
index 081cb08..e7792a8 100644
--- a/src/widget/edit-widget/edit-widget.js
+++ b/src/widget/edit-widget/edit-widget.js
@@ -23,7 +23,6 @@ import CreateControls from './edit-widget-control-creator';
 class EditWidgetDialog extends React.Component {
   valid = true;
 
-
   constructor(props) {
     super(props);
 
@@ -38,7 +37,6 @@ class EditWidgetDialog extends React.Component {
     };
   }
 
-
   onClose(canceled) {
     if (canceled === false) {
       this.props.onClose(this.state.temporal);
@@ -53,9 +51,9 @@ class EditWidgetDialog extends React.Component {
     const file = this.props.files.find(element => element.id === fileId);
 
     // scale width to match aspect
-    if(file.imageWidth && file.imageHeight){
-    const aspectRatio = file.imageWidth / file.imageHeight;
-    changeObject.width = parseInt(this.state.temporal.height * aspectRatio,10);
+    if (file.imageWidth && file.imageHeight) {
+      const aspectRatio = file.imageWidth / file.imageHeight;
+      changeObject.width = parseInt(this.state.temporal.height * aspectRatio,10);
     }
 
     return changeObject;
@@ -70,26 +68,21 @@ class EditWidgetDialog extends React.Component {
     return metrics.width;
   }
 
-  setMaxWidth(changeObject){
-    if(changeObject.type === 'Label'){
+  setMaxWidth(changeObject) {
+    if (changeObject.type === 'Label') {
       changeObject.customProperties.maxWidth = Math.ceil(this.getTextWidth(changeObject.name, changeObject.customProperties.textSize));
       changeObject.width = changeObject.customProperties.maxWidth;
     }
-    /*else if (changeObject.type === 'Value'){
-      changeObject.customProperties.maxWidth = Math.ceil(this.getTextWidth(changeObject.name, changeObject.customProperties.textSize));
-    }
-    if(this.state.temporal.width > changeObject.customProperties.maxWidth){
-      changeObject.width = changeObject.customProperties.maxWidth;
-    }*/
+
     return changeObject;
   }
 
-  setNewLockRestrictions(changeObject){
-    if(changeObject.customProperties.orientation === 0){
+  setNewLockRestrictions(changeObject) {
+    if (changeObject.customProperties.orientation === 0) {
       changeObject.customProperties.resizeTopBottomLock = true;
       changeObject.customProperties.resizeRightLeftLock = false;
     }
-    else if(changeObject.customProperties.orientation === 1){
+    else if (changeObject.customProperties.orientation === 1) {
       changeObject.customProperties.resizeTopBottomLock = false;
       changeObject.customProperties.resizeRightLeftLock = true;
     }
@@ -97,7 +90,6 @@ class EditWidgetDialog extends React.Component {
   }
 
   handleChange(e) {
-
     // TODO: check what we really need in this function. Can we reduce its complexity?
     let parts = e.target.id.split('.');
     let changeObject = this.state.temporal;
diff --git a/src/widget/widget-plot/plot-legend.js b/src/widget/widget-plot/plot-legend.js
index 4dd7459..00d1b77 100644
--- a/src/widget/widget-plot/plot-legend.js
+++ b/src/widget/widget-plot/plot-legend.js
@@ -17,7 +17,7 @@
 
 import React from 'react';
 import { scaleOrdinal} from 'd3-scale';
-import {schemeCategory10} from 'd3-scale-chromatic'
+import { schemeCategory10 } from 'd3-scale-chromatic'
 
 function Legend(props){
 
@@ -44,7 +44,6 @@ function Legend(props){
       </li>
     )
   }
-
 }
 
 class PlotLegend extends React.Component {
@@ -60,7 +59,6 @@ class PlotLegend extends React.Component {
             <Legend key={signal.id} sig={signal} lineColor={"undefined"}/>
           ))
         }
-
       </ul>
     </div>;
   }
diff --git a/src/widget/widget-plot/plot.js b/src/widget/widget-plot/plot.js
index 6f314fe..17e61fc 100644
--- a/src/widget/widget-plot/plot.js
+++ b/src/widget/widget-plot/plot.js
@@ -17,7 +17,7 @@
 
 import React from 'react';
 import { scaleLinear, scaleTime, scaleOrdinal} from 'd3-scale';
-import {schemeCategory10} from 'd3-scale-chromatic'
+import { schemeCategory10 } from 'd3-scale-chromatic'
 import { extent } from 'd3-array';
 import { line } from 'd3-shape';
 import { axisBottom, axisLeft } from  'd3-axis';
@@ -103,7 +103,6 @@ class Plot extends React.Component {
       const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S"));
       const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".3s"));
 
-
       return{
         stopTime: stopTime,
         data: null,
@@ -113,7 +112,6 @@ class Plot extends React.Component {
       };
     }
 
-
     // only show data in requested time
     let data = props.data;
     let icDataset = data.find(function(element) {
@@ -138,8 +136,6 @@ class Plot extends React.Component {
     if (prevProps.time !== this.props.time) {
       this.createInterval();
     }
-
-
   }
 
   createInterval() {
@@ -222,7 +218,6 @@ class Plot extends React.Component {
   }
 
   render() {
-
     const yLabelPos = {
       x: 12,
       y: this.props.height / 2
diff --git a/src/widget/widget-toolbox.js b/src/widget/widget-toolbox.js
index ee48d37..65e856e 100644
--- a/src/widget/widget-toolbox.js
+++ b/src/widget/widget-toolbox.js
@@ -16,12 +16,11 @@
  ******************************************************************************/
 
 import React from 'react';
+import { Collapse } from 'react-collapse';
 import PropTypes from 'prop-types';
 import Slider from 'rc-slider';
 import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';
 import Icon from "../common/icon";
-import {Collapse} from 'react-collapse';
-
 import ToolboxItem from './toolbox-item';
 
 class WidgetToolbox extends React.Component {
@@ -101,8 +100,8 @@ class WidgetToolbox extends React.Component {
     }
 
     const buttonStyle = {
-      marginRight: '3px', 
-      height: '40px', 
+      marginRight: '3px',
+      height: '40px',
     }
 
     const thereIsTopologyWidget = this.props.widgets != null && Object.values(this.props.widgets).filter(w => w.type === 'Topology').length > 0;
diff --git a/src/widget/widgets/gauge.js b/src/widget/widgets/gauge.js
index b33494a..28dff4f 100644
--- a/src/widget/widgets/gauge.js
+++ b/src/widget/widgets/gauge.js
@@ -17,7 +17,6 @@
 
 import React, { Component } from 'react';
 import { Gauge } from 'gaugeJS';
-//import {update} from "immutable";
 
 class WidgetGauge extends Component {
   constructor(props) {
@@ -70,7 +69,6 @@ class WidgetGauge extends Component {
         this.gauge.set(this.state.value);
         this.updateLabels(this.state.minValue, this.state.maxValue)
     }
-
   }
 
   static getDerivedStateFromProps(props, state){
@@ -79,12 +77,12 @@ class WidgetGauge extends Component {
       return{ value: 0, minValue: 0, maxValue: 10};
     }
 
-    // get the signal with the selected signal ID
+    // Get the signal with the selected signal ID
     let signalID = props.widget.signalIDs[0];
     let signal = props.signals.filter(s => s.id === signalID)
 
     if(signal.length > 0) {
-      // determine ID of infrastructure component related to signal[0] (there is only one signal for a lamp widget)
+      // Determine ID of infrastructure component related to signal[0] (there is only one signal for a lamp widget)
       let icID = props.icIDs[signal[0].id];
 
       let returnState = {}
@@ -100,9 +98,9 @@ class WidgetGauge extends Component {
         returnState["scalingFactor"] = signal[0].scalingFactor;
       }
 
-      // update value
+      // Update value
 
-      // check if data available
+      // Check if data available
       if (props.data == null
         || props.data[icID] == null
         || props.data[icID].output == null
@@ -114,12 +112,12 @@ class WidgetGauge extends Component {
         return returnState;
       }
 
-      // memorize if min or max value is updated
+      // Memorize if min or max value is updated
       let updateValue = false;
       let updateMinValue = false;
       let updateMaxValue = false;
 
-      // check if value has changed
+      // Check if value has changed
       const data = props.data[icID].output.values[signal[0].index - 1];
       // Take just 3 decimal positions
       // Note: Favor this method over Number.toFixed(n) in order to avoid a type conversion, since it returns a String
@@ -129,10 +127,10 @@ class WidgetGauge extends Component {
         let maxValue = null;
 
         if ((state.value !== value && value != null) || props.widget.customProperties.valueUseMinMax || state.useMinMaxChange) {
-          //value has changed
+          // Value has changed
           updateValue = true;
 
-          // update min-max if needed
+          // Update min-max if needed
           let updateLabels = false;
 
           minValue = state.minValue;
@@ -157,7 +155,6 @@ class WidgetGauge extends Component {
             maxValue = props.widget.customProperties.valueMax;
             updateMaxValue = true;
             updateLabels = true;
-
           }
 
           if (updateLabels === false && state.gauge) {
@@ -178,7 +175,7 @@ class WidgetGauge extends Component {
           returnState["useMinMax"] = props.widget.customProperties.valueUseMinMax;
         }
 
-        // prepare returned state
+        // Prepare returned state
         if (updateValue === true) {
           returnState["value"] = value;
         }
@@ -190,7 +187,7 @@ class WidgetGauge extends Component {
         }
 
 
-      } // if there is signal data
+      } // If there is signal data
 
       if (JSON.stringify(returnState) !== JSON.stringify({})) {
         return returnState;
@@ -198,8 +195,8 @@ class WidgetGauge extends Component {
         return null;
       }
     }
-    return null;
 
+    return null;
   }
 
   updateLabels(minValue, maxValue, force) {
@@ -223,17 +220,17 @@ class WidgetGauge extends Component {
       });
     }
 
-    if(this.state.signalID !== ''){
-    this.gauge.setOptions({
-      staticLabels: {
-        font: '10px "Helvetica Neue"',
-        labels,
-        color: "#000000",
-        fractionDigits: 1
-      },
-      staticZones: zones
-    });
-  }
+    if (this.state.signalID !== '') {
+      this.gauge.setOptions({
+        staticLabels: {
+          font: '10px "Helvetica Neue"',
+          labels,
+          color: "#000000",
+          fractionDigits: 1
+        },
+        staticZones: zones
+      });
+    }
   }
 
   computeGaugeOptions(widget) {
@@ -267,8 +264,6 @@ class WidgetGauge extends Component {
           <canvas ref={node => this.gaugeCanvas = node} />
           <div className="gauge-unit">{this.state.unit + scaleText}</div>
           <div className="gauge-value">{this.state.value}</div>
-
-
       </div>
     );
   }
diff --git a/src/widget/widgets/time-offset.js b/src/widget/widgets/time-offset.js
index ee429e8..9e931b2 100644
--- a/src/widget/widgets/time-offset.js
+++ b/src/widget/widgets/time-offset.js
@@ -17,8 +17,7 @@
 
 import React, { Component } from 'react';
 import TrafficLight from 'react-trafficlight';
-import {OverlayTrigger, Tooltip } from 'react-bootstrap';
-
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 class WidgetTimeOffset extends Component {
   constructor(props) {
@@ -51,7 +50,7 @@ class WidgetTimeOffset extends Component {
     let serverTime = props.data[state.icID].output.timestamp;
     let localTime = Date.now();
     let absoluteOffset = Math.abs(serverTime - localTime);
-    
+
     if(typeof websocket === 'undefined'){
       return {timeOffset: Number.parseFloat(absoluteOffset/1000).toPrecision(5)}
     }
@@ -68,25 +67,25 @@ class WidgetTimeOffset extends Component {
     }
     return (
       <div className="time-offset">
-      {this.props.widget.customProperties.icID !== -1 ? 
+      {this.props.widget.customProperties.icID !== -1 ?
       (<span></span>) : (<span>no IC</span>)
       }
-      {this.props.widget.customProperties.icID !== -1 && this.props.widget.customProperties.showName ? 
+      {this.props.widget.customProperties.icID !== -1 && this.props.widget.customProperties.showName ?
       (<span>{this.state.icName}</span>) : (<span></span>)
-      }    
+      }
       <OverlayTrigger key={0} placement={'left'} overlay={<Tooltip id={`tooltip-${"traffic-light"}`}>
-      {this.props.widget.customProperties.icID !== -1 ? 
-      (<span>{this.state.icName}<br></br>Offset: {this.state.timeOffset + "s"}</span>) 
-      : 
+      {this.props.widget.customProperties.icID !== -1 ?
+      (<span>{this.state.icName}<br></br>Offset: {this.state.timeOffset + "s"}</span>)
+      :
       (<span>Please select Infrastructure Component</span>)}
-      </Tooltip>}>      
+      </Tooltip>}>
         <TrafficLight Horizontal={this.props.widget.customProperties.horizontal} width={this.props.widget.width - 40} height={this.props.widget.height - 40}
         RedOn={(this.props.widget.customProperties.threshold_red <= this.state.timeOffset) || !this.state.websocketOpen}
         YellowOn={(this.props.widget.customProperties.threshold_yellow <= this.state.timeOffset) && (this.state.timeOffset < this.props.widget.customProperties.threshold_red) && this.state.websocketOpen}
         GreenOn={(this.state.timeOffset < this.props.widget.customProperties.threshold_yellow) && this.state.websocketOpen}
       />
       </OverlayTrigger>
-      {this.props.widget.customProperties.icID !== -1 ? 
+      {this.props.widget.customProperties.icID !== -1 ?
       (
       <span>{icSelected}</span>)
       :
diff --git a/src/widget/widgets/topology.js b/src/widget/widgets/topology.js
index 1eb64fc..d87cca0 100644
--- a/src/widget/widgets/topology.js
+++ b/src/widget/widgets/topology.js
@@ -16,7 +16,7 @@
  ******************************************************************************/
 
 import React from 'react';
-import {UncontrolledReactSVGPanZoom} from 'react-svg-pan-zoom';
+import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
 import '../../styles/simple-spinner.css';
 import { cimsvg } from 'libcimsvg';
 import AppDispatcher from "../../common/app-dispatcher";
@@ -94,7 +94,7 @@ class WidgetTopology extends React.Component {
   }
 
   static getDerivedStateFromProps(props, state){
-    // find the selected file of the widget, is undefined if no file is selected
+    // Find the selected file of the widget, is undefined if no file is selected
     let file = props.files.find(file => file.id === parseInt(props.widget.customProperties.file, 10));
 
     let dashboardState = state.dashboardState;
@@ -104,7 +104,7 @@ class WidgetTopology extends React.Component {
       dashboardState = 'show_message';
       message = 'Select a topology model.'
     } else if (!file.hasOwnProperty('data') && dashboardState === 'show_message'){
-      // data of file is missing, start download
+      // Data of file is missing, start download
       dashboardState = 'loading';
       message = '';
       AppDispatcher.dispatch({
@@ -113,7 +113,7 @@ class WidgetTopology extends React.Component {
         token: props.token
       });
     } else if (file.hasOwnProperty('data') && (dashboardState === 'loading'|| dashboardState === 'show_message')){
-      //file is available set state to ready
+      // File is available set state to ready
       dashboardState = 'ready'
       message = '';
     }
@@ -135,8 +135,6 @@ class WidgetTopology extends React.Component {
       window.onMouseMove = function() {};
     }
 
-    //this.Viewer.fitToViewer();
-
     // Query the file referenced by the widget (if any)
     if (this.state.file !== undefined) {
       this.setState({dashboardState: 'loading'});
@@ -155,7 +153,7 @@ class WidgetTopology extends React.Component {
   componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
 
     if(this.state.dashboardState === 'ready'){
-      //Topology file incl data downloaded, init SVG (should happen only once!)
+      // Topology file incl data downloaded, init SVG (should happen only once!)
       if (this.svgElem) {
         let cimsvgInstance = new cimsvg(this.svgElem.current);
         cimsvg.setCimsvg(cimsvgInstance);