Personal tools

Cytoscape test3: 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%; }
#f5_cytoscapeweb { width: 50%; height:600px; float: left; text-align: center; }
#f5_cytoscapeweb img { vertical-align: middle; }
             #cytoscapeweb { float: left; z-index: 100; width: 100%; height: 500px; }
#loading { position: absolute; top: 0; left: 0;  z-index: 1000; background-image:url("transparentbg.png"); width: 100%; height:100%; min-height: 10em; display: table-cell; vertical-align: middle; text-align: center; }
#loading img { vertical-align: middle; margin: auto; }
#loading p { vertical-align: middle; margin: 200px auto; }
label.style, label.filter, label.export { clear: both; font-weight:bold; display: block; padding-top: 10px; }
table.slider { width: 100%; padding-top: 10px; padding-bottom: 15px; }
#tabs { width: 48%; height:600px; float: right; }
 
#cyto_recalc { width: 32px; height: 32px; }
#data_bar { position: relative; padding-right: 10px; }
#cyto_zscore_min { width: 35px; text-align: right; padding-right: 10px; }
#cyto_zscore_max { width: 35px; text-align: left; padding-left: 10px; }
#nodes_list, #edges_list { width: 100%; border: 1; }
#properties_panel { font-size: x-small; overflow-y:scroll; }
#properties_panel a { text-decoration:underline; color: #0099ff; }
#properties_panel a.motif { color: #ff9900; }
#properties_panel a.tf { color: #0099ff; }
#properties_panel a.tf_src { color: #0099ff; }
a.ui-slider-handle { outline-style: none; }
a.ui-slider-handle span { float: left; margin-top: 20px;}
         </style>
         </style>


Line 12: Line 35:
</p>
</p>


<div style="width: 50%; height:600px; float: left;">
<div id="f5_cytoscapeweb">
        <div id="cytoscapeweb">
<div id="cytoscapeweb"></div>
            Cytoscape Web will replace the contents of this div with your graph.
<!-- a href="http://cytoscapeweb.cytoscape.org/">
        </div>
<img src="http://cytoscapeweb.cytoscape.org/img/logos/cw_s.png" alt="Cytoscape Web"/>
<p />LEGEND: <span style="background-color: #0099ff;">TF ()</span>, <span style="background-color: #ff9900;">MOTIF []</span>,  
</a -->
<span style="background-color: #0099ff;">MOTIF->TF</span>, <span style="background-color: #ff9900;">TF->MOTIF</span>
<p /><br /><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>,  
<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>
</div>
 
 
<div id="tabs" style="width: 48%; height:600px; float: right;">
<div id="tabs">
<ul>
<ul>
<li><a href="#style_panel">Style</a></li>
<li><a href="#style_panel">Layout</a></li>
<li><a href="#filter_panel">Filter</a></li>
<li><a href="#filter_panel">Filter</a></li>
<li><a href="#export_panel">Export</a></li>
<li><a href="#properties_panel">Data Display</a></li>
<li><a href="#properties_panel">Data Display</a></li>
</ul>
</ul>
<div id="style_panel">
<div id="style_panel">
<table>
<label class="style">Layout:</label>
<tr><th>Layout:</th></tr>
<select id="cyto_layout" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
<tr><td></td>
  <option value="Preset">Preset</option>
<td>
  <option value="ForceDirected">Force Directed</option>
<select id="cyto_layout" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
  <option value="Circle">Circle</option>
  <option value="Preset">Preset</option>
  <option value="Radial">Radial</option>
  <option value="ForceDirected">Force Directed</option>
  <option value="Tree">Tree</option>
  <option value="Circle">Circle</option>
</select>
  <option value="Radial">Radial</option>
<button id="cyto_recalc">Recalculate</button>
  <option value="Tree">Tree</option>
<label class="style">Labels:</label>
</select> <button id="cyto_recalc" style="width: 32px; height: 32px;">(recalculate)</button>
<input type="checkbox" id="cyto_node_labels" checked> Nodes</td></tr>
</td></tr>
<br /><input type="checkbox" id="cyto_edge_labels"> Edges</td></tr>
<tr><th>Labels:</th></tr>
<tr><td></td><td><input type="checkbox" id="cyto_node_labels" checked> Nodes</td></tr>
<tr><td></td><td><input type="checkbox" id="cyto_edge_labels"> Edges</td></tr>
</table>
 
</div>
</div>
        <div id="filter_panel">
        <div id="filter_panel">
<b>Z-Score filter:</b>
<label class="filter">Z-Score filter:</label>
<table class="slider">
<table width="100%">
<tr><td></td><td id="data_bar"></td><td></td></tr>
<tr><td width="35px"></td><td id="data_bar" style="position: relative; padding-right: 10px;"></td><td width="35px"></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>
<tr valign="bottom"><td style="text-align: right;" ><span id="cyto_zscore_min">0.00</span> &nbsp;</td><td ><div id="slider1" class="sliderbar"></div></td><td>&nbsp; <span id="cyto_zscore_max">0.00</span></td></tr>
<!-- tr><td></td><td valign="top" ><input type="text" id="cyto_zscore_filter_min" value="0" style="float: left; width: 35px;"/>  <input type="text" id="cyto_zscore_filter_max" value="100" style="float: right; width: 35px;"/></td><td></td></tr -->
<tr><td></td><td valign="top" ><input type="text" id="cyto_zscore_filter_min" value="0" style="float: left; width: 35px;"/>  <input type="text" id="cyto_zscore_filter_max" value="100" style="float: right; width: 35px;"/></td><td></td></tr>
</table>
</table>
<p /><b>Show nodes:</b>
<label class="filter">Show edges:</label>
<br /><input type="checkbox" id="cyto_edges_binds_to" checked>TF->MOTIF</input> <input type="checkbox" id="cyto_edges_promotes" checked>MOTIF->TF</input>
<input type="checkbox" id="cyto_edges_binds_to" checked>TF->MOTIF</input> <input type="checkbox" id="cyto_edges_promotes" checked>MOTIF->TF</input>
<p /><b>Show edges:</b>
<label class="filter">Show nodes:</label>
<br /><input type="checkbox" id="cyto_nodes_tf_src" checked>Source TF</input> <input type="checkbox" id="cyto_nodes_tf" checked>Target TF</input> <input type="checkbox" id="cyto_nodes_motif" checked>MOTIF</input>
<input type="checkbox" id="cyto_nodes_tf_src" checked>Source TF</input> <input type="checkbox" id="cyto_nodes_tf" checked>Target TF</input> <input type="checkbox" id="cyto_nodes_motif" checked>MOTIF</input>


</div>
</div>
<div id="properties_panel" style="font-size: x-small; overflow-y:scroll; height: 540px;">
<div id="properties_panel" style="height: 540px;">
<div>
<div>
<table id="nodes_list" border="1" width="100%" class="wikitable">
<table id="nodes_list" class="wikitable">
</table>
</table>
</div>
</div>
<div>
<div>
<table id="edges_list" border="1" width="100%" class="wikitable">
<table id="edges_list" class="wikitable">
</table>
</table>
</div>
</div>
         </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>


Line 109: Line 142:
</script>
</script>


<script type="text/javascript" src="/resource_browser/nwfiles/f5_cytoview_2.js"></script>
<script type="text/javascript" src="/resource_browser/nwfiles/f5_cytoview_3.js"></script>


</html>
</html>

Revision as of 13:36, 14 May 2012

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


LEGEND: TF , MOTIF , MOTIF->TF , TF->MOTIF

Nodes
Edges
0.00
1
TF->MOTIF MOTIF->TF Source TF Target TF MOTIF

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