Finished coffeescript that handles the home page dataset selection dropdowns

7 files changed, 516 insertions, 771 deletions

diff --git a/wqflask/base/webqtlCaseData.py b/wqflask/base/webqtlCaseData.py
index 6352a083..42763aed 100755
--- a/wqflask/base/webqtlCaseData.py
+++ b/wqflask/base/webqtlCaseData.py
@@ -27,9 +27,7 @@
 print("Mr. Mojo Risin 2")
 
 class webqtlCaseData(object):
-    """one case data in one trait
-    
-    """
+    """one case data in one trait"""
 
     def __init__(self, name, value=None, variance=None, num_cases=None):
         self.name = name
diff --git a/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json b/wqflask/wqflask/static/new/javascript/dataset_menu_structure
index d25d3cf5..d25d3cf5 100644
--- a/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json
+++ b/wqflask/wqflask/static/new/javascript/dataset_menu_structure
diff --git a/wqflask/wqflask/static/new/javascript/dataset_select_menu.coffee b/wqflask/wqflask/static/new/javascript/dataset_select_menu.coffee
index e2f11845..c2a9b11d 100644
--- a/wqflask/wqflask/static/new/javascript/dataset_select_menu.coffee
+++ b/wqflask/wqflask/static/new/javascript/dataset_select_menu.coffee
@@ -1,393 +1,449 @@
-# 
-#*  function: based on different browser use, will have different initial actions; 
-#*  Once the index.html page is loaded, this function will be called
-#
-
 $ ->
-    sArr = window.sArr   # species
-    gArr = window.gArr   # group
-    tArr = window.tArr
-    dArr = window.dArr
-    lArr = window.lArr
-    
-    console.log("sArr is now [jersey]:", sArr)
-    console.log("gArr is now [jersey]:", gArr)
-    
-    initialDatasetSelection = ->
-        defaultSpecies = getDefaultValue("species")
-        defaultSet = getDefaultValue("cross")
-        defaultType = getDefaultValue("tissue")
-        defaultDB = getDefaultValue("database")
-        if navigator.userAgent.indexOf("MSIE") >= 0
-            sOptions = fillOptionsForIE(null, defaultSpecies)
-            menu0 = "<SELECT NAME='species' ID='species' SIZE='1' onChange='fillOptions(\"species\");'>" + sOptions + "</Select>"
-            document.getElementById("menu0").innerHTML = menu0
-            gOptions = fillOptionsForIE("species", defaultSet)
-            menu1 = "<Select NAME='cross' size=1 id='cross' onchange='fillOptions(\"cross\");'>" + gOptions + "</Select><input type=\"button\" class=\"button\" value=\"Info\" onCLick=\"javascript:crossinfo();\">"
-            document.getElementById("menu1").innerHTML = menu1
-            tOptions = fillOptionsForIE("cross", defaultType)
-            menu2 = "<Select NAME='tissue' size=1 id='tissue' onchange='fillOptions(\"tissue\");'>" + tOptions + "</Select>"
-            document.getElementById("menu2").innerHTML = menu2
-            dOptions = fillOptionsForIE("tissue", defaultDB)
-            menu3 = "<Select NAME='database' size=1 id='database'>" + dOptions + "</Select><input type=\"button\" class=\"button\" value=\"Info\" onCLick=\"javascript:databaseinfo();\">"
-            document.getElementById("menu3").innerHTML = menu3
-        else
-            fillOptions null
-        searchtip()
-        
-    
-    # 
-    #*  input: selectObjId (designated select menu, such as species, cross, etc... )
-    #*  defaultValue (default Value of species, cross,tissue or database)
-    #*  function: special for IE browser,setting options value for select menu dynamically based on linkage array(lArr), 
-    #*  output: options string
-    #
-    fillOptionsForIE = (selectObjId, defaultValue) ->
-        options = ""
-        unless selectObjId?
-            len = sArr.length
-            i = 1
-    
-            while i < len
-                
-                # setting Species' option			
-                if sArr[i].val is defaultValue
-                    options = options + "<option selected=\"selected\" value='" + sArr[i].val + "'>" + sArr[i].txt + "</option>"
-                else
-                    options = options + "<option value='" + sArr[i].val + "'>" + sArr[i].txt + "</option>"
-                i++
-        else if selectObjId is "species"
-            speciesObj = document.getElementById("species")
-            len = lArr.length
-            arr = []
-            idx = 0
-            i = 1
-    
-            while i < len
-                
-                #get group(cross) info from lArr
-                arr[idx++] = lArr[i][1]  if lArr[i][0] is (getIndexByValue("species", speciesObj.value)).toString() and not Contains(arr, lArr[i][1])
-                i++
-            idx = 0
-            len = arr.length
-            removeOptions "cross"
-            i = 0
-    
-            while i < len
-                
-                # setting Group's option
-                if gArr[arr[i]].val is defaultValue
-                    options = options + "<option selected=\"selected\" value='" + gArr[arr[i]].val + "'>" + gArr[arr[i]].txt + "</option>"
-                else
-                    options = options + "<option value='" + gArr[arr[i]].val + "'>" + gArr[arr[i]].txt + "</option>"
-                i++
-        else if selectObjId is "cross"
-            speciesObj = document.getElementById("species")
-            groupObj = document.getElementById("cross")
-            len = lArr.length
-            arr = []
-            idx = 0
-            i = 1
-    
-            while i < len
-                
-                #get type(tissue) info from lArr
-                arr[idx++] = lArr[i][2]  if lArr[i][0] is (getIndexByValue("species", speciesObj.value)).toString() and lArr[i][1] is (getIndexByValue("cross", groupObj.value)).toString() and not Contains(arr, lArr[i][2])
-                i++
-            idx = 0
-            len = arr.length
-            removeOptions "tissue"
-            i = 0
-    
-            while i < len
-                
-                # setting Type's option
-                if tArr[arr[i]].val is defaultValue
-                    options = options + "<option selected=\"selected\" value='" + tArr[arr[i]].val + "'>" + tArr[arr[i]].txt + "</option>"
-                else
-                    options = options + "<option value='" + tArr[arr[i]].val + "'>" + tArr[arr[i]].txt + "</option>"
-                i++
-        else if selectObjId is "tissue"
-            speciesObj = document.getElementById("species")
-            groupObj = document.getElementById("cross")
-            typeObj = document.getElementById("tissue")
-            len = lArr.length
-            arr = []
-            idx = 0
-            i = 1
-    
-            while i < len
-                
-                #get dataset(database) info from lArr
-                arr[idx++] = lArr[i][3]  if lArr[i][0] is (getIndexByValue("species", speciesObj.value)).toString() and lArr[i][1] is (getIndexByValue("cross", groupObj.value)).toString() and lArr[i][2] is (getIndexByValue("tissue", typeObj.value)).toString() and not Contains(arr, lArr[i][3])
-                i++
-            idx = 0
-            len = arr.length
-            removeOptions "database"
-            i = 0
-    
-            while i < len
-                
-                # setting Database's option			
-                if dArr[arr[i]].val is defaultValue
-                    options = options + "<option SELECTED value='" + dArr[arr[i]].val + "'>" + dArr[arr[i]].txt + "</option>"
-                else
-                    options = options + "<option value='" + dArr[arr[i]].val + "'>" + dArr[arr[i]].txt + "</option>"
-                i++
-        options
-    
-    # 
-    #*  input: selectObjId (designated select menu, such as species, cross, etc... )
-    #*  function: setting options value for select menu dynamically based on linkage array(lArr)
-    #*  output: null
-    #
-    fillOptions = (selectObjId) ->
-        console.log("[vacuum] selectObjId:", selectObjId)
-        unless selectObjId?
-            speciesObj = document.getElementById("species")
-            console.log("speciesObj:", speciesObj)
-            len = sArr.length
-            i = 1
-    
-            while i < len
-                
-                # setting Species' option
-                speciesObj.options[i - 1] = new Option(sArr[i].txt, sArr[i].val)
-                console.log("speciesObj.options:", speciesObj.options[i - 1])
-                i++
-            updateChoice "species"
-        else if selectObjId is "species"
-            speciesObj = document.getElementById("species")
-            console.log("speciesObj:", speciesObj)
-            groupObj = document.getElementById("cross")
-            console.log("groupObj:", groupObj)
-            len = lArr.length
-            arr = []
-            idx = 0
-            i = 1
 
