Merge /home/zas1024/gene

34 files changed, 1854 insertions, 1146 deletions

diff --git a/.gitignore b/.gitignore
index fc051245..9a509baa 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,4 @@
 *.orig
 *.bak
 *~
-
+web/new_genotypes/HSNIH.json
diff --git a/misc/notes.txt b/misc/notes.txt
index f6a2bb33..5a43ab8a 100644
--- a/misc/notes.txt
+++ b/misc/notes.txt
@@ -28,6 +28,7 @@ for python packages ****
 
 Upgrade system packages for security updates, etc:
 apt-get update
+apt-get dist-upgrade (can probably be used in place of apt-get upgrade)
 apt-get upgrade
 
 **"apt-cache search" searches for text in the description for various packages, while
diff --git a/wqflask/base/data_set.py b/wqflask/base/data_set.py
index cd8c1ac1..fbe78d5d 100755
--- a/wqflask/base/data_set.py
+++ b/wqflask/base/data_set.py
@@ -318,12 +318,17 @@ class DatasetGroup(object):
 
         #determine default genotype object
         if self.incparentsf1 and genotype_1.type != "intercross":
-            self.genotype = genotype_2
+            #self.genotype = genotype_2
+            genotype = genotype_2
         else:
             self.incparentsf1 = 0
-            self.genotype = genotype_1
+            #self.genotype = genotype_1
+            genotype = genotype_1
 
-        self.samplelist = list(self.genotype.prgy)
+        #self.samplelist = list(self.genotype.prgy)
+        self.samplelist = list(genotype.prgy)
+        
+        return genotype
 
 
 #class DataSets(object):
@@ -624,7 +629,7 @@ class PhenotypeDataSet(DataSet):
                         
                     description = this_trait.pre_publication_description
             
-            this_trait.description_display = description
+            this_trait.description_display = description.strip()
 
             if not this_trait.year.isdigit():
                 this_trait.pubmed_text = "N/A"
@@ -1084,6 +1089,7 @@ class MrnaAssayDataSet(DataSet):
                             Strain.Name
                     """ % (escape(trait), escape(self.name))
         results = g.db.execute(query).fetchall()
+        print("RETRIEVED RESULTS HERE:", results)
         return results
     
     
diff --git a/wqflask/base/trait.py b/wqflask/base/trait.py
index 731f99eb..712d9af5 100755
--- a/wqflask/base/trait.py
+++ b/wqflask/base/trait.py
@@ -12,10 +12,13 @@ from base.data_set import create_dataset
 from dbFunction import webqtlDatabaseFunction
 from utility import webqtlUtil
 
+from wqflask import app
+
+import simplejson as json
 from MySQLdb import escape_string as escape
 from pprint import pformat as pf
 
-from flask import Flask, g
+from flask import Flask, g, request
 
 def print_mem(stage=""):
     mem = resource.getrusage(resource.RUSAGE_SELF).ru_maxrss
@@ -43,7 +46,7 @@ class GeneralTrait(object):
         self.sequence = kw.get('sequence')         # Blat sequence, available for ProbeSet
         self.data = kw.get('data', {})
 
-        # Sets defaultst
+        # Sets defaults
         self.locus = None
         self.lrs = None
         self.pvalue = None
@@ -63,6 +66,17 @@ class GeneralTrait(object):
         # So we could add a simple if statement to short-circuit this if necessary
         self.retrieve_info(get_qtl_info=get_qtl_info)
         self.retrieve_sample_data()
+        
+        
+    def jsonable(self):
+        """Return a dict suitable for using as json
+        
+        Actual turning into json doesn't happen here though"""
+        return dict(name=self.name,
+                    dataset=self.dataset.name,
+                    description=self.description_display,
+                    mean=self.mean)
+
 
     def get_info(self):
         """For lots of traits just use get_trait_info in dataset instead...that will be way
@@ -154,7 +168,7 @@ class GeneralTrait(object):
                 result.append(None)
         return result
 
-    def export_informative(self, incVar=0):
+    def export_informative(self, include_variance=0):
         """
         export informative sample
         mostly used in qtl regression
@@ -163,12 +177,12 @@ class GeneralTrait(object):
         samples = []
         vals = []
         the_vars = []
-        for sample, value in self.data.items():
-            if value.val != None:
-                if not incVar or value.var != None:
-                    samples.append(sample)
-                    vals.append(value.val)
-                    the_vars.append(value.var)
+        for sample_name, sample_data in self.data.items():
+            if sample_data.value != None:
+                if not include_variance or sample_data.variance != None:
+                    samples.append(sample_name)
+                    vals.append(sample_data.value)
+                    the_vars.append(sample_data.variance)
         return  samples, vals, the_vars
 
 
@@ -235,11 +249,19 @@ class GeneralTrait(object):
         # Todo: is this necessary? If not remove
         self.data.clear()
 
+        if self.dataset.group.parlist:
+            all_samples_ordered = (self.dataset.group.parlist +
+                                   self.dataset.group.f1list +
+                                   self.dataset.group.samplelist)
+        elif self.dataset.group.f1list:
+            all_samples_ordered = self.dataset.group.f1list + self.dataset.group.samplelist
+        else:
+            all_samples_ordered = self.dataset.group.samplelist
+
         if results:
             for item in results:
-                #name, value, variance, num_cases = item
+                name, value, variance, num_cases = item
                 if not samplelist or (samplelist and name in samplelist):
-                    name = item[0]
                     self.data[name] = webqtlCaseData(*item)   #name, value, variance, num_cases)
 
     #def keys(self):
@@ -608,3 +630,22 @@ class GeneralTrait(object):
                 ZValue = 0.5*log((1.0+self.correlation)/(1.0-self.correlation))
                 ZValue = ZValue*sqrt(self.overlap-3)
                 self.p_value = 2.0*(1.0 - reaper.normp(abs(ZValue)))
+
+
+
+@app.route("/trait/get_sample_data")
+def get_sample_data():
+    params = request.args
+    trait = params['trait']
+    dataset = params['dataset']
+    
+    trait_ob = GeneralTrait(name=trait, dataset_name=dataset)
+    
+    return json.dumps({key: value.value for key, value in trait_ob.data.iteritems() })
+    
+    #jsonable_sample_data = {}
+    #for sample in trait_ob.data.iteritems():
+    #    jsonable_sample_data[sample] = trait_ob.data[sample].value
+    #
+    #return jsonable_sample_data
+    
\ No newline at end of file
diff --git a/wqflask/wqflask/collect.py b/wqflask/wqflask/collect.py
index ef7b37df..48b4b4da 100644
--- a/wqflask/wqflask/collect.py
+++ b/wqflask/wqflask/collect.py
@@ -23,7 +23,7 @@ Redis = redis.StrictRedis()
 
 
 from flask import (Flask, g, render_template, url_for, request, make_response,
-                   redirect, flash)
+                   redirect, flash, jsonify)
 
 from wqflask import app
 
@@ -122,16 +122,18 @@ def create_new():
 
 @app.route("/collections/list")
 def list_collections():
+    params = request.args
     user_collections = g.user_session.user_ob.user_collections
     return render_template("collections/list.html",
+                           params = params,
                            user_collections = user_collections,
                            )
 
 
-
 @app.route("/collections/view")
 def view_collection():
     params = request.args
+    print("params in view collection:", params)
     uc_id = params['uc_id']
     uc = model.UserCollection.query.get(uc_id)
     traits = json.loads(uc.members)
@@ -139,6 +141,7 @@ def view_collection():
     print("in view_collection traits are:", traits)
 
     trait_obs = []
+    json_version = []
 
     for atrait in traits:
         name, dataset_name = atrait.split(':')
@@ -146,8 +149,23 @@ def view_collection():
         trait_ob = trait.GeneralTrait(name=name, dataset_name=dataset_name)
         trait_ob.get_info()
         trait_obs.append(trait_ob)
-
-    return render_template("collections/view.html",
-                           trait_obs=trait_obs,
-                           uc = uc,
+        
+        json_version.append(trait_ob.jsonable())
+        #json_version.append(dict(name=trait_ob.name,
+        #                         description=trait_ob.description_display,
+        #                         location=trait_ob.location_repr,
+        #                         mean=trait_ob.mean,
+        #                         lrs_score=trait_ob.LRS_score_repr,
+        #                         lrs_location=trait_ob.LRS_location_repr))
+        #                         dis=trait_ob.description))
+        #json_version.append(trait_ob.__dict__th)
+
+    collection_info = dict(trait_obs=trait_obs,
+                           uc =     uc)
+    if "json" in params:
+        print("json_version:", json_version)
+        return json.dumps(json_version)
+    else:
+        return render_template("collections/view.html",
+                           **collection_info
                            )
diff --git a/wqflask/wqflask/interval_mapping/__init__.py b/wqflask/wqflask/interval_mapping/__init__.py
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/wqflask/wqflask/interval_mapping/__init__.py
diff --git a/wqflask/wqflask/interval_mapping/interval_mapping.py b/wqflask/wqflask/interval_mapping/interval_mapping.py
index aca99cbe..f0985cc2 100755
--- a/wqflask/wqflask/interval_mapping/interval_mapping.py
+++ b/wqflask/wqflask/interval_mapping/interval_mapping.py
@@ -51,85 +51,169 @@ class IntervalMapping(object):
             self.samples.append(str(sample))
             self.vals.append(value)
  
+        print("start_vars:", start_vars)
+ 
         self.set_options(start_vars)
  
-        self.gen_qtl_results(tempdata)
+        if self.method == "qtl_reaper":
+            self.gen_reaper_results(tempdata)
+        else:
+            self.gen_pylmm_results(tempdata)
+        #self.gen_qtl_results(tempdata)
 
         #Get chromosome lengths for drawing the interval map plot
         chromosome_mb_lengths = {}
         for key in self.species.chromosomes.chromosomes.keys():
             chromosome_mb_lengths[key] = self.species.chromosomes.chromosomes[key].mb_length
         
+        #print("self.qtl_results:", self.qtl_results)
+        
         self.js_data = dict(
-            lrs_lod = self.lrs_lod,
             chromosomes = chromosome_mb_lengths,
             qtl_results = self.qtl_results,
+            #lrs_lod = self.lrs_lod,
         )
 
     def set_options(self, start_vars):
         """Sets various options (physical/genetic mapping, # permutations, which chromosome"""
         
-        self.plot_scale = start_vars['scale']
+        #self.plot_scale = start_vars['scale']
         #if self.plotScale == 'physic' and not fd.genotype.Mbmap:
         #    self.plotScale = 'morgan'
-        self.num_permutations = start_vars['num_permutations']
-        self.do_bootstrap = start_vars['do_bootstrap']
-        self.control_locus = start_vars['control_locus']
-        self.selected_chr = start_vars['selected_chr']
-        self.weighted_regression = start_vars['weighted']
-        self.lrs_lod = start_vars['lrs_lod']
+        self.method = start_vars['mapping_method']
+        self.num_permutations = int(start_vars['num_permutations'])
+        #self.do_bootstrap = start_vars['do_bootstrap']
+        self.selected_chr = start_vars['chromosome']
+        if 'control_locus' in start_vars:
+            self.control_locus = start_vars['control_locus']
+        else:
+            self.control_locus = None
+        #self.weighted_regression = start_vars['weighted']
+        #self.lrs_lod = start_vars['lrs_lod']
 
 
     def gen_qtl_results(self, tempdata):
         """Generates qtl results for plotting interval map"""
 
         self.dataset.group.get_markers()
-        self.dataset.read_genotype_file()
+        genotype = self.dataset.group.read_genotype_file()
+
+        samples, values, variances = self.this_trait.export_informative()
+
+        trimmed_samples = []
+        trimmed_values = []
+        for i in range(0, len(samples)):
+            if samples[i] in self.dataset.group.samplelist:
+                trimmed_samples.append(samples[i])
+                trimmed_values.append(values[i])
+
+        #if self.weighted_regression:
+        #    self.lrs_array = self.genotype.permutation(strains = trimmed_samples,
+        #                                                         trait = trimmed_values, 
+        #                                                         variance = _vars,
+        #                                                         nperm=self.num_permutations)
+        #else:
+        self.lrs_array = genotype.permutation(strains = trimmed_samples,
+                                                   trait = trimmed_values, 
+                                                   nperm= self.num_permutations)
+        self.suggestive = self.lrs_array[int(self.num_permutations*0.37-1)]
+        self.significant = self.lrs_array[int(self.num_permutations*0.95-1)]
+
+        print("samples:", trimmed_samples)
 
-        samples, values, variances = self.trait.export_informative()
         if self.control_locus:
-            if self.weighted_regression:
-                self.qtl_results = self.dataset.genotype.regression(strains = samples,
-                                                              trait = values,
-                                                              variance = variances,
-                                                              control = self.control_locus)
-            else:
-                self.qtl_results = self.dataset.genotype.regression(strains = samples,
-                                                              trait = values,
-                                                              control = self.control_locus)
+            #if self.weighted_regression:
+            #    self.qtl_results = self.dataset.genotype.regression(strains = samples,
+            #                                                  trait = values,
+            #                                                  variance = variances,
+            #                                                  control = self.control_locus)
+            #else:
+            reaper_results = genotype.regression(strains = trimmed_samples,
+                                                          trait = trimmed_values,
+                                                          control = self.control_locus)
         else:
-            if self.weighted_regression:
-                self.qtl_results = self.dataset.genotype.regression(strains = samples,
-                                                              trait = values,
-                                                              variance = variances)
-            else:
-                self.qtl_results = self.dataset.genotype.regression(strains = samples,
-                                                              trait = values)
+            #if self.weighted_regression:
+            #    self.qtl_results = self.dataset.genotype.regression(strains = samples,
+            #                                                  trait = values,
+            #                                                  variance = variances)
+            #else:
+            print("strains:", trimmed_samples)
+            print("trait:", trimmed_values)
+            reaper_results = genotype.regression(strains = trimmed_samples,
+                                                          trait = trimmed_values)
 
+        #Need to convert the QTL objects that qtl reaper returns into a json serializable dictionary
+        self.qtl_results = []
+        for qtl in reaper_results:
+            reaper_locus = qtl.locus
+            locus = {"name":reaper_locus.name, "chr":reaper_locus.chr, "cM":reaper_locus.cM, "Mb":reaper_locus.Mb}
+            qtl = {"lrs": qtl.lrs, "locus": locus, "additive": qtl.additive}
+            self.qtl_results.append(qtl)
 
-        #pheno_vector = np.array([val == "x" and np.nan or float(val) for val in self.vals])
 
-        #if self.dataset.group.species == "human":
-        #    p_values, t_stats = self.gen_human_results(pheno_vector, tempdata)
-        #else:
-        genotype_data = [marker['genotypes'] for marker in self.dataset.group.markers.markers]
-        
-        no_val_samples = self.identify_empty_samples()
-        trimmed_genotype_data = self.trim_genotypes(genotype_data, no_val_samples)
-        
-        genotype_matrix = np.array(trimmed_genotype_data).T
-        
-        #t_stats, p_values = lmm.run(
-        #    pheno_vector,
-        #    genotype_matrix,
-        #    restricted_max_likelihood=True,
-        #    refit=False,
-        #    temp_data=tempdata
-        #)
-        
-        #self.dataset.group.markers.add_pvalues(p_values)
+    def gen_reaper_results(self, tempdata):
+        genotype = self.dataset.group.read_genotype_file()
+
+        samples, values, variances = self.this_trait.export_informative()
+
+        trimmed_samples = []
+        trimmed_values = []
+        for i in range(0, len(samples)):
+            if samples[i] in self.dataset.group.samplelist:
+                trimmed_samples.append(samples[i])
+                trimmed_values.append(values[i])
+                
+        self.lrs_array = genotype.permutation(strains = trimmed_samples,
+                                                   trait = trimmed_values, 
+                                                   nperm= self.num_permutations)
+        self.suggestive = self.lrs_array[int(self.num_permutations*0.37-1)]
+        self.significant = self.lrs_array[int(self.num_permutations*0.95-1)]
+
+        print("samples:", trimmed_samples)
+
+        if self.control_locus:
+            reaper_results = genotype.regression(strains = trimmed_samples,
+                                                          trait = trimmed_values,
+                                                          control = self.control_locus)
+        else:
+            reaper_results = genotype.regression(strains = trimmed_samples,
+                                                          trait = trimmed_values)
+
+        #Need to convert the QTL objects that qtl reaper returns into a json serializable dictionary
+        self.qtl_results = []
+        for qtl in reaper_results:
+            reaper_locus = qtl.locus
+            locus = {"name":reaper_locus.name, "chr":reaper_locus.chr, "cM":reaper_locus.cM, "Mb":reaper_locus.Mb}
+            qtl = {"lrs_value": qtl.lrs, "chr":reaper_locus.chr, "Mb":reaper_locus.Mb,
+                   "cM":reaper_locus.cM, "name":reaper_locus.name, "additive":qtl.additive}
+            self.qtl_results.append(qtl)
+            
+    def gen_pylmm_results(self, tempdata):
+        print("USING PYLMM")
+        self.dataset.group.get_markers()
         
-        #self.qtl_results = self.dataset.group.markers.markers
+        pheno_vector = np.array([val == "x" and np.nan or float(val) for val in self.vals])
+        if self.dataset.group.species == "human":
+            p_values, t_stats = self.gen_human_results(pheno_vector, tempdata)
+        else:
+            genotype_data = [marker['genotypes'] for marker in self.dataset.group.markers.markers]
+
+            no_val_samples = self.identify_empty_samples()
+            trimmed_genotype_data = self.trim_genotypes(genotype_data, no_val_samples)
+            
+            genotype_matrix = np.array(trimmed_genotype_data).T
+            
+            t_stats, p_values = lmm.run(
+                pheno_vector,
+                genotype_matrix,
+                restricted_max_likelihood=True,
+                refit=False,
+                temp_data=tempdata
+            )
+            
+            print("p_values:", p_values)
+            self.dataset.group.markers.add_pvalues(p_values)
+            self.qtl_results = self.dataset.group.markers.markers
 
     def gen_qtl_results_2(self, tempdata):
         """Generates qtl results for plotting interval map"""
diff --git a/wqflask/wqflask/marker_regression/marker_regression.py b/wqflask/wqflask/marker_regression/marker_regression.py
index 334ce631..006c586b 100755
--- a/wqflask/wqflask/marker_regression/marker_regression.py
+++ b/wqflask/wqflask/marker_regression/marker_regression.py
@@ -91,7 +91,6 @@ class MarkerRegression(object):
             )
         
         self.dataset.group.markers.add_pvalues(p_values)
