Initial blank plot and allocate fixed initial height to legend (avoid resizing)

src/components/widget-plot/plot.js

@@ -17,13 +17,26 @@ class Plot extends Component {
     
     this.chartWrapper = null;
 
-    this.state = {
-      size: { w: 0, h: 0 },
-      firstTimestamp: 0,
-      latestTimestamp: 0,
-      sequence: null,
-      values: []
-    };
+    // Initialize plot size and data
+    this.state = Object.assign(
+      { size: { w: 0, h: 0 } },
+      this.getPlotInitData(true)
+    );
+  }
+
+  // Get an object with 'invisible' init data for the last minute. 
+  // Include start/end timestamps if required.
+  getPlotInitData(withRangeTimestamps = false) {
+
+    const initSecondTime = Date.now();
+    const initFirstTime = initSecondTime - 1000 * 60; // Decrease 1 min
+    const values = [{ values: [{x: initFirstTime, y: 0}], strokeWidth: 0 }];
+
+    let output = withRangeTimestamps? 
+      { sequence: 0, values: values, firstTimestamp: initFirstTime, latestTimestamp: initSecondTime, } : 
+      { sequence: 0, values: values };
+
+    return output;
   }
 
   componentWillReceiveProps(nextProps) {
@@ -37,22 +50,34 @@ class Plot extends Component {
         this.setState({size: { w, h } });
     }
 
+    // If signals were cleared, clear the plot (triggers a new state)
+    if (this.signalsWereJustCleared(nextProps)) { this.clearPlot(); return; }
+
+    // If no signals have been selected, just leave
+    if (nextProps.signals == null || nextProps.signals.length === 0) { return; }
+
     // Identify simulation reset
-    if (nextData == null || nextData.length === 0 || nextData.values[0].length === 0) {
-      // clear values
-      this.setState({ values: [], sequence: null });
-      return;
-    }
+    if (nextData == null || nextData.length === 0 || nextData.values[0].length === 0)  { this.clearPlot(); return; }
     
     // check if new data, otherwise skip
-    if (this.state.sequence >= nextData.sequence) {
-      return;
-    }
-
+    if (this.state.sequence >= nextData.sequence) { return; }
+    
     this.updatePlotData(nextProps);
 
   }
 
+  signalsWereJustCleared(nextProps) {
+
+    return  this.props.signals && 
+            nextProps.signals && 
+            this.props.signals.length > 0 && 
+            nextProps.signals.length === 0;
+  }
+
+  clearPlot() {
+    this.setState( this.getPlotInitData(false) );
+  }
+
   updatePlotData(nextProps) {
     let nextData = nextProps.simulatorData;
 
@@ -91,7 +116,7 @@ class Plot extends Component {
 
     return (
         <div className="chart-wrapper" ref={ (domNode) => this.chartWrapper = domNode }>
-            {this.state.sequence &&
+            {this.state.sequence != null &&
                 <LineChart
                 width={ this.state.size.w || 100 }
                 height={ this.state.size.h || 100 }

src/styles/widgets.css

@@ -226,6 +226,9 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
 .plot-legend {
   display: -webkit-flex;
   display: flex;
+  flex-basis: 20px; /* Enough to allocate one row */
+  max-height: 40px; /* Allocate up to two rows */
+  flex-shrink: 0;
   flex-wrap: wrap;
   justify-content: space-around;
   margin-bottom: 5px;
@@ -234,6 +237,8 @@ div[class*="-widget"] .btn[disabled], .btn.disabled, div[class*="-widget"] input
 .signal-legend {
     font-size: 0.8em;
     font-weight: 700;
+    padding-left: 5px;
+    padding-right: 5px;
     overflow: hidden;
 }