Personal tools

Cytoscape test3: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
 
(48 intermediate revisions by the same user not shown)
Line 1: Line 1:
<html>  
<html>  
        <style>
            /* The Cytoscape Web container must have its dimensions set. */
            #cytoscapeweb { width: 100%; height: 100%; }
        </style>


         <h1 id="firstHeading" class="firstHeading">FF:10717-109I6, TF to Motif to TF network</h1>
         <h1 id="firstHeading" class="firstHeading">FF:10717-109I6, TF to Motif to TF network</h1>
Line 12: Line 7:
</p>
</p>


        <div id="cytoscapeweb" style="width:800px;height:600px">
</html>
            Cytoscape Web will replace the contents of this div with your graph.
 
        </div>
<html>
<div id="style_panel">
 
<h3>Style</h3>
<!-- F5 Cytoscape App HTML -->
<br />Layout: <select id="cyto_layout">
<div id="f5_cytoscapeweb">
  <option value="ForceDirected">Force Directed</option>
<div id="tabs_box">
  <option value="Circle">Circle</option>
<div id="tabs">
  <option value="Radial">Radial</option>
<ul>
  <option value="Tree">Tree</option>
<li><a href="#style_panel">Layout</a></li>
</select><a href="#" id="cyto_recalc">(recalculate)</a>
<li><a href="#filter_panel">Filter</a></li>
<li><a href="#export_panel">Export</a></li>
<li><a href="#properties_panel_nodes">Nodes</a></li>
<li><a href="#properties_panel_edges">Edges</a></li>
</ul>
<div id="style_panel">
<label class="style">Layout:</label>
<select id="cyto_layout" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
  <option value="Preset">Preset</option>
  <option value="ForceDirected" selected>Force Directed</option>
  <option value="Circle">Circle</option>
  <option value="Radial">Radial</option>
  <option value="Tree">Tree</option>
</select>
<button id="cyto_recalc">Recalculate</button>
<label class="style">Labels:</label>
<input type="checkbox" id="cyto_node_labels" checked> Nodes</td></tr>
<br /><input type="checkbox" id="cyto_edge_labels"> Edges</td></tr>
</div>
<div id="filter_panel">
<div>
<label class="filter">Show edges:</label>
<div id="edge_type_filter">
<input type="checkbox" id="cyto_edges_binds_to" value="binds_to" checked>TF->MOTIF</input>
<br /><input type="checkbox" id="cyto_edges_promotes" value="promotes" checked>Promoters</input>
</div>
<div id="z_filter" class="slider">Promoter Z-Score:</div>
 
<p />
<div id="degree_filter" class="slider">Motif degree:</div>
<div id="tf_indegree_filter" class="slider">TF indegree:</div>
 
<div id="nodes_type_filter">
<label class="filter">TF outdegree:</label>
<input type="checkbox" id="cyto_nodes_tf_src" value="tf" checked>Source (Outdegree > 0)</input>
<br /><input type="checkbox" id="cyto_nodes_tf" value="tf" checked>Target (Outdegree = 0)</input>
</div>
 
</div>
</div>
<div id="properties_panel_nodes" class="properties_panel scrollable">
<div>
<button id="btn_show_all_nodes" class="rt_btn">Show all nodes</button>
<button id="btn_show_select_nodes" class="rt_btn">Show only selected nodes</button>
<p /><table id="nodes_list" class="wikitable">
</table>
</div>
</div>
<div id="properties_panel_edges" class="properties_panel scrollable">
<div>
<button id="btn_show_all_edges" class="rt_btn">Show all edges</button>
<button id="btn_show_select_edges" class="rt_btn">Show only selected edges</button>
<p /><table id="edges_list" class="wikitable">
</table>
</div>
</div>
<div id="export_panel">
<label class="export">Export Network:</label>
  <button id="btn_exportGraphml">graphml</button>
  <button id="btn_exportXgmml">xgmml</button>
  <button id="btn_exportSIF">sif</button>
  <button id="btn_exportJSON">JSON</button>