-
         self.qtl_results = self.dataset.group.markers.markers
 
 
diff --git a/wqflask/wqflask/my_pylmm/pyLMM/lmm.py b/wqflask/wqflask/my_pylmm/pyLMM/lmm.py
index 6ef1669b..60d36b8d 100644
--- a/wqflask/wqflask/my_pylmm/pyLMM/lmm.py
+++ b/wqflask/wqflask/my_pylmm/pyLMM/lmm.py
@@ -107,8 +107,6 @@ def run_human(pheno_vector,
 
         with Bench("Create list of inputs"):
             inputs = list(plink_input)
-            
-        print("len(genotypes): ", len(inputs))
 
         with Bench("Divide into chunks"):
             results = chunks.divide_into_chunks(inputs, 64)
diff --git a/wqflask/wqflask/static/new/css/interval_mapping.css b/wqflask/wqflask/static/new/css/interval_mapping.css
new file mode 100644
index 00000000..5ebf7742
--- /dev/null
+++ b/wqflask/wqflask/static/new/css/interval_mapping.css
@@ -0,0 +1,32 @@
+.interval_map .y_axis path,

+.interval_map .y_axis line {

+    fill: none;

+    stroke: black;

+    shape-rendering: crispEdges;

+}

+.interval_map .y_axis text {

+    font-family: sans-serif;

+    font-size: 14px;

+}

+

+.interval_map .x_axis path,

+.interval_map .x_axis line {

+    fill: none;

+    stroke: black;

+    shape-rendering: crispEdges;

+}

+.interval_map .x_axis text {

+    text-anchor: end;

+    font-family: sans-serif;

+    font-size: 8px;

+}

+

+interval_map rect {

+    stroke: WhiteSmoke;

+    fill: white;

+}

+

+interval_map path {

+    stroke: steelblue;

+    stroke-width: 1;

+}
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/css/marker_regression.css b/wqflask/wqflask/static/new/css/marker_regression.css
index 054ef93e..a737c97e 100644
--- a/wqflask/wqflask/static/new/css/marker_regression.css
+++ b/wqflask/wqflask/static/new/css/marker_regression.css
@@ -21,10 +21,10 @@
     font-size: 8px;
 }
 
