Line 72:
Line 72: </script>
</script>
<script type="text/javascript">
<script type="text/javascript" src ="/resource_browser/nwfiles /f5_cytoview .js "></script>
$(function(){
var z_min = 0;
var z_max = 1;
var edge_type = "";
var t;
var selected = false;
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 = "https://fantom5-collaboration.gsc.riken.jp/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");
//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</th><th>Target</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 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);
}
$("#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;
});
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}" } ]
};
// id of Cytoscape Web container div
var div_id = "cytoscapeweb";
// 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>
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).
Cytoscape Web will replace the contents of this div with your graph.
Style
Layout:
Preset
Force Directed
Circle
Radial
Tree
(recalculate)
Source TF Target TF Promoter Z-Score
