root/src/phylotrees.tt

   1 [% WRAPPER header.tt
   2         pagetitle = "Stemmaweb - Phylogeny calculation tool"
   3         applicationjs = c.uri_for( 'js/phylotools.js' )
   4 %]
   5     <script type="text/javascript">
   6 var basepath = "[% c.uri_for( '/' ) %]";
   7 var textid = "[% textid %]";
   8 var editable = "[% editable %]"
   9 var currSelected;
  10 var stemmadot = [];
  11 var stemmasvg = [];
  12 var stemmata_added = {};
  13
  14 function getPhylogeny () {
  15         stemmadot = [];
  16         stemmasvg = [];
  17         var phylourl = basepath + textid;
  18     $('#textinfo_waitbox').show();
  19     $.getJSON( basepath + "phylocalc/" + textid, function (textdata) {
  20         stemmadot = textdata.stemmadot;
  21         stemmasvg = textdata.stemmasvg;
  22             $('#textinfo_waitbox').hide();
  23             load_stemma( 0 );
  24     }); // TODO error handling
  25 }
  26
  27 function load_stemma( idx ) {
  28         // Load the stemma at idx
  29         currSelected = idx;
  30         show_stemmapager();
  31         if( idx > -1 ) {
  32                 $('#stemma_graph').empty();
  33                 $('#stemma_graph').append( stemmasvg[idx] );
  34                 if( stemmadot[idx].substr('digraph') > -1 && stemmata_added[idx] != true ) {
  35                         // It has a root, so we may add it to the tradition stemmata.
  36                         $('#add_stemma_button').show();
  37                 }
  38         setTimeout( 'start_element_height = $("#stemma_graph .node")[0].getBBox().height;', 500 );
  39         }
  40 }
  41
  42 function show_stemmapager () {
  43       $('.pager_left_button').unbind('click').addClass( 'greyed_out' );
  44       $('.pager_right_button').unbind('click').addClass( 'greyed_out' );
  45       if( currSelected > 0 ) {
  46               $('.pager_left_button').click( function () {
  47                       load_stemma( currSelected - 1 );
  48               }).removeClass( 'greyed_out' );
  49       }
  50       if( selectedStemmaID + 1 < stemmata.length ) {
  51               $('.pager_right_button').click( function () {
  52                       load_stemma( currSelected + 1 );
  53               }).removeClass( 'greyed_out' );
  54       }
  55 }
  56
  57 function add_selected_stemma () {
  58         var requrl = basepath + "stemma/" + textid + "/n";
  59         var reqparam = { 'dot': stemmadot[currSelected] };
  60         $.post( requrl, reqparam, function (data) {
  61                 // Disable add for any stemma already added
  62                 stemmata_added[currSelected] = true;
  63                 $('#add_stemma_button').hide();
  64                 // TODO maybe check on the server if the stemma exists?
  65         }, 'json' );
  66 }
  67
  68 function rootStemma ( stemidx, root ) {
  69         // Send the stemmadot at stemidx to the server, along with the name of the
  70         // selected root node. Receive back a dot spec and an SVG, and enable the
  71         var rooturl = basepath + 'microservices/rootedstemma';
  72         var params = { 'dot': stemmadot[stemidx], 'root': root };
  73         $.post( rooturl, params, function (data) {
  74                 stemmadot[stemidx] = data.stemmadot;
  75                 stemmasvg[stemidx] = data.stemmasvg;
  76                 load_stemma( stemidx );
  77         }); // TODO error handling
  78 }
  79
  80 $(document).ready( function() {
  81         $('#stemma_graph').mousedown( function(evt) {
  82         evt.stopPropagation();
  83         $('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
  84         $('body').mousemove( function(evt) {
  85             mouse_scale = 1; // for now, was:  mouse_scale = svg_root_element.getScreenCTM().a;
  86             dx = (evt.clientX - $('#stemma_graph').data( 'mousedown_xy' )[0]) / mouse_scale;
  87             dy = (evt.clientY - $('#stemma_graph').data( 'mousedown_xy' )[1]) / mouse_scale;
  88             $('#stemma_graph').data( 'mousedown_xy', [evt.clientX, evt.clientY] );
  89             var svg_root = $('#stemma_graph svg').svg().svg('get').root();
  90             var g = $('g.graph', svg_root).get(0);
  91             current_translate = g.getAttribute( 'transform' ).split(/translate\(/)[1].split(')',1)[0].split(' ');
  92             new_transform = g.getAttribute( 'transform' ).replace( /translate\([^\)]*\)/, 'translate(' + (parseFloat(current_translate[0]) + dx) + ' ' + (parseFloat(current_translate[1]) + dy) + ')' );
  93             g.setAttribute( 'transform', new_transform );
  94             evt.returnValue = false;
  95             evt.preventDefault();
  96             return false;
  97         });
  98         $('body').mouseup( function(evt) {
  99             $('body').unbind('mousemove');
 100             $('body').unbind('mouseup');
 101         });
 102         });
 103
 104         $('#stemma_graph').mousewheel(function (event, delta) {
 105         event.returnValue = false;
 106         event.preventDefault();
 107         if (!delta || delta == null || delta == 0) delta = event.originalEvent.wheelDelta;
 108         if (!delta || delta == null || delta == 0) delta = -1 * event.originalEvent.detail;
 109         if( delta < -9 ) { delta = -9 };
 110         var z = 1 + delta/10;
 111         z = delta > 0 ? 1 : -1;
 112         var svg_root = $('#stemma_graph svg').svg().svg('get').root();
 113         var g = $('g.graph', svg_root).get(0);
 114         if (g && ((z<1 && (g.getScreenCTM().a * start_element_height) > 4.0) || (z>=1 && (g.getScreenCTM().a * start_element_height) < 1000))) {
 115             var scaleLevel = z/10;
 116             current_scale = parseFloat( g.getAttribute( 'transform' ).split(/scale\(/)[1].split(')',1)[0].split(' ')[0] );
 117             new_transform = g.getAttribute( 'transform' ).replace( /scale\([^\)]*\)/, 'scale(' + (current_scale + scaleLevel) + ')' );
 118             g.setAttribute( 'transform', new_transform );
 119         }
 120     });
 121
 122     $('#stemma_root_cancel').hide();
 123     if( !editable ) {
 124         $('#stemma_add_form').hide();
 125     }
 126     // call out to run the phylogeny calculation
 127         getPhylogeny();
 128
 129 });
 130     </script>
 131
 132 [% END %]
 133
 134     <div id="topbanner">
 135       <h1>Stemmaweb - [% algorithm_name %] calculation for [% text_name %]</h1>
 136       <span class="mainnav">[% IF c.user_exists %]Hello! [% c.user.get_object.email %] <a class="navlink" href="[% c.uri_for( '/logout' ) %]">Sign out</a> | [% ELSE %]<a class="navlink" onclick="window.open('[% c.uri_for( '/login' ) %]', 'loginwindow', 'height=385,width=445')">Login</a> | [% END %]<a class="navlink" href="[% c.uri_for( 'about.html' ) %]">About</a> </span>
 137     </div>
 138     <div id="textinfo_container">
 139       <div id="textinfo_load_status"></div>
 140       <h2>Text <span class="texttitle">[% text_name %]</span></h2>
 141       <div id="textinfo_container_buttons">
 142           <form id="stemma_pager" action="" method="GET" name="stemma_pager">
 143             <div id="stemma_pager_buttons">
 144               <div class="pager_left_button" id="stemma_pager_left_button"></div>
 145               <div class="pager_right_button" id="stemma_pager_right_button"></div>
 146             </div>
 147           </form>
 148           <form id="stemma_root_form" action="" method="GET" name="start_root_stemma">
 149             <div class="button" id="stemma_root_button"
 150                 onClick="TODO">
 151                   <span>Choose a root for this stemma</span>
 152             </div>
 153           </form>
 154           <form id="stemma_root_cancel" action="" method="GET" name="stemma_root_cancel">
 155             <div class="button" id="stemma_root_cancel_button"
 156                 onClick="TODO">
 157                   <span>Cancel root selection</span>
 158             </div>
 159           </form>
 160           <form id="stemma_add_form" action="" method="GET" name="stemma_add_form">
 161             <div class="button" id="add_stemma_button"
 162                 onClick="add_selected_stemma()">
 163                   <span>Add this stemma to the tradition</span>
 164             </div>
 165           </form>
 166       </div>
 167       <div id="stemma_graph"></div>
 168     </div>
 169
 170     <!-- Interim 'loading' message for directory box -->
 171     <div id="loading_message">
 172         <h3>Calculating text phylogeny, please wait...</h3>
 173         <img src="[% c.uri_for( 'images', 'ajax-loader.gif' ) %]" alt="Loading tradition list..."/>
 174     </div>
 175
 176 [% PROCESS footer.tt %]