-rect {
+/*rect {
     stroke: WhiteSmoke;
     fill: lightgrey;
-}
+}*/
 /*rect {
     stroke: WhiteSmoke;
     fill: Azure;
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
index 749a7dc0..e1bb36e1 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
@@ -2,11 +2,12 @@ root = exports ? this
 
 class Bar_Chart
     constructor: (@sample_list, @sample_group) ->
+        @sort_by = "name"
         @get_samples()
         console.log("sample names:", @sample_names)
         if @sample_attr_vals.length > 0
             @get_distinct_attr_vals()
-            @get_attr_color_dict()
+            @get_attr_color_dict(@distinct_attr_vals)
         
         #Used to calculate the bottom margin so sample names aren't cut off
         longest_sample_name = d3.max(sample.length for sample in @sample_names)
@@ -28,17 +29,19 @@ class Bar_Chart
         @create_graph()
         
         d3.select("#color_attribute").on("change", =>
-            attribute = $("#color_attribute").val()
-            if $("#update_bar_chart").html() == 'Sort By Name' 
+            @attribute = $("#color_attribute").val()
+            console.log("attr_color_dict:", @attr_color_dict)
+            #if $("#update_bar_chart").html() == 'Sort By Name'
+            if @sort_by = "name" 
                 @svg.selectAll(".bar")
                     .data(@sorted_samples())
                     .transition()
                     .duration(1000)
                     .style("fill", (d) =>
-                        if attribute == "None"
+                        if @attribute == "None"
                             return "steelblue"
                         else
-                            return @attr_color_dict[attribute][d[2][attribute]]
+                            return @attr_color_dict[@attribute][d[2][@attribute]]
                     )
                     .select("title")
                     .text((d) =>
@@ -50,82 +53,196 @@ class Bar_Chart
                     .transition()
                     .duration(1000)
                     .style("fill", (d) =>
-                        if attribute == "None"
+                        if @attribute == "None"
                             return "steelblue"
                         else
-                            return @attr_color_dict[attribute][d[2][attribute]]
+                            return @attr_color_dict[@attribute][d[2][@attribute]]
                     )
-            @add_legend(attribute, @distinct_attr_vals[attribute])
+            @add_legend(@attribute, @distinct_attr_vals[@attribute])
         )
-    
-    
-        d3.select("#update_bar_chart").on("click", =>
-            if @attributes.length > 0
-                attribute = $("#color_attribute").val()
-            if $("#update_bar_chart").html() == 'Sort By Value' 
-                $("#update_bar_chart").html('Sort By Name')
-                sortItems = (a, b) ->
-                    return a[1] - b[1]
 
-                @svg.selectAll(".bar")
-                    .data(@sorted_samples())
-                    .transition()
-                    .duration(1000)
-                    .attr("y", (d) =>
-                        return @y_scale(d[1])
-                    )
-                    .attr("height", (d) =>
-                        return @plot_height - @y_scale(d[1])
-                    )
-                    .style("fill", (d) =>
-                        if @attributes.length > 0
-                            return @attr_color_dict[attribute][d[2][attribute]]
-                        else
-                            return "steelblue"
-                    )
-                    .select("title")
-                    .text((d) =>
-                        return d[1]
-                    )
-                sorted_sample_names = (sample[0] for sample in @sorted_samples())
-                x_scale = d3.scale.ordinal()
-                    .domain(sorted_sample_names)
-                    .rangeBands([0, @plot_width], .1)
-                $('.x.axis').remove()
-                @add_x_axis(x_scale)
-            else
-                $("#update_bar_chart").html('Sort By Value')
-                @svg.selectAll(".bar")
-                    .data(@samples)
-                    .transition()
-                    .duration(1000)
-                    .attr("y", (d) =>
-                        return @y_scale(d[1])
-                    )
-                    .attr("height", (d) =>
-                        return @plot_height - @y_scale(d[1])
-                    )
-                    .style("fill", (d) =>
-                        if @attributes.length > 0
-                            return @attr_color_dict[attribute][d[2][attribute]]
-                        else
-                            return "steelblue"
-                    )
-                    .select("title")
-                    .text((d) =>
-                        return d[1]
-                    )
-                x_scale = d3.scale.ordinal()
-                    .domain(@sample_names)
-                    .rangeBands([0, @plot_width], .1)
-                $('.x.axis').remove()
-                @add_x_axis(x_scale)
+        $(".sort_by_value").on("click", =>
+            console.log("sorting by value")
+            @sort_by = "value"
+            if @attributes.length > 0
+                @attribute = $("#color_attribute").val()
+            #sortItems = (a, b) ->
+            #    return a[1] - b[1]
+            @rebuild_bar_graph(@sorted_samples())
+            #@svg.selectAll(".bar")
+            #    .data(@sorted_samples())
+            #    .transition()
+            #    .duration(1000)
+            #    .attr("y", (d) =>
+            #        return @y_scale(d[1])
+            #    )
+            #    .attr("height", (d) =>
+            #        return @plot_height - @y_scale(d[1])
+            #    )
+            #    .select("title")
+            #    .text((d) =>
+            #        return d[1]
+            #    )
+            #    #.style("fill", (d) =>
+            #    #    if @attributes.length > 0
+            #    #        return @attr_color_dict[attribute][d[2][attribute]]
+            #    #    else
+            #    #        return "steelblue"
+            #    #)
+            #sorted_sample_names = (sample[0] for sample in @sorted_samples())
+            #x_scale = d3.scale.ordinal()
+            #    .domain(sorted_sample_names)
+            #    .rangeBands([0, @plot_width], .1)
+            #$('.x.axis').remove()
+            #@add_x_axis(x_scale)
+        )
+        
+        $(".sort_by_name").on("click", =>
+            console.log("sorting by name")
+            @sort_by = "name"
+            if @attributes.length > 0
+                @attribute = $("#color_attribute").val()
+            @rebuild_bar_graph(@samples)
+            #@svg.selectAll(".bar")
+            #    .data(@samples)
+            #    .transition()
+            #    .duration(1000)
+            #    .attr("y", (d) =>
+            #        return @y_scale(d[1])
+            #    )
+            #    .attr("height", (d) =>
+            #        return @plot_height - @y_scale(d[1])
+            #    )
+            #    .select("title")
+            #    .text((d) =>
+            #        return d[1]
+            #    )
+            #    .style("fill", (d) =>
+            #        if @attributes.length > 0
+            #            return @attr_color_dict[attribute][d[2][attribute]]
+            #        else
+            #            return "steelblue"
+            #    )
+            #x_scale = d3.scale.ordinal()
+            #    .domain(@sample_names)
+            #    .rangeBands([0, @plot_width], .1)
+            #$('.x.axis').remove()
+            #@add_x_axis(x_scale)
         )
+        
+        
+        
+        #d3.select(".update_bar_chart").on("click", =>
+        #    console.log("THIS IS:", $(this))
+        #    sort_by = $(this).val()
+        #    console.log("sort_by: ", sort_by)
+        #    if @attributes.length > 0
+        #        attribute = $("#color_attribute").val()
+        #    if sort_by = "value"
+        #        console.log("sorting by value")
+        #        sortItems = (a, b) ->
+        #            return a[1] - b[1]
+        #
+        #        @svg.selectAll(".bar")
+        #            .data(@sorted_samples())
+        #            .transition()
+        #            .duration(1000)
+        #            .attr("y", (d) =>
+        #
+        #                return @y_scale(d[1])
+        #            )
+        #            .attr("height", (d) =>
+        #                return @plot_height - @y_scale(d[1])
+        #            )
+        #            .style("fill", (d) =>
+        #                if @attributes.length > 0
+        #                    return @attr_color_dict[attribute][d[2][attribute]]
+        #                else
+        #                    return "steelblue"
+        #            )
+        #            .select("title")
+        #            .text((d) =>
+        #                return d[1]
+        #            )
+        #        sorted_sample_names = (sample[0] for sample in @sorted_samples())
+        #        x_scale = d3.scale.ordinal()
+        #            .domain(sorted_sample_names)
+        #            .rangeBands([0, @plot_width], .1)
+        #        $('.x.axis').remove()
+        #        @add_x_axis(x_scale)
+        #    else
+        #        console.log("sorting by name")
+        #        #$("#update_bar_chart").html('Sort By Value')
+        #        @svg.selectAll(".bar")
+        #            .data(@samples)
+        #            .transition()
+        #            .duration(1000)
+        #            .attr("y", (d) =>
+        #                return @y_scale(d[1])
+        #            )
+        #            .attr("height", (d) =>
+        #                return @plot_height - @y_scale(d[1])
+        #            )
+        #            .style("fill", (d) =>
+        #                if @attributes.length > 0
+        #                    return @attr_color_dict[attribute][d[2][attribute]]
+        #                else
+        #                    return "steelblue"
+        #            )
+        #            .select("title")
+        #            .text((d) =>
+        #                return d[1]
+        #            )
+        #        x_scale = d3.scale.ordinal()
+        #            .domain(@sample_names)
+        #            .rangeBands([0, @plot_width], .1)
+        #        $('.x.axis').remove()
+        #        @add_x_axis(x_scale)
+        #)
+        
+        d3.select("#color_by_trait").on("click", =>
+            @open_trait_selection()
+            
+        )
+
+
+    rebuild_bar_graph: (samples) ->
+        console.log("samples:", samples)
+        @svg.selectAll(".bar")
+            .data(samples)
+            .transition()
+            .duration(1000)
+            .attr("y", (d) =>
+                return @y_scale(d[1])
+            )
+            .attr("height", (d) =>
+                return @plot_height - @y_scale(d[1])
+            )
+            .select("title")
+            .text((d) =>
+                return d[1]
+            )
+            .style("fill", (d) =>
+                if @attributes.length > 0 and @attribute != "None"
+                    console.log("@attribute:", @attribute)
+                    console.log("d[2]", d[2])
+                    console.log("the_color:", @attr_color_dict[@attribute][d[2][@attribute]])
+                    return @attr_color_dict[@attribute][d[2][@attribute]]
+                else
+                    return "steelblue"
+            )
+        sample_names = (sample[0] for sample in samples)
+        console.log("sample_names2:", sample_names)
+        x_scale = d3.scale.ordinal()
+            .domain(sample_names)
+            .rangeBands([0, @plot_width], .1)
+        $('.x.axis').remove()
+        @add_x_axis(x_scale)
 
-    get_attr_color_dict: () ->
+    get_attr_color_dict: (vals) ->
         @attr_color_dict = {}
-        console.log("distinct_attr_vals:", @distinct_attr_vals)
-        for own key, distinct_vals of @distinct_attr_vals
+        console.log("vals:", vals)
+        for own key, distinct_vals of vals
             this_color_dict = {}
             if distinct_vals.length < 10
                 color = d3.scale.category10()
@@ -133,6 +250,8 @@ class Bar_Chart
                     this_color_dict[value] = color(i)
             else
                 console.log("distinct_values:", distinct_vals)
+                #Check whether all values are numbers, and if they are get a corresponding
+                #color gradient
                 if _.every(distinct_vals, (d) =>
                     if isNaN(d)
                         return false
@@ -142,13 +261,24 @@ class Bar_Chart
                     color_range = d3.scale.linear()
                                     .domain([d3.min(distinct_vals),
                                             d3.max(distinct_vals)])
-                                    .range([0,4])
+                                    .range([0,255])
                     for value, i in distinct_vals
-                        console.log("color_range(value):", color_range(parseInt(value)))
-                        this_color_dict[value] = d3.rgb("lightblue").darker(color_range(parseInt(value)))
+                        console.log("color_range(value):", parseInt(color_range(value)))
+                        this_color_dict[value] = d3.rgb(parseInt(color_range(value)),0, 0)
+                        #this_color_dict[value] = d3.rgb("lightblue").darker(color_range(parseInt(value)))
                         #this_color_dict[value] = "rgb(0, 0, " + color_range(parseInt(value)) + ")"
             @attr_color_dict[key] = this_color_dict
 
+    convert_into_colors: (values) ->
+        color_range = d3.scale.linear()
+                        .domain([d3.min(values),
+                                d3.max(values)])
+                        .range([0,255])
+        for value, i in values
+            console.log("color_range(value):", color_range(parseInt(value)))
+            this_color_dict[value] = d3.rgb(color_range(parseInt(value)),0, 0)
+            #this_color_dict[value] = d3.rgb("lightblue").darker(color_range(parseInt(value)))
+
     get_samples: () ->
         @sample_names = (sample.name for sample in @sample_list when sample.value != null)
         @sample_vals = (sample.value for sample in @sample_list when sample.value != null)
@@ -272,7 +402,7 @@ class Bar_Chart
             .attr("height", 100)
             .attr("width", 100)
             .attr('transform', 'translate(-20,50)')
-            
+
         legend_rect = legend.selectAll('rect')
                         .data(distinct_vals)
                         .enter()
@@ -287,7 +417,7 @@ class Bar_Chart
                             console.log("TEST:", @attr_color_dict[attribute][d])
                             return @attr_color_dict[attribute][d]
                         )
-        
+
         legend_text = legend.selectAll('text')
                         .data(distinct_vals)
                         .enter()
@@ -300,19 +430,63 @@ class Bar_Chart
                             return d
                         )
 
-    
-    color_by_trait: () ->
-        console.log("Before load")
-        $('#collections_holder').load('/collections/list #collections_list')
-        $.colorbox(
-            inline: true
-            href: "#collections_holder"
+    open_trait_selection: () ->
+        $('#collections_holder').load('/collections/list?color_by_trait #collections_list', =>
+            $.colorbox(
+                inline: true
+                href: "#collections_holder"
+            )
+            #Removes the links from the collection names, because clicking them would leave the page
+            #instead of loading the list of traits in the colorbox
+            $('a.collection_name').attr( 'onClick', 'return false' )
+            #$('.collection_name').each (index, element) =>
+            #    console.log("contents:", $(element).contents())
+            #    $(element).contents().unwrap()
         )
-        console.log("After load")
-        #$.colorbox({href:"/collections/list"})
-        #$.get(
-        #    url: /collections/list
-        #    
-        #)
     
+    color_by_trait: (trait_sample_data) ->
+        console.log("BXD1:", trait_sample_data["BXD1"])
+        console.log("trait_sample_data:", trait_sample_data)
+        trimmed_samples = @trim_values(trait_sample_data)
+        distinct_values = {}
+        distinct_values["collection_trait"] = @get_distinct_values(trimmed_samples)
+        @get_attr_color_dict(distinct_values)
+        if $("#update_bar_chart").html() == 'Sort By Name' 
+            @svg.selectAll(".bar")
+                .data(@sorted_samples())
+                .transition()
+                .duration(1000)
+                .style("fill", (d) =>
+                    return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]]
+                )
+                .select("title")
+                .text((d) =>
+                    return d[1]
+                )
+        else
+            @svg.selectAll(".bar")
+                .data(@samples)
+                .transition()
+                .duration(1000)
+                .style("fill", (d) =>
+                    return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]]
+                )
+        
+    
+    trim_values: (trait_sample_data) ->
+        trimmed_samples = {}
+        for sample in @sample_names
+            if sample of trait_sample_data
+                trimmed_samples[sample] = trait_sample_data[sample]
+        console.log("trimmed_samples:", trimmed_samples)
+        return trimmed_samples
+
+    get_distinct_values: (samples) ->
+        distinct_values = _.uniq(_.values(samples))
+        console.log("distinct_values:", distinct_values)
+        return distinct_values
+        #distinct_values = []
+        #for sample in samples
+        #    if samples[sample] in distinct_values
+
 root.Bar_Chart = Bar_Chart
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js
index 20fab15c..b02ee1da 100644
--- a/wqflask/wqflask/static/new/javascript/bar_chart.js
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -13,11 +13,12 @@
         _this = this;
       this.sample_list = sample_list;
       this.sample_group = sample_group;
+      this.sort_by = "name";
       this.get_samples();
       console.log("sample names:", this.sample_names);
       if (this.sample_attr_vals.length > 0) {
         this.get_distinct_attr_vals();
-        this.get_attr_color_dict();
+        this.get_attr_color_dict(this.distinct_attr_vals);
       }
       longest_sample_name = d3.max((function() {
         var _i, _len, _ref, _results;
@@ -46,97 +47,94 @@
       this.create_scales();
       this.create_graph();
       d3.select("#color_attribute").on("change", function() {
-        var attribute;
-        attribute = $("#color_attribute").val();
-        if ($("#update_bar_chart").html() === 'Sort By Name') {
+        _this.attribute = $("#color_attribute").val();
+        console.log("attr_color_dict:", _this.attr_color_dict);
+        if (_this.sort_by = "name") {
           _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
-            if (attribute === "None") {
+            if (_this.attribute === "None") {
               return "steelblue";
             } else {
-              return _this.attr_color_dict[attribute][d[2][attribute]];
+              return _this.attr_color_dict[_this.attribute][d[2][_this.attribute]];
             }
           }).select("title").text(function(d) {
             return d[1];
           });
         } else {
           _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).style("fill", function(d) {
-            if (attribute === "None") {
+            if (_this.attribute === "None") {
               return "steelblue";
             } else {
-              return _this.attr_color_dict[attribute][d[2][attribute]];
+              return _this.attr_color_dict[_this.attribute][d[2][_this.attribute]];
             }
           });
         }
-        return _this.add_legend(attribute, _this.distinct_attr_vals[attribute]);
+        return _this.add_legend(_this.attribute, _this.distinct_attr_vals[_this.attribute]);
       });
-      d3.select("#update_bar_chart").on("click", function() {
-        var attribute, sortItems, sorted_sample_names, x_scale;
+      $(".sort_by_value").on("click", function() {
+        console.log("sorting by value");
+        _this.sort_by = "value";
         if (_this.attributes.length > 0) {
-          attribute = $("#color_attribute").val();
+          _this.attribute = $("#color_attribute").val();
         }
-        if ($("#update_bar_chart").html() === 'Sort By Value') {
-          $("#update_bar_chart").html('Sort By Name');
-          sortItems = function(a, b) {
-            return a[1] - b[1];
-          };
-          _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).attr("y", function(d) {
-            return _this.y_scale(d[1]);
-          }).attr("height", function(d) {
-            return _this.plot_height - _this.y_scale(d[1]);
-          }).style("fill", function(d) {
-            if (_this.attributes.length > 0) {
-              return _this.attr_color_dict[attribute][d[2][attribute]];
-            } else {
-              return "steelblue";
-            }
-          }).select("title").text(function(d) {
-            return d[1];
-          });
-          sorted_sample_names = (function() {
-            var _i, _len, _ref, _results;
-            _ref = this.sorted_samples();
-            _results = [];
-            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-              sample = _ref[_i];
-              _results.push(sample[0]);
-            }
-            return _results;
-          }).call(_this);
-          x_scale = d3.scale.ordinal().domain(sorted_sample_names).rangeBands([0, _this.plot_width], .1);
-          $('.x.axis').remove();
-          return _this.add_x_axis(x_scale);
-        } else {
-          $("#update_bar_chart").html('Sort By Value');
-          _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).attr("y", function(d) {
-            return _this.y_scale(d[1]);
-          }).attr("height", function(d) {
-            return _this.plot_height - _this.y_scale(d[1]);
-          }).style("fill", function(d) {
-            if (_this.attributes.length > 0) {
-              return _this.attr_color_dict[attribute][d[2][attribute]];
-            } else {
-              return "steelblue";
-            }
-          }).select("title").text(function(d) {
-            return d[1];
-          });
-          x_scale = d3.scale.ordinal().domain(_this.sample_names).rangeBands([0, _this.plot_width], .1);
-          $('.x.axis').remove();
-          return _this.add_x_axis(x_scale);
+        return _this.rebuild_bar_graph(_this.sorted_samples());
+      });
+      $(".sort_by_name").on("click", function() {
+        console.log("sorting by name");
+        _this.sort_by = "name";
+        if (_this.attributes.length > 0) {
+          _this.attribute = $("#color_attribute").val();
         }
+        return _this.rebuild_bar_graph(_this.samples);
+      });
+      d3.select("#color_by_trait").on("click", function() {
+        return _this.open_trait_selection();
       });
     }
 
-    Bar_Chart.prototype.get_attr_color_dict = function() {
-      var color, color_range, distinct_vals, i, key, this_color_dict, value, _i, _j, _len, _len1, _ref, _results,
+    Bar_Chart.prototype.rebuild_bar_graph = function(samples) {
+      var sample, sample_names, x_scale,
+        _this = this;
+      console.log("samples:", samples);
+      this.svg.selectAll(".bar").data(samples).transition().duration(1000).attr("y", function(d) {
+        return _this.y_scale(d[1]);
+      }).attr("height", function(d) {
+        return _this.plot_height - _this.y_scale(d[1]);
+      }).select("title").text(function(d) {
+        return d[1];
+      }).style("fill", function(d) {
+        if (_this.attributes.length > 0 && _this.attribute !== "None") {
+          console.log("@attribute:", _this.attribute);
+          console.log("d[2]", d[2]);
+          console.log("the_color:", _this.attr_color_dict[_this.attribute][d[2][_this.attribute]]);
+          return _this.attr_color_dict[_this.attribute][d[2][_this.attribute]];
+        } else {
+          return "steelblue";
+        }
+      });
+      sample_names = (function() {
+        var _i, _len, _results;
+        _results = [];
+        for (_i = 0, _len = samples.length; _i < _len; _i++) {
+          sample = samples[_i];
+          _results.push(sample[0]);
+        }
+        return _results;
+      })();
+      console.log("sample_names2:", sample_names);
+      x_scale = d3.scale.ordinal().domain(sample_names).rangeBands([0, this.plot_width], .1);
+      $('.x.axis').remove();
+      return this.add_x_axis(x_scale);
+    };
+
+    Bar_Chart.prototype.get_attr_color_dict = function(vals) {
+      var color, color_range, distinct_vals, i, key, this_color_dict, value, _i, _j, _len, _len1, _results,
         _this = this;
       this.attr_color_dict = {};
-      console.log("distinct_attr_vals:", this.distinct_attr_vals);
-      _ref = this.distinct_attr_vals;
+      console.log("vals:", vals);
       _results = [];
-      for (key in _ref) {
-        if (!__hasProp.call(_ref, key)) continue;
-        distinct_vals = _ref[key];
+      for (key in vals) {
+        if (!__hasProp.call(vals, key)) continue;
+        distinct_vals = vals[key];
         this_color_dict = {};
         if (distinct_vals.length < 10) {
           color = d3.scale.category10();
@@ -153,11 +151,11 @@
               return true;
             }
           })) {
-            color_range = d3.scale.linear().domain([d3.min(distinct_vals), d3.max(distinct_vals)]).range([0, 4]);
+            color_range = d3.scale.linear().domain([d3.min(distinct_vals), d3.max(distinct_vals)]).range([0, 255]);
             for (i = _j = 0, _len1 = distinct_vals.length; _j < _len1; i = ++_j) {
               value = distinct_vals[i];
-              console.log("color_range(value):", color_range(parseInt(value)));
-              this_color_dict[value] = d3.rgb("lightblue").darker(color_range(parseInt(value)));
+              console.log("color_range(value):", parseInt(color_range(value)));
+              this_color_dict[value] = d3.rgb(parseInt(color_range(value)), 0, 0);
             }
           }
         }
@@ -166,6 +164,18 @@
       return _results;
     };
 
+    Bar_Chart.prototype.convert_into_colors = function(values) {
+      var color_range, i, value, _i, _len, _results;
+      color_range = d3.scale.linear().domain([d3.min(values), d3.max(values)]).range([0, 255]);
+      _results = [];
+      for (i = _i = 0, _len = values.length; _i < _len; i = ++_i) {
+        value = values[i];
+        console.log("color_range(value):", color_range(parseInt(value)));
+        _results.push(this_color_dict[value] = d3.rgb(color_range(parseInt(value)), 0, 0));
+      }
+      return _results;
+    };
+
     Bar_Chart.prototype.get_samples = function() {
       var attr_vals, attribute, key, sample, _i, _j, _len, _len1, _ref, _ref1;
       this.sample_names = (function() {
@@ -317,14 +327,58 @@
       });
     };
 
-    Bar_Chart.prototype.color_by_trait = function() {
-      console.log("Before load");
-      $('#collections_holder').load('/collections/list #collections_list');
-      $.colorbox({
-        inline: true,
-        href: "#collections_holder"
+    Bar_Chart.prototype.open_trait_selection = function() {
+      var _this = this;
+      return $('#collections_holder').load('/collections/list?color_by_trait #collections_list', function() {
+        $.colorbox({
+          inline: true,
+          href: "#collections_holder"
+        });
+        return $('a.collection_name').attr('onClick', 'return false');
       });
-      return console.log("After load");
+    };
+
+    Bar_Chart.prototype.color_by_trait = function(trait_sample_data) {
+      var distinct_values, trimmed_samples,
+        _this = this;
+      console.log("BXD1:", trait_sample_data["BXD1"]);
+      console.log("trait_sample_data:", trait_sample_data);
+      trimmed_samples = this.trim_values(trait_sample_data);
+      distinct_values = {};
+      distinct_values["collection_trait"] = this.get_distinct_values(trimmed_samples);
+      this.get_attr_color_dict(distinct_values);
+      if ($("#update_bar_chart").html() === 'Sort By Name') {
+        return this.svg.selectAll(".bar").data(this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
+          return _this.attr_color_dict["collection_trait"][trimmed_samples[d[0]]];
+        }).select("title").text(function(d) {
+          return d[1];
+        });
+      } else {
+        return this.svg.selectAll(".bar").data(this.samples).transition().duration(1000).style("fill", function(d) {
+          return _this.attr_color_dict["collection_trait"][trimmed_samples[d[0]]];
+        });
+      }
+    };
+
+    Bar_Chart.prototype.trim_values = function(trait_sample_data) {
+      var sample, trimmed_samples, _i, _len, _ref;
+      trimmed_samples = {};
+      _ref = this.sample_names;
+      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+        sample = _ref[_i];
+        if (sample in trait_sample_data) {
+          trimmed_samples[sample] = trait_sample_data[sample];
+        }
+      }
+      console.log("trimmed_samples:", trimmed_samples);
+      return trimmed_samples;
+    };
+
+    Bar_Chart.prototype.get_distinct_values = function(samples) {
+      var distinct_values;
+      distinct_values = _.uniq(_.values(samples));
+      console.log("distinct_values:", distinct_values);
+      return distinct_values;
     };
 
     return Bar_Chart;
diff --git a/wqflask/wqflask/static/new/javascript/box_plot.coffee b/wqflask/wqflask/static/new/javascript/box_plot.coffee
index 562bd1dc..e9035456 100644
--- a/wqflask/wqflask/static/new/javascript/box_plot.coffee
+++ b/wqflask/wqflask/static/new/javascript/box_plot.coffee
@@ -5,46 +5,53 @@ class Box_Plot
         @get_samples()

         

         @margin = {top: 10, right: 50, bottom: 20, left: 50}

-        @plot_width = 120 - @margin.left - @margin.right

+        @plot_width = 200 - @margin.left - @margin.right

         @plot_height = 500 - @margin.top - @margin.bottom

         

         @min = d3.min(@sample_vals)  

-        @max = d3.max(@sample_vals) * 1.1

+        @max = d3.max(@sample_vals)

         

         @svg = @create_svg()

-        

         @enter_data()

         

-

+        

     get_samples: () ->

-        @sample_names = (sample.name for sample in @sample_list when sample.value != null)

         @sample_vals = (sample.value for sample in @sample_list when sample.value != null)

-        @samples = _.zip(@sample_names, @sample_vals)

         

-    create_svg: () -> d3.chart.box()

-                        .whiskers(@inter_quartile_range(1.5))

-                        .width(@plot_width)

-                        .height(@plot_height)

-                        .domain([@min, @max])

-                        

+    create_svg: () ->

+        svg = d3.box()

+            .whiskers(@inter_quartile_range(1.5))

+            .width(@plot_width)

+            .height(@plot_height)

+            .domain([@min, @max])

+        return svg

+                    

     enter_data: () ->

         d3.select("#box_plot").selectAll("svg")

-            .data(@sample_vals)

+            .data([@sample_vals])

             .enter().append("svg:svg")

             .attr("class", "box")

             .attr("width", @plot_width)

             .attr("height", @plot_height)

+            .append("svg:g")

             .call(@svg)

                         

     inter_quartile_range: (k) ->

         return (d, i) =>

-            q1 = d.quartiles[0],

-            q3 = d.quartiles[2],

+            console.log("iqr d:", d)

+            q1 = d.quartiles[0]

+            q3 = d.quartiles[2]

             inter_quartile_range = (q3 - q1) * k

-            i = -1

+            console.log("iqr:", inter_quartile_range)

+            i = 0

             j = d.length

-            while (d[++i] < q1 - inter_quartile_range)

-            while (d[--j] > q3 + inter_quartile_range)

+            console.log("d[-1]:", d[1])

+            console.log("q1 - iqr:", q1 - inter_quartile_range)

+            i++ while (d[i] < q1 - inter_quartile_range)

+            j-- while (d[j] > q3 + inter_quartile_range)

+            #while (d[++i] < q1 - inter_quartile_range

+            #while d[--j] > q3 + inter_quartile_range

+            console.log("[i, j]", [i, j])

             return [i, j]

 

-   
\ No newline at end of file
+root.Box_Plot = Box_Plot
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/box_plot.js b/wqflask/wqflask/static/new/javascript/box_plot.js
new file mode 100644
index 00000000..2dd624e1
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/box_plot.js
@@ -0,0 +1,83 @@
+// Generated by CoffeeScript 1.6.1
+(function() {
+  var Box_Plot, root;
+
+  root = typeof exports !== "undefined" && exports !== null ? exports : this;
+
+  Box_Plot = (function() {
+
+    function Box_Plot(sample_list, sample_group) {
+      this.sample_list = sample_list;
+      this.sample_group = sample_group;
+      this.get_samples();
+      this.margin = {
+        top: 10,
+        right: 50,
+        bottom: 20,
+        left: 50
+      };
+      this.plot_width = 200 - this.margin.left - this.margin.right;
+      this.plot_height = 500 - this.margin.top - this.margin.bottom;
+      this.min = d3.min(this.sample_vals);
+      this.max = d3.max(this.sample_vals);
+      this.svg = this.create_svg();
+      this.enter_data();
+    }
+
+    Box_Plot.prototype.get_samples = function() {
+      var sample;
+      return this.sample_vals = (function() {
+        var _i, _len, _ref, _results;
+        _ref = this.sample_list;
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          sample = _ref[_i];
+          if (sample.value !== null) {
+            _results.push(sample.value);
+          }
+        }
+        return _results;
+      }).call(this);
+    };
+
+    Box_Plot.prototype.create_svg = function() {
+      var svg;
+      svg = d3.box().whiskers(this.inter_quartile_range(1.5)).width(this.plot_width).height(this.plot_height).domain([this.min, this.max]);
+      return svg;
+    };
+
+    Box_Plot.prototype.enter_data = function() {
+      return d3.select("#box_plot").selectAll("svg").data([this.sample_vals]).enter().append("svg:svg").attr("class", "box").attr("width", this.plot_width).attr("height", this.plot_height).append("svg:g").call(this.svg);
+    };
+
+    Box_Plot.prototype.inter_quartile_range = function(k) {
+      var _this = this;
+      return function(d, i) {
+        var inter_quartile_range, j, q1, q3;
+        console.log("iqr d:", d);
+        q1 = d.quartiles[0];
+        q3 = d.quartiles[2];
+        inter_quartile_range = (q3 - q1) * k;
+        console.log("iqr:", inter_quartile_range);
+        i = 0;
+        j = d.length;
+        console.log("d[-1]:", d[1]);
+        console.log("q1 - iqr:", q1 - inter_quartile_range);
+        while (d[i] < q1 - inter_quartile_range) {
+          i++;
+        }
+        while (d[j] > q3 + inter_quartile_range) {
+          j--;
+        }
+        console.log("[i, j]", [i, j]);
+        return [i, j];
+      };
+    };
+
+    return Box_Plot;
+
+  })();
+
+  root.Box_Plot = Box_Plot;
+
+}).call(this);
diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
new file mode 100644
index 00000000..db398809
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee
@@ -0,0 +1,73 @@
+root = exports ? this
+
+console.log("before get_traits_from_collection")
+
+# Going to be used to hold collection list
+# So we can repopulate it when the back button is clicked
+collection_list = null
+this_trait_data = null
+
+collection_click = () ->
+    console.log("Clicking on:", $(this))
+    this_collection_url = $(this).find('.collection_name').prop("href")
+    this_collection_url += "&json"
+    console.log("this_collection_url", this_collection_url)
+    collection_list = $("#collections_holder").html()
+    $.ajax(
+        dataType: "json",
+        url: this_collection_url,
+        success: process_traits
+      )
+
+trait_click = () ->
+    console.log("Clicking on:", $(this))
+    trait = $(this).find('.trait').text()
+    dataset = $(this).find('.dataset').text()
+    this_trait_url = "/trait/get_sample_data?trait="+trait+"&dataset="+dataset
+    console.log("this_trait_url", this_trait_url)
+    $.ajax(
+        dataType: "json",
+        url: this_trait_url,
+        success: color_by_trait
+      )
+    $.colorbox.close()
+
+color_by_trait =  (trait_sample_data, textStatus, jqXHR) ->
+    #trait_sample_data = trait_sample_data
+    #console.log('in color_by_trait:', trait_sample_data)
+    root.bar_chart.color_by_trait(trait_sample_data)
+
+process_traits = (trait_data, textStatus, jqXHR) ->
+    console.log('in process_traits with trait_data:', trait_data)
+    
+    the_html = "<button id='back_to_collections' class='btn btn-inverse btn-small'>"
+    the_html += "<i class='icon-white icon-arrow-left'></i> Back </button>"
+    
+    the_html += "<table class='table table-hover'>"
+    the_html += "<thead><tr><th>Record</th><th>Data Set</th><th>Description</th><th>Mean</th></tr></thead>"
+    the_html += "<tbody>"
+    for trait in trait_data
+        the_html += "<tr class='trait_line'><td class='trait'>#{ trait.name }</td>"
+        the_html += "<td class='dataset'>#{ trait.dataset }</td>"
+        the_html += "<td>#{ trait.description }</td>"
+        the_html += "<td>#{ trait.mean or '&nbsp;' }</td></tr>"
+    the_html += "</tbody>"
+    the_html += "</table>"
+
+    $("#collections_holder").html(the_html)
+    $('#collections_holder').colorbox.resize()
+
+back_to_collections = () ->
+    console.log("collection_list:", collection_list)
+    $("#collections_holder").html(collection_list)
+    
+    $(document).on("click", ".collection_line", collection_click)
+    $('#collections_holder').colorbox.resize()
+
+$ ->
+    console.log("inside get_traits_from_collection")
+    
+    $(document).on("click", ".collection_line", collection_click)
+    $(document).on("click", ".trait_line", trait_click)
+    $(document).on("click", "#back_to_collections", back_to_collections)
+    
diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
new file mode 100644
index 00000000..fac543f8
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js
@@ -0,0 +1,82 @@
+// Generated by CoffeeScript 1.6.1
+(function() {
+  var back_to_collections, collection_click, collection_list, color_by_trait, process_traits, root, this_trait_data, trait_click;
+
+  root = typeof exports !== "undefined" && exports !== null ? exports : this;
+
+  console.log("before get_traits_from_collection");
+
+  collection_list = null;
+
+  this_trait_data = null;
+
+  collection_click = function() {
+    var this_collection_url;
+    console.log("Clicking on:", $(this));
+    this_collection_url = $(this).find('.collection_name').prop("href");
+    this_collection_url += "&json";
+    console.log("this_collection_url", this_collection_url);
+    collection_list = $("#collections_holder").html();
+    return $.ajax({
+      dataType: "json",
+      url: this_collection_url,
+      success: process_traits
+    });
+  };
+
+  trait_click = function() {
+    var dataset, this_trait_url, trait;
+    console.log("Clicking on:", $(this));
+    trait = $(this).find('.trait').text();
+    dataset = $(this).find('.dataset').text();
+    this_trait_url = "/trait/get_sample_data?trait=" + trait + "&dataset=" + dataset;
+    console.log("this_trait_url", this_trait_url);
+    return $.ajax({
+      dataType: "json",
+      url: this_trait_url,
+      success: color_by_trait
+    });
+  };
+
+  $.colorbox.close();
+
+  color_by_trait = function(trait_sample_data, textStatus, jqXHR) {
+    return root.bar_chart.color_by_trait(trait_sample_data);
+  };
+
+  process_traits = function(trait_data, textStatus, jqXHR) {
+    var the_html, trait, _i, _len;
+    console.log('in process_traits with trait_data:', trait_data);
+    the_html = "<button id='back_to_collections' class='btn btn-inverse btn-small'>";
+    the_html += "<i class='icon-white icon-arrow-left'></i> Back </button>";
+    the_html += "<table class='table table-hover'>";
+    the_html += "<thead><tr><th>Record</th><th>Data Set</th><th>Description</th><th>Mean</th></tr></thead>";
+    the_html += "<tbody>";
+    for (_i = 0, _len = trait_data.length; _i < _len; _i++) {
+      trait = trait_data[_i];
+      the_html += "<tr class='trait_line'><td class='trait'>" + trait.name + "</td>";
+      the_html += "<td class='dataset'>" + trait.dataset + "</td>";
+      the_html += "<td>" + trait.description + "</td>";
+      the_html += "<td>" + (trait.mean || '&nbsp;') + "</td></tr>";
+    }
+    the_html += "</tbody>";
+    the_html += "</table>";
+    $("#collections_holder").html(the_html);
+    return $('#collections_holder').colorbox.resize();
+  };
+
+  back_to_collections = function() {
+    console.log("collection_list:", collection_list);
+    $("#collections_holder").html(collection_list);
+    $(document).on("click", ".collection_line", collection_click);
+    return $('#collections_holder').colorbox.resize();
+  };
+
+  $(function() {
+    console.log("inside get_traits_from_collection");
+    $(document).on("click", ".collection_line", collection_click);
+    $(document).on("click", ".trait_line", trait_click);
+    return $(document).on("click", "#back_to_collections", back_to_collections);
+  });
+
+}).call(this);
diff --git a/wqflask/wqflask/static/new/javascript/interval_mapping.coffee b/wqflask/wqflask/static/new/javascript/interval_mapping.coffee
new file mode 100644
index 00000000..81db186b
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/interval_mapping.coffee
@@ -0,0 +1,297 @@
+$ ->

+

+    class Interval_Map

+        constructor: (@plot_height, @plot_width) ->

+            @qtl_results = js_data.qtl_results

+            console.log("qtl_results are:", @qtl_results)

+            @chromosomes = js_data.chromosomes

+

+            @total_length = 0

+

+            @max_chr = @get_max_chr()

+

+            @x_coords = []

+            @y_coords = []

+            @marker_names = []

+            console.time('Create coordinates')

+            @create_coordinates()

+            console.log("@x_coords: ", @x_coords)

+            console.log("@y_coords: ", @y_coords)

+            console.timeEnd('Create coordinates')

+            [@chr_lengths, @cumulative_chr_lengths] = @get_chr_lengths()

+

+            # Buffer to allow for the ticks/labels to be drawn

+            @x_buffer = @plot_width/30

+            @y_buffer = @plot_height/20

+            

+            #@x_max = d3.max(@x_coords)

+            @x_max = @total_length

+            console.log("@x_max: ", @x_max)

+            console.log("@x_buffer: ", @x_buffer)

+            @y_max = d3.max(@y_coords) * 1.2

+

+            @svg = @create_svg()

+            @plot_coordinates = _.zip(@x_coords, @y_coords, @marker_names)

+            

+            @plot_height -= @y_buffer

+            @create_scales()

+            console.time('Create graph')

+            @create_graph()

+            console.timeEnd('Create graph')

+

+        get_max_chr: () ->

+            max_chr = 0

+            for result in @qtl_results

+                chr = parseInt(result.chr)

+                if not _.isNaN(chr) 

+                    if chr > max_chr

+                        max_chr = chr

+            return max_chr

+

+        get_chr_lengths: () ->

+            ###

+            #Gets a list of both individual and cumulative (the position of one on the graph

+            #is its own length plus the lengths of all preceding chromosomes) lengths in order

+            #to draw the vertical lines separating chromosomes and the chromosome labels

+            #

+            ###

+            

+            console.log("@chromosomes: ", @chromosomes)

+            

+            cumulative_chr_lengths = []

+            chr_lengths = []

+            total_length = 0

+            for key of @chromosomes

+                this_length = @chromosomes[key]

+                chr_lengths.push(this_length)

+                cumulative_chr_lengths.push(total_length + this_length)

+                total_length += this_length

+    

+            console.log("chr_lengths: ", chr_lengths)

+    

+            return [chr_lengths, cumulative_chr_lengths]

+    

+        create_coordinates: () -> 

+            chr_lengths = []

+            chr_seen = []

+            for result in js_data.qtl_results

+                if result.chr == "X"

+                    chr_length = parseFloat(@chromosomes[20])

+                else

+                    chr_length = parseFloat(@chromosomes[result.chr])

+                if not(result.chr in chr_seen)

+                    chr_seen.push(result.chr) 

+                    chr_lengths.push(chr_length) 

+                    if result.chr != "1"

+                        @total_length += parseFloat(chr_lengths[chr_lengths.length - 2])

+                @x_coords.push(@total_length + parseFloat(result.Mb))

+                @y_coords.push(result.lrs_value)

+                @marker_names.push(result.name)

+            @total_length += parseFloat(chr_lengths[chr_lengths.length-1])

+            #console.log("chr_lengths: ", chr_lengths)

+    

+        create_svg: () ->

+            svg = d3.select("#interval_map")

+                .append("svg")

+                .attr("class", "interval_map")

+                .attr("width", @plot_width+@x_buffer)

+                .attr("height", @plot_height+@y_buffer)

+            

+            return svg

+    

+        create_graph: () ->

+            @add_border()

+            @add_x_axis()

+            @add_y_axis()

+            @add_chr_lines()

+            @fill_chr_areas()

+            @add_chr_labels()

+            @connect_markers()

+    

+        add_border: () ->

+            border_coords = [[@y_buffer, @plot_height, @x_buffer, @x_buffer],

+                             [@y_buffer, @plot_height, @plot_width, @plot_width],

+                             [@y_buffer, @y_buffer, @x_buffer, @plot_width],

+                             [@plot_height, @plot_height, @x_buffer, @plot_width]]

+    

+            @svg.selectAll("line")

+                .data(border_coords)

+                .enter()

+                .append("line")

+                .attr("y1", (d) =>

+                    return d[0]

+                )

+                .attr("y2", (d) =>

+                    return d[1]

+                )

+                .attr("x1", (d) =>

+                    return d[2]

+                )

+                .attr("x2", (d) =>

+                    return d[3]

+                )             

+                .style("stroke", "#000")

+    

+        create_scales: () ->

+            @x_scale = d3.scale.linear()

+                .domain([0, d3.max(@x_coords)])

+                .range([@x_buffer, @plot_width])

+    

+            @y_scale = d3.scale.linear()

+                .domain([0, @y_max])

+                .range([@plot_height, @y_buffer])

+    

+        create_x_axis_tick_values: () ->

+            tick_vals = []

+            for val in [25..@cumulative_chr_lengths[0]] when val%25 == 0

+                tick_vals.push(val)

+                

+            for length, i in @cumulative_chr_lengths

+                if i == 0

+                    continue

+                chr_ticks = []

+                tick_count = Math.floor(@chr_lengths[i]/25)

+                tick_val = parseInt(@cumulative_chr_lengths[i-1])

+                for tick in [0..(tick_count-1)]

+                    tick_val += 25

+                    chr_ticks.push(tick_val)

+                Array::push.apply tick_vals, chr_ticks    

+                    

+            #console.log("tick_vals:", tick_vals)

+            return tick_vals

+    

+        add_x_axis: () ->

+            xAxis = d3.svg.axis()

+                    .scale(@x_scale)

+                    .orient("bottom")

+                    .tickValues(@create_x_axis_tick_values())

+    

+            next_chr = 1

+            tmp_tick_val = 0

+            xAxis.tickFormat((d) =>

+                d3.format("d") #format as integer

+                if d < @cumulative_chr_lengths[0]

+                    tick_val = d

+                else

+                    next_chr_length = @cumulative_chr_lengths[next_chr]

+                    if d > next_chr_length

+                        next_chr += 1

+                        tmp_tick_val = 25

+                        tick_val = tmp_tick_val

+                    else

+                        tmp_tick_val += 25

+                        tick_val = tmp_tick_val

+                return (tick_val)

+            )

+    

+            @svg.append("g")

+                .attr("class", "x_axis")

+                .attr("transform", "translate(0," + @plot_height + ")")

+                .call(xAxis)

+                .selectAll("text")

+                    .attr("text-anchor", "right")

+                    .attr("dx", "-1.6em")

+                    .attr("transform", (d) =>

+                        return "translate(-12,0) rotate(-90)"

+                    )

+                    #.attr("dy", "-1.0em")                        

+                                    

+    

+        add_y_axis: () ->

+            yAxis = d3.svg.axis()

+                    .scale(@y_scale)

+                    .orient("left")

+                    .ticks(5)

+            

+            @svg.append("g")

+                .attr("class", "y_axis")

+                .attr("transform", "translate(" + @x_buffer + ",0)")

+                .call(yAxis)

+    

+        add_chr_lines: () ->

+            @svg.selectAll("line")

+                .data(@cumulative_chr_lengths, (d) =>

+                    return d

+                )

+                .enter()

+                .append("line")

+                .attr("y1", @y_buffer)

+                .attr("y2", @plot_height)

+                .attr("x1", @x_scale)

+                .attr("x2", @x_scale)

+                .style("stroke", "#ccc")

+                

+        fill_chr_areas: () ->

+            @svg.selectAll("rect.chr_fill_area_1")

+                .data(_.zip(@chr_lengths, @cumulative_chr_lengths), (d) =>

+                    return d

+                )

+                .enter()

+                .append("rect")

+                .attr("class", "chr_fill_area_1")

+                .attr("x", (d, i) =>

+                    if i == 0

+                        return @x_scale(0)

+                    else

+                        return @x_scale(@cumulative_chr_lengths[i-1])

+                )

+                .attr("y", @y_buffer)

+                .attr("width", (d) =>

+                    return @x_scale(d[0])

+                )

+                .attr("height", @plot_height-@y_buffer)

+                .attr("fill", "white")

+    

+        add_chr_labels: () ->

+            chr_names = []

+            for key of @chromosomes

+                chr_names.push(key)

+            chr_info = _.zip(chr_names, @chr_lengths, @cumulative_chr_lengths)

+            @svg.selectAll("text")

+                .data(chr_info, (d) =>

+                    return d

+                )

+                .enter()

+                .append("text")

+                .text((d) =>

+                    return d[0]

+                )

+                .attr("x", (d) =>

+                    return @x_scale(d[2] - d[1]/2)

+                )

+                .attr("y", @plot_height * 0.1)

+                .attr("dx", "0em")

+                .attr("text-anchor", "middle")

+                .attr("font-family", "sans-serif")

+                .attr("font-size", "18px")

+                #.attr("fill", "grey")

+    

+        connect_markers: () ->

+            @svg.selectAll("line")

+                .data(@plot_coordinates)

+                .enter()

+                .append("line")

+                .attr("x1", (d, i) =>

+                    if i == 0

+                        return @x_buffer

+                    else

+                        return parseFloat(@x_buffer) + ((parseFloat(@plot_width)-parseFloat(@x_buffer)) * @plot_coordinates[i-1][0]/parseFloat(@x_max))

+                )

+                .attr("y1", (d, i) =>

+                    if i == 0

+                        return @plot_height

+                    else

+                        return @plot_height - ((@plot_height-@y_buffer) * @plot_coordinates[i-1][1]/@y_max)

+                )

+                .attr("x2", (d) =>

+                    return parseFloat(@x_buffer) + ((parseFloat(@plot_width)-parseFloat(@x_buffer)) * d[0]/parseFloat(@x_max))

+                )

+                .attr("y2", (d) =>

+                    return @plot_height - ((@plot_height-@y_buffer) * d[1]/@y_max)

+                )

+                .style("stroke", "black")

+    

+    console.time('Create interval map')

+    console.log("TESTING")

+    new Interval_Map(600, 1200)

+    console.timeEnd('Create interval map')
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/interval_mapping.js b/wqflask/wqflask/static/new/javascript/interval_mapping.js
new file mode 100644
index 00000000..3a2ce6d7
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/interval_mapping.js
@@ -0,0 +1,273 @@
+// Generated by CoffeeScript 1.6.1
+(function() {
+  var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
+
+  $(function() {
+    var Interval_Map;
+    Interval_Map = (function() {
+
+      function Interval_Map(plot_height, plot_width) {
+        var _ref;
+        this.plot_height = plot_height;
+        this.plot_width = plot_width;
+        this.qtl_results = js_data.qtl_results;
+        console.log("qtl_results are:", this.qtl_results);
+        this.chromosomes = js_data.chromosomes;
+        this.total_length = 0;
+        this.max_chr = this.get_max_chr();
+        this.x_coords = [];
+        this.y_coords = [];
+        this.marker_names = [];
+        console.time('Create coordinates');
+        this.create_coordinates();
+        console.log("@x_coords: ", this.x_coords);
+        console.log("@y_coords: ", this.y_coords);
+        console.timeEnd('Create coordinates');
+        _ref = this.get_chr_lengths(), this.chr_lengths = _ref[0], this.cumulative_chr_lengths = _ref[1];
+        this.x_buffer = this.plot_width / 30;
+        this.y_buffer = this.plot_height / 20;
+        this.x_max = this.total_length;
+        console.log("@x_max: ", this.x_max);
+        console.log("@x_buffer: ", this.x_buffer);
+        this.y_max = d3.max(this.y_coords) * 1.2;
+        this.svg = this.create_svg();
+        this.plot_coordinates = _.zip(this.x_coords, this.y_coords, this.marker_names);
+        this.plot_height -= this.y_buffer;
+        this.create_scales();
+        console.time('Create graph');
+        this.create_graph();
+        console.timeEnd('Create graph');
+      }
+
+      Interval_Map.prototype.get_max_chr = function() {
+        var chr, max_chr, result, _i, _len, _ref;
+        max_chr = 0;
+        _ref = this.qtl_results;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          result = _ref[_i];
+          chr = parseInt(result.chr);
+          if (!_.isNaN(chr)) {
+            if (chr > max_chr) {
+              max_chr = chr;
+            }
+          }
+        }
+        return max_chr;
+      };
+
+      Interval_Map.prototype.get_chr_lengths = function() {
+        /*
+        #Gets a list of both individual and cumulative (the position of one on the graph
+        #is its own length plus the lengths of all preceding chromosomes) lengths in order
+        #to draw the vertical lines separating chromosomes and the chromosome labels
+        #
+        */
+
+        var chr_lengths, cumulative_chr_lengths, key, this_length, total_length;
+        console.log("@chromosomes: ", this.chromosomes);
+        cumulative_chr_lengths = [];
+        chr_lengths = [];
+        total_length = 0;
+        for (key in this.chromosomes) {
+          this_length = this.chromosomes[key];
+          chr_lengths.push(this_length);
+          cumulative_chr_lengths.push(total_length + this_length);
+          total_length += this_length;
+        }
+        console.log("chr_lengths: ", chr_lengths);
+        return [chr_lengths, cumulative_chr_lengths];
+      };
+
+      Interval_Map.prototype.create_coordinates = function() {
+        var chr_length, chr_lengths, chr_seen, result, _i, _len, _ref, _ref1;
+        chr_lengths = [];
+        chr_seen = [];
+        _ref = js_data.qtl_results;
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          result = _ref[_i];
+          if (result.chr === "X") {
+            chr_length = parseFloat(this.chromosomes[20]);
+          } else {
+            chr_length = parseFloat(this.chromosomes[result.chr]);
+          }
+          if (!(_ref1 = result.chr, __indexOf.call(chr_seen, _ref1) >= 0)) {
+            chr_seen.push(result.chr);
+            chr_lengths.push(chr_length);
+            if (result.chr !== "1") {
+              this.total_length += parseFloat(chr_lengths[chr_lengths.length - 2]);
+            }
+          }
+          this.x_coords.push(this.total_length + parseFloat(result.Mb));
+          this.y_coords.push(result.lrs_value);
+          this.marker_names.push(result.name);
+        }
+        return this.total_length += parseFloat(chr_lengths[chr_lengths.length - 1]);
+      };
+
+      Interval_Map.prototype.create_svg = function() {
+        var svg;
+        svg = d3.select("#interval_map").append("svg").attr("class", "interval_map").attr("width", this.plot_width + this.x_buffer).attr("height", this.plot_height + this.y_buffer);
+        return svg;
+      };
+
+      Interval_Map.prototype.create_graph = function() {
+        this.add_border();
+        this.add_x_axis();
+        this.add_y_axis();
+        this.add_chr_lines();
+        this.fill_chr_areas();
+        this.add_chr_labels();
+        return this.connect_markers();
+      };
+
+      Interval_Map.prototype.add_border = function() {
+        var border_coords,
+          _this = this;
+        border_coords = [[this.y_buffer, this.plot_height, this.x_buffer, this.x_buffer], [this.y_buffer, this.plot_height, this.plot_width, this.plot_width], [this.y_buffer, this.y_buffer, this.x_buffer, this.plot_width], [this.plot_height, this.plot_height, this.x_buffer, this.plot_width]];
+        return this.svg.selectAll("line").data(border_coords).enter().append("line").attr("y1", function(d) {
+          return d[0];
+        }).attr("y2", function(d) {
+          return d[1];
+        }).attr("x1", function(d) {
+          return d[2];
+        }).attr("x2", function(d) {
+          return d[3];
+        }).style("stroke", "#000");
+      };
+
+      Interval_Map.prototype.create_scales = function() {
+        this.x_scale = d3.scale.linear().domain([0, d3.max(this.x_coords)]).range([this.x_buffer, this.plot_width]);
+        return this.y_scale = d3.scale.linear().domain([0, this.y_max]).range([this.plot_height, this.y_buffer]);
+      };
+
+      Interval_Map.prototype.create_x_axis_tick_values = function() {
+        var chr_ticks, i, length, tick, tick_count, tick_val, tick_vals, val, _i, _j, _k, _len, _ref, _ref1, _ref2;
+        tick_vals = [];
+        for (val = _i = 25, _ref = this.cumulative_chr_lengths[0]; 25 <= _ref ? _i <= _ref : _i >= _ref; val = 25 <= _ref ? ++_i : --_i) {
+          if (val % 25 === 0) {
+            tick_vals.push(val);
+          }
+        }
+        _ref1 = this.cumulative_chr_lengths;
+        for (i = _j = 0, _len = _ref1.length; _j < _len; i = ++_j) {
+          length = _ref1[i];
+          if (i === 0) {
+            continue;
+          }
+          chr_ticks = [];
+          tick_count = Math.floor(this.chr_lengths[i] / 25);
+          tick_val = parseInt(this.cumulative_chr_lengths[i - 1]);
+          for (tick = _k = 0, _ref2 = tick_count - 1; 0 <= _ref2 ? _k <= _ref2 : _k >= _ref2; tick = 0 <= _ref2 ? ++_k : --_k) {
+            tick_val += 25;
+            chr_ticks.push(tick_val);
+          }
+          Array.prototype.push.apply(tick_vals, chr_ticks);
+        }
+        return tick_vals;
+      };
+
+      Interval_Map.prototype.add_x_axis = function() {
+        var next_chr, tmp_tick_val, xAxis,
+          _this = this;
+        xAxis = d3.svg.axis().scale(this.x_scale).orient("bottom").tickValues(this.create_x_axis_tick_values());
+        next_chr = 1;
+        tmp_tick_val = 0;
+        xAxis.tickFormat(function(d) {
+          var next_chr_length, tick_val;
+          d3.format("d");
+          if (d < _this.cumulative_chr_lengths[0]) {
+            tick_val = d;
+          } else {
+            next_chr_length = _this.cumulative_chr_lengths[next_chr];
+            if (d > next_chr_length) {
+              next_chr += 1;
+              tmp_tick_val = 25;
+              tick_val = tmp_tick_val;
+            } else {
+              tmp_tick_val += 25;
+              tick_val = tmp_tick_val;
+            }
+          }
+          return tick_val;
+        });
+        return this.svg.append("g").attr("class", "x_axis").attr("transform", "translate(0," + this.plot_height + ")").call(xAxis).selectAll("text").attr("text-anchor", "right").attr("dx", "-1.6em").attr("transform", function(d) {
+          return "translate(-12,0) rotate(-90)";
+        });
+      };
+
+      Interval_Map.prototype.add_y_axis = function() {
+        var yAxis;
+        yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5);
+        return this.svg.append("g").attr("class", "y_axis").attr("transform", "translate(" + this.x_buffer + ",0)").call(yAxis);
+      };
+
+      Interval_Map.prototype.add_chr_lines = function() {
+        var _this = this;
+        return this.svg.selectAll("line").data(this.cumulative_chr_lengths, function(d) {
+          return d;
+        }).enter().append("line").attr("y1", this.y_buffer).attr("y2", this.plot_height).attr("x1", this.x_scale).attr("x2", this.x_scale).style("stroke", "#ccc");
+      };
+
+      Interval_Map.prototype.fill_chr_areas = function() {
+        var _this = this;
+        return this.svg.selectAll("rect.chr_fill_area_1").data(_.zip(this.chr_lengths, this.cumulative_chr_lengths), function(d) {
+          return d;
+        }).enter().append("rect").attr("class", "chr_fill_area_1").attr("x", function(d, i) {
+          if (i === 0) {
+            return _this.x_scale(0);
+          } else {
+            return _this.x_scale(_this.cumulative_chr_lengths[i - 1]);
+          }
+        }).attr("y", this.y_buffer).attr("width", function(d) {
+          return _this.x_scale(d[0]);
+        }).attr("height", this.plot_height - this.y_buffer).attr("fill", "white");
+      };
+
+      Interval_Map.prototype.add_chr_labels = function() {
+        var chr_info, chr_names, key,
+          _this = this;
+        chr_names = [];
+        for (key in this.chromosomes) {
+          chr_names.push(key);
+        }
+        chr_info = _.zip(chr_names, this.chr_lengths, this.cumulative_chr_lengths);
+        return this.svg.selectAll("text").data(chr_info, function(d) {
+          return d;
+        }).enter().append("text").text(function(d) {
+          return d[0];
+        }).attr("x", function(d) {
+          return _this.x_scale(d[2] - d[1] / 2);
+        }).attr("y", this.plot_height * 0.1).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px");
+      };
+
+      Interval_Map.prototype.connect_markers = function() {
+        var _this = this;
+        return this.svg.selectAll("line").data(this.plot_coordinates).enter().append("line").attr("x1", function(d, i) {
+          if (i === 0) {
+            return _this.x_buffer;
+          } else {
+            return parseFloat(_this.x_buffer) + ((parseFloat(_this.plot_width) - parseFloat(_this.x_buffer)) * _this.plot_coordinates[i - 1][0] / parseFloat(_this.x_max));
+          }
+        }).attr("y1", function(d, i) {
+          if (i === 0) {
+            return _this.plot_height;
+          } else {
+            return _this.plot_height - ((_this.plot_height - _this.y_buffer) * _this.plot_coordinates[i - 1][1] / _this.y_max);
+          }
+        }).attr("x2", function(d) {
+          return parseFloat(_this.x_buffer) + ((parseFloat(_this.plot_width) - parseFloat(_this.x_buffer)) * d[0] / parseFloat(_this.x_max));
+        }).attr("y2", function(d) {
+          return _this.plot_height - ((_this.plot_height - _this.y_buffer) * d[1] / _this.y_max);
+        }).style("stroke", "black");
+      };
+
+      return Interval_Map;
+
+    })();
+    console.time('Create interval map');
+    console.log("TESTING");
+    new Interval_Map(600, 1200);
+    return console.timeEnd('Create interval map');
+  });
+
+}).call(this);
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
index 2892987e..f5f13c27 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
@@ -49,10 +49,10 @@ $ ->
 
         get_chr_lengths: () ->
             ###
