|
|
| 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> |
