Personal tools

Cytoscape test: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
Line 3: Line 3:
         <style>
         <style>
             /* The Cytoscape Web container must have its dimensions set. */
             /* The Cytoscape Web container must have its dimensions set. */
             #cytoscapeweb { width: 100%; height: 100%; }
             #cytoscapeweb { width: 100%; height: 100%; }
         </style>
         </style>
Line 21: Line 20:
         <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>


<p>TF to TF network. Motif is an attribute of the source TF node.  Promoter is an attribute of the TF to TF edge.</p>
       
         <!-- Load data -->
         <!-- Load data -->
<script type="text/javascript">
<script type="text/javascript">
Line 29: Line 30:
</script>
</script>


<p>TF to TF network. Motif is an attribute of the source TF node.  Promoter is an attribute of the TF to TF edge.</p>
       
         <script type="text/javascript">
         <script type="text/javascript">
            window.onload=function() {
$(function(){
                // id of Cytoscape Web container div
                var div_id = "cytoscapeweb";
var z_min = 0;
               
var z_max = 1;
                // you could also use other formats (e.g. GraphML) or grab the network data via AJAX
var t;
var selected = false;
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 graphSelect() {
var edges = vis.selected("edges");
var nodes = vis.selected("nodes");


                //var sif = 'node1 typeA node2 node3 node4 node5\nnode2 typeB node6';
selected = ((edges.length > 0) || (nodes.length > 0));
               
vis.visualStyle(visual_style);
                // initialization options
}
// id of Cytoscape Web container div
var div_id = "cytoscapeweb";
var colorMapper = {
attrName: "motif",
entries: [ { attrValue: "", value: "#0099ff" } ]
};
// visual style we will use
var visual_style = {
global: {
backgroundColor: "#ffffff",
opacity: 0.1,
tooltipDelay: 10
},
nodes: {
label: { passthroughMapper: { attrName: "id" } },
tooltipText: "<b>TF: ${id}</b><br />Motif: ${motif}",
shape: "ellipse",
borderWidth: 1,
borderColor: "#000000",
size: 30,
color: "#ff9900",
color: { defaultValue: "#ff9900", discreteMapper: colorMapper },
//opacity: 0.8,
opacity: { customMapper: { functionName: "customOpacity" } },
selectionOpacity: 0.8,
hoverOpacity: 0.8,
labelHorizontalAnchor: "center"
},
edges: {
width: { passthroughMapper: { attrName: "zscore" } },
label: { passthroughMapper: { attrName: "id" } },
tooltipText: "<b>Promoter: ${id}</b><br />Z-Score: ${zscore}",
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"
}
};
// initialization options
                 var options = {
                 var options = {
                     // where you have the Cytoscape Web SWF
                     // where you have the Cytoscape Web SWF
Line 47: Line 109:
                     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);
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("select", "", graphSelect)
.addListener("deselect", "", graphSelect);
});


                // visual options
// draw options
                var visual_style = {
var draw_options = {
                    global: {
// your data goes here
                        backgroundColor: "#ffffff",
network: xml,
opacity: 0.1,
visualStyle: visual_style,
tooltipDelay: 10
nodeTooltipsEnabled: true,
                    },
edgeTooltipsEnabled: true,
                    nodes: {
// hide pan zoom
label: { passthroughMapper: { attrName: "id" } },
panZoomControlVisible: true
tf: { passthroughMapper: { attrName: "id" } },
};
tooltipText: "<b>${id}</b><br />${motif}",
                        shape: "ellipse",
                        borderWidth: 1,
                        borderColor: "#000000",
                        size: 40,
                        color: "#0099ff",
opacity: 0.4,
                        labelHorizontalAnchor: "center"
                    },
                    edges: {
                        width: { passthroughMapper: { attrName: "zscore" } },
label: { passthroughMapper: { attrName: "id" } },
tooltipText: { passthroughMapper: { attrName: "id" } },
tooltipText: "<b>${id}</b><br />${zscore}",
                        color: "#011e59",
targetArrowShape: "delta",
sourceArrowShape: "",
labelGlowOpacity: 0.8,
labelGlowColor: "#000000"
                    }
                };
 
                // draw options
                var draw_options = {
                    // your data goes here
                    network: xml,
    visualStyle: visual_style,
    nodeTooltipsEnabled: true,
    edgeTooltipsEnabled: true,
                    panZoomControlVisible: true
                };
 
                // init and draw
                var vis = new org.cytoscapeweb.Visualization(div_id, options);
 
                // callback when Cytoscape Web has finished drawing
                vis.ready(function() {
                  
                  
                    // add a listener for when nodes and edges are clicked
            vis.draw(draw_options);
                    vis.addListener("dblclick", "nodes", function(event) {
        });
                        handle_click(event);
                    })
                    .addListener("dblclick", "edges", function(event) {
                        handle_click(event);
                    });
                   
                    function handle_click(event) {
                        var target = event.target;
var lurl = "https://fantom5-collaboration.gsc.riken.jp/resource_browser/RB_SearchResults?sq="+target.data["id"];
window.location = lurl;
                    }
                   
                });


                vis.draw(draw_options);
            };
         </script>
         </script>
          
          


</html>
</html>

Revision as of 14:23, 25 April 2012

FF:10563-108A5

Cytoscape Web will replace the contents of this div with your graph.

TF to TF network. Motif is an attribute of the source TF node. Promoter is an attribute of the TF to TF edge.

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