-            Gets a list of both individual and cumulative (the position of one on the graph
-            is its own length plus the lengths of all preceding chromosomes) lengths in order
-            to draw the vertical lines separating chromosomes and the chromosome labels
-            
+            #Gets a list of both individual and cumulative (the position of one on the graph
+            #is its own length plus the lengths of all preceding chromosomes) lengths in order
+            #to draw the vertical lines separating chromosomes and the chromosome labels
+            #
             ###
             
             console.log("@chromosomes: ", @chromosomes)
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js
index ffcf1a75..cdf37671 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.js
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.js
@@ -57,9 +57,10 @@
 
       Manhattan_Plot.prototype.get_chr_lengths = function() {
         /*
-        Gets a list of both individual and cumulative (the position of one on the graph
-        is its own length plus the lengths of all preceding chromosomes) lengths in order
-        to draw the vertical lines separating chromosomes and the chromosome labels
+        #Gets a list of both individual and cumulative (the position of one on the graph
+        #is its own length plus the lengths of all preceding chromosomes) lengths in order
+        #to draw the vertical lines separating chromosomes and the chromosome labels
+        #
         */
 
         var chr_lengths, cumulative_chr_lengths, key, this_length, total_length;
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index 8bcca85d..1df033d6 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -1,3 +1,5 @@
+root = exports ? this
+
 console.log("start_b")
 
 # this is our isNumber, do not confuse with the underscore.js one
@@ -59,380 +61,13 @@ Stat_Table_Rows = [
         ]
 
 $ ->
-    class Bar_Chart
-        constructor: (@sample_list, @sample_group) ->
-            @get_samples()
-            console.log("sample names:", @sample_names)
-            if @sample_attr_vals.length > 0
-                @get_distinct_attr_vals()
-                @get_attr_color_dict()
-            
-            #Used to calculate the bottom margin so sample names aren't cut off
-            longest_sample_name = d3.max(sample.length for sample in @sample_names)
-            
-            @margin = {top: 20, right: 20, bottom: longest_sample_name * 7, left: 40}
-            @plot_width = @sample_vals.length * 15 - @margin.left - @margin.right
-            @plot_height = 500 - @margin.top - @margin.bottom
-
-            @x_buffer = @plot_width/20
-            @y_buffer = @plot_height/20
-
-            @y_min = d3.min(@sample_vals)  
-            @y_max = d3.max(@sample_vals) * 1.1
-
-            @svg = @create_svg()
-
-            @plot_height -= @y_buffer
-            @create_scales()
-            @create_graph()
-            
-            d3.select("#color_attribute").on("change", =>
-                attribute = $("#color_attribute").val()
-                if $("#update_bar_chart").html() == 'Sort By Name' 
-                    @svg.selectAll(".bar")
-                        .data(@sorted_samples())
-                        .transition()
-                        .duration(1000)
-                        .style("fill", (d) =>
-                            if attribute == "None"
-                                return "steelblue"
-                            else
-                                return @attr_color_dict[attribute][d[2][attribute]]
-                        )
-                        .select("title")
-                        .text((d) =>
-                            return d[1]
-                        )
-                else
-                    @svg.selectAll(".bar")
-                        .data(@samples)
-                        .transition()
-                        .duration(1000)
-                        .style("fill", (d) =>
-                            if attribute == "None"
-                                return "steelblue"
-                            else
-                                return @attr_color_dict[attribute][d[2][attribute]]
-                        )
-                @add_legend(attribute, @distinct_attr_vals[attribute])
-            )
-        
-        
-            d3.select("#update_bar_chart").on("click", =>
-                if @attributes.length > 0
-                    attribute = $("#color_attribute").val()
-                if $("#update_bar_chart").html() == 'Sort By Value' 
-                    $("#update_bar_chart").html('Sort By Name')
-                    sortItems = (a, b) ->
-                        return a[1] - b[1]
-    
-                    @svg.selectAll(".bar")
-                        .data(@sorted_samples())
-                        .transition()
-                        .duration(1000)
-                        .attr("y", (d) =>
-                            return @y_scale(d[1])
-                        )
-                        .attr("height", (d) =>
-                            return @plot_height - @y_scale(d[1])
-                        )
-                        .style("fill", (d) =>
-                            if @attributes.length > 0
-                                return @attr_color_dict[attribute][d[2][attribute]]
-                            else
-                                return "steelblue"
-                        )
-                        .select("title")
-                        .text((d) =>
-                            return d[1]
-                        )
-                    sorted_sample_names = (sample[0] for sample in @sorted_samples())
-                    x_scale = d3.scale.ordinal()
-                        .domain(sorted_sample_names)
-                        .rangeBands([0, @plot_width], .1)
-                    $('.x.axis').remove()
-                    @add_x_axis(x_scale)
-                else
-                    $("#update_bar_chart").html('Sort By Value')
-                    @svg.selectAll(".bar")
-                        .data(@samples)
-                        .transition()
-                        .duration(1000)
-                        .attr("y", (d) =>
-                            return @y_scale(d[1])
-                        )
-                        .attr("height", (d) =>
-                            return @plot_height - @y_scale(d[1])
-                        )
-                        .style("fill", (d) =>
-                            if @attributes.length > 0
-                                return @attr_color_dict[attribute][d[2][attribute]]
-                            else
-                                return "steelblue"
-                        )
-                        .select("title")
-                        .text((d) =>
-                            return d[1]
-                        )
-                    x_scale = d3.scale.ordinal()
-                        .domain(@sample_names)
-                        .rangeBands([0, @plot_width], .1)
-                    $('.x.axis').remove()
-                    @add_x_axis(x_scale)
-            )
-            
-            d3.select("#color_by_trait").on("click", =>
-                @color_by_trait()
-            )
-
-        get_attr_color_dict: () ->
-            @attr_color_dict = {}
-            console.log("distinct_attr_vals:", @distinct_attr_vals)
-            for own key, distinct_vals of @distinct_attr_vals
-                this_color_dict = {}
-                if distinct_vals.length < 10
-                    color = d3.scale.category10()
-                    for value, i in distinct_vals
-                        this_color_dict[value] = color(i)
-                else
-                    console.log("distinct_values:", distinct_vals)
-                    if _.every(distinct_vals, (d) =>
-                        if isNaN(d)
-                            return false
-                        else
-                            return true
-                    )
-                        color_range = d3.scale.linear()
-                                        .domain([d3.min(distinct_vals),
-                                                d3.max(distinct_vals)])
-                                        .range([0,4])
-                        for value, i in distinct_vals
-                            console.log("color_range(value):", color_range(parseInt(value)))
-                            this_color_dict[value] = d3.rgb("lightblue").darker(color_range(parseInt(value)))
-                            #this_color_dict[value] = "rgb(0, 0, " + color_range(parseInt(value)) + ")"
-                @attr_color_dict[key] = this_color_dict
-
-        get_samples: () ->
-            @sample_names = (sample.name for sample in @sample_list when sample.value != null)
-            @sample_vals = (sample.value for sample in @sample_list when sample.value != null)
-            @attributes = (key for key of @sample_list[0]["extra_attributes"])
-            console.log("attributes:", @attributes)
-            @sample_attr_vals = []
-            if @attributes.length > 0
-                for sample in @sample_list
-                    attr_vals = {}
-                    for attribute in @attributes
-                        attr_vals[attribute] = sample["extra_attributes"][attribute]
-                    @sample_attr_vals.push(attr_vals)
-            @samples = _.zip(@sample_names, @sample_vals, @sample_attr_vals)
-
-        get_distinct_attr_vals: () ->
-            @distinct_attr_vals = {}
-            for sample in @sample_attr_vals
-                for attribute of sample
-                    if not @distinct_attr_vals[attribute]
-                        @distinct_attr_vals[attribute] = []
-                    if sample[attribute] not in @distinct_attr_vals[attribute]
-                        @distinct_attr_vals[attribute].push(sample[attribute])
-            #console.log("distinct_attr_vals:", @distinct_attr_vals)
-            
-        create_svg: () ->
-            svg = d3.select("#bar_chart")
-                .append("svg")
-                .attr("class", "bar_chart")
-                .attr("width", @plot_width + @margin.left + @margin.right)
-                .attr("height", @plot_height + @margin.top + @margin.bottom)
-                .append("g")
-                .attr("transform", "translate(" + @margin.left + "," + @margin.top + ")")
-                
-            return svg
-            
-        create_scales: () ->
-            @x_scale = d3.scale.ordinal()
-                .domain(@sample_names)
-                .rangeBands([0, @plot_width], .1)
-
-            @y_scale = d3.scale.linear()
-                .domain([@y_min * 0.75, @y_max])
-                .range([@plot_height, @y_buffer])
-                
-        create_graph: () ->
-            
-            #@add_border()
-            @add_x_axis(@x_scale)
-            @add_y_axis() 
-            
-            @add_bars()
-            
-        add_x_axis: (scale) ->
-            xAxis = d3.svg.axis()
-                .scale(scale)
-                .orient("bottom");
-            
-            @svg.append("g")
-                .attr("class", "x axis")
-                .attr("transform", "translate(0," + @plot_height + ")")
-                .call(xAxis)
-                .selectAll("text")  
-                    .style("text-anchor", "end")
-                    .style("font-size", "12px")
-                    .attr("dx", "-.8em")
-                    .attr("dy", "-.3em")
-                    .attr("transform", (d) =>
-                        return "rotate(-90)" 
-                    )
-
-        add_y_axis: () ->
-            yAxis = d3.svg.axis()
-                    .scale(@y_scale)
-                    .orient("left")
-                    .ticks(5)
-
-            @svg.append("g")
-                .attr("class", "y axis")
-                .call(yAxis)
-              .append("text")
-                .attr("transform", "rotate(-90)")
-                .attr("y", 6)
-                .attr("dy", ".71em")
-                .style("text-anchor", "end")
-
-        add_bars: () ->
-            @svg.selectAll(".bar")
-                .data(@samples)
-              .enter().append("rect")
-                .style("fill", "steelblue")
-                .attr("class", "bar")
-                .attr("x", (d) =>
-                    return @x_scale(d[0])
-                )
-                .attr("width", @x_scale.rangeBand())
-                .attr("y", (d) =>
-                    return @y_scale(d[1])
-                )
-                .attr("height", (d) =>
-                    return @plot_height - @y_scale(d[1])
-                )
-                .append("svg:title")
-                .text((d) =>
-                    return d[1]
-                )
-
-        sorted_samples: () ->
-            #if @sample_attr_vals.length > 0
-            sample_list = _.zip(@sample_names, @sample_vals, @sample_attr_vals)
-            #else
-            #    sample_list = _.zip(@sample_names, @sample_vals)
-            sorted = _.sortBy(sample_list, (sample) =>
-                return sample[1]
-            )
-            console.log("sorted:", sorted)
-            return sorted
-
-        add_legend: (attribute, distinct_vals) ->
-            legend = @svg.append("g")
-                .attr("class", "legend")
-                .attr("height", 100)
-                .attr("width", 100)
-                .attr('transform', 'translate(-20,50)')
-                
-            legend_rect = legend.selectAll('rect')
-                            .data(distinct_vals)
-                            .enter()
-                            .append("rect")
-                            .attr("x", @plot_width - 65)
-                            .attr("width", 10)
-                            .attr("height", 10)
-                            .attr("y", (d, i) =>
-                                return i * 20
-                            )
-                            .style("fill", (d) =>
-                                console.log("TEST:", @attr_color_dict[attribute][d])
-                                return @attr_color_dict[attribute][d]
-                            )
-            
-            legend_text = legend.selectAll('text')
-                            .data(distinct_vals)
-                            .enter()
-                            .append("text")
-                            .attr("x", @plot_width - 52)
-                            .attr("y", (d, i) =>
-                                return i*20 + 9    
-                            )
-                            .text((d) =>
-                                return d
-                            )
-                            
-        color_by_trait: () ->
-            $('#collections_holder').load('/collections/list #collections_list', =>
-                $.colorbox(
-                    inline: true
-                    href: "#collections_holder"
-                )
-            )
-    
-    class Box_Plot
-        constructor: (@sample_list, @sample_group) ->
-            @get_samples()
-            
-            @margin = {top: 10, right: 50, bottom: 20, left: 50}
-            @plot_width = 200 - @margin.left - @margin.right
-            @plot_height = 500 - @margin.top - @margin.bottom
-            
-            @min = d3.min(@sample_vals)  
-            @max = d3.max(@sample_vals)
-            
-            @svg = @create_svg()
-            @enter_data()
-            
-            
-        get_samples: () ->
-            @sample_vals = (sample.value for sample in @sample_list when sample.value != null)
-            
-        create_svg: () ->
-            svg = d3.box()
-                .whiskers(@inter_quartile_range(1.5))
-                .width(@plot_width)
-                .height(@plot_height)
-                .domain([@min, @max])
-            return svg
-                        
-        enter_data: () ->
-            d3.select("#box_plot").selectAll("svg")
-                .data([@sample_vals])
-                .enter().append("svg:svg")
-                .attr("class", "box")
-                .attr("width", @plot_width)
-                .attr("height", @plot_height)
-                .append("svg:g")
-                .call(@svg)
-                            
-        inter_quartile_range: (k) ->
-            return (d, i) =>
-                console.log("iqr d:", d)
-                q1 = d.quartiles[0]
-                q3 = d.quartiles[2]
-                inter_quartile_range = (q3 - q1) * k
-                console.log("iqr:", inter_quartile_range)
-                i = 0
-                j = d.length
-                console.log("d[-1]:", d[1])
-                console.log("q1 - iqr:", q1 - inter_quartile_range)
-                i++ while (d[i] < q1 - inter_quartile_range)
-                j-- while (d[j] > q3 + inter_quartile_range)
-                #while (d[++i] < q1 - inter_quartile_range
-                #while d[--j] > q3 + inter_quartile_range
-                console.log("[i, j]", [i, j])
-                return [i, j]
-    
-
     sample_lists = js_data.sample_lists
     sample_group_types = js_data.sample_group_types
 
-    new Bar_Chart(sample_lists[0])
+    $("#update_bar_chart.btn-group").button()
+    root.bar_chart = new Bar_Chart(sample_lists[0])
     new Box_Plot(sample_lists[0])
 
-
     $('.bar_chart_samples_group').change ->
         $('#bar_chart').remove()
         $('#bar_chart_container').append('<div id="bar_chart"></div>')
@@ -444,7 +79,8 @@ $ ->
         else if group == "samples_all"
             all_samples = sample_lists[0].concat sample_lists[1]
             new Bar_Chart(all_samples)
-            
+        #$(".btn-group").button()
+
     $('.box_plot_samples_group').change ->
         $('#box_plot').remove()
         $('#box_plot_container').append('<div id="box_plot"></div>')
@@ -504,39 +140,6 @@ $ ->
                 console.log("Calling change_stats_value")
                 change_stats_value(sample_sets, category, row.vn, row.digits)
 
-    edit_data_change = ->
-        already_seen = {}
-        sample_sets =
-            samples_primary: new Stats([])
-            samples_other: new Stats([])
-            samples_all: new Stats([])
-
-        console.log("at beginning:", sample_sets)
-
-        tables = ['samples_primary', 'samples_other']
-        for table in tables
-            rows = $("#" + table).find('tr')
-            for row in rows
-                name = $(row).find('.edit_sample_sample_name').html()
-                name = $.trim(name)
-                real_value = $(row).find('.edit_sample_value').val()
-                console.log("real_value:", real_value)
-                checkbox = $(row).find(".edit_sample_checkbox")
-                checked = $(checkbox).attr('checked')
-
-                if checked and is_number(real_value) and real_value != ""
-                    console.log("in the iffy if")
-                    real_value = parseFloat(real_value)
-
-                    sample_sets[table].add_value(real_value)
-                    console.log("checking name of:", name)
-                    if not (name of already_seen)
-                        console.log("haven't seen")
-                        sample_sets['samples_all'].add_value(real_value)
-                        already_seen[name] = true
-        console.log("towards end:", sample_sets)
-        update_stat_values(sample_sets)
-
 
     make_table = ->
         header = "<thead><tr><th>&nbsp;</th>"
@@ -585,6 +188,38 @@ $ ->
             processed += value
         return processed
 
+    edit_data_change = ->
+        already_seen = {}
+        sample_sets =
+            samples_primary: new Stats([])
+            samples_other: new Stats([])
+            samples_all: new Stats([])
+
+        console.log("at beginning:", sample_sets)
+
+        tables = ['samples_primary', 'samples_other']
+        for table in tables
+            rows = $("#" + table).find('tr')
+            for row in rows
+                name = $(row).find('.edit_sample_sample_name').html()
+                name = $.trim(name)
+                real_value = $(row).find('.edit_sample_value').val()
+                console.log("real_value:", real_value)
+                checkbox = $(row).find(".edit_sample_checkbox")
+                checked = $(checkbox).attr('checked')
+
+                if checked and is_number(real_value) and real_value != ""
+                    console.log("in the iffy if")
+                    real_value = parseFloat(real_value)
+
+                    sample_sets[table].add_value(real_value)
+                    console.log("checking name of:", name)
+                    if not (name of already_seen)
+                        console.log("haven't seen")
+                        sample_sets['samples_all'].add_value(real_value)
+                        already_seen[name] = true
+        console.log("towards end:", sample_sets)
+        update_stat_values(sample_sets)
 
     show_hide_outliers = ->
         console.log("FOOBAR in beginning of show_hide_outliers")
@@ -613,7 +248,6 @@ $ ->
 
     $('select[name=corr_method]').change(on_corr_method_change)
 
-
     ##End Calculate Correlations Code
 
     ##Populate Samples Attribute Values Code
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index b562bfe2..90fa8228 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -1,10 +1,11 @@
 // Generated by CoffeeScript 1.6.1
 (function() {
-  var Stat_Table_Rows, is_number,
+  var Stat_Table_Rows, is_number, root,
     __hasProp = {}.hasOwnProperty,
-    __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
     __slice = [].slice;
 
+  root = typeof exports !== "undefined" && exports !== null ? exports : this;
+
   console.log("start_b");
 
   is_number = function(o) {
@@ -57,410 +58,11 @@
   ];
 
   $(function() {
-    var Bar_Chart, Box_Plot, block_by_attribute_value, block_by_index, block_outliers, change_stats_value, create_value_dropdown, edit_data_change, export_sample_table_data, get_sample_table_data, hide_no_value, hide_tabs, make_table, on_corr_method_change, populate_sample_attributes_values_dropdown, process_id, reset_samples_table, sample_group_types, sample_lists, show_hide_outliers, stats_mdp_change, update_stat_values;
-    Bar_Chart = (function() {
-
-      function Bar_Chart(sample_list, sample_group) {
-        var longest_sample_name, sample,
-          _this = this;
-        this.sample_list = sample_list;
-        this.sample_group = sample_group;
-        this.get_samples();
-        console.log("sample names:", this.sample_names);
-        if (this.sample_attr_vals.length > 0) {
-          this.get_distinct_attr_vals();
-          this.get_attr_color_dict();
-        }
-        longest_sample_name = d3.max((function() {
-          var _i, _len, _ref, _results;
-          _ref = this.sample_names;
-          _results = [];
-          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-            sample = _ref[_i];
-            _results.push(sample.length);
-          }
-          return _results;
-        }).call(this));
-        this.margin = {
-          top: 20,
-          right: 20,
-          bottom: longest_sample_name * 7,
-          left: 40
-        };
-        this.plot_width = this.sample_vals.length * 15 - this.margin.left - this.margin.right;
-        this.plot_height = 500 - this.margin.top - this.margin.bottom;
-        this.x_buffer = this.plot_width / 20;
-        this.y_buffer = this.plot_height / 20;
-        this.y_min = d3.min(this.sample_vals);
-        this.y_max = d3.max(this.sample_vals) * 1.1;
-        this.svg = this.create_svg();
-        this.plot_height -= this.y_buffer;
-        this.create_scales();
-        this.create_graph();
-        d3.select("#color_attribute").on("change", function() {
-          var attribute;
-          attribute = $("#color_attribute").val();
-          if ($("#update_bar_chart").html() === 'Sort By Name') {
-            _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
-              if (attribute === "None") {
-                return "steelblue";
-              } else {
-                return _this.attr_color_dict[attribute][d[2][attribute]];
-              }
-            }).select("title").text(function(d) {
-              return d[1];
-            });
-          } else {
-            _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).style("fill", function(d) {
-              if (attribute === "None") {
-                return "steelblue";
-              } else {
-                return _this.attr_color_dict[attribute][d[2][attribute]];
-              }
-            });
-          }
-          return _this.add_legend(attribute, _this.distinct_attr_vals[attribute]);
-        });
-        d3.select("#update_bar_chart").on("click", function() {
-          var attribute, sortItems, sorted_sample_names, x_scale;
-          if (_this.attributes.length > 0) {
-            attribute = $("#color_attribute").val();
-          }
-          if ($("#update_bar_chart").html() === 'Sort By Value') {
-            $("#update_bar_chart").html('Sort By Name');
-            sortItems = function(a, b) {
-              return a[1] - b[1];
-            };
-            _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).attr("y", function(d) {
-              return _this.y_scale(d[1]);
-            }).attr("height", function(d) {
-              return _this.plot_height - _this.y_scale(d[1]);
-            }).style("fill", function(d) {
-              if (_this.attributes.length > 0) {
-                return _this.attr_color_dict[attribute][d[2][attribute]];
-              } else {
-                return "steelblue";
-              }
-            }).select("title").text(function(d) {
-              return d[1];
-            });
-            sorted_sample_names = (function() {
-              var _i, _len, _ref, _results;
-              _ref = this.sorted_samples();
-              _results = [];
-              for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-                sample = _ref[_i];
-                _results.push(sample[0]);
-              }
-              return _results;
-            }).call(_this);
-            x_scale = d3.scale.ordinal().domain(sorted_sample_names).rangeBands([0, _this.plot_width], .1);
-            $('.x.axis').remove();
-            return _this.add_x_axis(x_scale);
-          } else {
-            $("#update_bar_chart").html('Sort By Value');
-            _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).attr("y", function(d) {
-              return _this.y_scale(d[1]);
-            }).attr("height", function(d) {
-              return _this.plot_height - _this.y_scale(d[1]);
-            }).style("fill", function(d) {
-              if (_this.attributes.length > 0) {
-                return _this.attr_color_dict[attribute][d[2][attribute]];
-              } else {
-                return "steelblue";
-              }
-            }).select("title").text(function(d) {
-              return d[1];
-            });
-            x_scale = d3.scale.ordinal().domain(_this.sample_names).rangeBands([0, _this.plot_width], .1);
-            $('.x.axis').remove();
-            return _this.add_x_axis(x_scale);
-          }
-        });
-        d3.select("#color_by_trait").on("click", function() {
-          return _this.color_by_trait();
-        });
-      }
-
-      Bar_Chart.prototype.get_attr_color_dict = function() {
-        var color, color_range, distinct_vals, i, key, this_color_dict, value, _i, _j, _len, _len1, _ref, _results,
-          _this = this;
-        this.attr_color_dict = {};
-        console.log("distinct_attr_vals:", this.distinct_attr_vals);
-        _ref = this.distinct_attr_vals;
-        _results = [];
-        for (key in _ref) {
-          if (!__hasProp.call(_ref, key)) continue;
-          distinct_vals = _ref[key];
-          this_color_dict = {};
-          if (distinct_vals.length < 10) {
-            color = d3.scale.category10();
-            for (i = _i = 0, _len = distinct_vals.length; _i < _len; i = ++_i) {
-              value = distinct_vals[i];
-              this_color_dict[value] = color(i);
-            }
-          } else {
-            console.log("distinct_values:", distinct_vals);
-            if (_.every(distinct_vals, function(d) {
-              if (isNaN(d)) {
-                return false;
-              } else {
-                return true;
-              }
-            })) {
-              color_range = d3.scale.linear().domain([d3.min(distinct_vals), d3.max(distinct_vals)]).range([0, 4]);
-              for (i = _j = 0, _len1 = distinct_vals.length; _j < _len1; i = ++_j) {
-                value = distinct_vals[i];
-                console.log("color_range(value):", color_range(parseInt(value)));
-                this_color_dict[value] = d3.rgb("lightblue").darker(color_range(parseInt(value)));
-              }
-            }
-          }
-          _results.push(this.attr_color_dict[key] = this_color_dict);
-        }
-        return _results;
-      };
-
-      Bar_Chart.prototype.get_samples = function() {
-        var attr_vals, attribute, key, sample, _i, _j, _len, _len1, _ref, _ref1;
-        this.sample_names = (function() {
-          var _i, _len, _ref, _results;
-          _ref = this.sample_list;
-          _results = [];
-          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-            sample = _ref[_i];
-            if (sample.value !== null) {
-              _results.push(sample.name);
-            }
-          }
-          return _results;
-        }).call(this);
-        this.sample_vals = (function() {
-          var _i, _len, _ref, _results;
-          _ref = this.sample_list;
-          _results = [];
-          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-            sample = _ref[_i];
-            if (sample.value !== null) {
-              _results.push(sample.value);
-            }
-          }
-          return _results;
-        }).call(this);
-        this.attributes = (function() {
-          var _results;
-          _results = [];
-          for (key in this.sample_list[0]["extra_attributes"]) {
-            _results.push(key);
-          }
-          return _results;
-        }).call(this);
-        console.log("attributes:", this.attributes);
-        this.sample_attr_vals = [];
-        if (this.attributes.length > 0) {
-          _ref = this.sample_list;
-          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-            sample = _ref[_i];
-            attr_vals = {};
-            _ref1 = this.attributes;
-            for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
-              attribute = _ref1[_j];
-              attr_vals[attribute] = sample["extra_attributes"][attribute];
-            }
-            this.sample_attr_vals.push(attr_vals);
-          }
-        }
-        return this.samples = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
-      };
-
-      Bar_Chart.prototype.get_distinct_attr_vals = function() {
-        var attribute, sample, _i, _len, _ref, _results;
-        this.distinct_attr_vals = {};
-        _ref = this.sample_attr_vals;
-        _results = [];
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          sample = _ref[_i];
-          _results.push((function() {
-            var _ref1, _results1;
-            _results1 = [];
-            for (attribute in sample) {
-              if (!this.distinct_attr_vals[attribute]) {
-                this.distinct_attr_vals[attribute] = [];
-              }
-              if (_ref1 = sample[attribute], __indexOf.call(this.distinct_attr_vals[attribute], _ref1) < 0) {
-                _results1.push(this.distinct_attr_vals[attribute].push(sample[attribute]));
-              } else {
-                _results1.push(void 0);
-              }
-            }
-            return _results1;
-          }).call(this));
-        }
-        return _results;
-      };
-
-      Bar_Chart.prototype.create_svg = function() {
-        var svg;
-        svg = d3.select("#bar_chart").append("svg").attr("class", "bar_chart").attr("width", this.plot_width + this.margin.left + this.margin.right).attr("height", this.plot_height + this.margin.top + this.margin.bottom).append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
-        return svg;
-      };
-
-      Bar_Chart.prototype.create_scales = function() {
-        this.x_scale = d3.scale.ordinal().domain(this.sample_names).rangeBands([0, this.plot_width], .1);
-        return this.y_scale = d3.scale.linear().domain([this.y_min * 0.75, this.y_max]).range([this.plot_height, this.y_buffer]);
-      };
-
-      Bar_Chart.prototype.create_graph = function() {
-        this.add_x_axis(this.x_scale);
-        this.add_y_axis();
-        return this.add_bars();
-      };
-
-      Bar_Chart.prototype.add_x_axis = function(scale) {
-        var xAxis,
-          _this = this;
-        xAxis = d3.svg.axis().scale(scale).orient("bottom");
-        return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.plot_height + ")").call(xAxis).selectAll("text").style("text-anchor", "end").style("font-size", "12px").attr("dx", "-.8em").attr("dy", "-.3em").attr("transform", function(d) {
-          return "rotate(-90)";
-        });
-      };
-
-      Bar_Chart.prototype.add_y_axis = function() {
-        var yAxis;
-        yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5);
-        return this.svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end");
-      };
-
-      Bar_Chart.prototype.add_bars = function() {
-        var _this = this;
-        return this.svg.selectAll(".bar").data(this.samples).enter().append("rect").style("fill", "steelblue").attr("class", "bar").attr("x", function(d) {
-          return _this.x_scale(d[0]);
-        }).attr("width", this.x_scale.rangeBand()).attr("y", function(d) {
-          return _this.y_scale(d[1]);
-        }).attr("height", function(d) {
-          return _this.plot_height - _this.y_scale(d[1]);
-        }).append("svg:title").text(function(d) {
-          return d[1];
-        });
-      };
-
-      Bar_Chart.prototype.sorted_samples = function() {
-        var sample_list, sorted,
-          _this = this;
-        sample_list = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
-        sorted = _.sortBy(sample_list, function(sample) {
-          return sample[1];
-        });
-        console.log("sorted:", sorted);
-        return sorted;
-      };
-
-      Bar_Chart.prototype.add_legend = function(attribute, distinct_vals) {
-        var legend, legend_rect, legend_text,
-          _this = this;
-        legend = this.svg.append("g").attr("class", "legend").attr("height", 100).attr("width", 100).attr('transform', 'translate(-20,50)');
-        legend_rect = legend.selectAll('rect').data(distinct_vals).enter().append("rect").attr("x", this.plot_width - 65).attr("width", 10).attr("height", 10).attr("y", function(d, i) {
-          return i * 20;
-        }).style("fill", function(d) {
-          console.log("TEST:", _this.attr_color_dict[attribute][d]);
-          return _this.attr_color_dict[attribute][d];
-        });
-        return legend_text = legend.selectAll('text').data(distinct_vals).enter().append("text").attr("x", this.plot_width - 52).attr("y", function(d, i) {
-          return i * 20 + 9;
-        }).text(function(d) {
-          return d;
-        });
-      };
-
-      Bar_Chart.prototype.color_by_trait = function() {
-        var _this = this;
-        return $('#collections_holder').load('/collections/list #collections_list', function() {
-          return $.colorbox({
-            inline: true,
-            href: "#collections_holder"
-          });
-        });
-      };
-
-      return Bar_Chart;
-
-    })();
-    Box_Plot = (function() {
-
-      function Box_Plot(sample_list, sample_group) {
-        this.sample_list = sample_list;
-        this.sample_group = sample_group;
-        this.get_samples();
-        this.margin = {
-          top: 10,
-          right: 50,
-          bottom: 20,
-          left: 50
-        };
-        this.plot_width = 200 - this.margin.left - this.margin.right;
-        this.plot_height = 500 - this.margin.top - this.margin.bottom;
-        this.min = d3.min(this.sample_vals);
-        this.max = d3.max(this.sample_vals);
-        this.svg = this.create_svg();
-        this.enter_data();
-      }
-
-      Box_Plot.prototype.get_samples = function() {
-        var sample;
-        return this.sample_vals = (function() {
-          var _i, _len, _ref, _results;
-          _ref = this.sample_list;
-          _results = [];
-          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-            sample = _ref[_i];
-            if (sample.value !== null) {
-              _results.push(sample.value);
-            }
-          }
-          return _results;
-        }).call(this);
-      };
-
-      Box_Plot.prototype.create_svg = function() {
-        var svg;
-        svg = d3.box().whiskers(this.inter_quartile_range(1.5)).width(this.plot_width).height(this.plot_height).domain([this.min, this.max]);
-        return svg;
-      };
-
-      Box_Plot.prototype.enter_data = function() {
-        return d3.select("#box_plot").selectAll("svg").data([this.sample_vals]).enter().append("svg:svg").attr("class", "box").attr("width", this.plot_width).attr("height", this.plot_height).append("svg:g").call(this.svg);
-      };
-
-      Box_Plot.prototype.inter_quartile_range = function(k) {
-        var _this = this;
-        return function(d, i) {
-          var inter_quartile_range, j, q1, q3;
-          console.log("iqr d:", d);
-          q1 = d.quartiles[0];
-          q3 = d.quartiles[2];
-          inter_quartile_range = (q3 - q1) * k;
-          console.log("iqr:", inter_quartile_range);
-          i = 0;
-          j = d.length;
-          console.log("d[-1]:", d[1]);
-          console.log("q1 - iqr:", q1 - inter_quartile_range);
-          while (d[i] < q1 - inter_quartile_range) {
-            i++;
-          }
-          while (d[j] > q3 + inter_quartile_range) {
-            j--;
-          }
-          console.log("[i, j]", [i, j]);
-          return [i, j];
-        };
-      };
-
-      return Box_Plot;
-
-    })();
+    var block_by_attribute_value, block_by_index, block_outliers, change_stats_value, create_value_dropdown, edit_data_change, export_sample_table_data, get_sample_table_data, hide_no_value, hide_tabs, make_table, on_corr_method_change, populate_sample_attributes_values_dropdown, process_id, reset_samples_table, sample_group_types, sample_lists, show_hide_outliers, stats_mdp_change, update_stat_values;
     sample_lists = js_data.sample_lists;
     sample_group_types = js_data.sample_group_types;
