Author: clopes
Date: 2011-10-14 13:41:50 -0700 (Fri, 14 Oct 2011)
New Revision: 27194
Added:
cytoscapeweb/trunk/website/src/file/example_code/compound_nodes.html
cytoscapeweb/trunk/website/src/file/release_notes/release_notes_0.8.txt
cytoscapeweb/trunk/website/src/php/content/demos/
cytoscapeweb/trunk/website/src/php/content/demos/showcase.declaration.php
cytoscapeweb/trunk/website/src/php/content/demos/showcase.php
Modified:
cytoscapeweb/trunk/website/src/css/content/demos.css
cytoscapeweb/trunk/website/src/js/content/about.js
cytoscapeweb/trunk/website/src/js/content/demo.js
cytoscapeweb/trunk/website/src/js/content/demos/compound.js
cytoscapeweb/trunk/website/src/php/content/about/cytoweb.php
cytoscapeweb/trunk/website/src/php/content/demos.declaration.php
cytoscapeweb/trunk/website/src/php/content/home.php
cytoscapeweb/trunk/website/src/php/content/tutorial.php
Log:
Version 0.8 release notes and other updates.
Added compound nodes tutorial.
Modified: cytoscapeweb/trunk/website/src/css/content/demos.css
===================================================================
--- cytoscapeweb/trunk/website/src/css/content/demos.css 2011-10-14
20:39:28 UTC (rev 27193)
+++ cytoscapeweb/trunk/website/src/css/content/demos.css 2011-10-14
20:41:50 UTC (rev 27194)
@@ -1,3 +1,6 @@
#cytoscapeweb { height: 500px !important; }
#content .tools { padding: 0.5em; border-bottom: 1px solid #cacaca; }
-#content .tools * + label { margin-left: 1em; }
\ No newline at end of file
+#content .tools * + label { margin-left: 1em; }
+#main { width: 50%; position: relative; left: 50%; margin-left: -25%; padding:
3em 0; }
+#buttonp { text-align: center; font-size: 2em; }
+#button { display: inline-block; background: #9a0b0b
url("../../img/layout/big_red_button.png") top center repeat-x; }
\ No newline at end of file
Added: cytoscapeweb/trunk/website/src/file/example_code/compound_nodes.html
===================================================================
--- cytoscapeweb/trunk/website/src/file/example_code/compound_nodes.html
(rev 0)
+++ cytoscapeweb/trunk/website/src/file/example_code/compound_nodes.html
2011-10-14 20:41:50 UTC (rev 27194)
@@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
+<html>
+
+ <head>
+ <title>Cytoscape Web example</title>
+
+ <script type="text/javascript"
src="/js/cytoscape_web/json2.min.js"></script>
+ <script type="text/javascript"
src="/js/cytoscape_web/AC_OETags.min.js"></script>
+ <script type="text/javascript"
src="/js/cytoscape_web/cytoscapeweb.min.js"></script>
+
+ <script type="text/javascript">
+ window.onload = function() {
+ // id of Cytoscape Web container div
+ var div_id = "cytoscapeweb";
+
+ var network_json = {
+ // NOTE the parent attribute
+ data: {
+ nodes: [ { id: "1" },
+ { id: "2", parent: "1" },
+ { id: "3", parent: "1" },
+ { id: "4", parent: "2" },
+ { id: "5", parent: "6" },
+ { id: "6" },
+ { id: "7" },
+ { id: "8", parent: "1" },
+ ],
+ edges: [
+ { target: "3", source: "5" },
+ { target: "3", source: "8" },
+ { target: "2", source: "7" }
+ ]
+ }
+ };
+
+ // NOTE the "compound" prefix in some visual properties
+ var visual_style = {
+ nodes: {
+ shape: "DIAMOND",
+ compoundShape: "RECTANGLE",
+ label: { passthroughMapper: { attrName: "id" } } ,
+ compoundLabel: { passthroughMapper: { attrName: "id" }
} ,
+ borderWidth: 2,
+ compoundBorderWidth: 1,
+ borderColor: "#666666",
+ compoundBorderColor: "#999999",
+ size: 25,
+ color: "#ffffff",
+ compoundColor: "#eaeaea"
+ }
+ };
+
+ // initialization options
+ var options = {
+ swfPath: "/swf/CytoscapeWeb",
+ flashInstallerPath: "/swf/playerProductInstall"
+ };
+
+ var vis = new org.cytoscapeweb.Visualization(div_id, options);
+
+ vis.ready(function() {
+ // set the style programmatically
+ document.getElementById("layout").onclick = function(){
+ vis.layout("CompoundSpringEmbedder");
+ };
+ });
+
+ var draw_options = {
+ // your data goes here
+ network: network_json,
+ // this is the best layout to use when the network has
compound nodes
+ layout: "CompoundSpringEmbedder",
+ // set the style at initialisation
+ visualStyle: visual_style,
+ // hide pan zoom
+ panZoomControlVisible: false
+ };
+
+ vis.draw(draw_options);
+ };
+ </script>
+
+ <style>
+ * { margin: 0; padding: 0; font-family: Helvetica, Arial, Verdana,
sans-serif; }
+ html, body { height: 100%; width: 100%; padding: 0; margin: 0;
background-color: #f0f0f0; }
+ body { line-height: 1.5; color: #000000; font-size: 14px; }
+ /* The Cytoscape Web container must have its dimensions set. */
+ #cytoscapeweb { width: 100%; height: 90%; }
+ #note { width: 100%; text-align: center; padding-top: 0.5em; }
+ .link { text-decoration: underline; color: #0b94b1; cursor:
pointer; }
+ </style>
+ </head>
+
+ <body>
+ <div id="cytoscapeweb">
+ Cytoscape Web will replace the contents of this div with your
graph.
+ </div>
+ <div id="note">
+ <span class="link" id="layout">Recalculate layout</span>
+ </div>
+ </body>
+
+</html>
\ No newline at end of file
Added: cytoscapeweb/trunk/website/src/file/release_notes/release_notes_0.8.txt
===================================================================
--- cytoscapeweb/trunk/website/src/file/release_notes/release_notes_0.8.txt
(rev 0)
+++ cytoscapeweb/trunk/website/src/file/release_notes/release_notes_0.8.txt
2011-10-14 20:41:50 UTC (rev 27194)
@@ -0,0 +1,46 @@
+<p>
+ This release adds some great new features, such as:
+</p>
+<ul>
+ <li>Compound nodes supports, thanks to the
+ <a href="http://www.cs.bilkent.edu.tr/~ivis"; rel="external">i-Vis
Information Visualization Research Group</a>
+ of <a href="http://www.bilkent.edu.tr/index.html"; rel="external">Bilkent
University</a>.</li>
+ <li>Set different width and height values to nodes (e.g. creating
ellipses, and not just circles).</li>
+ <li>Nodes can be totally transparent now but still display a background
image or the border.
+ You simply need to set <code>"transparent"</code> to the node
<code>color</code> visual property in a
+ <code>VisualStyle</code> or <code>VisualStyleBypass</code> object.</li>
+ <li>The built-in pan-zoom control is also a bit more flexible now,
+ as you can choose the position where it is placed when Cytoscape Web
starts.</li>
+ <li>The new addElements() function is much faster than using addNode() to
add many nodes.</li>
+ <li>And more! See the release notes for more details.</li>
+</ul>
+<div class="relase_details">
+ <ul class="new_features">
+ <li><span class="bug_id">2299</span>: Allow a node to have different
width/height values.</li>
+ <li><span class="bug_id">2461</span>: Filter nodes/edges by ID (new
API function).</li>
+ <li><span class="bug_id">2462</span>: Add multiple nodes/edges (new
API function).</li>
+ <li><span class="bug_id">2463</span>: Add "nodeAttr" option to sif
function.</li>
+ <li><span class="bug_id">2481</span>: Add "nodeAttr" and
"interactionAttr" options to exportNetwork() function.</li>
+ <li><span class="bug_id">2487</span>: Add option for setting the
pan-zoom control position.</li>
+ <li><span class="bug_id">2566</span>: Node shape transparency with
background image.</li>
+ <li><span class="bug_id">2591</span>: Autosize node according to
label.</li>
+ <li><span class="bug_id">2592</span>: Compound nodes.</li>
+ </ul>
+ <ul class="bug_fixes">
+ <li><span class="bug_id">2480</span>: Handle List-type attributes when
exporting to GraphML.</li>
+ <li><span class="bug_id">2498</span>: PDF and SVG: Line breaks in
labels.</li>
+ <li><span class="bug_id">2534</span>: SVG breaks with too many
elements.</li>
+ <li><span class="bug_id">2538</span>: Incorrect validation of data
types when adding new edges.</li>
+ <li><span class="bug_id">2539</span>: Drag select then click =
dblclick.</li>
+ <li><span class="bug_id">2563</span>: Weighted FDL does not work if
the edge attribute is NOT called 'weight'.</li>
+ <li><span class="bug_id">2552</span>: CytoscapeWeb edge filtering
bug.</li>
+ <li><span class="bug_id">2564</span>: Bypass lost after call to
vis.visualStyle.</li>
+ <li><span class="bug_id">2567</span>: SVG Export: node image opacity
should be affected by the node opacity.</li>
+ <li><span class="bug_id">2571</span>: JSON error when string values
have line breaks.</li>
+ <li><span class="bug_id">2571</span>: Error sizing nodes when layout
changes.</li>
+ <li><span class="bug_id">2576</span>: When adding field, default value
null is replaced by 0.</li>
+ <li><span class="bug_id">2587</span>: Edge end does not intercept
ellipse node border when the edge is a loop.</li>
+ <li><span class="bug_id">2588</span>: Restore zoom from XGMML.</li>
+ <li><span class="bug_id">2590</span>: XGMML: Restore and save view
center correctly.</li>
+ </ul>
+</div>
\ No newline at end of file
Modified: cytoscapeweb/trunk/website/src/js/content/about.js
===================================================================
--- cytoscapeweb/trunk/website/src/js/content/about.js 2011-10-14 20:39:28 UTC
(rev 27193)
+++ cytoscapeweb/trunk/website/src/js/content/about.js 2011-10-14 20:41:50 UTC
(rev 27194)
@@ -4,20 +4,4 @@
$('a[name="Linking back to Cytoscape Web"]').click();
return false;
});
-
- // Client applications - screen shots:
- var border = { width: 0, radius: 2, color: "#000000" };
-
- $('#link_genemania').qtip({
- content: '<img src="/img/clients/genemania.png" alt="GeneMANIA"
/>',
- style: { border: border, width: 390, height: 298, padding: 0 }
- });
- $('#link_irefweb').qtip({
- content: '<img src="/img/clients/irefweb.png" alt="iRefWeb" />',
- style: { border: border, width: 334, height: 318, padding: 0 }
- });
- $('#link_pathguide').qtip({
- content: '<img src="/img/clients/pathguide.png" alt="Pathguide"
/>',
- style: { border: border, width: 350, height: 294, padding: 0 }
- });
});
\ No newline at end of file
Modified: cytoscapeweb/trunk/website/src/js/content/demo.js
===================================================================
--- cytoscapeweb/trunk/website/src/js/content/demo.js 2011-10-14 20:39:28 UTC
(rev 27193)
+++ cytoscapeweb/trunk/website/src/js/content/demo.js 2011-10-14 20:41:50 UTC
(rev 27194)
@@ -169,7 +169,7 @@
$("body").html('\
<div id="header" class="slice">\
- <a href="/"><div id="logo"></div></a>\
+ <a href="/"><div id="logo">Cytoscape Web</div></a>\
<div class="message">\
<h2>Feature Showcase Demo</h2>\
<p>This is a separate demo application, built
around the Cytoscape Web visualization.\
Modified: cytoscapeweb/trunk/website/src/js/content/demos/compound.js
===================================================================
--- cytoscapeweb/trunk/website/src/js/content/demos/compound.js 2011-10-14
20:39:28 UTC (rev 27193)
+++ cytoscapeweb/trunk/website/src/js/content/demos/compound.js 2011-10-14
20:41:50 UTC (rev 27194)
@@ -31,9 +31,10 @@
$("#content").html('\
<div class="tools">\
- <input type="button" id="reapplyLayout" value="Reapply
layout"/>\
+ <button id="reapplyLayout">Reapply layout</button>\
<label for="showNodeLabels">Node Labels</label>\
<input type="checkbox" id="showNodeLabels"/> \
+ <label class="warning"><small>You can use the right-clik context
menu to add and remove elements</small></label>\
</div>\
<div id="cytoscapeweb" width="*">\
Cytoscape Web will replace the contents of this div with your
graph.\
Modified: cytoscapeweb/trunk/website/src/php/content/about/cytoweb.php
===================================================================
--- cytoscapeweb/trunk/website/src/php/content/about/cytoweb.php
2011-10-14 20:39:28 UTC (rev 27193)
+++ cytoscapeweb/trunk/website/src/php/content/about/cytoweb.php
2011-10-14 20:41:50 UTC (rev 27194)
@@ -7,10 +7,17 @@
the <a href="http://www.thedonnellycentre.utoronto.ca/";
rel="external">Donnelly Centre for Cellular and Biomolecular Research</a>,
in the labs of <a href="http://baderlab.org/"; rel="external">Gary Bader</a> and
<a href="http://morrislab.med.utoronto.ca/"; rel="external">Quaid Morris</a>.
-Cytoscape Web development is funded by <a href="http://www.genomecanada.ca/";
rel="external">Genome Canada</a>, through the
+Cytoscape Web development was originally funded by <a
href="http://www.genomecanada.ca/"; rel="external">Genome Canada</a>, through the
<a href="http://www.ontariogenomics.ca/"; rel="external">Ontario Genomics
Institute</a> (2007-OGI-TD-05).
-It is now actively developed as part of the <a
href="http://www.cytoscape.org";>Cytoscape</a> project.</p>
+It is now actively developed as part of the <a
href="http://www.cytoscape.org";>Cytoscape</a> project which is funded by
+grants from the <a href="http://www.nih.gov/"; rel="external">U.S. National
Institutes of Health (NIH)</a>,
+under award number GM070743-01 (U.S. National Institute of General Medical
Sciences (NIGMS))
+and number RR031228 (NIH National Center for Research Resources (NCRR)
Biomedical Technology Research Center (BTRC)).</p>
+<p>The <a href="http://www.cs.bilkent.edu.tr/~ivis"; rel="external">i-Vis
Information Visualization Research Group</a>
+of <a href="http://www.bilkent.edu.tr/index.html"; rel="external">Bilkent
University</a> implemented the compound graph feature,
+including the <a href="http://dx.doi.org/10.1016/j.ins.2008.11.017";
rel="external">Compound Spring Embedder</a> layout algorithm.</p>
+
<p>Cytoscape Web was created as a result of the need for a visualization
interface for the
<a href="http://www.genemania.org/"; rel="external">GeneMANIA</a> project at
the University of Toronto.
The idea was to create a simple version of <a
href="http://www.cytoscape.org/";>Cytoscape</a> for the Web,
@@ -25,18 +32,20 @@
<h1>Client applications</h1>
<p>Cytoscape Web is currently being used by a gene function prediction server,
-<a id="link_genemania" href="http://www.genemania.org/";
rel="external">GeneMANIA</a>.
+<a id="link_genemania" href="http://www.genemania.org/search/human/pcna";
rel="external">GeneMANIA</a>.
The data provided to Cytoscape Web in GeneMANIA is unique to every user query,
and easily
modified with each new query. The rendering speed of Cytoscape Web allows for
dynamic user
interaction.</p>
-<p><a id="link_irefweb" href="http://wodaklab.org/iRefWeb/";
rel="external">iRefWeb</a> is an interface to a relational database containing
the latest build
+<p><a id="link_irefweb"
href="http://wodaklab.org/netility/network/show/id/180156";
rel="external">iRefWeb</a> is an interface to a relational database containing
the latest build
of the interaction Reference Index (iRefIndex) which integrates protein
interaction data from ten different interaction databases:
BioGRID, BIND, CORUM, DIP, HPRD, INTACT, MINT, MPPI, MPACT and OPHID.</p>
<p><a id="link_pathguide" href="http://www.pathguide.org/interactions.php";
rel="external">Pathguide</a> is a meta-database that provides an overview of
more than
300 web-accessible biological pathway and network databases. It uses Cytoscape
Web to display networks that illustrate the interactions among different
resources.</p>
+<p><a id="link_more"
href="http://scholar.google.ca/scholar?cites=16497398434959260707&as_sdt=2005&sciodt=0,5&hl=en
" rel="external">Many more...</a></p>
+
<h1>Linking back to Cytoscape Web</h1>
<p>We appreciate people linking back to us, because that helps us keep
Cytoscape Web development funded.</p>
@@ -65,7 +74,12 @@
<h1>Developers</h1>
-<p>Cytoscape Web is developed by <i>Christian Lopes</i> and <i>Max
Franz</i>.</p>
+<p>Cytoscape Web is maintained by <i>Christian Lopes</i> and <i>Max Franz</i>,
+ from the <a href="http://www.thedonnellycentre.utoronto.ca/";
rel="external">Donnelly Centre for Cellular and Biomolecular Research</a>.</p>
+<p><i>Selcuk Onur Sumer</i> and <i><a
href="http://www.cs.bilkent.edu.tr/~ugur"; rel="external">Ugur Dogrusoz</a></i>,
+ from the <a href="http://www.cs.bilkent.edu.tr/~ivis"; rel="external">i-Vis
Information Visualization Research Group</a>
+ of <a href="http://www.bilkent.edu.tr/index.html"; rel="external">Bilkent
University</a>,
+ were responsible for the compound graph support.</p>
<h1>Credits</h1>
Added: cytoscapeweb/trunk/website/src/php/content/demos/showcase.declaration.php
===================================================================
--- cytoscapeweb/trunk/website/src/php/content/demos/showcase.declaration.php
(rev 0)
+++ cytoscapeweb/trunk/website/src/php/content/demos/showcase.declaration.php
2011-10-14 20:41:50 UTC (rev 27194)
@@ -0,0 +1,3 @@
+<?php
+
+?>
\ No newline at end of file
Property changes on:
cytoscapeweb/trunk/website/src/php/content/demos/showcase.declaration.php
___________________________________________________________________
Added: svn:executable
+ *
Added: cytoscapeweb/trunk/website/src/php/content/demos/showcase.php
===================================================================
--- cytoscapeweb/trunk/website/src/php/content/demos/showcase.php
(rev 0)
+++ cytoscapeweb/trunk/website/src/php/content/demos/showcase.php
2011-10-14 20:41:50 UTC (rev 27194)
@@ -0,0 +1,13 @@
+<div id="main">
+
+ <p>
+ This is a separate demo application, built around the Cytoscape
Web visualization.
+ </p>
+ <p>
+ Because this showcase is complex, you may experience issues,
such as slowdowns, on older or less efficient browsers.
+ </p>
+
+ <p id="buttonp">
+ <a href="/demo" target="_blank"><button id="button">Open the
showcase demo</button></a>
+ </p>
+</div>
\ No newline at end of file
Property changes on:
cytoscapeweb/trunk/website/src/php/content/demos/showcase.php
___________________________________________________________________
Added: svn:executable
+ *
Modified: cytoscapeweb/trunk/website/src/php/content/demos.declaration.php
===================================================================
--- cytoscapeweb/trunk/website/src/php/content/demos.declaration.php
2011-10-14 20:39:28 UTC (rev 27193)
+++ cytoscapeweb/trunk/website/src/php/content/demos.declaration.php
2011-10-14 20:41:50 UTC (rev 27194)
@@ -3,6 +3,7 @@
$page_links = array(
"simple" => "Simple",
"compound" => "Compound Nodes",
+ "showcase" => "Showcase"
);
$content_style="half_and_half";
Modified: cytoscapeweb/trunk/website/src/php/content/home.php
===================================================================
--- cytoscapeweb/trunk/website/src/php/content/home.php 2011-10-14 20:39:28 UTC
(rev 27193)
+++ cytoscapeweb/trunk/website/src/php/content/home.php 2011-10-14 20:41:50 UTC
(rev 27194)
@@ -27,7 +27,7 @@
</div>
<div class="link">
- <a href="/demo"><div id="live_demo" class="button">View
showcase demo</div></a>
+ <a href="/demos"><div id="live_demo" class="button">View
demos</div></a>
</div>
<div class="link">
Modified: cytoscapeweb/trunk/website/src/php/content/tutorial.php
===================================================================
--- cytoscapeweb/trunk/website/src/php/content/tutorial.php 2011-10-14
20:39:28 UTC (rev 27193)
+++ cytoscapeweb/trunk/website/src/php/content/tutorial.php 2011-10-14
20:41:50 UTC (rev 27194)
@@ -109,6 +109,37 @@
+ <h1>Compound Nodes</h1>
+
+ <p>With Cytoscape Web it is very easy to create compound nodes (i.e. nodes
within nodes), and you can choose one of the folowing options:
+ <ol>
+ <li><a
href="http://www.cs.rpi.edu/research/groups/pb/punin/public_html/XGMML/draft-xgmml-20010628.html#NodeA";
rel="external">XGMML</a>:
+ This XML format supports subgraphs by allowing
<code><graph></code> tags to be nested into a node's
<code><att></code> tag.</li>
+ <li><a
href="http://graphml.graphdrawing.org/primer/graphml-primer.html#Nested";
rel="external">GraphML</a>: also supports nested graphs.</li>
+ <li><a
href="/documentation/elements#section/NetworkModel">NetworkModel</a>: Cytoscape
Web's native format is a simple option.
+ You just need to set the parent node ID in the nodes' data,
like in the example bellow.</li>
+ <li>At any moment, you can create compound nodes by <a
href="/documentation/visualization#section/addNode">adding new nodes</a> to
another node.</li>
+ </ol>
+ </p>
+
+ <?php print_code("file/example_code/compound_nodes.html"); ?>
+ <?php embed_code("file/example_code/compound_nodes.html"); ?>
+
+ <p>To learn more about how to work with compound nodes, take a look at
these related API functions and options:
+ <ul>
+ <li><a
href="/documentation/visualization#section/addElements">addElements()</a></li>
+ <li><a
href="/documentation/visualization#section/nodes">nodes()</a></li>
+ <li><a
href="/documentation/visualization#section/parentNodes">parentNodes()</a></li>
+ <li><a
href="/documentation/visualization#section/childNodes">childNodes()</a></li>
+ <li><code>CompoundSpringEmbedder</code> <a
href="/documentation/layout">layout</a></li>
+ </ul>
+ </p>
+
+ <p>You can also play with the <a href="/demos/compound">compound nodes
demo</a>.</p>
+
+
+
+
<h1>Conclusion</h1>
<p>This tutorial should allow you to have Cytoscape Web up and running and
interacting with
--
You received this message because you are subscribed to the Google Groups
"cytoscape-cvs" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/cytoscape-cvs?hl=en.
