Add time property to plot widget

Add disabled toolbox items

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

@@ -8,7 +8,7 @@
  **********************************************************************************/
 
 import React, { Component } from 'react';
-import { FormGroup, FormControl, ControlLabel, Checkbox } from 'react-bootstrap';
+import { FormGroup, FormControl, ControlLabel, Checkbox, HelpBlock } from 'react-bootstrap';
 
 class EditPlotWidget extends Component {
   constructor(props) {
@@ -17,8 +17,8 @@ class EditPlotWidget extends Component {
     this.state = {
       widget: {
         simulator: '',
-        plotType: '',
-        signals: []
+        signals: [],
+        time: 0
       }
     };
   }
@@ -58,6 +58,11 @@ class EditPlotWidget extends Component {
 
     return (
       <div>
+        <FormGroup controlId="time">
+          <ControlLabel>Time</ControlLabel>
+          <FormControl type="number" min="1" max="300" placeholder="Enter time" value={this.state.widget.time} onChange={(e) => this.props.handleChange(e)} />
+          <HelpBlock>Time in seconds</HelpBlock>
+        </FormGroup>
         <FormGroup controlId="simulator">
           <ControlLabel>Simulator</ControlLabel>
           <FormControl componentClass="select" placeholder="Select simulator" value={this.state.widget.simulator} onChange={(e) => this.props.handleChange(e)}>
@@ -66,21 +71,12 @@ class EditPlotWidget extends Component {
             ))}
           </FormControl>
         </FormGroup>
-        <FormGroup controlId="plotType">
-          <ControlLabel>Type</ControlLabel>
-          <FormControl componentClass="select" value={this.state.widget.plotType} onChange={(e) => this.props.handleChange(e)}>
-            <option value="multiple">Multiple</option>
-            <option value="table">Table</option>
-          </FormControl>
+        <FormGroup>
+          <ControlLabel>Signals</ControlLabel>
+          {simulationModel.mapping.map((signal, index) => (
+            <Checkbox key={index} checked={this.state.widget.signals.indexOf(index) !== -1} onChange={(e) => this.handleSignalChange(e, index)}>{signal.name}</Checkbox>
+          ))}
         </FormGroup>
-        {this.state.widget.plotType === 'multiple' &&
-          <FormGroup>
-            <ControlLabel>Signals</ControlLabel>
-            {simulationModel.mapping.map((signal, index) => (
-              <Checkbox key={index} checked={this.state.widget.signals.indexOf(index) !== -1} onChange={(e) => this.handleSignalChange(e, index)}>{signal.name}</Checkbox>
-            ))}
-          </FormGroup>
-        }
       </div>
     );
   }

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

@@ -26,17 +26,6 @@
    }
 
    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;
-         }
-       });
-     }
-
      return (
        <div>
          <FormGroup controlId="simulator">

src/components/toolbox-item.js

@@ -34,18 +34,31 @@ class ToolboxItem extends Component {
     type: PropTypes.string.isRequired
   };
 
+  static defaultProps = {
+    disabled: false
+  };
+
   render() {
     var itemClass = classNames({
       'toolbox-item': true,
-      'toolbox-item-dragging': this.props.isDragging
+      'toolbox-item-dragging': this.props.isDragging,
+      'toolbox-item-disabled': this.props.disabled
     });
     var dropEffect = 'copy';
 
-    return this.props.connectDragSource(
-      <span className={itemClass}>
-        {this.props.name}
-      </span>
-    , {dropEffect});
+    if (this.props.disabled === false) {
+      return this.props.connectDragSource(
+        <span className={itemClass}>
+          {this.props.name}
+        </span>
+      , {dropEffect});
+    } else {
+      return (
+        <span className={itemClass}>
+          {this.props.name}
+        </span>
+      );
+    }
   }
 }
 

src/components/widget-plot.js

@@ -38,13 +38,20 @@ class WidgetPlot extends Component {
     }
 
     // get timestamps
-    const latestTimestamp = nextProps.data[simulator].values[0][nextProps.data[simulator].values[0].length - 1].x;
-    const firstTimestamp = latestTimestamp - nextProps.widget.time * 100;
+    var latestTimestamp = nextProps.data[simulator].values[0][nextProps.data[simulator].values[0].length - 1].x;
+    var firstTimestamp = latestTimestamp - nextProps.widget.time * 1000;
+    var firstIndex;
 
-    // find element index representing firstTimestamp
-    const firstIndex = nextProps.data[simulator].values[0].findIndex((value) => {
-      return value.x >= firstTimestamp;
-    });
+    if (nextProps.data[simulator].values[0][0].x < firstTimestamp) {
+      // find element index representing firstTimestamp
+      firstIndex = nextProps.data[simulator].values[0].findIndex((value) => {
+        return value.x >= firstTimestamp;
+      });
+    } else {
+      firstIndex = 0;
+      firstTimestamp = nextProps.data[simulator].values[0][0].x;
+      latestTimestamp = firstTimestamp + nextProps.widget.time * 1000;
+    }
 
     // copy all values for each signal in time region
     var values = [];
@@ -71,7 +78,7 @@ class WidgetPlot extends Component {
           data={this.state.values}
           title={this.props.widget.name}
           gridHorizontal={true}
-          xAccessor={(d) => {return new Date(d.x);}}
+          xAccessor={(d) => { if (d != null) { return new Date(d.x); } }}
           hoverAnimation={false}
           circleRadius={0}
           domain={{ x: [this.state.firstTimestamp, this.state.latestTimestamp] }}

src/containers/visualization.js

@@ -212,6 +212,7 @@ class Visualization extends Component {
               <ToolboxItem name="Plot" type="widget" />
               <ToolboxItem name="Table" type="widget" />
               <ToolboxItem name="Label" type="widget" />
+              <ToolboxItem name="Image" type="widget" disabled />
             </div>
           }
 

src/stores/simulator-data-store.js

@@ -12,7 +12,7 @@ import { ReduceStore } from 'flux/utils';
 import AppDispatcher from '../app-dispatcher';
 import SimulatorDataDataManager from '../data-managers/simulator-data-data-manager';
 
-const MAX_VALUES = 1000;
+const MAX_VALUES = 10000;
 
 class SimulationDataStore extends ReduceStore {
   constructor() {
@@ -71,7 +71,7 @@ class SimulationDataStore extends ReduceStore {
 
       case 'simulatorData/closed':
         // close and delete socket
-        if (state[action.identifier]) {
+        if (state[action.identifier] != null) {
           state[action.identifier].close();
           state[action.identifier] = null;
 

src/styles/app.css

@@ -152,3 +152,11 @@ body {
 .toolbox-item-dragging {
   opacity: 0.4;
 }
+
+.toolbox-item-disabled {
+  border-color: lightgray;
+
+  color: lightgray;
+
+  cursor: default !important;
+}