-    new Bar_Chart(sample_lists[0]);
+    $("#update_bar_chart.btn-group").button();
+    root.bar_chart = new Bar_Chart(sample_lists[0]);
     new Box_Plot(sample_lists[0]);
     $('.bar_chart_samples_group').change(function() {
       var all_samples, group;
@@ -546,43 +148,6 @@
       }
       return _results;
     };
-    edit_data_change = function() {
-      var already_seen, checkbox, checked, name, real_value, row, rows, sample_sets, table, tables, _i, _j, _len, _len1;
-      already_seen = {};
-      sample_sets = {
-        samples_primary: new Stats([]),
-        samples_other: new Stats([]),
-        samples_all: new Stats([])
-      };
-      console.log("at beginning:", sample_sets);
-      tables = ['samples_primary', 'samples_other'];
-      for (_i = 0, _len = tables.length; _i < _len; _i++) {
-        table = tables[_i];
-        rows = $("#" + table).find('tr');
-        for (_j = 0, _len1 = rows.length; _j < _len1; _j++) {
-          row = rows[_j];
-          name = $(row).find('.edit_sample_sample_name').html();
-          name = $.trim(name);
-          real_value = $(row).find('.edit_sample_value').val();
-          console.log("real_value:", real_value);
-          checkbox = $(row).find(".edit_sample_checkbox");
-          checked = $(checkbox).attr('checked');
-          if (checked && is_number(real_value) && real_value !== "") {
-            console.log("in the iffy if");
-            real_value = parseFloat(real_value);
-            sample_sets[table].add_value(real_value);
-            console.log("checking name of:", name);
-            if (!(name in already_seen)) {
-              console.log("haven't seen");
-              sample_sets['samples_all'].add_value(real_value);
-              already_seen[name] = true;
-            }
-          }
-        }
-      }
-      console.log("towards end:", sample_sets);
-      return update_stat_values(sample_sets);
-    };
     make_table = function() {
       var header, key, row, row_line, table, the_id, the_rows, value, _i, _len, _ref, _ref1;
       header = "<thead><tr><th>&nbsp;</th>";
@@ -645,6 +210,43 @@
       }
       return processed;
     };
