Author: clopes
Date: 2011-10-12 15:34:46 -0700 (Wed, 12 Oct 2011)
New Revision: 27149
Modified:
cytoscapeweb/trunk/website/default.properties
cytoscapeweb/trunk/website/src/css/content/demos.css
cytoscapeweb/trunk/website/src/file/example_graphs/sample1.graphml
cytoscapeweb/trunk/website/src/js/content/demos/compound.js
cytoscapeweb/trunk/website/src/js/content/demos/simple.js
Log:
Improved demo pages.
Modified: cytoscapeweb/trunk/website/default.properties
===================================================================
--- cytoscapeweb/trunk/website/default.properties 2011-10-12 22:33:33 UTC
(rev 27148)
+++ cytoscapeweb/trunk/website/default.properties 2011-10-12 22:34:46 UTC
(rev 27149)
@@ -1,7 +1,7 @@
# Website version
-build.version=0.6.3
+build.version=0.7
# The released Cytoscape Web version (downloadable zip & API doc)
-cw.build.version=0.7.3
+cw.build.version=0.8
-CYTOSCAPEWEB_HOME=../cytoscapeweb
+CYTOSCAPEWEB_HOME=../../cytoscapeweb-compound
CW_FILE_HOME=../file
\ No newline at end of file
Modified: cytoscapeweb/trunk/website/src/css/content/demos.css
===================================================================
--- cytoscapeweb/trunk/website/src/css/content/demos.css 2011-10-12
22:33:33 UTC (rev 27148)
+++ cytoscapeweb/trunk/website/src/css/content/demos.css 2011-10-12
22:34:46 UTC (rev 27149)
@@ -1,3 +1,3 @@
-#cytoscapeweb { height: 600px !important; }
+#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
Modified: cytoscapeweb/trunk/website/src/file/example_graphs/sample1.graphml
===================================================================
--- cytoscapeweb/trunk/website/src/file/example_graphs/sample1.graphml
2011-10-12 22:33:33 UTC (rev 27148)
+++ cytoscapeweb/trunk/website/src/file/example_graphs/sample1.graphml
2011-10-12 22:34:46 UTC (rev 27149)
@@ -63,16 +63,16 @@
<data key="shape">VEE</data>
</node>
- <edge target="a05" source="a05" directed="false">
+ <edge target="a08" source="a08" directed="false">
<data key="network">15</data>
<data key="weight">0.2</data>
- <data key="label">a05 (15) a05</data>
+ <data key="label">a08 (15) a08</data>
<data key="lineStyle">SOLID</data>
</edge>
- <edge target="a05" source="a05" directed="false">
+ <edge target="a08" source="a08" directed="false">
<data key="network">25</data>
<data key="weight">0.4</data>
- <data key="label">a05 (25) a05</data>
+ <data key="label">a08 (25) a08</data>
<data key="lineStyle">DOT</data>
</edge>
<edge target="a01" source="a02" directed="true">
@@ -91,14 +91,6 @@
<data key="targetArrowShape">T</data>
<data key="lineStyle">DOT</data>
</edge>
- <edge target="a04" source="a01" directed="true">
- <data key="network">25</data>
- <data key="weight">0.2</data>
- <data key="label">a01 (25) a04</data>
- <data key="sourceArrowShape">circle</data>
- <data key="targetArrowShape">circle</data>
- <data key="lineStyle">EQUAL_DASH</data>
- </edge>
<edge target="a02" source="a03" directed="true">
<data key="network">15</data>
<data key="weight">0.8</data>
@@ -123,10 +115,10 @@
<data key="targetArrowShape">none</data>
<data key="lineStyle">EQUAL_DASH</data>
</edge>
- <edge target="a03" source="a04" directed="true">
+ <edge target="a08" source="a09" directed="true">
<data key="network">15</data>
<data key="weight">0.1</data>
- <data key="label">a03 (24) a04</data>
+ <data key="label">a08 (24) a09</data>
<data key="sourceArrowShape">diamond</data>
<data key="targetArrowShape">T</data>
<data key="lineStyle">DOT</data>
Modified: cytoscapeweb/trunk/website/src/js/content/demos/compound.js
===================================================================
--- cytoscapeweb/trunk/website/src/js/content/demos/compound.js 2011-10-12
22:33:33 UTC (rev 27148)
+++ cytoscapeweb/trunk/website/src/js/content/demos/compound.js 2011-10-12
22:34:46 UTC (rev 27149)
@@ -33,7 +33,7 @@
<div class="tools">\
<input type="button" id="reapplyLayout" value="Reapply
layout"/>\
<label for="showNodeLabels">Node Labels</label>\
- <input type="checkbox" id="showNodeLabels" checked="checked"/> \
+ <input type="checkbox" id="showNodeLabels"/> \
</div>\
<div id="cytoscapeweb" width="*">\
Cytoscape Web will replace the contents of this div with your
graph.\
@@ -47,9 +47,7 @@
var options = {
nodeTooltipsEnabled: true,
edgeTooltipsEnabled: true,
- nodeTooltipsEnabled: true,
edgesMerged: false,
- //mouseDownToDragDelay: -1,
visualStyle: {
global: {
backgroundColor: "#fefefe",
@@ -58,17 +56,13 @@
nodes: {
shape: "ELLIPSE",
compoundShape: "RECTANGLE",
- color: { defaultValue: "#cccccc", continuousMapper: {
attrName: "weight", minValue: "#ffffff", maxValue: "#0b94b1" } },
opacity: 0.9,
size: 30,
borderWidth: 2,
borderColor: "#707070",
compoundBorderColor: "#abcfd6",
compoundBorderWidth: 2,
- //image:
"http://chart.apis.google.com/chart?chs=300x300&cht=p&chd=e0:U-gh..bR";,
- //compoundImage:
"http://chart.apis.google.com/chart?chxr=0,0,160&chxt=x&chbh=a&chs=440x220&cht=bhs&chco=4D89F9,C6D9FD&chd=s:GflxYlS,fl9YSYS";,
- labelFontSize: { defaultValue: 12, continuousMapper: {
attrName: "weight", minValue: 10, maxValue: 24 } },
- tooltipText: { customMapper: { functionName: "onNodeTooltip" }
},
+ labelFontColor: "#505050",
selectionGlowOpacity: 0,
selectionBorderColor: "ff0000",
hoverBorderWidth: 4
@@ -137,15 +131,17 @@
.addContextMenuItem("Add new node", function(evt) {
var x = evt.mouseX;
var y = evt.mouseY;
- var parentId;console.log(evt)
+ var parentId;
if (evt.target != null && evt.target.group == "nodes") {
parentId = evt.target.data.id;
x = evt.target.x;
y = evt.target.y;
- x += Math.random() * (evt.target.width/2) *
(Math.round(x)%2==0 ? 1 : -1);
- y += Math.random() * (evt.target.height/2) *
(Math.round(y)%2==0 ? 1 : -1);
+ x += Math.random() * (evt.target.width/3) *
(Math.round(Math.random()*100)%2==0 ? 1 : -1);
+ y += Math.random() * (evt.target.height/3) *
(Math.round(Math.random()*100)%2==0 ? 1 : -1);
}
- var n = vis.addNode(x, y, { weight: Math.random(), label: "New" },
parentId, true);
+ var n = vis.addNode(x, y, { parent: parentId }, true);
+ n.data.label = n.data.id;
+ vis.updateData([n]);
})
.addContextMenuItem("Add new edge", "nodes", function(evt) {
_srcId = evt.target.data.id;
Modified: cytoscapeweb/trunk/website/src/js/content/demos/simple.js
===================================================================
--- cytoscapeweb/trunk/website/src/js/content/demos/simple.js 2011-10-12
22:33:33 UTC (rev 27148)
+++ cytoscapeweb/trunk/website/src/js/content/demos/simple.js 2011-10-12
22:34:46 UTC (rev 27149)
@@ -53,41 +53,32 @@
var options = {
nodeTooltipsEnabled: true,
edgeTooltipsEnabled: true,
- nodeTooltipsEnabled: true,
+ panZoomControlVisible: true,
edgesMerged: false,
- //mouseDownToDragDelay: -1,
visualStyle: {
global: {
- backgroundColor: "#fefefe",
- tooltipDelay: 1000
+ backgroundColor: "#fefefe"
},
nodes: {
- shape: "ELLIPSE",
- compoundShape: "ROUND_RECTANGLE",
+ shape: { passthroughMapper: { attrName: "shape" } },
color: { defaultValue: "#cccccc", continuousMapper: {
attrName: "weight", minValue: "#ffffff", maxValue: "#0b94b1" } },
+ size: { defaultValue: 20, continuousMapper: { attrName:
"weight", minValue: 25, maxValue: 50 } },
opacity: 0.9,
- size: { defaultValue: 20, continuousMapper: { attrName:
"weight", minValue: 20, maxValue: 40 } },
borderWidth: 2,
borderColor: "#707070",
- //image:
"http://chart.apis.google.com/chart?chs=300x300&cht=p&chd=e0:U-gh..bR";,
- //compoundImage:
"http://chart.apis.google.com/chart?chxr=0,0,160&chxt=x&chbh=a&chs=440x220&cht=bhs&chco=4D89F9,C6D9FD&chd=s:GflxYlS,fl9YSYS";,
- labelFontSize: { defaultValue: 12, continuousMapper: {
attrName: "weight", minValue: 10, maxValue: 24 } },
- tooltipText: { customMapper: { functionName: "onNodeTooltip" }
},
+ labelFontColor: "#303030",
selectionGlowOpacity: 0,
selectionBorderColor: "ff0000",
hoverBorderWidth: 4
},
edges: {
color: "#0b94b1",
- width: { defaultValue: 2, continuousMapper: { attrName:
"weight", minValue: 2, maxValue: 8 } },
- mergeWidth: { defaultValue: 2, continuousMapper: { attrName:
"weight", minValue: 2, maxValue: 8 } },
- mergeColor: "#0b94b1",
- opacity: 0.7,
- labelFontSize: 10,
- labelFontWeight: "bold",
- selectionGlowOpacity: 0,
- selectionColor: "ff0000",
- tooltipText: "${weight}"
+ mergeColor: "#0b94b1",
+ width: { defaultValue: 2, continuousMapper: { attrName:
"weight", minValue: 2, maxValue: 6 } },
+ style: { defaultValue: "SOLID", passthroughMapper: { attrName:
"lineStyle" } },
+ sourceArrowShape: { passthroughMapper: { attrName:
"sourceArrowShape" } },
+ targetArrowShape: { passthroughMapper: {
attrName: "targetArrowShape" } },
+ labelFontSize: 10
}
}
};
@@ -96,22 +87,14 @@
$("input, select").attr("disabled", true);
if (data) {
- var layout = { name: "ForceDirected" };
-
- if (data.indexOf("</graphml>") === -1 && data.indexOf("</graph>")
> -1) { // XGMML...
- layout = { name: "Preset", options: { fitToScreen: true } };
- } else { // GraphML or SIF
- layout = { name: $("#layouts").val(), options: { weightAttr:
"weight", restLength: 50, autoStabilize: false } };
- }
-
- options.layout = layout;
+ options.layout = { name: "ForceDirected" };
options.network = data;
options.nodeLabelsVisible = $("#showNodeLabels").is(":checked");
d1 = new Date();
vis.draw(options);
} else {
- var url = "/file/example_graphs/sample3.graphml";
+ var url = "/file/example_graphs/sample1.graphml";
$.get(url, function(dt) {
if (typeof dt !== "string") {
if (window.ActiveXObject) {
@@ -125,15 +108,6 @@
}
}
- var _srcId;
- function clickNodeToAddEdge(evt) {
- if (_srcId != null) {
- vis.removeListener("click", "nodes", clickNodeToAddEdge);
- var e = vis.addEdge({ source: _srcId, target:
evt.target.data.id, }, true);
- _srcId = null;
- }
- }
-
$("input").attr("disabled", true);
// init and draw
@@ -144,35 +118,6 @@
$("#layouts").val(layout.name);
$("input, select").attr("disabled", false);
$("#showNodeLabels").attr("checked", vis.nodeLabelsVisible());
-
- vis.addContextMenuItem("Delete node", "nodes", function(evt) {
- vis.removeNode(evt.target.data.id, true);
- })
- .addContextMenuItem("Delete edge", "edges", function(evt) {
- vis.removeEdge(evt.target.data.id, true);
- })
- .addContextMenuItem("Add new node", function(evt) {
- var x = evt.mouseX;
- var y = evt.mouseY;
- var parentId;console.log(evt)
- if (evt.target != null && evt.target.group == "nodes") {
- parentId = evt.target.data.id;
- x = evt.target.x;
- y = evt.target.y;
- x += Math.random() * (evt.target.width/2) *
(Math.round(x)%2==0 ? 1 : -1);
- y += Math.random() * (evt.target.height/2) *
(Math.round(y)%2==0 ? 1 : -1);
- }
- var n = vis.addNode(x, y, { weight: Math.random(), label: "New" },
parentId, true);
- })
- .addContextMenuItem("Add new edge", "nodes", function(evt) {
- _srcId = evt.target.data.id;
- vis.removeListener("click", "nodes", clickNodeToAddEdge);
- vis.addListener("click", "nodes", clickNodeToAddEdge);
- })
- .addContextMenuItem("Delete selected", function(evt) {
- var items = vis.selected();
- if (items.length > 0) { vis.removeElements(items, true); }
- });
});
vis.addListener("error", function(err) {
--
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.
