Skip to content

Commit

Permalink
Add export options and message view
Browse files Browse the repository at this point in the history
  • Loading branch information
@guerler
guerler committed Feb 11, 2018
1 parent c30a380 commit 77813a7
Show file tree
Hide file tree
Showing 5 changed files with 90 additions and 272 deletions.
46 changes: 7 additions & 39 deletions client/galaxy/scripts/mvc/visualization/chart/chart-client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import Modal from "mvc/ui/ui-modal";
import Ui from "mvc/ui/ui-misc";
import Chart from "mvc/visualization/chart/components/model";
import Editor from "mvc/visualization/chart/views/editor";
import Viewer from "mvc/visualization/chart/views/viewport";
import Viewer from "mvc/visualization/chart/views/viewer";
import Menu from "mvc/visualization/chart/views/menu";

export default Backbone.View.extend({
initialize: function(options) {
Expand All @@ -20,48 +21,15 @@ export default Backbone.View.extend({
this.chart.plugin = options.visualization_plugin;
this.chart.plugin.specs = this.chart.plugin.specs || {};
this.chart_load = options.chart_load;
this.message = new Ui.Message();
this.deferred = new Deferred();
this.viewer = new Viewer(this);
this.editor = new Editor(this);
this.buttons =[{
icon: "fa-angle-double-left",
tooltip: "Show",
cls: "ui-button-icon charts-fullscreen-button",
onclick: () => {
this.$el.removeClass("charts-fullscreen");
window.dispatchEvent(new Event("resize"));
}
},{
icon: "fa-angle-double-right",
tooltip: "Hide",
onclick: () => {
this.$el.addClass("charts-fullscreen");
window.dispatchEvent(new Event("resize"));
}
},{
icon: "fa-line-chart",
tooltip: "Visualize",
onclick: () => {
this.chart.set({
date: Utils.time()
});
this.chart.trigger("redraw");
}
},{
icon: "fa-save",
tooltip: "Save",
onclick: () => {
this.chart.set({
date: Utils.time()
});
this.chart.trigger("redraw");
}
}];
for(let b of this.buttons) {
this.$buttons.append((new Ui.ButtonIcon(b)).$el);
}
this.menu = new Menu(this);
this.$center.append(this.viewer.$el);
this.$right.append(this.editor.$el);
this.$right.append(this.message.$el)
.append(this.editor.$el);
this.$buttons.append(this.menu.$el);
$.ajax({
url: `${Galaxy.root}api/datasets/${options.dataset_id}`
}).done(dataset => {
Expand Down
215 changes: 73 additions & 142 deletions client/galaxy/scripts/mvc/visualization/chart/views/viewer.js
View file
Original file line number Diff line number Diff line change
@@ -1,159 +1,90 @@
/** This class renders the chart viewer which encapsulates the chart viewport. */
import Portlet from "mvc/ui/ui-portlet";
import Ui from "mvc/ui/ui-misc";
import Viewport from "mvc/visualization/chart/views/viewport";
import Screenshot from "mvc/visualization/chart/components/screenshot";
/**
* The viewer creates and manages the dom elements used by the visualization plugins to draw the chart.
* This is the last class of the charts core classes before handing control over to the visualization plugins.
*/
import Utils from "utils/utils";

export default Backbone.View.extend({
initialize: function(app, options) {
var self = this;
this.app = app;
this.chart = this.app.chart;
this.viewport = new Viewport(app);
this.message = new Ui.Message();
this.export_button = new Ui.ButtonMenu({
icon: "fa-camera",
title: "Export",
tooltip: "Export/Download Visualization"
});
this.export_button.addMenu({
key: "png",
title: "Save as PNG",
icon: "fa-file",
onclick: function() {
self._wait(self.chart, function() {
Screenshot.createPNG({
$el: self.viewport.$el,
title: self.chart.get("title"),
error: function(err) {
self.message.update({ message: err, status: "danger" });
}
});
});
}
});
this.export_button.addMenu({
key: "svg",
title: "Save as SVG",
icon: "fa-file-text-o",
onclick: function() {
self._wait(self.chart, function() {
Screenshot.createSVG({
$el: self.viewport.$el,
title: self.chart.get("title"),
error: function(err) {
self.message.update({ message: err, status: "danger" });
}
});
});
}
});
this.export_button.addMenu({
key: "pdf",
title: "Save as PDF",
icon: "fa-file-o",
onclick: function() {
self.app.modal.show({
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();
},
Continue: function() {
self.app.modal.hide();
self._wait(self.chart, function() {
Screenshot.createPDF({
$el: self.viewport.$el,
title: self.chart.get("title"),
error: function(err) {
self.message.update({ message: err, status: "danger" });
}
});
});
}
}
});
}
this.options = options;
this.setElement(
$("<div/>")
.addClass("charts-viewport")
.append(
$("<div/>")
.addClass("info")
.append($("<span/>").addClass("icon"))
.append($("<span/>").addClass("text"))
)
);
this.$info = this.$(".info");
this.$icon = this.$(".icon");
this.$text = this.$(".text");
this._fullscreen(this.$el, 20);
this._createContainer("div");
this.chart.on("redraw", function() {
self.app.deferred.execute(function(process) {
self._draw(process, self.chart);
});
});
this.portlet = new Portlet.View({
icon: "fa-bar-chart-o",
title: "Viewport",
cls: "ui-portlet charts-viewer",
operations: {
edit_button: new Ui.ButtonIcon({
icon: "fa-edit",
tooltip: "Customize this Visualization",
title: "Edit",
onclick: function() {
self._wait(self.chart, function() {
self.app.go("editor");
});
}
}),
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"
});
}
});
}
})
this.chart.on("set:state", function() {
var $container = self.$(".charts-viewport-container");
var $info = self.$info;
var $icon = self.$icon;
var $text = self.$text;
$icon.removeClass();
$info.show();
$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();
}
});
this.portlet.append(this.message.$el);
this.portlet.append(this.viewport.$el.addClass("ui-margin-top"));
this.setElement(this.portlet.$el);
this.listenTo(this.chart, "change", function() {
self.render();
});
},

/** Show and refresh viewer */
show: function() {
this.$el.show();
$(window).trigger("resize");
},

/** Hide viewer */
hide: function() {
this.$el.hide();
},

/** Change title */
render: function() {
var title = this.chart.get("title");
this.portlet.title(title);
var exports = (this.chart.plugin && this.chart.plugin.exports) || [];
this.export_button.collection.each(function(model) {
model.set("visible", exports.indexOf(model.get("key")) !== -1);
/** Force resize to fullscreen */
_fullscreen: function($el, margin) {
$el.css("height", $(window).height() - margin);
$(window).resize(function() {
$el.css("height", $(window).height() - margin);
});
},

/** Check if chart is ready for export */
_wait: function(chart, callback) {
if (this.app.deferred.ready()) {
callback();
} else {
this.message.update({
message: "Your visualization is currently being processed. Please wait and try again."
});
/** A chart may contain multiple sub charts/containers which are created here */
_createContainer: function(tag, n) {
tag = tag || "div";
n = n || 1;
this.$(".charts-viewport-container").remove();
this.targets = [];
for (var i = 0; i < n; i++) {
var container_id = Utils.uid();
var container_el = $("<div/>")
.addClass("charts-viewport-container")
.width(parseInt(100 / n) + "%")
.append($("<" + tag + " class='charts-viewport-canvas' />").attr("id", container_id));
this.$el.append(container_el);
this.targets.push(container_id);
}
},

/** Draws a new chart by loading and executing the corresponding chart wrapper */
_draw: function(process, chart) {
var n_panels = chart.settings.get("__use_panels") == "true" ? chart.groups.length : 1;
this._createContainer(chart.plugin.specs.tag, n_panels);
chart.state("wait", "Please wait...");
this.app.chart_load({ process: process, chart: chart, dataset: this.app.dataset, targets: this.targets });
}
});
90 changes: 0 additions & 90 deletions client/galaxy/scripts/mvc/visualization/chart/views/viewport.js
View file

This file was deleted.

0 comments on commit 77813a7

Please sign in to comment.