From: Tara L Andrews <tla@mit.edu>
Date: Sun, 5 Feb 2012 23:42:32 +0000 (+0100)
Subject: add application launcher buttons for stexaminer and relationship mapper
X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=commitdiff_plain;h=57acbbe2384a484550eaf2ba2bbc7920fabe94a5;p=scpubgit%2Fstemmatology.git

add application launcher buttons for stexaminer and relationship mapper
---

diff --git a/stemmaweb/root/css/relationship.css b/stemmaweb/root/css/relationship.css
index 315cee0..7d1f179 100644
--- a/stemmaweb/root/css/relationship.css
+++ b/stemmaweb/root/css/relationship.css
@@ -1,4 +1,3 @@
-<style type="text/css" media="screen">
 body { 
     margin: 0; 
     padding: 0 20px; 
@@ -114,4 +113,3 @@ body {
     list-style: none;
     margin-bottom: 3px;
 }
-</style>
diff --git a/stemmaweb/root/css/stexaminer.css b/stemmaweb/root/css/stexaminer.css
new file mode 100644
index 0000000..9c5ec84
--- /dev/null
+++ b/stemmaweb/root/css/stexaminer.css
@@ -0,0 +1,61 @@
+#variants_table {
+    float: left;
+    width: 450px;
+    height: 550px;
+    border-right: 1px #c6dcf1 solid;
+    margin-left: 20px;
+    overflow: auto;
+}
+#stemma_graph {
+    height: 450px;
+    float: left;
+    width: 500px;
+    text-align: center;
+    border: 1px #c6dcf1 solid;
+}
+#statistics {
+    font-style: italic;
+    margin-bottom: 25px;
+    position: relative;
+    top: -15px;
+}
+.genealogical {
+    background: #88ffaa;
+}
+.coincidental {
+    background: #fff;
+}
+.conflict {
+    background: #ff6666;
+}
+.active_variant_row {
+    background: #c6dcf1;
+    font-style: italic;
+}
+.active_variant_cell {
+    background: #e8f1fe;
+}
+.cellb0 {
+    border-right: 20px solid #ffeeaa;
+}
+.cellb1 {
+    border-right: 20px solid #afc6e9;
+}
+.cellb2 {
+    border-right: 20px solid #d5fff6;
+}
+.cellb3 {
+    border-right: 20px solid #ffccaa;
+}
+.cellb4 {
+    border-right: 20px solid #ffaaaa;
+}
+.cellb5 {
+    border-right: 20px solid #e5ff80;
+}
+.cellb6 {
+    border-right: 20px solid #e5d5ff;
+}
+.cellb7 {
+    border-right: 20px solid #ffd5e5;
+}
diff --git a/stemmaweb/root/css/style.css b/stemmaweb/root/css/style.css
index 3732efc..ca0233a 100644
--- a/stemmaweb/root/css/style.css
+++ b/stemmaweb/root/css/style.css
@@ -1,5 +1,3 @@
-<style type="text/css" media="screen">
-
 /* General site-wide layout */
 body { 
     margin: 0; 
@@ -28,6 +26,39 @@ h3 {
 	font-style: italic;
 }
 
+div.button {
+  background: transparent url('../images/b_button_a.png') no-repeat scroll top right;
+  color: #fff;
+  display: block;
+  float: left;
+  font: normal 12px Times, Times New Roman, Serif; /* arial, sans-serif; */
+  height: 24px;
+  margin-right: 6px;
+  padding-right: 18px; /* sliding doors padding */
+  text-decoration: none;
+}
+div.button.reset {
+  background: transparent url('../images/c_button_a.png') no-repeat scroll top right;
+}
+div.button span {
+  background: transparent url('../images/b_button_span.png') no-repeat;
+  display: block;
+  line-height: 14px;
+  padding: 5px 0 5px 18px;
+}
+div.button.reset span {
+  background: transparent url('../images/c_button_span.png') no-repeat;
+}
+div.button:hover {
+  background-position: bottom right;
+  color: #444;
+  outline: none; /* hide dotted outline in Firefox */
+}
+div.button:hover span {
+  background-position: bottom left;
+}
+
+
 /* Index page components */
 
 #directory_container {
@@ -37,6 +68,7 @@ h3 {
 	border: 1px #c6dcf1 solid;
 }
 #directory {
+	margin-left: 10px;
 }
 .traditionname {
 	text-decoration: underline;
@@ -55,79 +87,43 @@ h3 {
 .mainnav a {
 	color: #488dd2;
 }
-#variant_graph {
+#variant_container {
 	clear: both;
-	/* width: 900px; */
 	height: 400px;
+	padding-top: 20px;
+}
+#variant_graph {
+	/* width: 900px; */
+	clear: both;
 	overflow: auto;	
 	text-align: center;
 }
 #variant_graph img {
 	margin-top: expression(( 400 - this.height ) / 2);
 }