-            while i < len
-                #get group(cross) info from lArr
-                index_value = getIndexByValue("species", speciesObj.value).toString()
-                if lArr[i][0] is (index_value and not Contains(arr, lArr[i][1]))
-                    arr[idx++] = lArr[i][1] 
-                i++
-            idx = 0
-            len = arr.length
-            removeOptions "cross"
-            i = 0
-    
-            while i < len
-                # setting Group's option
-                groupObj.options[idx++] = new Option(gArr[arr[i]].txt, gArr[arr[i]].val)
-                i++
-            updateChoice "cross"
-        else if selectObjId is "cross"
-            speciesObj = document.getElementById("species")
-            groupObj = document.getElementById("cross")
-            typeObj = document.getElementById("tissue")
-            len = lArr.length
-            arr = []
-            idx = 0
-            i = 1
-    
-            while i < len
-                
-                #get type(tissue) info from lArr
-                arr[idx++] = lArr[i][2]  if lArr[i][0] is (getIndexByValue("species", speciesObj.value)).toString() and lArr[i][1] is (getIndexByValue("cross", groupObj.value)).toString() and not Contains(arr, lArr[i][2])
-                i++
-            idx = 0
-            len = arr.length
-            removeOptions "tissue"
-            i = 0
-    
-            while i < len
-                
-                # setting Type's option
-                typeObj.options[idx++] = new Option(tArr[arr[i]].txt, tArr[arr[i]].val)
-                i++
-            updateChoice "tissue"
-        else if selectObjId is "tissue"
-            speciesObj = document.getElementById("species")
-            groupObj = document.getElementById("cross")
-            typeObj = document.getElementById("tissue")
-            databaseObj = document.getElementById("database")
-            len = lArr.length
-            arr = []
-            idx = 0
-            i = 1
-    
-            while i < len
-                
-                #get dataset(database) info from lArr
-                arr[idx++] = lArr[i][3]  if lArr[i][0] is (getIndexByValue("species", speciesObj.value)).toString() and lArr[i][1] is (getIndexByValue("cross", groupObj.value)).toString() and lArr[i][2] is (getIndexByValue("tissue", typeObj.value)).toString() and not Contains(arr, lArr[i][3])
-                i++
-            idx = 0
-            len = arr.length
-            removeOptions "database"
-            i = 0
-    
-            while i < len
-                
-                # setting Database's option
-                databaseObj.options[idx++] = new Option(dArr[arr[i]].txt, dArr[arr[i]].val)
-                i++
-            updateChoice "database"
-    
-    # 
-    #*  input: arr (targeted array); obj (targeted value)
-    #*  function: check whether targeted array contains targeted value or not
-    #*  output: return true, if array contains targeted value, otherwise return false
-    #
-    Contains = (arr, obj) ->
-        i = arr.length
-        return true  if arr[i] is obj  while i--
-        false
-    
-    # 
-    #* input: selectObj (designated select menu, such as species, cross, etc... )
-    #* function: clear designated select menu's option
-    #* output: null
-    #
-    removeOptions = (selectObj) ->
-        selectObj = document.getElementById(selectObj)  unless typeof selectObj is "object"
-        len = selectObj.options.length
-        i = 0
-    
-        while i < len
-            
-            # clear current selection       
-            selectObj.options[0] = null
-            i++
-    
-    # 
-    #*  input: selectObjId (designated select menu, such as species, cross, etc... )
-    #*         Value: target value
-    #*  function: retrieve Index info of target value in designated array
-    #*  output: index info
-    #
-    getIndexByValue = (selectObjId, val) ->
-        if selectObjId is "species"
-            i = 1
-    
-            while i < sArr.length
-                return i  if sArr[i].val is val
-                i++
-        else if selectObjId is "cross"
-            i = 1
-    
-            while i < gArr.length
-                return i  if gArr[i].val is val
-                i++
-        else if selectObjId is "tissue"
-            i = 1
-    
-            while i < tArr.length
-                return i  if tArr[i].val is val
-                i++
-        else
-            return
-    
-    # 
-    #*  input: objId (designated select menu, such as species, cross, etc... )
-    #*  		  val(targeted value)
-    #*  function: setting option's selected status for designated select menu based on target value, also update the following select menu in the main search page 
-    #*  output: return true if selected status has been set, otherwise return false.
-    #
-    setChoice = (objId, val) ->
-        console.log("objId:", objId)
-        console.log("val:", val)
-        Obj = document.getElementById(objId)
-        console.log("Obj:", Obj)
-        idx = -1
-        i = 0
-        while i < Obj.options.length
-            if Obj.options[i].value is val
-                idx = i
-                break
-            i++
-        if idx >= 0
+    process_json = (data) ->
+        window.jdata = data
+        populate_species()
+
+    $.ajax '/static/new/javascript/dataset_menu_structure',
+        dataType: 'json'
+        success: process_json
+
+    populate_species = ->
+        species_list = @jdata.species
+        redo_dropdown($('#species'), species_list)
+        populate_groups()
+
+    populate_groups = ->
+        species = $('#species').val()
+        group_list = @jdata.groups[species]
+        redo_dropdown($('#group'), group_list)
+        populate_types()
+        
+    populate_types = ->
+        species = $('#species').val()
+        group = $('#group').val()
+        type_list = @jdata.types[species][group]
+        redo_dropdown($('#type'), type_list)
+        populate_datasets()
+        
+    populate_datasets = ->
+        species = $('#species').val()
+        group = $('#group').val()
+        type = $('#type').val()
+        dataset_list = @jdata.datasets[species][group][type]
+        redo_dropdown($('#dataset'), dataset_list)
 
