r20003 - in cytoscapeweb/trunk/website/src: css css/content file/example_graphs js/content js/cytoscape_web js/jquery/jquery-ui-1.7.2.custom/css/custom-theme
1 view
Skip to first unread message
cytoscape...@cytoscape.org
Apr 27, 2010, 6:51:15 PM4/27/10
to cytosc...@googlegroups.com
Author: Christian Lopes
Date: 2010-04-27 15:51:14 -0700 (Tue, 27 Apr 2010)
New Revision: 20003
Modified:
cytoscapeweb/trunk/website/src/css/content/demo.css
cytoscapeweb/trunk/website/src/css/layout.css
cytoscapeweb/trunk/website/src/file/example_graphs/sample1.graphml
cytoscapeweb/trunk/website/src/js/content/demo.js
cytoscapeweb/trunk/website/src/js/cytoscape_web/cytoscapeweb-styles-demo.js
cytoscapeweb/trunk/website/src/js/jquery/jquery-ui-1.7.2.custom/css/custom-theme/jquery-ui-1.7.2.custom.css
Log:
Added custom layout options panel.
Added nodes/edges add/delete feature (right click context menu).
Some minor CSS changes.
Modified: cytoscapeweb/trunk/website/src/css/content/demo.css
===================================================================
--- cytoscapeweb/trunk/website/src/css/content/demo.css 2010-04-27 22:32:36 UTC (rev 20002)
+++ cytoscapeweb/trunk/website/src/css/content/demo.css 2010-04-27 22:51:14 UTC (rev 20003)
@@ -1,24 +1,26 @@
/* overall style */
-body.demo { left: 0; width: 100%; margin: 0; }
+body.demo { left: 0; width: 100%; margin: 0; line-height: 1; }
#header-resizer { height: 0; width: 0; }
body.demo #logo { margin-left: 1em; margin-right: 5em; }
body.demo #header .text { margin-top: 2.5em; color: #707070; }
body.demo #page, body.demo #copyright, body.demo #navigation_links, body.demo #search, body.demo #content, body.demo #footer { display: none; }
-#cytoweb, #side { border: 1px #cfcfcf solid; -moz-box-shadow: 0 0 50px #bbbbbb; -webkit-box-shadow: 0 0 50px #bbbbbb; box-shadow: 0 0 50px #bbbbbb; }
-#cytoweb { background: #ffffff; }
+#cytoweb, #side { border: 1px #cfcfcf solid; -moz-box-shadow: 0 0 50px #bbb; -webkit-box-shadow: 0 0 50px #bbb; box-shadow: 0 0 50px #bbb; }
+#cytoweb { background: #fff; }
#side, #cytoweb { border-radius: 0 !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; }
-#cytoweb ul { margin-left: 0; }
+#cytoweb ul { margin-left: 0; }
#menu { z-index: 9999 !important; height: auto !important; border: 0 !important; background: transparent !important; }
#cytoweb_container { background: transparent; position: absolute; top: 0; left: 0; z-index: 0; height: 100%; width: 100%; }
#menu > ul { border: 1px solid #707070; }
-#examples { }
-#info table { /* width: 100%; */ }
+#examples { }
+#examples * { margin: 0 0 0.5em 0; }
.hidden { z-index: -1; visibility: hidden; }
-body.demo h1 { border-bottom: 1px solid #cfcfcf; clear: both; }
-body.demo * + h1, body.demo * + h2, #vizmapper * + h3 { padding-top: 1.5em; }
-body.demo h1 + h2, body.demo h2 + h3 { padding-top: 0.5em; }
+body.demo h1 { border-bottom: 1px solid #cfcfcf; clear: both; text-align: center; }
+body.demo * + h1, body.demo * + h2, #vizmapper * + h3 { padding-top: 0.5em; }
+body.demo h1 + h2, body.demo h2 + h3 { padding-top: 0.25em; }
+input[type=text], textarea { background-color: #FFF; }
.ui-layout-header .header { padding: 1em 1.4em; border-bottom: 1px solid #808080; }
-.ui-layout-header { min-height: 0.5em; }
+.ui-layout-header { min-height: 0.25em; }
+.ui-layout-content { background: #fafafa; }
/* menu styling */
@@ -26,17 +28,17 @@
.ui-menu-title { margin: 0 !important; background: transparent !important; border: 0 !important; }
.ui-menu-title.ui-state-active > label { background-color: #0b94b1 !important; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.ui-menu-item { margin: 0 !important; float: left; background: #fafafa; z-index: 9999; }
- .ui-menu-title label { color: #ffffff; }
+ .ui-menu-title label { color: #fff; }
.ui-menu-item label, .ui-menu-title label { float: left; }
.ui-menu-title > label { padding: 0.25em 0.5em 0.25em 0.5em; }
.ui-menu-item > label { padding: 0.1em; }
- .ui-menu-item label { color: #000000; z-index: 2; }
+ .ui-menu-item label { color: #000; z-index: 2; }
.ui-menu-item { cursor: pointer !important; width: 100%; float: left; clear: both; border-top: 1px solid #eaeaea !important; border-bottom: 1px solid #fafafa !important; }
.ui-top-menu > .ui-menu-item-first { border-top-right-radius: 0; border-top-left-radius: 0; -moz-border-radius-topleft: 0; -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; -webkit-border-top-left-radius: 0; }
.ui-top-menu li label { white-space: nowrap; }
.ui-menu-item-last { }
.ui-state-active.ui-menu-item { background: #0b94b1 !important; border-color: #0b94b1 !important; border-left-color: #097d95 !important; }
- .ui-state-active.ui-menu-item > label { color: #ffffff; }
+ .ui-state-active.ui-menu-item > label { color: #fff; }
.ui-state-active.ui-menu-item-first { }
.ui-state-active.ui-menu-item-last { }
.ui-tabs-nav.ui-menu-bar {text-align: left;}
@@ -44,7 +46,7 @@
.ui-tabs-nav .ui-state-default.ui-menu-title { }
.ui-menu-item, .ui-menu-title label { cursor: pointer; }
.ui-sub-menu { z-index: 5; margin-top: 0 !important; background: transparent; }
- .ui-top-menu { z-index: 0; border-top: 0 !important; padding-top: 0.25em; margin-top: -0.25em; background: #ffffff; border-right: 2px solid #ffffff !important; }
+ .ui-top-menu { z-index: 0; border-top: 0 !important; padding-top: 0.25em; margin-top: -0.25em; background: #fff; border-right: 2px solid #fff !important; }
.ui-top-menu, .ui-sub-menu { margin: 0; float: left; border: 1px solid #cfcfcf; -moz-box-shadow: 0em 0 50px #bbbbbb; -webkit-box-shadow: 0 0 50px #bbbbbb; box-shadow: 0 0 50px #bbbbbb; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.ui-sub-menu-spacing { z-index: -1; background: transparent; cursor: default !important; }
@@ -67,20 +69,20 @@
.tool_tip_pointer { width: 22px; height: 12px; background-repeat: no-repeat; margin: 0px; padding: 0; }
.tool_tip_top { background-image: url("../../img/tool_tip/tool_tip_up_80.png"); }
.tool_tip_bottom { background-image: url("../../img/tool_tip/tool_tip_down_80.png"); }
-.tool_tip_text { background-image: url("../../img/tool_tip/tool_tip_bg_80.png"); color: #ffffff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0.5em 0.75em; margin: 0px; }
+.tool_tip_text { background-image: url("../../img/tool_tip/tool_tip_bg_80.png"); color: #fff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0.5em 0.75em; margin: 0px; }
/* save, open */
.swf { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; }
/* side tabs */
#side .header { position: relative; }
-#side .content { position: relative; }
+#side .content { position: relative; padding: 0.25em; }
/* filters */
#filter_header ul { margin: 0; display: inline; }
#filter_header li { margin: 0; display: inline; }
#filter_header li a { text-decoration: none; padding: 0.25em; border: 1px solid #cfcfcf; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
-#filter_header li a.selected { border: 1px solid #0b94b1; background-color: #0b94b1; color: #ffffff; }
+#filter_header li a.selected { border: 1px solid #0b94b1; background-color: #0b94b1; color: #fff; }
#filter label { display: block; padding-top: 1em; clear: both; }
#filter .attribute { clear: both; float: left; width: 100%; }
#filter .range_area { margin-left: 4em; margin-right: 4em; clear: both; }
@@ -112,7 +114,7 @@
/* shape picker */
#node_shape_picker { width: 240px; padding: 5px; }
#edge_shape_picker { width: 180px; padding: 5px; }
-.shape_picker .shape { width: 50px; height: 50px; background-color: #ffffff; background-position: center center; background-repeat: no-repeat; float: left; margin: 5px; cursor: pointer; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
+.shape_picker .shape { width: 50px; height: 50px; background-color: #fff; background-position: center center; background-repeat: no-repeat; float: left; margin: 5px; cursor: pointer; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.shape_picker .shape.rectangle { background-image: url("../../img/icons/shapes/rectangle.png"); }
.shape_picker .shape.roundrect { background-image: url("../../img/icons/shapes/roundrect.png"); }
.shape_picker .shape.diamond { background-image: url("../../img/icons/shapes/diamond.png"); }
@@ -125,16 +127,16 @@
.shape_picker .shape.t { background-image: url("../../img/icons/shapes/t.png"); }
/* resizing panes */
-.ui-layout-resizer { display: block; background: url("../../img/layout/grip.png") #ffffff; cursor: w-resize; }
+.ui-layout-resizer { display: block; background: url("../../img/layout/grip.png") #fff; cursor: w-resize; }
.ui-layout-resizer-drag { visibility: hidden; }
#overlay, #cytoweb_overlay { width: 100%; height: 100%; background: transparent; position: absolute; left: 0; top: 0; z-index: 9999; display: none; }
.resizing { opacity: 0.5; }
/* save screen */
-.save_screen { opacity: 0.99 /* needs to be for firefox cytoweb recalculate layout */; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #ffffff; z-index: 10000; overflow: auto; }
+.save_screen { opacity: 0.99 /* needs to be for firefox cytoweb recalculate layout */; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #fff; z-index: 10000; overflow: auto; }
.save_screen .corner { cursor: pointer; position: absolute; left: 0; top: 0; width: 250px; height: 250px; background: url("../../img/layout/back_empty.png"); }
.save_screen .corner * { cursor: pointer; }
-.save_screen .corner span { color: #ffffff; line-height: 1; width: 140px; margin: 20px 0 0 30px; display: block; }
+.save_screen .corner span { color: #fff; line-height: 1; width: 140px; margin: 20px 0 0 30px; display: block; }
.save_screen .corner .icon { width: 64px; height: 64px; background-image: url("../../img/icons/oxygen/64x64/actions/back.png"); position: absolute; left: 30px; top: 60px; }
.save_screen .description { text-align: center; width: 100%; }
.save_screen .selections { height: 250px; width: 600px; margin: -125px auto 0 auto; top: 160px; position: relative; text-align: center; }
@@ -152,10 +154,10 @@
#save_png .icon { background: url("../../img/icons/png.png"); }
/* screens */
-.screen { opacity: 0.99 /* needs to be for firefox cytoweb recalculate layout */; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #ffffff ; background: rgba(255, 255, 255, 0.85); z-index: 9999; }
-.loading_screen { background: #ffffff; }
+.screen { opacity: 0.99 /* needs to be for firefox cytoweb recalculate layout */; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #fff ; background: rgba(255, 255, 255, 0.85); z-index: 9999; }
+.loading_screen { background: #fff; }
.screen * { text-decoration: none; }
-.screen .notification { width: 200px; background: #ffffff; position: relative; top: 50%; padding: 2em; margin: -100px auto 0 auto; }
+.screen .notification { width: 200px; background: #fff; position: relative; top: 50%; padding: 2em; margin: -100px auto 0 auto; }
.error_screen .notification, .info_screen .notification, .warning_screen .notification { border: 1px solid #e0e0e0; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 0 0 50px #bbbbbb; -webkit-box-shadow: 0 0 50px #bbbbbb; box-shadow: 0 0 50px #bbbbbb; }
.screen .notification .icon, .screen .notification .heading, .screen .notification .message { margin: 0 auto 1em auto; display: block; font-size: 1em; }
.screen .notification .icon { margin-bottom: 1em; background: url("../../img/layout/loader.gif") no-repeat transparent; height: 32px; width: 32px; }
@@ -165,14 +167,14 @@
.screen .corner { cursor: pointer; position: absolute; left: 0; top: 0; width: 250px; height: 250px; background: url("../../img/layout/back_empty.png"); z-index: 1; }
.screen .corner * { cursor: pointer; }
.screen .corner .icon { width: 64px; height: 64px; background-image: url("../../img/icons/oxygen/64x64/actions/back.png"); position: absolute; left: 30px; top: 60px; }
-.screen .corner span { color: #ffffff; line-height: 1; width: 140px; margin: 20px 0 0 30px; display: block; }
+.screen .corner span { color: #fff; line-height: 1; width: 140px; margin: 20px 0 0 30px; display: block; }
.screen .heading { color: #707070; text-align: center; margin-bottom: 1em; width: 100%; }
.screen .message { width: 200px; }
/* examples */
#examples .entry { margin: 0 0 1em 0; }
-#examples .entry .name { padding: 0; }
+#examples .entry .name { padding: 0; font-size: 1.25em; text-align: center; }
#examples .entry .icon { min-width: 230px; max-width: 600px; height: 50px; background-position: center center; background-color: #e0e0e0; border: 1px solid #cfcfcf; }
#examples .entry.pathguide .icon { background-image: url("../../img/content/demo/examples/pathguide.png"); }
#examples .entry.genetics .icon { background-image: url("../../img/content/demo/examples/genetics.png"); }
@@ -180,21 +182,24 @@
#examples .entry.shapes .icon { background-image: url("../../img/content/demo/examples/shapes.png"); }
#examples .entry.peterson .icon { background-image: url("../../img/content/demo/examples/petersen.png"); }
#examples .entry, #examples .entry * { cursor: pointer; }
-#examples .entry .description { color: #000000; }
+#examples .entry .description { color: #707070; line-height: 1; }
/* info tab */
#info { padding: 0 !important; margin: 0 !important; height: 100%; }
#info .half { height: 50%; overflow: auto; }
#info .half:first-child { border-bottom: 1px solid #808080; margin-top: -1px; }
-#info .half .section { padding: 1em 1.4em; }
+#info .half .section { padding: 0.5em; }
#info .section h1 { }
+#info table { margin: 0; }
+#info .tablesorter th { line-height: 1.5; }
#info .tablesorter th label { padding: 0.25em 1.5em 0.25em 0.25em; margin-left: -0.25em; cursor: pointer; }
-#info .tablesorter th.headerSortDown label, #info .tablesorter th.headerSortUp label { background-repeat: no-repeat; background-color: #0b94b1; color: #ffffff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
+#info .tablesorter th.headerSortDown label, #info .tablesorter th.headerSortUp label { background-repeat: no-repeat; background-color: #0b94b1; color: #fff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
#info .tablesorter th.headerSortUp label { background-image: url("../../img/layout/open_arrow/white/up.png"); background-position: right center; }
#info .tablesorter th.headerSortDown label { background-image: url("../../img/layout/open_arrow/white/down.png"); background-position: right center; }
+#info .tablesorter tr td { font-family: "Monaco", "Courier New", monospace; font-size: 0.85em; line-height: 1.25; }
/* vizmapper tab */
-#vizmapper label.style { display: block; padding-top: 1em; clear: both; }
+#vizmapper label.style { display: block; padding-top: 0.5em; clear: both; }
#vizmapper .property { clear: both; position: relative; }
#vizmapper .property input { display: block; width: 10em; }
#vizmapper .property input.colour_sample_bg { background-image: url("../../img/input_for_colour_picker/bg.png"); background-position: center right; background-repeat: repeat-y; }
@@ -213,4 +218,21 @@
#vizmapper .property .continuous .middle { text-align: center; position: absolute; top: 50%; margin-top: -0.75em; width: 100%; }
#vizmapper .property .selector .ui-top-menu { z-index: 9999; }
#vizmapper .property label.discrete_name { display: block; padding-top: 0.5em; }
-#vizmapper .property label.discrete_name:first-child { padding-top: 0em; }
\ No newline at end of file
+#vizmapper .property label.discrete_name:first-child { padding-top: 0em; }
+
+/* layout settings */
+/* Vertical Tabs
+----------------------------------*/
+.ui-tabs-vertical { }
+.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; }
+.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
+.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
+.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
+.ui-tabs-vertical .ui-tabs-panel { padding: 0.3em; float: right; width: 20em; overflow: auto; }
+
+#settings { padding: 0.25em 0.1em; }
+#settings .ui-tabs-vertical .ui-tabs-nav { height: 21em; }
+#settings table { margin: 0; }
+#settings td { border: 0px solid #CFCFCF; text-align: left; }
+#settings input[type="text"], #settings select { margin-bottom: 0.5em; width: 8.5em; }
+#settings .footer { height: 2em; padding-top: 0.5em; text-align: center; }
Modified: cytoscapeweb/trunk/website/src/css/layout.css
===================================================================
--- cytoscapeweb/trunk/website/src/css/layout.css 2010-04-27 22:32:36 UTC (rev 20002)
+++ cytoscapeweb/trunk/website/src/css/layout.css 2010-04-27 22:51:14 UTC (rev 20003)
@@ -17,7 +17,7 @@
h3 { font-size: 1em; line-height: 2em; }
label { color: #0b94b1; }
p { padding: 0.5em 0 0.5em 0; }
-input, button, textarea { resize: none; font-size: 100%; font-family: Helvetica, Arial, Verdana, sans-serif; border: 1px solid #c1c1c1; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0.25em; }
+input, button, textarea, select { resize: none; font-size: 100%; font-family: Helvetica, Arial, Verdana, sans-serif; border: 1px solid #c1c1c1; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0.25em; }
input:focus, button:focus, textarea:focus{ -moz-box-shadow: 0 0 5px #0b94b1; -webkit-box-shadow: 0 0 5px #0b94b1; box-shadow: 0 0 5px #0b94b1; }
input[type=submit], button { color: #ffffff; cursor: pointer; background: #097288 url("../img/layout/button_blue.png") repeat-x top center; }
input.emphasis, button.emphasis { background: #62977c url("../img/layout/button_green.png") repeat-x top center; }
Modified: cytoscapeweb/trunk/website/src/file/example_graphs/sample1.graphml
===================================================================
--- cytoscapeweb/trunk/website/src/file/example_graphs/sample1.graphml 2010-04-27 22:32:36 UTC (rev 20002)
+++ cytoscapeweb/trunk/website/src/file/example_graphs/sample1.graphml 2010-04-27 22:51:14 UTC (rev 20003)
@@ -1,9 +1,15 @@
<graphml>
- <key id="weight" for="node" attr.name="weight" attr.type="double"/>
+ <key id="weight" for="node" attr.name="weight" attr.type="double">
+ <default>0.2</default>
+ </key>
<key id="label" for="node" attr.name="label" attr.type="string"/>
- <key id="shape" for="node" attr.name="shape" attr.type="string"/>
+ <key id="shape" for="node" attr.name="shape" attr.type="string">
+ <default>DIAMOND</default>
+ </key>
- <key id="network" for="edge" attr.name="network" attr.type="string"/>
+ <key id="network" for="edge" attr.name="network" attr.type="string">
+ <default>2</default>
+ </key>
<key id="weight" for="edge" attr.name="weight" attr.type="double"/>
<key id="label" for="edge" attr.name="label" attr.type="string"/>
<key id="sourceArrowShape" for="edge" attr.name="sourceArrowShape" attr.type="string"/>
Modified: cytoscapeweb/trunk/website/src/js/content/demo.js
===================================================================
--- cytoscapeweb/trunk/website/src/js/content/demo.js 2010-04-27 22:32:36 UTC (rev 20002)
+++ cytoscapeweb/trunk/website/src/js/content/demo.js 2010-04-27 22:51:14 UTC (rev 20003)
@@ -246,7 +246,44 @@
});
+ // Layout options:
+ var layout_names = {};
+ layout_names["ForceDirected"] = "Force Directed";
+ layout_names["Circle"] = "Circle";
+ layout_names["CircleTree"] = "Circle Tree";
+ layout_names["Radial"] = "Radial";
+ layout_names["Tree"] = "Tree";
+ var layout_options = {};
+ layout_options["ForceDirected"] = [
+ { id: "gravitation", label: "Gravitation", value: -500, tip: "The gravitational constant. Negative values produce a repulsive force." },
+ { id: "mass", label: "Node mass", value: 3, tip: "The default mass value for node/particles." },
+ { id: "tension", label: "Edge tension", value: 0.4, tip: "The default spring tension for edge/springs." },
+ { id: "restLength", label: "Edge rest length", value: "auto", tip: "The default spring rest length for edge/springs." },
+ { id: "drag", label: "Drag co-efficient", value: 0.1, tip: "The co-efficient for frictional drag forces." },
+ { id: "minDistance", label: "Minimum distance", value: 1, tip: "The minimum effective distance over which forces are exerted." },
+ { id: "maxDistance", label: "Maximum distance", value: 10000, tip: "The maximum distance over which forces are exerted." },
+ { id: "iterations", label: "Iterations", value: 80, tip: "The number of iterations to run the simulation per invocation." },
+ { id: "maxTime", label: "Maximum time", value: 60, tip: "The maximum time to run the simulation, in seconds." },
+ { id: "autoStabilize", label: "Auto stabilize", value: true, tip: "If checked, Cytoscape Web automatically tries to stabilize results that look unstable after running the regular iterations." }
+ ];
+ layout_options["Circle"] = [
+ { id: "angleWidth", label: "Angle width", value: -6.28318531, tip: "The angular width of the layout, in radians." }
+ ];
+ layout_options["CircleTree"] = [
+ { id: "angleWidth", label: "Angle width", value: -6.28318531, tip: "The angular width of the layout, in radians." }
+ ];
+ layout_options["Radial"] = [
+ { id: "radius", label: "Radius", value: 60, tip: "The radius increment between depth levels." },
+ { id: "angleWidth", label: "Angle width", value: -6.28318531, tip: "The angular width of the layout, in radians." }
+ ];
+ layout_options["Tree"] = [
+ { id: "orientation", label: "Orientation", value: ["leftToRight","rightToLeft","bottomToTop","topToBottom"], tip: "The orientation of the layout." },
+ { id: "depthSpace", label: "Depth space", value: 50, tip: "The space between depth levels in the tree." },
+ { id: "breadthSpace", label: "Breadth space", value: 30, tip: "The space between siblings in the tree." },
+ { id: "subtreeSpace", label: "Angle width", value: 5, tip: "The space between different sub-trees." }
+ ];
+
// create tabs
$("#side").tabs({
show: function(event, ui){
@@ -406,8 +443,9 @@
// call back for when the graph is opened and fully loaded
$("#cytoweb_container").cw().ready(function(){
- $("#cytoweb_container").cw().addListener("error", function(err){
-
+ var vis = $("#cytoweb_container").cw();
+
+ vis.addListener("error", function(err){
hide_msg({ target: $("body") });
show_msg({
@@ -424,7 +462,7 @@
message: "This area is unavailable when the graph file can not be loaded."
});
});
-
+
$("#cytoweb_container").trigger("available");
}); // end cl load
@@ -450,6 +488,84 @@
open_graph(options);
+ // [settings] Layout settings
+ ////////////////////////////////////////////////////////////////////////////////////////////////
+
+ function create_settings_panel(layout_id){
+ var opt = layout_options[layout_id];
+ var panel = ('<div id="'+layout_id+'" class="content ui-widget-content"><table>');
+
+ for(var i in opt) {
+ var o = opt[i];
+ var v = o.value;
+ panel += '<tr title="'+o.tip+'">';
+
+ if (typeof v === "object") {
+ panel += ('<td align="right"><label>'+o.label+' </label></td><td><select id="'+o.id+'" size="1">');
+ for(var j in v) { panel += ('<option value="'+v[j]+'">'+v[j]+'</option>'); }
+ panel += '</select></td>'
+ } else if (typeof v === "boolean") {
+ panel += ('<td align="right"><label>'+o.label+' </label></td><td align="left"><input type="checkbox" id="'+o.id+'" value="'+v+'"'+(v?' checked="checked"':'')+'/></td>');
+ } else {
+ panel += ('<td align="right"><label>'+o.label+' </label></td><td><input type="text" id="'+o.id+'" value="'+v+'"/></td>');
+ }
+
+ panel += "</tr>";
+ }
+
+ panel += "</table></div>";
+
+ return $(panel);
+ }
+
+ function open_settings(){
+ if ($("#settings").length === 0) {
+ var dialog = '\
+ <div id="settings" title="Layout Settings">\
+ <div class="tabs ui-widget">\
+ <ul></ul>\
+ <div class="ui-layout-content"/>\
+ </div>\
+ <div class="footer"><input type="button" id="execute_layout" class="ui-state-default" value="Execute Layout"/></div>\
+ </div>\
+ ';
+
+ $("body").append(dialog);
+
+ for(var i in layout_names) {
+ var layout_id = i;
+ var layout_name = layout_names[layout_id];
+ var panel = create_settings_panel(layout_id);
+ $("#settings .tabs ul").append('<li><a href="#'+layout_id+'">' + layout_name + '</a></li>');
+ $("#settings .tabs > .ui-layout-content").append(panel);
+ }
+
+ $("#settings .tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
+ $("#settings .tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
+
+ $("#execute_layout").click(function(){
+ var layout_id = $("#settings .ui-tabs-selected a").attr("href").replace("#", "");
+ var options = {};
+ var def = layout_options[layout_id];
+
+ for(var i in def) {
+ var o = def[i];
+ var v, id = o.id;
+ var input = $("#settings #"+layout_id+" #"+id);
+ v = input.val();
+ if (typeof o.value === "boolean") { v = Boolean(v); }
+ else if (typeof o.value === "number") { v = Number(v); }
+ options[id] = v;
+ }
+ console.log(options);
+ $("#cytoweb_container").cw().layout(layout_id, options);
+ });
+
+ $("#settings").dialog({ autoOpen: false, resizable: false, width: 430 });
+ }
+ $("#settings").dialog("open");
+ }
+
// [menu] Create the menu above Cytoscape Web
////////////////////////////////////////////////////////////////////////////////////////////////
@@ -481,18 +597,11 @@
<ul id="layout_style" class="ui-menu-one-checkable">\
</ul>\
</li>\
+ <li id="layout_settings"><label>Settings...</label></li>\
</ul>\
</li>\
</ul>\
');
-
- // add layout styles
- var layout_names = new Array();
- layout_names["ForceDirected"] = "Force directed";
- layout_names["Circle"] = "Circle";
- layout_names["CircleTree"] = "Circle tree";
- layout_names["Radial"] = "Radial";
- layout_names["Tree"] = "Tree";
// add layouts to menu
for(var i in layout_names) {
@@ -554,6 +663,10 @@
var layout = $("#layout_style .ui-menu-checked").parent().attr("layout_id");
$("#cytoweb_container").cw().layout(layout);
break;
+
+ case "layout_settings":
+ open_settings();
+ break;
case "open_example":
var ex = example[li.attr("example_id")];
@@ -621,7 +734,7 @@
$("#open_file").trigger("available");
},
typeFilter: function(){
- return "*.xgmml;*.graphml;*.xml";
+ return "*.graphml;*.xgmml;*.xml;*.sif";
},
typeDescription: function(){
return "Network file";
@@ -845,28 +958,28 @@
function update_info(){
update();
-
+ updateContextMenu();
+
$("#cytoweb_container").cw().addListener("select", "nodes", function(){
update();
- });
-
- $("#cytoweb_container").cw().addListener("deselect", "nodes", function(){
+ updateContextMenu();
+ })
+ .addListener("deselect", "nodes", function(){
update();
- });
-
- $("#cytoweb_container").cw().addListener("select", "edges", function(){
+ updateContextMenu();
+ })
+ .addListener("select", "edges", function(){
update();
- });
-
- $("#cytoweb_container").cw().addListener("deselect", "edges", function(){
+ updateContextMenu();
+ })
+ .addListener("deselect", "edges", function(){
update();
- });
-
- $("#cytoweb_container").cw().addListener("dblClick", "nodes", function(){
+ updateContextMenu();
+ })
+ .addListener("dblClick", "nodes", function(){
$("#info_link").click();
- });
-
- $("#cytoweb_container").cw().addListener("dblClick", "edges", function(){
+ })
+ .addListener("dblClick", "edges", function(){
$("#info_link").click();
});
@@ -874,6 +987,15 @@
update();
});
+ var _srcId;
+ function clickNodeToAddEdge(evt) {
+ if (_srcId != null) {
+ $("#cytoweb_container").cw().removeListener("click", "nodes", clickNodeToAddEdge);
+ $("#cytoweb_container").cw().addEdge({ source: _srcId, target: evt.target.data.id }, true);
+ _srcId = null;
+ }
+ }
+
function update(){
var edges = $("#cytoweb_container").cw().selected("edges");
var nodes = $("#cytoweb_container").cw().selected("nodes");
@@ -881,41 +1003,42 @@
container.html(""); // clear info area
- function print_selection(group, name){
+ function print_selection(items, name, id){
var headings = [];
- var half = $("<div class=\"half\"></div>");
+ var half = $('<div class="half"></div>');
container.append(half);
- var section = $("<div class=\"section\"></div>");
+ var section = $('<div class="section"></div>');
half.append(section);
section.append("<h1>" + name + "</h1>");
- if( group.length > 0 ) {
- var table = $("<table class=\"tablesorter\"></table>");
+ if( items.length > 0 ) {
+ var table = $('<table id="'+id+'"></table>');
section.append(table);
- var thead = $("<thead></thead>");
+ var thead = $('<thead></thead>');
table.append(thead);
- var thead_row = $("<tr></tr>");
+ var thead_row = $('<tr></tr>');
thead.append(thead_row);
- for(var j in group[0].data){
+ for(var j in items[0].data){
headings.push(j);
}
+
headings.sort();
for(var j in headings){
var heading = headings[j];
- thead_row.append("<th><label>" + ("" + heading).replace(/(\s)/g, " ") + "</label></th>");
+ thead_row.append('<th><label>' + ("" + heading).replace(/(\s)/g, " ") + '</label></th>');
}
- var tbody = $("<tbody></tbody>");
+ var tbody = $('<tbody></tbody>');
table.append(tbody);
- for(var i in group){
- var data = group[i].data;
- var row = $("<tr name=\"" + data.id + "\"></tr>");
+ for(var i in items){
+ var data = items[i].data;
+ var row = $('<tr name="' + data.id + '"></tr>');
tbody.append(row);
for(var j in headings){
@@ -923,27 +1046,59 @@
var param_val = data[param_name];
var val = ("" + param_val).replace(/(\s)/g, " ");
- var entry = $("<td><code>" + val + "</code></td>");
+ var entry = $('<td class="code">' + val + '</td>');
row.append(entry);
}
}
-
-
-
} else {
- section.append("<p>No " + name.toLowerCase() + " are selected.</p>");
+ section.append('<p>No ' + name.toLowerCase() + ' are selected.</p>');
}
-
}
+
+ print_selection(nodes, "Nodes", "NodesDataTable");
+ print_selection(edges, "Edges", "EdgesDataTable");
- print_selection(nodes, "Nodes");
- print_selection(edges, "Edges");
-
-
$("#info").find(".tablesorter").tablesorter();
-
}
+ function updateContextMenu(){
+ var cw = $("#cytoweb_container").cw();
+
+ cw.removeContextMenuItem()
+ .addContextMenuItem("Delete node", "nodes", function(evt) {
+ $("#cytoweb_container").cw().remove([evt.target], true);
+ updateContextMenu();
+ update();
+ })
+ .addContextMenuItem("Delete edge", "edges", function(evt) {
+ $("#cytoweb_container").cw().remove([evt.target], true);
+ updateContextMenu();
+ update();
+ })
+ .addContextMenuItem("Add new node", function(evt) {
+ $("#cytoweb_container").cw().addNode(evt.mouseX, evt.mouseY, { }, true);
+ updateContextMenu();
+ update();
+ })
+ .addContextMenuItem("Add new edge (then click the target node...)", "nodes", function(evt) {
+ _srcId = evt.target.data.id;
+ $("#cytoweb_container").cw().removeListener("click", "nodes", clickNodeToAddEdge);
+ $("#cytoweb_container").cw().addListener("click", "nodes", clickNodeToAddEdge);
+ });
+
+ var items = cw.selected();
+ if (items.length > 0) {
+ cw.addContextMenuItem("Delete selected", function(evt) {
+ //var items = cw.selected();
+ $("#cytoweb_container").cw().remove(items, true);
+ updateContextMenu();
+ update();
+ });
+ } else {
+ cw.removeContextMenuItem("Delete selected");
+ }
+ }
+
$("#info").trigger("available");
}
@@ -1633,13 +1788,13 @@
}
});
- if(initial_property_is_mapped){
+ if (initial_property_is_mapped){
open_map_section();
- if(initial_property.continuousMapper != undefined){
+ if (initial_property.continuousMapper != undefined) {
set_selector_title(initial_property.continuousMapper.attrName, "continuous");
display_continuous(true);
- } else if(initial_property.discreteMapper != undefined) {
+ } else if (initial_property.discreteMapper != undefined) {
set_selector_title(initial_property.discreteMapper.attrName, "discrete");
display_discrete(true);
}
@@ -1980,7 +2135,7 @@
return false; // no shown in loop
}
- });
+ }, true);
});
@@ -2360,11 +2515,11 @@
// create examples in side tab (static -- does not change on new graph load)
for(var id in example){
var ex = example[id];
- var entry = $( "<div class=\"entry " + id + "\" example_id=\"" + id + "\">\
- <label class=\"name\">" + ex.name + "</label>\
- <div class=\"icon\"></div>\
- <label class=\"description\">" + ex.description + "</label>\
- </div>");
+ var entry = $( '<div class="entry ' + id + '" example_id="' + id + '">\
+ <h3 class="name">' + ex.name + '</h3>\
+ <div class="icon"></div>\
+ <label class="description">' + ex.description + '</label>\
+ </div>' );
entry.click(function(){
open_graph( example[ $(this).attr("example_id") ] );
Modified: cytoscapeweb/trunk/website/src/js/cytoscape_web/cytoscapeweb-styles-demo.js
===================================================================
--- cytoscapeweb/trunk/website/src/js/cytoscape_web/cytoscapeweb-styles-demo.js 2010-04-27 22:32:36 UTC (rev 20002)
+++ cytoscapeweb/trunk/website/src/js/cytoscape_web/cytoscapeweb-styles-demo.js 2010-04-27 22:51:14 UTC (rev 20003)
@@ -151,7 +151,6 @@
shape: "RECTANGLE",
color: "#fefefe",
borderColor:"#374A70",
- label: { customMapper: { functionName: "customNodeLabel" } },
labelFontColor: "#374A70",
labelHorizontalAnchor: "center",
labelVerticalAnchor: "bottom",
@@ -176,7 +175,6 @@
tooltipBackgroundColor: "#ffffff",
tooltipBorderColor: "#374A70",
tooltipFontColor: "#374A70",
- mergeTooltipText: { customMapper: { functionName: "customMergedEdgeTooltip" } },
selectionGlowOpacity: 0,
selectionColor: "#ff0000",
curvature: 32
@@ -400,7 +398,7 @@
opacity: 0.6,
color: { defaultValue: "#999999", discreteMapper: edgeColorMapper },
width: { defaultValue: 1, continuousMapper: { attrName: "weight", minValue: 1, maxValue: 4 } },
- mergeWidth: { defaultValue: 1, continuousMapper: { attrName: "avg:weight", minValue: 2, maxValue: 6 } },
+ mergeWidth: { defaultValue: 1, continuousMapper: { attrName: "weight", minValue: 2, maxValue: 6 } },
tooltipFontColor: "#ffffff",
tooltipBackgroundColor: "#000000",
tooltipBorderColor: "#999999",
Modified: cytoscapeweb/trunk/website/src/js/jquery/jquery-ui-1.7.2.custom/css/custom-theme/jquery-ui-1.7.2.custom.css
===================================================================
--- cytoscapeweb/trunk/website/src/js/jquery/jquery-ui-1.7.2.custom/css/custom-theme/jquery-ui-1.7.2.custom.css 2010-04-27 22:32:36 UTC (rev 20002)
+++ cytoscapeweb/trunk/website/src/js/jquery/jquery-ui-1.7.2.custom/css/custom-theme/jquery-ui-1.7.2.custom.css 2010-04-27 22:51:14 UTC (rev 20003)
@@ -52,7 +52,7 @@
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Helvetica,Arial,sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #ababab; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #000000; }
.ui-widget-content a { color: #000000; }
-.ui-widget-header { border: 1px solid #363636; background: #363636 url(images/ui-bg_flat_75_363636_40x100.png) 50% 50% repeat-x; color: #000000; font-weight: bold; }
+.ui-widget-header { border: 1px solid #363636; background: #363636 url(images/ui-bg_flat_75_363636_40x100.png) 50% 50% repeat-x; color: #FFF; font-weight: bold; }
.ui-widget-header a { color: #000000; }
/* Interaction states
@@ -81,7 +81,7 @@
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_000000_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_000000_256x240.png); }
-.ui-widget-header .ui-icon {background-image: url(images/ui-icons_000000_256x240.png); }
+.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_000000_256x240.png); }
--
You received this message because you are subscribed to the Google Groups "cytoscape-cvs" group.
To post to this group, send email to cytosc...@googlegroups.com.
To unsubscribe from this group, send email to cytoscape-cv...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/cytoscape-cvs?hl=en.
Date: 2010-04-27 15:51:14 -0700 (Tue, 27 Apr 2010)
New Revision: 20003
Modified:
cytoscapeweb/trunk/website/src/css/content/demo.css
cytoscapeweb/trunk/website/src/css/layout.css
cytoscapeweb/trunk/website/src/file/example_graphs/sample1.graphml
cytoscapeweb/trunk/website/src/js/content/demo.js
cytoscapeweb/trunk/website/src/js/cytoscape_web/cytoscapeweb-styles-demo.js
cytoscapeweb/trunk/website/src/js/jquery/jquery-ui-1.7.2.custom/css/custom-theme/jquery-ui-1.7.2.custom.css
Log:
Added custom layout options panel.
Added nodes/edges add/delete feature (right click context menu).
Some minor CSS changes.
Modified: cytoscapeweb/trunk/website/src/css/content/demo.css
===================================================================
--- cytoscapeweb/trunk/website/src/css/content/demo.css 2010-04-27 22:32:36 UTC (rev 20002)
+++ cytoscapeweb/trunk/website/src/css/content/demo.css 2010-04-27 22:51:14 UTC (rev 20003)
@@ -1,24 +1,26 @@
/* overall style */
-body.demo { left: 0; width: 100%; margin: 0; }
+body.demo { left: 0; width: 100%; margin: 0; line-height: 1; }
#header-resizer { height: 0; width: 0; }
body.demo #logo { margin-left: 1em; margin-right: 5em; }
body.demo #header .text { margin-top: 2.5em; color: #707070; }
body.demo #page, body.demo #copyright, body.demo #navigation_links, body.demo #search, body.demo #content, body.demo #footer { display: none; }
-#cytoweb, #side { border: 1px #cfcfcf solid; -moz-box-shadow: 0 0 50px #bbbbbb; -webkit-box-shadow: 0 0 50px #bbbbbb; box-shadow: 0 0 50px #bbbbbb; }
-#cytoweb { background: #ffffff; }
+#cytoweb, #side { border: 1px #cfcfcf solid; -moz-box-shadow: 0 0 50px #bbb; -webkit-box-shadow: 0 0 50px #bbb; box-shadow: 0 0 50px #bbb; }
+#cytoweb { background: #fff; }
#side, #cytoweb { border-radius: 0 !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; }
-#cytoweb ul { margin-left: 0; }
+#cytoweb ul { margin-left: 0; }
#menu { z-index: 9999 !important; height: auto !important; border: 0 !important; background: transparent !important; }
#cytoweb_container { background: transparent; position: absolute; top: 0; left: 0; z-index: 0; height: 100%; width: 100%; }
#menu > ul { border: 1px solid #707070; }
-#examples { }
-#info table { /* width: 100%; */ }
+#examples { }
+#examples * { margin: 0 0 0.5em 0; }
.hidden { z-index: -1; visibility: hidden; }
-body.demo h1 { border-bottom: 1px solid #cfcfcf; clear: both; }
-body.demo * + h1, body.demo * + h2, #vizmapper * + h3 { padding-top: 1.5em; }
-body.demo h1 + h2, body.demo h2 + h3 { padding-top: 0.5em; }
+body.demo h1 { border-bottom: 1px solid #cfcfcf; clear: both; text-align: center; }
+body.demo * + h1, body.demo * + h2, #vizmapper * + h3 { padding-top: 0.5em; }
+body.demo h1 + h2, body.demo h2 + h3 { padding-top: 0.25em; }
+input[type=text], textarea { background-color: #FFF; }
.ui-layout-header .header { padding: 1em 1.4em; border-bottom: 1px solid #808080; }
-.ui-layout-header { min-height: 0.5em; }
+.ui-layout-header { min-height: 0.25em; }
+.ui-layout-content { background: #fafafa; }
/* menu styling */
@@ -26,17 +28,17 @@
.ui-menu-title { margin: 0 !important; background: transparent !important; border: 0 !important; }
.ui-menu-title.ui-state-active > label { background-color: #0b94b1 !important; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.ui-menu-item { margin: 0 !important; float: left; background: #fafafa; z-index: 9999; }
- .ui-menu-title label { color: #ffffff; }
+ .ui-menu-title label { color: #fff; }
.ui-menu-item label, .ui-menu-title label { float: left; }
.ui-menu-title > label { padding: 0.25em 0.5em 0.25em 0.5em; }
.ui-menu-item > label { padding: 0.1em; }
- .ui-menu-item label { color: #000000; z-index: 2; }
+ .ui-menu-item label { color: #000; z-index: 2; }
.ui-menu-item { cursor: pointer !important; width: 100%; float: left; clear: both; border-top: 1px solid #eaeaea !important; border-bottom: 1px solid #fafafa !important; }
.ui-top-menu > .ui-menu-item-first { border-top-right-radius: 0; border-top-left-radius: 0; -moz-border-radius-topleft: 0; -moz-border-radius-topright: 0; -webkit-border-top-right-radius: 0; -webkit-border-top-left-radius: 0; }
.ui-top-menu li label { white-space: nowrap; }
.ui-menu-item-last { }
.ui-state-active.ui-menu-item { background: #0b94b1 !important; border-color: #0b94b1 !important; border-left-color: #097d95 !important; }
- .ui-state-active.ui-menu-item > label { color: #ffffff; }
+ .ui-state-active.ui-menu-item > label { color: #fff; }
.ui-state-active.ui-menu-item-first { }
.ui-state-active.ui-menu-item-last { }
.ui-tabs-nav.ui-menu-bar {text-align: left;}
@@ -44,7 +46,7 @@
.ui-tabs-nav .ui-state-default.ui-menu-title { }
.ui-menu-item, .ui-menu-title label { cursor: pointer; }
.ui-sub-menu { z-index: 5; margin-top: 0 !important; background: transparent; }
- .ui-top-menu { z-index: 0; border-top: 0 !important; padding-top: 0.25em; margin-top: -0.25em; background: #ffffff; border-right: 2px solid #ffffff !important; }
+ .ui-top-menu { z-index: 0; border-top: 0 !important; padding-top: 0.25em; margin-top: -0.25em; background: #fff; border-right: 2px solid #fff !important; }
.ui-top-menu, .ui-sub-menu { margin: 0; float: left; border: 1px solid #cfcfcf; -moz-box-shadow: 0em 0 50px #bbbbbb; -webkit-box-shadow: 0 0 50px #bbbbbb; box-shadow: 0 0 50px #bbbbbb; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.ui-sub-menu-spacing { z-index: -1; background: transparent; cursor: default !important; }
@@ -67,20 +69,20 @@
.tool_tip_pointer { width: 22px; height: 12px; background-repeat: no-repeat; margin: 0px; padding: 0; }
.tool_tip_top { background-image: url("../../img/tool_tip/tool_tip_up_80.png"); }
.tool_tip_bottom { background-image: url("../../img/tool_tip/tool_tip_down_80.png"); }
-.tool_tip_text { background-image: url("../../img/tool_tip/tool_tip_bg_80.png"); color: #ffffff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0.5em 0.75em; margin: 0px; }
+.tool_tip_text { background-image: url("../../img/tool_tip/tool_tip_bg_80.png"); color: #fff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0.5em 0.75em; margin: 0px; }
/* save, open */
.swf { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; }
/* side tabs */
#side .header { position: relative; }
-#side .content { position: relative; }
+#side .content { position: relative; padding: 0.25em; }
/* filters */
#filter_header ul { margin: 0; display: inline; }
#filter_header li { margin: 0; display: inline; }
#filter_header li a { text-decoration: none; padding: 0.25em; border: 1px solid #cfcfcf; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
-#filter_header li a.selected { border: 1px solid #0b94b1; background-color: #0b94b1; color: #ffffff; }
+#filter_header li a.selected { border: 1px solid #0b94b1; background-color: #0b94b1; color: #fff; }
#filter label { display: block; padding-top: 1em; clear: both; }
#filter .attribute { clear: both; float: left; width: 100%; }
#filter .range_area { margin-left: 4em; margin-right: 4em; clear: both; }
@@ -112,7 +114,7 @@
/* shape picker */
#node_shape_picker { width: 240px; padding: 5px; }
#edge_shape_picker { width: 180px; padding: 5px; }
-.shape_picker .shape { width: 50px; height: 50px; background-color: #ffffff; background-position: center center; background-repeat: no-repeat; float: left; margin: 5px; cursor: pointer; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
+.shape_picker .shape { width: 50px; height: 50px; background-color: #fff; background-position: center center; background-repeat: no-repeat; float: left; margin: 5px; cursor: pointer; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
.shape_picker .shape.rectangle { background-image: url("../../img/icons/shapes/rectangle.png"); }
.shape_picker .shape.roundrect { background-image: url("../../img/icons/shapes/roundrect.png"); }
.shape_picker .shape.diamond { background-image: url("../../img/icons/shapes/diamond.png"); }
@@ -125,16 +127,16 @@
.shape_picker .shape.t { background-image: url("../../img/icons/shapes/t.png"); }
/* resizing panes */
-.ui-layout-resizer { display: block; background: url("../../img/layout/grip.png") #ffffff; cursor: w-resize; }
+.ui-layout-resizer { display: block; background: url("../../img/layout/grip.png") #fff; cursor: w-resize; }
.ui-layout-resizer-drag { visibility: hidden; }
#overlay, #cytoweb_overlay { width: 100%; height: 100%; background: transparent; position: absolute; left: 0; top: 0; z-index: 9999; display: none; }
.resizing { opacity: 0.5; }
/* save screen */
-.save_screen { opacity: 0.99 /* needs to be for firefox cytoweb recalculate layout */; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #ffffff; z-index: 10000; overflow: auto; }
+.save_screen { opacity: 0.99 /* needs to be for firefox cytoweb recalculate layout */; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #fff; z-index: 10000; overflow: auto; }
.save_screen .corner { cursor: pointer; position: absolute; left: 0; top: 0; width: 250px; height: 250px; background: url("../../img/layout/back_empty.png"); }
.save_screen .corner * { cursor: pointer; }
-.save_screen .corner span { color: #ffffff; line-height: 1; width: 140px; margin: 20px 0 0 30px; display: block; }
+.save_screen .corner span { color: #fff; line-height: 1; width: 140px; margin: 20px 0 0 30px; display: block; }
.save_screen .corner .icon { width: 64px; height: 64px; background-image: url("../../img/icons/oxygen/64x64/actions/back.png"); position: absolute; left: 30px; top: 60px; }
.save_screen .description { text-align: center; width: 100%; }
.save_screen .selections { height: 250px; width: 600px; margin: -125px auto 0 auto; top: 160px; position: relative; text-align: center; }
@@ -152,10 +154,10 @@
#save_png .icon { background: url("../../img/icons/png.png"); }
/* screens */
-.screen { opacity: 0.99 /* needs to be for firefox cytoweb recalculate layout */; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #ffffff ; background: rgba(255, 255, 255, 0.85); z-index: 9999; }
-.loading_screen { background: #ffffff; }
+.screen { opacity: 0.99 /* needs to be for firefox cytoweb recalculate layout */; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #fff ; background: rgba(255, 255, 255, 0.85); z-index: 9999; }
+.loading_screen { background: #fff; }
.screen * { text-decoration: none; }
-.screen .notification { width: 200px; background: #ffffff; position: relative; top: 50%; padding: 2em; margin: -100px auto 0 auto; }
+.screen .notification { width: 200px; background: #fff; position: relative; top: 50%; padding: 2em; margin: -100px auto 0 auto; }
.error_screen .notification, .info_screen .notification, .warning_screen .notification { border: 1px solid #e0e0e0; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 0 0 50px #bbbbbb; -webkit-box-shadow: 0 0 50px #bbbbbb; box-shadow: 0 0 50px #bbbbbb; }
.screen .notification .icon, .screen .notification .heading, .screen .notification .message { margin: 0 auto 1em auto; display: block; font-size: 1em; }
.screen .notification .icon { margin-bottom: 1em; background: url("../../img/layout/loader.gif") no-repeat transparent; height: 32px; width: 32px; }
@@ -165,14 +167,14 @@
.screen .corner { cursor: pointer; position: absolute; left: 0; top: 0; width: 250px; height: 250px; background: url("../../img/layout/back_empty.png"); z-index: 1; }
.screen .corner * { cursor: pointer; }
.screen .corner .icon { width: 64px; height: 64px; background-image: url("../../img/icons/oxygen/64x64/actions/back.png"); position: absolute; left: 30px; top: 60px; }
-.screen .corner span { color: #ffffff; line-height: 1; width: 140px; margin: 20px 0 0 30px; display: block; }
+.screen .corner span { color: #fff; line-height: 1; width: 140px; margin: 20px 0 0 30px; display: block; }
.screen .heading { color: #707070; text-align: center; margin-bottom: 1em; width: 100%; }
.screen .message { width: 200px; }
/* examples */
#examples .entry { margin: 0 0 1em 0; }
-#examples .entry .name { padding: 0; }
+#examples .entry .name { padding: 0; font-size: 1.25em; text-align: center; }
#examples .entry .icon { min-width: 230px; max-width: 600px; height: 50px; background-position: center center; background-color: #e0e0e0; border: 1px solid #cfcfcf; }
#examples .entry.pathguide .icon { background-image: url("../../img/content/demo/examples/pathguide.png"); }
#examples .entry.genetics .icon { background-image: url("../../img/content/demo/examples/genetics.png"); }
@@ -180,21 +182,24 @@
#examples .entry.shapes .icon { background-image: url("../../img/content/demo/examples/shapes.png"); }
#examples .entry.peterson .icon { background-image: url("../../img/content/demo/examples/petersen.png"); }
#examples .entry, #examples .entry * { cursor: pointer; }
-#examples .entry .description { color: #000000; }
+#examples .entry .description { color: #707070; line-height: 1; }
/* info tab */
#info { padding: 0 !important; margin: 0 !important; height: 100%; }
#info .half { height: 50%; overflow: auto; }
#info .half:first-child { border-bottom: 1px solid #808080; margin-top: -1px; }
-#info .half .section { padding: 1em 1.4em; }
+#info .half .section { padding: 0.5em; }
#info .section h1 { }
+#info table { margin: 0; }
+#info .tablesorter th { line-height: 1.5; }
#info .tablesorter th label { padding: 0.25em 1.5em 0.25em 0.25em; margin-left: -0.25em; cursor: pointer; }
-#info .tablesorter th.headerSortDown label, #info .tablesorter th.headerSortUp label { background-repeat: no-repeat; background-color: #0b94b1; color: #ffffff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
+#info .tablesorter th.headerSortDown label, #info .tablesorter th.headerSortUp label { background-repeat: no-repeat; background-color: #0b94b1; color: #fff; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
#info .tablesorter th.headerSortUp label { background-image: url("../../img/layout/open_arrow/white/up.png"); background-position: right center; }
#info .tablesorter th.headerSortDown label { background-image: url("../../img/layout/open_arrow/white/down.png"); background-position: right center; }
+#info .tablesorter tr td { font-family: "Monaco", "Courier New", monospace; font-size: 0.85em; line-height: 1.25; }
/* vizmapper tab */
-#vizmapper label.style { display: block; padding-top: 1em; clear: both; }
+#vizmapper label.style { display: block; padding-top: 0.5em; clear: both; }
#vizmapper .property { clear: both; position: relative; }
#vizmapper .property input { display: block; width: 10em; }
#vizmapper .property input.colour_sample_bg { background-image: url("../../img/input_for_colour_picker/bg.png"); background-position: center right; background-repeat: repeat-y; }
@@ -213,4 +218,21 @@
#vizmapper .property .continuous .middle { text-align: center; position: absolute; top: 50%; margin-top: -0.75em; width: 100%; }
#vizmapper .property .selector .ui-top-menu { z-index: 9999; }
#vizmapper .property label.discrete_name { display: block; padding-top: 0.5em; }
-#vizmapper .property label.discrete_name:first-child { padding-top: 0em; }
\ No newline at end of file
+#vizmapper .property label.discrete_name:first-child { padding-top: 0em; }
+
+/* layout settings */
+/* Vertical Tabs
+----------------------------------*/
+.ui-tabs-vertical { }
+.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; }
+.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
+.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
+.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
+.ui-tabs-vertical .ui-tabs-panel { padding: 0.3em; float: right; width: 20em; overflow: auto; }
+
+#settings { padding: 0.25em 0.1em; }
+#settings .ui-tabs-vertical .ui-tabs-nav { height: 21em; }
+#settings table { margin: 0; }
+#settings td { border: 0px solid #CFCFCF; text-align: left; }
+#settings input[type="text"], #settings select { margin-bottom: 0.5em; width: 8.5em; }
+#settings .footer { height: 2em; padding-top: 0.5em; text-align: center; }
Modified: cytoscapeweb/trunk/website/src/css/layout.css
===================================================================
--- cytoscapeweb/trunk/website/src/css/layout.css 2010-04-27 22:32:36 UTC (rev 20002)
+++ cytoscapeweb/trunk/website/src/css/layout.css 2010-04-27 22:51:14 UTC (rev 20003)
@@ -17,7 +17,7 @@
h3 { font-size: 1em; line-height: 2em; }
label { color: #0b94b1; }
p { padding: 0.5em 0 0.5em 0; }
-input, button, textarea { resize: none; font-size: 100%; font-family: Helvetica, Arial, Verdana, sans-serif; border: 1px solid #c1c1c1; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0.25em; }
+input, button, textarea, select { resize: none; font-size: 100%; font-family: Helvetica, Arial, Verdana, sans-serif; border: 1px solid #c1c1c1; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; padding: 0.25em; }
input:focus, button:focus, textarea:focus{ -moz-box-shadow: 0 0 5px #0b94b1; -webkit-box-shadow: 0 0 5px #0b94b1; box-shadow: 0 0 5px #0b94b1; }
input[type=submit], button { color: #ffffff; cursor: pointer; background: #097288 url("../img/layout/button_blue.png") repeat-x top center; }
input.emphasis, button.emphasis { background: #62977c url("../img/layout/button_green.png") repeat-x top center; }
Modified: cytoscapeweb/trunk/website/src/file/example_graphs/sample1.graphml
===================================================================
--- cytoscapeweb/trunk/website/src/file/example_graphs/sample1.graphml 2010-04-27 22:32:36 UTC (rev 20002)
+++ cytoscapeweb/trunk/website/src/file/example_graphs/sample1.graphml 2010-04-27 22:51:14 UTC (rev 20003)
@@ -1,9 +1,15 @@
<graphml>
- <key id="weight" for="node" attr.name="weight" attr.type="double"/>
+ <key id="weight" for="node" attr.name="weight" attr.type="double">
+ <default>0.2</default>
+ </key>
<key id="label" for="node" attr.name="label" attr.type="string"/>
- <key id="shape" for="node" attr.name="shape" attr.type="string"/>
+ <key id="shape" for="node" attr.name="shape" attr.type="string">
+ <default>DIAMOND</default>
+ </key>
- <key id="network" for="edge" attr.name="network" attr.type="string"/>
+ <key id="network" for="edge" attr.name="network" attr.type="string">
+ <default>2</default>
+ </key>
<key id="weight" for="edge" attr.name="weight" attr.type="double"/>
<key id="label" for="edge" attr.name="label" attr.type="string"/>
<key id="sourceArrowShape" for="edge" attr.name="sourceArrowShape" attr.type="string"/>
Modified: cytoscapeweb/trunk/website/src/js/content/demo.js
===================================================================
--- cytoscapeweb/trunk/website/src/js/content/demo.js 2010-04-27 22:32:36 UTC (rev 20002)
+++ cytoscapeweb/trunk/website/src/js/content/demo.js 2010-04-27 22:51:14 UTC (rev 20003)
@@ -246,7 +246,44 @@
});
+ // Layout options:
+ var layout_names = {};
+ layout_names["ForceDirected"] = "Force Directed";
+ layout_names["Circle"] = "Circle";
+ layout_names["CircleTree"] = "Circle Tree";
+ layout_names["Radial"] = "Radial";
+ layout_names["Tree"] = "Tree";
+ var layout_options = {};
+ layout_options["ForceDirected"] = [
+ { id: "gravitation", label: "Gravitation", value: -500, tip: "The gravitational constant. Negative values produce a repulsive force." },
+ { id: "mass", label: "Node mass", value: 3, tip: "The default mass value for node/particles." },
+ { id: "tension", label: "Edge tension", value: 0.4, tip: "The default spring tension for edge/springs." },
+ { id: "restLength", label: "Edge rest length", value: "auto", tip: "The default spring rest length for edge/springs." },
+ { id: "drag", label: "Drag co-efficient", value: 0.1, tip: "The co-efficient for frictional drag forces." },
+ { id: "minDistance", label: "Minimum distance", value: 1, tip: "The minimum effective distance over which forces are exerted." },
+ { id: "maxDistance", label: "Maximum distance", value: 10000, tip: "The maximum distance over which forces are exerted." },
+ { id: "iterations", label: "Iterations", value: 80, tip: "The number of iterations to run the simulation per invocation." },
+ { id: "maxTime", label: "Maximum time", value: 60, tip: "The maximum time to run the simulation, in seconds." },
+ { id: "autoStabilize", label: "Auto stabilize", value: true, tip: "If checked, Cytoscape Web automatically tries to stabilize results that look unstable after running the regular iterations." }
+ ];
+ layout_options["Circle"] = [
+ { id: "angleWidth", label: "Angle width", value: -6.28318531, tip: "The angular width of the layout, in radians." }
+ ];
+ layout_options["CircleTree"] = [
+ { id: "angleWidth", label: "Angle width", value: -6.28318531, tip: "The angular width of the layout, in radians." }
+ ];
+ layout_options["Radial"] = [
+ { id: "radius", label: "Radius", value: 60, tip: "The radius increment between depth levels." },
+ { id: "angleWidth", label: "Angle width", value: -6.28318531, tip: "The angular width of the layout, in radians." }
+ ];
+ layout_options["Tree"] = [
+ { id: "orientation", label: "Orientation", value: ["leftToRight","rightToLeft","bottomToTop","topToBottom"], tip: "The orientation of the layout." },
+ { id: "depthSpace", label: "Depth space", value: 50, tip: "The space between depth levels in the tree." },
+ { id: "breadthSpace", label: "Breadth space", value: 30, tip: "The space between siblings in the tree." },
+ { id: "subtreeSpace", label: "Angle width", value: 5, tip: "The space between different sub-trees." }
+ ];
+
// create tabs
$("#side").tabs({
show: function(event, ui){
@@ -406,8 +443,9 @@
// call back for when the graph is opened and fully loaded
$("#cytoweb_container").cw().ready(function(){
- $("#cytoweb_container").cw().addListener("error", function(err){
-
+ var vis = $("#cytoweb_container").cw();
+
+ vis.addListener("error", function(err){
hide_msg({ target: $("body") });
show_msg({
@@ -424,7 +462,7 @@
message: "This area is unavailable when the graph file can not be loaded."
});
});
-
+
$("#cytoweb_container").trigger("available");
}); // end cl load
@@ -450,6 +488,84 @@
open_graph(options);
+ // [settings] Layout settings
+ ////////////////////////////////////////////////////////////////////////////////////////////////
+
+ function create_settings_panel(layout_id){
+ var opt = layout_options[layout_id];
+ var panel = ('<div id="'+layout_id+'" class="content ui-widget-content"><table>');
+
+ for(var i in opt) {
+ var o = opt[i];
+ var v = o.value;
+ panel += '<tr title="'+o.tip+'">';
+
+ if (typeof v === "object") {
+ panel += ('<td align="right"><label>'+o.label+' </label></td><td><select id="'+o.id+'" size="1">');
+ for(var j in v) { panel += ('<option value="'+v[j]+'">'+v[j]+'</option>'); }
+ panel += '</select></td>'
+ } else if (typeof v === "boolean") {
+ panel += ('<td align="right"><label>'+o.label+' </label></td><td align="left"><input type="checkbox" id="'+o.id+'" value="'+v+'"'+(v?' checked="checked"':'')+'/></td>');
+ } else {
+ panel += ('<td align="right"><label>'+o.label+' </label></td><td><input type="text" id="'+o.id+'" value="'+v+'"/></td>');
+ }
+
+ panel += "</tr>";
+ }
+
+ panel += "</table></div>";
+
+ return $(panel);
+ }
+
+ function open_settings(){
+ if ($("#settings").length === 0) {
+ var dialog = '\
+ <div id="settings" title="Layout Settings">\
+ <div class="tabs ui-widget">\
+ <ul></ul>\
+ <div class="ui-layout-content"/>\
+ </div>\
+ <div class="footer"><input type="button" id="execute_layout" class="ui-state-default" value="Execute Layout"/></div>\
+ </div>\
+ ';
+
+ $("body").append(dialog);
+
+ for(var i in layout_names) {
+ var layout_id = i;
+ var layout_name = layout_names[layout_id];
+ var panel = create_settings_panel(layout_id);
+ $("#settings .tabs ul").append('<li><a href="#'+layout_id+'">' + layout_name + '</a></li>');
+ $("#settings .tabs > .ui-layout-content").append(panel);
+ }
+
+ $("#settings .tabs").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
+ $("#settings .tabs li").removeClass('ui-corner-top').addClass('ui-corner-left');
+
+ $("#execute_layout").click(function(){
+ var layout_id = $("#settings .ui-tabs-selected a").attr("href").replace("#", "");
+ var options = {};
+ var def = layout_options[layout_id];
+
+ for(var i in def) {
+ var o = def[i];
+ var v, id = o.id;
+ var input = $("#settings #"+layout_id+" #"+id);
+ v = input.val();
+ if (typeof o.value === "boolean") { v = Boolean(v); }
+ else if (typeof o.value === "number") { v = Number(v); }
+ options[id] = v;
+ }
+ console.log(options);
+ $("#cytoweb_container").cw().layout(layout_id, options);
+ });
+
+ $("#settings").dialog({ autoOpen: false, resizable: false, width: 430 });
+ }
+ $("#settings").dialog("open");
+ }
+
// [menu] Create the menu above Cytoscape Web
////////////////////////////////////////////////////////////////////////////////////////////////
@@ -481,18 +597,11 @@
<ul id="layout_style" class="ui-menu-one-checkable">\
</ul>\
</li>\
+ <li id="layout_settings"><label>Settings...</label></li>\
</ul>\
</li>\
</ul>\
');
-
- // add layout styles
- var layout_names = new Array();
- layout_names["ForceDirected"] = "Force directed";
- layout_names["Circle"] = "Circle";
- layout_names["CircleTree"] = "Circle tree";
- layout_names["Radial"] = "Radial";
- layout_names["Tree"] = "Tree";
// add layouts to menu
for(var i in layout_names) {
@@ -554,6 +663,10 @@
var layout = $("#layout_style .ui-menu-checked").parent().attr("layout_id");
$("#cytoweb_container").cw().layout(layout);
break;
+
+ case "layout_settings":
+ open_settings();
+ break;
case "open_example":
var ex = example[li.attr("example_id")];
@@ -621,7 +734,7 @@
$("#open_file").trigger("available");
},
typeFilter: function(){
- return "*.xgmml;*.graphml;*.xml";
+ return "*.graphml;*.xgmml;*.xml;*.sif";
},
typeDescription: function(){
return "Network file";
@@ -845,28 +958,28 @@
function update_info(){
update();
-
+ updateContextMenu();
+
$("#cytoweb_container").cw().addListener("select", "nodes", function(){
update();
- });
-
- $("#cytoweb_container").cw().addListener("deselect", "nodes", function(){
+ updateContextMenu();
+ })
+ .addListener("deselect", "nodes", function(){
update();
- });
-
- $("#cytoweb_container").cw().addListener("select", "edges", function(){
+ updateContextMenu();
+ })
+ .addListener("select", "edges", function(){
update();
- });
-
- $("#cytoweb_container").cw().addListener("deselect", "edges", function(){
+ updateContextMenu();
+ })
+ .addListener("deselect", "edges", function(){
update();
- });
-
- $("#cytoweb_container").cw().addListener("dblClick", "nodes", function(){
+ updateContextMenu();
+ })
+ .addListener("dblClick", "nodes", function(){
$("#info_link").click();
- });
-
- $("#cytoweb_container").cw().addListener("dblClick", "edges", function(){
+ })
+ .addListener("dblClick", "edges", function(){
$("#info_link").click();
});
@@ -874,6 +987,15 @@
update();
});
+ var _srcId;
+ function clickNodeToAddEdge(evt) {
+ if (_srcId != null) {
+ $("#cytoweb_container").cw().removeListener("click", "nodes", clickNodeToAddEdge);
+ $("#cytoweb_container").cw().addEdge({ source: _srcId, target: evt.target.data.id }, true);
+ _srcId = null;
+ }
+ }
+
function update(){
var edges = $("#cytoweb_container").cw().selected("edges");
var nodes = $("#cytoweb_container").cw().selected("nodes");
@@ -881,41 +1003,42 @@
container.html(""); // clear info area
- function print_selection(group, name){
+ function print_selection(items, name, id){
var headings = [];
- var half = $("<div class=\"half\"></div>");
+ var half = $('<div class="half"></div>');
container.append(half);
- var section = $("<div class=\"section\"></div>");
+ var section = $('<div class="section"></div>');
half.append(section);
section.append("<h1>" + name + "</h1>");
- if( group.length > 0 ) {
- var table = $("<table class=\"tablesorter\"></table>");
+ if( items.length > 0 ) {
+ var table = $('<table id="'+id+'"></table>');
section.append(table);
- var thead = $("<thead></thead>");
+ var thead = $('<thead></thead>');
table.append(thead);
- var thead_row = $("<tr></tr>");
+ var thead_row = $('<tr></tr>');
thead.append(thead_row);
- for(var j in group[0].data){
+ for(var j in items[0].data){
headings.push(j);
}
+
headings.sort();
for(var j in headings){
var heading = headings[j];
- thead_row.append("<th><label>" + ("" + heading).replace(/(\s)/g, " ") + "</label></th>");
+ thead_row.append('<th><label>' + ("" + heading).replace(/(\s)/g, " ") + '</label></th>');
}
- var tbody = $("<tbody></tbody>");
+ var tbody = $('<tbody></tbody>');
table.append(tbody);
- for(var i in group){
- var data = group[i].data;
- var row = $("<tr name=\"" + data.id + "\"></tr>");
+ for(var i in items){
+ var data = items[i].data;
+ var row = $('<tr name="' + data.id + '"></tr>');
tbody.append(row);
for(var j in headings){
@@ -923,27 +1046,59 @@
var param_val = data[param_name];
var val = ("" + param_val).replace(/(\s)/g, " ");
- var entry = $("<td><code>" + val + "</code></td>");
+ var entry = $('<td class="code">' + val + '</td>');
row.append(entry);
}
}
-
-
-
} else {
- section.append("<p>No " + name.toLowerCase() + " are selected.</p>");
+ section.append('<p>No ' + name.toLowerCase() + ' are selected.</p>');
}
-
}
+
+ print_selection(nodes, "Nodes", "NodesDataTable");
+ print_selection(edges, "Edges", "EdgesDataTable");
- print_selection(nodes, "Nodes");
- print_selection(edges, "Edges");
-
-
$("#info").find(".tablesorter").tablesorter();
-
}
+ function updateContextMenu(){
+ var cw = $("#cytoweb_container").cw();
+
+ cw.removeContextMenuItem()
+ .addContextMenuItem("Delete node", "nodes", function(evt) {
+ $("#cytoweb_container").cw().remove([evt.target], true);
+ updateContextMenu();
+ update();
+ })
+ .addContextMenuItem("Delete edge", "edges", function(evt) {
+ $("#cytoweb_container").cw().remove([evt.target], true);
+ updateContextMenu();
+ update();
+ })
+ .addContextMenuItem("Add new node", function(evt) {
+ $("#cytoweb_container").cw().addNode(evt.mouseX, evt.mouseY, { }, true);
+ updateContextMenu();
+ update();
+ })
+ .addContextMenuItem("Add new edge (then click the target node...)", "nodes", function(evt) {
+ _srcId = evt.target.data.id;
+ $("#cytoweb_container").cw().removeListener("click", "nodes", clickNodeToAddEdge);
+ $("#cytoweb_container").cw().addListener("click", "nodes", clickNodeToAddEdge);
+ });
+
+ var items = cw.selected();
+ if (items.length > 0) {
+ cw.addContextMenuItem("Delete selected", function(evt) {
+ //var items = cw.selected();
+ $("#cytoweb_container").cw().remove(items, true);
+ updateContextMenu();
+ update();
+ });
+ } else {
+ cw.removeContextMenuItem("Delete selected");
+ }
+ }
+
$("#info").trigger("available");
}
@@ -1633,13 +1788,13 @@
}
});
- if(initial_property_is_mapped){
+ if (initial_property_is_mapped){
open_map_section();
- if(initial_property.continuousMapper != undefined){
+ if (initial_property.continuousMapper != undefined) {
set_selector_title(initial_property.continuousMapper.attrName, "continuous");
display_continuous(true);
- } else if(initial_property.discreteMapper != undefined) {
+ } else if (initial_property.discreteMapper != undefined) {
set_selector_title(initial_property.discreteMapper.attrName, "discrete");
display_discrete(true);
}
@@ -1980,7 +2135,7 @@
return false; // no shown in loop
}
- });
+ }, true);
});
@@ -2360,11 +2515,11 @@
// create examples in side tab (static -- does not change on new graph load)
for(var id in example){
var ex = example[id];
- var entry = $( "<div class=\"entry " + id + "\" example_id=\"" + id + "\">\
- <label class=\"name\">" + ex.name + "</label>\
- <div class=\"icon\"></div>\
- <label class=\"description\">" + ex.description + "</label>\
- </div>");
+ var entry = $( '<div class="entry ' + id + '" example_id="' + id + '">\
+ <h3 class="name">' + ex.name + '</h3>\
+ <div class="icon"></div>\
+ <label class="description">' + ex.description + '</label>\
+ </div>' );
entry.click(function(){
open_graph( example[ $(this).attr("example_id") ] );
Modified: cytoscapeweb/trunk/website/src/js/cytoscape_web/cytoscapeweb-styles-demo.js
===================================================================
--- cytoscapeweb/trunk/website/src/js/cytoscape_web/cytoscapeweb-styles-demo.js 2010-04-27 22:32:36 UTC (rev 20002)
+++ cytoscapeweb/trunk/website/src/js/cytoscape_web/cytoscapeweb-styles-demo.js 2010-04-27 22:51:14 UTC (rev 20003)
@@ -151,7 +151,6 @@
shape: "RECTANGLE",
color: "#fefefe",
borderColor:"#374A70",
- label: { customMapper: { functionName: "customNodeLabel" } },
labelFontColor: "#374A70",
labelHorizontalAnchor: "center",
labelVerticalAnchor: "bottom",
@@ -176,7 +175,6 @@
tooltipBackgroundColor: "#ffffff",
tooltipBorderColor: "#374A70",
tooltipFontColor: "#374A70",
- mergeTooltipText: { customMapper: { functionName: "customMergedEdgeTooltip" } },
selectionGlowOpacity: 0,
selectionColor: "#ff0000",
curvature: 32
@@ -400,7 +398,7 @@
opacity: 0.6,
color: { defaultValue: "#999999", discreteMapper: edgeColorMapper },
width: { defaultValue: 1, continuousMapper: { attrName: "weight", minValue: 1, maxValue: 4 } },
- mergeWidth: { defaultValue: 1, continuousMapper: { attrName: "avg:weight", minValue: 2, maxValue: 6 } },
+ mergeWidth: { defaultValue: 1, continuousMapper: { attrName: "weight", minValue: 2, maxValue: 6 } },
tooltipFontColor: "#ffffff",
tooltipBackgroundColor: "#000000",
tooltipBorderColor: "#999999",
Modified: cytoscapeweb/trunk/website/src/js/jquery/jquery-ui-1.7.2.custom/css/custom-theme/jquery-ui-1.7.2.custom.css
===================================================================
--- cytoscapeweb/trunk/website/src/js/jquery/jquery-ui-1.7.2.custom/css/custom-theme/jquery-ui-1.7.2.custom.css 2010-04-27 22:32:36 UTC (rev 20002)
+++ cytoscapeweb/trunk/website/src/js/jquery/jquery-ui-1.7.2.custom/css/custom-theme/jquery-ui-1.7.2.custom.css 2010-04-27 22:51:14 UTC (rev 20003)
@@ -52,7 +52,7 @@
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Helvetica,Arial,sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #ababab; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #000000; }
.ui-widget-content a { color: #000000; }
-.ui-widget-header { border: 1px solid #363636; background: #363636 url(images/ui-bg_flat_75_363636_40x100.png) 50% 50% repeat-x; color: #000000; font-weight: bold; }
+.ui-widget-header { border: 1px solid #363636; background: #363636 url(images/ui-bg_flat_75_363636_40x100.png) 50% 50% repeat-x; color: #FFF; font-weight: bold; }
.ui-widget-header a { color: #000000; }
/* Interaction states
@@ -81,7 +81,7 @@
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_000000_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_000000_256x240.png); }
-.ui-widget-header .ui-icon {background-image: url(images/ui-icons_000000_256x240.png); }
+.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_000000_256x240.png); }
--
You received this message because you are subscribed to the Google Groups "cytoscape-cvs" group.
To post to this group, send email to cytosc...@googlegroups.com.
To unsubscribe from this group, send email to cytoscape-cv...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/cytoscape-cvs?hl=en.
Reply all
Reply to author
Forward
0 new messages