/static/scripts/trackster_ui.js

  1/************************************************************************
  2 * Functions used for creating and managing the Trackster user interface.
  3 ************************************************************************/
  4
  5/**
  6 * Add bookmark.
  7 */
  8var add_bookmark = function(position, annotation) {
  9    var 
 10        bookmarks_container = $("#bookmarks-container"),
 11        new_bookmark = $("<div/>").addClass("bookmark").appendTo(bookmarks_container),
 12        delete_icon_container = $("<div/>").addClass("delete-icon-container").appendTo(new_bookmark).click(function (){
 13            // Remove bookmark.
 14            new_bookmark.slideUp("fast");
 15            new_bookmark.remove();
 16            view.has_changes = true;
 17            return false;
 18        }),
 19        delete_icon = $("<a href=''/>").addClass("icon-button delete").appendTo(delete_icon_container),
 20        position_div = $("<div/>").addClass("position").appendTo(new_bookmark),
 21        position_link = $("<a href=''/>").text(position).appendTo(position_div).click(function() {
 22            view.go_to(position);
 23            return false;
 24        });
 25        annotation_div = get_editable_text_elt(annotation, true).addClass("annotation").appendTo(new_bookmark);
 26        
 27    view.has_changes = true;
 28    return new_bookmark;
 29};
 30
 31/**
 32 * Objects that can be added to a view.
 33 */
 34var addable_objects = { "LineTrack": LineTrack, "FeatureTrack": FeatureTrack, "ReadTrack": ReadTrack, "DrawableGroup": DrawableGroup };
 35
 36/**
 37 * Decode a track from a dictionary.
 38 */
 39var track_from_dict = function(track_dict) {
 40    return new addable_objects[track_dict.track_type]( 
 41                        track_dict.name, view, track_dict.hda_ldda, track_dict.dataset_id,
 42                        track_dict.prefs, track_dict.filters, track_dict.tool);
 43};
 44
 45/**
 46 * Decode a drawable collection from a dictionary.
 47 */
 48var drawable_collection_from_dict = function(collection_dict) {
 49    var collection = new addable_objects[collection_dict.obj_type](collection_dict.name, view, collection_dict.prefs, view.viewport_container, view);
 50    for (var i = 0; i < collection_dict.drawables.length; i++) {
 51        var 
 52            drawable_dict = collection_dict.drawables[i],
 53            drawable;
 54        if (drawable_dict['track_type']) {
 55            drawable = track_from_dict(drawable_dict);
 56        }
 57        else {
 58            drawable = drawable_collection_from_dict(drawable_dict);
 59        }
 60        collection.add_drawable(drawable);
 61        // HACK: move track from view to collection's content_div. 
 62        // FIX: Tracks should be able to be be added to arbitrary containers; 
 63        // every moveable should have a container_div, and every container should have 
 64        // a content_div (though perhaps name changes are needed).
 65        collection.content_div.append(drawable.container_div);
 66    }
 67    return collection;
 68};
 69
 70/**
 71 * Decode a drawable from a dict.
 72 */
 73var drawable_from_dict = function(drawable_dict) {
 74    return (drawable_dict['track_type'] ? 
 75            track_from_dict(drawable_dict) :
 76            drawable_collection_from_dict(drawable_dict));
 77};
 78
 79/**
 80 * Create a complete Trackster visualization. Returns view.
 81 */
 82var create_visualization = function(parent_elt, title, id, dbkey, viewport_config, tracks_config, bookmarks_config) {
 83    
 84    // Create view.
 85    view = new View(parent_elt, title, id, dbkey);
 86    view.editor = true;
 87    $.when( view.load_chroms_deferred ).then(function() {
 88        // Viewport config.        
 89        var 
 90            chrom = viewport_config.chrom,
 91            start = viewport_config.start,
 92            end = viewport_config.end,
 93            overview_track_name = viewport_config.overview;
 94        
 95        if (chrom && (start !== undefined) && end) {
 96            view.change_chrom(chrom, start, end);
 97        }
 98        
 99        // Add drawables to view.
100        if (tracks_config) {
101            var track_config;
102            for (var i = 0; i < tracks_config.length; i++) {
103                track_config = tracks_config[i];
104                view.add_drawable( drawable_from_dict(track_config) );
105            }
106        }
107        
108        // Set overview.
109        var overview_track;
110        for (var i = 0; i < view.tracks.length; i++) {
111            if (view.tracks[i].name == overview_track_name) {
112                view.set_overview(view.tracks[i]);
113                break;
114            }
115        }
116        
117        // Load bookmarks.
118        if (bookmarks_config) {
119            var bookmark;
120            for (var i = 0; i < bookmarks_config.length; i++) {
121                bookmark = bookmarks_config[i];
122                add_bookmark(bookmark['position'], bookmark['annotation']);
123            }
124        }
125
126        // View has no changes as of yet.
127        view.has_changes = false;
128    });
129    
130    return view;
131};
132
133/**
134 * Set up keyboard navigation for a visualization.
135 */
136var init_keyboard_nav = function(view) {
137    // Keyboard navigation. Scroll ~7% of height when scrolling up/down.
138    $(document).keydown(function(e) {
139        // Do not navigate if arrow keys used in input element.
140        if ($(e.srcElement).is(':input')) {
141            return;
142        }
143        
144        // Key codes: left == 37, up == 38, right == 39, down == 40
145        switch(e.which) {
146            case 37:
147                view.move_fraction(0.25);
148                break
149            case 38:
150                var change = Math.round(view.viewport_container.height()/15.0);
151                view.viewport_container.scrollTo('-=' + change + 'px');
152                break;
153            case 39:
154                view.move_fraction(-0.25);
155                break;
156            case 40:
157                var change = Math.round(view.viewport_container.height()/15.0);
158                view.viewport_container.scrollTo('+=' + change + 'px');
159                break;
160        }
161    });
162};