Personal tools

User:Hisa/cytoscape test: Difference between revisions

From FANTOM5_SSTAR

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


 
         <div id="ont_tree" style="width:100%;height:600px" resize:both;>
 
         <div id="cytoscapeweb" style="width:200;height:800">
             Cytoscape Web will replace the contents of this div with your graph.
             Cytoscape Web will replace the contents of this div with your graph.
         </div>
         </div>




        <!-- JSON support for IE (needed to use JS API) -->
         <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/json2.min.js"></script>
         <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/json2.min.js"></script>
       
        <!-- Flash embedding utility (needed to embed Cytoscape Web) -->
         <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/AC_OETags.min.js"></script>
         <script type="text/javascript" src="/resource_browser/rb_js/cytoscapeweb/js/min/AC_OETags.min.js"></script>
       
        <!-- Cytoscape Web JS API (needed to reference org.cytoscapeweb.Visualization) -->
         <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>
       
         <script type="text/javascript">
         <script type="text/javascript">
             window.onload=function() {
             window.onload=function() {
Line 28: Line 20:
                 var div_id = "cytoscapeweb";
                 var div_id = "cytoscapeweb";
                  
                  
                // you could also use other formats (e.g. GraphML) or grab the network data via AJAX
                                var xml = '\
                var networ_json = {
<graphml><key id="label" for="all" attr.name="label" attr.type="string"/><key id="weight" for="node" attr.name="weight" attr.type="double"/><graph edgedefault="directed"><node id="FF:0000024"><data key="label">CD14-positive monocyte</data></node>\
                    data: {
</html>{{#ask:[[is_a::FF:0000024]][[name::+]]|?name|link=none|format=template|template=Smw_graphml|userparam=FF:0000024;is_a|limit=1000}}<html>\
                        nodes: [ { id: "1" }, { id: "2" } ],
</graph></graphml>\
                        edges: [ { id: "2to1", target: "1", source: "2" } ]
                 ';
                    }
                 };
                  
                  
// function when click
                 // initialization options
                 // initialization options
                 var options = {
                 var options = {
Line 44: Line 39:
                 };
                 };
                  
                  
                // init and draw
                 var vis = new org.cytoscapeweb.Visualization("ont_tree", options);
                 var vis = new org.cytoscapeweb.Visualization(div_id, options);
 
                 vis.draw({ network: networ_json });
                // callback when Cytoscape Web has finished drawing
                 vis.ready(function() {
               
                    // add a listener for when nodes and edges are clicked
                    vis.addListener("click", "nodes", function(event) {
                        handle_click(event);
                    });
 
                    vis.addListener("dblclick", "nodes", function(event) {
                      handle_dblclick(event);
                    });
                   
                    function handle_click(event) {
                          // window.open("/resource_browser/"+event.target.data.id);
                    }
 
                    function handle_dblclick(event) {
                            window.open("/resource_browser/"+event.target.data.id);
                    }
                   
//                    function clear() {
//                      document.getElementById("info").innerHTML = "";
//                    }
//               
//                    function print(msg) {
//                        document.getElementById("info").innerHTML += "<p>" + msg + "</p>";
//                    }
                });
 
 
// draw
                                var draw_options = {
                    network: xml,
                    edgeLabelsVisible: true,
//                    layout: "Tree",
layout: { name: 'Tree', options: { orientation : 'bottomToTop'}},
                    panZoomControlVisible: false
                };
 
                vis.draw(draw_options);
             };
             };
         </script>
         </script>

Latest revision as of 13:52, 28 June 2012

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

Retrieved from "http://f5-webapp4.gsc.riken.jp/resource_browser/index.php?title=User:Hisa/cytoscape_test&oldid=1842963"