Add menu options

client/galaxy/scripts/mvc/visualization/chart/views/menu.js

@@ -0,0 +1,158 @@
+/** This class renders the chart menu options. */
+import Ui from "mvc/ui/ui-misc";
+import Screenshot from "mvc/visualization/chart/components/screenshot";
+import Utils from "utils/utils";
+
+export default Backbone.View.extend({
+    initialize: function(app) {
+        this.app = app;
+        this.model = new Backbone.Model({visible: true});
+        this.export_button = new Ui.ButtonMenu({
+            icon: "fa-camera",
+            tooltip: "Export"
+        });
+        this.export_button.addMenu({
+            key: "png",
+            title: "Save as PNG",
+            icon: "fa-file",
+            onclick: () => {
+                this._wait(app.chart, () => {
+                    Screenshot.createPNG({
+                        $el: app.viewer.$el,
+                        title: app.chart.get("title"),
+                        error: (err) => {
+                            app.message.update({ message: err, status: "danger" });
+                        }
+                    });
+                });
+            }
+        });
+        this.export_button.addMenu({
+            key: "svg",
+            title: "Save as SVG",
+            icon: "fa-file-text-o",
+            onclick: () => {
+                this._wait(app.chart, () => {
+                    Screenshot.createSVG({
+                        $el: app.viewer.$el,
+                        title: app.chart.get("title"),
+                        error: (err) => {
+                            app.message.update({ message: err, status: "danger" });
+                        }
+                    });
+                });
+            }
+        });
+        this.export_button.addMenu({
+            key: "pdf",
+            title: "Save as PDF",
+            icon: "fa-file-o",
+            onclick: () => {
+                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: () => {
+                            app.modal.hide();
+                        },
+                        Continue: () => {
+                            app.modal.hide();
+                            this._wait(app.chart, () => {
+                                Screenshot.createPDF({
+                                    $el: app.viewer.$el,
+                                    title: app.chart.get("title"),
+                                    error: (err) => {
+                                        app.message.update({ message: err, status: "danger" });
+                                    }
+                                });
+                            });
+                        }
+                    }
+                });
+            }
+        });
+        this.buttons =[
+            new Ui.ButtonIcon({
+                icon: "fa-angle-double-left",
+                tooltip: "Show",
+                cls: "ui-button-icon charts-fullscreen-button",
+                onclick: () => {
+                    this.model.set("visible", true);
+                    window.dispatchEvent(new Event("resize"));
+                }
+            }),
+            new Ui.ButtonIcon({
+                icon: "fa-angle-double-right",
+                tooltip: "Hide",
+                onclick: () => {
+                    this.model.set("visible", false);
+                    window.dispatchEvent(new Event("resize"));
+                }
+            }),
+            new Ui.ButtonIcon({
+                icon: "fa-line-chart",
+                tooltip: "Visualize",
+                onclick: () => {
+                    app.chart.set({
+                        date: Utils.time()
+                    });
+                    app.chart.trigger("redraw");
+                }
+            }),
+            this.export_button,
+            new Ui.ButtonIcon({
+                icon: "fa-save",
+                tooltip: "Save",
+                onclick: () => {
+                    if (app.chart.get("title")) {
+                        app.message.update({
+                            message:
+                                `Saving '${app.chart.get("title")}'. It will appear in the list of 'Saved Visualizations'.`,
+                            status: "success"
+                        });
+                        app.chart.save({
+                            error: () => {
+                                app.message.update({
+                                    message: "Could not save visualization.",
+                                    status: "danger"
+                                });
+                            }
+                        });
+                    } else {
+                        app.message.update({
+                            message: "Please provide a name.",
+                            status: "danger"
+                        });
+                    }
+                }
+            })
+        ];
+        this.setElement("<div/>");
+        for(let b of this.buttons) {
+            this.$el.append(b.$el);
+        }
+        this.listenTo(this.model, "change", () => this.render());
+        this.render();
+    },
+
+    render: function() {
+        var visible = this.model.get("visible");
+        this.app.$el[ visible ? "removeClass" : "addClass"]("charts-fullscreen");
+        this.export_button.model.set("visible", visible);
+        var exports = this.app.chart.plugin.specs.exports || [];
+        this.export_button.collection.each((model) => {
+            model.set("visible", exports.indexOf(model.get("key")) !== -1);
+        });
+    },
+
+    _wait: function(chart, callback) {
+        if (this.app.deferred.ready()) {
+            callback();
+        } else {
+            this.app.message.update({
+                message: "Your visualization is currently being processed. Please wait and try again."
+            });
+        }
+    }
+});