+    edit_data_change = function() {
+      var already_seen, checkbox, checked, name, real_value, row, rows, sample_sets, table, tables, _i, _j, _len, _len1;
+      already_seen = {};
+      sample_sets = {
+        samples_primary: new Stats([]),
+        samples_other: new Stats([]),
+        samples_all: new Stats([])
+      };
+      console.log("at beginning:", sample_sets);
+      tables = ['samples_primary', 'samples_other'];
+      for (_i = 0, _len = tables.length; _i < _len; _i++) {
+        table = tables[_i];
+        rows = $("#" + table).find('tr');
+        for (_j = 0, _len1 = rows.length; _j < _len1; _j++) {
+          row = rows[_j];
+          name = $(row).find('.edit_sample_sample_name').html();
+          name = $.trim(name);
+          real_value = $(row).find('.edit_sample_value').val();
+          console.log("real_value:", real_value);
+          checkbox = $(row).find(".edit_sample_checkbox");
+          checked = $(checkbox).attr('checked');
+          if (checked && is_number(real_value) && real_value !== "") {
+            console.log("in the iffy if");
+            real_value = parseFloat(real_value);
+            sample_sets[table].add_value(real_value);
+            console.log("checking name of:", name);
+            if (!(name in already_seen)) {
+              console.log("haven't seen");
+              sample_sets['samples_all'].add_value(real_value);
+              already_seen[name] = true;
+            }
+          }
+        }
+      }
+      console.log("towards end:", sample_sets);
+      return update_stat_values(sample_sets);
+    };
     show_hide_outliers = function() {
       var label;
       console.log("FOOBAR in beginning of show_hide_outliers");
diff --git a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee
index 3c995441..df9bfc9d 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.coffee
@@ -52,6 +52,33 @@ $ ->
         )
         return false
 
