aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
authorPjotr Prins2016-09-10 10:04:44 +0200
committerPjotr Prins2016-09-10 10:04:44 +0200
commitcd7e98a79916c1cc7466f16067c2c8283bff989e (patch)
treec4f89ee3c7db6856b208af6400eb76fac93fd5c4 /wqflask
parent0621666fba97b3646271bb037b6c43503e981abf (diff)
parent11d04b1e6e7bac4d0eb0f9d8f8c5be57d6cb2ebd (diff)
downloadgenenetwork2-cd7e98a79916c1cc7466f16067c2c8283bff989e.tar.gz
Merge branch 'development' of github.com:genenetwork/genenetwork2 into zsloan
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/wqflask/network_graph/network_graph.py28
-rw-r--r--wqflask/wqflask/static/new/css/network_graph.css38
-rw-r--r--wqflask/wqflask/static/new/javascript/dataset_menu_structure.json127
-rw-r--r--wqflask/wqflask/static/new/javascript/network_graph.js176
-rw-r--r--wqflask/wqflask/templates/network_graph.html90
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 %}