Merge branch 'development' of github.com:genenetwork/genenetwork2 into zsloan

5 files changed, 336 insertions, 123 deletions

diff --git a/wqflask/wqflask/network_graph/network_graph.py b/wqflask/wqflask/network_graph/network_graph.py
index 1901ac04..1d725c4c 100644
--- a/wqflask/wqflask/network_graph/network_graph.py
+++ b/wqflask/wqflask/network_graph/network_graph.py
@@ -108,11 +108,7 @@ class NetworkGraph(object):
             corr_result_row = []
             is_spearman = False #ZS: To determine if it's above or below the diagonal
             
-            node_dict = { 'data' : {'id' : this_trait.name, 
-                                    'dataset' : this_trait.dataset.name,
-                                    'geneid' : this_trait.geneid,
-                                    'omim' : this_trait.omim } }
-            self.nodes_list.append(node_dict)
+            max_corr = 0 #ZS: Used to determine whether node should be hidden when correlation coefficient slider is used
             
             for target in self.trait_list:
                 target_trait = target[0]
@@ -142,7 +138,7 @@ class NetworkGraph(object):
                     if is_spearman == False:
                         sample_r, sample_p = pearson_r, pearson_p
                         if sample_r == 1:
-                            break
+                            continue
                     else:
                         sample_r, sample_p = scipy.stats.spearmanr(this_trait_vals, target_vals)
  
@@ -166,15 +162,18 @@ class NetworkGraph(object):
                         width = 3 
                     else:
                         color = "#000000"
-                        width = 0                        
+                        width = 0                      
+ 
+                    if abs(sample_r) > max_corr:
+                        max_corr = abs(sample_r)
  
                     edge_data = {'id' : this_trait.name + '_to_' + target_trait.name,
-                                 'source' : this_trait.name,
-                                 'source_dataset' : this_trait.dataset.name,
-                                 'target' : target_trait.name,
-                                 'target_dataset' : target_trait.dataset.name,
+                                 'source' : this_trait.name + ":" + this_trait.dataset.name,
+                                 'target' : target_trait.name + ":" + target_trait.dataset.name,
                                  'correlation' : round(sample_r, 3),
+                                 'abs_corr' : abs(round(sample_r, 3)),
                                  'p_value' : round(sample_p, 3),
+                                 'overlap' : num_overlap,
                                  'color' : color,
                                  'width' : width }
                                  
@@ -182,6 +181,13 @@ class NetworkGraph(object):
                                  
                     self.edges_list.append(edge_dict)
       
+            node_dict = { 'data' : {'id' : this_trait.name + ":" + this_trait.dataset.name, 
+                                    'label' : this_trait.name,
+                                    'geneid' : this_trait.geneid,
+                                    'omim' : this_trait.omim,
+                                    'max_corr' : max_corr } }
+            self.nodes_list.append(node_dict)
+      
         #self.network_data['dataSchema'] = {'nodes' : [{'name' : "label" , 'type' : "string"}],
         #                                   'edges' : [{'name' : "label" , 'type' : "string"}] }
         
diff --git a/wqflask/wqflask/static/new/css/network_graph.css b/wqflask/wqflask/static/new/css/network_graph.css
new file mode 100644
index 00000000..c01c0d24
--- /dev/null
+++ b/wqflask/wqflask/static/new/css/network_graph.css
@@ -0,0 +1,38 @@
+#content h2, h3, h4, h5, h6 {
+    color: #545454;
+    margin-bottom: 1em;
+    border-bottom: dashed 1px #dfdfdf;
+    padding-bottom: 0.3em;
+}
+
+#content table td {
+    padding: 0.5em;
+    /* border-right: solid 1px #fff; */
+}
+
+#secondaryContent {
+    position: relative;
+    float: left;
+    width: 16.5em;
+    padding: 1em 1em 1em 1em;
+    background: #fff url('/static/new/images/a1.gif') top right repeat-y;
+}
+
+
+input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
+    align-items: flex-start;
+    text-align: center;
+    cursor: default;
+    color: buttontext;
+    border-image-source: initial;
+    border-image-slice: initial;
+    border-image-width: initial;
+    border-image-outset: initial;
+    border-image-repeat: initial;
+    background-color: buttonface;
+    box-sizing: border-box;
+    padding: 2px 6px 3px;
+    border-width: 2px;
+    border-style: outset;
+    border-color: buttonface;
+}
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json b/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json
index 4ff90ca8..750a9118 100644
--- a/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json
+++ b/wqflask/wqflask/static/new/javascript/dataset_menu_structure.json
@@ -1492,6 +1492,22 @@
                   "Human Ventrolateral Prefrontal Cortex Affy Hu-Exon 1.0 ST (Jul11) Quantile"
                ]
             ]
