Change interactive color coding.

diff --git a/TreeOfTexts/root/js/interaction.js b/TreeOfTexts/root/js/interaction.js

index 68ccd34..00325bc 100644 (file)
--- a/TreeOfTexts/root/js/interaction.js
+++ b/TreeOfTexts/root/js/interaction.js
@@ -4,15 +4,19 @@ $(document).ready(function() {
   $('.rowid').click( function() {
     row_triggered = true;
     $('ellipse').attr( {stroke:'black', fill:'#fff'} );
+    $('tr.active_variant_row').children('td').removeClass('cellb0 cellb1 cellb2 cellb3 cellb4 cellb5 cellb6 cellb7'); 
     $(this).parent().nextAll('.clickable').children('span').click();
-    $('tr.active_variant_row').find('td').removeClass( 'active_variant_cell' );
+    $('td.active_variant_cell').removeClass('active_variant_cell');
     row_triggered = false;
   });
 })
 function color_nodes( column_index, arr_node_ids, arr_greynode_ids ) {
-  if( !row_triggered ) { 
-    $('ellipse').attr( {stroke:'black', fill:'#fff'} ) 
+  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'} );
   }; 
+  $('tr.active_variant_row').removeClass('active_variant_row') 
   jQuery.each( arr_greynode_ids, function(index,value) {
     $('.node').children('title').filter( function(index) {
       return $(this).text() == value;
diff --git a/TreeOfTexts/root/src/index.tt b/TreeOfTexts/root/src/index.tt

index 9d7b5a8..a82da65 100644 (file)
--- a/TreeOfTexts/root/src/index.tt
+++ b/TreeOfTexts/root/src/index.tt
@@ -11,6 +11,9 @@
   <body>
     <h1>Stexaminer</h1>
     <h2>[% text_title %]</h2>
+    <div id="statistics">
+      <p>Analyzed [% total %] variant locations, of which [% genealogical %] entirely followed the stemma.  [% conflict %] readings conflicted with the stemma.</p>
+    </div>
     <div id="svg_graph">
       [% svg %]
     </div>
@@ -21,9 +24,6 @@
 [% END -%]
      </table>
     </div>
-    <div id="statistics">
-      <p>Analyzed [% total %] variant locations, of which [% genealogical %] entirely followed the stemma.  [% conflict %] readings conflicted with the stemma.</p>
-    </div>
   </body>
 </html>
 
@@ -35,7 +35,7 @@
 [% FOREACH reading IN row.readings -%]
 [% SET cellclass = 'clickable conflict' IF reading.conflict -%]
 [% SET cellclass = 'clickable' IF !reading.conflict -%]
-          <td class="[% cellclass %]"><span onclick="$('td.active_variant_cell').removeClass('active_variant_cell');$(this).parent().addClass('active_variant_cell');$('tr.active_variant_row').removeClass('active_variant_row');$(this).parents('tr').addClass('active_variant_row');color_nodes($(this).parent().index(), [% reading.group %], [% reading.missing %]);">[% reading.text %]</span></td>
+          <td class="[% cellclass %]"><span onclick="color_nodes($(this).parent().index(), [% reading.group %], [% reading.missing %]);$(this).parents('tr').addClass('active_variant_row');$(this).parent().addClass('active_variant_cell cellb'+($(this).parent().index()-1))">[% reading.text %]</span></td>
 [% END -%]
 [% FILTER repeat( row.empty ) -%]
           <td/>
diff --git a/TreeOfTexts/root/src/style.tt2 b/TreeOfTexts/root/src/style.tt2

index bea078f..390ebc1 100644 (file)
--- a/TreeOfTexts/root/src/style.tt2
+++ b/TreeOfTexts/root/src/style.tt2
@@ -22,18 +22,22 @@ body {
 }
 #statistics {
     font-style: italic;
-    position: absolute;
-    bottom: 5px;
+    margin-bottom: 25px;
+    position: relative;
+    top: -15px;
 }
 h1 {
     border-bottom: 1px solid #488dd2;
     color: #488dd2;
     font-size: 24px;
     font-weight: 100;
-    margin: 0 0 40px;
+    margin: 0 0 17px;
     padding: 0;
     width: 280px;
-}    
+}
+h2 {
+    margin-top: 0px;
+} 
 .genealogical {
     background: #88ffaa;
 }
@@ -41,7 +45,7 @@ h1 {
     background: #fff;
 }
 .conflict {
-    background: #ffeeee;
+    background: #ff6666;
 }
 .active_variant_row {
     background: #c6dcf1;
@@ -49,4 +53,28 @@ h1 {
 .active_variant_cell {
     background: #e8f1fe;
 }
-</style>
+.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;
+}
+</style>
\ No newline at end of file
TreeOfTexts/root/js/interaction.js		patch \| blob \| blame \| history
TreeOfTexts/root/src/index.tt		patch \| blob \| blame \| history
TreeOfTexts/root/src/style.tt2		patch \| blob \| blame \| history