From 3cbff7e4f7d0470995cf49918fe243467fe760d0 Mon Sep 17 00:00:00 2001 From: James Taylor Date: Thu, 1 May 2008 22:36:08 +0000 Subject: [PATCH] Workflow editor changes. Deleting nodes works again, and you can now delete connections! (hover over an input terminal). Many UI improvements (dialogs, error reporting). --- lib/galaxy/web/framework/base.py | 2 + static/june_2007_style/blue/panel_layout.css | 4 ++ .../scripts/galaxy.workflow_editor.canvas.js | 38 ++++++++++++++++--- templates/workflow/editor.mako | 23 ++++++----- 4 files changed, 52 insertions(+), 15 deletions(-) diff --git a/lib/galaxy/web/framework/base.py b/lib/galaxy/web/framework/base.py index 43d48838eb6..dc16bfcfa5a 100644 --- a/lib/galaxy/web/framework/base.py +++ b/lib/galaxy/web/framework/base.py @@ -119,6 +119,8 @@ class WebApplication( object ): # Combine mapper args and query string / form args and call kwargs = trans.request.params.mixed() kwargs.update( map ) + # Special key for AJAX debugging, remove to avoid confusing methods + kwargs.pop( '_', None ) try: body = method( trans, **kwargs ) except Exception, e: diff --git a/static/june_2007_style/blue/panel_layout.css b/static/june_2007_style/blue/panel_layout.css index 7e44f7d7d67..c52a772bbcb 100644 --- a/static/june_2007_style/blue/panel_layout.css +++ b/static/june_2007_style/blue/panel_layout.css @@ -281,4 +281,8 @@ div.popupmenu-item:hover { .dialog-box .body, .dialog-box .buttons { padding: 5px; +} + +.dialog-box body { + overflow: scroll; } \ No newline at end of file diff --git a/static/scripts/galaxy.workflow_editor.canvas.js b/static/scripts/galaxy.workflow_editor.canvas.js index fc8691865de..3276ce68d5c 100644 --- a/static/scripts/galaxy.workflow_editor.canvas.js +++ b/static/scripts/galaxy.workflow_editor.canvas.js @@ -62,7 +62,8 @@ $.extend( InputTerminal.prototype, { function Connector( handle1, handle2 ) { this.canvas = null; this.dragging = false; - this.inner_color = "#EEEEEE"; + this.inner_color = "#FFFFFF"; + this.outer_color = "#D8B365" } $.extend( Connector.prototype, { connect: function ( t1, t2 ) { @@ -118,7 +119,7 @@ $.extend( Connector.prototype, { // Draw the line var c = this.canvas.getContext("2d"); c.lineCap = "round"; - c.strokeStyle = "#999"; + c.strokeStyle = this.outer_color; c.lineWidth = 7; c.beginPath(); c.moveTo( start_x, start_y ); @@ -168,7 +169,32 @@ $.extend( Node.prototype, { c.connect( source, target ); c.redraw(); } - }); + }); + $(this).hoverIntent( + function() { + // If connected, create a popup to allow disconnection + if ( terminal.connectors.length > 0 ) { + // Create callout + var t = $("
") + .css( { display: 'none' } ) + .appendTo( "body" ) + .append( + $("
").append( + $("").click( function() { + $.each( terminal.connectors, function( _, x ) { x.destroy() } ); + t.remove(); + }))) + .bind( "mouseleave", function() { $(this).fadeOut( "fast", function() { $(this).remove() } ) } ); + // Position it and show + t.css( { + top: $(this).offset().top - 2, + left: $(this).offset().left - t.width(), + 'padding-right': $(this).width() } + ).fadeIn( "fast" ); + } + }, + function() {} + ); node.input_terminals[name] = terminal; }) }, @@ -211,13 +237,13 @@ $.extend( Node.prototype, { destroy : function () { $.each( this.input_terminals, function( k, t ) { t.destroy(); - $(t.element).droppableDestroy(); + $(t.element).droppable('destroy'); }); $.each( this.output_terminals, function( k, t ) { t.destroy(); - $(t.element).draggableDestroy(); + $(t.element).draggable('destroy'); }); - $(this.element).draggableDestroy().remove(); + $(this.element).draggable('destroy').remove(); workflow.remove_node( this ); }, make_active : function () { diff --git a/templates/workflow/editor.mako b/templates/workflow/editor.mako index 582d38e65fd..9873a50499b 100644 --- a/templates/workflow/editor.mako +++ b/templates/workflow/editor.mako @@ -20,6 +20,7 @@ + @@ -89,11 +90,11 @@ }); $(document).ajaxError( function ( e, x ) { - // console.error( "AJAX:", e, ", ", x ); - $("#error-display").empty() - .append( $("
").html( x.responseText ) ) - .append( $("
close
" ).click( function() { $("#error-display").hide(); } ) ) - .show(); + // $("#error-display").empty() + // .append( $("
").html( x.responseText ) ) + // .append( $("
close
" ).click( function() { $("#error-display").hide(); } ) ) + // .show(); + show_modal( "Server error", x.responseText, { "Ignore error" : hide_modal } ); return false; }); @@ -153,7 +154,7 @@ workflow.activate_node( node ); $.ajax( { url: "${h.url_for( action='get_tool_info' )}", - data: { tool_id: id }, + data: { tool_id: id, "_": "true" }, dataType: "json", success: function( data ) { node.init_field_data( data ); @@ -370,7 +371,7 @@ canvas.dragging { position: absolute; z-index: 1000; } .input-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')}); position: absolute; bottom: 0; left: -16px; } .output-terminal { width: 12px; height: 12px; background: url(${h.url_for('/static/style/workflow_circle_open.png')});; position: absolute; bottom: 0; right: -16px; } - .drag-terminal { position: absolute; z-index: 1500; width: 10px; height: 10px; background: red; } + .drag-terminal { position: absolute; z-index: 1500; width: 10px; height: 10px; } .input-terminal-active { background: url(${h.url_for('/static/style/workflow_circle_green.png')}); } ## .input-terminal-hover { background: yellow; border: solid black 1px; } .unselectable { -moz-user-select: none; -khtml-user-select: none; user-select: none; } @@ -443,6 +444,11 @@ border-bottom: dotted black 1px; } + .callout { + position: absolute; + z-index: 10000; + } + @@ -456,13 +462,12 @@
Loading workflow editor...
-
+
- ##
<%def name="masthead()">