|
|
| Line 70: |
Line 70: |
|
| |
|
| $(function(){ | | $(function(){ |
|
| |
| var z_min = 0;
| |
| var z_max = 1;
| |
| var edge_type = "";
| |
|
| |
| var t;
| |
| var selected = false;
| |
|
| |
| function sliderTrack() {
| |
| z_min = 0; //$('#slider1').noUiSlider('getValue', {point: 'lower'});
| |
| z_max = 10; //$('#slider1').noUiSlider('getValue', {point: 'upper'});
| |
|
| |
| z_min = Math.round(z_min*100)/100;
| |
| z_max = Math.round(z_max*100)/100;
| |
|
| |
| $("#cyto_zscore_filter_min").val(z_min);
| |
| $("#cyto_zscore_filter_max").val(z_max);
| |
|
| |
| //clearTimeout(t);
| |
| //t = setTimeout("setScoreFilter()", 100);
| |
| }
| |
|
| |
| function sliderChange() {
| |
| sliderTrack();
| |
| setScoreFilter();
| |
| }
| |
|
| |
| function setScoreFilter() {
| |
| //vis.filter("edges", function(edge) {
| |
| //return (((edge.data.zscore >= z_min)&&(edge.data.zscore <= z_max)) || (!edge.data.zscore));
| |
| //}, true);
| |
| }
| |
|
| |
| function setEdgeFilter(type) {
| |
| edge_type = type;
| |
|
| |
| vis.filter("edges", function(edge) {
| |
| return ((edge_type == "") || (edge.data.type == edge_type));
| |
| }, true);
| |
| }
| |
|
| |
| function graphClick(event) {
| |
| var target = event.target;
| |
|
| |
| var lurl = "/resource_browser/RB_SearchResults?sq="+target.data["id"];
| |
| //window.location = lurl;
| |
| alert(lurl);
| |
| }
| |
|
| |
| function nodeClick(event) {
| |
| var target = event.target;
| |
| //alert(target.data["id"]);
| |
|
| |
| //selectFirstNeighbors(target.data["id"]);
| |
|
| |
| var fn = vis.firstNeighbors([target.data["id"]]);
| |
| var nodes = fn.neighbors.concat(fn.rootNodes);
| |
| vis.deselect();
| |
| vis.select(nodes);
| |
|
| |
| alert(nodes.length);
| |
| }
| |
|
| |
| function graphSelect() {
| |
|
| |
| var edges = vis.selected("edges");
| |
| var nodes = vis.selected("nodes");
| |
| //var container = document.getElementById("TF_list");
| |
|
| |
| if (edges.length == 0) {
| |
| if (nodes.length == 1) {
| |
| selectFirstNeighbors(nodes[0]);
| |
| return;
| |
| }
| |
| }
| |
|
| |
| var html = "<tr><th>node</th><th>type</th></tr>";
| |
| //var sel = vis.selected();
| |
| for (var i in nodes) {
| |
| var data = nodes[i].data;
| |
| html += "<tr><td>"+data.label+"</td><td>"+data.type+"</td></tr>";
| |
|
| |
| //selectFirstNeighbors(nodes[i]);
| |
| }
| |
| //($("#nodes_list").innerHTML);
| |
| $("#nodes_list").html(html);
| |
|
| |
| html = "<tr><th>Source TF</th><th>Target TF</th><th>Promoter</th><th>Z-Score</th></tr>";
| |
| //var sel = vis.selected();
| |
| for (var i in edges) {
| |
| var data = edges[i].data;
| |
| html += "<tr><td>"+data.source+"</td><td>"+data.target+"</td><td>"+(data.promoter ? data.promoter : "na")+"</td><td>"+(data.zscore ? data.zscore : "na")+"</td></tr>";
| |
| }
| |
| $("#edges_list").html(html);
| |
|
| |
| selected = ((edges.length > 0) || (nodes.length > 0));
| |
| vis.visualStyle(visual_style);
| |
|
| |
| //if ((edges.length > 0) && (nodes.length > 0)) {
| |
| // selected = true;
| |
|
| |
| //}
| |
| }
| |
|
| |
| function layoutChange() {
| |
| vis.layout($("#cyto_layout").val());
| |
| }
| |
|
| |
| function highlightFirstNeighbors(target) {
| |
| setTimeout(function() {
| |
| if (_mouseOverNode != null && _mouseOverNode.data.id === target.data.id) {
| |
| var fn = vis.firstNeighbors([target]);
| |
| var bypass = { nodes: {}, edges: {} };
| |
|
| |
| var allNodes = vis.nodes();
| |
| jQuery.each(allNodes, function(i, n) {
| |
| bypass.nodes[n.data.id] = { opacity: 0.2 };
| |
| });
| |
| var neighbors = fn.neighbors;
| |
| neighbors = neighbors.concat(fn.rootNodes);
| |
| jQuery.each(neighbors, function(i, n) {
| |
| if (n.data.label.substr(0,3) == "miR"){
| |
| bypass.nodes[n.data.id] = {opacity: 1, labelFontSize: 11, labelVerticalAnchor: "bottom", label: n.data.label.substr(0,3)+"\n"+n.data.label.substr(3,n.data.label.length)};
| |
| } else {
| |
| bypass.nodes[n.data.id] = { opacity: 1 };
| |
| }
| |
|
| |
| });
| |
|
| |
| var allEdges = vis.edges();
| |
| jQuery.each(allEdges, function(i, e) {
| |
| bypass.edges[e.data.id] = { opacity: 0.1 };
| |
| });
| |
| var edges = fn.edges;
| |
| jQuery.each(edges, function(i, e) {
| |
| bypass.edges[e.data.id] = { opacity: 1, width: 2 };
| |
| });
| |
|
| |
| if (target.data.label.substr(0,3) == "miR"){
| |
| bypass.nodes[target.data.id] = {labelFontSize: 11, labelVerticalAnchor: "bottom"};
| |
| }
| |
|
| |
| vis.visualStyleBypass(bypass);
| |
| }
| |
| }, 400);
| |
| }
| |
|
| |
| function clearFirstNeighborsHighligh() {
| |
| setTimeout(function() {
| |
| if (_mouseOverNode == null) {
| |
| vis.visualStyleBypass({});
| |
| }
| |
| }, 400);
| |
| }
| |
|
| |
| function selectFirstNeighbors(node) {
| |
| var fn = vis.firstNeighbors([node]);
| |
| var nodes = fn.neighbors.concat(fn.rootNodes);
| |
| var edges = fn.edges;
| |
|
| |
| vis.deselect();
| |
| vis.select(nodes);
| |
| vis.select(edges);
| |
| }
| |
|
| |
| function exportNet(type) { //TODO
| |
| if (type == "sif") {
| |
| vis.exportNetwork(type, 'cytoscapeNetworkExport.do?type='+type, { interactionAttr: "label", nodeAttr: "label" });
| |
| } else {
| |
| vis.exportNetwork(type, 'cytoscapeNetworkExport.do?type='+type);
| |
| }
| |
| }
| |
|
| |
| $("#cyto_layout").change(function(){
| |
| layoutChange();
| |
| return false;
| |
| });
| |
|
| |
| $("#cyto_recalc").click(function(){
| |
| layoutChange();
| |
| return false;
| |
| });
| |
|
| |
| $("#cyto_tf_motif_filter").click(function(){
| |
| setEdgeFilter("has_motif");
| |
| return false;
| |
| });
| |
|
| |
| $("#cyto_motif_tf_filter").click(function(){
| |
| setEdgeFilter("promotes");
| |
| return false;
| |
| });
| |
|
| |
| $("#cyto_all_filter").click(function(){
| |
| setEdgeFilter("");
| |
| return false;
| |
| });
| |
| | | |
| // id of Cytoscape Web container div | | // id of Cytoscape Web container div |
| var div_id = "cytoscapeweb"; | | var div_id = "cytoscapeweb"; |
|
| | |
| var colorMapper = {
| |
| attrName: "type",
| |
| entries: [ { attrValue: "motif", value: "#ff9900" },
| |
| { attrValue: "tf", value: "#0099ff" } ]
| |
| };
| |
|
| |
| var shapeMapper = {
| |
| attrName: "type",
| |
| entries: [ { attrValue: "motif", value: "rectangle" },
| |
| { attrValue: "tf", value: "ELLIPSE" } ]
| |
| };
| |
|
| |
| var edgeColorMapper = {
| |
| attrName: "type",
| |
| entries: [ { attrValue: "has_motif", value: "#ff9900" }, { attrValue: "promotes", value: "#0099ff" } ]
| |
| };
| |
|
| |
| var edgeArrowMapper = {
| |
| attrName: "type",
| |
| entries: [ { attrValue: "has_motif", value: "arrow" }, { attrValue: "promotes", value: "delta" } ]
| |
| };
| |
|
| |
| var edgeTooltipMapper = {
| |
| attrName: "type",
| |
| entries: [ { attrValue: "has_motif", value: "" }, { attrValue: "promotes", value: "<b>Promoter: ${promoter}</b><br />Z-Score: ${zscore}" } ]
| |
| };
| |
|
| |
| // visual style we will use | | // visual style we will use |
| var visual_style = { | | var visual_style = { |
| Line 308: |
Line 84: |
| //label: { passthroughMapper: { attrName: "id" } }, | | //label: { passthroughMapper: { attrName: "id" } }, |
| tooltipText: "<b>${type}: ${label}</b>", | | tooltipText: "<b>${type}: ${label}</b>", |
| shape: { defaultValue: "ellipse", discreteMapper: shapeMapper }, | | //shape: { defaultValue: "ellipse", discreteMapper: shapeMapper }, |
| borderWidth: 1, | | borderWidth: 1, |
| borderColor: "#000000", | | borderColor: "#000000", |
| Line 344: |
Line 120: |
| //swfPath: "swf/CytoscapeWeb", | | //swfPath: "swf/CytoscapeWeb", |
| //flashInstallerPath: "swf/playerProductInstall" | | //flashInstallerPath: "swf/playerProductInstall" |
| swfPath: "/resource_browser/rb_js/cytoscapeweb/swf/CytoscapeWeb",
| | swfPath: "/resource_browser/rb_js/cytoscapeweb/swf/CytoscapeWeb", |
| flashInstallerPath: "/resource_browser/rb_js/cytoscapeweb/swf/playerProductInstall"
| | flashInstallerPath: "/resource_browser/rb_js/cytoscapeweb/swf/playerProductInstall" |
| }; | | }; |
| | | |
| var vis = new org.cytoscapeweb.Visualization(div_id, options); | | var vis = new org.cytoscapeweb.Visualization(div_id, options); |
| | | |
| vis["customOpacity"] = function (data) {
| | vis["customOpacity"] = function (data) { |
| return (selected) ? 0.3 : 0.6;
| | return (selected) ? 0.3 : 0.6; |
| };
| | }; |
| | | |
| // callback when Cytoscape Web has finished drawing | | // callback when Cytoscape Web has finished drawing |
| vis.ready(function() { | | vis.ready(function() { |
|
| |
| // add a listener for when nodes and edges are clicked
| |
| //vis.addListener("dblclick", "nodes", graphClick)
| |
| //.addListener("dblclick", "edges", graphClick)
| |
| //.addListener("click", "nodes", nodeClick)
| |
| //.addListener("select", "", graphSelect)
| |
| //.addListener("deselect", "", graphSelect);
| |
|
| |
| //var edges = vis.edges();
| |
|
| |
| //for (var i in edges) {
| |
| //var data = edges[i].data;
| |
| //if (z_max < data.zscore) { z_max = data.zscore; }
| |
| //}
| |
|
| |
| //z_max = Math.ceil(z_max);
| |
| //z_min = Math.floor(z_min);
| |
|
| |
| //$(".sliderbar").noUiSlider("init", { scale: [z_min, z_max], startMin: z_min, startMax: z_max, tracker: sliderTrack, change: sliderChange });
| |
| //$("#cyto_zscore_filter_min").val(z_min);
| |
| //$("#cyto_zscore_filter_max").val(z_max);
| |
| //$("#cyto_zscore_min").html(z_min);
| |
| //$("#cyto_zscore_max").html(z_max);
| |
|
| |
| //graphSelect(); // Empty
| |
|
| |
| //vis.filter("edges", function(edge) {
| |
| // return (edge.data.type = "promotes");
| |
| //}, true);
| |
| | | |
| }); | | }); |
