Cleaned up scientific naming.

app/components/scientific-name.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import layout from '../templates/components/scientific-name';
+
+export default Ember.Component.extend({
+  layout: layout,
+  tagName: 'span',
+  strain: null, // passed in
+});

app/controllers/strains/index.js

@@ -1,5 +1,5 @@
 import SortableController from '../sortable';
 
 export default SortableController.extend({
-  sortBy: 'strainName',
+  sortBy: 'fullName',
 });

app/models/strain.js

@@ -12,5 +12,8 @@ export default DS.Model.extend({
   createdAt: DS.attr('date'),
   updatedAt: DS.attr('date'),
   deletedAt: DS.attr('date'),
-  totalMeasurements: DS.attr('number')
+  totalMeasurements: DS.attr('number'),
+  fullName: Ember.computed('speciesName', 'strainName', function() {
+    return this.get('speciesName') + ' (' + this.get('strainName') + ')';
+  })
 });

app/templates/characteristics/index.hbs

@@ -1,4 +1,4 @@
-<h2>Hymenobacter Characteristics</h2>
+<h2><em>Hymenobacter</em> Characteristics</h2>
 <h3>Total characteristics: {{controller.length}}</h3>
 
 <table class="flakes-table">

app/templates/components/scientific-name.hbs

@@ -0,0 +1 @@
+<em>{{strain.speciesName}}</em> (strain {{strain.strainName}})

app/templates/strains/index.hbs

@@ -1,17 +1,21 @@
-<h2>Hymenobacter Strains</h2>
+<h2><em>Hymenobacter</em> Strains</h2>
 <h3>Total strains: {{controller.length}}</h3>
 
 <table class="flakes-table">
   <thead>
     <tr>
-      <th {{action "setSortBy" "strainName"}}>Name</th>
+      <th {{action "setSortBy" "fullName"}}>Name</th>
       <th {{action "setSortBy" "totalMeasurements"}}>Measurements</th>
     </tr>
   </thead>
   <tbody>
     {{#each strain in controller}}
       <tr>
-        <td>{{link-to strain.strainName 'measurements' strain}}</td>
+        <td>
+          {{#link-to 'measurements' strain}}
+            {{scientific-name strain=strain}}
+          {{/link-to}}
+        </td>
         <td>{{strain.totalMeasurements}}</td>
       </tr>
     {{/each}}

app/templates/strains/show.hbs

@@ -1,12 +1,12 @@
 <div class="grid-1">
   <div class="span-1">
     <fieldset class="flakes-information-box">
-      <legend>{{model.strainName}}</legend>
+      <legend>Strain {{model.strainName}}</legend>
       {{! ROW 1 }}
       <div class="grid-4">
         <dl class="span-2">
           <dt>Species</dt>
-          <dd>{{model.speciesName}}</dd>
+          <dd><em>{{model.speciesName}}</em></dd>
         </dl>
         <dl class="span-2">
           <dt>Type</dt>

server/mocks/strains.js

@@ -6,7 +6,7 @@ module.exports = function(app) {
     {
       id: 1,
       speciesName: "Species One",
-      strainName: "Strain 1",
+      strainName: "ABC",
       strainType: "Test Type",
       etymology: "Test Etymology",
       accessionBanks: "Test Accession",
@@ -21,7 +21,7 @@ module.exports = function(app) {
     {
       id: 2,
       speciesName: "Species Two",
-      strainName: "Strain 2",
+      strainName: "XYZ",
       strainType: "Test Type",
       etymology: "Test Etymology",
       accessionBanks: "Test Accession",
@@ -36,7 +36,7 @@ module.exports = function(app) {
     {
       id: 3,
       speciesName: "Species Three",
-      strainName: "Strain 3",
+      strainName: "QRS",
       strainType: "Test Type",
       etymology: "Test Etymology",
       accessionBanks: "Test Accession",
@@ -51,7 +51,7 @@ module.exports = function(app) {
     {
       id: 4,
       speciesName: "Species Four",
-      strainName: "Strain 4",
+      strainName: "LMN",
       strainType: "Test Type",
       etymology: "Test Etymology",
       accessionBanks: "Test Accession",

tests/unit/components/scientific-name-test.js

@@ -0,0 +1,21 @@
+import {
+  moduleForComponent,
+  test
+} from 'ember-qunit';
+
+moduleForComponent('scientific-name', {
+  // specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar']
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});