+         },
+         "TIGEM-Retina-RNA-Seq": {
+            "Phenotypes": [
+               [
+                  "None",
+                  "TIGEM-Retina-RNA-SeqPublish",
+                  "TIGEM-Retina-RNA-Seq Published Phenotypes"
+               ]
+            ],
+            "Retina mRNA": [
+               [
+                  "802",
+                  "TIGEM_hg38_ret_rna-seq_0916",
+                  "TIGEM Human Retina RNA-Seq (Sep16) RPKM log2"
+               ]
+            ]
          }
       },
       "mouse": {
@@ -1596,6 +1612,11 @@
          "B6D2F2": {
             "Brain mRNA": [
                [
+                  "77",
+                  "BRF2_M_0805_R",
+                  "OHSU/VA B6D2F2 Brain mRNA M430 (Aug05) RMA"
+               ],
+               [
                   "76",
                   "BRF2_M_0805_M",
                   "OHSU/VA B6D2F2 Brain mRNA M430 (Aug05) MAS5"
@@ -1606,11 +1627,6 @@
                   "OHSU/VA B6D2F2 Brain mRNA M430 (Aug05) PDNN"
                ],
                [
-                  "77",
-                  "BRF2_M_0805_R",
-                  "OHSU/VA B6D2F2 Brain mRNA M430 (Aug05) RMA"
-               ],
-               [
                   "33",
                   "BRF2_M_0304_P",
                   "OHSU/VA B6D2F2 Brain mRNA M430A (Mar04) PDNN"
@@ -1933,16 +1949,16 @@
             ],
             "Brain mRNA": [
                [
-                  "590",
-                  "UTHSC_BXD_WB_RNASeqtrim1_1112",
-                  "UTHSC Mouse BXD Whole Brain RNA Sequence (Nov12) RPKM Trimmed 1.0"
-               ],
-               [
                   "164",
                   "UTHSC_BXD_WB_RNASeq1112",
                   "UTHSC Mouse BXD Whole Brain RNA Sequence (Nov12) RPKM Untrimmed"
                ],
                [
+                  "590",
+                  "UTHSC_BXD_WB_RNASeqtrim1_1112",
+                  "UTHSC Mouse BXD Whole Brain RNA Sequence (Nov12) RPKM Trimmed 1.0"
+               ],
+               [
                   "394",
                   "UTHSC_BXD_WB_RNASeqEx1112",
                   "UTHSC Mouse BXD Whole Brain RNA Sequence Exon Level (Nov12) RPKM"
@@ -1958,11 +1974,6 @@
                   "UTHSC Brain mRNA U74Av2 (Nov05) PDNN"
                ],
                [
-                  "82",
-                  "BR_U_0805_R",
-                  "UTHSC Brain mRNA U74Av2 (Aug05) RMA"
-               ],
-               [
                   "81",
                   "BR_U_0805_P",
                   "UTHSC Brain mRNA U74Av2 (Aug05) PDNN"
@@ -1973,6 +1984,11 @@
                   "UTHSC Brain mRNA U74Av2 (Aug05) MAS5"
                ],
                [
+                  "82",
+                  "BR_U_0805_R",
+                  "UTHSC Brain mRNA U74Av2 (Aug05) RMA"
+               ],
+               [
                   "42",
                   "CB_M_0204_P",
                   "INIA Brain mRNA M430 (Feb04) PDNN"
@@ -2039,11 +2055,6 @@
                   "Eye M430v2 WT Gpnmb (Sep08) RMA"
                ],
                [
-                  "278",
-                  "Eye_M2_0908_R_MT",
-                  "Eye M430v2 Mutant Tyrp1 (Sep08) RMA"
-               ],
-               [
                   "382",
                   "Eye_M2_0908_WTWT",
                   "Eye M430v2 WT WT (Sep08) RMA"
@@ -2054,6 +2065,11 @@
                   "Eye M430v2 WT Tyrp1 (Sep08) RMA"
                ],
                [
+                  "278",
+                  "Eye_M2_0908_R_MT",
+                  "Eye M430v2 Mutant Tyrp1 (Sep08) RMA"
+               ],
+               [
                   "400",
                   "DBA2J-ONH-1212",
                   "Howell et al. 2011, DBA/2J Glaucoma Optic Nerve Head M430 2.0 (Dec12) RMA"
@@ -2290,16 +2306,16 @@
             ],
             "Kidney mRNA": [
                [
-                  "240",
-                  "MA_M2M_0706_R",
-                  "Mouse kidney M430v2 Male (Aug06) RMA"
-               ],
-               [
                   "239",
                   "MA_M2F_0706_R",
                   "Mouse kidney M430v2 Female (Aug06) RMA"
                ],
                [
+                  "240",
+                  "MA_M2M_0706_R",
+                  "Mouse kidney M430v2 Male (Aug06) RMA"
+               ],
+               [
                   "118",
                   "MA_M2_0806_R",
                   "Mouse kidney M430v2 Sex Balanced (Aug06) RMA"
@@ -2479,16 +2495,16 @@
             ],
             "Neocortex mRNA": [
                [
-                  "374",
-                  "DevNeocortex_ILM6.2P3RInv_1111",
-                  "BIDMC/UTHSC Dev Neocortex P3 ILMv6.2 (Nov11) RankInv"
-               ],
-               [
                   "375",
                   "DevNeocortex_ILM6.2P14RInv_1111",
                   "BIDMC/UTHSC Dev Neocortex P14 ILMv6.2 (Nov11) RankInv"
                ],
                [
+                  "374",
+                  "DevNeocortex_ILM6.2P3RInv_1111",
+                  "BIDMC/UTHSC Dev Neocortex P3 ILMv6.2 (Nov11) RankInv"
+               ],
+               [
                   "284",
                   "HQFNeoc_1210v2_RankInv",
                   "HQF BXD Neocortex ILM6v1.1 (Dec10v2) RankInv"
@@ -3001,16 +3017,6 @@
             ],
             "Hippocampus mRNA": [
                [
-                  "212",
-                  "Illum_LXS_Hipp_RSE_1008",
-                  "Hippocampus Illumina RSE (Oct08) RankInv beta"
-               ],
-               [
-                  "214",
-                  "Illum_LXS_Hipp_NOE_1008",
-                  "Hippocampus Illumina NOE (Oct08) RankInv beta"
-               ],
-               [
                   "211",
                   "Illum_LXS_Hipp_RSS_1008",
                   "Hippocampus Illumina RSS (Oct08) RankInv beta"
@@ -3026,6 +3032,16 @@
                   "Hippocampus Illumina NON (Oct08) RankInv beta"
                ],
                [
+                  "212",
+                  "Illum_LXS_Hipp_RSE_1008",
+                  "Hippocampus Illumina RSE (Oct08) RankInv beta"
+               ],
+               [
+                  "214",
+                  "Illum_LXS_Hipp_NOE_1008",
+                  "Hippocampus Illumina NOE (Oct08) RankInv beta"
+               ],
+               [
                   "143",
                   "Illum_LXS_Hipp_loess0807",
                   "Hippocampus Illumina (Aug07) LOESS"
@@ -3159,6 +3175,13 @@
                   "MDPPublish",
                   "Mouse Phenome Database"
                ]
+            ],
+            "Spleen mRNA": [
+               [
+                  "801",
+                  "HMS_mm8_MDP_Spl_CD4_1116",
+                  "HMS Spleen CD4+ T cells MDP Affy Mouse Gene 1.0 ST (Jul16) Gene Level"
+               ]
             ]
          },
          "NZBXFVB-N2": {
@@ -3404,11 +3427,11 @@
          ],
          [
             "GTEx",
-            "GTEx v3 All Tissues, RNA-Seq"
+            "GTEx v3 All Tissues, RNA-Seq with Genotypes"
          ],
          [
             "GTEx_v5",
-            "GTEx v5 All Tissues, RNA-Seq"
+            "GTEx v5 All Tissues, RNA-Seq with Genotypes"
          ],
          [
             "HB",
@@ -3429,6 +3452,10 @@
          [
             "HSB",
             "Brain, Development: Normal Gene Expression (Yale/Sestan)"
+         ],
+         [
+            "TIGEM-Retina-RNA-Seq",
+            "Retina: Normal Adult Gene Expression, RNA-Seq (TIGEM)"
          ]
       ],
       "mouse": [
@@ -4273,6 +4300,16 @@
                "Ventrolateral Prefrontal Cortex mRNA",
                "Ventrolateral Prefrontal Cortex mRNA"
             ]
+         ],
+         "TIGEM-Retina-RNA-Seq": [
+            [
+               "Phenotypes",
+               "Phenotypes"
+            ],
+            [
+               "Retina mRNA",
+               "Retina mRNA"
+            ]
          ]
       },
       "mouse": {
@@ -4722,6 +4759,10 @@
             [
                "Liver mRNA",
                "Liver mRNA"
+            ],
+            [
+               "Spleen mRNA",
+               "Spleen mRNA"
             ]
          ],
          "NZBXFVB-N2": [
@@ -4827,4 +4868,4 @@
          ]
       }
    }
-}
+}
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/network_graph.js b/wqflask/wqflask/static/new/javascript/network_graph.js
index c41e36aa..da90ae26 100644
--- a/wqflask/wqflask/static/new/javascript/network_graph.js
+++ b/wqflask/wqflask/static/new/javascript/network_graph.js
@@ -13,7 +13,7 @@ window.onload=function() {
             style: {
               'background-color': '#666',
               'label': 'data(id)',
-              'font-size': 8
+              'font-size': 10
             }
           },
 
