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

@@ -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:

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;
 }

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 = $("<div class='callout'></div>")
+                            .css( { display: 'none' } )
+                            .appendTo( "body" )
+                            .append(
+                                $("<div class='buttons'></div>").append(
+                                    $("<img src='../images/delete_icon.png' />").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 () {

templates/workflow/editor.mako

@@ -20,6 +20,7 @@
     <script type='text/javascript' src="/static/scripts/jquery.js"> </script>
     <script type='text/javascript' src="/static/scripts/jquery.dimensions.js"> </script>
     <script type='text/javascript' src="/static/scripts/jquery.ui.js"> </script>
+    <script type='text/javascript' src="/static/scripts/jquery.hoverIntent.js"> </script>
     <script type='text/javascript' src="/static/scripts/jquery.form.js"> </script>
     <script type='text/javascript' src="/static/scripts/jquery.json.js"> </script>
 
@@ -89,11 +90,11 @@
         });
         
         $(document).ajaxError( function ( e, x ) {
-            // console.error( "AJAX:", e, ", ", x );
-            $("#error-display").empty()
-                .append( $("<div/>").html( x.responseText ) )
-                .append( $("<div><a>close</a></div>" ).click( function() { $("#error-display").hide(); } ) )
-                .show();
+            // $("#error-display").empty()
+            //     .append( $("<div/>").html( x.responseText ) )
+            //     .append( $("<div><a>close</a></div>" ).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;
+    }
+    
     </style>
 </%def>
         
@@ -456,13 +462,12 @@
             <div class="unified-panel-header">
                 <div class="unified-panel-header-inner"><span class='title'>Loading workflow editor...</span></div>
             </div>
-            <div class="body"><img src="${h.url_for('/static/images/yui/rel_interstitial_loading.gif')}" /></div>
+            <div class="body" style="max-height: 500px; overflow: auto;"><img src="${h.url_for('/static/images/yui/rel_interstitial_loading.gif')}" /></div>
             <div class="buttons" style="display: none;"></div>
         </div>
         <div class="dialog-box-underlay"></div>
     </div>
     </td></tr></table>
-    ## <div id="overlay-inner"></div>
 </div>
 
 <%def name="masthead()">