Add editor buttons

client/galaxy/scripts/mvc/visualization/chart/chart-client.js

@@ -1,23 +1,59 @@
 import Deferred from "utils/deferred";
+import Utils from "utils/utils";
 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";
 
 export default Backbone.View.extend({
     initialize: function(options) {
         this.modal = (window.parent.Galaxy && window.parent.Galaxy.modal) || new Modal.View();
-        this.setElement($("<div/>").append($("<div/>").addClass("charts-center"))
+        this.setElement($("<div/>").addClass("charts-client")
+                                   .append($("<div/>").addClass("charts-buttons"))
+                                   .append($("<div/>").addClass("charts-center"))
                                    .append($("<div/>").addClass("charts-right")));
+        this.$center = this.$(".charts-center");
+        this.$right = this.$(".charts-right");
+        this.$buttons = this.$(".charts-buttons");
         this.chart = new Chart({}, options);
         this.chart.plugin = options.visualization_plugin;
         this.chart.plugin.specs = this.chart.plugin.specs || {};
         this.chart_load = options.chart_load;
         this.deferred = new Deferred();
         this.viewer = new Viewer(this);
         this.editor = new Editor(this);
-        this.$(".charts-center").append(this.viewer.$el);
-        this.$(".charts-right").append(this.editor.$el);
+        this.buttons =[{
+            icon: "fa-caret-left",
+            tooltip: "Show Settings",
+            cls: "ui-button-icon charts-fullscreen-button",
+            onclick: () => {
+                this.$el.removeClass("charts-fullscreen");
+                window.dispatchEvent(new Event("resize"));
+            }
+        },{
+            icon: "fa-caret-right",
+            tooltip: "Hide Settings",
+            onclick: () => {
+                this.$el.addClass("charts-fullscreen");
+                window.dispatchEvent(new Event("resize"));
+            }
+        },{
+            icon: "fa-line-chart",
+            tooltip: "Render Visualization",
+            title: "Visualize",
+            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.$center.append(this.viewer.$el);
+        this.$right.append(this.editor.$el);
         $.ajax({
             url: `${Galaxy.root}api/datasets/${options.dataset_id}`
         }).done(dataset => {

client/galaxy/style/less/charts.less

@@ -1,3 +1,62 @@
+.charts-client {
+    .charts-buttons {
+        float: right;
+        margin: 5px 0px;
+        .ui-button-icon {
+            display: block;
+            margin-right: 5px;
+        }
+        .ui-button-icon.charts-fullscreen-button {
+            display: none;
+        }
+    }
+    .charts-center {
+        float: left;
+        width: 70%;
+        overflow: hidden;
+        padding: 10px 5px 10px 10px;
+    }
+    .charts-right {
+        float: left;
+        width: 30%;
+        height: 100vh;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        .charts-editor {
+            display: block;
+            flex: 1;
+            overflow: auto;
+            padding: 10px 10px 10px 5px;
+            .portlet-content {
+                padding: 0px;
+            }
+            .ui-table-section, .ui-portlet-panel .portlet-content {
+                padding-left: 5px;
+            }
+        }
+    }
+}
+
+.charts-client.charts-fullscreen {
+    .charts-buttons {
+        position: absolute;
+        right: 0px;
+        .ui-button-icon {
+            display: none;
+        }
+        .ui-button-icon.charts-fullscreen-button {
+            display: block;
+        }
+    }
+    .charts-center {
+        width: 100%;
+    }
+    .charts-right {
+        display: none;
+    }
+}
+
 .charts-viewer {
     overflow: auto;
 }
@@ -80,32 +139,4 @@
     width: 100%;
     min-height: 100px;
     height: inherit;
-}
-
-.charts-center {
-    float: left;
-    width: 70%;
-    overflow: hidden;
-    padding: 10px 0px 10px 10px;
-}
-
-.charts-right {
-    float: left;
-    width: 30%;
-    height: 100vh;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    .charts-editor {
-        display: block;
-        flex: 1;
-        overflow: auto;
-        padding: 10px;
-        .portlet-content {
-            padding: 0px;
-        }
-        .ui-table-section, .ui-portlet-panel .portlet-content {
-            padding-left: 5px;
-        }
-    }
 }