mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Trackster: show 'Add Datasets' button when there are no tracks in a visualization. Refactor and modularize add tracks code so that is can be used in multiple places.
This commit is contained in:
Jeremy Goecks
@@ -54,3 +54,5 @@ input{font:10px verdana;}
|
||||
.icon{display:inline-block;width:16px;height:16px;}
|
||||
.icon.more-down{background:url('../images/fugue/arrow-transition-270-bw.png') no-repeat 0px 0px;}
|
||||
.icon.more-across{background:url('../images/fugue/arrow-transition-bw.png') no-repeat 0px 0px;}
|
||||
.intro{padding:1em;}
|
||||
.intro>.action-button{background-color:#CCC;padding:1em;}
|
||||
@@ -301,8 +301,14 @@ input {
|
||||
.icon.more-down {
|
||||
background:url('../images/fugue/arrow-transition-270-bw.png') no-repeat 0px 0px;
|
||||
}
|
||||
.icon.more-across{
|
||||
background:url('../images/fugue/arrow-transition-bw.png') no-repeat 0px 0px;
|
||||
.icon.more-across {
|
||||
background: url('../images/fugue/arrow-transition-bw.png') no-repeat 0px 0px;
|
||||
}
|
||||
.intro {
|
||||
padding: 1em;
|
||||
}
|
||||
.intro > .action-button {
|
||||
background-color: #CCC;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
+21
-10
@@ -486,8 +486,11 @@ extend( View.prototype, {
|
||||
this.top_labeltrack = $("<div/>").addClass("top-labeltrack").appendTo(this.top_container);
|
||||
// Viewport for dragging tracks in center
|
||||
this.viewport_container = $("<div/>").addClass("viewport-container").addClass("viewport-container").appendTo(this.content_div);
|
||||
// Future overlay?
|
||||
this.intro_div = $("<div/>").addClass("intro").text("Select a chrom from the dropdown below").hide();
|
||||
// Introduction div shown when there are no tracks.
|
||||
this.intro_div = $("<div/>").addClass("intro").appendTo(this.viewport_container).hide();
|
||||
var add_tracks_button = $("<div/>").text("Add Datasets to Visualization").addClass("action-button").appendTo(this.intro_div).click(function () {
|
||||
add_tracks();
|
||||
});
|
||||
// Another label track at bottom
|
||||
this.nav_labeltrack = $("<div/>").addClass("nav-labeltrack").appendTo(this.bottom_container);
|
||||
// Navigation at top
|
||||
@@ -536,7 +539,6 @@ extend( View.prototype, {
|
||||
this.chrom_select.bind("change", function() {
|
||||
view.change_chrom(view.chrom_select.val());
|
||||
});
|
||||
this.intro_div.show();
|
||||
|
||||
/*
|
||||
this.content_div.bind("mousewheel", function( e, delta ) {
|
||||
@@ -651,6 +653,16 @@ extend( View.prototype, {
|
||||
|
||||
this.reset();
|
||||
$(window).trigger("resize");
|
||||
this.update_intro_div();
|
||||
},
|
||||
/** Show or hide intro div depending on view state. */
|
||||
update_intro_div: function() {
|
||||
if (this.num_tracks === 0) {
|
||||
this.intro_div.show();
|
||||
}
|
||||
else {
|
||||
this.intro_div.hide();
|
||||
}
|
||||
},
|
||||
update_location: function(low, high) {
|
||||
this.location_span.text( commatize(low) + ' - ' + commatize(high) );
|
||||
@@ -735,12 +747,6 @@ extend( View.prototype, {
|
||||
// Switching to local chrom.
|
||||
if (chrom !== view.chrom) {
|
||||
view.chrom = chrom;
|
||||
if (!view.chrom) {
|
||||
// No chrom selected
|
||||
view.intro_div.show();
|
||||
} else {
|
||||
view.intro_div.hide();
|
||||
}
|
||||
view.chrom_select.val(view.chrom);
|
||||
view.max_high = found.len-1; // -1 because we're using 0-based indexing.
|
||||
view.reset();
|
||||
@@ -810,6 +816,7 @@ extend( View.prototype, {
|
||||
sortable( track.container_div, '.draghandle' );
|
||||
this.track_id_counter += 1;
|
||||
this.num_tracks += 1;
|
||||
this.update_intro_div();
|
||||
},
|
||||
add_label_track: function (label_track) {
|
||||
label_track.view = this;
|
||||
@@ -817,9 +824,13 @@ extend( View.prototype, {
|
||||
},
|
||||
remove_track: function(track) {
|
||||
this.has_changes = true;
|
||||
track.container_div.fadeOut('slow', function() { $(this).remove(); });
|
||||
delete this.tracks[this.tracks.indexOf(track)];
|
||||
this.num_tracks -= 1;
|
||||
var view = this;
|
||||
track.container_div.fadeOut('slow', function() {
|
||||
$(this).remove();
|
||||
view.update_intro_div();
|
||||
});
|
||||
},
|
||||
reset: function() {
|
||||
this.low = this.max_low;
|
||||
|
||||
@@ -86,6 +86,75 @@ ${h.js( "galaxy.base", "galaxy.panels", "json2", "jquery", "jstorage", "jquery.e
|
||||
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.
|
||||
*/
|
||||
var add_tracks = function() {
|
||||
$.ajax({
|
||||
url: "${h.url_for( action='list_histories' )}",
|
||||
data: { "f-dbkey": view.dbkey },
|
||||
error: function() { alert( "Grid failed" ); },
|
||||
success: function(table_html) {
|
||||
show_modal(
|
||||
"Select datasets for new tracks",
|
||||
table_html, {
|
||||
"Cancel": function() {
|
||||
hide_modal();
|
||||
},
|
||||
"Insert": function() {
|
||||
var requests = [];
|
||||
$('input[name=id]:checked,input[name=ldda_ids]:checked').each(function() {
|
||||
var data,
|
||||
id = $(this).val();
|
||||
if ($(this).attr("name") === "id") {
|
||||
data = { hda_id: id };
|
||||
} else {
|
||||
data = { ldda_id: id};
|
||||
}
|
||||
requests[requests.length] = $.ajax({
|
||||
url: "${h.url_for( action='add_track_async' )}",
|
||||
data: data,
|
||||
dataType: "json",
|
||||
});
|
||||
});
|
||||
// To preserve order, wait until there are definitions for all tracks and then add
|
||||
// them sequentially.
|
||||
$.when.apply($, requests).then(function() {
|
||||
// jQuery always returns an Array for arguments, so need to look at first element
|
||||
// to determine whether multiple requests were made and consequently how to
|
||||
// map arguments to track definitions.
|
||||
var track_defs = (arguments[0] instanceof Array ?
|
||||
$.map(arguments, function(arg) { return arg[0]; }) :
|
||||
[ arguments[0] ]
|
||||
);
|
||||
for (var i= 0; i < track_defs.length; i++) {
|
||||
add_async_success(track_defs[i]);
|
||||
}
|
||||
});
|
||||
hide_modal();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
$(function() {
|
||||
// Hide bookmarks by default right now.
|
||||
parent.force_right_panel("hide");
|
||||
@@ -170,19 +239,7 @@ ${h.js( "galaxy.base", "galaxy.panels", "json2", "jquery", "jstorage", "jquery.e
|
||||
return "There are unsaved changes to your visualization which will be lost.";
|
||||
}
|
||||
};
|
||||
|
||||
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();
|
||||
};
|
||||
|
||||
|
||||
%if add_dataset is not None:
|
||||
$.ajax({
|
||||
url: "${h.url_for( action='add_track_async' )}",
|
||||
@@ -195,56 +252,7 @@ ${h.js( "galaxy.base", "galaxy.panels", "json2", "jquery", "jstorage", "jquery.e
|
||||
|
||||
$("#viz-options-button").css( "position", "relative" );
|
||||
make_popupmenu( $("#viz-options-button"), {
|
||||
"Add Tracks": function() {
|
||||
// Use a popup grid to add more tracks
|
||||
$.ajax({
|
||||
url: "${h.url_for( action='list_histories' )}",
|
||||
data: { "f-dbkey": view.dbkey },
|
||||
error: function() { alert( "Grid failed" ); },
|
||||
success: function(table_html) {
|
||||
show_modal(
|
||||
"Select datasets for new tracks",
|
||||
table_html, {
|
||||
"Cancel": function() {
|
||||
hide_modal();
|
||||
},
|
||||
"Insert": function() {
|
||||
var requests = [];
|
||||
$('input[name=id]:checked,input[name=ldda_ids]:checked').each(function() {
|
||||
var data,
|
||||
id = $(this).val();
|
||||
if ($(this).attr("name") === "id") {
|
||||
data = { hda_id: id };
|
||||
} else {
|
||||
data = { ldda_id: id};
|
||||
}
|
||||
requests[requests.length] = $.ajax({
|
||||
url: "${h.url_for( action='add_track_async' )}",
|
||||
data: data,
|
||||
dataType: "json",
|
||||
});
|
||||
});
|
||||
// To preserve order, wait until there are definitions for all tracks and then add
|
||||
// them sequentially.
|
||||
$.when.apply($, requests).then(function() {
|
||||
// jQuery always returns an Array for arguments, so need to look at first element
|
||||
// to determine whether multiple requests were made and consequently how to
|
||||
// map arguments to track definitions.
|
||||
var track_defs = (arguments[0] instanceof Array ?
|
||||
$.map(arguments, function(arg) { return arg[0]; }) :
|
||||
[ arguments[0] ]
|
||||
);
|
||||
for (var i= 0; i < track_defs.length; i++) {
|
||||
add_async_success(track_defs[i]);
|
||||
}
|
||||
});
|
||||
hide_modal();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
},
|
||||
"Add Tracks": add_tracks,
|
||||
"Save": function() {
|
||||
// Show saving dialog box
|
||||
show_modal("Saving...", "<img src='${h.url_for('/static/images/yui/rel_interstitial_loading.gif')}'/>");
|
||||
|
||||
Reference in New Issue
Block a user