Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow dataset attribute changes without refreshing the page #4779

Merged
merged 38 commits into from Oct 12, 2017
Merged
Show file tree
Hide file tree
Changes from 37 commits
Commits
Show all changes
38 commits
Select commit Hold shift + click to select a range
bd5f711
Separate endpoints for form building and attribute changes
guerler Oct 9, 2017
e09958f
Refactor form building endpoint
guerler Oct 9, 2017
b451c6a
Use consistent naming for input forms
guerler Oct 9, 2017
d7d8817
Use consistent input appending style, remove spaces
guerler Oct 9, 2017
101c9b4
Fix missing role handling
guerler Oct 9, 2017
14c6622
Show attribute editing without tabs
guerler Oct 9, 2017
e191991
Reconnect attributes endpoint
guerler Oct 10, 2017
6c321dc
Fix status message handling, use consistent message format
guerler Oct 10, 2017
2eeafa7
Add error handler, fix datatype retrieval
guerler Oct 10, 2017
c100667
Remove three year old comments
guerler Oct 10, 2017
4bb5813
Use one-liner for message
guerler Oct 10, 2017
7b96911
Move flush to the end of operation block
guerler Oct 10, 2017
7a6786c
Fix more operations, error handlers
guerler Oct 10, 2017
3ab4765
More error handling fixes
guerler Oct 10, 2017
6e3de30
Fix button margin, fix autodetect operation
guerler Oct 10, 2017
adc183d
Remove colons from some labels, parse response to message handler
guerler Oct 10, 2017
bb33e65
Reuse tab view, add area for info and annotation
guerler Oct 10, 2017
e45519c
Fix metadata name
guerler Oct 10, 2017
e257d0e
Augment error handling
guerler Oct 10, 2017
4b93fdf
Reduce render update to forms, do not re-render tabs
guerler Oct 10, 2017
9a7150f
Hide until data is available
guerler Oct 10, 2017
589e83e
Restore previous appearance, use operations buttons
guerler Oct 10, 2017
4b3d575
Adjust client message handler
guerler Oct 10, 2017
ce6f0a7
Encode/decode role ids, add support for permission handling
guerler Oct 10, 2017
591873a
Add readonly support for select fields, remove custom readonly form
guerler Oct 10, 2017
95200bb
Use hidden type and labels for input messages
guerler Oct 10, 2017
7435c46
Add flag to specify editable forms
guerler Oct 11, 2017
5ecb233
Remove html from error message
guerler Oct 11, 2017
e759b29
Fix datatype form enabling
guerler Oct 11, 2017
347d780
Fix former edit links and targets
guerler Oct 11, 2017
71a3158
Merge branch 'dev' into revise_dataset_attributes
guerler Oct 11, 2017
9a4c76d
Fix names, removes space from icon cls
guerler Oct 11, 2017
aea59dd
Refresh session for permissions
guerler Oct 11, 2017
a246510
Fix handling of multiple roles for dataset permissions
guerler Oct 11, 2017
990d1ae
Remove debug message, fix spacing, remove unused library
guerler Oct 11, 2017
966cc95
Avoid naming conflict
guerler Oct 11, 2017
470d1ee
Fix anonymous access to edit attributes
guerler Oct 11, 2017
90f9a50
Merge remote-tracking branch 'jmchilton/dev' into revise_dataset_attr…
jmchilton Oct 12, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
286 changes: 110 additions & 176 deletions client/galaxy/scripts/mvc/dataset/dataset-edit-attributes.js
@@ -1,251 +1,185 @@

