allow signal type selection in plot table widget

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

@@ -0,0 +1,64 @@
+/**
+ * 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.js

@@ -18,6 +18,7 @@ import EditTableWidget from './edit-widget-table';
 import EditImageWidget from './edit-widget-image';
 import EditWidgetSimulatorControl from './edit-widget-simulator-control';
 import EditWidgetSignalControl from './edit-widget-signal-control';
+import EditWidgetSignalTypeControl from './edit-widget-signal-type-control';
 
 class EditWidgetDialog extends Component {
   static propTypes = {
@@ -94,6 +95,11 @@ class EditWidgetDialog extends Component {
           <EditWidgetSimulatorControl widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
           <EditWidgetSignalControl 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 widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />,
+          <EditWidgetSignalTypeControl widget={this.state.temporal} validate={(id) => this.validateForm(id)} simulation={this.props.simulation} handleChange={(e) => this.handleChange(e)} />
+        )
       }
     }
 

src/components/widget-plot-table.js

@@ -52,10 +52,13 @@ class WidgetPlotTable extends Component {
 
     // get rows
     var rows = [];
-
-    simulationModel.mapping.forEach((signal) => {
-      rows.push({ name: signal.name })
-    });
+    // populate the table rows with the signals of the chosen type
+    simulationModel.mapping
+                .filter( (signal) => 
+                  signal.type.toLowerCase() === nextProps.widget.signalType)
+                .forEach((signal) => {
+                  rows.push({ name: signal.name })
+                });
 
     // get timestamps
     var latestTimestamp = nextProps.data[simulator].values[0][nextProps.data[simulator].values[0].length - 1].x;
@@ -82,19 +85,23 @@ class WidgetPlotTable extends Component {
   }
   
   render() {
-    console.log("Signal: " + this.state.signal);
     return (
-      <div className="plot-table-widget" style={{ width: '100%', height: '100%' }} ref="wrapper">
+      <div className="plot-table-widget" ref="wrapper">
         <h4>{this.props.widget.name}</h4>
 
         <div className="content">
           <div className="widget-table">
-            <ButtonGroup vertical>
-              { this.state.rows.map( (row, index) => (
-                  <Button key={index} active={ index === this.state.signal } disabled={ this.props.editing } onClick={() => this.setState({ signal: Number(index) }) } > { row.name } </Button>
-                ))
-              }
-            </ButtonGroup>
+            { this.state.rows && this.state.rows.length > 0 ? (
+              <ButtonGroup vertical>
+                { this.state.rows.map( (row, index) => (
+                    <Button key={index} active={ index === this.state.signal } disabled={ this.props.editing } onClick={() => this.setState({ signal: Number(index) }) } > { row.name } </Button>
+                  ))
+                }
+              </ButtonGroup> 
+            ) : (
+                <small>No signal found, select a different signal type.</small>
+            )
+            }
           </div>
 
           <div className="widget-plot">

src/containers/visualization.js

@@ -163,6 +163,7 @@ class Visualization extends Component {
       widget.minHeight = 20;
     } else if (item.name === 'PlotTable') {
       widget.simulator = this.state.simulation.models[0].simulator;
+      widget.signalType = this.state.simulation.models[0].mapping[0].type.toLowerCase();
       widget.minWidth = 400;
       widget.minHeight = 200;
       widget.width = 500;

src/styles/widgets.css

@@ -93,6 +93,7 @@
     right: 7px;
 }
 
+/* PlotTable widget */
 .plot-table-widget, .plot-widget, .value-widget, .image-widget, .label-widget {
     width: 100%;
     height: 100%;
@@ -112,6 +113,11 @@
   justify-content: center;
 }
 
+.plot-table-widget small {
+    text-align: center;
+}
+/* End PlotTable Widget */
+
 /* Reset Bootstrap styles to "disable" while editing */
 div[class*="-widget"] .btn[disabled], div[class*="-widget"] input[disabled], .form-control[disabled] {
   cursor: inherit;