From 930c37ffb10bf36d2e95cee34da35997cdf59d8d Mon Sep 17 00:00:00 2001 From: guerler Date: Tue, 14 Jun 2016 09:58:38 +0200 Subject: [PATCH] Style fixes --- .../visualizations/charts/static/app.js | 162 +++--- .../charts/static/library/datasets.js | 10 +- .../charts/static/library/jobs.js | 315 +++++------ .../charts/static/library/storage.js | 211 +++----- .../charts/static/models/chart.js | 106 ++-- .../charts/static/models/config.js | 19 +- .../charts/static/models/group.js | 28 +- .../charts/static/models/groups.js | 12 +- .../charts/static/views/viewer.js | 278 +++++----- .../charts/static/views/viewport.js | 509 ++++++++---------- 10 files changed, 696 insertions(+), 954 deletions(-) diff --git a/config/plugins/visualizations/charts/static/app.js b/config/plugins/visualizations/charts/static/app.js index 5b32bc96b17..cf027bafdc5 100644 --- a/config/plugins/visualizations/charts/static/app.js +++ b/config/plugins/visualizations/charts/static/app.js @@ -1,107 +1,67 @@ -// dependencies -define(['mvc/ui/ui-modal', 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils', - 'plugin/library/jobs', 'plugin/library/datasets', 'plugin/library/storage', 'utils/deferred', - 'plugin/views/viewer', 'plugin/views/editor', - 'plugin/models/config', 'plugin/models/chart', - 'plugin/charts/types'], - function( Modal, Portlet, Ui, Utils, Jobs, Datasets, Storage, Deferred, - ViewerView, EditorView, - Config, Chart, Types - ) { - /** * Main application class. */ -return Backbone.View.extend({ - // initialize - initialize: function(options){ - // deactivate all debugs outputs - //window.console.debug = function() {}; - - // link options - this.options = options; +define([ 'mvc/ui/ui-modal', 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils', + 'plugin/library/jobs', 'plugin/library/datasets', 'plugin/library/storage', 'utils/deferred', + 'plugin/views/viewer', 'plugin/views/editor', + 'plugin/models/config', 'plugin/models/chart', 'plugin/charts/types' ], + function( Modal, Portlet, Ui, Utils, Jobs, Datasets, Storage, Deferred, + ViewerView, EditorView, Config, Chart, Types ) { + return Backbone.View.extend({ + initialize: function(options){ + this.options = options; + this.modal = parent.Galaxy && parent.Galaxy.modal || new Modal.View(); - // link galaxy modal or create one - if (Galaxy && Galaxy.modal) { - this.modal = Galaxy.modal; - } else { - this.modal = new Modal.View(); - } - - // - // models - // - this.config = new Config(); - this.types = new Types(); - this.chart = new Chart(); - - // - // libraries - // - this.jobs = new Jobs(this); - this.datasets = new Datasets(this); - this.storage = new Storage(this); - this.deferred = new Deferred(); - - // - // views - // - this.viewer_view = new ViewerView(this); - this.editor_view = new EditorView(this); - - // append views - this.$el.append(this.viewer_view.$el); - this.$el.append(this.editor_view.$el); - - // pick start screen - if (!this.storage.load()) { - // show editor - this.go('editor'); - } else { - // show viewport - this.go('viewer'); - - // draw chart - var self = this; - this.deferred.execute(function() { - self.chart.trigger('redraw'); - }); - } - }, - - // loads a view and makes sure that all others are hidden - go: function(view_id) { - // hide all tooltips - $('.tooltip').hide(); - - // pick view - switch (view_id) { - case 'editor' : - this.editor_view.show(); - this.viewer_view.hide(); - break; - case 'viewer' : - this.editor_view.hide(); - this.viewer_view.show(); - break; - } - }, - - // get root path - chartPath: function(chart_type) { - // create path from id - var path = chart_type.split(/_(.+)/); - - // check path - if (path.length >= 2) { - // return path - return path[0] + '/' + path[1]; - } else { - // log status - console.debug('FAILED App:chartPath() - Invalid format: ' + chart_type); - } - return undefined; - } -}); + // models + this.config = new Config(); + this.types = new Types(); + this.chart = new Chart(); + // libraries + this.jobs = new Jobs(this); + this.datasets = new Datasets( this ); + this.storage = new Storage( this ); + this.deferred = new Deferred(); + + // views + this.viewer_view = new ViewerView( this ); + this.editor_view = new EditorView( this ); + + // append views + this.$el.append( this.viewer_view.$el ); + this.$el.append( this.editor_view.$el ); + + // pick start screen + if ( !this.storage.load() ) { + this.go( 'editor' ); + } else { + this.go( 'viewer' ); + this.chart.trigger( 'redraw' ); + } + }, + + /** Loads a view and makes sure that all others are hidden */ + go: function(view_id) { + $( '.tooltip' ).hide(); + switch ( view_id ) { + case 'editor' : + this.editor_view.show(); + this.viewer_view.hide(); + break; + case 'viewer' : + this.editor_view.hide(); + this.viewer_view.show(); + break; + } + }, + + /** Returns root path */ + chartPath: function( chart_type ) { + var path = chart_type.split( /_(.+)/ ); + if ( path.length >= 2 ) { + return path[ 0 ] + '/' + path[ 1 ]; + } + console.debug( 'FAILED app:chartPath() - Invalid format: ' + chart_type ); + } + }); }); \ No newline at end of file diff --git a/config/plugins/visualizations/charts/static/library/datasets.js b/config/plugins/visualizations/charts/static/library/datasets.js index 9b73d3b8636..9afc78e92f8 100644 --- a/config/plugins/visualizations/charts/static/library/datasets.js +++ b/config/plugins/visualizations/charts/static/library/datasets.js @@ -1,11 +1,8 @@ -// dependencies -define(['utils/utils'], function(Utils) { - /** * This class handles, formats and caches datasets. */ -return Backbone.Collection.extend( -{ +define( [ 'utils/utils' ], function( Utils ) { +return Backbone.Collection.extend({ // list of datasets list: {}, @@ -14,10 +11,7 @@ return Backbone.Collection.extend( // initialize initialize: function(app, options){ - // link app this.app = app; - - // configure options this.options = Utils.merge(options, this.optionsDefault); }, diff --git a/config/plugins/visualizations/charts/static/library/jobs.js b/config/plugins/visualizations/charts/static/library/jobs.js index a8c23b30955..89310639f0b 100644 --- a/config/plugins/visualizations/charts/static/library/jobs.js +++ b/config/plugins/visualizations/charts/static/library/jobs.js @@ -1,190 +1,153 @@ -// dependencies -define(['utils/utils'], function(Utils) { - /** * This class handles job submissions to the charts tool. */ -return Backbone.Model.extend({ - // initialize - initialize: function(app, options) { - // link app - this.app = app; +define( [ 'utils/utils' ], function( Utils ) { + return Backbone.Model.extend({ + initialize: function( app, options ) { + this.app = app; + this.options = Utils.merge( options, this.optionsDefault ); + }, - // link options - this.options = Utils.merge(options, this.optionsDefault); - }, - - // request job results - request: function(chart, settings_string, columns_string, success, error) { - // link this - var self = this; - - // set chart state - chart.state('wait', 'Requesting job results...'); - - // get dataset job id if already set - var dataset_id_job = chart.get('dataset_id_job'); - if (dataset_id_job != '') { - // wait for job completion - self._wait(chart, success, error); - } else { - // post job - self._submit(chart, settings_string, columns_string, success, error); - } - }, - - // clean - cleanup: function(chart) { - // link this - var self = this; - - // cleanup previous dataset file - var previous = chart.get('dataset_id_job'); - if (previous != '') { - Utils.request({ - type : 'PUT', - url : config.root + 'api/histories/none/contents/' + previous, - data : { deleted: true }, - success : function() { - // update galaxy history - self._refreshHdas(); - } - }); - - // reset id - chart.set('dataset_id_job', ''); - } - }, - - // create job - _submit: function(chart, settings_string, columns_string, success, error) { - // link this - var self = this; - - // backup chart details - var chart_id = chart.id; - var chart_type = chart.get('type'); - - // get chart settings - var chart_definition = chart.definition; - - // configure tool - data = { - 'tool_id' : 'charts', - 'inputs' : { - 'input' : { - 'id' : chart.get('dataset_id'), - 'src' : 'hda' - }, - 'module' : chart_definition.execute, - 'columns' : columns_string, - 'settings' : settings_string + /* Request job results */ + request: function( chart, settings_string, columns_string, success, error ) { + var self = this; + chart.state( 'wait', 'Requesting job results...' ); + var dataset_id_job = chart.get( 'dataset_id_job' ); + if (dataset_id_job != '') { + self._wait( chart, success, error ); + } else { + self._submit( chart, settings_string, columns_string, success, error ); } - } + }, - // set chart state - chart.state('wait', 'Sending job request...'); + /* Remove previous data when re-running jobs */ + cleanup: function( chart ) { + var self = this; + var previous = chart.get( 'dataset_id_job' ); + if (previous != '') { + Utils.request({ + type : 'PUT', + url : config.root + 'api/histories/none/contents/' + previous, + data : { deleted: true }, + success : function() { + self._refreshHdas(); + } + }); + chart.set( 'dataset_id_job', '' ); + } + }, - // post job - Utils.request({ - type : 'POST', - url : config.root + 'api/tools', - data : data, - success : function(response) { - if (!response.outputs || response.outputs.length == 0) { - chart.state('failed', 'Job submission failed. No response.'); + // create job + _submit: function(chart, settings_string, columns_string, success, error) { + // link this + var self = this; + + // backup chart details + var chart_id = chart.id; + var chart_type = chart.get('type'); + + // get chart settings + var chart_definition = chart.definition; + + // configure tool + data = { + 'tool_id' : 'charts', + 'inputs' : { + 'input' : { + 'id' : chart.get('dataset_id'), + 'src' : 'hda' + }, + 'module' : chart_definition.execute, + 'columns' : columns_string, + 'settings' : settings_string + } + } + + // set chart state + chart.state('wait', 'Sending job request...'); + + // post job + Utils.request({ + type : 'POST', + url : config.root + 'api/tools', + data : data, + success : function(response) { + if (!response.outputs || response.outputs.length == 0) { + chart.state('failed', 'Job submission failed. No response.'); + + // call error + error && error(); + } else { + // update galaxy history + self._refreshHdas(); + + // get dataset + var job = response.outputs[0]; + + // check dataset + chart.state('wait', 'Your job has been queued. You may close the browser window. The job will run in the background.'); + + // backup resulting dataset id + chart.set('dataset_id_job', job.id); + + // save + self.app.storage.save(); + + // wait for job completion + self._wait(chart, success, error); + } + }, + error : function(response) { + var message = ''; + if (response && response.message && response.message.data && response.message.data.input) { + message = response.message.data.input + '.'; + } + + // update state + chart.state('failed', 'This visualization requires the \'charts\' tool. Please make sure it is installed. ' + message); // call error error && error(); - } else { - // update galaxy history - self._refreshHdas(); + + } + }); + }, - // get dataset - var job = response.outputs[0]; - - // check dataset - chart.state('wait', 'Your job has been queued. You may close the browser window. The job will run in the background.'); - - // backup resulting dataset id - chart.set('dataset_id_job', job.id); - - // save - self.app.storage.save(); - - // wait for job completion - self._wait(chart, success, error); + /** Request job details */ + _wait: function( chart, success, error ) { + var self = this; + Utils.request({ + type : 'GET', + url : config.root + 'api/datasets/' + chart.get( 'dataset_id_job' ), + data : {}, + success : function( dataset ) { + var ready = false; + switch ( dataset.state ) { + case 'ok': + chart.state( 'wait', 'Job completed successfully...' ); + success && success( dataset ); + ready = true; + break; + case 'error': + chart.state( 'failed', 'Job has failed. Please check the history for details.' ); + error && error( dataset ); + ready = true; + break; + case 'running': + chart.state( 'wait', 'Your job is running. You may close the browser window. The job will continue in the background.' ); + } + if ( !ready ) { + setTimeout( function() { + self._wait( chart, success, error ); + }, self.app.config.get( 'query_timeout' ) ); + } } - }, - error : function(response) { - var message = ''; - if (response && response.message && response.message.data && response.message.data.input) { - message = response.message.data.input + '.'; - } - - // update state - chart.state('failed', 'This visualization requires the \'charts\' tool. Please make sure it is installed. ' + message); - - // call error - error && error(); - - } - }); - }, - - // request job details - _wait: function(chart, success, error) { - var self = this; - Utils.request({ - type : 'GET', - url : config.root + 'api/datasets/' + chart.get('dataset_id_job'), - data : {}, - success : function(dataset) { - // check dataset state - var ready = false; - switch (dataset.state) { - case 'ok': - // update state - chart.state('wait', 'Job completed successfully...'); - - // execute success - success && success(dataset); - - // stop loop - ready = true; - break; - case 'error': - // update state - chart.state('failed', 'Job has failed. Please check the history for details.'); - - // call error - error && error(dataset); - - // stop loop - ready = true; - break; - case 'running': - // wait - chart.state('wait', 'Your job is running. You may close the browser window. The job will continue in the background.'); - } - - // wait and try again - if (!ready) { - setTimeout(function() { - self._wait(chart, success, error); - }, self.app.config.get('query_timeout')); - } - } - }); - }, - - // refresh history panel - _refreshHdas: function() { - // update galaxy history - if (Galaxy && Galaxy.currHistoryPanel) { - Galaxy.currHistoryPanel.refreshContents(); + }); + }, + + /** Refresh history panel */ + _refreshHdas: function() { + Galaxy && Galaxy.currHistoryPanel && Galaxy.currHistoryPanel.refreshContents(); } - } -}); - + }); }); \ No newline at end of file diff --git a/config/plugins/visualizations/charts/static/library/storage.js b/config/plugins/visualizations/charts/static/library/storage.js index 6d909d8d2a0..d5cfc8bba8b 100644 --- a/config/plugins/visualizations/charts/static/library/storage.js +++ b/config/plugins/visualizations/charts/static/library/storage.js @@ -1,142 +1,83 @@ -// dependencies -define(['utils/utils', 'plugin/models/chart', 'plugin/models/group', 'mvc/visualization/visualization-model'], function(Utils, Chart, Group) { - /** * This class saves and loads a chart through the api. */ -return Backbone.Model.extend({ - // viz model - vis: null, - - // initialize - initialize: function(app) { - // link app - this.app = app; - - // link chart - this.chart = this.app.chart; - - // link options - this.options = this.app.options; - - // initialize parameters - this.id = this.options.id; - - // create visualization - this.vis = new Visualization({ - type : 'charts', - config : { - dataset_id : this.options.config.dataset_id, - chart_dict : {} - } - }); - - // add visualization id - if (this.id) { - this.vis.id = this.id; - } - - // add charts - var chart_dict = this.options.config.chart_dict; - if (chart_dict) { - this.vis.get('config').chart_dict = chart_dict; - } - }, - - // pack and save nested chart model - save: function() { - // link chart - var chart = this.app.chart; - - // reset - this.vis.get('config').chart_dict = {}; - - // set title - var title = chart.get('title'); - if (title != '') { - this.vis.set('title', title); - } - - // create chart dictionary - var chart_dict = { - attributes : chart.attributes, - settings : chart.settings.attributes, - groups : [] - }; - - // append groups - chart.groups.each(function(group) { - chart_dict.groups.push(group.attributes); - }); - - // add chart to charts array - this.vis.get('config').chart_dict = chart_dict; - - // save visualization - var self = this; - this.vis.save() - .fail(function(xhr, status, message) { - console.error(xhr, status, message); - }) - .then(function(response) { - if (response && response.id) { - self.id = response.id; + define( [ 'utils/utils', 'plugin/models/chart', 'plugin/models/group', 'mvc/visualization/visualization-model' ], + function( Utils, Chart, Group ) { + return Backbone.Model.extend({ + vis: null, + + initialize: function( app ) { + this.app = app; + this.chart = this.app.chart; + this.options = this.app.options; + this.id = this.options.id; + this.vis = new Visualization({ + id : this.id, + type : 'charts', + config : { + dataset_id : this.options.config.dataset_id, + chart_dict : {} } }); - }, - - // load nested models/collections from packed dictionary - load: function() { - // get charts array - var chart_dict = this.vis.get('config').chart_dict; - - // check - if (!chart_dict.attributes) { - return false; - } - - // get chart type - var chart_type = chart_dict.attributes['type']; - - // check chart type - if (!chart_type) { - console.debug('Storage::load() - Chart type not provided. Invalid format.'); - return false; - } - - // get chart definition - var chart_definition = this.app.types.get(chart_type); - if (!chart_definition) { - console.debug('Storage::load() - Chart type not supported. Please re-configure the chart. Resetting chart.'); - return false; - } - - // initiating chart - console.debug('Storage::load() - Loading chart type ' + chart_type + '.'); - - // parse chart definition - this.chart.definition = chart_definition; - - // main - this.chart.set(chart_dict.attributes); - - // set state - this.chart.state('ok', 'Loading saved visualization...'); - - // get settings - this.chart.settings.set(chart_dict.settings); - - // get groups - for (var j in chart_dict.groups) { - this.chart.groups.add(new Group(chart_dict.groups[j])); - } - - // reset modified flag - this.chart.set('modified', false); - - // return - return true; - } -}); + var chart_dict = this.options.config.chart_dict; + if ( chart_dict ) { + this.vis.get( 'config' ).chart_dict = chart_dict; + } + }, + /** Pack and save nested chart model */ + save: function() { + var self = this; + var chart = this.app.chart; + var chart_dict = { + attributes : chart.attributes, + settings : chart.settings.attributes, + groups : [] + }; + chart.groups.each( function( group ) { + chart_dict.groups.push( group.attributes ); + }); + this.vis.set( 'title', chart.get( 'title' ) || '' ); + this.vis.get( 'config' ).chart_dict = chart_dict; + this.vis.save().fail(function( xhr, status, message ) { + console.error( xhr, status, message ); + }) + .then( function( response ) { + if ( response && response.id ) { + self.id = response.id; + } else { + console.debug('Storage::save() - Unrecognized response. Saving may have failed.'); + } + }); + }, + + /** Load nested models/collections from packed dictionary */ + load: function() { + var chart_dict = this.vis.get( 'config' ).chart_dict; + if ( !chart_dict.attributes ) { + console.debug('Storage::load() - Chart attributes not found. Invalid format.'); + return false; + } + var chart_type = chart_dict.attributes[ 'type' ]; + if ( !chart_type ) { + console.debug('Storage::load() - Chart type not provided. Invalid format.'); + return false; + } + var chart_definition = this.app.types.get( chart_type ); + if ( !chart_definition ) { + console.debug('Storage::load() - Chart type not supported. Please re-configure the chart. Resetting chart.'); + return false; + } + this.chart.definition = chart_definition; + this.chart.set( chart_dict.attributes ); + this.chart.state( 'ok', 'Loading saved visualization...' ); + this.chart.settings.set( chart_dict.settings ); + for ( var j in chart_dict.groups ) { + this.chart.groups.add( new Group( chart_dict.groups[ j ] ) ); + } + this.chart.set( 'modified', false ); + console.debug('Storage::load() - Loading chart type ' + chart_type + '.'); + return true; + } + }); }); \ No newline at end of file diff --git a/config/plugins/visualizations/charts/static/models/chart.js b/config/plugins/visualizations/charts/static/models/chart.js index b240e450056..1c150293aa4 100644 --- a/config/plugins/visualizations/charts/static/models/chart.js +++ b/config/plugins/visualizations/charts/static/models/chart.js @@ -1,67 +1,45 @@ -// dependencies -define(['plugin/models/groups'], function(Groups) { +define( [ 'plugin/models/groups' ], function( Groups ) { + return Backbone.Model.extend({ + defaults : { + id : null, + title : '', + type : '', + date : null, + state : '', + state_info : '', + modified : false, + dataset_id : '', + dataset_id_job : '' + }, -// model -return Backbone.Model.extend({ - // defaults - defaults : { - id : null, - title : '', - type : '', - date : null, - state : '', - state_info : '', - modified : false, - dataset_id : '', - dataset_id_job : '' - }, - - // initialize - initialize: function(options) { - this.groups = new Groups(); - this.settings = new Backbone.Model(); - }, - - // reset - reset: function() { - this.clear({silent: true}).set(this.defaults); - this.groups.reset(); - this.settings.clear(); - this.trigger('reset', this); - }, - - // copy - copy: function(new_chart) { - // copy chart/groups - var current = this; - - // set attributes - current.clear({silent: true}).set(this.defaults); - current.set(new_chart.attributes); - - // set nested models/collections - current.settings = new_chart.settings.clone(); - current.groups.reset(); - new_chart.groups.each(function(group) { - current.groups.add(group.clone()); - }); - - // trigger change - current.trigger('change', current); - }, - - // set state - state: function(value, info) { - // set status - this.set('state', value); - this.set('state_info', info); - - // trigger set state - this.trigger('set:state'); - - // log status - console.debug('Chart:state() - ' + info + ' (' + value + ')'); - } -}); + initialize: function( options ) { + this.groups = new Groups(); + this.settings = new Backbone.Model(); + }, + reset: function() { + this.clear( { silent: true } ).set( this.defaults ); + this.groups.reset(); + this.settings.clear(); + this.trigger( 'reset', this ); + }, + + copy: function( new_chart ) { + var current = this; + current.clear( { silent: true } ).set( this.defaults ); + current.set( new_chart.attributes ); + current.settings = new_chart.settings.clone(); + current.groups.reset(); + new_chart.groups.each( function( group ) { + current.groups.add( group.clone() ); + }); + current.trigger( 'change', current ); + }, + + state: function( value, info ) { + this.set( { 'state': value, 'state_info', info } ); + this.trigger( 'set:state' ); + console.debug( 'Chart:state() - ' + info + ' (' + value + ')' ); + } + }); }); \ No newline at end of file diff --git a/config/plugins/visualizations/charts/static/models/config.js b/config/plugins/visualizations/charts/static/models/config.js index feea974e2e6..cd56f76f5af 100644 --- a/config/plugins/visualizations/charts/static/models/config.js +++ b/config/plugins/visualizations/charts/static/models/config.js @@ -1,13 +1,8 @@ -// dependencies -define([], function() { - -// model -return Backbone.Model.extend({ - // options - defaults : { - query_limit : 10000, - query_timeout : 100 - } -}); - +define( [], function() { + return Backbone.Model.extend({ + defaults : { + query_limit : 10000, + query_timeout : 100 + } + }); }); \ No newline at end of file diff --git a/config/plugins/visualizations/charts/static/models/group.js b/config/plugins/visualizations/charts/static/models/group.js index f6043867157..861aaf99641 100644 --- a/config/plugins/visualizations/charts/static/models/group.js +++ b/config/plugins/visualizations/charts/static/models/group.js @@ -1,19 +1,13 @@ -// dependencies -define([], function() { - -// model -return Backbone.Model.extend({ - // options - defaults : { - key : 'Data label', - date : '' - }, - - // reset - reset: function(){ - this.clear({silent: true}).set(this.defaults); - this.trigger('reset', this); - } -}); +define( [], function() { + return Backbone.Model.extend({ + defaults : { + key : 'Data label', + date : '' + }, + reset: function(){ + this.clear( { silent: true } ).set( this.defaults ); + this.trigger( 'reset', this ); + } + }); }); \ No newline at end of file diff --git a/config/plugins/visualizations/charts/static/models/groups.js b/config/plugins/visualizations/charts/static/models/groups.js index 71c3f7da97b..997fe01ede4 100644 --- a/config/plugins/visualizations/charts/static/models/groups.js +++ b/config/plugins/visualizations/charts/static/models/groups.js @@ -1,9 +1,5 @@ -// dependencies -define(['plugin/models/group'], function(Group) { - -// collection -return Backbone.Collection.extend({ - model: Group -}); - +define( [ 'plugin/models/group' ], function( Group ) { + return Backbone.Collection.extend({ + model: Group + }); }); \ No newline at end of file diff --git a/config/plugins/visualizations/charts/static/views/viewer.js b/config/plugins/visualizations/charts/static/views/viewer.js index ba7733403cd..17cba91fbcb 100644 --- a/config/plugins/visualizations/charts/static/views/viewer.js +++ b/config/plugins/visualizations/charts/static/views/viewer.js @@ -1,162 +1,140 @@ -// dependencies -define(['utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', - 'plugin/views/viewport', 'plugin/library/screenshot'], - function(Utils, Ui, Portlet, ViewportView, Screenshot) { - /** * This class renders the chart viewer which encapsulates the chart viewport. */ -return Backbone.View.extend({ - // initialize - initialize: function(app, options){ - // link app - this.app = app; - - // link chart - this.chart = this.app.chart; - - // create viewport - this.viewport_view = new ViewportView(app); - - // link this - var self = this; - - // message element - this.message = new Ui.Message(); - - // button menu - var picture_button_menu = new Ui.ButtonMenu({ - icon : 'fa-camera', - title : 'Screenshot', - tooltip : 'Download as PNG, SVG or PDF file' - }); - - // add png option - picture_button_menu.addMenu({ - id : 'button-png', - title : 'Save as PNG', - icon : 'fa-file', - onclick : function() { - self._wait (self.chart, function() { - Screenshot.createPNG({ - $el : self.viewport_view.$el, - title : self.chart.get('title'), - error : function(err) { - self.message.update({ message: err, status: 'danger' }); - } +define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', + 'plugin/views/viewport', 'plugin/library/screenshot' ], + function( Utils, Ui, Portlet, ViewportView, Screenshot ) { + return Backbone.View.extend({ + initialize: function(app, options){ + var self = this; + this.app = app; + this.chart = this.app.chart; + this.viewport_view = new ViewportView( app ); + this.message = new Ui.Message(); + + // button menu + var picture_button_menu = new Ui.ButtonMenu({ + icon : 'fa-camera', + title : 'Screenshot', + tooltip : 'Download as PNG, SVG or PDF file' + }); + + // add png option + picture_button_menu.addMenu({ + id : 'button-png', + title : 'Save as PNG', + icon : 'fa-file', + onclick : function() { + self._wait( self.chart, function() { + Screenshot.createPNG({ + $el : self.viewport_view.$el, + title : self.chart.get( 'title' ), + error : function( err ) { + self.message.update( { message: err, status: 'danger' } ); + } + }); }); - }); - } - }); - - // add png option - picture_button_menu.addMenu({ - id : 'button-svg', - title : 'Save as SVG', - icon : 'fa-file-text-o', - onclick : function() { - self._wait (self.chart, function() { - Screenshot.createSVG({ - $el : self.viewport_view.$el, - title : self.chart.get('title'), - error : function(err) { - self.message.update({ message: err, status: 'danger' }); - } + } + }); + + // add svg option + picture_button_menu.addMenu({ + id : 'button-svg', + title : 'Save as SVG', + icon : 'fa-file-text-o', + onclick : function() { + self._wait( self.chart, function() { + Screenshot.createSVG({ + $el : self.viewport_view.$el, + title : self.chart.get( 'title' ), + error : function( err ) { + self.message.update( { message: err, status: 'danger' } ); + } + }); }); - }); - } - }); - - // add png option - picture_button_menu.addMenu({ - id : 'button-png', - title : 'Save as PDF', - icon : 'fa-file-o', - onclick : function() { - self.app.modal.show({ - title : 'Send chart data for PDF creation', - body : 'Galaxy does not provide integrated PDF export scripts. You may click \'Continue\' to create the PDF by using a 3rd party service (https://export.highcharts.com).', - buttons : { - 'Cancel' : function() {self.app.modal.hide()}, - 'Continue' : function() { - self.app.modal.hide(); - self._wait (self.chart, function() { - Screenshot.createPDF({ - $el : self.viewport_view.$el, - title : self.chart.get('title'), - error : function(err) { - self.message.update({ message: err, status: 'danger' }); - } + } + }); + + // add pdf option + picture_button_menu.addMenu({ + id : 'button-png', + title : 'Save as PDF', + icon : 'fa-file-o', + onclick : function() { + self.app.modal.show({ + title : 'Send chart data for PDF creation', + body : 'Galaxy does not provide integrated PDF export scripts. You may click \'Continue\' to create the PDF by using a 3rd party service (https://export.highcharts.com).', + buttons : { + 'Cancel' : function() { self.app.modal.hide() }, + 'Continue' : function() { + self.app.modal.hide(); + self._wait( self.chart, function() { + Screenshot.createPDF({ + $el : self.viewport_view.$el, + title : self.chart.get( 'title' ), + error : function( err ) { + self.message.update( { message: err, status: 'danger' } ); + } + }); }); + } + } + }); + } + }); + + // create portlet + this.portlet = new Portlet.View({ + icon : 'fa-bar-chart-o', + title: 'Viewport', + operations: { + edit_button: new Ui.ButtonIcon({ + icon : 'fa-edit', + tooltip : 'Customize this chart', + title : 'Editor', + onclick : function() { + self._wait( self.chart, function() { + self.app.go( 'editor' ); }); } - } - }); - } - }); + }), + picture_button_menu: picture_button_menu + } + }); - // create portlet - this.portlet = new Portlet.View({ - icon : 'fa-bar-chart-o', - title: 'Viewport', - operations: { - edit_button: new Ui.ButtonIcon({ - icon : 'fa-edit', - tooltip : 'Customize this chart', - title : 'Editor', - onclick : function() { - self._wait (self.chart, function() { - self.app.go('editor'); - }); - } - }), - picture_button_menu: picture_button_menu - } - }); - - // append portlet - this.portlet.append(this.message.$el.addClass('ui-margin-top')); - this.portlet.append(this.viewport_view.$el); - - // set element - this.setElement(this.portlet.$el); - - // events - var self = this; - this.chart.on('change:title', function() { - self._refreshTitle(); - }); - }, + // append elements + this.portlet.append( this.message.$el.addClass( 'ui-margin-top' ) ); + this.portlet.append( this.viewport_view.$el ); + this.setElement( this.portlet.$el ); - // show - show: function() { - // show element - this.$el.show(); - - // trigger resize to refresh d3 element - $(window).trigger('resize'); - }, - - // hide - hide: function() { - this.$el.hide(); - }, - - // refresh title - _refreshTitle: function() { - var title = this.chart.get('title'); - this.portlet.title(title); - }, - - // wait for chart to be ready - _wait: function(chart, callback) { - // get chart - if (this.app.deferred.ready()) { - callback(); - } else { - this.message.update({message: 'Your chart is currently being processed. Please wait and try again.'}); + // events + this.chart.on( 'change:title', function() { self._refreshTitle() } ); + }, + + /** Show and refresh viewer */ + show: function() { + this.$el.show(); + $( window ).trigger( 'resize' ); + }, + + /** Hide viewer */ + hide: function() { + this.$el.hide(); + }, + + /** Change title */ + _refreshTitle: function() { + var title = this.chart.get( 'title' ); + this.portlet.title( title ); + }, + + /** Check if chart is ready for export */ + _wait: function(chart, callback) { + if ( this.app.deferred.ready() ) { + callback(); + } else { + this.message.update( { message: 'Your chart is currently being processed. Please wait and try again.' } ); + } } - } -}); - + }); }); \ No newline at end of file diff --git a/config/plugins/visualizations/charts/static/views/viewport.js b/config/plugins/visualizations/charts/static/views/viewport.js index 95a41ba97fa..767340de6eb 100644 --- a/config/plugins/visualizations/charts/static/views/viewport.js +++ b/config/plugins/visualizations/charts/static/views/viewport.js @@ -1,303 +1,246 @@ -// dependencies -define(['mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils'], - function(Portlet, Ui, Utils) { - /** * The viewport creates and manages the dom elements used by the visualization plugins to draw the chart. * Additionally, this class creates default request strings and request dictionaries parsed to the visualization plugins. * This is the last class of the charts core classes before handing control over to the visualization plugins. */ -return Backbone.View.extend({ +define([ 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils' ], + function( Portlet, Ui, Utils ) { + return Backbone.View.extend({ + // list of container/canvas elements + container_list: [], + canvas_list: [], - // list of canvas elements - container_list: [], - canvas_list: [], - - // initialize - initialize: function(app, options) { - // link app - this.app = app; - - // link chart - this.chart = this.app.chart; - - // link options - this.options = Utils.merge(options, this.optionsDefault); - - // create element - this.setElement($(this._template())); - - // use full screen for viewer - this._fullscreen(this.$el, 50); - - // prevent window scrolling - var initial_overflow = $('body').css('overflow'); - this.$el.on('mouseover', function() { - $('body').css('overflow', 'hidden'); - }).on('mouseout', function() { - $('body').css('overflow', initial_overflow); - }); - - // create container element - this._createContainer('div'); - - // events - var self = this; - this.chart.on('redraw', function() { - self.app.deferred.execute(function(process) { - self._draw(process, self.chart); + initialize: function( app, options ) { + this.app = app; + this.chart = this.app.chart; + this.options = options; + this.setElement( $( this._template() ) ); + + // use full screen for viewer + this._fullscreen( this.$el, 50 ); + + // prevent window scrolling + var initial_overflow = $( 'body' ).css( 'overflow' ); + this.$el.on( 'mouseover', function() { + $( 'body' ).css( 'overflow', 'hidden' ); + }).on('mouseout', function() { + $( 'body' ).css( 'overflow', initial_overflow ); }); - }); - - // link status handler - this.chart.on('set:state', function() { - // get info element - var $info = self.$el.find('#info'); - var $container = self.$el.find('.charts-viewport-container'); - - // get icon - var $icon = $info.find('#icon'); - - // remove icon - $icon.removeClass(); - - // show info - $info.show(); - $info.find('#text').html(self.chart.get('state_info')); - - // check status - var state = self.chart.get('state'); - switch (state) { - case 'ok': - $info.hide(); - $container.show(); - break; - case 'failed': - $icon.addClass('icon fa fa-warning'); - $container.hide(); - break; - default: - $icon.addClass('icon fa fa-spinner fa-spin'); - $container.show(); - } - }); - }, - - // show - show: function() { - this.$el.show(); - }, - - // hide - hide: function() { - this.$el.hide(); - }, - // resize to fullscreen - _fullscreen: function($el, margin) { - // fix size - $el.css('height', $(window).height() - margin); - - // catch window resize event - $(window).resize(function () { - $el.css('height', $(window).height() - margin); - }); - }, - - // creates n canvas elements - _createContainer: function(tag, n) { - // check size of requested canvas elements - n = n || 1; - - // clear previous canvas elements - for (var i in this.container_list) { - this.container_list[i].remove(); - } - - // reset lists - this.container_list = []; - this.canvas_list = []; - - // create requested canvas elements - for (var i = 0; i < n; i++) { - // create element - var container_el = $(this._templateContainer(tag, parseInt(100 / n))); - - // add to view - this.$el.append(container_el); - - // add to list - this.container_list[i] = container_el; - - // add a separate list for canvas elements - this.canvas_list[i] = container_el.find('.charts-viewport-canvas').attr('id'); - } - }, - - // add - _draw: function(process, chart) { - // link this - var self = this; - - // identify chart type - var chart_type = chart.get('type'); - - // load chart settings - this.chart_definition = chart.definition; - - // determine number of svg/div-elements to create - var n_panels = 1; - if (chart.settings.get('use_panels') === 'true') { - n_panels = chart.groups.length; - } - - // create canvas element and add to canvas list - this._createContainer(this.chart_definition.tag, n_panels); - - // set chart state - chart.state('wait', 'Please wait...'); - - // clean up data if there is any from previous jobs - if (!this.chart_definition.execute || - (this.chart_definition.execute && chart.get('modified'))) { - - // reset jobs - this.app.jobs.cleanup(chart); - - // reset modified flag - chart.set('modified', false); - } - - // create chart view - var self = this; - require(['plugin/charts/' + this.app.chartPath(chart_type) + '/wrapper'], function(ChartView) { - if (self.chart_definition.execute) { - self.app.jobs.request(chart, self._defaultSettingsString(chart), self._defaultRequestString(chart), - function() { - var view = new ChartView(self.app, { - process : process, - chart : chart, - request_dictionary : self._defaultRequestDictionary(chart), - canvas_list : self.canvas_list - }); - }, - function() { - process.reject(); - } - ); - } else { - var view = new ChartView(self.app, { - process : process, - chart : chart, - request_dictionary : self._defaultRequestDictionary(chart), - canvas_list : self.canvas_list + // create container element + this._createContainer( 'div' ); + + // link redraw trigger + var self = this; + this.chart.on( 'redraw', function() { + self.app.deferred.execute( function( process ) { + self._draw( process, self.chart ); }); - } - }); - }, + }); - // - // REQUEST STRING FUNCTIONS - // - // create default chart request - _defaultRequestString: function(chart) { - - // configure request - var request_string = ''; + // link status handler + this.chart.on( 'set:state', function() { + var $info = self.$el.find( '#info' ); + var $container = self.$el.find( '.charts-viewport-container' ); + var $icon = $info.find( '#icon' ); + var $info_text = $info.find( '#text' ); + $icon.removeClass(); + $info.show(); + $info_text.html( self.chart.get( 'state_info' ) ); + var state = self.chart.get( 'state' ); + switch ( state ) { + case 'ok': + $info.hide(); + $container.show(); + break; + case 'failed': + $icon.addClass( 'icon fa fa-warning' ); + $container.hide(); + break; + default: + $icon.addClass( 'icon fa fa-spinner fa-spin' ); + $container.show(); + } + }); + }, + + /** Show rendered chart */ + show: function() { + this.$el.show(); + }, + + /** Hide chart */ + hide: function() { + this.$el.hide(); + }, + + /** Force resize to fullscreen */ + _fullscreen: function( $el, margin ) { + $el.css( 'height', $( window ).height() - margin ); + $( window ).resize( function() { + $el.css( 'height', $( window ).height() - margin ); + }); + }, + + /** A chart may contain multiple sub charts/containers which are created here */ + _createContainer: function( tag, n ) { + n = n || 1; + for ( var i in this.container_list ) { + this.container_list[ i ].remove(); + } + this.container_list = []; + this.canvas_list = []; + for ( var i = 0; i < n; i++ ) { + var container_el = $( this._templateContainer( tag, parseInt( 100 / n ) ) ); + this.$el.append( container_el ); + this.container_list[ i ] = container_el; + this.canvas_list[ i ] = container_el.find( '.charts-viewport-canvas' ).attr( 'id' ); + } + }, + + /** Draws a new chart by loading and executing the corresponding chart wrapper */ + _draw: function( process, chart ) { + var self = this; + var chart_type = chart.get( 'type' ); + this.chart_definition = chart.definition; + var n_panels = 1; + if ( chart.settings.get( 'use_panels' ) === 'true' ) { + n_panels = chart.groups.length; + } + this._createContainer( this.chart_definition.tag, n_panels ); + chart.state( 'wait', 'Please wait...' ); + if ( !this.chart_definition.execute || ( this.chart_definition.execute && chart.get( 'modified' ) ) ) { + this.app.jobs.cleanup( chart ); + chart.set( 'modified', false ); + } + require( [ 'plugin/charts/' + this.app.chartPath( chart_type ) + '/wrapper' ], function( ChartView ) { + if ( self.chart_definition.execute ) { + self.app.jobs.request( chart, self._defaultSettingsString( chart ), self._defaultRequestString( chart ), + function() { + var view = new ChartView( self.app, { + process : process, + chart : chart, + request_dictionary : self._defaultRequestDictionary( chart ), + canvas_list : self.canvas_list + }); + }, + function() { + process.reject(); + } + ); + } else { + var view = new ChartView( self.app, { + process : process, + chart : chart, + request_dictionary : self._defaultRequestDictionary( chart ), + canvas_list : self.canvas_list + }); + } + }); + }, + + // + // REQUEST STRING FUNCTIONS + // + // create default chart request + _defaultRequestString: function(chart) { - // add groups to data request - var group_index = 0; - var self = this; - chart.groups.each(function(group) { - // increase group counter - group_index++; + // configure request + var request_string = ''; - // add selected columns to column string - for (var key in self.chart_definition.columns) { - request_string += key + '_' + group_index + ':' + (parseInt(group.get(key)) + 1) + ', '; - } - }); + // add groups to data request + var group_index = 0; + var self = this; + chart.groups.each(function(group) { + // increase group counter + group_index++; + + // add selected columns to column string + for (var key in self.chart_definition.columns) { + request_string += key + '_' + group_index + ':' + (parseInt(group.get(key)) + 1) + ', '; + } + }); + + // return + return request_string.substring(0, request_string.length - 2); + }, - // return - return request_string.substring(0, request_string.length - 2); - }, - - // create default chart request - _defaultSettingsString: function(chart) { - - // configure settings - var settings_string = ''; + // create default chart request + _defaultSettingsString: function(chart) { - // add settings to settings string - for (key in chart.settings.attributes) { - settings_string += key + ':' + chart.settings.get(key) + ', '; - }; - - // return - return settings_string.substring(0, settings_string.length - 2); - }, + // configure settings + var settings_string = ''; + + // add settings to settings string + for (key in chart.settings.attributes) { + settings_string += key + ':' + chart.settings.get(key) + ', '; + }; + + // return + return settings_string.substring(0, settings_string.length - 2); + }, - // create default chart request - _defaultRequestDictionary: function(chart) { - - // configure request - var request_dictionary = { - groups : [] - }; + // create default chart request + _defaultRequestDictionary: function(chart) { - // update request dataset id - if (this.chart_definition.execute) { - request_dictionary.id = chart.get('dataset_id_job'); - } else { - request_dictionary.id = chart.get('dataset_id'); + // configure request + var request_dictionary = { + groups : [] + }; + + // update request dataset id + if (this.chart_definition.execute) { + request_dictionary.id = chart.get('dataset_id_job'); + } else { + request_dictionary.id = chart.get('dataset_id'); + } + + // add groups to data request + var group_index = 0; + var self = this; + chart.groups.each(function(group) { + + // add columns + var columns = {}; + for (var column_key in self.chart_definition.columns) { + // get settings for column + var column_settings = self.chart_definition.columns[column_key]; + + // add to columns + columns[column_key] = Utils.merge ({ + index : group.get(column_key) + }, column_settings); + } + + // add group data + request_dictionary.groups.push({ + key : (++group_index) + ':' + group.get('key'), + columns : columns + }); + }); + + // return + return request_dictionary; + }, + + // template + _template: function() { + return '
' + + '
' + + '' + + '' + + '
' + + '
'; + }, + + // template svg/div element + _templateContainer: function(tag, width) { + return '
' + + ''; } - // add groups to data request - var group_index = 0; - var self = this; - chart.groups.each(function(group) { - - // add columns - var columns = {}; - for (var column_key in self.chart_definition.columns) { - // get settings for column - var column_settings = self.chart_definition.columns[column_key]; - - // add to columns - columns[column_key] = Utils.merge ({ - index : group.get(column_key) - }, column_settings); - } - - // add group data - request_dictionary.groups.push({ - key : (++group_index) + ':' + group.get('key'), - columns : columns - }); - }); - - // return - return request_dictionary; - }, - - // template - _template: function() { - return '
' + - '
' + - '' + - '' + - '
' + - '
'; - }, - - // template svg/div element - _templateContainer: function(tag, width) { - return '
' + - ''; - } - -}); + }); });