Checkin.

From what I can tell, the bottleneck is in selectize itself. Will drop
this and work on select2.

app/helpers/get-property.js

@@ -1,8 +1,8 @@
 import Ember from 'ember';
 
-// This will be unneccesary when ember 2.0 lands
-export function getProperty(params) {
-  return Ember.get(params[0], params[1]);
-}
+const { get, Helper: { helper } } = Ember;
 
-export default Ember.HTMLBars.makeBoundHelper(getProperty);
+// This will be unneccesary when ember 2.0 lands
+export default helper(function(params) {
+  return get(params[0], params[1]);
+});

app/pods/components/x-select/component.js

@@ -0,0 +1,50 @@
+import Ember from 'ember';
+
+const { Component, isEmpty } = Ember;
+
+export default Component.extend({
+  tagName: 'select',
+
+  nameAttr: null,
+  listItems: null,
+  placeholder: null,
+  selected: null,
+  selectize: null,
+  multiple: false,
+
+  attributeBindings: [
+    'multiple',
+  ],
+
+  change: function() {
+    this.attrs["update"](this.$()[0].selectize.getValue());
+  },
+
+  didReceiveAttrs: function() {
+    this._super(...arguments);
+    console.log('didReceiveAttrs');
+
+    if (!this.attrs.update) {
+      throw new Error(`You must provide an \`update\` action.`);
+    }
+
+    Ember.run.schedule('actions', this, () => {
+      console.log('before adding');
+      this.$()[0].selectize.setValue(this.get('selected'), true);
+      console.log('after adding')
+    });
+  },
+
+  didInsertElement: function() {
+    console.log('didInsertElement');
+    const options = {
+      closeAfterSelect: true,
+      selectOnTab: true,
+      plugins: ['drag_drop'],
+      items: this.get('selected'),
+    }
+
+    this.$().selectize(options);
+  },
+
+});

app/pods/components/x-select/template.hbs