@@ -30,10 +30,10 @@ window.onload=function() {
       ],
       
       zoom: 12,
-      layout: { name: 'cose',
+      layout: { name: 'circle',
                 fit: true, // whether to fit the viewport to the graph
-                padding: 100, // the padding on fit
-                idealEdgeLength: function( edge ){ return edge.data['correlation']*10; },                
+                padding: 30 // the padding on fit
+                //idealEdgeLength: function( edge ){ return edge.data['correlation']*10; },                
               }, 
 
       
@@ -48,6 +48,8 @@ window.onload=function() {
       styleEnabled: true
     });
 
+    var eles = cy.$() // var containing all elements, so elements can be restored after being removed
+    
     var defaults = {
       zoomFactor: 0.05, // zoom factor per zoom tick
       zoomDelay: 45, // how many ms between zoom ticks
@@ -76,71 +78,113 @@ window.onload=function() {
 
     cy.panzoom( defaults );
     
-    cy.nodes().qtip({
-                        content: function(){
-                            gn_link = '<b>'+'<a href="http://gn2.genenetwork.org/show_trait?trait_id=' + this.data().id + '&dataset=' + this.data().dataset + '" >'+this.data().id +'</a>'+'</b><br>'
-                            ncbi_link = '<a href="http://www.ncbi.nlm.nih.gov/entrez/query.fcgi?db=gene&cmd=Retrieve&dopt=Graphics&list_uids=' + this.data().geneid + '" >NCBI<a>'+'<br>' 
-                            omim_link = '<a href="http://www.ncbi.nlm.nih.gov/omim/' + this.data().omim + '" >OMIM<a>'+'<br>' 
-                            qtip_content = gn_link + ncbi_link + omim_link
-                            return qtip_content
-                            //return '<b>'+'<a href="http://gn2.genenetwork.org/show_trait?trait_id=' + this.data().id + '&dataset=' + this.data().dataset + '" >'+this.data().id +'<a>'+'</b>' 
-                        },
-                        // content: {
-                            // title: '<b>'+'<a href="http://gn2.genenetwork.org/show_trait?trait_id=' + this.target() + '&dataset=' + this.dataset() + '" >'+this.target() +'<a>'+'</b>',
-                            // text: this.target,
-                            // button: true
-                        // },
-                        position: {
-                            my: 'top center',
-                            at: 'bottom center'
-                        },
-                        style: {
-                            classes: 'qtip-bootstrap',
-                            tip: {
-                                width: 16,
-                                height: 8
+    function create_qtips(cy){
+        cy.nodes().qtip({
+                            content: function(){
+                                gn_link = '<b>'+'<a href="http://gn2.genenetwork.org/show_trait?trait_id=' + this.data().id + '&dataset=' + this.data().dataset + '" >'+this.data().id +'</a>'+'</b><br>'
+                                ncbi_link = '<a href="http://www.ncbi.nlm.nih.gov/entrez/query.fcgi?db=gene&cmd=Retrieve&dopt=Graphics&list_uids=' + this.data().geneid + '" >NCBI<a>'+'<br>' 
+                                omim_link = '<a href="http://www.ncbi.nlm.nih.gov/omim/' + this.data().omim + '" >OMIM<a>'+'<br>' 
+                                qtip_content = gn_link + ncbi_link + omim_link
+                                return qtip_content
+                                //return '<b>'+'<a href="http://gn2.genenetwork.org/show_trait?trait_id=' + this.data().id + '&dataset=' + this.data().dataset + '" >'+this.data().id +'<a>'+'</b>' 
+                            },
+                            // content: {
+                                // title: '<b>'+'<a href="http://gn2.genenetwork.org/show_trait?trait_id=' + this.target() + '&dataset=' + this.dataset() + '" >'+this.target() +'<a>'+'</b>',
+                                // text: this.target,
+                                // button: true
+                            // },
+                            position: {
+                                my: 'top center',
+                                at: 'bottom center'
+                            },
+                            style: {
+                                classes: 'qtip-bootstrap',
+                                tip: {
+                                    width: 16,
+                                    height: 8
+                                }
                             }
-                        }
-                    });
-                    
-    cy.edges().qtip({
-                        content: function(){
-                            scatter_plot = '<b>'+'<a href="http://gn2-zach.genenetwork.org/corr_scatter_plot?dataset_1=' + this.data().source_dataset + '&dataset_2=' + this.data().target_dataset + '&trait_1=' + this.data().source + '&trait_2=' + this.data().target + '" >View Scatterplot</a>'+'</b>'
-                            return scatter_plot
-                        },
-                        position: {
-                            my: 'top center',
-                            at: 'bottom center'
-                        },
-                        style: {
-                            classes: 'qtip-bootstrap',
-                            tip: {
-                                width: 16,
-                                height: 8
+                        });
+                        
+        cy.edges().qtip({
+                            content: function(){
+                                correlation_line = '<b>Sample r: ' + this.data().correlation + '</b><br>'
+                                p_value_line = 'Sample p(r): ' + this.data().p_value + '<br>'
+                                overlap_line = 'Overlap: ' + this.data().overlap + '<br>'
+                                scatter_plot = '<a href="http://gn2-zach.genenetwork.org/corr_scatter_plot?dataset_1=' + this.data().source_dataset + '&dataset_2=' + this.data().target_dataset + '&trait_1=' + this.data().source + '&trait_2=' + this.data().target + '" >View Scatterplot</a>'
+                                return correlation_line + p_value_line + overlap_line + scatter_plot
+                            },
+                            position: {
+                                my: 'top center',
+                                at: 'bottom center'
+                            },
+                            style: {
+                                classes: 'qtip-bootstrap',
+                                tip: {
+                                    width: 16,
+                                    height: 8
+                                }
                             }
-                        }
-                    });
+                        });    
+    }
+    
+    create_qtips(cy)
     
-    // var options = {
-      // name: 'breadthfirst',
-
-      // fit: true, // whether to fit the viewport to the graph
-      // directed: false, // whether the tree is directed downwards (or edges can point in any direction if false)
-      // padding: 30, // padding on fit
-      // circle: false, // put depths in concentric circles if true, put depths top down if false
-      // spacingFactor: 1.75, // positive spacing factor, larger => more space between nodes (N.B. n/a if causes overlap)
-      // boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
-      // avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
-      // roots: undefined, // the roots of the trees
-      // maximalAdjustments: 0, // how many times to try to position the nodes in a maximal way (i.e. no backtracking)
-      // animate: false, // whether to transition the node positions
-      // animationDuration: 500, // duration of animation in ms if enabled
-      // animationEasing: undefined, // easing of animation if enabled
-      // ready: undefined, // callback on layoutready
-      // stop: undefined // callback on layoutstop
-    // };
-
-    // cy.layout( options );
+    $('#slide').change(function() {
+        eles.restore()
+        
+        console.log(eles)
+        
+        // nodes_to_restore = eles.filter("node[max_corr >= " + $(this).val() + "], edge[correlation >= " + $(this).val() + "][correlation <= -" + $(this).val() + "]")
+        // nodes_to_restore.restore()
+        
+        // edges_to_restore = eles.filter("edge[correlation >= " + $(this).val() + "][correlation <= -" + $(this).val() + "]")
+        // edges_to_restore.restore()
+        
+        //cy.$("node[max_corr >= " + $(this).val() + "]").restore();
+        //cy.$("edge[correlation >= " + $(this).val() + "][correlation <= -" + $(this).val() + "]").restore();
+        
+        cy.$("node[max_corr < " + $(this).val() + "]").remove(); 
+        cy.$("edge[correlation < " + $(this).val() + "][correlation > -" + $(this).val() + "]").remove();
+
+        cy.layout({ name: $('select[name=layout_select]').val(),
+                    fit: true, // whether to fit the viewport to the graph
+                    padding: 25 // the padding on fit              
+                  });
+        
+    });
+    
+    $('select[name=focus_select]').change(function() {
+        focus_trait = $(this).val()
+
+        eles.restore()
+        cy.$('edge[source != "' + focus_trait + '"][target != "' + focus_trait + '"]').remove()
+
+        cy.layout({ name: $('select[name=layout_select]').val(),
+                    fit: true, // whether to fit the viewport to the graph
+                    padding: 25 // the padding on fit              
+                  });
+    });
+    
+    $('select[name=layout_select]').change(function() {
+        layout_type = $(this).val()
+        console.log("LAYOUT:", layout_type)
+        cy.layout({ name: layout_type,
+                    fit: true, // whether to fit the viewport to the graph
+                    padding: 25 // the padding on fit              
+                  });
+    });
+    
+    $("a#image_link").click(function(e) {
+      var pngData = cy.png();
+
+      image_link.href = 'data:image/png;base64,' + pngData;
+      image_link.download = 'network_graph.png';
+      
+      console.log("TESTING:", image_link)
+      
+    });
+
     
 };
 
diff --git a/wqflask/wqflask/templates/network_graph.html b/wqflask/wqflask/templates/network_graph.html
index 2d25c968..ec3a7971 100644
--- a/wqflask/wqflask/templates/network_graph.html
+++ b/wqflask/wqflask/templates/network_graph.html
@@ -1,21 +1,105 @@
 {% extends "base.html" %}
 {% block css %}
+    <link rel="stylesheet" type="text/css" href="/static/new/css/network_graph.css" />
     <link rel="stylesheet" type="text/css" href="/static/packages/cytoscape/css/cytoscape.js-panzoom.css" />
     <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.css">
     <style>
         /* The Cytoscape Web container must have its dimensions set. */
         html, body { height: 100%; width: 100%; padding: 0; margin: 0; }
-        #cytoscapeweb { width: 70%; height: 80%; }
+        #cytoscapeweb { width: 70%; height: 70%; }
     </style>
 {% endblock %}
 {% block content %}
     
     {{ header("Network Graph") }}
 
-    <div id="cytoscapeweb">
-
+    <div class="container-fluid">
+        <div class="row" >
+          <div id="content">
+            <div id="secondaryContent" class="col-xs-3">
+                <h3> Visualization Options</h3>
+                <table border="0">
+                  <tbody>
+                    <tr>
+                      <td>
+                        Focus Trait
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <select name="focus_select">
+                          {% for trait in traits %}
+                          <option value="{{ trait.name }}:{{ trait.dataset.name }}">{{ trait.name }}</option>
+                          {% endfor %}
+                        </select>
+                      </td>
+                    </tr>    
+                    <tr>
+                      <td colspan="1">Correlation Coefficient</td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <font size="2"><b>0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; +/- 1</b></font>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <input type="range" id="slide" min="0" max="1" value="0" step="0.001" list="corr_range">
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        Layouts
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <select name="layout_select">
+                          <option value="circle">Circle</option>
+                          <option value="concentric">Concentric</option>
+                          <option value="cose">Cose</option>
+                          <option value="grid">Grid</option>
+                          <option value="breadthfirst">Breadthfirst</option>
+                          <option value="random">Random</option>
+                        </select>
+                      </td>
+                    </tr>                          
+                  </tbody>
+                </table>    
+                <h3> Download</h3>
+                <table>
+                  <tbody>
+                    <tr>
+                      <td>
+                        <a id="image_link" href="javascript:void(0)">
+                          <button style="width:100px;height:25px;">Save Image</button>
+                        </a>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <a id="image_link" href="javascript:void(0)">
+                          <button style="width:100px;height:25px;">Table View</button>
+                        </a>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td>
+                        <a id="image_link" href="javascript:void(0)">
+                          <button style="width:100px;height:25px;">Save Table</button>
+                        </a>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+            </div>
+            <div id="cytoscapeweb" class="col-xs-9" style="min-height:700px !important;"></div>
+          </div>
+        </div>
     </div>
 
+
 {% endblock %}
 
 {% block js %}