';
+ }
+ });
+});
\ No newline at end of file
diff --git a/config/plugins/visualizations/charts/static/views/viewer.js b/config/plugins/visualizations/charts/static/client/views/viewer.js
similarity index 72%
rename from config/plugins/visualizations/charts/static/views/viewer.js
rename to config/plugins/visualizations/charts/static/client/views/viewer.js
index bbe9c757296e..fb6eb13e308d 100644
--- a/config/plugins/visualizations/charts/static/views/viewer.js
+++ b/config/plugins/visualizations/charts/static/client/views/viewer.js
@@ -8,17 +8,13 @@ define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'plugin/views/vi
this.chart = this.app.chart;
this.viewport = new Viewport( app );
this.message = new Ui.Message();
-
- // button menu
- var picture_button_menu = new Ui.ButtonMenu({
+ this.export_button = new Ui.ButtonMenu({
icon : 'fa-camera',
- title : 'Screenshot',
- tooltip : 'Download as PNG, SVG or PDF file'
+ title : 'Export',
+ tooltip : 'Export/Download Visualization'
});
-
- // add png option
- picture_button_menu.addMenu({
- id : 'button-png',
+ this.export_button.addMenu({
+ key : 'png',
title : 'Save as PNG',
icon : 'fa-file',
onclick : function() {
@@ -33,10 +29,8 @@ define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'plugin/views/vi
});
}
});
-
- // add svg option
- picture_button_menu.addMenu({
- id : 'button-svg',
+ this.export_button.addMenu({
+ key : 'svg',
title : 'Save as SVG',
icon : 'fa-file-text-o',
onclick : function() {
@@ -51,15 +45,13 @@ define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'plugin/views/vi
});
}
});
-
- // add pdf option
- picture_button_menu.addMenu({
- id : 'button-png',
+ this.export_button.addMenu({
+ key : 'pdf',
title : 'Save as PDF',
icon : 'fa-file-o',
onclick : function() {
self.app.modal.show({
- title : 'Send chart data for PDF creation',
+ title : 'Send visualization 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() },
@@ -79,8 +71,6 @@ define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'plugin/views/vi
});
}
});
-
- // create portlet
this.portlet = new Portlet.View({
icon : 'fa-bar-chart-o',
title: 'Viewport',
@@ -88,7 +78,7 @@ define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'plugin/views/vi
operations: {
edit_button: new Ui.ButtonIcon({
icon : 'fa-edit',
- tooltip : 'Customize this chart',
+ tooltip : 'Customize this Visualization',
title : 'Editor',
onclick : function() {
self._wait( self.chart, function() {
@@ -96,17 +86,22 @@ define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'plugin/views/vi
});
}
}),
- picture_button_menu: picture_button_menu
+ export_button: this.export_button,
+ save_button: new Ui.ButtonIcon({
+ icon : 'fa-save',
+ tooltip : 'Save this Visualization',
+ title : 'Save',
+ onclick : function() {
+ self.message.update( { message: 'Saving \'' + self.chart.get( 'title' ) + '\'. It will appear in the list of \'Saved Visualizations\'.', status: 'success' } );
+ self.chart.save( { error : function() { self.message.update( { message: 'Could not save visualization.', status: 'danger' } ) } } );
+ }
+ })
}
});
-
- // append elements
this.portlet.append( this.message.$el );
this.portlet.append( this.viewport.$el.addClass( 'ui-margin-top' ) );
this.setElement( this.portlet.$el );
-
- // events
- this.chart.on( 'change:title', function() { self._refreshTitle() } );
+ this.listenTo( this.chart, 'change', function() { self.render() } );
},
/** Show and refresh viewer */
@@ -121,9 +116,13 @@ define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'plugin/views/vi
},
/** Change title */
- _refreshTitle: function() {
+ render: function() {
var title = this.chart.get( 'title' );
this.portlet.title( title );
+ var exports = this.chart.definition && this.chart.definition.exports || [];
+ this.export_button.collection.each( function( model ) {
+ model.set( 'visible', exports.indexOf( model.get( 'key' ) ) !== -1 );
+ });
},
/** Check if chart is ready for export */
@@ -131,7 +130,7 @@ define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'plugin/views/vi
if ( this.app.deferred.ready() ) {
callback();
} else {
- this.message.update( { message: 'Your chart is currently being processed. Please wait and try again.' } );
+ this.message.update( { message: 'Your visualization is currently being processed. Please wait and try again.' } );
}
}
});
diff --git a/config/plugins/visualizations/charts/static/views/viewport.js b/config/plugins/visualizations/charts/static/client/views/viewport.js
similarity index 71%
rename from config/plugins/visualizations/charts/static/views/viewport.js
rename to config/plugins/visualizations/charts/static/client/views/viewport.js
index 9bf1245899a1..47359c2b6b93 100644
--- a/config/plugins/visualizations/charts/static/views/viewport.js
+++ b/config/plugins/visualizations/charts/static/client/views/viewport.js
@@ -1,6 +1,5 @@
/**
* 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.
*/
define( [ 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils' ], function( Portlet, Ui, Utils ) {
@@ -17,32 +16,15 @@ define( [ 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils' ], function( Port
this.$info = this.$( '.info' );
this.$icon = this.$( '.icon' );
this.$text = this.$( '.text' );
-
- // use full screen for viewer
this._fullscreen( this.$el, 55 );
-
- // 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' );
-
- // link redraw trigger
- var self = this;
this.chart.on( 'redraw', function() {
self.app.deferred.execute( function( process ) {
self._draw( process, self.chart );
});
});
-
- // link status handler
this.chart.on( 'set:state', function() {
- var $container = self.$el.find( '.charts-viewport-container' );
+ var $container = self.$( '.charts-viewport-container' );
var $info = self.$info;
var $icon = self.$icon;
var $text = self.$text;
@@ -86,33 +68,33 @@ define( [ 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils' ], function( Port
/** A chart may contain multiple sub charts/containers which are created here */
_createContainer: function( tag, n ) {
+ tag = tag || 'div';
n = n || 1;
- for ( var i in this.container_list ) {
- this.container_list[ i ].remove();
- }
- this.container_list = [];
- this.canvas_list = [];
+ this.$( '.charts-viewport-container' ).remove();
+ this.targets = [];
for ( var i = 0; i < n; i++ ) {
var container_id = Utils.uid();
var container_el = $( '
' ).addClass( 'charts-viewport-container' )
.width( parseInt( 100 / n ) + '%' )
- .append( $( '
' ).attr( 'id', 'menu' ) )
.append( $( '<' + tag + ' class="charts-viewport-canvas" />' ).attr( 'id', container_id ) );
this.$el.append( container_el );
- this.container_list[ i ] = container_el;
- this.canvas_list[ i ] = container_id;
+ this.targets.push( container_id );
}
},
/** Draws a new chart by loading and executing the corresponding chart wrapper */
_draw: function( process, chart ) {
var self = this;
- var n_panels = chart.settings.get( 'use_panels' ) === 'true' ? chart.groups.length : 1;
+ var n_panels = chart.settings.get( '__use_panels' ) == 'true' ? chart.groups.length : 1;
this._createContainer( chart.definition.tag, n_panels );
chart.state( 'wait', 'Please wait...' );
- require( [ 'plugin/charts/' + this.app.split( chart.get( 'type' ) ) + '/wrapper' ], function( ChartView ) {
- new ChartView( self.app, { process : process, chart : chart, canvas_list : self.canvas_list } );
+ require( [ 'repository/build/' + chart.get( 'type' ) ], function( ChartView ) {
+ new ChartView( { process: process, chart: chart, dataset: self.app.dataset, targets: self.targets } );
+ }, function( err ) {
+ chart.state( 'failed', 'Please verify that your internet connection works properly. This visualization could not be accessed in the repository. Please contact the Galaxy Team if this error persists.' );
+ console.debug( err );
+ process.resolve();
});
}
});
-});
+});
\ No newline at end of file
diff --git a/config/plugins/visualizations/charts/static/components/model.js b/config/plugins/visualizations/charts/static/components/model.js
deleted file mode 100644
index b0b782aa283f..000000000000
--- a/config/plugins/visualizations/charts/static/components/model.js
+++ /dev/null
@@ -1,39 +0,0 @@
-define( [ 'utils/utils' ], function( Utils ) {
- return Backbone.Model.extend({
- defaults : {
- id : null,
- title : '',
- type : '',
- date : null,
- state : '',
- state_info : '',
- modified : false,
- dataset_id : '',
- dataset_id_job : ''
- },
-
- initialize: function( options ) {
- this.groups = new Backbone.Collection();
- this.settings = new Backbone.Model();
- this.definition = {};
- },
-
- reset: function( options ) {
- this.set({
- 'id' : Utils.uid(),
- 'type' : 'nvd3_bar',
- 'dataset_id' : options.config.dataset_id,
- 'title' : 'New Chart'
- });
- this.settings.clear();
- this.groups.reset();
- this.groups.add( { id : Utils.uid() } );
- },
-
- 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/components/screenshot.js b/config/plugins/visualizations/charts/static/components/screenshot.js
deleted file mode 100644
index 4cf6320e0a64..000000000000
--- a/config/plugins/visualizations/charts/static/components/screenshot.js
+++ /dev/null
@@ -1,279 +0,0 @@
-/**
- * This class enables users to export/download a chart as PNG, SVG or PDF.
- */
-define(["libs/underscore"], function(_) {
- //
- // PNG export
- //
- function createPNG (options) {
- if (options.$el.find('svg').length > 0) {
- _fromSVGtoPNG (options);
- } else {
- _fromCanvas (options);
- }
- };
-
- // from jqplot
- function _fromCanvas (options) {
- try {
- var $canvas = options.$el.find('.jqplot-target');
- var imgData = $canvas.jqplotToImageStr({});
- if (imgData) {
- window.location.href = imgData.replace('image/png', 'image/octet-stream');
- }
- } catch (err) {
- console.debug('FAILED - Screenshot::_fromCanvas() - ' + err);
- if (options.error) {
- options.error('Please reduce your chart to a single panel and try again.');
- }
- }
- };
-
- // from svg
- function _fromSVGtoPNG (options) {
-
- // get parameters
- var $el = options.$el;
- var screenshot_url = options.url;
- var name = options.name;
-
- // serialize svg
- var serializer = new XMLSerializer();
-
- // create canvas
- var canvas = document.createElement('canvas');
- var $canvas = $(canvas);
-
- // get svg dimensions
- var nsvgs = $el.find('svg').length;
- var first = $el.find('svg').first();
- var height = parseInt(first.css('height'));
- var width = parseInt(first.css('width'));
-
- // set canvas dimensions
- $canvas.attr('width', width*nsvgs);
- $canvas.attr('height', height);
-
- // check context support
- if (!canvas.getContext || !canvas.getContext('2d')) {
- alert ("Your browser doesn't support this feature, please use a modern browser");
- }
-
- // context
- var ctx = canvas.getContext('2d');
-
- // write all svgs
- var offsetX = 0;
- $el.find('svg').each(function() {
- // get svg element
- var $svg = $(this);
-
- // configure svg
- $svg.attr({
- version : '1.1',
- xmlns : 'http://www.w3.org/2000/svg',
- width : width,
- height : height
- });
-
- // create xml string
- var xmlString = serializer.serializeToString(this);
-
- // draw into canvas
- ctx.drawSvg(xmlString, offsetX, 0, width, height)
-
- // shift offset for multipanel charts
- offsetX += width;
- });
-
- // post image
- window.location.href = _canvasToImage(canvas, canvas.getContext('2d'), 'white').replace('image/png', 'image/octet-stream');
- };
-
- // create image
- function _canvasToImage(canvas, context, backgroundColor) {
- // cache height and width
- var w = canvas.width;
- var h = canvas.height;
- var data;
-
- if(backgroundColor) {
- // get the current ImageData for the canvas.
- data = context.getImageData(0, 0, w, h);
-
- // store the current globalCompositeOperation
- var compositeOperation = context.globalCompositeOperation;
-
- // set to draw behind current content
- context.globalCompositeOperation = "destination-over";
-
- // set background color
- context.fillStyle = backgroundColor;
-
- // draw background / rect on entire canvas
- context.fillRect(0,0,w,h);
- }
-
- // get the image data from the canvas
- var imageData = canvas.toDataURL("image/png");
-
- if(backgroundColor) {
- // clear the canvas
- context.clearRect (0,0,w,h);
-
- // restore it with original / cached ImageData
- context.putImageData(data, 0,0);
-
- // reset the globalCompositeOperation to what it was
- context.globalCompositeOperation = compositeOperation;
- }
-
- // return the Base64 encoded data url string
- return imageData;
- };
-
- //
- // SVG export
- //
- function createSVG (options) {
- window.location.href = 'data:none/none;base64,' + btoa(createXML(options).string);
- };
-
- // css inliner
- function _inline ($target) {
- for (var sheet_id in document.styleSheets) {
- var sheet = document.styleSheets[sheet_id];
- var rules = sheet.cssRules;
- if (rules) {
- for (var idx = 0, len = rules.length; idx < len; idx++) {
- try {
- $target.find(rules[idx].selectorText).each(function (i, elem) {
- elem.style.cssText += rules[idx].style.cssText;
- });
- } catch(err) {
- }
- }
- }
- }
- };
-
- //
- // PDF export
- //
- function createPDF (options) {
-
- // do the post
- var xml = createXML(options);
-
- // post data
- var data = {
- filename : name || 'chart',
- type : 'application/pdf',
- height : xml.height,
- width : xml.width,
- scale : 2,
- svg : xml.string
- };
-
-
- // create the form
- var $el = $('body');
- var form = $el.find('#viewport-form');
- if (form.length === 0) {
- form = $('
');if(this.name=="xaxis"||this.name=="x2axis"){this._elem.width(this._plotDimensions.width)}else{this._elem.height(this._plotDimensions.height)}this.labelOptions.axis=this.name;this._label=new this.labelRenderer(this.labelOptions);if(this._label.show){var g=this._label.draw(b,j);g.appendTo(this._elem)}var f=this._ticks;for(var e=0;e