+#stemma_container {
+	float: left;
+	height: 450px;
+	margin-left: 40px;
+}
+#stemma_container h2 h3 {
+	color: #666;
+}
 #stemma_graph {
-    float: left;
+    height: 375px;
     width: 500px;
-    height: 450px;
     text-align: center;
-    margin-left: 50px;
+    border: 1px #c6dcf1 solid;
 }
 #stemma_graph img {
 	margin-top: expression(( 450 - this.height ) / 2);
 }
-/* Additional components for the stexaminer */
-#variants_table {
-    float: left;
-    width: 450px;
-    height: 550px;
-    border-right: 1px #c6dcf1 solid;
-    margin-left: 20px;
-    overflow: auto;
+#stexaminer_button {
+	bottom: 0;
+	margin-top: 5px;
 }
-#statistics {
-    font-style: italic;
-    margin-bottom: 25px;
-    position: relative;
-    top: -15px;
-}
-.genealogical {
-    background: #88ffaa;
-}
-.coincidental {
-    background: #fff;
-}
-.conflict {
-    background: #ff6666;
-}
-.active_variant_row {
-    background: #c6dcf1;
-    font-style: italic;
-}
-.active_variant_cell {
-    background: #e8f1fe;
-}
-.cellb0 {
-    border-right: 20px solid #ffeeaa;
-}
-.cellb1 {
-    border-right: 20px solid #afc6e9;
-}
-.cellb2 {
-    border-right: 20px solid #d5fff6;
-}
-.cellb3 {
-    border-right: 20px solid #ffccaa;
-}
-.cellb4 {
-    border-right: 20px solid #ffaaaa;
-}
-.cellb5 {
-    border-right: 20px solid #e5ff80;
-}
-.cellb6 {
-    border-right: 20px solid #e5d5ff;
-}
-.cellb7 {
-    border-right: 20px solid #ffd5e5;
+#relater_button {
+	float: left;
+	margin-left: 83px;
+    margin-top:  7px;
 }
