mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
trackster: misc fixes and reorganization
This commit is contained in:
James Taylor
@@ -1,15 +1,15 @@
|
||||
define( "libs/backbone", function( backbone ) {
|
||||
define( ["libs/backbone/backbone"], function( Backbone ) {
|
||||
|
||||
var Base = function() {
|
||||
if( this.initialize ) {
|
||||
this.initialize.apply(this, arguments);
|
||||
}
|
||||
};
|
||||
Base.extend = backbone.Backbone.Model.extend;
|
||||
Base.extend = Backbone.Model.extend;
|
||||
|
||||
return {
|
||||
Base: Base,
|
||||
Backbone: backbone.Backbone
|
||||
Backbone: Backbone
|
||||
};
|
||||
|
||||
});
|
||||
+177
-125
@@ -1,4 +1,4 @@
|
||||
define( ["libs/underscore","viz/trackster/slotting", "viz/trackster/painters","viz/trackster/tracks"], function( _, slotting, painters, tracks ) {
|
||||
define( ["base","libs/underscore","viz/trackster/slotting", "viz/trackster/painters","viz/trackster/tracks"], function( base, _, slotting, painters, tracks ) {
|
||||
|
||||
/************************************************************************
|
||||
* Functions used for creating and managing the Trackster user interface.
|
||||
@@ -6,139 +6,191 @@ define( ["libs/underscore","viz/trackster/slotting", "viz/trackster/painters","v
|
||||
|
||||
var object_from_template = tracks.object_from_template;
|
||||
|
||||
/**
|
||||
* Add bookmark.
|
||||
*/
|
||||
var add_bookmark = function(position, annotation, editable) {
|
||||
// Create HTML.
|
||||
var bookmarks_container = $("#bookmarks-container"),
|
||||
new_bookmark = $("<div/>").addClass("bookmark").appendTo(bookmarks_container);
|
||||
var TracksterUI = base.Base.extend({
|
||||
|
||||
var 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 = $("<div/>").text(annotation).appendTo(new_bookmark);
|
||||
initialize: function( baseURL ) {
|
||||
this.baseURL = baseURL;
|
||||
},
|
||||
|
||||
// If editable, enable bookmark deletion and annotation editing.
|
||||
if (editable) {
|
||||
var delete_icon_container = $("<div/>").addClass("delete-icon-container").prependTo(new_bookmark).click(function (){
|
||||
// Remove bookmark.
|
||||
new_bookmark.slideUp("fast");
|
||||
new_bookmark.remove();
|
||||
view.has_changes = true;
|
||||
/**
|
||||
* Use a popup to select a dataset of create bookmarks from
|
||||
*/
|
||||
add_bookmarks: function() {
|
||||
var baseURL = this.baseURL;
|
||||
show_modal( "Select dataset for new bookmarks", "progress" );
|
||||
$.ajax({
|
||||
url: this.baseURL + "/visualization/list_histories",
|
||||
data: { "f-dbkey": view.dbkey },
|
||||
error: function() { alert( "Grid failed" ); },
|
||||
success: function(table_html) {
|
||||
show_modal(
|
||||
"Select dataset for new bookmarks",
|
||||
table_html, {
|
||||
"Cancel": function() {
|
||||
hide_modal();
|
||||
},
|
||||
"Insert": function() {
|
||||
// Just use the first selected
|
||||
$('input[name=id]:checked,input[name=ldda_ids]:checked').first().each(function(){
|
||||
var data, id = $(this).val();
|
||||
if ($(this).attr("name") === "id") {
|
||||
data = { hda_id: id };
|
||||
} else {
|
||||
data = { ldda_id: id};
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: this.baseURL + "/visualization/bookmarks_from_dataset",
|
||||
data: data,
|
||||
dataType: "json",
|
||||
}).then( function(data) {
|
||||
for( i = 0; i < data.data.length; i++ ) {
|
||||
var row = data.data[i];
|
||||
add_bookmark( row[0], row[1] );
|
||||
}
|
||||
});
|
||||
});
|
||||
hide_modal();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Add bookmark.
|
||||
*/
|
||||
add_bookmark: function(position, annotation, editable) {
|
||||
// Create HTML.
|
||||
var bookmarks_container = $("#bookmarks-container"),
|
||||
new_bookmark = $("<div/>").addClass("bookmark").appendTo(bookmarks_container);
|
||||
|
||||
var 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;
|
||||
}),
|
||||
delete_icon = $("<a href=''/>").addClass("icon-button delete").appendTo(delete_icon_container);
|
||||
annotation_div.make_text_editable({
|
||||
num_rows: 3,
|
||||
use_textarea: true,
|
||||
help_text: "Edit bookmark note"
|
||||
}).addClass("annotation");
|
||||
annotation_div = $("<div/>").text(annotation).appendTo(new_bookmark);
|
||||
|
||||
// If editable, enable bookmark deletion and annotation editing.
|
||||
if (editable) {
|
||||
var delete_icon_container = $("<div/>").addClass("delete-icon-container").prependTo(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);
|
||||
annotation_div.make_text_editable({
|
||||
num_rows: 3,
|
||||
use_textarea: true,
|
||||
help_text: "Edit bookmark note"
|
||||
}).addClass("annotation");
|
||||
}
|
||||
|
||||
view.has_changes = true;
|
||||
return new_bookmark;
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a complete Trackster visualization. Returns view.
|
||||
*/
|
||||
create_visualization: function(view_config, viewport_config, drawables_config, bookmarks_config, editable) {
|
||||
|
||||
// Create view.
|
||||
view = new tracks.View(view_config);
|
||||
view.editor = true;
|
||||
$.when( view.load_chroms_deferred ).then(function() {
|
||||
// Viewport config.
|
||||
if (viewport_config) {
|
||||
var
|
||||
chrom = viewport_config.chrom,
|
||||
start = viewport_config.start,
|
||||
end = viewport_config.end,
|
||||
overview_drawable_name = viewport_config.overview;
|
||||
|
||||
if (chrom && (start !== undefined) && end) {
|
||||
view.change_chrom(chrom, start, end);
|
||||
}
|
||||
}
|
||||
|
||||
// Add drawables to view.
|
||||
if (drawables_config) {
|
||||
// FIXME: can from_dict() be used to create view and add drawables?
|
||||
var drawable_config,
|
||||
drawable_type,
|
||||
drawable;
|
||||
for (var i = 0; i < drawables_config.length; i++) {
|
||||
view.add_drawable( object_from_template( drawables_config[i], view, view ) );
|
||||
}
|
||||
}
|
||||
|
||||
// Need to update intro div after drawables have been added.
|
||||
view.update_intro_div();
|
||||
|
||||
// Set overview.
|
||||
var overview_drawable;
|
||||
for (var i = 0; i < view.drawables.length; i++) {
|
||||
if (view.drawables[i].name === overview_drawable_name) {
|
||||
view.set_overview(view.drawables[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Load bookmarks.
|
||||
if (bookmarks_config) {
|
||||
var bookmark;
|
||||
for (var i = 0; i < bookmarks_config.length; i++) {
|
||||
bookmark = bookmarks_config[i];
|
||||
add_bookmark(bookmark['position'], bookmark['annotation'], editable);
|
||||
}
|
||||
}
|
||||
|
||||
// View has no changes as of yet.
|
||||
view.has_changes = false;
|
||||
});
|
||||
|
||||
return view;
|
||||
},
|
||||
|
||||
/**
|
||||
* Set up keyboard navigation for a visualization.
|
||||
*/
|
||||
init_keyboard_nav: function(view) {
|
||||
// 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.scrollTop( view.viewport_container.scrollTop() - 20);
|
||||
break;
|
||||
case 39:
|
||||
view.move_fraction(-0.25);
|
||||
break;
|
||||
case 40:
|
||||
var change = Math.round(view.viewport_container.height()/15.0);
|
||||
view.viewport_container.scrollTop( view.viewport_container.scrollTop() + 20);
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
view.has_changes = true;
|
||||
return new_bookmark;
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a complete Trackster visualization. Returns view.
|
||||
*/
|
||||
var create_visualization = function(view_config, viewport_config, drawables_config, bookmarks_config, editable) {
|
||||
|
||||
// Create view.
|
||||
view = new tracks.View(view_config);
|
||||
view.editor = true;
|
||||
$.when( view.load_chroms_deferred ).then(function() {
|
||||
// Viewport config.
|
||||
if (viewport_config) {
|
||||
var
|
||||
chrom = viewport_config.chrom,
|
||||
start = viewport_config.start,
|
||||
end = viewport_config.end,
|
||||
overview_drawable_name = viewport_config.overview;
|
||||
|
||||
if (chrom && (start !== undefined) && end) {
|
||||
view.change_chrom(chrom, start, end);
|
||||
}
|
||||
}
|
||||
|
||||
// Add drawables to view.
|
||||
if (drawables_config) {
|
||||
// FIXME: can from_dict() be used to create view and add drawables?
|
||||
var drawable_config,
|
||||
drawable_type,
|
||||
drawable;
|
||||
for (var i = 0; i < drawables_config.length; i++) {
|
||||
view.add_drawable( object_from_template( drawables_config[i], view, view ) );
|
||||
}
|
||||
}
|
||||
|
||||
// Need to update intro div after drawables have been added.
|
||||
view.update_intro_div();
|
||||
|
||||
// Set overview.
|
||||
var overview_drawable;
|
||||
for (var i = 0; i < view.drawables.length; i++) {
|
||||
if (view.drawables[i].name === overview_drawable_name) {
|
||||
view.set_overview(view.drawables[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Load bookmarks.
|
||||
if (bookmarks_config) {
|
||||
var bookmark;
|
||||
for (var i = 0; i < bookmarks_config.length; i++) {
|
||||
bookmark = bookmarks_config[i];
|
||||
add_bookmark(bookmark['position'], bookmark['annotation'], editable);
|
||||
}
|
||||
}
|
||||
|
||||
// View has no changes as of yet.
|
||||
view.has_changes = false;
|
||||
});
|
||||
|
||||
return view;
|
||||
};
|
||||
|
||||
/**
|
||||
* Set up keyboard navigation for a visualization.
|
||||
*/
|
||||
var init_keyboard_nav = function(view) {
|
||||
// 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.scrollTop( view.viewport_container.scrollTop() - 20);
|
||||
break;
|
||||
case 39:
|
||||
view.move_fraction(-0.25);
|
||||
break;
|
||||
case 40:
|
||||
var change = Math.round(view.viewport_container.height()/15.0);
|
||||
view.viewport_container.scrollTop( view.viewport_container.scrollTop() + 20);
|
||||
break;
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
add_bookmark: add_bookmark,
|
||||
object_from_template: object_from_template,
|
||||
create_visualization: create_visualization,
|
||||
init_keyboard_nav: init_keyboard_nav
|
||||
TracksterUI: TracksterUI
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
@@ -31,12 +31,11 @@ ${h.js( "libs/jquery/jquery.autocomplete" )}
|
||||
require.config({
|
||||
baseUrl: "${h.url_for('/static/scripts') }",
|
||||
shim: {
|
||||
"libs/underscore": { exports: "_" }
|
||||
"libs/underscore": { exports: "_" },
|
||||
"libs/backbone/backbone": { exports: "Backbone" }
|
||||
}
|
||||
});
|
||||
require( ["viz/trackster_ui","viz/trackster/util","viz/trackster/tracks"], function( trackster_ui, util, tracks ) {
|
||||
|
||||
var add_bookmark = trackster_ui.add_bookmark
|
||||
require( ["base", "viz/trackster_ui","viz/trackster/util","viz/trackster/tracks"], function( base, trackster_ui, util, tracks ) {
|
||||
|
||||
//
|
||||
// Place URLs here so that url_for can be used to generate them.
|
||||
@@ -48,8 +47,9 @@ ${h.js( "libs/jquery/jquery.autocomplete" )}
|
||||
${render_trackster_js_vars()}
|
||||
|
||||
var view,
|
||||
browser_router;
|
||||
|
||||
browser_router,
|
||||
ui = new (trackster_ui.TracksterUI)( "${h.url_for('/')}" );
|
||||
|
||||
/**
|
||||
* Set up router.
|
||||
*/
|
||||
@@ -58,51 +58,7 @@ ${h.js( "libs/jquery/jquery.autocomplete" )}
|
||||
Backbone.history.start();
|
||||
};
|
||||
|
||||
/**
|
||||
* Use a popup grid to bookmarks from a dataset.
|
||||
*/
|
||||
var add_bookmarks = function() {
|
||||
show_modal( "Select dataset for new bookmarks", "progress" );
|
||||
$.ajax({
|
||||
url: "${h.url_for( controller='visualization', action='list_histories' )}",
|
||||
data: { "f-dbkey": view.dbkey },
|
||||
error: function() { alert( "Grid failed" ); },
|
||||
success: function(table_html) {
|
||||
show_modal(
|
||||
"Select dataset for new bookmarks",
|
||||
table_html, {
|
||||
"Cancel": function() {
|
||||
hide_modal();
|
||||
},
|
||||
"Insert": function() {
|
||||
// Just use the first selected
|
||||
$('input[name=id]:checked,input[name=ldda_ids]:checked').first().each(function(){
|
||||
var data, id = $(this).val();
|
||||
if ($(this).attr("name") === "id") {
|
||||
data = { hda_id: id };
|
||||
} else {
|
||||
data = { ldda_id: id};
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: "${h.url_for( action='bookmarks_from_dataset' )}",
|
||||
data: data,
|
||||
dataType: "json",
|
||||
}).then( function(data) {
|
||||
for( i = 0; i < data.data.length; i++ ) {
|
||||
var row = data.data[i];
|
||||
add_bookmark( row[0], row[1] );
|
||||
}
|
||||
});
|
||||
});
|
||||
hide_modal();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var browser_router;
|
||||
$(function() {
|
||||
// Create and initialize menu.
|
||||
@@ -192,7 +148,7 @@ ${h.js( "libs/jquery/jquery.autocomplete" )}
|
||||
$("#right-border").click(function() { view.resize_window(); });
|
||||
|
||||
%if config:
|
||||
view = trackster_ui.create_visualization( {
|
||||
view = ui.create_visualization( {
|
||||
container: $("#browser-container"),
|
||||
name: "${config.get('title') | h}",
|
||||
vis_id: "${config.get('vis_id')}",
|
||||
@@ -262,7 +218,7 @@ ${h.js( "libs/jquery/jquery.autocomplete" )}
|
||||
// Add new bookmark.
|
||||
var position = view.chrom + ":" + view.low + "-" + view.high,
|
||||
annotation = "Bookmark description";
|
||||
return add_bookmark(position, annotation, true);
|
||||
return ui.add_bookmark(position, annotation, true);
|
||||
});
|
||||
|
||||
// make_popupmenu( $("#bookmarks-more-button"), {
|
||||
@@ -271,7 +227,7 @@ ${h.js( "libs/jquery/jquery.autocomplete" )}
|
||||
// }
|
||||
// });
|
||||
|
||||
trackster_ui.init_keyboard_nav(view);
|
||||
ui.init_keyboard_nav(view);
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user