/** Dataset edit attributes view */
define( [ 'utils/utils', 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/form/form-view' ], function( Utils, Tabs, Ui, Form ) {

/** Dataset edit attributes view */
var View = Backbone.View.extend({
initialize: function() {
this.setElement( '<div/>' );
this.model = new Backbone.Model( { 'dataset_id': Galaxy.params.dataset_id } );
this.message = new Ui.Message( { 'persistent': true } );
this.tabs = this._createTabs();
this.$el.append( $( '<h4/>' ).append( 'Edit dataset attributes' ) )
.append( this.message.$el )
.append( '<p/>' )
.append( this.tabs.$el )
.hide();
this.render();
},

// Fetch data for the selected dataset and
// build tabs for editing its attributes
/** fetch data for the selected dataset and build forms */
render: function() {
var url = Galaxy.root + 'dataset/edit',
self = this;
Utils.get({
url : url,
data : { 'dataset_id' : self.model.get( 'dataset_id' ) },
var self = this;
$.ajax({
url : Galaxy.root + 'dataset/get_edit?dataset_id=' + self.model.get( 'dataset_id' ),
success : function( response ) {
self.render_attribute_page( self, response );
!self.initial_message && self.message.update( response );
self.initial_message = true;
_.each( self.forms, function( form, key ) {
form.model.set( 'inputs', response[ key + '_inputs' ] );
form.model.set( 'hide_operations', response[ key + '_disable' ] );
form.render();
});
self.$el.show();
},
error : function( response ) {
var error_response = {
'status': 'error',
'message': 'Error occured while loading the dataset.',
'persistent': true,
'cls': 'errormessage'
};
self.display_message( error_response, self.$( '.response-message' ) );
var err_msg = response.responseJSON && response.responseJSON.err_msg;
self.message.update({
'status' : 'danger',
'message' : err_msg || 'Error occured while loading the dataset.'
});
}
});
},

/** Render all the tabs view */
render_attribute_page: function( self, response ) {
var message = {
'message' : response.message,
'status' : response.status,
'persistent' : true,
'cls' : response.status + 'message'
};
self.$el.empty().append( self._templateHeader() );
self.display_message( message, self.$( '.response-message' ) );
// Create all tabs
self.create_tabs( response, self.$( '.edit-attr' ) );
},

/** Perform AJAX post call */
call_ajax: function( self, data, tab_name ) {
var post_url = Galaxy.root + 'dataset/edit';
/** submit data to backend to update attributes */
_submit: function( operation, form ) {
var self = this;
var data = form.data.create();
data.dataset_id = this.model.get( 'dataset_id' );
data.operation = operation;
$.ajax({
type: "PUT",
url: post_url,
data: data,
success: function( response ) {
self.render_attribute_page( self, response );
self.reload_history();
type : 'PUT',
url : Galaxy.root + 'dataset/set_edit',
data : data,
success : function( response ) {
self.message.update( response );
self.render();
self._reloadHistory();
},
error : function( response ) {
var error_response = {
'status': 'error',
'message': 'Error occured while saving. Please fill all the required fields and try again.',
'persistent': true,
'cls': 'errormessage'
};
self.display_message( error_response, self.$( '.response-message' ) );
var err_msg = response.responseJSON && response.responseJSON.err_msg;
self.message.update({
'status' : 'danger',
'message' : err_msg || 'Error occured while editing the dataset attributes.'
});
}
});
},

/** Display actions messages */
display_message: function( response, $el ) {
$el.empty().html( new Ui.Message( response ).$el );
},

/** Create tabs for different attributes of dataset*/
create_tabs: function( response, $el_edit_attr ) {
var self = this;
self.tabs = new Tabs.View();
self.tabs.add({
id : 'attributes',
/** create tabs for different dataset attribute categories*/
_createTabs: function() {
this.forms = {
attribute : this._getAttribute(),
conversion : this._getConversion(),
datatype : this._getDatatype(),
permission : this._getPermission()
}
var tabs = new Tabs.View();
tabs.add({
id : 'attribute',
title : 'Attributes',
icon : 'fa fa-bars',
tooltip : 'Edit dataset attributes',
$el : self._getAttributesFormTemplate( response )
$el : this.forms.attribute.$el
});

self.tabs.add({
tabs.add({
id : 'convert',
title : 'Convert',
icon : 'fa-gear',
tooltip : 'Convert to new format',
$el : self._getConvertFormTemplate( response )
$el : this.forms.conversion.$el
});

self.tabs.add({
tabs.add({
id : 'datatype',
title : 'Datatypes',
icon : 'fa-database',
tooltip : 'Change data type',
$el : self._getChangeDataTypeFormTemplate( response )
$el : this.forms.datatype.$el
});

self.tabs.add({
tabs.add({
id : 'permissions',
title : 'Permissions',
icon : 'fa-user',
tooltip : 'Permissions',
$el : self._getPermissionsFormTemplate( response )
$el : this.forms.permission.$el
});
$el_edit_attr.append( self.tabs.$el );
self.tabs.showTab( 'attributes' );
return tabs;
},

/** Main template */
_templateHeader: function() {
return '<div class="page-container edit-attr">' +
'<div class="response-message"></div>' +
'<h3>Edit Dataset Attributes</h3>' +
'</div>';
},

/** Attributes tab template */
_getAttributesFormTemplate: function( response ) {
/** edit main attributes form */
_getAttribute: function() {
var self = this;
var form = new Form({
title : 'Edit attributes',
inputs : response.edit_attributes_inputs,
operations: {
'submit_editattr' : new Ui.ButtonIcon({
tooltip : 'Save attributes of the dataset.',
icon : 'fa-floppy-o ',
title : 'Save attributes',
onclick : function() { self._submit( self, form, response, "edit_attributes" ) }
title : 'Edit attributes',
operations : {
'submit_attributes' : new Ui.ButtonIcon({
tooltip : 'Save attributes of the dataset.',
icon : 'fa-floppy-o',
title : 'Save',
onclick : function() { self._submit( 'attributes', form ) }
}),
'submit_autocorrect' : new Ui.ButtonIcon({
tooltip : 'This will inspect the dataset and attempt to correct the values of fields if they are not accurate.',
icon : 'fa-undo ',
title : 'Auto-detect',
onclick : function() { self._submit( self, form, response, "auto-detect" ) }
'submit_autodetect' : new Ui.ButtonIcon({
tooltip : 'This will inspect the dataset and attempt to correct the values of fields if they are not accurate.',
icon : 'fa-undo',
title : 'Auto-detect',
onclick : function() { self._submit( 'autodetect', form ) }
})
}
});
return form.$el;
return form;
},

/** Convert tab template */
_getConvertFormTemplate: function( response ) {
/** datatype conversion form */
_getConversion: function() {
var self = this;
var form = new Form({
title : 'Convert to new format',
inputs : response.convert_inputs,
operations: {
'submit' : new Ui.ButtonIcon({
title : 'Convert to new format',
operations : {
'submit_conversion' : new Ui.ButtonIcon({
tooltip : 'Convert the datatype to a new format.',
title : 'Convert datatype',
icon : 'fa-exchange ',
onclick : function() { self._submit( self, form, response, "convert" ) }
icon : 'fa-exchange',
onclick : function() { self._submit( 'conversion', form ) }
})
}
});
return form.$el;
return form;
},

/** Change datatype template */
_getChangeDataTypeFormTemplate: function( response ) {
/** change datatype form */
_getDatatype: function() {
var self = this;
var form = new Form({
title : 'Change datatype',
inputs : response.convert_datatype_inputs,
operations: {
'submit' : new Ui.ButtonIcon({
title : 'Change datatype',
operations : {
'submit_datatype' : new Ui.ButtonIcon({
tooltip : 'Change the datatype to a new type.',
title : 'Change datatype',
icon : 'fa-exchange ',
onclick : function() { self._submit( self, form, response, "change" ) }
icon : 'fa-exchange',
onclick : function() { self._submit( 'datatype', form ) }
})
}
});
return form.$el;
},

/** Permissions template */
_getPermissionsFormTemplate: function( response ) {
var template = "",
self = this;
if( response.can_manage_dataset ) {
var form = new Form({
title : 'Manage dataset permissions on ' + response.display_name,
inputs : response.permission_inputs,
operations: {
'submit': new Ui.ButtonIcon({
tooltip : 'Save permissions.',
title : 'Save permissions',
icon : 'fa-floppy-o ',
onclick : function() { self._submit( self, form, response, "permissions" ) }
})
}
});
return form.$el;
}
else {
var form = new Form({
title : 'View permissions',
inputs : response.permission_inputs
});
return form.$el;
}
return form;
},

/** Submit action */
_submit: function( self, form, response, type ) {
var form_data = form.data.create();
form_data.dataset_id = response.dataset_id;
switch( type ) {
case "edit_attributes":
form_data.save = 'Save';
break;

case "auto-detect":
form_data.detect = 'Auto-detect';
break;

case "convert":
if ( form_data.target_type !== null && form_data.target_type ) {
form_data.dataset_id = response.dataset_id;
form_data.convert_data = 'Convert';
}
break;

case "change":
form_data.change = 'Save';
break;

case "permissions":
var post_data = {};
post_data.permissions = JSON.stringify( form_data );
post_data.update_roles_button = "Save";
post_data.dataset_id = response.dataset_id;
form_data = post_data;
break;
}
self.call_ajax( self, form_data );
/** dataset permissions form */
_getPermission: function() {
var self = this;
var form = new Form({
title : 'Manage dataset permissions',
operations : {
'submit_permission': new Ui.ButtonIcon({
tooltip : 'Save permissions.',
title : 'Save permissions',
icon : 'fa-floppy-o ',
onclick : function() { self._submit( 'permission', form ) }
})
}
});
return form;
},

/** Reload Galaxy's history after updating dataset's attributes */
reload_history: function() {
/** reload Galaxy's history after updating dataset's attributes */
_reloadHistory: function() {
if ( window.Galaxy ) {
window.Galaxy.currHistoryPanel.loadCurrentHistory();
}
Expand Down
4 changes: 2 additions & 2 deletions client/galaxy/scripts/mvc/dataset/dataset-li-edit.js
Expand Up @@ -307,7 +307,7 @@ var DatasetListItemEdit = _super.extend(
&& !this.model.isDeletedOrPurged() ){
var editableDbkey = $( '<a class="value">?</a>' )
.attr( 'href', this.model.urls.edit )
.attr( 'target', this.linkTarget );
.attr( 'target', 'top' );
$details.find( '.dbkey .value' ).replaceWith( editableDbkey );
}
},
Expand Down Expand Up @@ -359,7 +359,7 @@ DatasetListItemEdit.prototype.templates = (function(){
'<% if( dataset.state === "failed_metadata" ){ %>',
'<div class="failed_metadata-warning warningmessagesmall">',
_l( 'An error occurred setting the metadata for this dataset' ),
'<br /><a href="<%- dataset.urls.edit %>" target="<%- view.linkTarget %>">',
'<br /><a href="<%- dataset.urls.edit %>" target="top">',
_l( 'Set it manually or retry auto-detection' ),
'</a>',
'</div>',
Expand Down
2 changes: 1 addition & 1 deletion client/galaxy/scripts/mvc/dataset/dataset-model.js
Expand Up @@ -63,7 +63,7 @@ var DatasetAssociation = Backbone.Model
var urls = {
'purge' : 'datasets/' + id + '/purge_async',
'display' : 'datasets/' + id + '/display/?preview=True',
'edit' : 'datasets/' + id + '/edit',
'edit' : 'datasets/edit?dataset_id=' + id,
'download' : 'datasets/' + id + '/display' + this._downloadQueryParameters(),
'report_error' : 'dataset/errors?id=' + id,
'rerun' : 'tool_runner/rerun?id=' + id,
Expand Down
1 change: 1 addition & 0 deletions client/galaxy/scripts/mvc/form/form-parameters.js
Expand Up @@ -102,6 +102,7 @@ define(['utils/utils',
id : 'field-' + input_def.id,
data : data,
error_text : input_def.error_text || 'No options available',
readonly : input_def.readonly,
multiple : input_def.multiple,
optional : input_def.optional,
onchange : input_def.onchange,
Expand Down