|
|
| Line 1: |
Line 1: |
| <html>
| | CNhs11844.10717-109I6.xgmml |
|
| |
|
| <!-- F5 Cytoscape App HTML -->
| | {{Tf motif cytoscapenw|CNhs=11844|FFid=10717-109I6}} |
| <div id="f5_cytoscapeweb">
| |
| | |
| <div id="tabs">
| |
| <ul>
| |
| <li><a href="#style_panel">Layout</a></li>
| |
| <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">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">
| |
| <label class="filter">Show edges:</label>
| |
| <input type="checkbox" id="cyto_edges_binds_to" checked>TF->MOTIF</input>
| |
| <br /><input type="checkbox" id="cyto_edges_promotes" checked>Promoters</input>
| |
| <label class="filter">Z-Score filter:</label>
| |
| <table class="slider">
| |
| <tr><td></td><td><div id="data_bar"></div></td><td></td></tr>
| |
| <tr valign="bottom"><td id="cyto_zscore_min" >0.00</td><td ><div id="slider1" class="sliderbar"></div></td><td id="cyto_zscore_max">1</td></tr>
| |
| </table>
| |
| <label class="filter">Show nodes:</label>
| |
| <input type="checkbox" id="cyto_nodes_tf_src" checked>Source TF (Outdegree = 1)</input>
| |
| <br /><input type="checkbox" id="cyto_nodes_tf" checked>Target TF (Outdegree = 0)</input>
| |
| <br /><input type="checkbox" id="cyto_nodes_motif" checked>MOTIF</input>
| |
| <p />
| |
|
| |
| </div>
| |
| <div id="properties_panel_nodes" class="properties_panel">
| |
| <div>
| |
| <button id="btn_show_select_nodes" class="rt_btn">Show only these nodes</button>
| |
| <p /><table id="nodes_list" class="wikitable">
| |
| </table>
| |
| </div>
| |
| </div>
| |
| <div id="properties_panel_edges" class="properties_panel">
| |
| <div>
| |
| <button id="btn_show_select_edges" class="rt_btn">Show only these 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 id="cytoscapeweb"></div>
| |
| <p /><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>
| |
| | |
| <!-- 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) -->
| |
| <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>
| |
|
| |
| <!-- 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>
| |
| | |
| <!-- F5 Cytoscape app -->
| |
| <link href="/resource_browser/nwfiles/f5_cytoview.css" rel="stylesheet"/>
| |
| <script type="text/javascript" src="/resource_browser/nwfiles/f5_cytoview_4.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/CNhs11844.10717-109I6.xgmml";
| |
| | |
| //$.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;
| |
| | |
| // initialization cytoscape options
| |
| var options = {
| |
| swfPath: "/resource_browser/rb_js/cytoscapeweb/swf/CytoscapeWeb",
| |
| flashInstallerPath: "/resource_browser/rb_js/cytoscapeweb/swf/playerProductInstall"
| |
| };
| |
| </script>
| |
| | |
| </html>
| |
