Personal tools

Cytoscape test4: Difference between revisions

From FANTOM5_SSTAR

Jump to: navigation, search
No edit summary
No edit summary
 
(54 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<html>


        <style>
== Details ==
            /* The Cytoscape Web container must have its dimensions set. */
 
            #cytoscapeweb { width: 50%; height: 100%; float: left; }
 
        </style>
=== Transcriptome profiling ===
<table>
<tr><th scope="row" align="right"> [[Property:profile_hcage|hCAGE]] </th> <td> [[profile_hcage::{{{profile_hcage}}}]]</td>
<tr><th scope="row" align="right"> [[Property:profile_rnaseq|RNA-seq]] </th><td> [[profile_rnaseq::{{{profile_rnaseq}}}]]</td>
<tr><th scope="row" align="right"> [[Property:profile_srnaseq|smallRNA seq]] </th><td> [[profile_srnaseq::{{{profile_srnaseq}}}]]</td>
<tr><th scope="row" align="right"> [[Property:profile_cagescan|nanoCAGEscan]]</th><td> [[profile_cagescan::{{{profile_cagescan}}}]]
</table>


        <h1 id="firstHeading" class="firstHeading">FF:10717-109I6, TF to Motif to TF network</h1>
=== Sample info ===
<table>
<tr><th scope="row" align="right"> [[Property:sample_strain|strain]] </th><td> [[sample_strain::{{{sample_strain}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_tissue|tissue]]</th><td> [[sample_tissue::{{{sample_tissue}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_dev_stage|dev_stage]] </th><td> [[sample_dev_stage::{{{sample_dev_stage}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_sex|sex]]</th><td> [[sample_sex::{{{sample_sex}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_age|age]]</th><td> [[sample_age::{{{sample_age}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_ethnicity|ethnicity]]</th><td> [[sample_ethnicity::{{{sample_ethnicity}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_cell_type|cell_type]]</th><td> [[sample_cell_type::{{{sample_cell_type}}}]] </td>
<tr><th scope="row" align="right"> [[Property:sample_cell_line|cell_line]]</th><td> [[sample_cell_line::{{{sample_cell_line}}}]] </td>
<tr><th scope="row" align="right"> [[Property:sample_collaboration|collaboration]]</th><td> [[sample_collaboration::{{{sample_collaboration}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_experimental_condition|Experimental condition]]</th><td>[[sample_experimental_condition::{{{sample_experimental_condition}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_disease|disease]]</th><td> [[sample_disease::{{{sample_disease}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_cell_lot|cell_lot]]</th><td> [[sample_cell_lot::{{{sample_cell_lot}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_cell_catalog|cell_catalog]]</th><td> [[sample_cell_catalog::{{{sample_cell_catalog}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_company|company]]</th><td> [[sample_company::{{{sample_company}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_donor(cell lot)|donor(cell lot)]]</th><td> [[sample_donor(cell lot)::{{{sample_donor(cell lot)}}}]]</td>
<tr><th scope="row" align="right"> [[Property:sample_note|Note]]</th><td> [[sample_note::{{{sample_note}}}]]</td>
</table>


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


<div style="width: 50%; height:600px; float: left;">
=== RNA info ===
        <div id="cytoscapeweb">
<table>
            Cytoscape Web will replace the contents of this div with your graph.
<tr><th scope="row" align="right"> [[Property:sample_id|sample_id]] </th><td>[[sample_id::{{{sample_id}}}]]</td>
        </div>
<tr><th scope="row" align="right"> [[Property:rna_tube_id|tube_id]]</th><td> [[rna_tube_id::{{{rna_tube_id}}}]]</td>
<p />LEGEND: <span style="background-color: #0099ff;">TF ()</span>, <span style="background-color: #ff9900;">MOTIF []</span>,
<tr><th scope="row" align="right"> [[Property:rna_box|box]]</th><td> [[rna_box::{{{rna_box}}}]]</td>
<span style="background-color: #0099ff;">MOTIF->TF</span>, <span style="background-color: #ff9900;">TF->MOTIF</span>
<tr><th scope="row" align="right"> [[Property:rna_position|position]]</th><td> [[rna_position::{{{rna_position}}}]]</td>
</div>
<tr><th scope="row" align="right"> [[Property:rna_lot_number|lot_number]]</th><td> [[rna_lot_number::{{{rna_lot_number}}}]]</td>
<tr><th scope="row" align="right"> [[Property:rna_catalog_number|catalog_number]]</th><td> [[rna_catalog_number::{{{rna_catalog_number}}}]]</td>
<tr><th scope="row" align="right"> [[Property:rna_rin|RIN]]</th><td> [[rna_rin::{{{rna_rin}}}]]</td>
<tr><th scope="row" align="right"> [[Property:rna_od260/230|OD260/230]]</th><td> [[rna_od260/230::{{{rna_od260/230}}}]]</td>
<tr><th scope="row" align="right"> [[Property:rna_od260/280|OD260/280]]</th><td> [[rna_od260/280::{{{rna_od260/280}}}]]</td>
<tr><th scope="row" align="right"> [[Property:rna_sample_type|sample_type]]</th><td> [[rna_sample_type::{{{rna_sample_type}}}]]</td>
<tr><th scope="row" align="right"> [[Property:rna_extraction_protocol|extraction_protocol]]</th><td> [[rna_extraction_protocol::{{{rna_extraction_protocol}}}]]</td>
<tr><th scope="row" align="right"> [[Property:rna_weight_ug|weight_ug]]</th><td> [[rna_weight_ug::{{{rna_weight_ug}}}]]</td>
<tr><th scope="row" align="right"> [[Property:rna_concentration|concentration]]</th><td>[[rna_concentration::{{{rna_concentration}}}]]</td>
</table>




<div id="tabs" style="width: 48%; height:600px; float: right;">
<html><link rel="stylesheet" href="/resource_browser/nwfiles/css/f5-style.css" /></html>
<ul>
<html>  
<li><a href="#style_panel">Style</a></li>
<li><a href="#filter_panel">Filter</a></li>
<li><a href="#properties_panel">Data Display</a></li>
</ul>
<div id="style_panel">
<table>
<tr><th>Layout:</th></tr>
<tr><td></td>
<td>
<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" style="width: 32px; height: 32px;">(recalculate)</button>
</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>


<!-- F5 Cytoscape App HTML -->
<div id="f5_cytoscapeweb">
<div id="panel1">
<h2 id="cyto_title"></h2>
<div id="cytoscapeweb"></div>
<div id="legend">
<div id="node_legend">
<table>
<tr>
<td>SAMPLE</td>
<td><svg width="20" height="24">
<circle r="10" cx="10" cy="14" class="tf"/>
</svg>
TF</td>
<td><svg width="20" height="24">
<rect width="20" height="20" x="0" y="4" class="motif"/>
</svg>
MOTIF</td>
</tr>
</table>
</div>
<div id="edge_legend">
Promoter <img src="/resource_browser/nwfiles/img/motif-tf.png" />
<br />TF-MOTIF Binding <img src="/resource_browser/nwfiles/img/tf-motif.png" />
</div>
</div>
</div>
</div>
        <div id="filter_panel">
<div id="panel2">
<table>
<div id="tabs">
<tr><th>Z-Score filter:</th><tr>
<ul>
<tr><td></td><td id="data_bar" style="position: relative;"></td><td></td></tr>
<li><a href="#style_panel">Layout</a></li>
<tr valign="bottom"><td style="text-align: right;" ><span id="cyto_zscore_min">0.00</span> &nbsp;</td><td >&nbsp;&nbsp;<div id="slider1" class="sliderbar"></div>&nbsp;&nbsp;</td><td>&nbsp; <span id="cyto_zscore_max">0.00</span></td></tr>
<li><a href="#filter_panel">Filter</a></li>
<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>
<li><a href="#export_panel">Export</a></li>
<tr><th>Show nodes:</th><tr>
<li><a href="#properties_panel_nodes">Nodes</a></li>
<tr><td></td><td><input type="checkbox" id="cyto_edges_binds_to" checked>TF->MOTIF</input> <input type="checkbox" id="cyto_edges_promotes" checked>MOTIF->TF</input></td><td></td></tr>
<li><a href="#properties_panel_edges">Edges</a></li>
<tr><th>Show edges:</th><tr>
<li><a href="#compare_panel">Compare</a></li>
<tr><td></td><td><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></td><td></td></tr>
<li><a href="#help_panel">Help</a></li>
</table>
</ul>
<div id="style_panel">
<label class="style">Layout:</label>
<select id="cyto_layout" style="float: left;" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
  <!-- option value="Preset">Preset</option -->
  <option value="ForceDirected" selected>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>
<div id="show_labels">
<input type="checkbox" id="cyto_node_labels" checked> Nodes
<br /><input type="checkbox" id="cyto_edge_labels"> Edges
</div>
</div>
<div id="filter_panel">
<div>
<label class="filter">Show edges:</label>
<div id="edge_type_filter">
<input type="checkbox" id="cyto_edges_binds_to" value="binds_to" checked>TF-MOTIF Binding</input>
<br /><input type="checkbox" id="cyto_edges_promotes" value="promotes" checked>Promoters</input>
</div>
<div id="z_filter" class="slider">Promoter Z-Score filter:</div>
 
<p />
<div id="degree_filter" class="slider">Motif degree filter:</div>
<div id="tf_indegree_filter" class="slider">TF indegree filter:</div>
<div id="nodes_type_filter">
<label class="filter">TF outdegree filter:</label>
<input type="checkbox" id="cyto_nodes_tf_src" value="tf" checked>Source TF (Outdegree > 0)</input>
<br /><input type="checkbox" id="cyto_nodes_tf" value="tf" checked>Target TF (Outdegree = 0)</input>
</div>
</div>
</div>
<div id="properties_panel_nodes" class="properties_panel scrollable">
<div>
<button id="btn_show_all_nodes" class="rt_btn">Show all nodes</button>
<button id="btn_show_select_nodes" class="rt_btn">Show only selected nodes</button>
<p /><table id="nodes_list" class="wikitable">
</table>
</div>
</div>
<div id="properties_panel_edges" class="properties_panel scrollable">
<div>
<button id="btn_show_all_edges" class="rt_btn">Show all edges</button>
<button id="btn_show_select_edges" class="rt_btn">Show only selected 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 id="compare_panel">
<div id="load">
<input type="text" class="left" id="samples" name="blah" title="Search" />
<button id="cyto_load" class="right">Load</button>
</div>
<p />
<div id="sample_filter">
<br><input type="radio" name="sample" value="" checked>Union: A || B
<br><input type="radio" name="sample" value=",">Intersection: A &amp;&amp; B
<br><input type="radio" name="sample" value="^_A$">Difference: A - B
<br><input type="radio" name="sample" value="^_B$">Difference: B - A
<br><input type="radio" name="sample" value="_A">Subnetwork: A
<br><input type="radio" name="sample" value="_B">Subnetwork: B
</div>
</div>
<div id="help_panel">
<h3>About this network view.</h3>
<p>
Motifs shown are the top motifs in the sample (maximum 30). 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).
</p>
<p>
In the single sample view 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.
</p>
<h3>How to interact with the network?</h3>
<p>
Zoom using the control panel in the lower right.
<br />Click and drag to move nodes.
<br />Double click to search for label in resource browser.
<br />Mouse over nodes and edges to see additional attributes.
<br />Hover over a node to highlight its first neighbors.
<br />Click and drag or shift-click on the canvas to highlight many nodes and edges.
<br />Right click on a node to select its first neighbors.
<br />Right click to show only selected nodes.
<br />When nodes are selected additional information is available in the pull out panel.
<br />Addition filters are available within the pull out panel.
</p>
<h3>Acknowledgments</h3>
<p>
Analyst: Erik Arner
<br />Application Developer: Jayson Harshbarger
<p>
Research Grant for RIKEN Omics Science Center from MEXT to Yoshihide Hayashizaki
<br />Grant of the Innovative Cell Biology by Innovative Technology (Cell Innovation Program) from the MEXT, Japan to Yoshihide Hayashizaki
</p>
</p>
</div>
</div>
</div>
</div>
<div id="properties_panel" style="font-size: x-small; overflow-y:scroll; height: 540px;">
</div>
<div>
 
<table id="nodes_list" border="1" width="100%" class="wikitable">
<!-- Header Section -->
</table>
<!-- CSS (To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.) -->
</div>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" />
<div>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css" rel="stylesheet" />
<table id="edges_list" border="1" width="100%" class="wikitable">
<link href="/resource_browser/nwfiles/js/wijmo/jquery.wijmo-complete.all.2.1.4.min.css" rel="stylesheet" type="text/css" />
</table>
<link href="/resource_browser/nwfiles/css/f5_cytoview_7.min.css" rel="stylesheet"/>
</div>
 
        </div>
<!-- JQuery -->
</div>
<!-- script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script -->
<script src="/resource_browser/nwfiles/js/jquery.ba-throttle-debounce.min.js" type="text/javascript"></script>
 
<!-- JQuery UI -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>


<script src="/resource_browser/nwfiles/jquery.nouislider.min.js"></script>
<!-- wWijmo Widgets -->
<link href="/resource_browser/nwfiles/nouislider.css" rel="stylesheet">
<script src="/resource_browser/nwfiles/js/wijmo/jquery.wijmo-open.all.2.1.4.min.js" type="text/javascript"></script>


<!-- JQuery UI -->
<!-- tokeninput -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="/resource_browser/nwfiles/js/jquery.tokeninput.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="http://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) -->
         <!-- JSON support for IE (needed to use JS API) -->
Line 86: Line 235:
         <!-- Cytoscape Web JS API (needed to reference org.cytoscapeweb.Visualization) -->
         <!-- 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>
       


     
<!-- Data Loading Section -->
<script type="text/javascript">
<script type="text/javascript">
// Load Data
var durl = "/resource_browser/nwfiles/10717-109I6.xgmml";


//$.get(durl, function(data) {
$(document).ready(function() {
// xml = data;
// //alert('Load was performed.');
//})


var request = new XMLHttpRequest();
// Options for FANTOM5 Network view app
request.open("GET", durl , false);
var o = {
request.send(null);
  networkPath: '/resource_browser/nwfiles/tfnetworks/',
var xml = request.responseText;
  initSample: 'CNhs10746.10429-106D6',
  samplesPath: '/resource_browser/nwfiles/js/hg19_samples.json',
  swfPath: "/resource_browser/rb_js/cytoscapeweb/swf/CytoscapeWeb",
  flashInstallerPath: "/resource_browser/rb_js/cytoscapeweb/swf/playerProductInstall",
  linkOutPath: "/resource_browser/RB_SearchResults?sq="
}


// initialization cytoscape options
riken.f5_network_vis.start(o);
var options = {
});
swfPath: "/resource_browser/rb_js/cytoscapeweb/swf/CytoscapeWeb",
flashInstallerPath: "/resource_browser/rb_js/cytoscapeweb/swf/playerProductInstall"
};
</script>
</script>
 
<script type="text/javascript" src="/resource_browser/nwfiles/js/f5_cytoview_7.min.js"></script>  
<script type="text/javascript" src="/resource_browser/nwfiles/f5_cytoview_2.js"></script>


</html>
</html>

Latest revision as of 09:50, 4 September 2012

Details

Transcriptome profiling

hCAGE {{{profile_hcage}}}
RNA-seq {{{profile_rnaseq}}}
smallRNA seq {{{profile_srnaseq}}}
nanoCAGEscan {{{profile_cagescan}}}

Sample info

strain {{{sample_strain}}}
tissue {{{sample_tissue}}}
dev_stage {{{sample_dev_stage}}}
sex {{{sample_sex}}}
age {{{sample_age}}}
ethnicity {{{sample_ethnicity}}}
cell_type {{{sample_cell_type}}}
cell_line {{{sample_cell_line}}}
collaboration {{{sample_collaboration}}}
Experimental condition{{{sample_experimental_condition}}}
disease {{{sample_disease}}}
cell_lot {{{sample_cell_lot}}}
cell_catalog {{{sample_cell_catalog}}}
company {{{sample_company}}}
donor(cell lot) {{{sample_donor(cell lot)}}}
Note {{{sample_note}}}


RNA info

sample_id {{{sample_id}}}
tube_id {{{rna_tube_id}}}
box {{{rna_box}}}
position {{{rna_position}}}
lot_number {{{rna_lot_number}}}
catalog_number {{{rna_catalog_number}}}
RIN {{{rna_rin}}}
OD260/230 {{{rna_od260/230}}}
OD260/280 {{{rna_od260/280}}}
sample_type {{{rna_sample_type}}}
extraction_protocol {{{rna_extraction_protocol}}}
weight_ug {{{rna_weight_ug}}}
concentration{{{rna_concentration}}}


SAMPLE TF MOTIF
Promoter
TF-MOTIF Binding
Nodes
Edges
TF-MOTIF Binding
Promoters
Promoter Z-Score filter:

Motif degree filter:
TF indegree filter:
Source TF (Outdegree > 0)
Target TF (Outdegree = 0)


Union: A || B
Intersection: A && B
Difference: A - B
Difference: B - A
Subnetwork: A
Subnetwork: B

About this network view.

Motifs shown are the top motifs in the sample (maximum 30). 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).

In the single sample view 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.

How to interact with the network?

Zoom using the control panel in the lower right.
Click and drag to move nodes.
Double click to search for label in resource browser.
Mouse over nodes and edges to see additional attributes.
Hover over a node to highlight its first neighbors.
Click and drag or shift-click on the canvas to highlight many nodes and edges.
Right click on a node to select its first neighbors.
Right click to show only selected nodes.
When nodes are selected additional information is available in the pull out panel.
Addition filters are available within the pull out panel.

Acknowledgments

Analyst: Erik Arner
Application Developer: Jayson Harshbarger

Research Grant for RIKEN Omics Science Center from MEXT to Yoshihide Hayashizaki
Grant of the Innovative Cell Biology by Innovative Technology (Cell Innovation Program) from the MEXT, Japan to Yoshihide Hayashizaki