From ecdb906b3bb43c9b8e863b434ff63d444d439a65 Mon Sep 17 00:00:00 2001 From: DannyArends Date: Mon, 7 Nov 2016 16:55:49 +0100 Subject: Javascript file (based on the correlation file) to dsplay CTL networks using cytoscape.js --- wqflask/wqflask/static/new/javascript/ctl_graph.js | 199 +++++++++++++++++++++ 1 file changed, 199 insertions(+) create mode 100644 wqflask/wqflask/static/new/javascript/ctl_graph.js diff --git a/wqflask/wqflask/static/new/javascript/ctl_graph.js b/wqflask/wqflask/static/new/javascript/ctl_graph.js new file mode 100644 index 00000000..94bd7e9d --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/ctl_graph.js @@ -0,0 +1,199 @@ +window.onload=function() { + // id of Cytoscape Web container div + //var div_id = "cytoscapeweb"; + + var cy = cytoscape({ + container: $('#cytoscapeweb'), // container to render in + + elements: elements_list, + + style: [ // the stylesheet for the graph + { + selector: 'node', + style: { + 'background-color': '#666', + 'label': 'data(symbol)', + 'font-size': 10 + } + }, + + { + selector: 'edge', + style: { + 'width': 'data(width)', + 'line-color': 'data(color)', + 'target-arrow-color': '#ccc', + 'target-arrow-shape': 'none', + 'font-size': 8, + 'curve-style': 'bezier' + } + } + ], + + zoom: 12, + layout: { name: 'circle', + fit: true, // whether to fit the viewport to the graph + padding: 30 // the padding on fit + //idealEdgeLength: function( edge ){ return edge.data['correlation']*10; }, + }, + + + zoomingEnabled: true, + userZoomingEnabled: true, + panningEnabled: true, + userPanningEnabled: true, + boxSelectionEnabled: false, + selectionType: 'single', + + // rendering options: + 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 + minZoom: 0.1, // min zoom level + maxZoom: 10, // max zoom level + fitPadding: 30, // padding when fitting + panSpeed: 10, // how many ms in between pan ticks + panDistance: 10, // max pan distance per tick + panDragAreaSize: 75, // the length of the pan drag box in which the vector for panning is calculated (bigger = finer control of pan speed and direction) + panMinPercentSpeed: 0.25, // the slowest speed we can pan by (as a percent of panSpeed) + panInactiveArea: 8, // radius of inactive area in pan drag box + panIndicatorMinOpacity: 0.5, // min opacity of pan indicator (the draggable nib); scales from this to 1.0 + zoomOnly: false, // a minimal version of the ui only with zooming (useful on systems with bad mousewheel resolution) + fitSelector: undefined, // selector of elements to fit + animateOnFit: function(){ // whether to animate on fit + return false; + }, + fitAnimationDuration: 1000, // duration of animation on fit + + // icon class names + sliderHandleIcon: 'fa fa-minus', + zoomInIcon: 'fa fa-plus', + zoomOutIcon: 'fa fa-minus', + resetIcon: 'fa fa-expand' + }; + + cy.panzoom( defaults ); + + 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(){ + edge_ID = 'Edge: ' + this.data().id + '
' + lod_score = 'LOD: ' + this.data().lod + '
' + return edge_ID + lod_score + }, + position: { + my: 'top center', + at: 'bottom center' + }, + style: { + classes: 'qtip-bootstrap', + tip: { + width: 16, + height: 8 + } + } + }); + } + + create_qtips(cy) + + $('#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 + }); + + }); + + $('#reset_graph').click(function() { + eles.restore() + $('#slide').val(0) + 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(); + + $(this).attr('href', pngData); + $(this).attr('download', 'network_graph.png'); + + console.log("TESTING:", image_link) + + }); + + +}; + + -- cgit v1.2.3 From 65699e8bd17b41a83d1d5013dd81e4328b4d3797 Mon Sep 17 00:00:00 2001 From: DannyArends Date: Mon, 7 Nov 2016 16:56:30 +0100 Subject: Adding code to the ctl analysis file to output nodes and edges for cytoscape --- wqflask/wqflask/ctl/ctl_analysis.py | 51 ++++++++++++++++++++++++++++++++++--- 1 file changed, 48 insertions(+), 3 deletions(-) diff --git a/wqflask/wqflask/ctl/ctl_analysis.py b/wqflask/wqflask/ctl/ctl_analysis.py index 7a42b2f8..e21b8500 100644 --- a/wqflask/wqflask/ctl/ctl_analysis.py +++ b/wqflask/wqflask/ctl/ctl_analysis.py @@ -6,6 +6,8 @@ import scipy as sp # SciPy import rpy2.robjects as ro # R Objects import rpy2.rinterface as ri +import simplejson as json + from base.webqtlConfig import GENERATED_IMAGE_DIR from utility import webqtlUtil # Random number for the image from utility import genofile_parser # genofile_parser @@ -73,6 +75,8 @@ class CTL(object): self.r_CTLnetwork = ro.r["CTLnetwork"] # Map the CTLnetwork function self.r_CTLprofiles = ro.r["CTLprofiles"] # Map the CTLprofiles function self.r_plotCTLobject = ro.r["plot.CTLobject"] # Map the CTLsignificant function + self.nodes_list = [] + self.edges_list = [] print("Obtained pointers to CTL functions") def run_analysis(self, requestform): @@ -99,7 +103,7 @@ class CTL(object): genofilelocation = locate(dataset.group.name + ".geno", "genotype") parser = genofile_parser.ConvertGenoFile(genofilelocation) parser.process_csv() - + print(dataset.group) # Create a genotype matrix individuals = parser.individuals markers = [] @@ -129,9 +133,11 @@ class CTL(object): rPheno = r_t(ro.r.matrix(r_as_numeric(r_unlist(traits)), nrow=len(self.trait_db_list), ncol=len(individuals), dimnames = r_list(self.trait_db_list, individuals), byrow=True)) + print(rPheno) + # Use a data frame to store the objects - rPheno = r_data_frame(rPheno) - rGeno = r_data_frame(rGeno) + rPheno = r_data_frame(rPheno, check_names = False) + rGeno = r_data_frame(rGeno, check_names = False) # Debug: Print the genotype and phenotype files to disk #r_write_table(rGeno, "~/outputGN/geno.csv") @@ -169,6 +175,44 @@ class CTL(object): # Flush any output from R sys.stdout.flush() + # Create the interactive graph for cytoscape visualization (Nodes) + # TODO DA : make this a function + for trait in self.trait_db_list: + if trait != "": + ts = trait.split(':') + gt = TRAIT.GeneralTrait(name = ts[0], dataset_name = ts[1]) + node_dict = { 'data' : {'id' : str(gt.name) + ":" + str(gt.dataset.name), + 'sid' : str(gt.name), + 'dataset' : str(gt.dataset.name), + 'label' : gt.name, + 'symbol' : gt.symbol, + 'geneid' : gt.geneid, + 'omim' : gt.omim } } + self.nodes_list.append(node_dict) + + # Create the interactive graph for cytoscape visualization (Edges) + # TODO DA : make this a function + print(type(significant)) + if not type(significant) == ri.RNULLType: + for x in range(len(significant[0])): + print(significant[0][x], significant[1][x], significant[2][x]) # Debug to console + tsS = significant[0][x].split(':') # Source + tsT = significant[2][x].split(':') # Target + gtS = TRAIT.GeneralTrait(name = tsS[0], dataset_name = tsS[1]) # Retrieve Source info from the DB + gtT = TRAIT.GeneralTrait(name = tsT[0], dataset_name = tsT[1]) # Retrieve Target info from the DB + edge_data = {'id' : str(gtS.symbol) + '_' + significant[1][x] + '_' + str(gtT.symbol), + 'source' : str(gtS.name) + ":" + str(gtS.dataset.name), + 'target' : str(gtT.name) + ":" + str(gtT.dataset.name), + 'lod' : significant[3][x], + 'color' : "#ff0000", + 'width' : significant[3][x] } + edge_dict = { 'data' : edge_data } + self.edges_list.append(edge_dict) + significant[0][x] = gtS.symbol + " (" + gtS.name + ")" + significant[2][x] = gtT.symbol + " (" + gtT.name + ")" + + self.elements = json.dumps(self.nodes_list + self.edges_list) + def loadImage(self, path, name): print("pre-loading imgage results:", self.results[path]) imgfile = open(self.results[path], 'rb') @@ -188,6 +232,7 @@ class CTL(object): print("Processing CTL output") template_vars = {} template_vars["results"] = self.results + template_vars["elements"] = self.elements self.render_image(self.results) sys.stdout.flush() return(dict(template_vars)) -- cgit v1.2.3 From 814ddb8790a9e65aa4a6094643566d210e8a14ce Mon Sep 17 00:00:00 2001 From: DannyArends Date: Mon, 7 Nov 2016 16:57:03 +0100 Subject: Adding the reference to the paper, and updating the output to show the cytoscape.js network --- wqflask/wqflask/templates/ctl_results.html | 36 +++++++++++++++++++++++++++--- wqflask/wqflask/templates/ctl_setup.html | 8 ++++++- 2 files changed, 40 insertions(+), 4 deletions(-) diff --git a/wqflask/wqflask/templates/ctl_results.html b/wqflask/wqflask/templates/ctl_results.html index 00ccecb6..969ca18a 100644 --- a/wqflask/wqflask/templates/ctl_results.html +++ b/wqflask/wqflask/templates/ctl_results.html @@ -1,17 +1,30 @@ {% extends "base.html" %} +{% block css %} + + + + +{% endblock %} + {% block title %}CTL results{% endblock %} {% block content %}

CTL Results

{{(request.form['trait_list'].split(',')|length)}} phenotypes as input
-

Network Figure

+ + +

CTL/QTL Plots for individual traits

{% for r in range(2, (request.form['trait_list'].split(',')|length +1)) %} @@ -39,9 +52,26 @@ {% endfor %} +

Network Figure

+
+
+{% endblock %} +{% block js %} + + + + + + + + + - + {% endblock %} + diff --git a/wqflask/wqflask/templates/ctl_setup.html b/wqflask/wqflask/templates/ctl_setup.html index a05379a8..992494dd 100644 --- a/wqflask/wqflask/templates/ctl_setup.html +++ b/wqflask/wqflask/templates/ctl_setup.html @@ -11,7 +11,13 @@ Please make sure you select enough traits to perform CTL. Your collection needs to contain at least 2 different traits. You provided {{request.form['trait_list'].split(',')|length}} traits as input. {% else %} -

CTL analysis parameters

+

CTL analysis

+ CTL analysis is published as open source software, if you are using this method in your publications, please cite:

+ Arends D, Li Y, Brockmann GA, Jansen RC, Williams RW, Prins P
+ Correlation trait locus (CTL) mapping: Phenotype network inference subject to genotype.
+ The Journal of Open Source Software (2016)
+ http://joss.theoj.org/papers/10.21105/joss.00087 +

{{(request.form['trait_list'].split(',')|length)}} traits as input
-- cgit v1.2.3 From 3fc1902c20d37038e06e94f02a7ff0bb288e0e4d Mon Sep 17 00:00:00 2001 From: DannyArends Date: Mon, 7 Nov 2016 17:16:10 +0100 Subject: Adding functions addNode and addEdge, to separate out the cytoscape graph creation from the main CTL analysis code --- wqflask/wqflask/ctl/ctl_analysis.py | 56 ++++++++++++++++++------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/wqflask/wqflask/ctl/ctl_analysis.py b/wqflask/wqflask/ctl/ctl_analysis.py index e21b8500..3d2d7a37 100644 --- a/wqflask/wqflask/ctl/ctl_analysis.py +++ b/wqflask/wqflask/ctl/ctl_analysis.py @@ -79,6 +79,26 @@ class CTL(object): self.edges_list = [] print("Obtained pointers to CTL functions") + def addNode(self, gt): + node_dict = { 'data' : {'id' : str(gt.name) + ":" + str(gt.dataset.name), + 'sid' : str(gt.name), + 'dataset' : str(gt.dataset.name), + 'label' : gt.name, + 'symbol' : gt.symbol, + 'geneid' : gt.geneid, + 'omim' : gt.omim } } + self.nodes_list.append(node_dict) + + def addEdge(self, gtS, gtT, significant, x): + edge_data = {'id' : str(gtS.symbol) + '_' + significant[1][x] + '_' + str(gtT.symbol), + 'source' : str(gtS.name) + ":" + str(gtS.dataset.name), + 'target' : str(gtT.name) + ":" + str(gtT.dataset.name), + 'lod' : significant[3][x], + 'color' : "#ff0000", + 'width' : significant[3][x] } + edge_dict = { 'data' : edge_data } + self.edges_list.append(edge_dict) + def run_analysis(self, requestform): print("Starting CTL analysis on dataset") self.trait_db_list = [trait.strip() for trait in requestform['trait_list'].split(',')] @@ -162,7 +182,7 @@ class CTL(object): self.r_lineplot(res, significance = significance) r_dev_off() - n = 2 + n = 2 # We start from 2, since R starts from 1 :) for trait in self.trait_db_list: # Create the QTL like CTL plots self.results['imgurl' + str(n)] = webqtlUtil.genRandStr("CTL_") + ".png" @@ -175,23 +195,7 @@ class CTL(object): # Flush any output from R sys.stdout.flush() - # Create the interactive graph for cytoscape visualization (Nodes) - # TODO DA : make this a function - for trait in self.trait_db_list: - if trait != "": - ts = trait.split(':') - gt = TRAIT.GeneralTrait(name = ts[0], dataset_name = ts[1]) - node_dict = { 'data' : {'id' : str(gt.name) + ":" + str(gt.dataset.name), - 'sid' : str(gt.name), - 'dataset' : str(gt.dataset.name), - 'label' : gt.name, - 'symbol' : gt.symbol, - 'geneid' : gt.geneid, - 'omim' : gt.omim } } - self.nodes_list.append(node_dict) - - # Create the interactive graph for cytoscape visualization (Edges) - # TODO DA : make this a function + # Create the interactive graph for cytoscape visualization (Nodes and Edges) print(type(significant)) if not type(significant) == ri.RNULLType: for x in range(len(significant[0])): @@ -200,16 +204,12 @@ class CTL(object): tsT = significant[2][x].split(':') # Target gtS = TRAIT.GeneralTrait(name = tsS[0], dataset_name = tsS[1]) # Retrieve Source info from the DB gtT = TRAIT.GeneralTrait(name = tsT[0], dataset_name = tsT[1]) # Retrieve Target info from the DB - edge_data = {'id' : str(gtS.symbol) + '_' + significant[1][x] + '_' + str(gtT.symbol), - 'source' : str(gtS.name) + ":" + str(gtS.dataset.name), - 'target' : str(gtT.name) + ":" + str(gtT.dataset.name), - 'lod' : significant[3][x], - 'color' : "#ff0000", - 'width' : significant[3][x] } - edge_dict = { 'data' : edge_data } - self.edges_list.append(edge_dict) - significant[0][x] = gtS.symbol + " (" + gtS.name + ")" - significant[2][x] = gtT.symbol + " (" + gtT.name + ")" + self.addNode(gtS) + self.addNode(gtT) + self.addEdge(gtS, gtT, significant, x) + + significant[0][x] = gtS.symbol + " (" + gtS.name + ")" # Update the trait name for the displayed table + significant[2][x] = gtT.symbol + " (" + gtT.name + ")" # Update the trait name for the displayed table self.elements = json.dumps(self.nodes_list + self.edges_list) -- cgit v1.2.3 From fa2ce04bf512cf393b504c50510af450c14459b9 Mon Sep 17 00:00:00 2001 From: DannyArends Date: Tue, 8 Nov 2016 18:48:50 +0100 Subject: Adding the joss badge --- wqflask/wqflask/templates/ctl_setup.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/wqflask/wqflask/templates/ctl_setup.html b/wqflask/wqflask/templates/ctl_setup.html index 992494dd..a7ad5759 100644 --- a/wqflask/wqflask/templates/ctl_setup.html +++ b/wqflask/wqflask/templates/ctl_setup.html @@ -16,7 +16,7 @@ Arends D, Li Y, Brockmann GA, Jansen RC, Williams RW, Prins P
Correlation trait locus (CTL) mapping: Phenotype network inference subject to genotype.
The Journal of Open Source Software (2016)
- http://joss.theoj.org/papers/10.21105/joss.00087 + Published in

{{(request.form['trait_list'].split(',')|length)}} traits as input -- cgit v1.2.3