TreeOfTexts/root/js/interaction.js

   1 var colors = ['#ffeeaa','#afc6e9','#d5fff6','#ffccaa','#ffaaaa','#e5ff80','#e5d5ff','#ffd5e5'];
   2 var row_triggered = false;
   3 $(document).ready(function() {
   4   $('.rowid').click( function() {
   5     row_triggered = true;
   6     $('ellipse').attr( {stroke:'black', fill:'#fff'} );
   7     $('tr.active_variant_row').children('td').removeClass('cellb0 cellb1 cellb2 cellb3 cellb4 cellb5 cellb6 cellb7');
   8     $(this).parent().nextAll('.clickable').children('span').click();
   9     $('td.active_variant_cell').removeClass('active_variant_cell');
  10     row_triggered = false;
  11   });
  12 })
  13 function color_nodes( column_index, arr_node_ids, arr_greynode_ids ) {
  14   if( !row_triggered ) {
  15     $('tr.active_variant_row').children('td').removeClass('cellb0 cellb1 cellb2 cellb3 cellb4 cellb5 cellb6 cellb7');
  16     $('td.active_variant_cell').removeClass('active_variant_cell');
  17     $('ellipse').attr( {stroke:'black', fill:'#fff'} );
  18   };
  19   $('tr.active_variant_row').removeClass('active_variant_row')
  20   jQuery.each( arr_greynode_ids, function(index,value) {
  21     $('.node').children('title').filter( function(index) {
  22       return $(this).text() == value;
  23     }).siblings('ellipse').each( function( index ) {
  24         $(this).attr( {stroke:'black', fill:'#444'} );
  25       });
  26   });
  27   jQuery.each( arr_node_ids, function(index,value) {
  28     $('.node').children('title').filter( function(index) {
  29       return $(this).text() == value;
  30     }).siblings('ellipse').each( function( index ) {
  31         $(this).attr( {stroke:'black', fill:colors[column_index-1]} );
  32       });
  33   });
  34 }
  35
  36 // 8 columns tied to colors, based on td position I guess
  37 // click on row id: all colors on, remaining (unused) nodes greyed
  38 // click on cell: those colors on, unused nodes greyed
  39 // c
  40
  41 //