Visualization tweaks, grid links work again (not perfect though), tracks now line up with no extra shims, now shows scrollbar for track area

lib/galaxy/web/controllers/visualization.py

@@ -5,7 +5,6 @@ from galaxy.util.sanitize_html import sanitize_html
 
 class VisualizationListGrid( grids.Grid ):
     # Grid definition
-    use_panels = True
     title = "Visualizations"
     model_class = model.Visualization
     default_sort_key = "-create_time"

static/scripts/trackster.js

@@ -122,8 +122,8 @@ $.extend( View.prototype, {
         for ( var i = 0, len = this.tracks.length; i < len; i++ ) {
             this.tracks[i].draw();
         }
-        $("#bottom-spacer").remove();
-        $("#viewport").append('<div id="bottom-spacer" style="height: 200px;"></div>');
+        //$("#bottom-spacer").remove();
+        //$("#viewport").append('<div id="bottom-spacer" style="height: 200px;"></div>');
     },
     zoom_in: function ( point ) {
         if (this.max_high === 0 || this.high - this.low < 30) {
@@ -181,6 +181,7 @@ $.extend( TiledTrack.prototype, Track.prototype, {
 
         var w_scale = this.content_div.width() / range;
 
+        var max_height = 20;
         var tile_element;
         // Index of first tile that overlaps visible region
         var tile_index = Math.floor( low / resolution / DENSITY );
@@ -200,12 +201,15 @@ $.extend( TiledTrack.prototype, Track.prototype, {
                 });
                 // Our responsibility to move the element to the new parent
                 parent_element.append( cached );
+                max_height = Math.max( max_height, cached.height() );
             } else {
                 tile_element = this.draw_tile( resolution, tile_index, parent_element, w_scale );
                 if ( tile_element ) {
                     this.tile_cache.set(key, tile_element);
+                    max_height = Math.max( max_height, tile_element.height() );
                 }
             }
+            this.content_div.css( "height", max_height );
             tile_index += 1;
         }
     }

static/trackster.css

@@ -1,14 +1,18 @@
+body, html {
+    height: 100%;
+}
+
 body {
     margin: 0 0;
     padding: 0;
     font-family: verdana;
     font-size: 12px;
-    overflow-y: hidden;
+    overflow: hidden;
+    background: #eeeeee;
 }
 
 #content {
     width: 100%;
-    height: 100%;
 }
 
 #center {
@@ -29,22 +33,23 @@ input {
     border-left: 1px solid green;
     border-right: 1px solid red; } /* debugging */
 #nav {
-    padding: 0.5em 0;
-    background:#cccccc;
-    background-image:url(style/panel_header_bg.png);
-    background-position:top center;
-    background-repeat:repeat-x;border-top:solid #999 1px;
+    padding: 0 0;
     color:#333;font-weight:bold;
 }
 
 #nav-controls {
     text-align: center;
+    background:#cccccc;
+    background-image:url(style/panel_header_bg.png);
+    background-position:top center;
+    background-repeat:repeat-x;
+    padding-bottom: 5px;
 }
 
 #nav-controls a {
     color: white;
     padding: 0.1em 0.4em;
-    margin: 0 0.1em;
+    margin: 0 0;
     text-decoration: none;
     background: black;
     -webkit-border-radius: 1em;
@@ -55,6 +60,7 @@ input {
     width: 100%;
     margin: 0px;
     color: white;
+    margin-top: 10px;
 }
 
 #overview-viewport {
@@ -63,8 +69,9 @@ input {
 /*    border-top: solid #666 1px;*/
 /*    border-bottom: solid #aaa 1px;*/
     background: white;
-    border: solid gray 1px;
-    margin: 5px;
+    border-top: solid gray 1px;
+    border-bottom: solid gray 1px;
+    margin: 5px 0;
 }
 #overview-box {
     position: absolute;
@@ -75,7 +82,7 @@ input {
 }
 
 #viewport {
-    overflow: hidden;
+    overflow-x: hidden;
     background-color: #fff;
 /*    overflow: scroll;*/
 /*    border-bottom: 2px solid black;*/
