Implementation of merge back-end & UI
[scpubgit/stemmaweb.git] / root / js / stexaminer.js
index b38d842..a846cd0 100644 (file)
@@ -1,27 +1,58 @@
 var colors = ['#ffeeaa','#afc6e9','#d5fff6','#ffccaa','#ffaaaa','#e5ff80','#e5d5ff','#ffd5e5'];
 var row_triggered = false;
-var original_svg;
 
 function handle_row_click( row ) {
        var ridx = row.parent().parent().index()
        var rs = readingstats[ridx];
-    var imghtml = '<img src="../images/ajax-loader.gif" alt="Loading SVG..."/>'
+    var imghtml = $('<img>').attr( 'src', baseurl + "../images/ajax-loader.gif" ).attr( 'alt', "Loading SVG..." );
     $('#stemma_graph').empty();
     $('#stemma_graph').append( imghtml );
        if( rs.layerwits ) {
                var stemma_form = { 'dot': graphdot, 'layerwits': rs.layerwits };
-               $('#stemma_graph').load( 'graphsvg', stemma_form, function() {
+               $.post( baseurl + 'graphsvg', stemma_form, function( data ) {
+                       var oSerializer = new XMLSerializer();
+                       var xmlString = oSerializer.serializeToString( data.documentElement );
+                       loadSVG( xmlString, function () { 
+                               color_row( row );
+                               show_stats( rs );
+                       });
+               });
+       } else {
+               loadSVG( original_svg, function() {
                        color_row( row );
                        show_stats( rs );
                });
-       } else {
-               $('#stemma_graph').empty();
-               $('#stemma_graph').append( original_svg );
-               color_row( row );
-               show_stats( rs );
        }
 }
 
+// Load the SVG we are given
+function loadSVG(svgData, cb) {
+       var svgElement = $('#stemma_graph');
+
+       $(svgElement).svg('destroy');
+
+       $(svgElement).svg({
+               loadURL: svgData,
+               onLoad : function () {
+                       var theSVG = svgElement.find('svg');
+                       var svgoffset = theSVG.offset();
+                       // Firefox needs a different offset, stupidly enough
+                       var browseroffset = 1;
+                       if( navigator.userAgent.indexOf('Firefox') > -1 ) {
+                               browseroffset = 3;
+                       }
+                       var topoffset = theSVG.position().top - svgElement.position().top - browseroffset;
+                       // If we are on Safari, we need to get rid of the 'pt' in the width/height
+                       // specifications
+                       theSVG.offset({ top: svgoffset.top - topoffset, left: svgoffset.left });
+                       if( cb ) {
+                               cb.call();
+                       }
+                       theSVG.attr( 'width', '100%' );
+               }
+       });
+}
+
 function color_row( row ) {
     row_triggered = true;
     $('ellipse').attr( {stroke:'white', fill:'#fff'} );
@@ -60,44 +91,93 @@ function color_nodes( column_index, arr_node_ids, arr_greynode_ids ) {
 }
 
 function show_stats( rs ) {
+       // Update the title
+       $('#stats_title').empty().text('Statistics for reading at ' + rs.id + ':' );
        var rshtml = $('#stats_template').clone();
-       rshtml.find('#statrank').append( rs.id );
-       $.each( rs.readings, function( idx, rdghash ) {
-               var readinglabel = rdghash.readingid;
-               if( rdghash.text ) {
-                       readinglabel = rdghash.text;
-               }
-               var readingroots = rdghash.independent_occurrence.join( ', ' );
-               var rdgstats = $('#reading_template').clone();
-               rdgstats.find('.readinglabel').append( readinglabel );
-               rdgstats.find('.reading_copied').append( rdghash.followed );
-               rdgstats.find('.reading_changed').append( rdghash.not_followed );
-               rdgstats.find('.reading_unclear').append( rdghash.follow_unknown );
-               rdgstats.find('.readingroots').append( readingroots );
-               if( ! $.isEmptyObject( rdghash.reading_parents ) ) {
-                       var parentstats = $('#reading_parent_template').clone();
-                       $.each( rdghash.reading_parents, function( parentid, pdata ) {
-                               var parentdesc = pdata.label;
-                               if( pdata.relation ) {
-                                       parentdesc += ' - variant type ' + pdata.relation.type;
-                                       if( pdata.relation.annotation ) {
-                                               parentdesc += ' [ ' + pdata.relation.annotation + ' ]';
-                                       }
-                               } else {
-                                       parentdesc += ' - no syntactic relation';
-                               }
-                               var parentitem = $('<li>').append( parentdesc );
-                               parentstats.find('.reading_parent_list').append( parentitem );
-                       });
-                       rdgstats.find('.reading_statistics').append( parentstats.contents() );
+       if( "unsolved" in rs ) {
+               var nocalcmsg;
+               if( rs.unsolved == 'IDP error' ) {
+                       nocalcmsg = $('<span>').attr('class', 'error').append(
+                               "(Could not reach calculation server - are you offline?)" );
+               } else {
+                       nocalcmsg = "(Not yet calculated for this location - please try later)";
                }
-               rshtml.append( rdgstats.contents() );
-       });
-       $('#row_statistics').empty();
-       $('#row_statistics').append( rshtml.contents() );
+               rshtml.find('.solutionstatus').append( nocalcmsg );
+       } else {
+               $.each( rs.readings, function( idx, rdghash ) {
+                       var rdgstats = $('#reading_template').clone();
+                       rdgstats.find('.readinglabel').append( rdghash.text );
+                       rdgstats.find('.reading_copied').append( rdghash.followed );
+                       rdgstats.find('.reading_changed').append( rdghash.not_followed );
+                       rdgstats.find('.reading_unclear').append( rdghash.follow_unknown );
+                       rdgstats.find('.readingroots').append( rdghash.independent_occurrence );
+                       if( rdghash.is_reverted ) {
+                               rdgstats.find('.reversionroots').append( rdghash.reversions );
+                       } else {
+                               rdgstats.find('.readingreversions').empty();
+                       }
+                       var rdgsourcehtml = fill_parent_template( rdghash, 'source' );
+                       var rdgreverthtml = fill_parent_template( rdghash, 'reversion' );
+                       rdgstats.find('.reading_statistics').append( rdgsourcehtml );
+                       rdgstats.find('.reading_statistics').append( rdgreverthtml );
+                       // If neither, append a small spacer
+                       if( !rdgsourcehtml && !rdgreverthtml ) {
+                               rdgstats.find('.reading_statistics').append( '<br/>' );
+                       }
+                       rshtml.append( rdgstats.contents() );
+               });
+       }
+       $('#stats_container').empty().append( rshtml.contents() );
+       
 };
 
+function fill_parent_template( rdghash, type ) {
+       var objname = type + '_parents';
+       var template_id = '#reading_' + type + '_template';
+       var list_class = '.reading_' + type + '_list';
+       if( ! $.isEmptyObject( rdghash[objname] ) ) {
+               var parentstats = $( template_id ).clone();
+               $.each( rdghash[objname], function( parentid, pdata ) {
+                       var parentdesc = pdata.label;
+                       if( pdata.relation ) {
+                               parentdesc += ' - variant type ' + pdata.relation.type;
+                               if( pdata.relation.annotation ) {
+                                       parentdesc += ' [ ' + pdata.relation.annotation + ' ]';
+                               }
+                       } else {
+                               parentdesc += ' - no syntactic relation';
+                       }
+                       var parentitem = $('<li>').append( parentdesc );
+                       parentstats.find( list_class ).append( parentitem );
+               });
+               return( parentstats.contents() );
+       }
+}
+
 // Save the original unextended SVG for when we need it.
 $(document).ready(function () {
-       original_svg = $('#stemma_graph > svg').clone();
+       loadSVG( original_svg );
+       
+       $('#aboutlink').popupWindow({ 
+               height:500, 
+               width:800, 
+               top:50, 
+               left:50,
+               scrollbars:1 
+       }); 
+       $('#options').dialog({
+               autoOpen: false,
+               // height: 'auto',
+               width: 300,
+               modal: true,
+               buttons: {
+                       Cancel: function() {
+                               $(this).dialog( "close" );
+                       },
+                       Reanalyze: function() {
+                               $('#use_variants_form').submit();
+                       },
+               }
+       });
+
 });