Refactor compare

app/pods/protected/compare/controller.js

@@ -1,47 +1,14 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
-  strains: [],
-  dataEmpty: true,
-
   actions: {
-    search: function(selectedStrains, selectedCharacteristics) {
+    search: function() {
-      if (Ember.isEmpty(selectedStrains) || Ember.isEmpty(selectedCharacteristics)) {
+      let query = {
-        this.set('dataEmpty', true);
+        strain_ids: this.get('selectedStrains'),
-        return false;
+        characteristic_ids: this.get('selectedCharacteristics'),
-      }
+      };
 
-      let data = Ember.A();
+      this.transitionToRoute('protected.compare.results', {queryParams: query});
-      let strains = [];
-      selectedStrains.forEach((strain) => {
-        let s = this.store.getById('strain', strain);
-        strains.pushObject(s);
-      });
-      this.set('strains', strains);
-
-      this.store.find('measurement', {
-        strain: selectedStrains,
-        characteristic: selectedCharacteristics,
-      }).then((measurements) => {
-        selectedCharacteristics.forEach((characteristic) => {
-          let char = this.store.getById('characteristic', characteristic);
-          let row = {
-            characteristic: char.get('characteristicName'),
-          };
-          selectedStrains.forEach((strain) => {
-            let meas = measurements.filterBy('strain.id', strain)
-              .filterBy('characteristic.id', characteristic);
-            if (!Ember.isEmpty(meas)) {
-              row[strain] = meas[0].get('value');
-            } else {
-              row[strain] = '';
-            }
-          });
-          data.pushObject(row);
-        });
-        this.set('data', data);
-        this.set('dataEmpty', false);
-      });
     }
-  },
+  }
 });

app/pods/protected/compare/results/controller.js

@@ -0,0 +1,50 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+  queryParams: ['strain_ids', 'characteristic_ids'],
+
+  strains: function() {
+    let strains = [];
+    let strain_ids = this.get('strain_ids').split(',');
+    strain_ids.forEach((id) => {
+      strains.push(this.store.peekRecord('strain', id));
+    })
+    return strains;
+  }.property('strain_ids'),
+
+  characteristics: function() {
+    let characteristics = [];
+    let characteristic_ids = this.get('characteristic_ids').split(',');
+    characteristic_ids.forEach((id) => {
+      characteristics.push(this.store.peekRecord('characteristic', id));
+    })
+    return characteristics;
+  }.property('characteristic_ids'),
+
+  // Set up data table matrix
+  data: function() {
+    let characteristics = this.get('characteristics');
+    let strains = this.get('strains');
+    let measurements = this.get('model');
+    let data = Ember.A();
+
+    characteristics.forEach((characteristic) => {
+      let row = {
+        characteristic: characteristic.get('characteristicName'),
+      };
+
+      strains.forEach((strain) => {
+        let meas = measurements.filterBy('strain.id', strain.get('id'))
+          .filterBy('characteristic.id', characteristic.get('id'));
+        if (!Ember.isEmpty(meas)) {
+          row[strain.get('id')] = meas[0].get('value');
+        } else {
+          row[strain.get('id')] = '';
+        }
+      });
+      data.pushObject(row);
+    });
+    return data;
+  }.property('characteristics', 'strains'),
+
+});

app/pods/protected/compare/results/route.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model: function(params) {
+    let compare = this.controllerFor('protected.compare');
+    compare.set('selectedStrains', params.strain_ids);
+    compare.set('selectedCharacteristics', params.characteristic_ids);
+    return this.store.query('measurement', params);
+  },
+
+});

app/pods/protected/compare/results/template.hbs

@@ -0,0 +1,26 @@
+<div class="overflow-div">
+  <table class="flakes-table">
+    <thead>
+      <tr>
+        <th>Characteristic</th>
+        {{#each strains as |strain|}}
+          <th>
+            {{#link-to 'protected.strains.show' strain.id classBinding="data.typeStrain:type-strain"}}
+              {{strain.fullNameMU}}
+            {{/link-to}}
+          </th>
+        {{/each}}
+      </tr>
+    </thead>
+    <tbody>
+      {{#each data as |row|}}
+        <tr>
+          <td>{{row.characteristic}}</td>
+          {{#each strains as |strain|}}
+            <td>{{get-property row strain.id}}</td>
+          {{/each}}
+        </tr>
+      {{/each}}
+    </tbody>
+  </table>
+</div>

app/pods/protected/compare/route.js

@@ -1,11 +1,13 @@
 import Ember from 'ember';
 
 export default Ember.Route.extend({
-  resetController: function(controller, isExiting /*, transition*/) {
+  model: function() {
-    if (isExiting) {
+    return this.store.findAll('characteristic');
-      controller.set('data', null);
+  },
-      controller.set('strains', null);
+
-      controller.set('dataEmpty', true);
+  setupController: function(controller, model) {
-    }
+    controller.set('characteristics', this.store.peekAll('characteristic'));
-  }
+    controller.set('strains', this.store.peekAll('strain'));
+  },
+
 });

app/pods/protected/compare/template.hbs

@@ -1,41 +1,41 @@
 <h2>{{genus-name}} - Compare Strains</h2>
 
-{{
+<div class="span-1">
-  measurement-search-panel
+  <fieldset>
-  search='search'
+    <form>
-  strainLabel='Select one or more strains'
+      <ul>
-  charLabel='Select one or more characteristics'
+        <li>
-}}
+          <label>Strains</label>
-
+          {{
-{{#if dataEmpty}}
+            select-2
-  <div class="flakes-message information">
+            multiple=true
-    Please select one or more strains and one or more characteristics.
+            content=strains
-  </div>
+            value=selectedStrains
-{{else}}
+            optionValuePath="id"
-<div class="overflow-div">
+            optionLabelPath="fullNameMU"
-  <table class="flakes-table">
+            placeholder="Select one or more strains"
-    <thead>
+          }}
-      <tr>
+        </li>
-        <th>Characteristic</th>
+        <li>
-        {{#each strains as |strain|}}
+          <label>Characteristics</label>
-          <th>
+          {{
-            {{#link-to 'protected.strains.show' strain.id classBinding="data.typeStrain:type-strain"}}
+            select-2
-              {{strain.fullNameMU}}
+            multiple=true
-            {{/link-to}}
+            content=characteristics
-          </th>
+            value=selectedCharacteristics
-        {{/each}}
+            optionValuePath="id"
-      </tr>
+            optionLabelPath="characteristicName"
-    </thead>
+            placeholder="Select one or more characteristics"
-    <tbody>
+          }}
-      {{#each data as |row|}}
+        </li>
-        <tr>
+        <li>
-          <td>{{row.characteristic}}</td>
+          <a class="action button-gray smaller right" {{action 'search'}}>
-          {{#each strains as |strain|}}
+            Search
-            <td>{{get-property row strain.id}}</td>
+          </a>
-          {{/each}}
+        </li>
-        </tr>
+      </ul>
-      {{/each}}
+    </form>
-    </tbody>
+  </fieldset>
-  </table>
 </div>
-{{/if}}
+
+{{outlet}}

app/router.js

@@ -20,7 +20,10 @@ Router.map(function() {
     this.route('about');
     this.route('characteristics');
     this.route('measurements');
-    this.route('compare');
+
+    this.route('compare', function() {
+      this.route('results');
+    });
 
     this.route('species', function() {
       this.route('new');