var default_style = [ // the stylesheet for the graph { selector: 'node', style: { 'background-color': '#666', 'label': 'data(label)', 'font-size': 10 } }, { selector: 'edge', style: { 'width': 'data(width)', 'line-color': 'data(color)', 'target-arrow-color': '#ccc', 'target-arrow-shape': 'triangle', 'font-size': 8 } } ] var default_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; }, } 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: default_style, zoom: 12, layout: default_layout, 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(){ qtip_content = '' gn_link = ''+''+this.data().id +''+'
' qtip_content += gn_link if (typeof(this.data().geneid) !== 'undefined'){ ncbi_link = 'NCBI'+'
' qtip_content += ncbi_link } if (typeof(this.data().omim) !== 'undefined'){ omim_link = '
OMIM'+'
' qtip_content += omim_link } return qtip_content }, 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) $('#neg_slide').change(function() { eles.restore() pos_slide_val = $('#pos_slide').val(); cy.$("node[max_corr > " + $(this).val() + "][max_corr < " + pos_slide_val + "]").remove(); cy.$("edge[correlation > " + $(this).val() + "][correlation < " + pos_slide_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 }).run(); }); $('#pos_slide').change(function() { eles.restore() neg_slide_val = $('#neg_slide').val(); cy.$("node[max_corr > " + neg_slide_val +"][max_corr < " + $(this).val() + "]").remove(); cy.$("edge[correlation > " + neg_slide_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 }).run(); }); $('#reset_graph').click(function() { eles.restore() $('#pos_slide').val(0) $('#neg_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 }).run(); }); $('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 }).run(); }); $('select[name=layout_select]').change(function() { layout_type = $(this).val() cy.layout({ name: layout_type, fit: true, // whether to fit the viewport to the graph padding: 25 // the padding on fit }).run(); }); $('select[name=font_size]').change(function() { font_size = $(this).val() new_style = default_style new_style[0]['style']['font-size'] = parseInt(font_size) cy.style().fromJson(new_style).update() }); $('select[name=edge_width]').change(function() { //eles.restore() //ZS: This is needed, or else it alters the original object orig_elements = JSON.parse(JSON.stringify(elements_list)); width_multiplier = $(this).val() updated_elements = [] for (i=0; i < orig_elements.length; i++){ this_element = orig_elements[i] if ('source' in this_element['data']) { orig_width = this_element['data']['width'] this_element['data']['width'] = orig_width * width_multiplier } updated_elements.push(this_element) } cy.remove(eles) cy.add(updated_elements) cy.layout({ name: $('select[name=layout_select]').val(), fit: true, // whether to fit the viewport to the graph padding: 25 // the padding on fit }).run(); }); $('select[name=edge_width]').change(function() { //eles.restore() //ZS: This is needed, or else it alters the original object orig_elements = JSON.parse(JSON.stringify(elements_list)); width_multiplier = $(this).val() updated_elements = [] for (i=0; i < orig_elements.length; i++){ this_element = orig_elements[i] if ('source' in this_element['data']) { orig_width = this_element['data']['width'] this_element['data']['width'] = orig_width * width_multiplier } updated_elements.push(this_element) } cy.remove(eles) cy.add(updated_elements) cy.layout({ name: $('select[name=layout_select]').val(), fit: true, // whether to fit the viewport to the graph padding: 25 // the padding on fit }).run(); }); $("a#image_link").click(function(e) { var pngData = cy.png(); $(this).attr('href', pngData); $(this).attr('download', 'network_graph.png'); }); };