From 11d04b1e6e7bac4d0eb0f9d8f8c5be57d6cb2ebd Mon Sep 17 00:00:00 2001 From: zsloan Date: Fri, 9 Sep 2016 19:02:10 +0000 Subject: 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) --- wqflask/wqflask/network_graph/network_graph.py | 28 ++-- wqflask/wqflask/static/new/css/network_graph.css | 38 +++++ .../new/javascript/dataset_menu_structure.json | 127 ++++++++++----- .../wqflask/static/new/javascript/network_graph.js | 176 +++++++++++++-------- wqflask/wqflask/templates/network_graph.html | 90 ++++++++++- 5 files changed, 336 insertions(+), 123 deletions(-) create mode 100644 wqflask/wqflask/static/new/css/network_graph.css 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": { @@ -1595,6 +1611,11 @@ }, "B6D2F2": { "Brain mRNA": [ + [ + "77", + "BRF2_M_0805_R", + "OHSU/VA B6D2F2 Brain mRNA M430 (Aug05) RMA" + ], [ "76", "BRF2_M_0805_M", @@ -1605,11 +1626,6 @@ "BRF2_M_0805_P", "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", @@ -1932,16 +1948,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", @@ -1957,11 +1973,6 @@ "BR_U_1105_P", "UTHSC Brain mRNA U74Av2 (Nov05) PDNN" ], - [ - "82", - "BR_U_0805_R", - "UTHSC Brain mRNA U74Av2 (Aug05) RMA" - ], [ "81", "BR_U_0805_P", @@ -1972,6 +1983,11 @@ "BR_U_0805_M", "UTHSC Brain mRNA U74Av2 (Aug05) MAS5" ], + [ + "82", + "BR_U_0805_R", + "UTHSC Brain mRNA U74Av2 (Aug05) RMA" + ], [ "42", "CB_M_0204_P", @@ -2038,11 +2054,6 @@ "Eye_M2_0908_R_ND", "Eye M430v2 WT Gpnmb (Sep08) RMA" ], - [ - "278", - "Eye_M2_0908_R_MT", - "Eye M430v2 Mutant Tyrp1 (Sep08) RMA" - ], [ "382", "Eye_M2_0908_WTWT", @@ -2053,6 +2064,11 @@ "Eye_M2_0908_R_WT", "Eye M430v2 WT Tyrp1 (Sep08) RMA" ], + [ + "278", + "Eye_M2_0908_R_MT", + "Eye M430v2 Mutant Tyrp1 (Sep08) RMA" + ], [ "400", "DBA2J-ONH-1212", @@ -2289,16 +2305,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", @@ -2478,16 +2494,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", @@ -3000,16 +3016,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", @@ -3025,6 +3031,16 @@ "Illum_LXS_Hipp_NON_1008", "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", @@ -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 = ''+''+this.data().id +''+'
' - ncbi_link = 'NCBI'+'
' - omim_link = 'OMIM'+'
' - qtip_content = gn_link + ncbi_link + omim_link - return qtip_content - //return ''+''+this.data().id +''+'' - }, - // content: { - // title: ''+''+this.target() +''+'', - // 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 = ''+''+this.data().id +''+'
' + ncbi_link = 'NCBI'+'
' + omim_link = 'OMIM'+'
' + qtip_content = gn_link + ncbi_link + omim_link + return qtip_content + //return ''+''+this.data().id +''+'' + }, + // content: { + // title: ''+''+this.target() +''+'', + // 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 = ''+'View Scatterplot'+'' - 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 = 'Sample r: ' + this.data().correlation + '
' + p_value_line = 'Sample p(r): ' + this.data().p_value + '
' + overlap_line = 'Overlap: ' + this.data().overlap + '
' + scatter_plot = 'View Scatterplot' + 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 %} + {% endblock %} {% block content %} {{ header("Network Graph") }} -
- +
+
+
+
+

Visualization Options

+ + + + + + + + + + + + + + + + + + + + + + + + +
+ Focus Trait +
+ +
Correlation Coefficient
+ 0               +               +/- 1 +
+ +
+ Layouts +
+ +
+

Download

+ + + + + + + + + + + + +
+ + + +
+ + + +
+ + + +
+
+
+
+
+ {% endblock %} {% block js %} -- cgit v1.2.3