Added a couple options for network graph - Focus Trait, Layout, and a correlation slider. The first only displays the edges for the specified trait/node, the second changes layout, and the third hides nodes/edges with abs(correlation) less than the slider's value

Changed/added a couple node/edge attributes for network graph

Updated dataset menu structure json file to include the human RETINA data set

Added css file for network graph page (specifically to make the appearance of the options resemble the RETINA website's)

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 %}