@@ -0,0 +1,6 @@
+{{#if placeholder}}
+  <option value="">{{placeholder}}</option>
+{{/if}}
+{{#each listItems as |option|}}
+  <option value={{option.id}} selected={{equal option.id value.id}}>{{get-property option nameAttr}}</option>
+{{/each}}

app/pods/protected/compare/controller.js

@@ -12,10 +12,12 @@ export default Controller.extend({
     },
 
     updateStrainSelection: function(selection) {
+      console.log(selection);
       this.set('selectedStrains', selection);
     },
 
     updateCharacteristicSelection: function(selection) {
+      console.log(selection);
       this.set('selectedCharacteristics', selection);
     },
   }

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

@@ -30,8 +30,8 @@ export default Route.extend({
     }
 
     const compare = this.controllerFor('protected.compare');
-    compare.set('selectedStrains', params.strain_ids);
-    compare.set('selectedCharacteristics', params.characteristic_ids);
+    compare.set('selectedStrains', params.strain_ids.split(','));
+    compare.set('selectedCharacteristics', params.characteristic_ids.split(','));
 
     return this.get('ajax').request('/compare', { data: params });
   },
@@ -45,14 +45,14 @@ export default Route.extend({
     const compare = this.controllerFor('protected.compare');
 
     const strains = [];
-    const strain_ids = compare.get('selectedStrains').split(',');
+    const strain_ids = compare.get('selectedStrains');
     strain_ids.forEach((id) => {
       strains.push(this.store.peekRecord('strain', id));
     });
     controller.set('strains', strains);
 
     const characteristics = [];
-    const characteristic_ids = compare.get('selectedCharacteristics').split(',');
+    const characteristic_ids = compare.get('selectedCharacteristics');
     characteristic_ids.forEach((id) => {
       characteristics.push(this.store.peekRecord('characteristic', id));
     });

app/pods/protected/compare/select-form/component.js

@@ -10,17 +10,12 @@ export default Component.extend({
   "update-strains": null,
   "update-characteristics": null,
 
-  selectedStrains: null,
-  selectedCharacteristics: null,
-
   updateStrains: function(selection) {
-    this.set('selectedStrains', selection);
-    this.attrs['update-strains'](this.get('selectedStrains'));
+    this.attrs["update-strains"](selection);
   },
 
   updateCharacteristics: function(selection) {
-    this.set('selectedCharacteristics', selection);
-    this.attrs['update-characteristics'](this.get('selectedCharacteristics'));
+    this.attrs['update-characteristics'](selection);
   },
 
   actions: {
@@ -38,11 +33,11 @@ export default Component.extend({
       strains.forEach((strain) => {
         strain_ids.push(strain.get('id'));
       });
-      this.updateStrains(strain_ids.join(","));
+      this.updateStrains(strain_ids);
     },
 
     deselectAllStrains: function() {
-      this.updateStrains("");
+      this.updateStrains([]);
     },
 
     selectAllCharacteristics: function() {
@@ -51,11 +46,19 @@ export default Component.extend({
       chars.forEach((char) => {
         char_ids.push(char.get('id'));
       });
-      this.updateCharacteristics(char_ids.join(","));
+      this.updateCharacteristics(char_ids);
     },
 
     deselectAllCharacteristics: function() {
-      this.updateCharacteristics("");
+      this.updateCharacteristics([]);
+    },
+
+    updateStrainSelection: function(selection) {
+      this.updateStrains(selection);
+    },
+
+    updateCharacteristicSelection: function(selection) {
+      this.updateCharacteristics(selection);
     },
   },
 });

app/pods/protected/compare/select-form/template.hbs

@@ -5,13 +5,13 @@
         <li>
           <label>Strains</label>
           {{
-            select-2
+            x-select
+            listItems=strains
+            nameAttr="fullNameMU"
+            update=(action "updateStrainSelection")
+            placeholder="Select one ore more strains"
             multiple=true
-            content=strains
-            value=selectedStrains
-            optionValuePath="id"
-            optionLabelPath="fullNameMU"
-            placeholder="Select one or more strains"
+            selected=selectedStrains
           }}
         </li>
         <li>
@@ -25,13 +25,13 @@
         <li>
           <label>Characteristics</label>
           {{
-            select-2
+            x-select
+            listItems=characteristics
+            nameAttr="characteristicName"
+            update=(action "updateCharacteristicSelection")
+            placeholder="Select one ore more characteristics"
             multiple=true
-            content=characteristics
-            value=selectedCharacteristics
-            optionValuePath="id"
-            optionLabelPath="characteristicName"
-            placeholder="Select one or more characteristics"
+            selected=selectedCharacteristics
           }}
         </li>
         <li>

bower.json

@@ -21,6 +21,8 @@
     "quill": "~0.19.14",
     "pretender": "~0.10.1",
     "lodash": "~3.7.0",
-    "Faker": "~3.0.0"
+    "Faker": "~3.0.0",
+    "selectize": "~0.12.1",
+    "jQuery UI Sortable": "jquery-ui-sortable#*"
   }
 }

ember-cli-build.js

@@ -14,6 +14,8 @@ module.exports = function(defaults) {
   // quill
   app.import('bower_components/quill/dist/quill.base.css');
   app.import('bower_components/quill/dist/quill.snow.css');
+  // selectize
+  app.import('bower_components/selectize/dist/css/selectize.default.css');
 
   // LIBS ////////////////////////////////////////////////////////////////////////
   // flakes (and deps)
@@ -25,6 +27,10 @@ module.exports = function(defaults) {
   app.import('bower_components/moment/moment.js');
   // quill
   app.import('bower_components/quill/dist/quill.min.js');
+  // jquery ui sortable
+  app.import('bower_components/jQuery UI Sortable/jquery-ui-sortable.min.js');
+  // selectize
+  app.import('bower_components/selectize/dist/js/standalone/selectize.min.js');
 
   return app.toTree();
 };