+    $("#interval_mapping_compute").click(() =>
+        console.log("In interval mapping")
+        $("#progress_bar_container").modal()
+        url = "/interval_mapping"
+        form_data = $('#trait_data_form').serialize()
+        console.log("form_data is:", form_data)
+        $.ajax(
+            type: "POST"
+            url: url
+            data: form_data
+            error: (xhr, ajaxOptions, thrownError) =>
+                alert("Sorry, an error occurred")
+                console.log(xhr)
+                clearInterval(this.my_timer)
+                $('#progress_bar_container').modal('hide')
+                $("body").html("We got an error.")        
+            success: (data) =>
+                clearInterval(this.my_timer)
+                $('#progress_bar_container').modal('hide')
+                $("body").html(data)
+        )
+        console.log("settingInterval")
+
+        this.my_timer = setInterval(get_progress, 1000)
+        return false
+    )
+
     $('#suggestive').hide()
 
     $('input[name=display_all]').change(() =>
@@ -92,8 +119,12 @@ $ ->
 
     composite_mapping_fields = ->
         $(".composite_fields").toggle()
+    mapping_method_fields = ->
+        $(".mapping_method_fields").toggle()
+        
 
     $("#use_composite_choice").change(composite_mapping_fields)
+    $("#mapping_method_choice").change(mapping_method_fields)
 
 
     #### Todo: Redo below so its like submit_special and requires no js hardcoding
diff --git a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
index b309b167..b474bd80 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait_mapping_tools.js
@@ -5,7 +5,7 @@
   root = typeof exports !== "undefined" && exports !== null ? exports : this;
 
   $(function() {
-    var composite_mapping_fields, get_progress, submit_special, toggle_enable_disable, update_time_remaining,
+    var composite_mapping_fields, get_progress, mapping_method_fields, submit_special, toggle_enable_disable, update_time_remaining,
       _this = this;
     submit_special = function() {
       var url;
@@ -62,6 +62,34 @@
       });
       return false;
     };
+    $("#interval_mapping_compute").click(function() {
+      var form_data, url;
+      console.log("In interval mapping");
+      $("#progress_bar_container").modal();
+      url = "/interval_mapping";
+      form_data = $('#trait_data_form').serialize();
+      console.log("form_data is:", form_data);
+      $.ajax({
+        type: "POST",
+        url: url,
+        data: form_data,
+        error: function(xhr, ajaxOptions, thrownError) {
+          alert("Sorry, an error occurred");
+          console.log(xhr);
+          clearInterval(_this.my_timer);
+          $('#progress_bar_container').modal('hide');
+          return $("body").html("We got an error.");
+        },
+        success: function(data) {
+          clearInterval(_this.my_timer);
+          $('#progress_bar_container').modal('hide');
+          return $("body").html(data);
+        }
+      });
+      console.log("settingInterval");
+      _this.my_timer = setInterval(get_progress, 1000);
+      return false;
+    });
     $('#suggestive').hide();
     $('input[name=display_all]').change(function() {
       console.log("check");
@@ -101,7 +129,11 @@
     composite_mapping_fields = function() {
       return $(".composite_fields").toggle();
     };
+    mapping_method_fields = function() {
+      return $(".mapping_method_fields").toggle();
+    };
     $("#use_composite_choice").change(composite_mapping_fields);
+    $("#mapping_method_choice").change(mapping_method_fields);
     toggle_enable_disable = function(elem) {
       return $(elem).prop("disabled", !$(elem).prop("disabled"));
     };
diff --git a/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.scientific.js b/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.scientific.js
new file mode 100644
index 00000000..82c55fda
--- /dev/null
+++ b/wqflask/wqflask/static/new/packages/DataTables/js/dataTables.scientific.js
@@ -0,0 +1,13 @@
+jQuery.extend( jQuery.fn.dataTableExt.oSort, {

+    "scientific-pre": function ( a ) {

+        return parseFloat(a);

+    },

+ 

+    "scientific-asc": function ( a, b ) {

+        return ((a < b) ? -1 : ((a > b) ? 1 : 0));

+    },

+ 

+    "scientific-desc": function ( a, b ) {

+        return ((a < b) ? 1 : ((a > b) ? -1 : 0));

+    }

+} );
\ No newline at end of file
diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html
index ea6db646..9b98c955 100644
--- a/wqflask/wqflask/templates/base.html
+++ b/wqflask/wqflask/templates/base.html
@@ -198,7 +198,7 @@
       <!--</div>-->
     </div>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script src="/static/packages/bootstrap/js/bootstrap.min.js"></script>
     <script>
             //http://stackoverflow.com/questions/11521763/bootstrap-scrollspy-not-working
diff --git a/wqflask/wqflask/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html
index dce7d41d..354723d0 100644
--- a/wqflask/wqflask/templates/collections/list.html
+++ b/wqflask/wqflask/templates/collections/list.html
@@ -5,6 +5,7 @@
     {{ header("Your Collections",
         'You have {}.'.format(numify(user_collections|count, "collection", "collections"))) }}
 
+
     <div class="container">
         <div class="page-header">
             <h1>Collections owned by {{ g.user_session.user_ob.full_name }}</h1>
@@ -23,8 +24,8 @@
 
             <tbody>
             {% for uc in user_collections %}
-                <tr>
-                    <td><a href="{{ url_for('view_collection', uc_id=uc.id) }}">{{ uc.name }}</a></td>
+                <tr class="collection_line">
+                    <td><a class="collection_name" href="{{ url_for('view_collection', uc_id=uc.id) }}">{{ uc.name }}</a></td>
                     <td>{{ timeago(uc.created_timestamp.isoformat() + "Z") }}</td>
                     <td>{{ timeago(uc.changed_timestamp.isoformat() + "Z") }}</td>
                     <td>{{ uc.num_members }}</td>
@@ -33,6 +34,10 @@
             </tbody>
         </table>
 
+        {# if "color_by_trait" in params #}
+<!--        <script type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script>-->
+        {# endif #}
+        
         </div>
     </div>
 
@@ -41,10 +46,8 @@
 {% endblock %}
 
 {% block js %}
-
     <script type="text/javascript" src="/static/packages/smart-time-ago/lib/timeago.js"></script>
     <script>
         $('body').timeago();
     </script>
-
 {% endblock %}
diff --git a/wqflask/wqflask/templates/interval_mapping.html b/wqflask/wqflask/templates/interval_mapping.html
new file mode 100644
index 00000000..e4e08388
--- /dev/null
+++ b/wqflask/wqflask/templates/interval_mapping.html
@@ -0,0 +1,107 @@
+{% extends "base.html" %}

+{% block title %}Interval Mapping{% endblock %}

+{% block css %}

+    <link rel="stylesheet" type="text/css" href="/static/new/css/interval_mapping.css" />

+    <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />

+    <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />

+    <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />

+{% endblock %}

+{% block content %} <!-- Start of body -->

+

+    {{ header("Mapping",

+        '{}: {}'.format(this_trait.name, this_trait.description_fmt)) }}

+

+    <div class="container">

+        <div>

+            <h2>

+                Whole Genome Mapping

+            </h2>

+        </div>

+        <div id="interval_map" class="interval_map">

+            

+        </div>

+        <div>

+            <h2>

+                Results

+            </h2>

+        </div>

+        <table cellpadding="0" cellspacing="0" border="0" id="qtl_results" class="table table-hover table-striped table-bordered">

+            <thead>

+                <tr>

+                    <td>Index</td>

+                    <td>LRS Score</td>

+                    {% if method == "qtl_reaper" %}

+                    <td>Additive Effect</td>

+                    {% endif %}

+                    <td>Chr</td>

+                    <td>Mb</td>

+                    <td>Locus</td>

+                </tr>

+            </thead>

+            <tbody>

+                {% for marker in qtl_results %}

+                <tr>

+                    <td>{{ loop.index }}</td>

+                    <td>{{ marker.lrs_value|float }}</td>

+                    {% if method == "qtl_reaper" %}

+                    <td>{{ marker.additive|float }}</td>

+                    {% endif %}

+                    <td>{{ marker.chr|int }}</td>

+                    <td>{{ marker.Mb|float  }}</td>

+                    <td>{{ marker.name }}</td>

+                </tr>

+                {% endfor %}

+            </tbody>

+        </table>

+    

+    </div>

+

+    <!-- End of body -->

+

+{% endblock %}

+

+{% block js %}  

+    <script>

+        js_data = {{ js_data | safe }}

+    </script>

+

+    <!--[if lt IE 9]>

+<!--        <script language="javascript" type="text/javascript" src="/static/packages/jqplot/excanvas.js"></script>-->

+    <![endif]-->

+    <script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

+    <script language="javascript" type="text/javascript" src="/static/new/javascript/interval_mapping.js"></script>

+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.js"></script>

+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script>

+    <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/dataTables.scientific.js"></script>

+    <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script>

+    <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script>

+    <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>

+

+    

+    <script type="text/javascript" charset="utf-8">

+        $(document).ready( function () {

+            console.time("Creating table");

+            $('#qtl_results').dataTable( {

+                //"sDom": "<<'span3'l><'span3'T><'span4'f>'row-fluid'r>t<'row-fluid'<'span6'i><'span6'p>>",

+                "sDom": "lTftipr",

+                "oTableTools": {

+                    "aButtons": [

+                        "copy",

+                        "print",

+                        {

+                            "sExtends":    "collection",

+                            "sButtonText": 'Save <span class="caret" />',

+                            "aButtons":    [ "csv", "xls", "pdf" ]

+                        }

+                    ],

+                    "sSwfPath": "/static/packages/TableTools/media/swf/copy_csv_xls_pdf.swf"

+                },

+                "iDisplayLength": 50,

+                "bLengthChange": true,

+                "bDeferRender": true,

+                "bSortClasses": false

+            } );

+            console.timeEnd("Creating table");

+        });

+    </script>

+{% endblock %}
\ No newline at end of file
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index 8a19e07b..86891bb0 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -2,6 +2,7 @@
 {% block title %}Trait Data and Analysis{% endblock %}
 {% block css %}
     <link rel="stylesheet" type="text/css" href="/static/new/css/marker_regression.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/css/interval_mapping.css" />
     <link rel="stylesheet" type="text/css" href="/static/new/css/bar_chart.css" />
     <link rel="stylesheet" type="text/css" href="/static/new/css/box_plot.css" />
     <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
@@ -55,8 +56,11 @@
 
     <script type="text/javascript" src="/static/new/javascript/stats.js"></script>
     <script type="text/javascript" src="/static/new/javascript/box.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script>    
     <script type="text/javascript" src="/static/new/javascript/bar_chart.js"></script>
-    <script type="text/javascript" src="/static/new/javascript/show_trait.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/box_plot.js"></script>
+    
     <script type="text/javascript" src="/static/new/javascript/show_trait_mapping_tools.js"></script>
+    <script type="text/javascript" src="/static/new/javascript/show_trait.js"></script>
     <script type="text/javascript" src="/static/new/javascript/validation.js"></script>
 {% endblock %}
diff --git a/wqflask/wqflask/templates/show_trait_mapping_tools.html b/wqflask/wqflask/templates/show_trait_mapping_tools.html
index c2d5211f..58ee8982 100644
--- a/wqflask/wqflask/templates/show_trait_mapping_tools.html
+++ b/wqflask/wqflask/templates/show_trait_mapping_tools.html
@@ -17,9 +17,20 @@
             <div class="tab-content">
                 <div class="tab-pane active" id="interval_mapping">
                     <div class="control-group">
+                        <label for="mapping_method" class="control-label">Mapping Method</label>
+                        <div class="controls" id="mapping_method_choice">
+                            <select name="mapping_method">
+                                <option value="qtl_reaper">H&K Regression</option>
+                                <option value="pylmm">Linear Mixed</option>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="control-group">
                         <label for="chromosome" class="control-label">Chromosome</label>
                         <div class="controls">
                             <select name="chromosome">
+                                <option value="-1">All</option>
                                 {% for name, value in dataset.species.chromosomes.chromosomes.items() %}
                                 <option value="{{ value }}">{{ name }}</option>
                                 {% endfor %}
@@ -27,14 +38,14 @@
                         </div>
                     </div>
     
-                    <div class="control-group">
+                    <div class="control-group mapping_method_fields">
                         <label for="mapping_permutations" class="control-label">Permutations (n)</label>
                         <div class="controls">
-                            <input name="num_perm1" value="2000" type="text" />
+                            <input name="num_permutations" value="2000" type="text" />
                         </div>
                     </div>
     
-                    <div class="control-group">
+                    <div class="control-group mapping_method_fields">
                         <label for="mapping_bootstraps" class="control-label"
                                title="Bootstrapping Resamples">Bootstrap (n)</label>
                         <div class="controls">
@@ -43,7 +54,7 @@
                     </div>
 
 
-                    <div class="control-group">
+                    <div class="control-group mapping_method_fields">
                         <label class="control-label"><b>Composite Mapping</b></label>
                         <div class="controls" id="use_composite_choice">                      
                             <label class="radio inline">
@@ -85,7 +96,8 @@
 
                     <div class="control-group">
                         <div class="controls">
-                            <button class="btn btn-inverse submit_special"
+                            <button id="interval_mapping_compute"
+                                    class="btn btn-inverse submit_special"
                                     data-url="/interval_mapping"
                                     title="Compute Interval Mapping">
                                 <i class="icon-ok-circle icon-white"></i> Compute
@@ -116,12 +128,12 @@
                         </div>
                     </div>
                     
-                    <div class="control-group">
+<!--                    <div class="control-group">
                         <label for="marker_reg_permutations" class="control-label">Permutations (n)</label>
                         <div class="controls">
                             <input name="num_perm" value="2000" type="text" />
                         </div>
-                    </div>                    
+                    </div>           -->         
                     
                     <div class="control-group">
                         <div class="controls">
diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
index 6385089b..6d6b1d24 100644
--- a/wqflask/wqflask/templates/show_trait_statistics_new.html
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -30,9 +30,23 @@
                             {% endfor %}
                         </select>
                     </div>
-                    {% endif %}
-                    <button type="button" id="update_bar_chart">Sort By Value</button>
-                    <button type="button" id="color_by_trait">Color by Trait</button>
+                {% endif %}
+                    <div id="update_bar_chart" class="btn-group">
+                      <button type="button" class="btn btn-default sort_by_name" value="name">
+                        <i class="icon-resize-horizontal"></i> Sort By Name
+                      </button>
+                      <button type="button" class="btn btn-default sort_by_value" value="value">
+                        <i class="icon-signal"></i> Sort By Value
+                      </button>
+                    </div>
+<!--                    <button type="button" class="btn" id="update_bar_chart">
+                        <i class="icon-resize-vertical"></i> Sort By Value
+                    </button>-->
+                    <div class="btn-group">
+                        <button type="button" class="btn" id="color_by_trait">
+                            <i class="icon-tint"></i> Color by Trait
+                        </button>
+                    </div>
                     <div id="bar_chart_container">
                         <div id="bar_chart"></div>
                     </div>
@@ -56,4 +70,5 @@
     <div id="collections_holder_wrapper" style="display:none;">
         <div id="collections_holder"></div>
     </div>
+   
 </div>
\ No newline at end of file
diff --git a/wqflask/wqflask/user_manager.py b/wqflask/wqflask/user_manager.py
index 768415b5..1d0d9846 100644
--- a/wqflask/wqflask/user_manager.py
+++ b/wqflask/wqflask/user_manager.py
@@ -49,7 +49,8 @@ from utility import Bunch, Struct
 
 from base.data_set import create_datasets_list
 
-
+THREE_DAYS = 60 * 60 * 24 * 3
+#THREE_DAYS = 45
 
 def timestamp():
     return datetime.datetime.utcnow().isoformat()
@@ -74,6 +75,27 @@ class UserSession(object):
             print("self.redis_key is:", self.redis_key)
             self.session_id = session_id
             self.record = Redis.hgetall(self.redis_key)
+
+
+            if not self.record:
+                # This will occur, for example, when the browser has been left open over a long
+                # weekend and the site hasn't been visited by the user
+                self.logged_in = False
+                
+                ########### Grrr...this won't work because of the way flask handles cookies
+                # Delete the cookie
+                #response = make_response(redirect(url_for('login')))
+                #response.set_cookie(self.cookie_name, '', expires=0)
+                #flash(
+                #   "Due to inactivity your session has expired. If you'd like please login again.")
+                #return response
+                return 
+                
+            if Redis.ttl(self.redis_key) < THREE_DAYS:
+                # (Almost) everytime the user does something we extend the session_id in Redis...
+                print("Extending ttl...")
+                Redis.expire(self.redis_key, THREE_DAYS)
+            
             print("record is:", self.record)
             self.logged_in = True
 
@@ -225,8 +247,8 @@ class VerificationEmail(object):
                           )
 
         Redis.set(key, data)
-        two_days = 60 * 60 * 24 * 2
-        Redis.expire(key, two_days)
+        #two_days = 60 * 60 * 24 * 2
+        Redis.expire(key, THREE_DAYS)
         to = user.email_address
         subject = self.subject
         body = render_template(self.template_name,
@@ -415,7 +437,7 @@ class LoginUser(object):
         if self.remember_me:
             expire_time = self.remember_time
         else:
-            expire_time = 60 * 60 * 24 * 2 # two days
+            expire_time = THREE_DAYS
         Redis.expire(key, expire_time)
         db_session.add(login_rec)
         db_session.commit()
diff --git a/wqflask/wqflask/views.py b/wqflask/wqflask/views.py
index b2f08ca0..828199c5 100644
--- a/wqflask/wqflask/views.py
+++ b/wqflask/wqflask/views.py
@@ -32,7 +32,7 @@ from base.data_set import create_datasets_list
 from wqflask.show_trait import show_trait
 from wqflask.show_trait import export_trait_data
 from wqflask.marker_regression import marker_regression
-#from wqflask.interval_mapping import interval_mapping
+from wqflask.interval_mapping import interval_mapping
 from wqflask.correlation import show_corr_results
 from wqflask.correlation import corr_scatter_plot
 from utility import temp_data
@@ -213,7 +213,7 @@ def marker_regression_page():
         if key in wanted or key.startswith(('value:')):
             start_vars[key] = value
 
-    version = "v14"
+    version = "v1"
     key = "marker_regression:{}:".format(version) + json.dumps(start_vars, sort_keys=True)
     print("key is:", pf(key))
     with Bench("Loading cache"):
@@ -237,8 +237,10 @@ def marker_regression_page():
 
         result = template_vars.__dict__
 
-        #for item in template_vars.__dict__.keys():
-        #    print("  ---**--- {}: {}".format(type(template_vars.__dict__[item]), item))
+        print("DATASET:", pf(result['dataset']))
+
+        for item in template_vars.__dict__.keys():
+            print("  ---**--- {}: {}".format(type(template_vars.__dict__[item]), item))
 
         #causeerror
         Redis.set(key, pickle.dumps(result, pickle.HIGHEST_PROTOCOL))
@@ -256,7 +258,12 @@ def interval_mapping_page():
     wanted = (
         'trait_id',
         'dataset',
-        'suggestive'
+        'mapping_method',
+        'chromosome',
+        'num_permutations',
+        'do_bootstraps',
+        'default_control_locus',
+        'control_locus'
     )
 
     start_vars = {}
@@ -264,7 +271,7 @@ def interval_mapping_page():
         if key in wanted or key.startswith(('value:')):
             start_vars[key] = value
 
-    version = "v1"
+    version = "v7"
     key = "interval_mapping:{}:".format(version) + json.dumps(start_vars, sort_keys=True)
     print("key is:", pf(key))
     with Bench("Loading cache"):
@@ -284,6 +291,9 @@ def interval_mapping_page():
 
         result = template_vars.__dict__
         
+        for item in template_vars.__dict__.keys():
+            print("  ---**--- {}: {}".format(type(template_vars.__dict__[item]), item))
+        
         #causeerror
         Redis.set(key, pickle.dumps(result, pickle.HIGHEST_PROTOCOL))
         Redis.expire(key, 60*60)
@@ -308,10 +318,10 @@ def corr_scatter_plot_page():
                                        indent="   ")
     return render_template("corr_scatter_plot.html", **template_vars.__dict__)
 
-@app.route("/int_mapping", methods=('POST',))
-def interval_mapping_page():
-    template_vars = interval_mapping.IntervalMapping(request.args)
-    return render_template("interval_mapping.html", **template_vars.__dict__)
+#@app.route("/int_mapping", methods=('POST',))
+#def interval_mapping_page():
+#    template_vars = interval_mapping.IntervalMapping(request.args)
+#    return render_template("interval_mapping.html", **template_vars.__dict__)
 
 # Todo: Can we simplify this? -Sam
 def sharing_info_page():