diff options
Diffstat (limited to 'wqflask')
| -rw-r--r-- | wqflask/wqflask/network_graph/network_graph.py | 28 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/css/network_graph.css | 38 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/dataset_menu_structure.json | 127 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/network_graph.js | 176 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/network_graph.html | 90 |
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 + +/- 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 %} |