Hide unused tabs

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

@@ -44,8 +44,8 @@ export default Backbone.View.extend({
 
     _template: function() {
         return `<div>
-                    <div class="charts-center" style="float: left; width: 70%;"/>
-                    <div class="charts-left" style="float: left; width: 30%;"/>
+                    <div class="charts-center" style="float: left; width: 70%; overflow: scroll;"/>
+                    <div class="charts-left" style="float: left; width: 30%; padding-left: 10px;"/>
                 <div>`;
     }
 });

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

@@ -41,12 +41,22 @@ export default Backbone.View.extend({
                 )
                 .append(new Settings(this.app).$el)
         });
+        if (this.chart.plugin.groups) {
+            this.tabs.add({
+                id: "groups",
+                title: "Select data",
+                icon: "fa-database",
+                tooltip: "Specify data options.",
+                $el: new Groups(this.app).$el
+            });
+        }
 
         // set elements
         this.setElement("<div/>");
+        //this.$el.append(this.message.$el);
         this.$el.append(this.description.$el);
-        this.$el.append(this.message.$el);
-        this.$el.append(this.tabs.$el.addClass("ui-margin-top-large"));
+        this.$el.append(this.tabs.$el);
+        this.message.update({persistent: true, message: 'hey'});
     },
 
     /** Show editor */

client/galaxy/style/less/charts.less

@@ -26,7 +26,7 @@
 }
 
 .charts-description-text {
-    word-wrap: break-word;
+    word-break: break-word;
 }
 
 .charts-tooltip {
@@ -80,4 +80,13 @@
     width: 100%;
     min-height: 100px;
     height: inherit;
+}
+
+.charts-left {
+    .portlet-content {
+        padding: 0px;
+    }
+    .ui-table-section, .ui-portlet-panel .portlet-content {
+        padding-left: @ui-margin-horizontal;
+    }
 }