X-Git-Url: http://git.shadowcat.co.uk/gitweb/gitweb.cgi?a=blobdiff_plain;f=root%2Fjs%2Fcomponentload.js;h=24b692b0e32f5d06c1a9cbd375d248914cef9c3c;hb=e4fd6366fd96df7b3076ac8f76e1701e7083342b;hp=9c10c96b929841810da39f08dee89ca58ecee073;hpb=1acbd103648a939e82ff5bc0c58d30492e59fdcb;p=scpubgit%2Fstemmaweb.git diff --git a/root/js/componentload.js b/root/js/componentload.js index 9c10c96..24b692b 100644 --- a/root/js/componentload.js +++ b/root/js/componentload.js @@ -1,6 +1,7 @@ // Global state variables var selectedTextID; var selectedTextInfo; +var selectedTextEditable; var selectedStemmaID = -1; var stemmata = []; @@ -29,6 +30,7 @@ function refreshDirectory () { // view pane. Calls load_textinfo. function loadTradition( textid, textname, editable ) { selectedTextID = textid; + selectedTextEditable = editable; // First insert the placeholder image and register an error handler $('#textinfo_load_status').empty(); $('#stemma_graph').empty(); @@ -45,12 +47,12 @@ function loadTradition( textid, textname, editable ) { // Hide the functionality that is irrelevant if( editable ) { $('#open_stemma_add').show(); - $('#open_stemma_edit').show(); $('#open_textinfo_edit').show(); $('#relatebutton_label').text('View collation and edit relationships'); } else { $('#open_stemma_add').hide(); - $('#open_stemma_edit').hide(); + $('#open_stemweb_ui').hide(); + $('#query_stemweb_ui').hide(); $('#open_textinfo_edit').hide(); $('#relatebutton_label').text('View collation and relationships'); } @@ -62,15 +64,12 @@ function loadTradition( textid, textname, editable ) { // Add the scalar data selectedTextInfo = textdata; load_textinfo(); - // Add the stemma(ta) and set up the stexaminer button + // Add the stemma(ta) stemmata = textdata.stemmata; if( stemmata.length ) { selectedStemmaID = 0; - $('#run_stexaminer').show(); } else { selectedStemmaID = -1; - $('#open_stemma_edit').hide(); - $('#run_stexaminer').hide(); } load_stemma( selectedStemmaID ); // Set up the relationship mapper button @@ -86,7 +85,10 @@ function load_textinfo() { $('#textinfo_waitbox').hide(); $('#textinfo_load_status').empty(); $('#textinfo_container').show(); + // The tradition name should appear here and should be identical in the + // corresponding directory span. In case the name was just changed... $('.texttitle').empty().append( selectedTextInfo.name ); + $('#' + selectedTextID).empty().append( selectedTextInfo.name ); // Witnesses $('#witness_num').empty().append( selectedTextInfo.witnesses.size ); $('#witness_list').empty().append( selectedTextInfo.witnesses.join( ', ' ) ); @@ -118,12 +120,12 @@ function show_stemmapager () { $('.pager_right_button').unbind('click').addClass( 'greyed_out' ); if( selectedStemmaID > 0 ) { $('.pager_left_button').click( function () { - load_stemma( selectedStemmaID - 1 ); + load_stemma( selectedStemmaID - 1, selectedTextEditable ); }).removeClass( 'greyed_out' ); } if( selectedStemmaID + 1 < stemmata.length ) { $('.pager_right_button').click( function () { - load_stemma( selectedStemmaID + 1 ); + load_stemma( selectedStemmaID + 1, selectedTextEditable ); }).removeClass( 'greyed_out' ); } } @@ -132,16 +134,110 @@ function show_stemmapager () { function load_stemma( idx ) { // Load the stemma at idx selectedStemmaID = idx; - show_stemmapager(); + show_stemmapager( selectedTextEditable ); + $('#open_stemma_edit').hide(); + $('#run_stexaminer').hide(); + $('#stemma_identifier').empty(); + // Add the relevant Stemweb functionality + if( selectedTextEditable ) { + switch_stemweb_ui(); + } if( idx > -1 ) { - loadSVG( stemmata[idx] ); - // Stexaminer submit action - var stexpath = _get_url([ "stexaminer", selectedTextID, idx ]); - $('#run_stexaminer').attr( 'action', stexpath ); + // Load the stemma and its properties + var stemmadata = stemmata[idx]; + if( selectedTextEditable ) { + $('#open_stemma_edit').show(); + } + if( stemmadata.directed ) { + // Stexaminer submit action + var stexpath = _get_url([ "stexaminer", selectedTextID, idx ]); + $('#run_stexaminer').attr( 'action', stexpath ); + $('#run_stexaminer').show(); + } + loadSVG( stemmadata.svg ); + $('#stemma_identifier').text( stemmadata.name ); setTimeout( 'start_element_height = $("#stemma_graph .node")[0].getBBox().height;', 500 ); } } +function switch_stemweb_ui() { + if( selectedTextInfo.stemweb_jobid == 0 ) { + // We want to run Stemweb. + $('#open_stemweb_ui').show(); + $('#query_stemweb_ui').hide(); + if( ! $('#stemweb-ui-dialog').dialog('isOpen') ) { + $('#call_stemweb').show() + $('#stemweb_run_button').show(); + } + } else { + $('#query_stemweb_ui').show(); + $('#open_stemweb_ui').hide(); + $('#call_stemweb').hide(); + $('#stemweb_run_button').hide(); + } +} + +function query_stemweb_progress() { + var requrl = _get_url([ "stemweb", "query", selectedTextInfo.stemweb_jobid ]); + $('#stemweb-ui-dialog').dialog('open'); + $('#stemweb_run_status').empty().append( + _make_message( 'notification', 'Querying Stemweb for calculation progress...') ); + $.getJSON( requrl, function (data) { + process_stemweb_result( data ); + }); +} + +function process_stemweb_result(data) { + // Look for a status message, either success, running, or notfound. + if( data.status === 'success' ) { + // Add the new stemmata to the textinfo and tell the user. + selectedTextInfo.stemweb_jobid = 0; + if( data.stemmata.length > 0 ) { + stemmata = stemmata.concat( data.stemmata ); + if( selectedStemmaID == -1 ) { + // We have a stemma for the first time; load the first one. + load_stemma( 0, true ); + } else { + // Move to the index of the first added stemma. + var newIdx = stemmata.length - data.stemmata.length; + load_stemma( newIdx, true ); + } + // Hide the call dialog no matter how we got here + $('#call_stemweb').hide() + $('#stemweb_run_button').hide(); + $('#stemweb_run_status').empty().append( + _make_message( 'notification', 'You have one or more new stemmata!' ) ); + } else { + $('#stemweb_run_status').empty().append( + _make_message( 'warning', 'Stemweb run finished with no stemmata...huh?!' ) ); + } + } else if( data.status === 'running' ) { + // Just tell the user. + $('#stemweb_run_status').empty().append( + _make_message( 'warning', 'Your Stemweb query is still running!' ) ); + } else if( data.status === 'notfound' ) { + // Ask the user to refresh, for now. + $('#stemweb_run_status').empty().append( + _make_message( 'warning', 'Your Stemweb query probably finished and reported back. Please reload to check.' ) ); + } else if( data.status === 'failed' ) { + selectedTextInfo.stemweb_jobid = 0; + failureMsg = 'Your stemweb query failed'; + if( data.message ) { + failureMsg = failureMsg + ' with the following message: ' + data.message + } else { + failureMsg = failureMsg + ' without telling us why.' + } + $('#stemweb_run_status').empty().append( + _make_message( 'error', failureMsg ) ); + } +} + +function _make_message( type, msg ) { + theMessage = $('').attr( 'class', type ); + theMessage.append( msg ); + return theMessage; +} + // Load the SVG we are given function loadSVG(svgData) { var svgElement = $('#stemma_graph'); @@ -171,10 +267,59 @@ function loadSVG(svgData) { } var topoffset = theSVG.position().top - svgElement.position().top - browseroffset; theSVG.offset({ top: svgoffset.top - topoffset, left: svgoffset.left }); + set_stemma_interactive( theSVG ); } }); } +function set_stemma_interactive( svg_element ) { + if( selectedTextEditable ) { + $( "#root_tree_dialog_button_ok" ).click( function() { + var requrl = _get_url([ "stemmaroot", selectedTextID, selectedStemmaID ]); + var targetnode = $('#root_tree_dialog').data( 'selectedNode' ); + $.post( requrl, { root: targetnode }, function (data) { + // Reload the new stemma + stemmata[selectedStemmaID] = data; + load_stemma( selectedStemmaID ); + // Put away the dialog + $('#root_tree_dialog').data( 'selectedNode', null ).hide(); + } ); + } ).ajaxError( function(event, jqXHR, ajaxSettings, thrownError) { + if( ajaxSettings.url.indexOf( 'stemmaroot' ) > -1 + && ajaxSettings.type == 'POST' ) { + display_error( jqXHR, $("#stemma_load_status") ); + } + } ); + // TODO Clear error at some appropriate point + $.each( $( 'ellipse', svg_element ), function(index) { + var ellipse = $(this); + var g = ellipse.parent( 'g' ); + g.click( function(evt) { + if( typeof root_tree_dialog_timeout !== 'undefined' ) { clearTimeout( root_tree_dialog_timeout ) }; + g.unbind( 'mouseleave' ); + var dialog = $( '#root_tree_dialog' ); + // Note which node triggered the dialog + dialog.data( 'selectedNode', g.attr('id') ); + // Position the dialog + dialog.hide(); + dialog.css( 'top', evt.pageY + 3 ); + dialog.css( 'left', evt.pageX + 3 ); + dialog.show(); + root_tree_dialog_timeout = setTimeout( function() { + $( '#root_tree_dialog' ).data( 'selectedNode', null ).hide(); + ellipse.removeClass( 'stemma_node_highlight' ); + g.mouseleave( function() { ellipse.removeClass( 'stemma_node_highlight' ) } ); + }, 3000 ); + } ); + g.mouseenter( function() { + $( 'ellipse.stemma_node_highlight' ).removeClass( 'stemma_node_highlight' ); + ellipse.addClass( 'stemma_node_highlight' ) + } ); + g.mouseleave( function() { ellipse.removeClass( 'stemma_node_highlight' ) } ); + } ); + } +} + // General-purpose error-handling function. // TODO make sure this gets used throughout, where appropriate. function display_error( jqXHR, el ) { @@ -307,13 +452,16 @@ function _get_url( els ) { return basepath + els.join('/'); } - +// TODO Attach unified ajaxError handler to document $(document).ready( function() { // See if we have the browser functionality we need // TODO Also think of a test for SVG readiness if( !!window.FileReader && !!window.File ) { $('#compatibility_check').empty(); } + + // hide dialog not yet in use + $('#root_tree_dialog').hide(); // call out to load the directory div $('#textinfo_container').hide(); @@ -329,7 +477,8 @@ $(document).ready( function() { buttons: { Save: function (evt) { $("#edit_textinfo_status").empty(); - $(evt.target).button("disable"); + var mybuttons = $(evt.target).closest('button').parent().find('button'); + mybuttons.button( 'disable' ); var requrl = _get_url([ "textinfo", selectedTextID ]); var reqparam = $('#edit_textinfo').serialize(); $.post( requrl, reqparam, function (data) { @@ -337,7 +486,7 @@ $(document).ready( function() { selectedTextInfo = data; load_textinfo(); // Reenable the button and close the form - $(evt.target).button("enable"); + mybuttons.button("enable"); $('#textinfo-edit-dialog').dialog('close'); }, 'json' ); }, @@ -382,7 +531,8 @@ $(document).ready( function() { buttons: { Save: function (evt) { $("#edit_stemma_status").empty(); - $(evt.target).button("disable"); + var mybuttons = $(evt.target).closest('button').parent().find('button'); + mybuttons.button( 'disable' ); var stemmaseq = $('#stemmaseq').val(); var requrl = _get_url([ "stemma", selectedTextID, stemmaseq ]); var reqparam = { 'dot': $('#dot_field').val() }; @@ -393,14 +543,13 @@ $(document).ready( function() { // We received a stemma SVG string in return. // Update the current stemma sequence number selectedStemmaID = data.stemmaid; - // Stash the answer in our SVG array - stemmata[selectedStemmaID] = data.stemmasvg; + delete data.stemmaid; + // Stash the answer in the appropriate spot in our stemma array + stemmata[selectedStemmaID] = data; // Display the new stemma - load_stemma( selectedStemmaID ); - // Show the edit button, in case this was the first new stemma - $('#open_stemma_edit').show(); + load_stemma( selectedStemmaID, true ); // Reenable the button and close the form - $(evt.target).button("enable"); + mybuttons.button("enable"); $('#stemma-edit-dialog').dialog('close'); }, 'json' ); }, @@ -415,7 +564,7 @@ $(document).ready( function() { // If we are creating a new stemma, populate the textarea with a // bare digraph. $(evt.target).dialog('option', 'title', 'Add a new stemma') - $('#dot_field').val( "digraph stemma {\n\n}" ); + $('#dot_field').val( "digraph \"NAME STEMMA HERE\" {\n\n}" ); } else { // If we are editing a stemma, grab its stemmadot and populate the // textarea with that. @@ -436,7 +585,167 @@ $(document).ready( function() { display_error( jqXHR, $("#edit_stemma_status") ); } }); + + $('#stemweb-ui-dialog').dialog({ + autoOpen: false, + height: 'auto', + width: 520, + modal: true, + buttons: { + Run: { + id: 'stemweb_run_button', + text: 'Run', + click: function (evt) { + $("#stemweb_run_status").empty(); + var mybuttons = $(evt.target).closest('button').parent().find('button'); + mybuttons.button( 'disable' ); + var requrl = _get_url([ "stemweb", "request" ]); + var reqparam = $('#call_stemweb').serialize(); + // TODO We need to stash the literal SVG string in stemmata + // somehow. Implement accept header on server side to decide + // whether to send application/json or application/xml? + $.getJSON( requrl, reqparam, function (data) { + mybuttons.button("enable"); + if( 'jobid' in data ) { + // There is a pending job. + selectedTextInfo.stemweb_jobid = data.jobid; + $('#stemweb_run_status').empty().append( + _make_message( 'notification', "Your request has been submitted to Stemweb.\nThe resulting tree will appear in due course." ) ); + // Reload the current stemma to rejigger the buttons + switch_stemweb_ui(); + } else { + // We appear to have an answer; process it. + process_stemweb_result( data ); + } + }, 'json' ); + }, + }, + Close: { + id: 'stemweb_close_button', + text: 'Close', + click: function() { + $('#stemweb-ui-dialog').dialog('close'); + switch_stemweb_ui(); + }, + }, + }, + create: function(evt) { + // Call out to Stemweb to get the algorithm options, with which we + // populate the form. + var algorithmTypes = {}; + var algorithmArgs = {}; + var requrl = _get_url([ "stemweb", "available" ]); + $.getJSON( requrl, function( data ) { + $.each( data, function( i, o ) { + if( o.model === 'algorithms.algorithm' ) { + // it's an algorithm. + algorithmTypes[ o.pk ] = o.fields; + } else if( o.model == 'algorithms.algorithmarg' && o.fields.external ) { + // it's an option for an algorithm that we should display. + algorithmArgs[ o.pk ] = o.fields; + } + }); + // TODO if it is an empty object, disable Stemweb entirely. + if( !jQuery.isEmptyObject( algorithmTypes ) ) { + $.each( algorithmTypes, function( pk, fields ) { + var algopt = $('