Add table plot widget type

In the plot widget the plot type can be selected
Fix plot widget selecting signals
Fix widgets data observers

app/components/widget-plot.js

@@ -42,7 +42,11 @@ export default WidgetAbstract.extend({
 
   checkedSignals: {},
 
-  _updateDataObserver: Ember.on('init', Ember.observer('widget.widgetData.simulator', function() {
+  plotType: "multiple",
+
+  observeQuery: null,
+
+  _updateDataObserver: Ember.on('init', Ember.observer('widget.widgetData.simulator', 'widget.widgetData.type', 'widget.widgetData.signals', function() {
     // get query for observer
     let simulatorId = this.get('widget.widgetData.simulator');
     let query = 'data.' + simulatorId + '.sequence';
@@ -51,27 +55,67 @@ export default WidgetAbstract.extend({
     let signals = this.get('widget.widgetData.signals');
     this.set('signals', signals);
 
-    this.addObserver(query, function() {
-      // get values from array
-      let values = this.get('data.' + simulatorId + '.flotValues');
-      var updatedValues = this.get('plotData');
+    let plotType = this.get('widget.widgetData.type');
+    this.set('plotType', plotType);
 
-      // update values
-      var index = 0;
+    if (plotType === 'table') {
+      // set simulation model for table with signals
+      var self = this;
+      let simulatorid = this.get('widget.widgetData.simulator');
 
-      this.get('signals').forEach(function(signal) {
-        updatedValues.replace(index, 1, Ember.A([ values[signal] ]));
-        index += 1;
+      this.get('widget.visualization').then((visualization) => {
+        visualization.get('project').then((project) => {
+          project.get('simulation').then((simulation) => {
+            simulation.get('models').then((simulationModels) => {
+              // find simulation model by simulatorid
+              simulationModels.forEach(function(simulationModel) {
+                simulationModel.get('simulator').then((simulator) => {
+                  if (simulator.get('simulatorid') === simulatorid) {
+                    // set simulation model
+                    self.set('simulationModel', simulationModel);
+                  }
+                });
+              });
+            });
+          });
+        });
       });
+    }
 
-      this.set('plotData', updatedValues);
-    });
+    // update observer TODO: Only update when (query) changed
+    let observeQuery = this.get('observeQuery');
+    if (query != observeQuery) {
+      if (observeQuery != null) {
+        this.removeObserver(observeQuery, this._updateData);
+      }
+
+      this.addObserver(query, this._updateData);
+      this.set('observeQuery', query);
+    }
   })),
 
+  _updateData() {
+    // get values from array
+    let simulatorId = this.get('widget.widgetData.simulator');
+    let values = this.get('data.' + simulatorId + '.flotValues');
+    var updatedValues = Ember.A([]);
+
+    // update values
+    var index = 0;
+
+    this.get('signals').forEach(function(signal) {
+      updatedValues.replace(index, 1, Ember.A([ values[signal] ]));
+      index += 1;
+    });
+
+    this.set('plotData', updatedValues);
+  },
+
   doubleClick() {
     if (this.get('editing') === true) {
       // prepare modal
       this.set('name', this.get('widget.name'));
+      this.set('plotType', this.get('widget.widgetData.type'));
       this.set('errorMessage', null);
 
       // get signal mapping for simulation model
@@ -140,7 +184,10 @@ export default WidgetAbstract.extend({
                 if (simulationModel.get('name') === simulationModelName) {
                   simulationModel.get('simulator').then((simulator) => {
                     // set simulator
-                    let widgetData = {};
+                    let widgetData = {
+                      type: self.get('plotType')
+                    };
+
                     widgetData.simulator = simulator.get('simulatorid');
 
                     // set signals
@@ -159,8 +206,6 @@ export default WidgetAbstract.extend({
                     // save properties
                     properties['widgetData'] = widgetData;
 
-                    console.log(properties);
-
                     self.get('widget').setProperties(properties);
 
                     self.get('widget').save().then(function() {
@@ -207,6 +252,21 @@ export default WidgetAbstract.extend({
           });
         });
       });
+    },
+
+    selectType(type) {
+      this.set('plotType', type);
+    },
+
+    selectTableSignal(signal) {
+      // display signal
+      let mapping = this.get('simulationModel.mapping');
+
+      for (var i = 0; i < mapping.length; i++) {
+        if (mapping[i] === signal) {
+          this.set('widget.widgetData.signals', [ i ]);
+        }
+      }
     }
   }
 });

app/components/widget-table.js

@@ -18,29 +18,19 @@ export default WidgetAbstract.extend({
 
   signals: [],
 
+  observeQuery: null,
+
   _updateDataObserver: Ember.on('init', Ember.observer('widget.widgetData.simulator', function() {
     // get query for observer
     let simulatorId = this.get('widget.widgetData.simulator');
     let query = 'data.' + simulatorId + '.sequence';
+    let observeQuery = this.get('observeQuery');
+    if (observeQuery != null) {
+      this.removeObserver(observeQuery, this._updateData);
+    }
 
-    this.addObserver(query, function() {
-      // get signal names to fill data in
-      let signals = this.get('signals');
-      if (!signals) {
-        // wait till names are loaded
-        return;
-      }
-
-      // get values from array
-      let values = this.get('data.' + simulatorId + '.values');
-      for (let i = 0; i < values.length; i++) {
-        if (!signals[i]) {
-          break;
-        }
-
-        Ember.set(signals[i], 'value', values[i]);
-      }
-    });
+    this.addObserver(query, this._updateData);
+    this.set('observeQuery', query);
 
     // get signal names
     let self = this;
@@ -70,6 +60,25 @@ export default WidgetAbstract.extend({
     });
   })),
 
+  _updateData() {
+    // get signal names to fill data in
+    let signals = this.get('signals');
+    if (!signals) {
+      // wait till names are loaded
+      return;
+    }
+
+    // get values from array
+    let values = this.get('data.' + simulatorId + '.values');
+    for (let i = 0; i < values.length; i++) {
+      if (!signals[i]) {
+        break;
+      }
+
+      Ember.set(signals[i], 'value', values[i]);
+    }
+  },
+
   doubleClick() {
     if (this.get('editing') === true) {
       // prepare modal

app/components/widget-value.js

@@ -16,19 +16,30 @@ export default WidgetAbstract.extend({
   minWidth_resize: 50,
   minHeight_resize: 20,
 
+  observeQuery: null,
+
   _updateDataObserver: Ember.on('init', Ember.observer('widget.widgetData.simulator', 'widget.widgetData.signal', function() {
+    // update observer
     let query = 'data.' + this.get('widget.widgetData.simulator') + '.sequence';
-    this.addObserver(query, function() {
-      // get value from array
-      let values = this.get('data.' + this.get('widget.widgetData.simulator') + '.values');
-      if (values) {
-        this.set('value', values[this.get('widget.widgetData.signal')]);
-      } else {
-        this.set('value', null);
-      }
-    });
+    let observeQuery = this.get('observeQuery');
+    if (observeQuery != null) {
+      this.removeObserver(observeQuery, this._updateData);
+    }
+
+    this.addObserver(query, this._updateData);
+    this.set('observeQuery', query);
   })),
 
+  _updateData() {
+    // get value from array
+    let values = this.get('data.' + this.get('widget.widgetData.simulator') + '.values');
+    if (values) {
+      this.set('value', values[this.get('widget.widgetData.signal')]);
+    } else {
+      this.set('value', null);
+    }
+  },
+
   doubleClick() {
     if (this.get('editing') === true) {
       // prepare modal

app/styles/widgets.scss

@@ -76,3 +76,16 @@
 
   padding: 2px 5px;
 }
+
+/**
+ * Component: widget-plot
+ */
+.widgetPlot-signal-table {
+  border: 1px solid gray;
+
+  padding: 2px 5px;
+}
+
+.widgetPlot-signal-table th {
+  border: 0;
+}

app/templates/components/widget-plot.hbs

@@ -1,6 +1,29 @@
 <h4>{{widget.name}}</h4>
 
-{{flow-plot data=plotData options=plotOptions}}
+{{#if (eq plotType "table")}}
+  <table class="widgetPlot-signal-table" style="float: left; width: 150px;">
+    <tr>
+      <th>
+        Signal
+      </th>
+    </tr>
+    {{#each simulationModel.mapping as |signal|}}
+      <tr>
+        <td>
+          <a href="" {{action "selectTableSignal" signal}}>{{signal}}</a>
+        </td>
+      </tr>
+    {{/each}}
+  </table>
+
+  <div style="height: 100%; margin-left: 200px;">
+    {{flow-plot data=plotData options=plotOptions}}
+  </div>
+{{/if}}
+
+{{#if (eq plotType "multiple")}}
+  {{flow-plot data=plotData options=plotOptions}}
+{{/if}}
 
 {{#if isShowingModal}}
   {{#modal-dialog attachment="middle center" translucentOverlay=true}}
@@ -30,15 +53,32 @@
         </tr>
         <tr>
           <td>
-            <label for="signals">Signals</label>
+            <label for="type">Type</label>
           </td>
           <td>
-            {{#each simulationModel.mapping as |signal|}}
-              {{input type='checkbox' name=signal checked=(mut (get checkedSignals signal))}}<label for={{signal}}> {{signal}}</label>
-              <br />
-            {{/each}}
+            <select onchange={{action "selectType" value="target.value"}} >
+              <option value="multiple" selected={{eq plotType "multiple"}}>Multiple</option>
+              <option value="table" selected={{eq plotType "table"}}>Table</option>
+            </select>
           </td>
         </tr>
+        {{#if (eq plotType "multiple")}}
+          <tr>
+            <td>
+              <label for="signals">Signals</label>
+            </td>
+            <td>
+              {{#each simulationModel.mapping as |signal|}}
+                {{input type='checkbox' name=signal checked=(mut (get checkedSignals signal))}}<label for={{signal}}> {{signal}}</label>
+                <br />
+              {{/each}}
+            </td>
+          </tr>
+        {{/if}}
+
+        {{#if (eq plotType "table")}}
+
+        {{/if}}
         <tr>
           <td colspan="2">
             <button {{action 'cancelModal'}}>Cancel</button>