-            #setting option's selected status 
-            Obj.options[idx].selected = true
-            
-            #update the following select menu 
-            fillOptions objId
-        else
-            Obj.options[0].selected = true
-            fillOptions objId
-    
-    # setting option's selected status based on default setting or cookie setting for Species, Group, Type and Database select menu in the main search page http://www.genenetwork.org/
-    updateChoice = (selectObjId) ->
-        if selectObjId is "species"
-            defaultSpecies = getDefaultValue("species")
-            
-            #setting option's selected status
-            setChoice "species", defaultSpecies
-        else if selectObjId is "cross"
-            defaultSet = getDefaultValue("cross")
-            
-            #setting option's selected status
-            setChoice "cross", defaultSet
-        else if selectObjId is "tissue"
-            defaultType = getDefaultValue("tissue")
-            
-            #setting option's selected status
-            setChoice "tissue", defaultType
-        else if selectObjId is "database"
-            defaultDB = getDefaultValue("database")
-            
-            #setting option's selected status
-            setChoice "database", defaultDB
-    
-    #get default value;if cookie exists, then use cookie value, otherwise use default value
-    getDefaultValue = (selectObjId) ->
+    redo_dropdown = (dropdown, items) ->
+        dropdown.empty()
+        for item in items
+            dropdown.append($("<option />").val(item[0]).text(item[1]))
         