<label class="export">Export Image:</label>
  <button id="btn_exportPDF">PDF</button>
  <button id="btn_exportPNG">PNG</button>
  <button id="btn_exportSVG">SVG</button>
</div>
</div>
</div>
        <div id="filter_panel">
<h3>Filter</h3>
<table>
<tr><th>Z-Score</th><tr>
<tr><td><span id="cyto_zscore_min">0.00</span> &nbsp;</td><td>&nbsp;&nbsp;<div id="slider1" class="sliderbar"></div>&nbsp;&nbsp;</td><td>&nbsp; <span id="cyto_zscore_max">0.00</span></td></tr>
<tr><td></td><td><input type="text" id="cyto_zscore_filter_min" value="0" style="float: left;"/>  <input type="text" id="cyto_zscore_filter_max" value="100" style="float: right;"/></td><td></td></tr>
</table>
<a href="#" id="cyto_tf_motif_filter">TF->MOTIF</a> <a href="#" id="cyto_motif_tf_filter">MOTIF->TF</a> <a href="#" id="cyto_all_filter">TF->MOTIF->TF</a>
</div>
</div>
<div id="properties_panel">
<div style="width: 50%; height:300px; overflow-y:scroll; resize:both; float: left; font-size: x-small;">
<table id="nodes_list" border="1" width="100%" class="wikitable">
<tr><th>TF</th><th>Motif</th></tr>
</table>
</div>
<div style="width: 50%; height:300px; overflow-y:scroll; resize:both; font-size: x-small;">
<table id="edges_list" border="1" width="100%" class="wikitable">
<tr><th>Source TF</th><th>Target TF</th><th>Promoter</th><th>Z-Score</th></tr>
</table>
</div>
        </div>


<div id="cytoscapeweb"></div>
<div id="legend"><b>LEGEND:</b> <span class="tf">TF <img src="/resource_browser/nwfiles/tf.png" /></span>, <span class="motif">MOTIF <img src="/resource_browser/nwfiles/motif.png" /></span>,
<br /><span class="tf">MOTIF->TF <img src="/resource_browser/nwfiles/motif-tf.png" /></span>, <span class="motif">TF->MOTIF <img src="/resource_browser/nwfiles/tf-motif.png" /></span></div>
</div>
<!-- Header Section -->
<!-- JQuery UI -->
<script type="text/javascript" src="/resource_browser/nwfiles/jquery-ui.min.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" />


         <!-- JSON support for IE (needed to use JS API) -->
         <!-- JSON support for IE (needed to use JS API) -->
Line 56: Line 112:
         <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/cytoscapeweb.min.js"></script>
         <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/cytoscapeweb.min.js"></script>


        <!-- No UI Slider -->
<!-- F5 Cytoscape app -->
        <script src="http://cdn.refreshless.com/noUiSlider/1.2.8/jquery.nouislider.min.js"></script>
<link href="/resource_browser/nwfiles/f5_cytoview_2.css" rel="stylesheet"/>
         <link href="http://cdn.refreshless.com/noUiSlider/1.2.8/nouislider.css" rel="stylesheet">
         <script type="text/javascript" src="/resource_browser/nwfiles/f5_cytoview_5.js"></script>  


<!-- Data Loading Section -->
<script type="text/javascript">
// Load Data
//var durl = "/resource_browser/nwfiles/</html>{{{CNhs}}}.{{{FFid}}}.xgmml<html>";
                var durl = "/resource_browser/nwfiles/CNhs10630.10024-101D6.xgmml"


     
//$.get(durl, function(data) {
        <!-- Load data -->
// xml = data;
<script type="text/javascript">
// //alert('Load was performed.');
var durl = "/resource_browser/nwfiles/10717-109I6_2.graphml";
//})
//$.get(durl, function(data) {
// xml = data;
// //alert('Load was performed.');
//})
var request = new XMLHttpRequest();
request.open("GET", durl , false);
request.send(null);
var xml = request.responseText;


