[galaxy-commits] commit/galaxy-central: jgoecks: Trackster: create a set of shared functions for managing the user interface and use functions in both visualization editor and display.

25 Aug 2011

1 new changeset in galaxy-central:

http://bitbucket.org/galaxy/galaxy-central/changeset/cf761c5af7b3/
changeset:   cf761c5af7b3
user:        jgoecks
date:        2011-08-25 17:28:01
summary:     Trackster: create a set of shared functions for managing the user interface and use functions in both visualization editor and display.
affected #:  4 files (6.2 KB)

--- a/static/scripts/trackster.js	Thu Aug 25 10:37:18 2011 -0400
+++ b/static/scripts/trackster.js	Thu Aug 25 11:28:01 2011 -0400
@@ -464,7 +464,7 @@
 /**
  * View object manages complete viz view, including tracks and user interactions.
  */
-var View = function( container, title, vis_id, dbkey, callback ) {
+var View = function(container, title, vis_id, dbkey, callback) {
     this.container = container;
     this.chrom = null;
     this.vis_id = vis_id;
@@ -826,6 +826,7 @@
         sortable( track.container_div, '.draghandle' );
         this.track_id_counter += 1;
         this.num_tracks += 1;
+        this.has_changes = true;
         this.update_intro_div();
     },
     add_label_track: function (label_track) {
@@ -993,9 +994,9 @@
                 view.overview_track.set_is_overview(false);
             }
             view.overview_track = track;
-            view.has_changes = true;
             track.set_is_overview(true);
         });
+        view.has_changes = true;
     },
     /** Close and reset overview. */
     reset_overview: function() {


--- a/templates/tracks/browser.mako	Thu Aug 25 10:37:18 2011 -0400
+++ b/templates/tracks/browser.mako	Thu Aug 25 11:28:01 2011 -0400
@@ -42,7 +42,7 @@
   <script type='text/javascript' src="${h.url_for('/static/scripts/excanvas.js')}"></script><![endif]-->
 
-${h.js( "galaxy.base", "galaxy.panels", "json2", "jquery", "jstorage", "jquery.event.drag", "jquery.mousewheel", "jquery.autocomplete", "trackster", "jquery.ui.sortable.slider", "jquery.scrollTo", "farbtastic" )}
+${h.js( "galaxy.base", "galaxy.panels", "json2", "jquery", "jstorage", "jquery.event.drag", "jquery.mousewheel", "jquery.autocomplete", "trackster", "trackster_ui", "jquery.ui.sortable.slider", "jquery.scrollTo", "farbtastic" )}
 
 <script type="text/javascript">
 
@@ -57,51 +57,8 @@
         chrom_url = "${h.url_for( action='chroms' )}",
         dataset_state_url = "${h.url_for( action='dataset_state' )}",
         converted_datasets_state_url = "${h.url_for( action='converted_datasets_state' )}",
-        addable_track_types = { "LineTrack": LineTrack, "FeatureTrack": FeatureTrack, "ReadTrack": ReadTrack },
         view;
-    
-    /**
-     * Add bookmark.
-     */
-    var add_bookmark = function(position, annotation) {
-        var 
-            bookmarks_container = $("#bookmarks-container"),
-            new_bookmark = $("<div/>").addClass("bookmark").appendTo(bookmarks_container),
-            delete_icon_container = $("<div/>").addClass("delete-icon-container").appendTo(new_bookmark).click(function (){
-                // Remove bookmark.
-                new_bookmark.slideUp("fast");
-                new_bookmark.remove();
-                view.has_changes = true;
-                return false;
-            }),
-            delete_icon = $("<a href=''/>").addClass("icon-button delete").appendTo(delete_icon_container),
-            position_div = $("<div/>").addClass("position").appendTo(new_bookmark),
-            position_link = $("<a href=''/>").text(position).appendTo(position_div).click(function() {
-                view.go_to(position);
-                return false;
-            });
-            annotation_div = get_editable_text_elt(annotation, true).addClass("annotation").appendTo(new_bookmark);
             
-        view.has_changes = true;
-        return new_bookmark;
-    };
-    
-    /**
-     * Use track data to add a track to a view.
-     * TODO: rename function?
-     */
-    var add_async_success = function(track_data) {
-        var td = track_data,
-            new_track = new addable_track_types[track_data.track_type]( 
-                                track_data.name, view, track_data.hda_ldda, track_data.dataset_id,
-                                track_data.prefs, track_data.filters, track_data.tool );
-        view.add_track(new_track);
-        // Should replace with live event but can't get working
-        sortable(new_track.container_div, ".draghandle");
-        view.has_changes = true;
-        $("#no-tracks").hide();
-    };
-    
     /**
      * Use a popup grid to add more tracks.
      */
@@ -144,7 +101,7 @@
                                                    [ arguments[0] ]
                                                    );
                                  for (var i= 0; i < track_defs.length; i++) {
-                                     add_async_success(track_defs[i]); 
+                                     view.add_track( track_from_dict(track_defs[i]) ); 
                                  }
                             });
                             hide_modal();
