Fix margins, refactor app

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

@@ -2,50 +2,31 @@ import Deferred from "utils/deferred";
 import Modal from "mvc/ui/ui-modal";
 import Chart from "mvc/visualization/chart/components/model";
 import Editor from "mvc/visualization/chart/views/editor";
-//import Viewer from "mvc/visualization/chart/views/viewer";
 import Viewer from "mvc/visualization/chart/views/viewport";
 
 export default Backbone.View.extend({
     initialize: function(options) {
-        this.options = options;
         this.modal = (window.parent.Galaxy && window.parent.Galaxy.modal) || new Modal.View();
-        this.setElement(this._template());
+        this.setElement($("<div/>").append($("<div/>").addClass("charts-center"))
+                                   .append($("<div/>").addClass("charts-right")));
+        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);
         $.ajax({
             url: `${Galaxy.root}api/datasets/${options.dataset_id}`
-        })
-            .done(dataset => {
-                this.dataset = dataset;
-                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-left").append(this.editor.$el);
-                //this.go("viewer");
-                this.chart.load();
-                this.chart.trigger("redraw");
-            })
-            .fail(response => {
-                let message = response.responseJSON && response.responseJSON.err_msg;
-                this.errormessage = message || "Import failed for unkown reason.";
-            });
-    },
-
-    /** Loads a view and makes sure that all others are hidden */
-    go: function(view_id) {
-        $(".tooltip").hide();
-        this.viewer.hide();
-        this.editor.hide();
-        this[view_id].show();
-    },
-
-    _template: function() {
-        return `<div>
-                    <div class="charts-center" style="float: left; width: 70%; overflow: scroll;"/>
-                    <div class="charts-left" style="float: left; width: 30%; padding-left: 10px;"/>
-                <div>`;
+        }).done(dataset => {
+            this.dataset = dataset;
+            this.chart.load();
+            this.chart.trigger("redraw");
+        }).fail(response => {
+            let message = response.responseJSON && response.responseJSON.err_msg;
+            this.errormessage = message || "Import failed for unkown reason.";
+        });
     }
 });

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

@@ -52,7 +52,7 @@ export default Backbone.View.extend({
         }
 
         // set elements
-        this.setElement("<div/>");
+        this.setElement("<div class='charts-editor'/>");
         //this.$el.append(this.message.$el);
         this.$el.append(this.description.$el);
         this.$el.append(this.tabs.$el);

client/galaxy/style/less/charts.less

@@ -82,11 +82,30 @@
     height: inherit;
 }
 
-.charts-left {
-    .portlet-content {
-        padding: 0px;
-    }
-    .ui-table-section, .ui-portlet-panel .portlet-content {
-        padding-left: @ui-margin-horizontal;
+.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;
+        }
     }
 }

config/plugins/visualizations/common/templates/chart_entry_point.mako

@@ -41,8 +41,10 @@
                     chart_dict: config.chart_dict,
                     chart_load: bundleEntries[load]
                 });
-                $('body').append(app.$el);
+                $('body').css("overflow", "hidden")
+                         .css("margin", 0)
+                         .append(app.$el);
             }
         });
     </script>
-</%def>
+</%def>