fix plot widget and edit signals control element

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

@@ -1,8 +1,4 @@
 /**
- * File: edit-widget-signals-control.js
- * Author: Ricardo Hernandez-Montoya <rhernandez@gridhound.de>
- * Date: 03.04.2017
- *
  * This file is part of VILLASweb.
  *
  * VILLASweb is free software: you can redistribute it and/or modify
@@ -27,29 +23,24 @@ class EditWidgetSignalsControl extends Component {
     super(props);
 
     this.state = {
-      widget: { }
-    };
-  }
-
-  static getDerivedStateFromProps(props, state){
-    return {
-      widget: props.widget
+      widget: props.widget,
+      checkedSignals: props.widget[props.controlId]
     };
   }
 
   handleSignalChange(checked, signalID) {
-    var signals = this.state.widget.signalIDs;
-    var new_signals;
+    let new_signals = this.state.checkedSignals;
 
     if (checked) {
       // add signal
-      new_signals = signals.concat(signalID);
+      new_signals = new_signals.concat(signalID);
     } else {
       // remove signal
-      new_signals = signals.filter( (id) => id !== signalID );
+      new_signals = new_signals.filter( (id) => id !== signalID );
     }
 
-    this.props.handleChange({ target: { id: this.props.controlId, value: new_signals } });
+    this.setState({checkedSignals: new_signals})
+    this.props.handleChange({ target: { id: this.props.controlId, value: new_signals, type:'checkbox' } });
   }
 
   render() {
@@ -61,7 +52,14 @@ class EditWidgetSignalsControl extends Component {
               <FormLabel>No signals available</FormLabel>
             ) : (
               this.props.signals.map((signal, index) => (
-                <FormCheck key={signal.id} checked={this.state.widget.signalIDs.indexOf(signal.id) !== -1} onChange={(e) => this.handleSignalChange(e.target.checked, signal.id)}>{signal.name}</FormCheck>
+                <FormCheck
+                  type={'checkbox'}
+                  label={signal.name}
+                  id={signal.id}
+                  key={signal.id}
+                  checked={this.state.checkedSignals.find(id => id === signal.id) !== undefined}
+                  onChange={(e) => this.handleSignalChange(e.target.checked, signal.id)}>
+                </FormCheck>
                 ))
             )
           }

src/widget/edit-widget/edit-widget.js

@@ -1,8 +1,4 @@
 /**
- * File: edit-widget.js
- * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
- * Date: 08.03.2017
- *
  * This file is part of VILLASweb.
  *
  * VILLASweb is free software: you can redistribute it and/or modify
@@ -81,7 +77,8 @@ class EditWidgetDialog extends React.Component {
     }
 
     if(e.target.type !== 'text'){
-      let changeObject = {};
+      console.log("edit-widget: e.target.type is not text: ", e.target.type);
+      let changeObject = this.state.temporal;
       if (e.target.id === 'lockAspect') {
         changeObject[e.target.id] = e.target.checked;
 
@@ -97,22 +94,25 @@ class EditWidgetDialog extends React.Component {
           changeObject = this.assignAspectRatio(changeObject, e.target.value);
         }
       } else if (e.target.type === 'checkbox') {
-        changeObject[e.target.id] = e.target.checked;
+        changeObject[e.target.id] = e.target.value;
       } else if (e.target.type === 'number') {
         changeObject[e.target.id] = Number(e.target.value);
       } else {
         changeObject[e.target.id] = e.target.value;
       }
 
-      let finalChange = this.state.temporal;
+      this.setState({ temporal: changeObject});
 
-      finalChange.customProperties[e.target.id] = changeObject[e.target.id];
-      this.setState({ temporal: finalChange});
     } else {
+      console.log("edit-widget: type text");
       if(this.state.temporal[e.target.id]){
+
+        console.log("edit-widget: type: " , e.target.type, " target.id", e.target.id, "target.value", e.target.value)
         let finalChange = this.state.temporal;
 
         finalChange[e.target.id] = e.target.value;
+
+        console.log("edit-widget: finalChange", finalChange);
         this.setState({ temporal: finalChange});
       }
     }
@@ -133,12 +133,12 @@ class EditWidgetDialog extends React.Component {
 
     //this.valid = name;
     this.valid = name;
-
     // return state to control
     if (target === 'name') return name ? "success" : "error";
   }
 
   render() {
+
     let controls = null;
     if (this.props.widget) {
       controls = CreateControls(

src/widget/widget-plot/plot-legend.js

@@ -33,7 +33,7 @@ class PlotLegend extends React.Component {
         {this.props.signals.map(signal =>
           <li key={signal.index} className="signal-legend" style={{ color: colorScale(signal.index) }}>
             <span className="signal-legend-name">{signal.name}</span>
-            <span style={{ marginLeft: '0.3em' }} className="signal-unit">{signal.type}</span>
+            <span style={{ marginLeft: '0.3em' }} className="signal-unit">{signal.unit}</span>
           </li>
         )}
       </ul>

src/widget/widget-plot/plot.js

@@ -77,49 +77,60 @@ class Plot extends React.Component {
     this.removeInterval();
   }
 
-  componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
-    if (prevProps.time !== this.props.time) {
-      this.createInterval();
-    }
-
+  static getDerivedStateFromProps(props, state){
     let labelMargin = 0;
-    if (this.props.yLabel !== '') {
+    if (props.yLabel !== '') {
       labelMargin = 30;
     }
 
     // check if data is invalid
-    if (this.props.data == null || this.props.data.length === 0 || this.props.data[0].length === 0) {
+    if (props.data == null || props.data.length === 0 || props.data[0].length === 0) {
       // create empty plot axes
-      const xScale = scaleTime().domain([Date.now() -  this.props.time * 1000, Date.now()]).range([0, this.props.width - leftMargin - labelMargin - rightMargin]);
+      const xScale = scaleTime().domain([Date.now() -  props.time * 1000, Date.now()]).range([0, props.width - leftMargin - labelMargin - rightMargin]);
       let yScale;
 
-      if (this.props.yUseMinMax) {
-        yScale = scaleLinear().domain([this.props.yMin, this.props.yMax]).range([this.props.height + topMargin - bottomMargin, topMargin]);
+      if (props.yUseMinMax) {
+        yScale = scaleLinear().domain([props.yMin, props.yMax]).range([props.height + topMargin - bottomMargin, topMargin]);
       } else {
-        yScale = scaleLinear().domain([0, 10]).range([this.props.height + topMargin - bottomMargin, topMargin]);
+        yScale = scaleLinear().domain([0, 10]).range([props.height + topMargin - bottomMargin, topMargin]);
       }
 
       const xAxis = axisBottom().scale(xScale).ticks(5).tickFormat(timeFormat("%M:%S"));
       const yAxis = axisLeft().scale(yScale).ticks(5).tickFormat(format(".3s"));
 
-      this.setState({ data: null, xAxis, yAxis, labelMargin });
-      return;
+
+      return{
+        data: null,
+        xAxis,
+        yAxis,
+        labelMargin
+      };
     }
 
-    // check if requested time frame has changed
-    if(this.props.time !== prevProps.time) {
-      // only show data in requested time
-      let data = this.props.data;
 
-      const firstTimestamp = data[0][data[0].length - 1].x - (this.props.time + 1) * 1000;
-      if (data[0][0].x < firstTimestamp) {
-        // only show data in range (+100 ms)
-        const index = data[0].findIndex(value => value.x >= firstTimestamp - 100);
-        data = data.map(values => values.slice(index));
-      }
+    // only show data in requested time
+    let data = props.data;
 
-      this.setState({data, labelMargin});
+    const firstTimestamp = data[0][data[0].length - 1].x - (props.time + 1) * 1000;
+    if (data[0][0].x < firstTimestamp) {
+      // only show data in range (+100 ms)
+      const index = data[0].findIndex(value => value.x >= firstTimestamp - 100);
+      data = data.map(values => values.slice(index));
     }
+
+    return {
+      data,
+      labelMargin
+    };
+
+  }
+
+  componentDidUpdate(prevProps: Readonly<P>, prevState: Readonly<S>, snapshot: SS): void {
+    if (prevProps.time !== this.props.time) {
+      this.createInterval();
+    }
+
+
   }
 
   createInterval() {

src/widget/widgets/plot.js

@@ -53,7 +53,7 @@ class WidgetPlot extends React.Component {
       // Query the signals that will be displayed in the legend
       const legend = props.config.outputMapping.reduce( (accum, signal, signal_index) => {
         if (chosenSignals.includes(signal_index)) {
-          accum.push({ index: signal_index, name: signal.name, type: signal.type });
+          accum.push({ index: signal_index, name: signal.name, type: signal.unit });
         }
 
         return accum;