[galaxy-commits] commit/galaxy-central: guerler: Charts: Add zoomable heatmaps, add chart type definition to charts model

4 Jun 2014

1 new commit in galaxy-central:

https://bitbucket.org/galaxy/galaxy-central/commits/cab2ae91c6a9/
Changeset:   cab2ae91c6a9
User:        guerler
Date:        2014-06-05 00:57:27
Summary:     Charts: Add zoomable heatmaps, add chart type definition to charts model
Affected #:  19 files

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/charts/highcharts/bar_horizontal_stacked/wrapper.js

--- a/config/plugins/visualizations/charts/static/charts/highcharts/bar_horizontal_stacked/wrapper.js
+++ b/config/plugins/visualizations/charts/static/charts/highcharts/bar_horizontal_stacked/wrapper.js
@@ -15,7 +15,6 @@
     {
         // finalize configuration
         chart.settings.set('plotoptions_series_stacking', 'normal');
-        chart.settings.set('x_axis_categories', [])
         
         // draw chart
         var hc = new Highcharts(this.app, this.options);

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/charts/highcharts/bar_stacked/wrapper.js
--- a/config/plugins/visualizations/charts/static/charts/highcharts/bar_stacked/wrapper.js
+++ b/config/plugins/visualizations/charts/static/charts/highcharts/bar_stacked/wrapper.js
@@ -15,7 +15,6 @@
     {
         // finalize configuration
         chart.settings.set('plotoptions_series_stacking', 'normal');
-        chart.settings.set('x_axis_categories', [])
         
         // draw chart
         var hc = new Highcharts(this.app, this.options);

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/charts/highcharts/boxplot/wrapper.js
--- a/config/plugins/visualizations/charts/static/charts/highcharts/boxplot/wrapper.js
+++ b/config/plugins/visualizations/charts/static/charts/highcharts/boxplot/wrapper.js
@@ -11,7 +11,7 @@
     },
             
     // render
-    draw : function(process_id, chart, request_dictionary)
+    draw : function(process_id, chart, request_dictionary, callback)
     {
         // configure request
         var index = 0;
@@ -29,7 +29,7 @@
         chart.settings.set('legend_enabled', 'false')
         
         // create configuration
-        this.hc_config = configmaker(chart, chart.settings);
+        this.hc_config = configmaker(chart, callback);
         
         // request data
         var self = this;

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/charts/highcharts/common/highcharts-config.js
--- a/config/plugins/visualizations/charts/static/charts/highcharts/common/highcharts-config.js
+++ b/config/plugins/visualizations/charts/static/charts/highcharts/common/highcharts-config.js
@@ -1,10 +1,14 @@
 // dependencies
 define([], function() {
 
-// widget
-return function(chart, settings) {
-    // highcharts configuration
-    return {
+// highcharts configuration
+return function(chart) {
+
+    // get chart settings
+    var settings = chart.settings;
+
+    // initialize config object
+    var hc_config = {
         chart: {
 	        type                        : '',
             zoomType                    : 'xy'
@@ -23,7 +27,6 @@
         },
         
         xAxis: {
-            categories                  : settings.get('x_axis_categories'),
             title: {
                 text                    : settings.get('x_axis_label')
             },
@@ -60,7 +63,6 @@
                 enabled                 : !(settings.get('y_axis_type') == 'hide')
             }
         },
-    
         plotOptions: {
             series: {
                 animation               : false,
@@ -89,44 +91,10 @@
         },
        
         series: []
-	}/*,
+	}
     
-    // highcharts stacking
-    hc_stacklabels: {
-        enabled: true,
-        style: {
-            fontWeight: 'bold',
-            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
-        }
-    },
-
-    // initialize
-    initialize: function(settings) {
-        // stacking
-        if (settings.get('x_stacked')) {
-            this.hc_config.xAxis.stackLabels = this.hc_stacklabels;
-            this.hc_config.plotOptions.column = {
-                stacking    : 'normal',
-                dataLabels  : {
-                    enabled : true,
-                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
-                    style: {
-                        textShadow: '0 0 3px black, 0 0 3px black'
-                    }
-                }
-            }
-        }
-        
-        // stacking
-        if (settings.get('y_stacked')) {
-            this.hc_config.yAxis.stackLabels = this.hc_stacklabels;
-            this.hc_config.plotOptions.column = {
-                stacking    : 'normal'
-            }
-        }
-        
-        console.log(this.hc_config);
-    }*/
+    // callback
+    return hc_config;
 };
 
 });
\ No newline at end of file

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/charts/highcharts/common/wrapper.js
--- a/config/plugins/visualizations/charts/static/charts/highcharts/common/wrapper.js
+++ b/config/plugins/visualizations/charts/static/charts/highcharts/common/wrapper.js
@@ -22,15 +22,13 @@
     // render
     draw : function(process_id, hc_type, chart, request_dictionary, callback)
     {
-        // create configuration
-        this.hc_config = configmaker(chart, chart.settings);
-        
         // request data
         var self = this;
         this.app.datasets.request(request_dictionary, function() {
+            // check if this chart has multiple panels
             if (self.options.canvas.length == 1) {
                 // groups
-                if (self._drawGroups(hc_type, chart, request_dictionary.groups, self.options.canvas[0])) {
+                if (self._drawGroups(hc_type, chart, request_dictionary.groups, self.options.canvas[0], callback)) {
                     // set chart state
                     chart.state('ok', 'Chart drawn.');
                 }
@@ -40,9 +38,9 @@
                 for (var group_index in request_dictionary.groups) {
                     // get group
                     var group = request_dictionary.groups[group_index];
-                
+                    
                     // draw group
-                    if (!self._drawGroups(hc_type, chart, [group], self.options.canvas[group_index])) {
+                    if (!self._drawGroups(hc_type, chart, [group], self.options.canvas[group_index], callback)) {
                         valid = false;
                         break;
                     }
@@ -60,9 +58,17 @@
     },
     
     // draw all data into a single canvas
-    _drawGroups: function(hc_type, chart, groups, canvas) {
+    _drawGroups: function(hc_type, chart, groups, canvas, callback) {
+        // create configuration
+        var hc_config = configmaker(chart);
+        
+        // make custom wrapper callback
+        if (callback) {
+            callback(hc_config);
+        }
+    
         // reset
-        this.hc_config.series = [];
+        hc_config.series = [];
         
         // loop through data groups
         for (var key in groups) {
@@ -92,12 +98,12 @@
             };
             
             // append series
-            this.hc_config.series.push(hc_series);
+            hc_config.series.push(hc_series);
         }
         
         // draw plot
         try {
-            canvas.highcharts(this.hc_config);
+            canvas.highcharts(hc_config);
             return true;
         } catch (err) {
             var regex = /\www\.highcharts\.com([^&]+)/;

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/charts/highcharts/heatmap/config.js
--- a/config/plugins/visualizations/charts/static/charts/highcharts/heatmap/config.js
+++ b/config/plugins/visualizations/charts/static/charts/highcharts/heatmap/config.js
@@ -3,18 +3,21 @@
 return $.extend(true, {}, config, {
     title       : 'Heatmap',
     category    : 'Data processing (requires \'charts\' tool from Toolshed)',
-    execute     : 'heatmap',
+    //execute     : 'heatmap',
     use_panels  : true,
+    keywords    : 'default highcharts',
     columns: {
-        row_label: {
+        y: {
             title       : 'Row labels',
-            is_label    : true
+            is_label    : true,
+            is_numeric  : true
         },
-        col_label: {
+        x: {
             title       : 'Column labels',
-            is_label    : true
+            is_label    : true,
+            is_numeric  : true
         },
-        value: {
+        z: {
             title       : 'Observations',
             is_numeric  : true
         }

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/charts/highcharts/heatmap/wrapper.js
--- a/config/plugins/visualizations/charts/static/charts/highcharts/heatmap/wrapper.js
+++ b/config/plugins/visualizations/charts/static/charts/highcharts/heatmap/wrapper.js
@@ -1,5 +1,5 @@
 // dependencies
-define(['plugin/charts/highcharts/common/wrapper'], function(Highcharts) {
+define(['plugin/charts/highcharts/common/wrapper'], function(HighchartsWrapper) {
 
 // widget
 return Backbone.View.extend(
@@ -13,13 +13,14 @@
     // render
     draw : function(process_id, chart, request_dictionary)
     {
-        // finalize configuration
-        chart.settings.set('plotoptions_series_stacking', 'normal');
-        chart.settings.set('x_axis_categories', [])
-        
         // draw chart
-        var hc = new Highcharts(this.app, this.options);
-        hc.draw(process_id, 'heatmap', chart, request_dictionary);
+        var hc = new HighchartsWrapper(this.app, this.options);
+        hc.draw(process_id, 'heatmap', chart, request_dictionary, function(model) {
+            model.colorAxis = {
+                minColor                    : '#00FF99',
+                maxColor                    : '#000066'
+            }
+        });
     }
 });
 

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/charts/nvd3/common/config.js
--- a/config/plugins/visualizations/charts/static/charts/nvd3/common/config.js
+++ b/config/plugins/visualizations/charts/static/charts/nvd3/common/config.js
@@ -198,7 +198,7 @@
         show_legend : {
             title       : 'Show legend',
             info        : 'Would you like to add a legend?',
-            type        : 'select',
+            type        : 'radiobutton',
             init        : 'true',
             data        : [
                 {

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/charts/nvd3/stackedarea/logo.png
Binary file config/plugins/visualizations/charts/static/charts/nvd3/stackedarea/logo.png has changed

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/library/jobs.js
--- a/config/plugins/visualizations/charts/static/library/jobs.js
+++ b/config/plugins/visualizations/charts/static/library/jobs.js
@@ -60,7 +60,7 @@
         var chart_type          = chart.get('type');
         
         // get chart settings
-        var chart_settings  = this.app.types.get(chart_type);
+        var chart_definition    = chart.definition;
        
         // configure tool
         data = {
@@ -70,7 +70,7 @@
                     'id'    : chart.get('dataset_id'),
                     'src'   : 'hda'
                 },
-                'module'    : chart_settings.execute,
+                'module'    : chart_definition.execute,
                 'columns'   : columns_string,
                 'settings'  : settings_string
             }

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/library/storage.js
--- a/config/plugins/visualizations/charts/static/library/storage.js
+++ b/config/plugins/visualizations/charts/static/library/storage.js
@@ -114,6 +114,9 @@
         // initiating chart
         console.debug('Storage::load() - Loading chart type ' + chart_type + '.');
         
+        // parse chart definition
+        this.chart.definition = chart_definition;
+        
         // main
         this.chart.set(chart_dict.attributes);
         

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/plugins/heatmap/heatmap.css
--- a/config/plugins/visualizations/charts/static/plugins/heatmap/heatmap.css
+++ /dev/null
@@ -1,76 +0,0 @@
-<style>
-      /* disable text selection */
-      svg *::selection {
-         background : transparent;
-      }
-     
-      svg *::-moz-selection {
-         background:transparent;
-      } 
-     
-      svg *::-webkit-selection {
-         background:transparent;
-      }
-      rect.selection {
-        stroke          : #333;
-        stroke-dasharray: 4px;
-        stroke-opacity  : 0.5;
-        fill            : transparent;
-      }
-
-      rect.cell-border {
-        stroke: #eee;
-        stroke-width:0.3px;   
-      }
-
-      rect.cell-selected {
-        stroke: rgb(51,102,153);
-        stroke-width:0.5px;   
-      }
-
-      rect.cell-hover {
-        stroke: #F00;
-        stroke-width:0.3px;   
-      }
-
-      text.mono {
-        font-size: 9pt;
-        font-family: Consolas, courier;
-        fill: #aaa;
-      }
-
-      text.text-selected {
-        fill: #000;
-      }
-
-      text.text-highlight {
-        fill: #c00;
-      }
-      text.text-hover {
-        fill: #00C;
-      }
-      #heatmap-tooltip {
-        position: absolute;
-        width: 200px;
-        height: auto;
-        padding: 10px;
-        background-color: white;
-        -webkit-border-radius: 10px;
-        -moz-border-radius: 10px;
-        border-radius: 10px;
-        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-        pointer-events: none;
-      }
-
-      #heatmap-tooltip.hidden {
-        display: none;
-      }
-
-      #heatmap-tooltip p {
-        margin: 0;
-        font-family: sans-serif;
-        font-size: 12px;
-        line-height: 20px;
-      }
\ No newline at end of file

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/plugins/highcharts/heatmap.js
--- /dev/null
+++ b/config/plugins/visualizations/charts/static/plugins/highcharts/heatmap.js
@@ -0,0 +1,21 @@
+/*
+ Highcharts JS v4.0.1 (2014-04-24)
+
+ (c) 2011-2014 Torstein Honsi
+
+ License: www.highcharts.com/license
+*/
+(function(g){var j=g.Axis,x=g.Chart,o=g.Color,y=g.Legend,s=g.LegendSymbolMixin,t=g.Series,u=g.getOptions(),k=g.each,p=g.extend,z=g.extendClass,l=g.merge,q=g.pick,v=g.numberFormat,m=g.seriesTypes,w=g.wrap,n=function(){},r=g.ColorAxis=function(){this.isColorAxis=!0;this.init.apply(this,arguments)};p(r.prototype,j.prototype);p(r.prototype,{defaultColorAxisOptions:{lineWidth:0,gridLineWidth:1,tickPixelInterval:72,startOnTick:!0,endOnTick:!0,offset:0,marker:{animation:{duration:50},color:"gray",width:0.01},
+labels:{overflow:"justify"},minColor:"#EFEFFF",maxColor:"#003875",tickLength:5},init:function(b,a){var d=b.options.legend.layout!=="vertical",c;c=l(this.defaultColorAxisOptions,{side:d?2:1,reversed:!d},a,{isX:d,opposite:!d,showEmpty:!1,title:null,isColor:!0});j.prototype.init.call(this,b,c);a.dataClasses&&this.initDataClasses(a);this.initStops(a);this.isXAxis=!0;this.horiz=d;this.zoomEnabled=!1},tweenColors:function(b,a,d){var c=a.rgba[3]!==1||b.rgba[3]!==1;return(c?"rgba(":"rgb(")+Math.round(a.rgba[0]+
+(b.rgba[0]-a.rgba[0])*(1-d))+","+Math.round(a.rgba[1]+(b.rgba[1]-a.rgba[1])*(1-d))+","+Math.round(a.rgba[2]+(b.rgba[2]-a.rgba[2])*(1-d))+(c?","+(a.rgba[3]+(b.rgba[3]-a.rgba[3])*(1-d)):"")+")"},initDataClasses:function(b){var a=this,d=this.chart,c,e=0,h=this.options;this.dataClasses=c=[];k(b.dataClasses,function(f,i){var g,f=l(f);c.push(f);if(!f.color)h.dataClassColor==="category"?(g=d.options.colors,f.color=g[e++],e===g.length&&(e=0)):f.color=a.tweenColors(o(h.minColor),o(h.maxColor),i/(b.dataClasses.length-
+1))})},initStops:function(b){this.stops=b.stops||[[0,this.options.minColor],[1,this.options.maxColor]];k(this.stops,function(a){a.color=o(a[1])})},setOptions:function(b){j.prototype.setOptions.call(this,b);this.options.crosshair=this.options.marker;this.coll="colorAxis"},setAxisSize:function(){var b=this.legendSymbol,a=this.chart,d,c,e;if(b)this.left=d=b.attr("x"),this.top=c=b.attr("y"),this.width=e=b.attr("width"),this.height=b=b.attr("height"),this.right=a.chartWidth-d-e,this.bottom=a.chartHeight-
+c-b,this.len=this.horiz?e:b,this.pos=this.horiz?d:c},toColor:function(b,a){var d,c=this.stops,e,h=this.dataClasses,f,i;if(h)for(i=h.length;i--;){if(f=h[i],e=f.from,c=f.to,(e===void 0||b>=e)&&(c===void 0||b<=c)){d=f.color;if(a)a.dataClass=i;break}}else{this.isLog&&(b=this.val2lin(b));d=1-(this.max-b)/(this.max-this.min);for(i=c.length;i--;)if(d>c[i][0])break;e=c[i]||c[i+1];c=c[i+1]||e;d=1-(c[0]-d)/(c[0]-e[0]||1);d=this.tweenColors(e.color,c.color,d)}return d},getOffset:function(){var b=this.legendGroup;
+if(b&&(j.prototype.getOffset.call(this),!this.axisGroup.parentGroup))this.axisGroup.add(b),this.gridGroup.add(b),this.labelGroup.add(b),this.added=!0},setLegendColor:function(){var b,a=this.options;b=this.horiz?[0,0,1,0]:[0,0,0,1];this.legendColor={linearGradient:{x1:b[0],y1:b[1],x2:b[2],y2:b[3]},stops:a.stops||[[0,a.minColor],[1,a.maxColor]]}},drawLegendSymbol:function(b,a){var d=b.padding,c=b.options,e=this.horiz,h=q(c.symbolWidth,e?200:12),f=q(c.symbolHeight,e?12:200),c=q(c.labelPadding,e?10:30);
+this.setLegendColor();a.legendSymbol=this.chart.renderer.rect(0,b.baseline-11,h,f).attr({zIndex:1}).add(a.legendGroup);a.legendSymbol.getBBox();this.legendItemWidth=h+d+(e?0:c);this.legendItemHeight=f+d+(e?c:0)},setState:n,visible:!0,setVisible:n,getSeriesExtremes:function(){var b;if(this.series.length)b=this.series[0],this.dataMin=b.valueMin,this.dataMax=b.valueMax},drawCrosshair:function(b,a){var d=!this.cross,c=a&&a.plotX,e=a&&a.plotY,h,f=this.pos,i=this.len;if(a)h=this.toPixels(a.value),h<f?h=
+f-2:h>f+i&&(h=f+i+2),a.plotX=h,a.plotY=this.len-h,j.prototype.drawCrosshair.call(this,b,a),a.plotX=c,a.plotY=e,!d&&this.cross&&this.cross.attr({fill:this.crosshair.color}).add(this.labelGroup)},getPlotLinePath:function(b,a,d,c,e){return e?this.horiz?["M",e-4,this.top-6,"L",e+4,this.top-6,e,this.top,"Z"]:["M",this.left,e,"L",this.left-6,e+6,this.left-6,e-6,"Z"]:j.prototype.getPlotLinePath.call(this,b,a,d,c)},update:function(b,a){k(this.series,function(a){a.isDirtyData=!0});j.prototype.update.call(this,
+b,a);this.legendItem&&(this.setLegendColor(),this.chart.legend.colorizeItem(this,!0))},getDataClassLegendSymbols:function(){var b=this,a=this.chart,d=[],c=a.options.legend,e=c.valueDecimals,h=c.valueSuffix||"",f;k(this.dataClasses,function(c,g){var j=!0,l=c.from,m=c.to;f="";l===void 0?f="< ":m===void 0&&(f="> ");l!==void 0&&(f+=v(l,e)+h);l!==void 0&&m!==void 0&&(f+=" - ");m!==void 0&&(f+=v(m,e)+h);d.push(p({chart:a,name:f,options:{},drawLegendSymbol:s.drawRectangle,visible:!0,setState:n,setVisible:function(){j=
+this.visible=!j;k(b.series,function(a){k(a.points,function(a){a.dataClass===g&&a.setVisible(j)})});a.legend.colorizeItem(this,j)}},c))});return d},name:""});w(x.prototype,"getAxes",function(b){var a=this.options.colorAxis;b.call(this);this.colorAxis=[];a&&new r(this,a)});w(y.prototype,"getAllItems",function(b){var a=[],d=this.chart.colorAxis[0];d&&(d.options.dataClasses?a=a.concat(d.getDataClassLegendSymbols()):a.push(d),k(d.series,function(a){a.options.showInLegend=!1}));return a.concat(b.call(this))});
+g={pointAttrToOptions:{stroke:"borderColor","stroke-width":"borderWidth",fill:"color",dashstyle:"dashStyle"},pointArrayMap:["value"],axisTypes:["xAxis","yAxis","colorAxis"],optionalAxis:"colorAxis",trackerGroups:["group","markerGroup","dataLabelsGroup"],getSymbol:n,parallelArrays:["x","y","value"],translateColors:function(){var b=this,a=this.options.nullColor,d=this.colorAxis;k(this.data,function(c){var e=c.value;if(e=e===null?a:d?d.toColor(e,c):c.color||b.color)c.color=e})}};u.plotOptions.heatmap=
+l(u.plotOptions.scatter,{animation:!1,borderWidth:0,nullColor:"#F8F8F8",dataLabels:{format:"{point.value}",verticalAlign:"middle",crop:!1,overflow:!1,style:{color:"white",fontWeight:"bold",textShadow:"0 0 5px black"}},marker:null,tooltip:{pointFormat:"{point.x}, {point.y}: {point.value}<br/>"},states:{normal:{animation:!0},hover:{brightness:0.2}}});m.heatmap=z(m.scatter,l(g,{type:"heatmap",pointArrayMap:["y","value"],hasPointSpecificOptions:!0,supportsDrilldown:!0,getExtremesFromAll:!0,init:function(){m.scatter.prototype.init.apply(this,
+arguments);this.pointRange=this.options.colsize||1;this.yAxis.axisPointRange=this.options.rowsize||1},translate:function(){var b=this.options,a=this.xAxis,d=this.yAxis;this.generatePoints();k(this.points,function(c){var e=(b.colsize||1)/2,h=(b.rowsize||1)/2,f=Math.round(a.len-a.translate(c.x-e,0,1,0,1)),e=Math.round(a.len-a.translate(c.x+e,0,1,0,1)),g=Math.round(d.translate(c.y-h,0,1,0,1)),h=Math.round(d.translate(c.y+h,0,1,0,1));c.plotX=(f+e)/2;c.plotY=(g+h)/2;c.shapeType="rect";c.shapeArgs={x:Math.min(f,
+e),y:Math.min(g,h),width:Math.abs(e-f),height:Math.abs(h-g)}});this.translateColors()},drawPoints:m.column.prototype.drawPoints,animate:n,getBox:n,drawLegendSymbol:s.drawRectangle,getExtremes:function(){t.prototype.getExtremes.call(this,this.valueData);this.valueMin=this.dataMin;this.valueMax=this.dataMax;t.prototype.getExtremes.call(this)}}))})(Highcharts);
\ No newline at end of file

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/views/editor.js
--- a/config/plugins/visualizations/charts/static/views/editor.js
+++ b/config/plugins/visualizations/charts/static/views/editor.js
@@ -47,7 +47,7 @@
                 'back'  : new Ui.ButtonIcon({
                     icon    : 'fa-caret-left',
                     tooltip : 'Return to Viewer',
-                    title   : 'Return',
+                    title   : 'Cancel',
                     onclick : function() {
                         // show viewport
                         self.app.go('viewer');
@@ -63,15 +63,27 @@
         // grid with chart types
         //
         this.types = new TypesView(app, {
-            onchange   : function(type) {
+            onchange   : function(chart_type) {
+                // get chart definition
+                var chart_definition = self.app.types.get(chart_type);
+                if (!chart_definition) {
+                    console.debug('FAILED - Editor::onchange() - Chart type not supported.');
+                }
+        
+                // parse chart definition
+                self.chart.definition = chart_definition;
+        
                 // reset type relevant chart content
                 self.chart.settings.clear();
                 
                 // update chart type
-                self.chart.set({type: type});
+                self.chart.set({type: chart_type});
                 
                 // set modified flag
                 self.chart.set('modified', true);
+                
+                // log
+                console.debug('Editor::onchange() - Switched chart type.');
             },
             ondblclick  : function(chart_id) {
                 self._saveChart();
@@ -230,6 +242,9 @@
         
         // update titles
         this._refreshGroupKey();
+        
+        // reset
+        this.chart.set('modified', true);
     },
     
     // remove group
@@ -252,7 +267,7 @@
     _resetChart: function() {
         // reset chart details
         this.chart.set('id', Utils.uuid());
-        this.chart.set('type', 'nvd3_bar');
+        this.chart.set('type', 'highcharts_bar');
         this.chart.set('dataset_id', this.app.options.config.dataset_id);
         this.chart.set('title', 'New Chart');
         
@@ -262,18 +277,30 @@
     
     // create chart
     _saveChart: function() {
-        // ensure that data group is available
+        // update chart data
+        this.chart.set({
+            type        : this.types.value(),
+            title       : this.title.value(),
+            date        : Utils.time()
+        });
+        
+        // make sure that at least one data group is available
         if (this.chart.groups.length == 0) {
+            this.message.update({message: 'Please select data columns before drawing the chart.'});
             var group = this._addGroupModel();
             this.tabs.show(group.id);
             return;
         }
         
-        // very selected group columns
+        // make sure that all necessary columns are assigned
         var self = this;
         var valid = true;
+        var chart_def = this.chart.definition;
         this.chart.groups.each(function(group) {
-            for (var key in group.attributes) {
+            if (!valid) {
+                return;
+            }
+            for (var key in chart_def.columns) {
                 if (group.attributes[key] == 'null') {
                     self.message.update({status: 'danger', message: 'This chart type requires column types not found in your tabular file.'});
                     self.tabs.show(group.id);
@@ -290,13 +317,6 @@
         
         // show viewport
         this.app.go('viewer');
-                        
-        // update chart data
-        this.chart.set({
-            type        : this.types.value(),
-            title       : this.title.value(),
-            date        : Utils.time()
-        });
         
         // wait until chart is ready
         var self = this;

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/views/group.js
--- a/config/plugins/visualizations/charts/static/views/group.js
+++ b/config/plugins/visualizations/charts/static/views/group.js
@@ -74,16 +74,16 @@
         var self = this;
         
         // configure chart type
-        var chart_settings = this.app.types.get(chart_type);
-    
+        var chart_definition = this.chart.definition;
+        
         // reset table
         this.table.delAll();
         
         // load list for select fields
         var select_list = {};
-        for (var id in chart_settings.columns) {
+        for (var id in chart_definition.columns) {
             // get definition
-            var data_def = chart_settings.columns[id];
+            var data_def = chart_definition.columns[id];
             if (!data_def) {
                 console.debug('Group::_refreshTable() - Skipping column definition.');
                 continue;
@@ -114,7 +114,7 @@
         this.app.datasets.request({id : dataset_id}, function(dataset) {
             // update select fields
             for (var id in select_list) {
-                self._addRow(id, dataset, select_list, chart_settings.columns[id])
+                self._addRow(id, dataset, select_list, chart_definition.columns[id])
             }
             
             // loading
@@ -126,15 +126,15 @@
     },
     
     // add row
-    _addRow: function(id, dataset, select_list, chart_setting) {
+    _addRow: function(id, dataset, select_list, column_definition) {
         // link this
         var self = this;
         
         // is a numeric number required
-        var is_label    = chart_setting.is_label;
-        var is_auto     = chart_setting.is_auto;
-        var is_numeric  = chart_setting.is_numeric;
-        var is_unique   = chart_setting.is_unique;
+        var is_label    = column_definition.is_label;
+        var is_auto     = column_definition.is_auto;
+        var is_numeric  = column_definition.is_numeric;
+        var is_unique   = column_definition.is_unique;
 
         // configure columns
         var columns = [];

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/views/settings.js
--- a/config/plugins/visualizations/charts/static/views/settings.js
+++ b/config/plugins/visualizations/charts/static/views/settings.js
@@ -33,17 +33,14 @@
     
     // update dataset
     _refresh: function() {
-        // identify datasets
-        var chart_type = this.chart.get('type');
+        // get settings
+        var chart_definition = this.chart.definition;
         
         // check if dataset is available
-        if (!chart_type) {
+        if (!chart_definition) {
             return;
         }
         
-        // get settings
-        var chart_definition = this.app.types.get(chart_type);
-        
         // set title
         this.form.title(chart_definition.category + ' - ' + chart_definition.title + ':');
         

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/views/types.js
--- a/config/plugins/visualizations/charts/static/views/types.js
+++ b/config/plugins/visualizations/charts/static/views/types.js
@@ -32,13 +32,13 @@
         // construct chart type subset selection buttons
         this.library = new Ui.RadioButton({
             data    : [ { label: 'Default', value: 'default' },
-                        { label: 'NVD3 (only)', value: 'nvd3' },
-                        { label: 'Highcharts (only)', value: 'highcharts' }],
+                        { label: 'Classic', value: 'nvd3' },
+                        { label: 'Zoomable', value: 'highcharts' }],
             onchange: function(value) {
                 self._filter(value);
             }
         });
-        $el.append(Utils.wrap(this.library.$el).css('text-align', 'center'));
+        $el.append(Utils.wrap(this.library.$el));
         
         // set element
         this.setElement($el);
@@ -86,7 +86,7 @@
             var type = types[id];
             var $el = this.$el.find('#' + id);
             var keywords = type.keywords || '';
-            if (keywords.indexOf(value) == -1) {
+            if (keywords.indexOf(value) == -1 && value != 'all') {
                 $el.hide();
             } else {
                 $el.show();

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/static/views/viewport.js
--- a/config/plugins/visualizations/charts/static/views/viewport.js
+++ b/config/plugins/visualizations/charts/static/views/viewport.js
@@ -136,10 +136,10 @@
         var chart_type = chart.get('type');
         
         // load chart settings
-        this.chart_settings = this.app.types.get(chart_type);
+        this.chart_definition = chart.definition;
         
         // read settings
-        var use_panels = this.chart_settings.use_panels;
+        var use_panels = this.chart_definition.use_panels;
         
         // determine number of svg/div-elements to create
         var n_panels = 1;
@@ -148,14 +148,14 @@
         }
         
         // create canvas element and add to canvas list
-        this._createContainer(this.chart_settings.tag, n_panels);
+        this._createContainer(this.chart_definition.tag, n_panels);
             
         // set chart state
         chart.state('wait', 'Please wait...');
         
         // clean up data if there is any from previous jobs
-        if (!this.chart_settings.execute ||
-            (this.chart_settings.execute && chart.get('modified'))) {
+        if (!this.chart_definition.execute ||
+            (this.chart_definition.execute && chart.get('modified'))) {
             
             // reset jobs
             this.app.jobs.cleanup(chart);
@@ -171,7 +171,7 @@
             var view = new ChartView(self.app, {canvas : self.canvas_list});
             
             // request data
-            if (self.chart_settings.execute) {
+            if (self.chart_definition.execute) {
                 self.app.jobs.request(chart, self._defaultSettingsString(chart), self._defaultRequestString(chart),
                     function() {
                         view.draw(process_id, chart, self._defaultRequestDictionary(chart));
@@ -203,7 +203,7 @@
             group_index++;
             
             // add selected columns to column string
-            for (var key in self.chart_settings.columns) {
+            for (var key in self.chart_definition.columns) {
                 request_string += key + '_' + group_index + ':' + (parseInt(group.get(key)) + 1) + ', ';
             }
         });
@@ -236,7 +236,7 @@
         };
         
         // update request dataset id
-        if (this.chart_settings.execute) {
+        if (this.chart_definition.execute) {
             request_dictionary.id = chart.get('dataset_id_job');
         } else {
             request_dictionary.id = chart.get('dataset_id');
@@ -249,9 +249,9 @@
 
             // add columns
             var columns = {};
-            for (var column_key in self.chart_settings.columns) {
+            for (var column_key in self.chart_definition.columns) {
                 // get settings for column
-                var column_settings = self.chart_settings.columns[column_key];
+                var column_settings = self.chart_definition.columns[column_key];
                 
                 // add to columns
                 columns[column_key] = {

diff -r f70167e188f9ad42d1651ea77a1208ad2fdc9abc -r cab2ae91c6a96e133748900e1c203ce864f52052 config/plugins/visualizations/charts/templates/charts.mako
--- a/config/plugins/visualizations/charts/templates/charts.mako
+++ b/config/plugins/visualizations/charts/templates/charts.mako
@@ -28,10 +28,8 @@
         ## install highcharts module
         ${h.javascript_link( app_root + "plugins/highcharts/highcharts.js" )}
         ${h.javascript_link( app_root + "plugins/highcharts/highcharts-more.js" )}
+        ${h.javascript_link( app_root + "plugins/highcharts/heatmap.js" )}
         
-        ## install heat map module
-        ${h.stylesheet_link( app_root + "plugins/heatmap/heatmap.css" )}
-
         ## install boxplot module
         ##${h.javascript_link( app_root + "plugins/box.js" )}

Repository URL: https://bitbucket.org/galaxy/galaxy-central/

--

This is a commit notification from bitbucket.org. You are receiving
this because you have the service enabled, addressing the recipient of
this email.

    

[galaxy-commits] commit/galaxy-central: guerler: Charts: Add zoomable heatmaps, add chart type definition to charts model

commits-noreply＠bitbucket.org