-        #define default value
-        defaultSpecies = "mouse"
-        defaultSet = "BXD"
-        defaultType = "Hippocampus"
-        defaultDB = "HC_M2_0606_P"
-        if selectObjId is "species"
-            
-            #if cookie exists, then use cookie value, otherwise use default value
-            cookieSpecies = getCookie("defaultSpecies")
-            defaultSpecies = cookieSpecies  if cookieSpecies
-            defaultSpecies
-        else if selectObjId is "cross"
-            cookieSet = getCookie("defaultSet")
-            defaultSet = cookieSet  if cookieSet
-            defaultSet
-        else if selectObjId is "tissue"
-            cookieType = getCookie("defaultType")
-            defaultType = cookieType  if cookieType
-            defaultType
-        else if selectObjId is "database"
-            cookieDB = getCookie("defaultDB")
-            defaultDB = cookieDB  if cookieDB
-            defaultDB
-    
-    #setting default value into cookies for the dropdown menus: Species,Group, Type, and Database 
-    setDefault = (thisform) ->
-        setCookie "cookieTest", "cookieTest", 1
-        cookieTest = getCookie("cookieTest")
-        delCookie "cookieTest"
-        if cookieTest
-            defaultSpecies = thisform.species.value
-            setCookie "defaultSpecies", defaultSpecies, 10
-            defaultSet = thisform.cross.value
-            setCookie "defaultSet", defaultSet, 10
-            defaultType = thisform.tissue.value
-            setCookie "defaultType", defaultType, 10
-            defaultDB = thisform.database.value
-            setCookie "defaultDB", defaultDB, 10
-            updateChoice "species"
-            updateChoice "cross"
-            updateChoice "tissue"
-            updateChoice "database"
-            alert "The current settings are now your default"
-        else
-            alert "You need to enable Cookies in your browser."
-            
-    # run it
-    initialDatasetSelection()
\ No newline at end of file
+    $('#species').change =>
+        populate_groups()
+
+    $('#group').change =>
+        populate_types()
+
+    $('#type').change =>
+        populate_datasets()
+
+
+## 
+##*  function: based on different browser use, will have different initial actions; 
+##*  Once the index.html page is loaded, this function will be called
+##
+#
+#$ ->
+#    
+#    fillSpecies = ->
+#        
+#    
+#    
+#    
+#    sArr =window.sArr   # species
+#    gArr = window.gArr   # group
+#    tArr = window.tArr
+#    dArr = window.dArr
+#    lArr = window.lArr
+#    
+#    console.log("sArr is now [jersey]:", sArr)
+#    console.log("gArr is now [jersey]:", gArr)
+#    
+#    initialDatasetSelection = ->
+#        defaultSpecies = getDefaultValue("species")
+#        defaultSet = getDefaultValue("cross")
+#        defaultType = getDefaultValue("tissue")
+#        defaultDB = getDefaultValue("database")
+#        if navigator.userAgent.indexOf("MSIE") >= 0
+#            sOptions = fillOptionsForIE(null, defaultSpecies)
+#            menu0 = "<SELECT NAME='species' ID='species' SIZE='1' onChange='fillOptions(\"species\");'>" + sOptions + "</Select>"
+#            document.getElementById("menu0").innerHTML = menu0
+#            gOptions = fillOptionsForIE("species", defaultSet)
+#            menu1 = "<Select NAME='cross' size=1 id='cross' onchange='fillOptions(\"cross\");'>" + gOptions + "</Select><input type=\"button\" class=\"button\" value=\"Info\" onCLick=\"javascript:crossinfo();\">"
+#            document.getElementById("menu1").innerHTML = menu1
+#            tOptions = fillOptionsForIE("cross", defaultType)
+#            menu2 = "<Select NAME='tissue' size=1 id='tissue' onchange='fillOptions(\"tissue\");'>" + tOptions + "</Select>"
+#            document.getElementById("menu2").innerHTML = menu2
+#            dOptions = fillOptionsForIE("tissue", defaultDB)
+#            menu3 = "<Select NAME='database' size=1 id='database'>" + dOptions + "</Select><input type=\"button\" class=\"button\" value=\"Info\" onCLick=\"javascript:databaseinfo();\">"
+#            document.getElementById("menu3").innerHTML = menu3
+#        else
+#            fillOptions null
+#        searchtip()
+#        
+#    
+#    # 
+#    #*  input: selectObjId (designated select menu, such as species, cross, etc... )
+#    #*  defaultValue (default Value of species, cross,tissue or database)
+#    #*  function: special for IE browser,setting options value for select menu dynamically based on linkage array(lArr), 
+#    #*  output: options string
+#    #
+#    fillOptionsForIE = (selectObjId, defaultValue) ->
+#        options = ""
+#        unless selectObjId?
+#            len = sArr.length
+#            i = 1
+#    
+#            while i < len
+#                
+#                # setting Species' option			
+#                if sArr[i].val is defaultValue
+#                    options = options + "<option selected=\"selected\" value='" + sArr[i].val + "'>" + sArr[i].txt + "</option>"
+#                else
+#                    options = options + "<option value='" + sArr[i].val + "'>" + sArr[i].txt + "</option>"
+#                i++
+#        else if selectObjId is "species"
+#            speciesObj = document.getElementById("species")
+#            len = lArr.length
+#            arr = []
+#            idx = 0
+#            i = 1
+#    
+#            while i < len
+#                
+#                #get group(cross) info from lArr
+#                arr[idx++] = lArr[i][1]  if lArr[i][0] is (getIndexByValue("species", speciesObj.value)).toString() and not Contains(arr, lArr[i][1])
+#                i++
+#            idx = 0
+#            len = arr.length
+#            removeOptions "cross"
+#            i = 0
+#    
+#            while i < len
+#                
+#                # setting Group's option
+#                if gArr[arr[i]].val is defaultValue
+#                    options = options + "<option selected=\"selected\" value='" + gArr[arr[i]].val + "'>" + gArr[arr[i]].txt + "</option>"
+#                else
+#                    options = options + "<option value='" + gArr[arr[i]].val + "'>" + gArr[arr[i]].txt + "</option>"
+#                i++
+#        else if selectObjId is "cross"
+#            speciesObj = document.getElementById("species")
+#            groupObj = document.getElementById("cross")
+#            len = lArr.length
+#            arr = []
+#            idx = 0
+#            i = 1
+#    
+#            while i < len
+#                
+#                #get type(tissue) info from lArr
+#                arr[idx++] = lArr[i][2]  if lArr[i][0] is (getIndexByValue("species", speciesObj.value)).toString() and lArr[i][1] is (getIndexByValue("cross", groupObj.value)).toString() and not Contains(arr, lArr[i][2])
+#                i++
+#            idx = 0
+#            len = arr.length
+#            removeOptions "tissue"
+#            i = 0
+#    
+#            while i < len
+#                
+#                # setting Type's option
+#                if tArr[arr[i]].val is defaultValue
+#                    options = options + "<option selected=\"selected\" value='" + tArr[arr[i]].val + "'>" + tArr[arr[i]].txt + "</option>"
+#                else
+#                    options = options + "<option value='" + tArr[arr[i]].val + "'>" + tArr[arr[i]].txt + "</option>"
+#                i++
+#        else if selectObjId is "tissue"
+#            speciesObj = document.getElementById("species")
+#            groupObj = document.getElementById("cross")
+#            typeObj = document.getElementById("tissue")
+#            len = lArr.length
+#            arr = []
+#            idx = 0
+#            i = 1
+#    
+#            while i < len
+#                
+#                #get dataset(database) info from lArr
+#                arr[idx++] = lArr[i][3]  if lArr[i][0] is (getIndexByValue("species", speciesObj.value)).toString() and lArr[i][1] is (getIndexByValue("cross", groupObj.value)).toString() and lArr[i][2] is (getIndexByValue("tissue", typeObj.value)).toString() and not Contains(arr, lArr[i][3])
+#                i++
+#            idx = 0
+#            len = arr.length
+#            removeOptions "database"
+#            i = 0
+#    
+#            while i < len
+#                
+#                # setting Database's option			
+#                if dArr[arr[i]].val is defaultValue
+#                    options = options + "<option SELECTED value='" + dArr[arr[i]].val + "'>" + dArr[arr[i]].txt + "</option>"
+#                else
+#                    options = options + "<option value='" + dArr[arr[i]].val + "'>" + dArr[arr[i]].txt + "</option>"
+#                i++
+#        options
+#    
+#    # 
+#    #*  input: selectObjId (designated select menu, such as species, cross, etc... )
+#    #*  function: setting options value for select menu dynamically based on linkage array(lArr)
+#    #*  output: null
+#    #
+#    fillOptions = (selectObjId) ->
+#        console.log("[vacuum] selectObjId:", selectObjId)
+#        unless selectObjId?
+#            speciesObj = document.getElementById("species")
+#            console.log("speciesObj:", speciesObj)
+#            len = sArr.length
+#            i = 1
+#    
+#            while i < len
+#                
+#                # setting Species' option
+#                speciesObj.options[i - 1] = new Option(sArr[i].txt, sArr[i].val)
+#                console.log("speciesObj.options:", speciesObj.options[i - 1])
+#                i++
+#            updateChoice "species"
+#        else if selectObjId is "species"
+#            speciesObj = document.getElementById("species")
+#            console.log("speciesObj:", speciesObj)
+#            groupObj = document.getElementById("cross")
+#            console.log("groupObj:", groupObj)
+#            len = lArr.length
+#            arr = []
+#            idx = 0
+#            i = 1
+#
+#            while i < len
+#                #get group(cross) info from lArr
+#                index_value = getIndexByValue("species", speciesObj.value).toString()
+#                if lArr[i][0] is (index_value and not Contains(arr, lArr[i][1]))
+#                    arr[idx++] = lArr[i][1] 
+#                i++
+#            idx = 0
+#            len = arr.length
+#            removeOptions "cross"
+#            i = 0
+#    
+#            while i < len
+#                # setting Group's option
+#                groupObj.options[idx++] = new Option(gArr[arr[i]].txt, gArr[arr[i]].val)
+#                i++
+#            updateChoice "cross"
+#        else if selectObjId is "cross"
+#            speciesObj = document.getElementById("species")
+#            groupObj = document.getElementById("cross")
+#            typeObj = document.getElementById("tissue")
+#            len = lArr.length
+#            arr = []
+#            idx = 0
+#            i = 1
+#    
+#            while i < len
+#                
+#                #get type(tissue) info from lArr
+#                arr[idx++] = lArr[i][2]  if lArr[i][0] is (getIndexByValue("species", speciesObj.value)).toString() and lArr[i][1] is (getIndexByValue("cross", groupObj.value)).toString() and not Contains(arr, lArr[i][2])
+#                i++
+#            idx = 0
+#            len = arr.length
+#            removeOptions "tissue"
+#            i = 0
+#    
+#            while i < len
+#                
+#                # setting Type's option
+#                typeObj.options[idx++] = new Option(tArr[arr[i]].txt, tArr[arr[i]].val)
+#                i++
+#            updateChoice "tissue"
+#        else if selectObjId is "tissue"
+#            speciesObj = document.getElementById("species")
+#            groupObj = document.getElementById("cross")
+#            typeObj = document.getElementById("tissue")
+#            databaseObj = document.getElementById("database")
+#            len = lArr.length
+#            arr = []
+#            idx = 0
+#            i = 1
+#    
+#            while i < len
+#                
+#                #get dataset(database) info from lArr
+#                arr[idx++] = lArr[i][3]  if lArr[i][0] is (getIndexByValue("species", speciesObj.value)).toString() and lArr[i][1] is (getIndexByValue("cross", groupObj.value)).toString() and lArr[i][2] is (getIndexByValue("tissue", typeObj.value)).toString() and not Contains(arr, lArr[i][3])
+#                i++
+#            idx = 0
+#            len = arr.length
+#            removeOptions "database"
+#            i = 0
+#    
+#            while i < len
+#                
+#                # setting Database's option
+#                databaseObj.options[idx++] = new Option(dArr[arr[i]].txt, dArr[arr[i]].val)
+#                i++
+#            updateChoice "database"
+#    
+#    # 
+#    #*  input: arr (targeted array); obj (targeted value)
+#    #*  function: check whether targeted array contains targeted value or not
+#    #*  output: return true, if array contains targeted value, otherwise return false
+#    #
+#    Contains = (arr, obj) ->
+#        i = arr.length
+#        return true  if arr[i] is obj  while i--
+#        false
+#    
+#    # 
+#    #* input: selectObj (designated select menu, such as species, cross, etc... )
+#    #* function: clear designated select menu's option
+#    #* output: null
+#    #
+#    removeOptions = (selectObj) ->
+#        selectObj = document.getElementById(selectObj)  unless typeof selectObj is "object"
+#        len = selectObj.options.length
+#        i = 0
+#    
+#        while i < len
+#            
+#            # clear current selection       
+#            selectObj.options[0] = null
+#            i++
+#    
+#    # 
+#    #*  input: selectObjId (designated select menu, such as species, cross, etc... )
+#    #*         Value: target value
+#    #*  function: retrieve Index info of target value in designated array
+#    #*  output: index info
+#    #
+#    getIndexByValue = (selectObjId, val) ->
+#        if selectObjId is "species"
+#            i = 1
+#    
+#            while i < sArr.length
+#                return i  if sArr[i].val is val
+#                i++
+#        else if selectObjId is "cross"
+#            i = 1
+#    
+#            while i < gArr.length
+#                return i  if gArr[i].val is val
+#                i++
+#        else if selectObjId is "tissue"
+#            i = 1
+#    
+#            while i < tArr.length
+#                return i  if tArr[i].val is val
+#                i++
+#        else
+#            return
+#    
+#    # 
+#    #*  input: objId (designated select menu, such as species, cross, etc... )
+#    #*  		  val(targeted value)
+#    #*  function: setting option's selected status for designated select menu based on target value, also update the following select menu in the main search page 
+#    #*  output: return true if selected status has been set, otherwise return false.
+#    #
+#    setChoice = (objId, val) ->
+#        console.log("objId:", objId)
+#        console.log("val:", val)
+#        Obj = document.getElementById(objId)
+#        console.log("Obj:", Obj)
+#        idx = -1
+#        i = 0
+#        while i < Obj.options.length
+#            if Obj.options[i].value is val
+#                idx = i
+#                break
+#            i++
+#        if idx >= 0
+#
+#            #setting option's selected status 
+#            Obj.options[idx].selected = true
+#            
+#            #update the following select menu 
+#            fillOptions objId
+#        else
+#            Obj.options[0].selected = true
+#            fillOptions objId
+#    
+#    # setting option's selected status based on default setting or cookie setting for Species, Group, Type and Database select menu in the main search page http://www.genenetwork.org/
+#    updateChoice = (selectObjId) ->
+#        if selectObjId is "species"
+#            defaultSpecies = getDefaultValue("species")
+#            
+#            #setting option's selected status
+#            setChoice "species", defaultSpecies
+#        else if selectObjId is "cross"
+#            defaultSet = getDefaultValue("cross")
+#            
+#            #setting option's selected status
+#            setChoice "cross", defaultSet
+#        else if selectObjId is "tissue"
+#            defaultType = getDefaultValue("tissue")
+#            
+#            #setting option's selected status
+#            setChoice "tissue", defaultType
+#        else if selectObjId is "database"
+#            defaultDB = getDefaultValue("database")
+#            
+#            #setting option's selected status
+#            setChoice "database", defaultDB
+#    
+#    #get default value;if cookie exists, then use cookie value, otherwise use default value
+#    getDefaultValue = (selectObjId) ->
+#        
+#        #define default value
+#        defaultSpecies = "mouse"
+#        defaultSet = "BXD"
+#        defaultType = "Hippocampus"
+#        defaultDB = "HC_M2_0606_P"
+#        if selectObjId is "species"
+#            
+#            #if cookie exists, then use cookie value, otherwise use default value
+#            cookieSpecies = getCookie("defaultSpecies")
+#            defaultSpecies = cookieSpecies  if cookieSpecies
+#            defaultSpecies
+#        else if selectObjId is "cross"
+#            cookieSet = getCookie("defaultSet")
+#            defaultSet = cookieSet  if cookieSet
+#            defaultSet
+#        else if selectObjId is "tissue"
+#            cookieType = getCookie("defaultType")
+#            defaultType = cookieType  if cookieType
+#            defaultType
+#        else if selectObjId is "database"
+#            cookieDB = getCookie("defaultDB")
+#            defaultDB = cookieDB  if cookieDB
+#            defaultDB
+#    
+#    #setting default value into cookies for the dropdown menus: Species,Group, Type, and Database 
+#    setDefault = (thisform) ->
+#        setCookie "cookieTest", "cookieTest", 1
+#        cookieTest = getCookie("cookieTest")
+#        delCookie "cookieTest"
+#        if cookieTest
+#            defaultSpecies = thisform.species.value
+#            setCookie "defaultSpecies", defaultSpecies, 10
+#            defaultSet = thisform.cross.value
+#            setCookie "defaultSet", defaultSet, 10
+#            defaultType = thisform.tissue.value
+#            setCookie "defaultType", defaultType, 10
+#            defaultDB = thisform.database.value
+#            setCookie "defaultDB", defaultDB, 10
+#            updateChoice "species"
+#            updateChoice "cross"
+#            updateChoice "tissue"
+#            updateChoice "database"
+#            alert "The current settings are now your default"
+#        else
+#            alert "You need to enable Cookies in your browser."
+#            
+#    # run it
+#    initialDatasetSelection()
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/dataset_select_menu.js b/wqflask/wqflask/static/new/javascript/dataset_select_menu.js
index eb04839c..8f684f6a 100644
--- a/wqflask/wqflask/static/new/javascript/dataset_select_menu.js
+++ b/wqflask/wqflask/static/new/javascript/dataset_select_menu.js
@@ -2,372 +2,64 @@
 (function() {
 
   $(function() {
-    var Contains, dArr, fillOptions, fillOptionsForIE, gArr, getDefaultValue, getIndexByValue, initialDatasetSelection, lArr, removeOptions, sArr, setChoice, setDefault, tArr, updateChoice;
-    sArr = window.sArr;
-    gArr = window.gArr;
-    tArr = window.tArr;
-    dArr = window.dArr;
-    lArr = window.lArr;
-    console.log("sArr is now [jersey]:", sArr);
-    console.log("gArr is now [jersey]:", gArr);
-    initialDatasetSelection = function() {
-      var dOptions, defaultDB, defaultSet, defaultSpecies, defaultType, gOptions, menu0, menu1, menu2, menu3, sOptions, tOptions;
-      defaultSpecies = getDefaultValue("species");
-      defaultSet = getDefaultValue("cross");
-      defaultType = getDefaultValue("tissue");
-      defaultDB = getDefaultValue("database");
-      if (navigator.userAgent.indexOf("MSIE") >= 0) {
-        sOptions = fillOptionsForIE(null, defaultSpecies);
-        menu0 = "<SELECT NAME='species' ID='species' SIZE='1' onChange='fillOptions(\"species\");'>" + sOptions + "</Select>";
-        document.getElementById("menu0").innerHTML = menu0;
-        gOptions = fillOptionsForIE("species", defaultSet);
-        menu1 = "<Select NAME='cross' size=1 id='cross' onchange='fillOptions(\"cross\");'>" + gOptions + "</Select><input type=\"button\" class=\"button\" value=\"Info\" onCLick=\"javascript:crossinfo();\">";
-        document.getElementById("menu1").innerHTML = menu1;
-        tOptions = fillOptionsForIE("cross", defaultType);
-        menu2 = "<Select NAME='tissue' size=1 id='tissue' onchange='fillOptions(\"tissue\");'>" + tOptions + "</Select>";
-        document.getElementById("menu2").innerHTML = menu2;
-        dOptions = fillOptionsForIE("tissue", defaultDB);
-        menu3 = "<Select NAME='database' size=1 id='database'>" + dOptions + "</Select><input type=\"button\" class=\"button\" value=\"Info\" onCLick=\"javascript:databaseinfo();\">";
-        document.getElementById("menu3").innerHTML = menu3;
-      } else {
-        fillOptions(null);
-      }
-      return searchtip();
+    var populate_datasets, populate_groups, populate_species, populate_types, process_json, redo_dropdown,
+      _this = this;
+    process_json = function(data) {
+      window.jdata = data;
+      return populate_species();
     };
-    fillOptionsForIE = function(selectObjId, defaultValue) {
-      var arr, groupObj, i, idx, len, options, speciesObj, typeObj;
-      options = "";
-      if (selectObjId == null) {
-        len = sArr.length;
-        i = 1;
-        while (i < len) {
-          if (sArr[i].val === defaultValue) {
-            options = options + "<option selected=\"selected\" value='" + sArr[i].val + "'>" + sArr[i].txt + "</option>";
-          } else {
-            options = options + "<option value='" + sArr[i].val + "'>" + sArr[i].txt + "</option>";
-          }
-          i++;
-        }
-      } else if (selectObjId === "species") {
-        speciesObj = document.getElementById("species");
-        len = lArr.length;
-        arr = [];
-        idx = 0;
-        i = 1;
-        while (i < len) {
-          if (lArr[i][0] === (getIndexByValue("species", speciesObj.value)).toString() && !Contains(arr, lArr[i][1])) {
-            arr[idx++] = lArr[i][1];
-          }
-          i++;
-        }
-        idx = 0;
-        len = arr.length;
-        removeOptions("cross");
-        i = 0;
-        while (i < len) {
-          if (gArr[arr[i]].val === defaultValue) {
-            options = options + "<option selected=\"selected\" value='" + gArr[arr[i]].val + "'>" + gArr[arr[i]].txt + "</option>";
-          } else {
-            options = options + "<option value='" + gArr[arr[i]].val + "'>" + gArr[arr[i]].txt + "</option>";
-          }
-          i++;
-        }
-      } else if (selectObjId === "cross") {
-        speciesObj = document.getElementById("species");
-        groupObj = document.getElementById("cross");
-        len = lArr.length;
-        arr = [];
-        idx = 0;
-        i = 1;
-        while (i < len) {
-          if (lArr[i][0] === (getIndexByValue("species", speciesObj.value)).toString() && lArr[i][1] === (getIndexByValue("cross", groupObj.value)).toString() && !Contains(arr, lArr[i][2])) {
-            arr[idx++] = lArr[i][2];
-          }
-          i++;
-        }
-        idx = 0;
-        len = arr.length;
-        removeOptions("tissue");
-        i = 0;
-        while (i < len) {
-          if (tArr[arr[i]].val === defaultValue) {
-            options = options + "<option selected=\"selected\" value='" + tArr[arr[i]].val + "'>" + tArr[arr[i]].txt + "</option>";
-          } else {
-            options = options + "<option value='" + tArr[arr[i]].val + "'>" + tArr[arr[i]].txt + "</option>";
-          }
-          i++;
-        }
-      } else if (selectObjId === "tissue") {
-        speciesObj = document.getElementById("species");
-        groupObj = document.getElementById("cross");
-        typeObj = document.getElementById("tissue");
-        len = lArr.length;
-        arr = [];
-        idx = 0;
-        i = 1;
-        while (i < len) {
-          if (lArr[i][0] === (getIndexByValue("species", speciesObj.value)).toString() && lArr[i][1] === (getIndexByValue("cross", groupObj.value)).toString() && lArr[i][2] === (getIndexByValue("tissue", typeObj.value)).toString() && !Contains(arr, lArr[i][3])) {
-            arr[idx++] = lArr[i][3];
-          }
-          i++;
-        }
-        idx = 0;
-        len = arr.length;
-        removeOptions("database");
-        i = 0;
-        while (i < len) {
-          if (dArr[arr[i]].val === defaultValue) {
-            options = options + "<option SELECTED value='" + dArr[arr[i]].val + "'>" + dArr[arr[i]].txt + "</option>";
-          } else {
-            options = options + "<option value='" + dArr[arr[i]].val + "'>" + dArr[arr[i]].txt + "</option>";
-          }
-          i++;
-        }
-      }
-      return options;
+    $.ajax('/static/new/javascript/dataset_menu_structure', {
+      dataType: 'json',
+      success: process_json
+    });
+    populate_species = function() {
+      var species_list;
+      species_list = this.jdata.species;
+      redo_dropdown($('#species'), species_list);
+      return populate_groups();
     };
-    fillOptions = function(selectObjId) {
-      var arr, databaseObj, groupObj, i, idx, index_value, len, speciesObj, typeObj;
-      console.log("[vacuum] selectObjId:", selectObjId);
-      if (selectObjId == null) {
-        speciesObj = document.getElementById("species");
-        console.log("speciesObj:", speciesObj);
-        len = sArr.length;
-        i = 1;
-        while (i < len) {
-          speciesObj.options[i - 1] = new Option(sArr[i].txt, sArr[i].val);
-          console.log("speciesObj.options:", speciesObj.options[i - 1]);
-          i++;
-        }
-        return updateChoice("species");
-      } else if (selectObjId === "species") {
-        speciesObj = document.getElementById("species");
-        console.log("speciesObj:", speciesObj);
-        groupObj = document.getElementById("cross");
-        console.log("groupObj:", groupObj);
-        len = lArr.length;
-        arr = [];
-        idx = 0;
-        i = 1;
-        while (i < len) {
-          index_value = getIndexByValue("species", speciesObj.value).toString();
-          if (lArr[i][0] === (index_value && !Contains(arr, lArr[i][1]))) {
-            arr[idx++] = lArr[i][1];
-          }
-          i++;
-        }
-        idx = 0;
-        len = arr.length;
-        removeOptions("cross");
-        i = 0;
-        while (i < len) {
-          groupObj.options[idx++] = new Option(gArr[arr[i]].txt, gArr[arr[i]].val);
-          i++;
-        }
-        return updateChoice("cross");
-      } else if (selectObjId === "cross") {
-        speciesObj = document.getElementById("species");
-        groupObj = document.getElementById("cross");
-        typeObj = document.getElementById("tissue");
-        len = lArr.length;
-        arr = [];
-        idx = 0;
-        i = 1;
-        while (i < len) {
-          if (lArr[i][0] === (getIndexByValue("species", speciesObj.value)).toString() && lArr[i][1] === (getIndexByValue("cross", groupObj.value)).toString() && !Contains(arr, lArr[i][2])) {
-            arr[idx++] = lArr[i][2];
-          }
-          i++;
-        }
-        idx = 0;
-        len = arr.length;
-        removeOptions("tissue");
-        i = 0;
-        while (i < len) {
-          typeObj.options[idx++] = new Option(tArr[arr[i]].txt, tArr[arr[i]].val);
-          i++;
-        }
-        return updateChoice("tissue");
-      } else if (selectObjId === "tissue") {
-        speciesObj = document.getElementById("species");
-        groupObj = document.getElementById("cross");
-        typeObj = document.getElementById("tissue");
-        databaseObj = document.getElementById("database");
-        len = lArr.length;
-        arr = [];
-        idx = 0;
-        i = 1;
-        while (i < len) {
-          if (lArr[i][0] === (getIndexByValue("species", speciesObj.value)).toString() && lArr[i][1] === (getIndexByValue("cross", groupObj.value)).toString() && lArr[i][2] === (getIndexByValue("tissue", typeObj.value)).toString() && !Contains(arr, lArr[i][3])) {
-            arr[idx++] = lArr[i][3];
-          }
-          i++;
-        }
-        idx = 0;
-        len = arr.length;
-        removeOptions("database");
-        i = 0;
-        while (i < len) {
-          databaseObj.options[idx++] = new Option(dArr[arr[i]].txt, dArr[arr[i]].val);
-          i++;
-        }
-        return updateChoice("database");
-      }
+    populate_groups = function() {
+      var group_list, species;
+      species = $('#species').val();
+      group_list = this.jdata.groups[species];
+      redo_dropdown($('#group'), group_list);
+      return populate_types();
     };
-    Contains = function(arr, obj) {
-      var i;
-      i = arr.length;
-      if ((function() {
-        var _results;
-        _results = [];
-        while (i--) {
-          _results.push(arr[i] === obj);
-        }
-        return _results;
-      })()) {
-        return true;
-      }
-      return false;
+    populate_types = function() {
+      var group, species, type_list;
+      species = $('#species').val();
+      group = $('#group').val();
+      type_list = this.jdata.types[species][group];
+      redo_dropdown($('#type'), type_list);
+      return populate_datasets();
     };
-    removeOptions = function(selectObj) {
-      var i, len, _results;
-      if (typeof selectObj !== "object") {
-        selectObj = document.getElementById(selectObj);
-      }
-      len = selectObj.options.length;
-      i = 0;
+    populate_datasets = function() {
+      var dataset_list, group, species, type;
+      species = $('#species').val();
+      group = $('#group').val();
+      type = $('#type').val();
+      dataset_list = this.jdata.datasets[species][group][type];
+      return redo_dropdown($('#dataset'), dataset_list);
+    };
+    redo_dropdown = function(dropdown, items) {
+      var item, _i, _len, _results;
+      dropdown.empty();
       _results = [];
-      while (i < len) {
-        selectObj.options[0] = null;
-        _results.push(i++);
+      for (_i = 0, _len = items.length; _i < _len; _i++) {
+        item = items[_i];
+        _results.push(dropdown.append($("<option />").val(item[0]).text(item[1])));
       }
       return _results;
     };
-    getIndexByValue = function(selectObjId, val) {
-      var i;
-      if (selectObjId === "species") {
-        i = 1;
-        while (i < sArr.length) {
-          if (sArr[i].val === val) {
-            return i;
-          }
-          i++;
-        }
-      } else if (selectObjId === "cross") {
-        i = 1;
-        while (i < gArr.length) {
-          if (gArr[i].val === val) {
-            return i;
-          }
-          i++;
-        }
-      } else if (selectObjId === "tissue") {
-        i = 1;
-        while (i < tArr.length) {
-          if (tArr[i].val === val) {
-            return i;
-          }
-          i++;
-        }
-      } else {
-
-      }
-    };
-    setChoice = function(objId, val) {
-      var Obj, i, idx;
-      console.log("objId:", objId);
-      console.log("val:", val);
-      Obj = document.getElementById(objId);
-      console.log("Obj:", Obj);
-      idx = -1;
-      i = 0;
-      while (i < Obj.options.length) {
-        if (Obj.options[i].value === val) {
-          idx = i;
-          break;
-        }
-        i++;
-      }
-      if (idx >= 0) {
-        Obj.options[idx].selected = true;
-        return fillOptions(objId);
-      } else {
-        Obj.options[0].selected = true;
-        return fillOptions(objId);
-      }
-    };
-    updateChoice = function(selectObjId) {
-      var defaultDB, defaultSet, defaultSpecies, defaultType;
-      if (selectObjId === "species") {
-        defaultSpecies = getDefaultValue("species");
-        return setChoice("species", defaultSpecies);
-      } else if (selectObjId === "cross") {
-        defaultSet = getDefaultValue("cross");
-        return setChoice("cross", defaultSet);
-      } else if (selectObjId === "tissue") {
-        defaultType = getDefaultValue("tissue");
-        return setChoice("tissue", defaultType);
-      } else if (selectObjId === "database") {
-        defaultDB = getDefaultValue("database");
-        return setChoice("database", defaultDB);
-      }
-    };
-    getDefaultValue = function(selectObjId) {
-      var cookieDB, cookieSet, cookieSpecies, cookieType, defaultDB, defaultSet, defaultSpecies, defaultType;
-      defaultSpecies = "mouse";
-      defaultSet = "BXD";
-      defaultType = "Hippocampus";
-      defaultDB = "HC_M2_0606_P";
-      if (selectObjId === "species") {
-        cookieSpecies = getCookie("defaultSpecies");
-        if (cookieSpecies) {
-          defaultSpecies = cookieSpecies;
-        }
-        return defaultSpecies;
-      } else if (selectObjId === "cross") {
-        cookieSet = getCookie("defaultSet");
-        if (cookieSet) {
-          defaultSet = cookieSet;
-        }
-        return defaultSet;
-      } else if (selectObjId === "tissue") {
-        cookieType = getCookie("defaultType");
-        if (cookieType) {
-          defaultType = cookieType;
-        }
-        return defaultType;
-      } else if (selectObjId === "database") {
-        cookieDB = getCookie("defaultDB");
-        if (cookieDB) {
-          defaultDB = cookieDB;
-        }
-        return defaultDB;
-      }
-    };
-    setDefault = function(thisform) {
-      var cookieTest, defaultDB, defaultSet, defaultSpecies, defaultType;
-      setCookie("cookieTest", "cookieTest", 1);
-      cookieTest = getCookie("cookieTest");
-      delCookie("cookieTest");
-      if (cookieTest) {
-        defaultSpecies = thisform.species.value;
-        setCookie("defaultSpecies", defaultSpecies, 10);
-        defaultSet = thisform.cross.value;
-        setCookie("defaultSet", defaultSet, 10);
-        defaultType = thisform.tissue.value;
-        setCookie("defaultType", defaultType, 10);
-        defaultDB = thisform.database.value;
-        setCookie("defaultDB", defaultDB, 10);
-        updateChoice("species");
-        updateChoice("cross");
-        updateChoice("tissue");
-        updateChoice("database");
-        return alert("The current settings are now your default");
-      } else {
-        return alert("You need to enable Cookies in your browser.");
-      }
-    };
-    return initialDatasetSelection();
+    $('#species').change(function() {
+      return populate_groups();
+    });
+    $('#group').change(function() {
+      return populate_types();
+    });
+    return $('#type').change(function() {
+      return populate_datasets();
+    });
   });
 
 }).call(this);
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index b1cca461..10671e78 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -185,7 +185,8 @@ $ ->
                 .appendTo($('#attribute_values'))
 
     # Must run once at beginning
-    populate_sample_attributes_values_dropdown()
+    if js_data.attribute_names.length > 0
+        populate_sample_attributes_values_dropdown()
     $('#exclude_menu').change(populate_sample_attributes_values_dropdown)
     
     ##End Populate Samples Attribute Values Codess
@@ -209,15 +210,12 @@ $ ->
     
     block_by_index = ->
         index_string = $('#remove_samples_field').val()
-        console.log("index_string is:", index_string)
         index_list = []
         for index_set in index_string.split(",")
             if index_set.indexOf('-') != -1
                 try
                     start_index = parseInt(index_set.split("-")[0])
-                    console.log("start_index:", start_index)
                     end_index = parseInt(index_set.split("-")[1])
-                    console.log("end_index:", end_index)
                     index_list.push(index) for index in [start_index..end_index]
                 catch error
                     alert("Syntax error")
@@ -235,6 +233,8 @@ $ ->
                 console.log("row:", $('#Primary_'+index.toString()))
                 $('#Primary_'+index.toString()).find('.trait_value_input').val("x")
             else if $('#block_group').val() == "other"
+                console.log("block_group:", $('#block_group').val())
+                console.log("row:", $('#Other_'+index.toString()))                
                 $('#Other_'+index.toString()).find('.trait_value_input').val("x")
     
     $('#block_by_index').click(block_by_index)
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 5aadedef..db40b547 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -219,7 +219,9 @@
       }
       return _results;
     };
-    populate_sample_attributes_values_dropdown();
+    if (js_data.attribute_names.length > 0) {
+      populate_sample_attributes_values_dropdown();
+    }
     $('#exclude_menu').change(populate_sample_attributes_values_dropdown);
     block_by_attribute_value = function() {
       var attribute_name, cell_class, exclude_by_value,
@@ -239,7 +241,6 @@
     block_by_index = function() {
       var end_index, index, index_list, index_set, index_string, start_index, _i, _j, _k, _len, _len1, _ref, _results;
       index_string = $('#remove_samples_field').val();
-      console.log("index_string is:", index_string);
       index_list = [];
       _ref = index_string.split(",");
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
@@ -247,9 +248,7 @@
         if (index_set.indexOf('-') !== -1) {
           try {
             start_index = parseInt(index_set.split("-")[0]);
-            console.log("start_index:", start_index);
             end_index = parseInt(index_set.split("-")[1]);
-            console.log("end_index:", end_index);
             for (index = _j = start_index; start_index <= end_index ? _j <= end_index : _j >= end_index; index = start_index <= end_index ? ++_j : --_j) {
               index_list.push(index);
             }
@@ -271,6 +270,8 @@
           console.log("row:", $('#Primary_' + index.toString()));
           _results.push($('#Primary_' + index.toString()).find('.trait_value_input').val("x"));
         } else if ($('#block_group').val() === "other") {
+          console.log("block_group:", $('#block_group').val());
+          console.log("row:", $('#Other_' + index.toString()));
           _results.push($('#Other_' + index.toString()).find('.trait_value_input').val("x"));
         } else {
           _results.push(void 0);
diff --git a/wqflask/wqflask/templates/new_index_page.html b/wqflask/wqflask/templates/new_index_page.html
index c90e807d..687cf8b2 100644
--- a/wqflask/wqflask/templates/new_index_page.html
+++ b/wqflask/wqflask/templates/new_index_page.html
@@ -89,13 +89,12 @@
                         <fieldset>
                             <!--<legend>Select and Search</legend>-->
                             <label for="species">Species:</label>
-                                <select name="species" size="1" id="species" onchange="fillOptions('species');">
+                                <select name="species" id="species" class="input-xlarge ds_selector">
                                 </select>
 
                             <div class="input-append">
-                                <label for="cross">Group: </label>
-                                    <select name="cross" id="cross" onchange="fillOptions('cross');">
-                                      </select>
+                                <label for="group">Group: </label>
+                                    <select name="group" id="group" class="input-xlarge ds_selector"></select>
                                     <!--<i class="icon-question-sign"></i>-->
                                     <input type="button" class="btn" value="Info" onclick=
                                       "javascript:crossinfo();" />
@@ -103,14 +102,12 @@
 
 
                             <label for="tissue">Type:</label>
-                                <select name="tissue"  id="tissue" onchange=
-                                "fillOptions('tissue');"></select>
-
+                                <select name="type" id="type" class="input-xlarge ds_selector"></select>
 
                             <div class="input-append">
-                                <label for="database">Database:</label>
-                                    <select name="database"  id="database">
-                                      </select> <input type="button" class="btn" value="Info" name="info_database" />
+                                <label for="dataset">Dataset:</label>
+                                    <select name="dataset" id="dataset" class="input-xlarge"></select>
+                                    <input type="button" class="btn" value="Info" name="info_dataset ds_selector" />
                             </div>
                             <!--  USER HELP   -->
 
@@ -124,7 +121,7 @@
 
                             <label for="tfor">Search:</label>
 
-                            <input class="search-query"
+                            <input class="search-query input-xlarge"
                                 id="tfor" name="search_terms"
                                 type="text" maxlength="500">
 
@@ -409,8 +406,9 @@
               }
             })
     </script>
-    <SCRIPT SRC="/javascript/webqtl.js"></SCRIPT>
-    <script src="/static/new/javascript/dataset_select_items.js"></script>
+    <!--<SCRIPT SRC="/javascript/webqtl.js"></SCRIPT>-->
+    <!--<script src="/static/new/javascript/dataset_menu_structure.json"></script>-->
+    <!--<script src="/static/new/javascript/dataset_select_items.js"></script>-->
     <script src="/static/new/javascript/dataset_select_menu.js"></script>
 </body>
 </html>