$(function(){
var request = new XMLHttpRequest();
request.open("GET", durl , false);
request.send(null);
var xml = request.responseText;


var z_min = 0;
// initialization cytoscape options
var z_max = 1;
var options = {
var edge_type = "";
swfPath: "/resource_browser/rb_js/cytoscapeweb/swf/CytoscapeWeb",
flashInstallerPath: "/resource_browser/rb_js/cytoscapeweb/swf/playerProductInstall"
var t;
};
var selected = false;
</script>
function sliderTrack() {
z_min = $('#slider1').noUiSlider('getValue', {point: 'lower'});
z_max = $('#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 && 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
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
var visual_style = {
global: {
backgroundColor: "#ffffff",
opacity: 0.1,
tooltipDelay: 10
},
nodes: {
//label: { passthroughMapper: { attrName: "id" } },
tooltipText: "<b>${type}: ${label}</b>",
shape: { defaultValue: "ellipse", discreteMapper: shapeMapper },
borderWidth: 1,
borderColor: "#000000",
size: 30,
//color: "#ffffff",
color: { defaultValue: "#ff9900", discreteMapper: colorMapper },
//opacity: 0.8,
opacity: { customMapper: { functionName: "customOpacity" } },
selectionOpacity: 0.8,
hoverOpacity: 0.8,
labelHorizontalAnchor: "center",
mass: 0
},
edges: {
width: { passthroughMapper: { attrName: "zscore" } },
label: { passthroughMapper: { attrName: "promoter" } },
//tooltipText: "<b>Promoter: ${promoter}</b><br />Z-Score: ${zscore}",
tooltipText: { defaultValue: "", discreteMapper: edgeTooltipMapper },
//color: "#011e59",
color: { defaultValue: "#011e59", discreteMapper: edgeColorMapper },
targetArrowShape: { defaultValue: "delta", discreteMapper: edgeArrowMapper },
sourceArrowShape: "",
labelGlowOpacity: 0.8,
//opacity: 0.8,
opacity: { customMapper: { functionName: "customOpacity" } },
selectionOpacity: 0.8,
hoverOpacity: 0.8,
labelGlowColor: "#000000",
weight: 50000
}
};
// initialization options
var options = {
//swfPath: "swf/CytoscapeWeb",
//flashInstallerPath: "swf/playerProductInstall"
                swfPath: "/resource_browser/rb_js/cytoscapeweb/swf/CytoscapeWeb",
                flashInstallerPath: "/resource_browser/rb_js/cytoscapeweb/swf/playerProductInstall"
            };
               
            var vis = new org.cytoscapeweb.Visualization(div_id, options);
vis["customOpacity"] = function (data) {
return (selected) ? 0.3 : 0.6;
};
           
            // callback when Cytoscape Web has finished drawing
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);
});
var layoutOptions = {
//gravitation: -500,
autoStabilize: false,
//maxTime: 240000,
//weightAttr: "weight",
//weightNorm: "log",
//mass: 0
};
 
// draw options
var draw_options = {
// your data goes here
network: xml,
visualStyle: visual_style,
nodeTooltipsEnabled: true,
edgeTooltipsEnabled: true,
layout: { name: "ForceDirected", options: layoutOptions },
// hide pan zoom
panZoomControlVisible: true
};
               
            vis.draw(draw_options);
        });
 
        </script>
       


</html>
</html>

Latest revision as of 11:28, 20 July 2012

FF:10717-109I6, TF to Motif to TF network

Mouseover nodes and edges to see attributes. Motifs are shown in orange, TFs are shown in blue. Promoter and z-score are attributes of the Motif to TF edges (blue arrow). TF to Motif edges are shown in orange.

Motifs shown are the top (maximum 30) motifs in the sample. TFs shown have at least one CAGE promoter with at at least 10 TPM expression (RLE normalized) in the sample. Edges shown have a z-score of at least 1.5 (based on correlation between motif activity and promoter expression).

Nodes
Edges
TF->MOTIF
Promoters
Promoter Z-Score:

Motif degree:
TF indegree:
Source (Outdegree > 0)
Target (Outdegree = 0)

LEGEND: TF , MOTIF ,
MOTIF->TF , TF->MOTIF

Retrieved from "http://f5-webapp4.gsc.riken.jp/resource_browser/index.php?title=Cytoscape_test3&oldid=1851629"