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();
-      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)
+      this.transitionToRoute('protected.compare.results', {queryParams: query});
-              .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">
+  <fieldset>
+    <form>
+      <ul>
+        <li>
+          <label>Strains</label>
           {{
-  measurement-search-panel
+            select-2
-  search='search'
+            multiple=true
-  strainLabel='Select one or more strains'
+            content=strains
-  charLabel='Select one or more characteristics'
+            value=selectedStrains
+            optionValuePath="id"
+            optionLabelPath="fullNameMU"
+            placeholder="Select one or more strains"
           }}
+        </li>
+        <li>
+          <label>Characteristics</label>
+          {{
+            select-2
+            multiple=true
+            content=characteristics
+            value=selectedCharacteristics
+            optionValuePath="id"
+            optionLabelPath="characteristicName"
+            placeholder="Select one or more characteristics"
+          }}
+        </li>
+        <li>
+          <a class="action button-gray smaller right" {{action 'search'}}>
+            Search
+          </a>
+        </li>
+      </ul>
+    </form>
+  </fieldset>
+</div>
 
-{{#if dataEmpty}}
+{{outlet}}
-  <div class="flakes-message information">
-    Please select one or more strains and one or more characteristics.
-  </div>
-{{else}}
-<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>
-{{/if}}

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');