@@ -96,13 +103,15 @@ input {
 }
     
 .track {
-/*    border-top: solid gray 1px; */
-/*    border-bottom: solid gray 1px; */
+    /* border-top: solid #DDDDDD 1px; */
+    /* border-bottom: solid #DDDDDD 1px; */
+    background: white;
 }
 
 .track-header {
-    text-align: center;
-    padding: 2px 0;
+    text-align: left;
+    padding: 4px;
+    color: #666;
 }
 
 .track-content {
@@ -138,4 +147,5 @@ input {
 
 #nav-labeltrack {
     border-top: solid #999 1px;
+    border-bottom: solid #999 1px;
 }

templates/grid_base.mako

@@ -203,7 +203,15 @@ ${self.render_grid_table()}
                        target = $(this).attr( "target" );
                    options[ $(this).text() ] = function() {
                        if ( !confirmtext || confirm( confirmtext ) ) {
-                           do_operation_from_href(href);
+                            if ( href.indexOf( "operation" ) > -1 ) {
+                                do_operation_from_href(href);
+                            } else {
+                                var f = window;
+                                if ( target == "_parent" ) {
+                                    f = window.parent;
+                                }
+                                f.location = href;
+                            }
                        }
                    };
                });

templates/tracks/browser.mako

@@ -33,6 +33,7 @@ ${h.js( "jquery", "jquery.event.drag", "jquery.mousewheel", "trackster" )}
             } else {
                 view.zoom_out();
             }
+            e.preventDefault();
         });
         
         $(document).bind("dblclick", function( e ) {
@@ -53,20 +54,23 @@ ${h.js( "jquery", "jquery.event.drag", "jquery.mousewheel", "trackster" )}
 
         // To adjust the size of the viewport to fit the fixed-height footer
         $(window).resize( function( e ) {
-            $("#viewport").height( $(window).height() - 120 );
+            $("#content").height( $(window).height() - $("#nav-container").height() );
+            $("#viewport-container").height( $("#content").height() - $("#top-labeltrack").height() - $("#nav-labeltrack").height() );
             view.redraw();
         });
+        
+        $(window).resize();
 
         $("#viewport").bind( "dragstart", function( e ) {
             this.original_low = view.low;
             this.current_height = e.clientY;
             this.current_x = e.offsetX;
         }).bind( "drag", function( e ) {
+            var container = $(this).parent();
             var delta = e.offsetX - this.current_x;
-            var new_scroll = $(this).scrollTop() - (e.clientY - this.current_height);
-            
-            if ( new_scroll < $(this).get(0).scrollHeight - $(this).height() - 200) {
-                $(this).scrollTop(new_scroll);
+            var new_scroll = container.scrollTop() - (e.clientY - this.current_height);
+            if ( new_scroll < container.get(0).scrollHeight - container.height() ) {
+                container.scrollTop(new_scroll);
                 
             }
             this.current_height = e.clientY;
@@ -101,10 +105,13 @@ ${h.js( "jquery", "jquery.event.drag", "jquery.mousewheel", "trackster" )}
 
 <div id="content">
     <div id="top-labeltrack"></div>
-    <div id="viewport"></div>
+    <div id="viewport-container" style="overflow-x: hidden; overflow-y: auto;">
+        <div id="viewport"></div>
+    </div>
+    <div id="nav-labeltrack"></div>
 </div>
 <div id="nav-container">
-    <div id="nav-labeltrack"></div>
+    ## <div style="height: 5px; border-top: solid #ccc 1px"></div>
     <div id="nav">
         <div id="overview">
             <div id="overview-viewport">
@@ -116,9 +123,9 @@ ${h.js( "jquery", "jquery.event.drag", "jquery.mousewheel", "trackster" )}
                 <select id="chrom" name="chrom" style="width: 15em;">
                     <option value="">Loading</option>
                 </select>
-    	    <input id="low" size="12" />:<input id="high" size="12" />
+            <input id="low" size="12" />:<input id="high" size="12" />
                 ## <input type="hidden" name="dataset_ids" value="${dataset_ids}" />
-    	    <input type="hidden" name="id" value="${id}" />
+            <input type="hidden" name="id" value="${id}" />
                 <a href="#" onclick="javascript:view.zoom_in();view.redraw();">+</a>
                 <a href="#" onclick="javascript:view.zoom_out();view.redraw();">-</a>
             </form>