@@ -165,6 +122,7 @@
         %if config:
             var callback;
             %if 'viewport' in config:
+                // TODO: find better way to handle this code.
                 var callback = function() { 
                     view.change_chrom( '${config['viewport']['chrom']}', ${config['viewport']['start']}, ${config['viewport']['end']} );
                     // Set overview.
@@ -180,51 +138,20 @@
                         }
                     }
                     %endif
-                }
+                    view.has_changes = false;
+                };
             %endif
-            view = new View( $("#browser-container"), "${config.get('title') | h}", "${config.get('vis_id')}", "${config.get('dbkey')}", callback );
-            view.editor = true;
-            ## A little ugly and redundant, but it gets the job done moving the config from python to JS:
-            var tracks_config = JSON.parse('${ h.to_json_string( config.get('tracks') ) }');
-            var track_config, track, parent_track, parent_obj;
-            for (var i = 0; i < tracks_config.length; i++) {
-                track_config = tracks_config[i];
-                track = new addable_track_types[track_config["track_type"]](
-                                track_config['name'], 
-                                view,
-                                track_config['hda_ldda'],
-                                track_config['dataset_id'],
-                                track_config['prefs'], 
-                                track_config['filters'],
-                                track_config['tool'], 
-                                (track_config.is_child ? parent_track : undefined));
-                parent_obj = view;
-                if (track_config.is_child) {
-                    parent_obj = parent_track;
-                }
-                else {
-                    // New parent track is this track.
-                    parent_track = track;
-                }
-                parent_obj.add_track(track);
-            }
-            init();
-                        
-            // Load bookmarks.
-            var bookmarks = JSON.parse('${ h.to_json_string( config.get('bookmarks') ) }'),
-                bookmark;
-            for (var i = 0; i < bookmarks.length; i++) {
-                bookmark = bookmarks[i];
-                add_bookmark(bookmark['position'], bookmark['annotation']);
-            }
-            
-            // View has no changes as of yet.
-            view.has_changes = false;
+            view = create_visualization( $("#browser-container"), "${config.get('title') | h}", 
+                                         "${config.get('vis_id')}", "${config.get('dbkey')}", callback,
+                                         JSON.parse('${ h.to_json_string( config.get('tracks') ) }'),
+                                         JSON.parse('${ h.to_json_string( config.get('bookmarks') ) }')
+                                         );
+            init_editor();
         %else:
             var continue_fn = function() {
-                view = new View( $("#browser-container"), $("#new-title").val(), undefined, $("#new-dbkey").val() );
+                view = create_visualization( $("#browser-container"), $("#new-title").val(), undefined, $("#new-dbkey").val() );
                 view.editor = true;
-                init();
+                init_editor();
                 hide_modal();
             };
             $.ajax({
@@ -242,11 +169,10 @@
             });
         %endif
         
