New ui

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

@@ -2,13 +2,14 @@ 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/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("<div/>");
+        this.setElement(this._template());
         $.ajax({
             url: `${Galaxy.root}api/datasets/${options.dataset_id}`
         })
@@ -21,9 +22,9 @@ export default Backbone.View.extend({
                 this.deferred = new Deferred();
                 this.viewer = new Viewer(this);
                 this.editor = new Editor(this);
-                this.$el.append(this.viewer.$el);
-                this.$el.append(this.editor.$el);
-                this.go("viewer");
+                this.$(".charts-center").append(this.viewer.$el);
+                this.$(".charts-left").append(this.editor.$el);
+                //this.go("viewer");
                 this.chart.load();
                 this.chart.trigger("redraw");
             })
@@ -39,5 +40,12 @@ export default Backbone.View.extend({
         this.viewer.hide();
         this.editor.hide();
         this[view_id].show();
+    },
+
+    _template: function() {
+        return `<div>
+                    <div class="charts-center" style="float: left; width: 70%;"/>
+                    <div class="charts-left" style="float: left; width: 30%;"/>
+                <div>`;
     }
 });

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

@@ -2,7 +2,6 @@
  *  The charts editor holds the tabs for selecting chart types, chart configuration
  *  and data group selections.
  */
-import Portlet from "mvc/ui/ui-portlet";
 import Ui from "mvc/ui/ui-misc";
 import Utils from "utils/utils";
 import Tabs from "mvc/ui/ui-tabs";
@@ -16,33 +15,6 @@ export default Backbone.View.extend({
         this.chart = this.app.chart;
         this.description = new Description(this.app);
         this.message = new Ui.Message({ cls: "ui-margin-bottom" });
-        this.portlet = new Portlet.View({
-            icon: "fa-bar-chart-o",
-            title: "Editor",
-            operations: {
-                draw: new Ui.ButtonIcon({
-                    icon: "fa-line-chart",
-                    tooltip: "Render Visualization",
-                    title: "Visualize",
-                    onclick: () => {
-                        this.chart.set({
-                            date: Utils.time()
-                        });
-                        this.app.go("viewer");
-                        this.chart.trigger("redraw");
-                    }
-                }),
-                back: new Ui.ButtonIcon({
-                    icon: "fa-caret-left",
-                    tooltip: "Return to Viewer",
-                    title: "Cancel",
-                    onclick: () => {
-                        this.chart.load(this.chart_backup);
-                        this.app.go("viewer");
-                    }
-                })
-            }
-        });
 
         // input field for chart title
         this.title = new Ui.Input({
@@ -58,9 +30,8 @@ export default Backbone.View.extend({
             id: "settings",
             title: "Customize",
             icon: "fa fa-bars",
-            tooltip: "Start by selecting a visualization.",
+            tooltip: "Customize options.",
             $el: $("<div/>")
-                .append(this.description.$el)
                 .append(new Ui.Label({ title: "Provide a title:" }).$el)
                 .append(this.title.$el)
                 .append(
@@ -70,23 +41,12 @@ export default Backbone.View.extend({
                 )
                 .append(new Settings(this.app).$el)
         });
-        this.tabs.add({
-            id: "groups",
-            title: "Select data",
-            icon: "fa-database",
-            tooltip: "Specify data options.",
-            $el: new Groups(this.app).$el
-        });
 
         // set elements
-        this.portlet.append(this.message.$el);
-        this.portlet.append(this.tabs.$el.addClass("ui-margin-top-large"));
-        this.setElement(this.portlet.$el);
-
-        // chart events
-        this.listenTo(this.chart, "change:title", chart => {
-            this._refreshTitle();
-        });
+        this.setElement("<div/>");
+        this.$el.append(this.description.$el);
+        this.$el.append(this.message.$el);
+        this.$el.append(this.tabs.$el.addClass("ui-margin-top-large"));
     },
 
     /** Show editor */
@@ -98,12 +58,5 @@ export default Backbone.View.extend({
     /** Hide editor */
     hide: function() {
         this.$el.hide();
-    },
-
-    /** Refresh title handler */
-    _refreshTitle: function() {
-        var title = this.chart.get("title");
-        this.portlet.title(title);
-        this.title.value(title);
     }
 });

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

@@ -4,7 +4,6 @@ import Ui from "mvc/ui/ui-misc";
 import Form from "mvc/form/form-view";
 import Repeat from "mvc/form/form-repeat";
 import FormData from "mvc/form/form-data";
-import Description from "mvc/visualization/chart/views/description";
 var GroupView = Backbone.View.extend({
     initialize: function(app, options) {
         var self = this;
@@ -93,7 +92,6 @@ export default Backbone.View.extend({
                 self.chart.groups.add({ id: Utils.uid() });
             }
         });
-        this.description = new Description(this.app);
         this.message = new Ui.Message({
             message: "There are no data selection options for this visualization type.",
             persistent: true,
@@ -101,7 +99,6 @@ export default Backbone.View.extend({
         });
         this.setElement(
             $("<div/>")
-                .append(this.description.$el)
                 .append(this.repeat.$el.addClass("ui-margin-bottom"))
                 .append(this.message.$el.addClass("ui-margin-bottom"))
         );

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

@@ -23,7 +23,7 @@ export default Backbone.View.extend({
         this.$info = this.$(".info");
         this.$icon = this.$(".icon");
         this.$text = this.$(".text");
-        this._fullscreen(this.$el, 55);
+        this._fullscreen(this.$el, 20);
         this._createContainer("div");
         this.chart.on("redraw", function() {
             self.app.deferred.execute(function(process) {
@@ -55,16 +55,6 @@ export default Backbone.View.extend({
         });
     },
 
-    /** Show rendered chart */
-    show: function() {
-        this.$el.show();
-    },
-
-    /** Hide chart */
-    hide: function() {
-        this.$el.hide();
-    },
-
     /** Force resize to fullscreen */
     _fullscreen: function($el, margin) {
         $el.css("height", $(window).height() - margin);
@@ -84,7 +74,7 @@ export default Backbone.View.extend({
             var container_el = $("<div/>")
                 .addClass("charts-viewport-container")
                 .width(parseInt(100 / n) + "%")
-                .append($("<" + tag + ' class="charts-viewport-canvas" />').attr("id", container_id));
+                .append($("<" + tag + " class='charts-viewport-canvas' />").attr("id", container_id));
             this.$el.append(container_el);
             this.targets.push(container_id);
         }