-</style>
\ No newline at end of file
diff --git a/stemmaweb/root/images/b_button_a.png b/stemmaweb/root/images/b_button_a.png
new file mode 100644
index 0000000..a04e123
Binary files /dev/null and b/stemmaweb/root/images/b_button_a.png differ
diff --git a/stemmaweb/root/images/b_button_span.png b/stemmaweb/root/images/b_button_span.png
new file mode 100644
index 0000000..2d80f72
Binary files /dev/null and b/stemmaweb/root/images/b_button_span.png differ
diff --git a/stemmaweb/root/images/c_button_a.png b/stemmaweb/root/images/c_button_a.png
new file mode 100644
index 0000000..effad11
Binary files /dev/null and b/stemmaweb/root/images/c_button_a.png differ
diff --git a/stemmaweb/root/images/c_button_span.png b/stemmaweb/root/images/c_button_span.png
new file mode 100644
index 0000000..aff9680
Binary files /dev/null and b/stemmaweb/root/images/c_button_span.png differ
diff --git a/stemmaweb/root/js/componentload.js b/stemmaweb/root/js/componentload.js
index 8db28dd..cc5c1d3 100644
--- a/stemmaweb/root/js/componentload.js
+++ b/stemmaweb/root/js/componentload.js
@@ -1,4 +1,4 @@
-function loadTradition( textid ) {
+function loadTradition( textid, textname ) {
     // First insert the placeholder image
     var basepath = window.location.pathname
     if( basepath.lastIndexOf('/') == basepath.length - 1 ) { 
@@ -25,4 +25,13 @@ function loadTradition( textid ) {
     	variant_svg_element.height.baseVal.value = container_height;
     	variant_svg_element.width.baseVal.value = (svg_width/svg_height * container_height);
 	});
+	
+	// Then populate the various elements with the right text name/ID.
+	// Stemma and variant graph titles
+	$('.texttitle').empty();
+	$('.texttitle').append( textname );
+	// Stexaminer submit action
+	$('#run_stexaminer').attr( 'action', basepath + "/stexaminer/" + textid );
+	// Relationship mapper submit action
+	$('#run_relater').attr( 'action', basepath + "/relation/" + textid );
 }
diff --git a/stemmaweb/root/js/stemmagadget.js b/stemmaweb/root/js/stemmagadget.js
new file mode 100644
index 0000000..f22a4da
--- /dev/null
+++ b/stemmaweb/root/js/stemmagadget.js
@@ -0,0 +1,36 @@
+var colors = ['#ffeeaa','#afc6e9','#d5fff6','#ffccaa','#ffaaaa','#e5ff80','#e5d5ff','#ffd5e5'];
+
+$(document).ready(function() {
+  $('svg').width('485px');
+})
+
+
+
+function load_stemma_svg( topic, data, subscriberData ) {
+    var params = {};
+	var postData = {};
+
+	postData.textid = data;
+
+	params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.POST;
+	params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(postData);
+	var url = "http://eccentricity.org:3000/svg_service";
+
+	gadgets.io.makeRequest(url,
+		function (o) {
+			displaySVG(o.text);
+		}, params);
+	
+}
+
+function loaded() {
+	gadgets.window.adjustHeight(400);
+	subId = gadgets.Hub.subscribe("interedition.svg.dot.coloring", do_color_nodes);
+	subId = gadgets.Hub.subscribe("interedition.svg.dot.decoloring", de_color_nodes);
+	subId = gadgets.Hub.subscribe("interedition.tradition.selected", load_stemma_svg);
+}
+
+if (gadgets.util.hasFeature('pubsub-2')) {
+	gadgets.HubSettings.onConnect = function(hum, suc, err) { loaded(); };
+}
+else gadgets.util.registerOnLoadHandler(loaded);
diff --git a/stemmaweb/root/js/stexaminer.js b/stemmaweb/root/js/stexaminer.js
index ffe2c93..8645109 100644
--- a/stemmaweb/root/js/stexaminer.js
+++ b/stemmaweb/root/js/stexaminer.js
@@ -3,7 +3,7 @@ var row_triggered = false;
 $(document).ready(function() {
   $('.rowid').click( function() {
     row_triggered = true;
-    $('ellipse').attr( {stroke:'black', fill:'#fff'} );
+    $('ellipse').attr( {stroke:'white', fill:'#fff'} );
     $('.node').children('polygon').attr( {stroke:'#fff', fill:'#fff'} );
     $('.node').children('text').attr( {stroke:'none', fill:'#000'} );
     $('tr.active_variant_row').children('td').removeClass('cellb0 cellb1 cellb2 cellb3 cellb4 cellb5 cellb6 cellb7'); 
@@ -17,7 +17,7 @@ function color_nodes( column_index, arr_node_ids, arr_greynode_ids ) {
   if( !row_triggered ) {
     $('tr.active_variant_row').children('td').removeClass('cellb0 cellb1 cellb2 cellb3 cellb4 cellb5 cellb6 cellb7'); 
     $('td.active_variant_cell').removeClass('active_variant_cell');
-    $('ellipse').attr( {stroke:'black', fill:'#fff'} );
+    $('ellipse').attr( {stroke:'white', fill:'#fff'} );
     $('.node').children('polygon').attr( {stroke:'#fff', fill:'#fff'} );
     $('.node').children('text').attr( {stroke:'none', fill:'#000'} );
   }; 
diff --git a/stemmaweb/root/src/directory.tt b/stemmaweb/root/src/directory.tt
index 97054da..a8030e4 100644
--- a/stemmaweb/root/src/directory.tt
+++ b/stemmaweb/root/src/directory.tt
@@ -3,7 +3,7 @@
       <ul>
 [% SET i = 0 -%]
 [% FOREACH t IN texts -%]
-        <li><span class="traditionname" onClick="$('.traditionname').removeClass('selected');$(this).addClass('selected');loadTradition('[% t.id %]')">[% t.name %]</span></li>
+        <li><span class="traditionname" onClick="$('.traditionname').removeClass('selected');$(this).addClass('selected');loadTradition('[% t.id %]','[% t.name %]')">[% t.name %]</span></li>
 [% i = i + 1 -%]
 [% END -%]
      </table>
diff --git a/stemmaweb/root/src/header.tt b/stemmaweb/root/src/header.tt
index 53fad4f..6d844a1 100644
--- a/stemmaweb/root/src/header.tt
+++ b/stemmaweb/root/src/header.tt
@@ -4,12 +4,17 @@
     <META http-equiv="Content-Type" content="text/html; charset=utf-8">
     <link type="text/css" href="[% c.uri_for('/css/cupertino/jquery-ui-1.8.13.custom.css') %]" rel="stylesheet" />
     <link type="text/css" href="[% c.uri_for('/css/style.css') %]" rel="stylesheet" />
+[% IF applicationstyle -%]
+	<link type="text/css" href="[% applicationstyle %]" rel="stylesheet" />
+[% END -%]
     <script type="text/javascript" src="[% c.uri_for('/js/jquery-1.4.4.min.js') %]"></script>
     <script type="text/javascript" src="[% c.uri_for('/js/jquery-ui-1.8.10.custom.min.js') %]"></script>
     <script type="text/javascript" src="[% c.uri_for('/js/jquery.mousewheel.min.js') %]"></script>
     <script type="text/javascript" src="[% c.uri_for('/js/jquery.svg.js') %]"></script>
     <script type="text/javascript" src="[% c.uri_for('/js/jquery.svgdom.js') %]"></script>
+[% IF applicationjs -%]
     <script type="text/javascript" src="[% applicationjs %]"></script>
+[% END -%]
     [% content %]
     <title>[% pagetitle %]</title>
   </head>
diff --git a/stemmaweb/root/src/index.tt b/stemmaweb/root/src/index.tt
index 993eef3..afde0cd 100644
--- a/stemmaweb/root/src/index.tt
+++ b/stemmaweb/root/src/index.tt
@@ -3,6 +3,7 @@
 	applicationjs = c.uri_for( 'js/componentload.js' )
 %]
     <script type="text/javascript">
+var selectedTextID;
 $(document).ready(function() {
     // call out to load the directory div
     $('#directory').load( "[% c.uri_for( 'directory' ) %]" );
@@ -22,7 +23,23 @@ $(document).ready(function() {
     	<img src="[% c.uri_for( 'images', 'ajax-loader.gif' ) %]" />
       </div>
     </div>
-    <div id="stemma_graph"></div>
-    <div id="variant_graph"></div>
+    <div id="stemma_container">
+      <h2>Stemma for <span class="texttitle">selected text</span></h2>
+      <div id="stemma_graph"></div>
+      <form id="run_stexaminer" action="" method="GET" name="run_stexaminer">
+        <div class="button" id="stexaminer_button" onClick="$('#run_stexaminer').submit()">
+      	  <span>Examine variants against this stemma</span>
+        </div>
+      </form>
+    </div>
+    <div id="variant_container">
+      <div style="float: left"><h2>Variant graph for <span class="texttitle">selected text</span></h2></div>
+      <form id="run_relater" action="" method="GET" name="run_relater">
+        <div class="button" id="relater_button" onClick="$('#run_relater').submit()">
+          <span>Run relationship mapper</span>
+        </div>
+      </form>
+      <div id="variant_graph"></div>
+    </div>
 
 [% PROCESS footer.tt %]
\ No newline at end of file
diff --git a/stemmaweb/root/src/relate.tt b/stemmaweb/root/src/relate.tt
index 3537328..384bc77 100644
--- a/stemmaweb/root/src/relate.tt
+++ b/stemmaweb/root/src/relate.tt
@@ -1,6 +1,7 @@
 [% WRAPPER header.tt
 	pagetitle = "Stemmaweb - Relationship mapper"
-	applicationjs = base _ "/js/relationship.js"
+	applicationjs = c.uri_for('/js/relationship.js')
+	applicationstyle = c.uri_for('/css/relationship.css')
 %]
 <script type="text/javascript">
 $(function() {
@@ -8,7 +9,6 @@ $(function() {
   $('#svgenlargement').svg({loadURL: '[% svg_string %]', onLoad: svgEnlargementLoaded});
 });
 </script>
-<link type="text/css" href="[% c.uri_for('/css/relationship.css') %]" rel="stylesheet" />
 [% END %]
 
 	<div id="graph_container">	
diff --git a/stemmaweb/root/src/stexaminer.tt b/stemmaweb/root/src/stexaminer.tt
index e855d48..2e2ad71 100644
--- a/stemmaweb/root/src/stexaminer.tt
+++ b/stemmaweb/root/src/stexaminer.tt
@@ -1,6 +1,7 @@
 [% PROCESS header.tt
 	pagetitle = "Stexaminer - $text_title"
-	applicationjs = base _ "js/stexaminer.js"
+	applicationjs = c.uri_for('/js/stexaminer.js')
+	applicationstyle = c.uri_for('/css/stexaminer.css')
 %]
     <h1>Stexaminer</h1>
     <h2>[% text_title %]</h2>