-        // Execute initializer for EDITOR specific javascript
-        function init() {
-            if (view.num_tracks === 0) {
-                $("#no-tracks").show();
-            }
+        /**
+         * Initialization for editor-specific functions.
+         */
+        function init_editor() {
             $("#title").text(view.title + " (" + view.dbkey + ")");
            
             window.onbeforeunload = function() {
@@ -260,13 +186,16 @@
                     url: "${h.url_for( action='add_track_async' )}",
                     data: { hda_id: "${add_dataset}" },
                     dataType: "json",
-                    success: add_async_success
+                    success: function(track_data) { view.add_track( track_from_dict(track_data) ) }
                 });
                 
             %endif
             
-            $("#viz-options-button").css( "position", "relative" );
-            make_popupmenu( $("#viz-options-button"), {
+            //
+            // Make actions menu.
+            //
+            $("#viz-actions-button").css( "position", "relative" );
+            make_popupmenu( $("#viz-actions-button"), {
                 "Add Tracks": add_tracks,
                 "Save": function() {
                     // Show saving dialog box
@@ -344,34 +273,8 @@
                     annotation = "Bookmark description";
                 return add_bookmark(position, annotation);
             });
-
-            //
-            // Keyboard navigation. Scroll ~7% of height when scrolling up/down.
-            //
-            $(document).keydown(function(e) {
-                // Do not navigate if arrow keys used in input element.
-                if ($(e.srcElement).is(':input')) {
-                    return;
-                }
-                
-                // Key codes: left == 37, up == 38, right == 39, down == 40
-                switch(e.which) {
-                    case 37:
-                        view.move_fraction(0.25);
-                        break
-                    case 38:
-                        var change = Math.round(view.viewport_container.height()/15.0);
-                        view.viewport_container.scrollTo('-=' + change + 'px');
-                        break;
-                    case 39:
-                        view.move_fraction(-0.25);
-                        break;
-                    case 40:
-                        var change = Math.round(view.viewport_container.height()/15.0);
-                        view.viewport_container.scrollTo('+=' + change + 'px');
-                        break;
-                }
-            });
+            
+            init_keyboard_nav(view);
         };
         
     });
@@ -384,7 +287,7 @@
     <div class="unified-panel-header-inner"><div style="float:left;" id="title"></div><div style="float: right">
-            <a id="viz-options-button" class='panel-header-button popup' href="javascript:void(0)" target="galaxy_main">${_('Options')}</a>
+            <a id="viz-actions-button" class='panel-header-button popup' href="javascript:void(0)" target="galaxy_main">${_('Actions')}</a></div></div></div>


--- a/templates/visualization/display.mako	Thu Aug 25 10:37:18 2011 -0400
+++ b/templates/visualization/display.mako	Thu Aug 25 11:28:01 2011 -0400
@@ -8,7 +8,7 @@
       <script type='text/javascript' src="${h.url_for('/static/scripts/excanvas.js')}"></script><![endif]-->
     
-    ${h.js( "jquery.event.drag", "jquery.autocomplete", "jquery.mousewheel", "jquery.autocomplete", "trackster", "jquery.ui.sortable.slider", "jquery.scrollTo", "farbtastic" )}
+    ${h.js( "jquery.event.drag", "jquery.autocomplete", "jquery.mousewheel", "jquery.autocomplete", "trackster", "trackster_ui", "jquery.ui.sortable.slider", "jquery.scrollTo", "farbtastic" )}
 </%def><%def name="stylesheets()">
@@ -86,64 +86,19 @@
                 $("#right-border").click(function() { view.resize_window(); });
             }
             
-            // Create view and add tracks.
+            // Create visualization.
             var callback;
             %if 'viewport' in config:
                 var callback = function() { view.change_chrom( '${config['viewport']['chrom']}', ${config['viewport']['start']}, ${config['viewport']['end']} ); }
             %endif
-            view = new View(container_element, "${config.get('title') | h}", "${config.get('vis_id')}", "${config.get('dbkey')}", callback);
-            ## A little ugly and redundant, but it gets the job done moving the config from python to JS:
-            var tracks_config = JSON.parse('${ h.to_json_string( config.get('tracks') ) }');
-            var track_config, track, parent_track, parent_obj;
-            for (var i = 0; i < tracks_config.length; i++) {
-                track_config = tracks_config[i];
-                track = new addable_track_types[track_config["track_type"]](
-                                track_config['name'], 
-                                view,
-                                track_config['hda_ldda'],
-                                track_config['dataset_id'],
-                                track_config['prefs'], 
-                                track_config['filters'],
-                                track_config['tool'], 
-                                (track_config.is_child ? parent_track : undefined));
-                parent_obj = view;
-                if (track_config.is_child) {
-                    parent_obj = parent_track;
-                }
-                else {
-                    // New parent track is this track.
-                    parent_track = track;
-                }
-                parent_obj.add_track(track);
-            }
+            view = create_visualization( container_element, "${config.get('title') | h}", 
+                                         "${config.get('vis_id')}", "${config.get('dbkey')}", callback,
+                                         JSON.parse('${ h.to_json_string( config.get('tracks') ) }'),
+                                         JSON.parse('${ h.to_json_string( config.get('bookmarks') ) }')
+                                         );
             
-            //
-            // Keyboard navigation. Scroll ~7% of height when scrolling up/down.
-            //
-            $(document).keydown(function(e) {
-                // Do not navigate if arrow keys used in input element.
-                if ($(e.srcElement).is(':input')) {
-                    return;
-                }
-                
-                // Key codes: left == 37, up == 38, right == 39, down == 40
-                switch(e.which) {
-                    case 37:
-                        view.move_fraction(0.25);
-                        break
-                    case 38:
-                        var change = Math.round(view.viewport_container.height()/15.0);
-                        view.viewport_container.scrollTo('-=' + change + 'px');
-                        break;
-                    case 39:
-                        view.move_fraction(-0.25);
-                        break;
-                    case 40:
-                        var change = Math.round(view.viewport_container.height()/15.0);
-                        view.viewport_container.scrollTo('+=' + change + 'px');
-                        break;
-                }
-            });
+            // Set up keyboard navigation.
+            init_keyboard_nav(view);
         });
 
     </script>

Repository URL: https://bitbucket.org/galaxy/galaxy-central/

--

This is a commit notification from bitbucket.org. You are receiving
this because you have the service enabled, addressing the recipient of
this email.

    

[galaxy-commits] commit/galaxy-central: jgoecks: Trackster: create a set of shared functions for managing the user interface and use functions in both visualization editor and display.

Bitbucket