@@ -139,12 +140,10 @@
-
-
@@ -158,13 +157,16 @@
-
+
' + (graph.point.tooltip || key) + '
'; - }); - - // draw chart - if ($('#' + canvas_id).length == 0) { - return; - } - var canvas = d3.select('#' + canvas_id); - canvas.datum(groups) - .call(d3chart); - - // add zoom/pan handler - if (chart.definition.zoomable && chart.definition.zoomable != 'native') { - // clip edges - if (d3chart.clipEdge) { - d3chart.clipEdge(true); - } - - // add zoom - Tools.addZoom({ - xAxis : d3chart.xAxis, - yAxis : d3chart.yAxis, - yDomain: d3chart.yDomain, - xDomain: d3chart.xDomain, - redraw : function() { d3chart.update() }, - svg : canvas + render: function( canvas_id, groups ) { + var self = this; + var chart = this.options.chart; + var type = this.options.type; + var makeConfig = this.options.makeConfig; + var d3chart = nv.models[ type ](); + nv.addGraph( function() { + try { + d3chart.xAxis.axisLabel( chart.settings.get( 'x_axis_label' ) ); + d3chart.yAxis.axisLabel( chart.settings.get( 'y_axis_label' ) ).axisLabelDistance( 30 ); + d3chart.options( { showControls: false } ); + d3chart.showLegend && d3chart.showLegend(chart.settings.get('show_legend') == 'true'); + self._makeAxes( d3chart, groups, chart.settings ); + makeConfig && makeConfig( d3chart ); + chart.settings.get( 'use_panels' ) === 'true' && d3chart.options( { showControls: false } ); + d3chart.xAxis.showMaxMin( false ); + d3chart.yAxis.showMaxMin( chart.definition.showmaxmin ); + d3chart.tooltipContent( function( key, x, y, graph ) { + return '' + ( graph.point.tooltip || key ) + '
'; }); - } - - // refresh on window resize - nv.utils.windowResize(d3chart.update); - } catch (err) { - self._handleError(chart, err); - } - }); - - // return - return true; - }, - - // create axes formatting - _makeAxes: function(d3chart, groups, settings) { - // result - var categories = Tools.makeCategories(groups); - - // make axes - function makeTickFormat (id) { - Tools.makeTickFormat({ - categories : categories.array[id], - type : settings.get(id + '_axis_type'), - precision : settings.get(id + '_axis_precision'), - formatter : function(formatter) { - if (formatter) { - d3chart[id + 'Axis'].tickFormat(function(value) { - return formatter(value); - }); + if ( $( '#' + canvas_id ).length > 0 ) { + var canvas = d3.select( '#' + canvas_id ); + canvas.datum( groups ).call( d3chart ); + if ( chart.definition.zoomable && chart.definition.zoomable != 'native' ) { + d3chart.clipEdge && d3chart.clipEdge( true ); + Tools.addZoom({ + xAxis : d3chart.xAxis, + yAxis : d3chart.yAxis, + yDomain: d3chart.yDomain, + xDomain: d3chart.xDomain, + redraw : function() { d3chart.update() }, + svg : canvas + }); + } + nv.utils.windowResize( d3chart.update ); } + } catch ( err ) { + chart.state( 'failed', err ); } }); - }; - makeTickFormat('x'); - makeTickFormat('y'); - }, - - // handle error - _handleError: function(chart, err) { - chart.state('failed', err); - } -}); + return true; + }, + /** Format axes ticks */ + _makeAxes: function( d3chart, groups, settings ) { + var categories = Tools.makeCategories( groups ); + function makeTickFormat( id ) { + Tools.makeTickFormat({ + categories : categories.array[ id ], + type : settings.get( id + '_axis_type' ), + precision : settings.get( id + '_axis_precision' ), + formatter : function( formatter ) { + formatter && d3chart[ id + 'Axis' ].tickFormat( function( value ) { + return formatter( value ); + }); + } + }); + }; + makeTickFormat( 'x' ); + makeTickFormat( 'y' ); + } + }); }); \ No newline at end of file diff --git a/config/plugins/visualizations/charts/static/charts/nvd3/pie/config.js b/config/plugins/visualizations/charts/static/charts/nvd3/pie/config.js index 24d2b66c287..d4dbf78f053 100644 --- a/config/plugins/visualizations/charts/static/charts/nvd3/pie/config.js +++ b/config/plugins/visualizations/charts/static/charts/nvd3/pie/config.js @@ -52,7 +52,8 @@ return $.extend(true, {}, { show_legend : { title : 'Show legend', info : 'Would you like to add a legend?', - type : 'radiobutton', + type : 'select', + display : 'radiobutton', init : 'false', data : [ { @@ -103,7 +104,8 @@ return $.extend(true, {}, { label_outside : { title : 'Show outside', info : 'Would you like to show labels outside the donut?', - type : 'radiobutton', + type : 'select', + display : 'radiobutton', init : 'false', data : [ { diff --git a/config/plugins/visualizations/charts/static/library/datasets.js b/config/plugins/visualizations/charts/static/library/datasets.js index 9b73d3b8636..9afc78e92f8 100644 --- a/config/plugins/visualizations/charts/static/library/datasets.js +++ b/config/plugins/visualizations/charts/static/library/datasets.js @@ -1,11 +1,8 @@ -// dependencies -define(['utils/utils'], function(Utils) { - /** * This class handles, formats and caches datasets. */ -return Backbone.Collection.extend( -{ +define( [ 'utils/utils' ], function( Utils ) { +return Backbone.Collection.extend({ // list of datasets list: {}, @@ -14,10 +11,7 @@ return Backbone.Collection.extend( // initialize initialize: function(app, options){ - // link app this.app = app; - - // configure options this.options = Utils.merge(options, this.optionsDefault); }, diff --git a/config/plugins/visualizations/charts/static/library/jobs.js b/config/plugins/visualizations/charts/static/library/jobs.js index a8c23b30955..89310639f0b 100644 --- a/config/plugins/visualizations/charts/static/library/jobs.js +++ b/config/plugins/visualizations/charts/static/library/jobs.js @@ -1,190 +1,153 @@ -// dependencies -define(['utils/utils'], function(Utils) { - /** * This class handles job submissions to the charts tool. */ -return Backbone.Model.extend({ - // initialize - initialize: function(app, options) { - // link app - this.app = app; +define( [ 'utils/utils' ], function( Utils ) { + return Backbone.Model.extend({ + initialize: function( app, options ) { + this.app = app; + this.options = Utils.merge( options, this.optionsDefault ); + }, - // link options - this.options = Utils.merge(options, this.optionsDefault); - }, - - // request job results - request: function(chart, settings_string, columns_string, success, error) { - // link this - var self = this; - - // set chart state - chart.state('wait', 'Requesting job results...'); - - // get dataset job id if already set - var dataset_id_job = chart.get('dataset_id_job'); - if (dataset_id_job != '') { - // wait for job completion - self._wait(chart, success, error); - } else { - // post job - self._submit(chart, settings_string, columns_string, success, error); - } - }, - - // clean - cleanup: function(chart) { - // link this - var self = this; - - // cleanup previous dataset file - var previous = chart.get('dataset_id_job'); - if (previous != '') { - Utils.request({ - type : 'PUT', - url : config.root + 'api/histories/none/contents/' + previous, - data : { deleted: true }, - success : function() { - // update galaxy history - self._refreshHdas(); - } - }); - - // reset id - chart.set('dataset_id_job', ''); - } - }, - - // create job - _submit: function(chart, settings_string, columns_string, success, error) { - // link this - var self = this; - - // backup chart details - var chart_id = chart.id; - var chart_type = chart.get('type'); - - // get chart settings - var chart_definition = chart.definition; - - // configure tool - data = { - 'tool_id' : 'charts', - 'inputs' : { - 'input' : { - 'id' : chart.get('dataset_id'), - 'src' : 'hda' - }, - 'module' : chart_definition.execute, - 'columns' : columns_string, - 'settings' : settings_string + /* Request job results */ + request: function( chart, settings_string, columns_string, success, error ) { + var self = this; + chart.state( 'wait', 'Requesting job results...' ); + var dataset_id_job = chart.get( 'dataset_id_job' ); + if (dataset_id_job != '') { + self._wait( chart, success, error ); + } else { + self._submit( chart, settings_string, columns_string, success, error ); } - } + }, - // set chart state - chart.state('wait', 'Sending job request...'); + /* Remove previous data when re-running jobs */ + cleanup: function( chart ) { + var self = this; + var previous = chart.get( 'dataset_id_job' ); + if (previous != '') { + Utils.request({ + type : 'PUT', + url : config.root + 'api/histories/none/contents/' + previous, + data : { deleted: true }, + success : function() { + self._refreshHdas(); + } + }); + chart.set( 'dataset_id_job', '' ); + } + }, - // post job - Utils.request({ - type : 'POST', - url : config.root + 'api/tools', - data : data, - success : function(response) { - if (!response.outputs || response.outputs.length == 0) { - chart.state('failed', 'Job submission failed. No response.'); + // create job + _submit: function(chart, settings_string, columns_string, success, error) { + // link this + var self = this; + + // backup chart details + var chart_id = chart.id; + var chart_type = chart.get('type'); + + // get chart settings + var chart_definition = chart.definition; + + // configure tool + data = { + 'tool_id' : 'charts', + 'inputs' : { + 'input' : { + 'id' : chart.get('dataset_id'), + 'src' : 'hda' + }, + 'module' : chart_definition.execute, + 'columns' : columns_string, + 'settings' : settings_string + } + } + + // set chart state + chart.state('wait', 'Sending job request...'); + + // post job + Utils.request({ + type : 'POST', + url : config.root + 'api/tools', + data : data, + success : function(response) { + if (!response.outputs || response.outputs.length == 0) { + chart.state('failed', 'Job submission failed. No response.'); + + // call error + error && error(); + } else { + // update galaxy history + self._refreshHdas(); + + // get dataset + var job = response.outputs[0]; + + // check dataset + chart.state('wait', 'Your job has been queued. You may close the browser window. The job will run in the background.'); + + // backup resulting dataset id + chart.set('dataset_id_job', job.id); + + // save + self.app.storage.save(); + + // wait for job completion + self._wait(chart, success, error); + } + }, + error : function(response) { + var message = ''; + if (response && response.message && response.message.data && response.message.data.input) { + message = response.message.data.input + '.'; + } + + // update state + chart.state('failed', 'This visualization requires the \'charts\' tool. Please make sure it is installed. ' + message); // call error error && error(); - } else { - // update galaxy history - self._refreshHdas(); + + } + }); + }, - // get dataset - var job = response.outputs[0]; - - // check dataset - chart.state('wait', 'Your job has been queued. You may close the browser window. The job will run in the background.'); - - // backup resulting dataset id - chart.set('dataset_id_job', job.id); - - // save - self.app.storage.save(); - - // wait for job completion - self._wait(chart, success, error); + /** Request job details */ + _wait: function( chart, success, error ) { + var self = this; + Utils.request({ + type : 'GET', + url : config.root + 'api/datasets/' + chart.get( 'dataset_id_job' ), + data : {}, + success : function( dataset ) { + var ready = false; + switch ( dataset.state ) { + case 'ok': + chart.state( 'wait', 'Job completed successfully...' ); + success && success( dataset ); + ready = true; + break; + case 'error': + chart.state( 'failed', 'Job has failed. Please check the history for details.' ); + error && error( dataset ); + ready = true; + break; + case 'running': + chart.state( 'wait', 'Your job is running. You may close the browser window. The job will continue in the background.' ); + } + if ( !ready ) { + setTimeout( function() { + self._wait( chart, success, error ); + }, self.app.config.get( 'query_timeout' ) ); + } } - }, - error : function(response) { - var message = ''; - if (response && response.message && response.message.data && response.message.data.input) { - message = response.message.data.input + '.'; - } - - // update state - chart.state('failed', 'This visualization requires the \'charts\' tool. Please make sure it is installed. ' + message); - - // call error - error && error(); - - } - }); - }, - - // request job details - _wait: function(chart, success, error) { - var self = this; - Utils.request({ - type : 'GET', - url : config.root + 'api/datasets/' + chart.get('dataset_id_job'), - data : {}, - success : function(dataset) { - // check dataset state - var ready = false; - switch (dataset.state) { - case 'ok': - // update state - chart.state('wait', 'Job completed successfully...'); - - // execute success - success && success(dataset); - - // stop loop - ready = true; - break; - case 'error': - // update state - chart.state('failed', 'Job has failed. Please check the history for details.'); - - // call error - error && error(dataset); - - // stop loop - ready = true; - break; - case 'running': - // wait - chart.state('wait', 'Your job is running. You may close the browser window. The job will continue in the background.'); - } - - // wait and try again - if (!ready) { - setTimeout(function() { - self._wait(chart, success, error); - }, self.app.config.get('query_timeout')); - } - } - }); - }, - - // refresh history panel - _refreshHdas: function() { - // update galaxy history - if (Galaxy && Galaxy.currHistoryPanel) { - Galaxy.currHistoryPanel.refreshContents(); + }); + }, + + /** Refresh history panel */ + _refreshHdas: function() { + Galaxy && Galaxy.currHistoryPanel && Galaxy.currHistoryPanel.refreshContents(); } - } -}); - + }); }); \ No newline at end of file diff --git a/config/plugins/visualizations/charts/static/library/storage.js b/config/plugins/visualizations/charts/static/library/storage.js index 6d909d8d2a0..9d3e6eca807 100644 --- a/config/plugins/visualizations/charts/static/library/storage.js +++ b/config/plugins/visualizations/charts/static/library/storage.js @@ -1,142 +1,82 @@ -// dependencies -define(['utils/utils', 'plugin/models/chart', 'plugin/models/group', 'mvc/visualization/visualization-model'], function(Utils, Chart, Group) { - /** * This class saves and loads a chart through the api. */ -return Backbone.Model.extend({ - // viz model - vis: null, - - // initialize - initialize: function(app) { - // link app - this.app = app; - - // link chart - this.chart = this.app.chart; - - // link options - this.options = this.app.options; - - // initialize parameters - this.id = this.options.id; - - // create visualization - this.vis = new Visualization({ - type : 'charts', - config : { - dataset_id : this.options.config.dataset_id, - chart_dict : {} - } - }); - - // add visualization id - if (this.id) { - this.vis.id = this.id; - } - - // add charts - var chart_dict = this.options.config.chart_dict; - if (chart_dict) { - this.vis.get('config').chart_dict = chart_dict; - } - }, - - // pack and save nested chart model - save: function() { - // link chart - var chart = this.app.chart; - - // reset - this.vis.get('config').chart_dict = {}; - - // set title - var title = chart.get('title'); - if (title != '') { - this.vis.set('title', title); - } - - // create chart dictionary - var chart_dict = { - attributes : chart.attributes, - settings : chart.settings.attributes, - groups : [] - }; - - // append groups - chart.groups.each(function(group) { - chart_dict.groups.push(group.attributes); - }); - - // add chart to charts array - this.vis.get('config').chart_dict = chart_dict; - - // save visualization - var self = this; - this.vis.save() - .fail(function(xhr, status, message) { - console.error(xhr, status, message); - }) - .then(function(response) { - if (response && response.id) { - self.id = response.id; + define( [ 'utils/utils', 'plugin/models/chart', 'mvc/visualization/visualization-model' ], + function( Utils, Chart ) { + return Backbone.Model.extend({ + vis: null, + + initialize: function( app ) { + this.app = app; + this.chart = this.app.chart; + this.options = this.app.options; + this.id = this.options.id; + this.vis = new Visualization({ + id : this.id, + type : 'charts', + config : { + dataset_id : this.options.config.dataset_id, + chart_dict : {} } }); - }, - - // load nested models/collections from packed dictionary - load: function() { - // get charts array - var chart_dict = this.vis.get('config').chart_dict; - - // check - if (!chart_dict.attributes) { - return false; - } - - // get chart type - var chart_type = chart_dict.attributes['type']; - - // check chart type - if (!chart_type) { - console.debug('Storage::load() - Chart type not provided. Invalid format.'); - return false; - } - - // get chart definition - var chart_definition = this.app.types.get(chart_type); - if (!chart_definition) { - console.debug('Storage::load() - Chart type not supported. Please re-configure the chart. Resetting chart.'); - return false; - } - - // 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); - - // set state - this.chart.state('ok', 'Loading saved visualization...'); - - // get settings - this.chart.settings.set(chart_dict.settings); - - // get groups - for (var j in chart_dict.groups) { - this.chart.groups.add(new Group(chart_dict.groups[j])); - } - - // reset modified flag - this.chart.set('modified', false); - - // return - return true; - } -}); + var chart_dict = this.options.config.chart_dict; + if ( chart_dict ) { + this.vis.get( 'config' ).chart_dict = chart_dict; + } + }, + /** Pack and save nested chart model */ + save: function() { + var self = this; + var chart = this.app.chart; + var chart_dict = { + attributes : chart.attributes, + settings : chart.settings.attributes, + groups : [] + }; + chart.groups.each( function( group ) { + chart_dict.groups.push( group.attributes ); + }); + this.vis.set( 'title', chart.get( 'title' ) || '' ); + this.vis.get( 'config' ).chart_dict = chart_dict; + this.vis.save().fail(function( xhr, status, message ) { + self.app.showModal( 'Saving failed.', 'An attempt to save this chart to the server failed. Please try again and contact the administrator.' ); + }) + .then( function( response ) { + if ( response && response.id ) { + self.id = response.id; + } else { + console.debug('Storage::save() - Unrecognized response. Saving may have failed.'); + } + }); + }, + + /** Load nested models/collections from packed dictionary */ + load: function() { + var chart_dict = this.vis.get( 'config' ).chart_dict; + if ( !chart_dict.attributes ) { + console.debug('Storage::load() - Chart attributes not found. Invalid format.'); + return false; + } + var chart_type = chart_dict.attributes[ 'type' ]; + if ( !chart_type ) { + console.debug('Storage::load() - Chart type not provided. Invalid format.'); + return false; + } + var chart_definition = this.app.types.get( chart_type ); + if ( !chart_definition ) { + console.debug('Storage::load() - Chart type not supported. Please re-configure the chart. Resetting chart.'); + return false; + } + this.chart.definition = chart_definition; + this.chart.set( chart_dict.attributes ); + this.chart.state( 'ok', 'Loading saved visualization...' ); + this.chart.settings.set( chart_dict.settings ); + this.chart.groups.reset(); + this.chart.groups.add( chart_dict.groups ); + this.chart.set( 'modified', false ); + console.debug('Storage::load() - Loading chart type ' + chart_type + '.'); + return true; + } + }); }); \ No newline at end of file diff --git a/config/plugins/visualizations/charts/static/library/ui-table-form.js b/config/plugins/visualizations/charts/static/library/ui-table-form.js deleted file mode 100644 index 2a8c76d8d5d..00000000000 --- a/config/plugins/visualizations/charts/static/library/ui-table-form.js +++ /dev/null @@ -1,244 +0,0 @@ -// dependencies -define(['mvc/ui/ui-table', 'mvc/ui/ui-misc', 'utils/utils'], - function(Table, Ui, Utils) { - -/** - * This class takes a dictionary as input an creates an input form. It uses the Ui.Table element to organize and format the form elements. - */ -var View = Backbone.View.extend({ - // options - optionsDefault: { - title : '', - content : '', - mode : '' - }, - - // elements - list: [], - - // initialize - initialize: function(app, options) { - - // link app - this.app = app; - - // get options - this.options = Utils.merge(options, this.optionsDefault); - - // ui elements - this.table_title = new Ui.Label({title: this.options.title}); - this.table = new Table.View({content: this.options.content}); - - // create element - var $view = $(''); - if (this.options.title) { - $view.append(this.table_title.$el); - } - $view.append(this.table.$el); - - // add element - this.setElement($view); - }, - - // title - title: function(new_title) { - this.table_title.title(new_title); - }, - - // update - update: function(settings, model) { - // reset table - this.table.delAll(); - - // reset list - this.list = []; - - // load settings elements into table - for (var id in settings) { - this._add(settings[id].id || id, settings[id], model); - } - - // trigger change - for (var id in this.list) { - this.list[id].trigger('change'); - } - }, - - // add table row - _add: function(id, settings_def, model) { - // link this - var self = this; - - // field wrapper - var field = null; - - // create select field - var type = settings_def.type; - switch(type) { - // text input field - case 'text' : - field = new Ui.Input({ - id : 'field-' + id, - placeholder : settings_def.placeholder, - value : model.get(id), - onchange : function(value) { - model.set(id, value); - } - }); - break; - // radiobox field - case 'radiobutton' : - field = new Ui.RadioButton.View({ - id : 'field-' + id, - data : settings_def.data, - value : model.get(id), - onchange : function(value) { - // set new value - model.set(id, value); - - // find selected dictionary - var dict = _.findWhere(settings_def.data, {value: value}); - if (dict && dict.operations) { - var operations = dict.operations; - for (var i in operations.show) { - var target = operations.show[i]; - self.table.get(target).show(); - } - for (var i in operations.hide) { - var target = operations.hide[i]; - self.table.get(target).hide(); - } - } - } - }); - break; - // select field - case 'select' : - field = new Ui.Select.View({ - id : 'field-' + id, - data : settings_def.data, - value : model.get(id), - onchange : function(value) { - // set new value - model.set(id, value); - - // find selected dictionary - var dict = _.findWhere(settings_def.data, {value: value}); - if (dict && dict.operations) { - var operations = dict.operations; - for (var i in operations.show) { - var target = operations.show[i]; - self.table.get(target).show(); - } - for (var i in operations.hide) { - var target = operations.hide[i]; - self.table.get(target).hide(); - } - } - } - }); - break; - case 'dataset': - field = new Ui.Select.View({ - id : 'field-' + id, - onchange : function(value) { - // set new value - model.set(id, value); - } - }); - - // link refresh event - self.app.datasets.on('all', function() { - // identify selectables - var selectable = []; - self.app.datasets.each(function(dataset) { - if (dataset.get('datatype_id') == settings_def.data) { - selectable.push({value: dataset.get('id'), label: dataset.get('name')}); - } - }); - - // update select field - field.update(selectable); - - // set value - if (!model.get(id)) { - model.set(id, field.first()); - } - field.value(model.get(id)); - }); - - // trigger change - self.app.datasets.trigger('all.datasets'); - break; - // slider input field - case 'textarea' : - field = new Ui.Textarea({ - id : 'field-' + id, - onchange : function() { - model.set(id, field.value()); - } - }); - break; - - // separator - case 'separator' : - field = $(''); - break; - - // default - default: - field = new Ui.Input({ - id : 'field-' + id, - placeholder : settings_def.placeholder, - type : settings_def.type, - onchange : function() { - model.set(id, field.value()); - } - }); - } - - // set value - if (type != 'separator') { - if (!model.get(id)) { - model.set(id, settings_def.init); - } - field.value(model.get(id)); - - // add list - this.list[id] = field; - - // combine field and info - var $input = $(''); - $input.append(field.$el); - if (settings_def.info) { - $input.append('' + settings_def.info + '
');
- }
-
- // add row to table
- if (this.options.style == 'bold') {
- this.table.add(new Ui.Label({title: settings_def.title, cls: 'form-label'}).$el);
- this.table.add($input);
- } else {
- this.table.add('' + settings_def.title + '', '25%');
- this.table.add($input);
- }
- } else {
- this.table.add('' + settings_def.title + ':');
- this.table.add($(''));
- }
-
- // add to table
- this.table.append(id);
-
- // show/hide
- if (settings_def.hide) {
- this.table.get(id).hide();
- }
- }
-});
-
-return {
- View : View
-}
-
-});
\ No newline at end of file
diff --git a/config/plugins/visualizations/charts/static/models/chart.js b/config/plugins/visualizations/charts/static/models/chart.js
index b240e450056..d5969cc5b3f 100644
--- a/config/plugins/visualizations/charts/static/models/chart.js
+++ b/config/plugins/visualizations/charts/static/models/chart.js
@@ -1,67 +1,58 @@
-// dependencies
-define(['plugin/models/groups'], function(Groups) {
+define( [], function() {
+ var Groups = Backbone.Collection.extend({
+ model: Backbone.Model.extend({
+ defaults : {
+ key : 'Data label',
+ date : ''
+ },
-// model
-return Backbone.Model.extend({
- // defaults
- defaults : {
- id : null,
- title : '',
- type : '',
- date : null,
- state : '',
- state_info : '',
- modified : false,
- dataset_id : '',
- dataset_id_job : ''
- },
-
- // initialize
- initialize: function(options) {
- this.groups = new Groups();
- this.settings = new Backbone.Model();
- },
-
- // reset
- reset: function() {
- this.clear({silent: true}).set(this.defaults);
- this.groups.reset();
- this.settings.clear();
- this.trigger('reset', this);
- },
-
- // copy
- copy: function(new_chart) {
- // copy chart/groups
- var current = this;
-
- // set attributes
- current.clear({silent: true}).set(this.defaults);
- current.set(new_chart.attributes);
-
- // set nested models/collections
- current.settings = new_chart.settings.clone();
- current.groups.reset();
- new_chart.groups.each(function(group) {
- current.groups.add(group.clone());
- });
-
- // trigger change
- current.trigger('change', current);
- },
-
- // set state
- state: function(value, info) {
- // set status
- this.set('state', value);
- this.set('state_info', info);
-
- // trigger set state
- this.trigger('set:state');
-
- // log status
- console.debug('Chart:state() - ' + info + ' (' + value + ')');
- }
-});
+ reset: function(){
+ this.clear( { silent: true } ).set( this.defaults );
+ this.trigger( 'reset', this );
+ }
+ })
+ });
+ return Backbone.Model.extend({
+ defaults : {
+ id : null,
+ title : '',
+ type : '',
+ date : null,
+ state : '',
+ state_info : '',
+ modified : false,
+ dataset_id : '',
+ dataset_id_job : ''
+ },
+ initialize: function( options ) {
+ this.groups = new Groups();
+ this.settings = new Backbone.Model();
+ },
+
+ reset: function() {
+ this.clear( { silent: true } ).set( this.defaults );
+ this.groups.reset();
+ this.settings.clear();
+ this.trigger( 'reset', this );
+ },
+
+ copy: function( new_chart ) {
+ var current = this;
+ current.clear( { silent: true } ).set( this.defaults );
+ current.set( new_chart.attributes );
+ current.settings = new_chart.settings.clone();
+ current.groups.reset();
+ new_chart.groups.each( function( group ) {
+ current.groups.add( group.clone() );
+ });
+ current.trigger( 'change', current );
+ },
+
+ state: function( value, info ) {
+ this.set( { 'state': value, 'state_info': info } );
+ this.trigger( 'set:state' );
+ console.debug( 'Chart:state() - ' + info + ' (' + value + ')' );
+ }
+ });
});
\ No newline at end of file
diff --git a/config/plugins/visualizations/charts/static/models/config.js b/config/plugins/visualizations/charts/static/models/config.js
index feea974e2e6..f44c82e4bd1 100644
--- a/config/plugins/visualizations/charts/static/models/config.js
+++ b/config/plugins/visualizations/charts/static/models/config.js
@@ -1,13 +1,8 @@
-// dependencies
-define([], function() {
-
-// model
-return Backbone.Model.extend({
- // options
- defaults : {
- query_limit : 10000,
- query_timeout : 100
- }
-});
-
+define( [], function() {
+ return Backbone.Model.extend({
+ defaults : {
+ query_limit : 1000,
+ query_timeout : 100
+ }
+ });
});
\ No newline at end of file
diff --git a/config/plugins/visualizations/charts/static/models/group.js b/config/plugins/visualizations/charts/static/models/group.js
deleted file mode 100644
index f6043867157..00000000000
--- a/config/plugins/visualizations/charts/static/models/group.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// dependencies
-define([], function() {
-
-// model
-return Backbone.Model.extend({
- // options
- defaults : {
- key : 'Data label',
- date : ''
- },
-
- // reset
- reset: function(){
- this.clear({silent: true}).set(this.defaults);
- this.trigger('reset', this);
- }
-});
-
-});
\ No newline at end of file
diff --git a/config/plugins/visualizations/charts/static/models/groups.js b/config/plugins/visualizations/charts/static/models/groups.js
deleted file mode 100644
index 71c3f7da97b..00000000000
--- a/config/plugins/visualizations/charts/static/models/groups.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// dependencies
-define(['plugin/models/group'], function(Group) {
-
-// collection
-return Backbone.Collection.extend({
- model: Group
-});
-
-});
\ No newline at end of file
diff --git a/config/plugins/visualizations/charts/static/plugins/nvd3/nv.d3.css b/config/plugins/visualizations/charts/static/plugins/nvd3/nv.d3.css
index d46f7ebce24..239982add3f 100644
--- a/config/plugins/visualizations/charts/static/plugins/nvd3/nv.d3.css
+++ b/config/plugins/visualizations/charts/static/plugins/nvd3/nv.d3.css
@@ -1 +1 @@
-.chartWrap{margin:0;padding:0;overflow:hidden}.nvtooltip.with-3d-shadow,.with-3d-shadow .nvtooltip{-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.nvtooltip{position:absolute;background-color:rgba(255,255,255,1);padding:1px;border:1px solid rgba(0,0,0,.2);z-index:10000;font-family:Arial;font-size:13px;text-align:left;pointer-events:none;white-space:nowrap;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.nvtooltip.with-transitions,.with-transitions .nvtooltip{transition:opacity 250ms linear;-moz-transition:opacity 250ms linear;-webkit-transition:opacity 250ms linear;transition-delay:250ms;-moz-transition-delay:250ms;-webkit-transition-delay:250ms}.nvtooltip.x-nvtooltip,.nvtooltip.y-nvtooltip{padding:8px}.nvtooltip h3{margin:0;padding:4px 14px;line-height:18px;font-weight:400;background-color:rgba(247,247,247,.75);text-align:center;border-bottom:1px solid #ebebeb;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.nvtooltip p{margin:0;padding:5px 14px;text-align:center}.nvtooltip span{display:inline-block;margin:2px 0}.nvtooltip table{margin:6px;border-spacing:0}.nvtooltip table td{padding:2px 9px 2px 0;vertical-align:middle}.nvtooltip table td.key{font-weight:400}.nvtooltip table td.value{text-align:right;font-weight:700}.nvtooltip table tr.highlight td{padding:1px 9px 1px 0;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px}.nvtooltip table td.legend-color-guide div{width:8px;height:8px;vertical-align:middle}.nvtooltip .footer{padding:3px;text-align:center}.nvtooltip-pending-removal{position:absolute;pointer-events:none}svg{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;height:100%}svg text{font:400 12px Arial}svg .title{font:700 14px Arial}.nvd3 .nv-background{fill:#fff;fill-opacity:0}.nvd3.nv-noData{font-size:18px;font-weight:700}.nv-brush .extent{fill-opacity:.125;shape-rendering:crispEdges}.nvd3 .nv-legend .nv-series{cursor:pointer}.nvd3 .nv-legend .disabled circle{fill-opacity:0}.nvd3 .nv-axis{pointer-events:none}.nvd3 .nv-axis path{fill:none;stroke:#000;stroke-opacity:.75;shape-rendering:crispEdges}.nvd3 .nv-axis path.domain{stroke-opacity:.75}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:0}.nvd3 .nv-axis line{fill:none;stroke:#e5e5e5;shape-rendering:crispEdges}.nvd3 .nv-axis .zero line,.nvd3 .nv-axis line.zero{stroke-opacity:.75}.nvd3 .nv-axis .nv-axisMaxMin text{font-weight:700}.nvd3 .x .nv-axis .nv-axisMaxMin text,.nvd3 .x2 .nv-axis .nv-axisMaxMin text,.nvd3 .x3 .nv-axis .nv-axisMaxMin text{text-anchor:middle}.nv-brush .resize path{fill:#eee;stroke:#666}.nvd3 .nv-bars .negative rect{zfill:brown}.nvd3 .nv-bars rect{zfill:#4682b4;fill-opacity:.75;transition:fill-opacity 250ms linear;-moz-transition:fill-opacity 250ms linear;-webkit-transition:fill-opacity 250ms linear}.nvd3 .nv-bars rect.hover{fill-opacity:1}.nvd3 .nv-bars .hover rect{fill:#add8e6}.nvd3 .nv-bars text{fill:rgba(0,0,0,0)}.nvd3 .nv-bars .hover text{fill:rgba(0,0,0,1)}.nvd3 .nv-multibar .nv-groups rect,.nvd3 .nv-multibarHorizontal .nv-groups rect,.nvd3 .nv-discretebar .nv-groups rect{stroke-opacity:0;transition:fill-opacity 250ms linear;-moz-transition:fill-opacity 250ms linear;-webkit-transition:fill-opacity 250ms linear}.nvd3 .nv-multibar .nv-groups rect:hover,.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,.nvd3 .nv-discretebar .nv-groups rect:hover{fill-opacity:1}.nvd3 .nv-discretebar .nv-groups text,.nvd3 .nv-multibarHorizontal .nv-groups text{font-weight:700;fill:rgba(0,0,0,1);stroke:rgba(0,0,0,0)}.nvd3.nv-pie path{stroke-opacity:0;transition:fill-opacity 250ms linear,stroke-width 250ms linear,stroke-opacity 250ms linear;-moz-transition:fill-opacity 250ms linear,stroke-width 250ms linear,stroke-opacity 250ms linear;-webkit-transition:fill-opacity 250ms linear,stroke-width 250ms linear,stroke-opacity 250ms linear}.nvd3.nv-pie .nv-slice text{stroke:#000;stroke-width:0}.nvd3.nv-pie path{stroke:#fff;stroke-width:1px;stroke-opacity:1}.nvd3.nv-pie .hover path{fill-opacity:.7}.nvd3.nv-pie .nv-label{pointer-events:none}.nvd3.nv-pie .nv-label rect{fill-opacity:0;stroke-opacity:0}.nvd3 .nv-groups path.nv-line{fill:none;stroke-width:1.5px}.nvd3 .nv-groups path.nv-line.nv-thin-line{stroke-width:1px}.nvd3 .nv-groups path.nv-area{stroke:none}.nvd3 .nv-line.hover path{stroke-width:6px}.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point{fill-opacity:0;stroke-opacity:0}.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point{fill-opacity:.5!important;stroke-opacity:.5!important}.with-transitions .nvd3 .nv-groups .nv-point{transition:stroke-width 250ms linear,stroke-opacity 250ms linear;-moz-transition:stroke-width 250ms linear,stroke-opacity 250ms linear;-webkit-transition:stroke-width 250ms linear,stroke-opacity 250ms linear}.nvd3.nv-scatter .nv-groups .nv-point.hover,.nvd3 .nv-groups .nv-point.hover{stroke-width:7px;fill-opacity:.95!important;stroke-opacity:.95!important}.nvd3 .nv-point-paths path{stroke:#aaa;stroke-opacity:0;fill:#eee;fill-opacity:0}.nvd3 .nv-indexLine{cursor:ew-resize}.nvd3 .nv-distribution{pointer-events:none}.nvd3 .nv-groups .nv-point.hover{stroke-width:20px;stroke-opacity:.5}.nvd3 .nv-scatter .nv-point.hover{fill-opacity:1}.nvd3.nv-stackedarea path.nv-area{fill-opacity:.7;stroke-opacity:0;transition:fill-opacity 250ms linear,stroke-opacity 250ms linear;-moz-transition:fill-opacity 250ms linear,stroke-opacity 250ms linear;-webkit-transition:fill-opacity 250ms linear,stroke-opacity 250ms linear}.nvd3.nv-stackedarea path.nv-area.hover{fill-opacity:.9}.nvd3.nv-stackedarea .nv-groups .nv-point{stroke-opacity:0;fill-opacity:0}.nvd3.nv-linePlusBar .nv-bar rect{fill-opacity:.75}.nvd3.nv-linePlusBar .nv-bar rect:hover{fill-opacity:1}.nvd3.nv-bullet{font:10px sans-serif}.nvd3.nv-bullet .nv-measure{fill-opacity:.8}.nvd3.nv-bullet .nv-measure:hover{fill-opacity:1}.nvd3.nv-bullet .nv-marker{stroke:#000;stroke-width:2px}.nvd3.nv-bullet .nv-markerTriangle{stroke:#000;fill:#fff;stroke-width:1.5px}.nvd3.nv-bullet .nv-tick line{stroke:#666;stroke-width:.5px}.nvd3.nv-bullet .nv-range.nv-s0{fill:#eee}.nvd3.nv-bullet .nv-range.nv-s1{fill:#ddd}.nvd3.nv-bullet .nv-range.nv-s2{fill:#ccc}.nvd3.nv-bullet .nv-title{font-size:14px;font-weight:700}.nvd3.nv-bullet .nv-subtitle{fill:#999}.nvd3.nv-bullet .nv-range{fill:#bababa;fill-opacity:.4}.nvd3.nv-bullet .nv-range:hover{fill-opacity:.7}.nvd3.nv-sparkline path{fill:none}.nvd3.nv-sparklineplus g.nv-hoverValue{pointer-events:none}.nvd3.nv-sparklineplus .nv-hoverValue line{stroke:#333;stroke-width:1.5px}.nvd3.nv-sparklineplus,.nvd3.nv-sparklineplus g{pointer-events:all}.nvd3 .nv-hoverArea{fill-opacity:0;stroke-opacity:0}.nvd3.nv-sparklineplus .nv-xValue,.nvd3.nv-sparklineplus .nv-yValue{stroke-width:0;font-size:.9em;font-weight:400}.nvd3.nv-sparklineplus .nv-yValue{stroke:#f66}.nvd3.nv-sparklineplus .nv-maxValue{stroke:#2ca02c;fill:#2ca02c}.nvd3.nv-sparklineplus .nv-minValue{stroke:#d62728;fill:#d62728}.nvd3.nv-sparklineplus .nv-currentValue{font-weight:700;font-size:1.1em}.nvd3.nv-ohlcBar .nv-ticks .nv-tick{stroke-width:2px}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover{stroke-width:4px}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive{stroke:#2ca02c}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative{stroke:#d62728}.nvd3.nv-historicalStockChart .nv-axis .nv-axislabel{font-weight:700}.nvd3.nv-historicalStockChart .nv-dragTarget{fill-opacity:0;stroke:none;cursor:move}.nvd3 .nv-brush .extent{fill-opacity:0!important}.nvd3 .nv-brushBackground rect{stroke:#000;stroke-width:.4;fill:#fff;fill-opacity:.7}.nvd3.nv-indentedtree .name{margin-left:5px}.nvd3.nv-indentedtree .clickable{color:#08C;cursor:pointer}.nvd3.nv-indentedtree span.clickable:hover{color:#005580;text-decoration:underline}.nvd3.nv-indentedtree .nv-childrenCount{display:inline-block;margin-left:5px}.nvd3.nv-indentedtree .nv-treeicon{cursor:pointer}.nvd3.nv-indentedtree .nv-treeicon.nv-folded{cursor:pointer}.nvd3 .background path{fill:none;stroke:#ccc;stroke-opacity:.4;shape-rendering:crispEdges}.nvd3 .foreground path{fill:none;stroke:#4682b4;stroke-opacity:.7}.nvd3 .brush .extent{fill-opacity:.3;stroke:#fff;shape-rendering:crispEdges}.nvd3 .axis line,.axis path{fill:none;stroke:#000;shape-rendering:crispEdges}.nvd3 .axis text{text-shadow:0 1px 0 #fff}.nvd3 .nv-interactiveGuideLine{pointer-events:none}.nvd3 line.nv-guideline{stroke:#ccc}
\ No newline at end of file
+.chartWrap{margin:0;padding:0;overflow:hidden}.nvtooltip.with-3d-shadow,.with-3d-shadow .nvtooltip{-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.nvtooltip{position:absolute;background-color:rgba(255,255,255,1);padding:1px;border:1px solid rgba(0,0,0,.2);z-index:10000;font-family:Arial;font-size:13px;text-align:left;pointer-events:none;white-space:nowrap;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.nvtooltip.with-transitions,.with-transitions .nvtooltip{transition:opacity 250ms linear;-moz-transition:opacity 250ms linear;-webkit-transition:opacity 250ms linear;transition-delay:250ms;-moz-transition-delay:250ms;-webkit-transition-delay:250ms}.nvtooltip.x-nvtooltip,.nvtooltip.y-nvtooltip{padding:8px}.nvtooltip h3{margin:0;padding:4px 14px;line-height:18px;font-weight:400;background-color:rgba(247,247,247,.75);text-align:center;border-bottom:1px solid #ebebeb;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.nvtooltip p{margin:0;padding:5px 14px;text-align:center}.nvtooltip span{display:inline-block;margin:2px 0}.nvtooltip table{margin:6px;border-spacing:0}.nvtooltip table td{padding:2px 9px 2px 0;vertical-align:middle}.nvtooltip table td.key{font-weight:400}.nvtooltip table td.value{text-align:right;font-weight:700}.nvtooltip table tr.highlight td{padding:1px 9px 1px 0;border-bottom-style:solid;border-bottom-width:1px;border-top-style:solid;border-top-width:1px}.nvtooltip table td.legend-color-guide div{width:8px;height:8px;vertical-align:middle}.nvtooltip .footer{padding:3px;text-align:center}.nvtooltip-pending-removal{position:absolute;pointer-events:none}svg{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;height:100%}svg text{font:400 12px Arial}svg .title{font:700 14px Arial}.nvd3 .nv-background{fill:#fff;fill-opacity:0}.nvd3.nv-noData{font-size:18px;font-weight:700}.nv-brush .extent{fill-opacity:.125;shape-rendering:crispEdges}.nvd3 .nv-legend .nv-series{cursor:pointer}.nvd3 .nv-legend .disabled circle{fill-opacity:0}.nvd3 .nv-axis{pointer-events:none}.nvd3 .nv-axis path{fill:none;stroke:#000;stroke-opacity:.75;shape-rendering:crispEdges}.nvd3 .nv-axis path.domain{stroke-opacity:.75}.nvd3 .nv-axis.nv-x path.domain{stroke-opacity:0}.nvd3 .nv-axis text{font-size:11px} .nv-axis line{fill:none;stroke:#e5e5e5;shape-rendering:crispEdges}.nvd3 .nv-axis .zero line,.nvd3 .nv-axis line.zero{stroke-opacity:.75}.nvd3 .nv-axis .nv-axisMaxMin text{font-weight:700}.nvd3 .x .nv-axis .nv-axisMaxMin text,.nvd3 .x2 .nv-axis .nv-axisMaxMin text,.nvd3 .x3 .nv-axis .nv-axisMaxMin text{text-anchor:middle}.nv-brush .resize path{fill:#eee;stroke:#666}.nvd3 .nv-bars .negative rect{zfill:brown}.nvd3 .nv-bars rect{zfill:#4682b4;fill-opacity:.75;transition:fill-opacity 250ms linear;-moz-transition:fill-opacity 250ms linear;-webkit-transition:fill-opacity 250ms linear}.nvd3 .nv-bars rect.hover{fill-opacity:1}.nvd3 .nv-bars .hover rect{fill:#add8e6}.nvd3 .nv-bars text{fill:rgba(0,0,0,0)}.nvd3 .nv-bars .hover text{fill:rgba(0,0,0,1)}.nvd3 .nv-multibar .nv-groups rect,.nvd3 .nv-multibarHorizontal .nv-groups rect,.nvd3 .nv-discretebar .nv-groups rect{stroke-opacity:0;transition:fill-opacity 250ms linear;-moz-transition:fill-opacity 250ms linear;-webkit-transition:fill-opacity 250ms linear}.nvd3 .nv-multibar .nv-groups rect:hover,.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,.nvd3 .nv-discretebar .nv-groups rect:hover{fill-opacity:1}.nvd3 .nv-discretebar .nv-groups text,.nvd3 .nv-multibarHorizontal .nv-groups text{font-weight:700;fill:rgba(0,0,0,1);stroke:rgba(0,0,0,0)}.nvd3.nv-pie path{stroke-opacity:0;transition:fill-opacity 250ms linear,stroke-width 250ms linear,stroke-opacity 250ms linear;-moz-transition:fill-opacity 250ms linear,stroke-width 250ms linear,stroke-opacity 250ms linear;-webkit-transition:fill-opacity 250ms linear,stroke-width 250ms linear,stroke-opacity 250ms linear}.nvd3.nv-pie .nv-slice text{stroke:#000;stroke-width:0}.nvd3.nv-pie path{stroke:#fff;stroke-width:1px;stroke-opacity:1}.nvd3.nv-pie .hover path{fill-opacity:.7}.nvd3.nv-pie .nv-label{pointer-events:none}.nvd3.nv-pie .nv-label rect{fill-opacity:0;stroke-opacity:0}.nvd3 .nv-groups path.nv-line{fill:none;stroke-width:1.5px}.nvd3 .nv-groups path.nv-line.nv-thin-line{stroke-width:1px}.nvd3 .nv-groups path.nv-area{stroke:none}.nvd3 .nv-line.hover path{stroke-width:6px}.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point{fill-opacity:0;stroke-opacity:0}.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point{fill-opacity:.5!important;stroke-opacity:.5!important}.with-transitions .nvd3 .nv-groups .nv-point{transition:stroke-width 250ms linear,stroke-opacity 250ms linear;-moz-transition:stroke-width 250ms linear,stroke-opacity 250ms linear;-webkit-transition:stroke-width 250ms linear,stroke-opacity 250ms linear}.nvd3.nv-scatter .nv-groups .nv-point.hover,.nvd3 .nv-groups .nv-point.hover{stroke-width:7px;fill-opacity:.95!important;stroke-opacity:.95!important}.nvd3 .nv-point-paths path{stroke:#aaa;stroke-opacity:0;fill:#eee;fill-opacity:0}.nvd3 .nv-indexLine{cursor:ew-resize}.nvd3 .nv-distribution{pointer-events:none}.nvd3 .nv-groups .nv-point.hover{stroke-width:20px;stroke-opacity:.5}.nvd3 .nv-scatter .nv-point.hover{fill-opacity:1}.nvd3.nv-stackedarea path.nv-area{fill-opacity:.7;stroke-opacity:0;transition:fill-opacity 250ms linear,stroke-opacity 250ms linear;-moz-transition:fill-opacity 250ms linear,stroke-opacity 250ms linear;-webkit-transition:fill-opacity 250ms linear,stroke-opacity 250ms linear}.nvd3.nv-stackedarea path.nv-area.hover{fill-opacity:.9}.nvd3.nv-stackedarea .nv-groups .nv-point{stroke-opacity:0;fill-opacity:0}.nvd3.nv-linePlusBar .nv-bar rect{fill-opacity:.75}.nvd3.nv-linePlusBar .nv-bar rect:hover{fill-opacity:1}.nvd3.nv-bullet{font:10px sans-serif}.nvd3.nv-bullet .nv-measure{fill-opacity:.8}.nvd3.nv-bullet .nv-measure:hover{fill-opacity:1}.nvd3.nv-bullet .nv-marker{stroke:#000;stroke-width:2px}.nvd3.nv-bullet .nv-markerTriangle{stroke:#000;fill:#fff;stroke-width:1.5px}.nvd3.nv-bullet .nv-tick line{stroke:#666;stroke-width:.5px}.nvd3.nv-bullet .nv-range.nv-s0{fill:#eee}.nvd3.nv-bullet .nv-range.nv-s1{fill:#ddd}.nvd3.nv-bullet .nv-range.nv-s2{fill:#ccc}.nvd3.nv-bullet .nv-title{font-size:14px;font-weight:700}.nvd3.nv-bullet .nv-subtitle{fill:#999}.nvd3.nv-bullet .nv-range{fill:#bababa;fill-opacity:.4}.nvd3.nv-bullet .nv-range:hover{fill-opacity:.7}.nvd3.nv-sparkline path{fill:none}.nvd3.nv-sparklineplus g.nv-hoverValue{pointer-events:none}.nvd3.nv-sparklineplus .nv-hoverValue line{stroke:#333;stroke-width:1.5px}.nvd3.nv-sparklineplus,.nvd3.nv-sparklineplus g{pointer-events:all}.nvd3 .nv-hoverArea{fill-opacity:0;stroke-opacity:0}.nvd3.nv-sparklineplus .nv-xValue,.nvd3.nv-sparklineplus .nv-yValue{stroke-width:0;font-size:.9em;font-weight:400}.nvd3.nv-sparklineplus .nv-yValue{stroke:#f66}.nvd3.nv-sparklineplus .nv-maxValue{stroke:#2ca02c;fill:#2ca02c}.nvd3.nv-sparklineplus .nv-minValue{stroke:#d62728;fill:#d62728}.nvd3.nv-sparklineplus .nv-currentValue{font-weight:700;font-size:1.1em}.nvd3.nv-ohlcBar .nv-ticks .nv-tick{stroke-width:2px}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover{stroke-width:4px}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive{stroke:#2ca02c}.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative{stroke:#d62728}.nvd3.nv-historicalStockChart .nv-axis .nv-axislabel{font-weight:700}.nvd3.nv-historicalStockChart .nv-dragTarget{fill-opacity:0;stroke:none;cursor:move}.nvd3 .nv-brush .extent{fill-opacity:0!important}.nvd3 .nv-brushBackground rect{stroke:#000;stroke-width:.4;fill:#fff;fill-opacity:.7}.nvd3.nv-indentedtree .name{margin-left:5px}.nvd3.nv-indentedtree .clickable{color:#08C;cursor:pointer}.nvd3.nv-indentedtree span.clickable:hover{color:#005580;text-decoration:underline}.nvd3.nv-indentedtree .nv-childrenCount{display:inline-block;margin-left:5px}.nvd3.nv-indentedtree .nv-treeicon{cursor:pointer}.nvd3.nv-indentedtree .nv-treeicon.nv-folded{cursor:pointer}.nvd3 .background path{fill:none;stroke:#ccc;stroke-opacity:.4;shape-rendering:crispEdges}.nvd3 .foreground path{fill:none;stroke:#4682b4;stroke-opacity:.7}.nvd3 .brush .extent{fill-opacity:.3;stroke:#fff;shape-rendering:crispEdges}.nvd3 .axis line,.axis path{fill:none;stroke:#000;shape-rendering:crispEdges}.nvd3 .axis text{text-shadow:0 1px 0 #fff}.nvd3 .nv-interactiveGuideLine{pointer-events:none}.nvd3 line.nv-guideline{stroke:#ccc}
\ No newline at end of file
diff --git a/config/plugins/visualizations/charts/static/views/editor.js b/config/plugins/visualizations/charts/static/views/editor.js
index 8a6bd3b02e6..f4c7f04603e 100644
--- a/config/plugins/visualizations/charts/static/views/editor.js
+++ b/config/plugins/visualizations/charts/static/views/editor.js
@@ -1,327 +1,169 @@
-// dependencies
-define(['mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils',
- 'plugin/models/chart', 'plugin/models/group',
- 'plugin/views/group', 'plugin/views/settings', 'plugin/views/types'],
- function(Tabs, Ui, Portlet, Utils, Chart, Group, GroupView, SettingsView, TypesView) {
-
/**
* The charts editor holds the tabs for selecting chart types, chart configuration
* and data group selections.
*/
-return Backbone.View.extend({
- // initialize
- initialize: function(app, options){
- // link this
- var self = this;
-
- // link application
- this.app = app;
-
- // get current chart object
- this.chart = this.app.chart;
-
- // message element
- this.message = new Ui.Message();
-
- // create portlet
- this.portlet = new Portlet.View({
- icon : 'fa-bar-chart-o',
- title: 'Editor',
- operations : {
- 'save' : new Ui.ButtonIcon({
- icon : 'fa-save',
- tooltip : 'Draw Chart',
- title : 'Draw',
- onclick : function() {
- self._saveChart();
- }
- }),
- 'back' : new Ui.ButtonIcon({
- icon : 'fa-caret-left',
- tooltip : 'Return to Viewer',
- title : 'Cancel',
- onclick : function() {
- // show viewer/viewport
- self.app.go('viewer');
-
- // reset chart
- self.app.storage.load();
- }
- })
- }
- });
-
- //
- // grid with chart types
- //
- this.types = new TypesView(app, {
- 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.');
+define( [ 'mvc/ui/ui-tabs', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet', 'utils/utils',
+ 'plugin/models/chart', 'plugin/views/settings', 'plugin/views/groups', 'plugin/views/types' ],
+ function( Tabs, Ui, Portlet, Utils, Chart, SettingsView, GroupsView, TypesView ) {
+ return Backbone.View.extend({
+ initialize: function( app, options ){
+ var self = this;
+ this.app = app;
+ this.chart = this.app.chart;
+ this.message = new Ui.Message( { cls: 'ui-margin-bottom' } );
+ this.portlet = new Portlet.View({
+ icon : 'fa-bar-chart-o',
+ title: 'Editor',
+ operations : {
+ 'save' : new Ui.ButtonIcon({
+ icon : 'fa-save',
+ tooltip : 'Draw Chart',
+ title : 'Draw',
+ onclick : function() {
+ self._saveChart();
+ }
+ }),
+ 'back' : new Ui.ButtonIcon({
+ icon : 'fa-caret-left',
+ tooltip : 'Return to Viewer',
+ title : 'Cancel',
+ onclick : function() {
+ self.app.go( 'viewer' );
+ self.app.storage.load();
+ }
+ })
}
-
- // parse chart definition
- self.chart.definition = chart_definition;
-
- // reset type relevant chart content
- self.chart.settings.clear();
-
- // update chart 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();
- }
- });
-
- //
- // tabs
- //
- this.tabs = new Tabs.View({
- title_new : 'Add Data',
- onnew : function() {
- var group = self._addGroupModel();
- self.tabs.show(group.id);
- }
- });
-
- //
- // main/default tab
- //
-
- // construct elements
- this.title = new Ui.Input({
- placeholder: 'Chart title',
- onchange: function() {
- self.chart.set('title', self.title.value());
- }
- });
-
- // append element
- var $main = $('');
- $main.append((new Ui.Label({ title : 'Provide a chart title:'}).$el));
- $main.append(this.title.$el);
- $main.append($('').addClass('ui-form-info').html('This title will appear in the list of \'Saved Visualizations\'. Charts are saved upon creation.'));
- $main.append(this.types.$el.addClass('ui-margin-top'));
-
- // add tab
- this.tabs.add({
- id : 'main',
- title : 'Start',
- $el : $main
- });
-
- //
- // main settings tab
- //
-
- // create settings view
- this.settings = new SettingsView(this.app);
-
- // add tab
- this.tabs.add({
- id : 'settings',
- title : 'Configuration',
- $el : this.settings.$el
- });
-
- // append tabs
- this.portlet.append(this.message.$el.addClass('ui-margin-top'));
- this.portlet.append(this.tabs.$el.addClass('ui-margin-top'));
-
- // elements
- this.setElement(this.portlet.$el);
-
- // hide back button on startup
- this.tabs.hideOperation('back');
-
- // chart events
- var self = this;
- this.chart.on('change:title', function(chart) {
- self._refreshTitle();
- });
- this.chart.on('change:type', function(chart) {
- self.types.value(chart.get('type'));
- });
- this.chart.on('reset', function(chart) {
- self._resetChart();
- });
- this.app.chart.on('redraw', function(chart) {
- self.portlet.showOperation('back');
- });
-
- // groups events
- this.app.chart.groups.on('add', function(group) {
- self._addGroup(group);
- });
- this.app.chart.groups.on('remove', function(group) {
- self._removeGroup(group);
- });
- this.app.chart.groups.on('reset', function(group) {
- self._removeAllGroups();
- });
- this.app.chart.groups.on('change:key', function(group) {
- self._refreshGroupKey();
- });
-
- // reset
- this._resetChart();
- },
+ });
- // hide
- show: function() {
- this.$el.show();
- },
-
- // hide
- hide: function() {
- this.$el.hide();
- },
+ // grid with chart types
+ this.types = new TypesView(app, {
+ onchange : function(chart_type) {
+ var chart_definition = self.app.types.get( chart_type );
+ if ( !chart_definition ) {
+ console.debug('FAILED - Editor::onchange() - Chart type not supported.');
+ }
+ self.chart.definition = chart_definition;
+ self.chart.settings.clear();
+ self.chart.set( { type : chart_type, modified : true } );
+ console.debug( 'Editor::onchange() - Switched chart type.' );
+ },
+ ondblclick : function( chart_id ) {
+ self._saveChart();
+ }
+ });
- // refresh title
- _refreshTitle: function() {
- var title = this.chart.get('title');
- this.portlet.title(title);
- if (this.title.value() != title) {
- this.title.value(title);
- }
- },
-
- // refresh group
- _refreshGroupKey: function() {
- var self = this;
- var counter = 0;
- this.chart.groups.each(function(group) {
- var title = group.get('key', '');
- if (title == '') {
- title = 'Data label';
- }
- self.tabs.title(group.id, ++counter + ': ' + title);
- });
- },
-
- // add group model
- _addGroupModel: function() {
- var group = new Group({
- id : Utils.uid()
- });
- this.chart.groups.add(group);
- return group;
- },
+ // input field for chart title
+ this.title = new Ui.Input({
+ placeholder: 'Chart title',
+ onchange: function() {
+ self.chart.set( 'title', self.title.value() );
+ }
+ });
- // add group tab
- _addGroup: function(group) {
- // link this
- var self = this;
-
- // create view
- var group_view = new GroupView(this.app, {group: group});
-
- // add new tab
- this.tabs.add({
- id : group.id,
- $el : group_view.$el,
- ondel : function() {
- self.chart.groups.remove(group.id);
- }
- });
-
- // update titles
- this._refreshGroupKey();
-
- // reset
- this.chart.set('modified', true);
- },
-
- // remove group
- _removeGroup: function(group) {
- this.tabs.del(group.id);
-
- // update titles
- this._refreshGroupKey();
-
- // reset
- this.chart.set('modified', true);
- },
+ // create tabs
+ this.tabs = new Tabs.View( {} );
+ this.tabs.add({
+ id : 'main',
+ title : 'Start',
+ icon : 'fa fa-bars',
+ tooltip : 'Start by selecting a chart type.',
+ $el : $( '' ).append( ( new Ui.Label( { title : 'Provide a chart title:' } ).$el ) )
+ .append( this.title.$el )
+ .append( $( '' ).addClass( 'ui-form-info' ).html( 'This title will appear in the list of \'Saved Visualizations\'. Charts are saved upon creation.' ) )
+ .append( this.types.$el.addClass( 'ui-margin-top' ) )
+ });
+ this.tabs.add({
+ id : 'settings',
+ title : 'Customize',
+ icon : 'fa-gear',
+ tooltip : 'Customize charts options.',
+ $el : ( new SettingsView( this.app ) ).$el
+ });
+ this.tabs.add({
+ id : 'groups',
+ title : 'Select data',
+ icon : 'fa-database',
+ tooltip : 'Specify your data columns.',
+ $el : ( new GroupsView( this.app ) ).$el
+ });
- // remove group
- _removeAllGroups: function(group) {
- this.tabs.delRemovable();
- },
-
- // reset
- _resetChart: function() {
- // reset chart details
- this.chart.set('id', Utils.uid());
- this.chart.set('type', 'nvd3_bar');
- this.chart.set('dataset_id', this.app.options.config.dataset_id);
- this.chart.set('title', 'New Chart');
-
- // reset back button
- this.portlet.hideOperation('back');
- },
-
- // create chart
- _saveChart: function() {
- // 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;
- }
-
- // 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) {
- if (!valid) {
+ // set elements
+ this.portlet.append( this.message.$el );
+ this.portlet.append( this.tabs.$el.addClass( 'ui-margin-top-large' ) );
+ this.setElement( this.portlet.$el );
+ this.tabs.hideOperation( 'back' );
+
+ // chart events
+ this.chart.on( 'change:title', function( chart ) { self._refreshTitle() } );
+ this.chart.on( 'change:type', function( chart ) { self.types.value( chart.get( 'type' ) ) } );
+ this.chart.on( 'reset', function( chart ) { self._resetChart() } );
+ this.app.chart.on( 'redraw', function( chart ) { self.portlet.showOperation( 'back' ) } );
+ this._resetChart();
+ },
+
+ /** Show editor */
+ show: function() {
+ this.$el.show();
+ },
+
+ /** 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 );
+ },
+
+ /** Reset entire chart */
+ _resetChart: function() {
+ this.chart.set({
+ 'id' : Utils.uid(),
+ 'type' : 'nvd3_bar',
+ 'dataset_id' : this.app.options.config.dataset_id,
+ 'title' : 'New Chart'
+ });
+ this.chart.groups.reset();
+ this.chart.groups.add( { id : Utils.uid() } );
+ this.portlet.hideOperation( 'back' );
+ },
+
+ /** Save chart data */
+ _saveChart: function() {
+ var self = this;
+ this.chart.set({
+ type : this.types.value(),
+ title : this.title.value(),
+ date : Utils.time()
+ });
+ if ( this.chart.groups.length == 0 ) {
+ this.message.update( { message: 'Please specify data columns before drawing the chart.' } );
+ this.tabs.show( 'groups' );
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);
- valid = false;
- return;
+ var valid = true;
+ var chart_def = this.chart.definition;
+ this.chart.groups.each( function( group ) {
+ if ( valid ) {
+ 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( 'groups' );
+ valid = false;
+ }
+ }
}
+ });
+ if ( valid ) {
+ this.app.go( 'viewer' );
+ this.app.deferred.execute( function() {
+ self.app.storage.save();
+ self.chart.trigger( 'redraw' );
+ });
}
- });
-
- // validate if columns have been selected
- if (!valid) {
- return;
}
-
- // show viewport
- this.app.go('viewer');
-
- // wait until chart is ready
- var self = this;
- this.app.deferred.execute(function() {
- // save
- self.app.storage.save();
-
- // trigger redraw
- self.chart.trigger('redraw');
- });
- }
-});
-
+ });
});
\ No newline at end of file
diff --git a/config/plugins/visualizations/charts/static/views/group.js b/config/plugins/visualizations/charts/static/views/group.js
deleted file mode 100644
index b208dd6aff2..00000000000
--- a/config/plugins/visualizations/charts/static/views/group.js
+++ /dev/null
@@ -1,254 +0,0 @@
-// dependencies
-define(['mvc/ui/ui-table', 'mvc/ui/ui-misc', 'utils/utils'],
- function(Table, Ui, Utils) {
-
-/**
- * This class renders the data group selection fields.
- */
-return Backbone.View.extend({
- // initialize
- initialize: function(app, options) {
- // link app
- this.app = app;
-
- // link this
- var self = this;
-
- // get current chart object
- this.chart = this.app.chart;
-
- // access group
- this.group = options.group;
-
- // ui elements
- this.group_key = new Ui.Input({
- placeholder: 'Data label',
- onchange: function(value) {
- self.group.set('key', value);
- }
- });
- this.table = new Table.View({content: 'No data column.'});
-
- // create element
- var $view = $('');
- $view.append((new Ui.Label({title: 'Provide a label:'})).$el);
- $view.append(this.group_key.$el.addClass('ui-margin-bottom'));
- $view.append((new Ui.Label({title: 'Select columns:'})).$el.addClass('ui-margin-top'));
- $view.append(this.table.$el.addClass('ui-margin-bottom'));
-
- // add element
- this.setElement($view);
-
- // change
- var self = this;
- this.chart.on('change:dataset_id', function() {
- self._refreshTable();
- });
- this.chart.on('change:type', function() {
- self._refreshTable();
- });
- this.group.on('change:key', function() {
- self._refreshGroupKey();
- });
- this.group.on('change', function() {
- self._refreshGroup();
- });
-
- // refresh
- this._refreshTable();
- this._refreshGroupKey();
- this._refreshGroup();
- },
-
- // update group selection table
- _refreshTable: function() {
- // identify datasets
- var dataset_id = this.chart.get('dataset_id');
- var chart_type = this.chart.get('type');
-
- // check if dataset is available
- if (!dataset_id || !chart_type) {
- return;
- }
-
- // link this
- var self = this;
-
- // configure 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_definition.columns) {
- // get definition
- var data_def = chart_definition.columns[id];
- if (!data_def) {
- console.debug('Group::_refreshTable() - Skipping column definition.');
- continue;
- }
-
- // create select field
- var select = new Ui.Select.View({
- id : 'select_' + id
- });
-
- // title
- var title = data_def.title;
-
- // is unique
- if (data_def.is_unique) {
- title += ' (all data labels)';
- }
-
- // add row to table
- this.table.add(title, '25%');
- this.table.add(select.$el);
- this.table.append(id);
-
- // add select field to list
- select_list[id] = select;
- }
-
- // loading
- this.chart.state('wait', 'Loading metadata...');
-
- // get dataset
- this.app.deferred.execute(function(process) {
- self.app.datasets.request({
- id : dataset_id,
- success : function(dataset) {
- for (var id in select_list) {
- self._addRow(id, dataset, select_list, chart_definition.columns[id])
- }
- self.chart.state('ok', 'Metadata initialized...');
- process.resolve();
- }
- });
- });
- },
-
- // add row
- _addRow: function(id, dataset, select_list, column_definition) {
- // link this
- var self = this;
-
- // available column options
- 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;
- var is_zero = column_definition.is_zero;
- var is_text = column_definition.is_text;
-
- // configure columns
- var columns = [];
-
- // get select
- var select = select_list[id];
-
- // add auto selection column
- if (is_auto) {
- columns.push({
- 'label' : 'Column: Row Number',
- 'value' : 'auto'
- });
- }
-
- // add zero selection column
- if (is_zero) {
- columns.push({
- 'label' : 'Column: None',
- 'value' : 'zero'
- });
- }
-
- // meta data
- var meta = dataset.metadata_column_types;
- for (var key in meta) {
- // check type
- var valid = false;
- if (meta[key] == 'int' || meta[key] == 'float') {
- valid = is_numeric;
- } else {
- valid = is_text || is_label;
- }
-
- // check type
- if (valid) {
- // add to selection
- columns.push({
- 'label' : 'Column: ' + (parseInt(key) + 1),
- 'value' : key
- });
- }
- }
-
- // update selection list
- select.update(columns);
-
- // set initial value
- if (is_unique && this.chart.groups.first()) {
- this.group.set(id, this.chart.groups.first().get(id));
- }
-
- // update current value
- if (!select.exists(this.group.get(id))) {
- // get first value
- var first = select.first();
-
- // log
- console.debug('Group()::_addRow() - Switching model value from "' + this.group.get(id) + '" to "' + first + '".');
-
- // update model value
- this.group.set(id, first);
- }
-
- // set group value
- select.value(this.group.get(id));
-
- // link group with select field
- this.group.off('change:' + id);
- this.group.on('change:' + id, function(){
- select.value(self.group.get(id));
- });
-
- // link select field with group
- select.setOnChange(function(value) {
- // update model value
- if (is_unique) {
- // update all groups
- self.chart.groups.each(function(group) {
- group.set(id, value);
- });
- } else {
- // only change this group
- self.group.set(id, value);
- }
- self.chart.set('modified', true);
- });
-
- // show select field
- select.show();
- },
-
- // update
- _refreshGroup: function() {
- this.group.set('date', Utils.time());
- },
-
- // update group key
- _refreshGroupKey: function() {
- var key_text = this.group.get('key');
- if (key_text === undefined) {
- key_text = '';
- }
- if (key_text != this.group_key.value()) {
- this.group_key.value(key_text);
- }
- }
-});
-
-});
diff --git a/config/plugins/visualizations/charts/static/views/groups.js b/config/plugins/visualizations/charts/static/views/groups.js
new file mode 100644
index 00000000000..e65b244a3a5
--- /dev/null
+++ b/config/plugins/visualizations/charts/static/views/groups.js
@@ -0,0 +1,90 @@
+/**
+ * This class renders the chart configuration form.
+ */
+define( [ 'mvc/ui/ui-table', 'mvc/ui/ui-misc', 'mvc/form/form-view', 'mvc/form/form-repeat', 'utils/utils' ], function( Table, Ui, Form, Repeat, Utils ) {
+ var GroupView = Backbone.View.extend({
+ initialize: function( app, options ) {
+ var self = this;
+ this.app = app;
+ this.chart = app.chart;
+ this.group = options.group;
+ this.setElement( $( '' ) );
+ this.chart.on( 'change:dataset_id change:type', function() { self.render() } );
+ this.group.on( 'change', function() { self.form && self.form.data.set( self.group ) } );
+ this.render();
+ },
+
+ render: function() {
+ var self = this;
+ var inputs = this.chart.definition.series && this.chart.definition.series.slice() || [];
+ _.each( this.chart.definition.columns, function( column, name ) {
+ inputs.push( { name: name, label: column.title, type: 'select' } );
+ });
+ this.form = new Form( {
+ inputs : inputs,
+ cls : 'ui-portlet-plain'
+ } );
+ this.$el.empty().append( this.form.$el );
+ var dataset_id = this.chart.get( 'dataset_id' );
+ var chart_type = this.chart.get( 'type' );
+ var chart_definition = this.chart.definition;
+ if ( dataset_id && chart_type ) {
+ this.chart.state( 'wait', 'Loading metadata...' );
+ this.app.deferred.execute( function( process ) {
+ self.app.datasets.request({
+ id : dataset_id,
+ success : function( dataset ) {
+ for ( var id in chart_definition.columns ) {
+ var index = self.form.data.match( id );
+ if ( index ) {
+ var columns = [];
+ var select = self.form.field_list[ index ];
+ var input_def = chart_definition.columns[ id ];
+ input_def.is_auto && columns.push( { 'label': 'Column: Row Number', 'value': 'auto' } );
+ input_def.is_zero && columns.push( { 'label' : 'Column: None', 'value' : 'zero' } );
+ var meta = dataset.metadata_column_types;
+ for ( var key in meta ) {
+ var valid = ( [ 'int', 'float' ].indexOf( meta[ key ] ) != -1 && input_def.is_numeric ) || input_def.is_text || input_def.is_label;
+ valid && columns.push( { 'label' : 'Column: ' + ( parseInt( key ) + 1 ), 'value' : key } );
+ }
+ select.update( columns );
+ self.group.set( id, select.value( self.group.get( id ) ) );
+ }
+ }
+ self.chart.state( 'ok', 'Metadata initialized...' );
+ self.form.data.set( self.group );
+ self.form.setOnChange( function() {
+ self.group.set( self.form.data.create() );
+ self.chart.set( 'modified', true );
+ });
+ process.resolve();
+ }
+ });
+ });
+ }
+ }
+ });
+
+ return Backbone.View.extend({
+ initialize: function( app ) {
+ var repeat = new Repeat.View({
+ title : 'Data series',
+ title_new : 'Data series',
+ min : 1,
+ onnew : function() { app.chart.groups.add( { id : Utils.uid() } ) }
+ });
+ this.setElement( repeat.$el );
+ app.chart.groups.on( 'add remove reset', function() { app.chart.set( 'modified', true ) } )
+ .on( 'remove', function( group ) { repeat.del( group.id ) } )
+ .on( 'reset', function() { repeat.delAll() } )
+ .on( 'add', function( group ) {
+ repeat.add({
+ id : group.id,
+ cls : 'ui-portlet-panel',
+ $el : ( new GroupView( app, { group: group } ) ).$el,
+ ondel : function() { app.chart.groups.remove( group ) }
+ });
+ });
+ }
+ });
+});
\ No newline at end of file
diff --git a/config/plugins/visualizations/charts/static/views/settings.js b/config/plugins/visualizations/charts/static/views/settings.js
index 5c03754d672..f0d118c7a2d 100644
--- a/config/plugins/visualizations/charts/static/views/settings.js
+++ b/config/plugins/visualizations/charts/static/views/settings.js
@@ -1,54 +1,76 @@
-// dependencies
-define(['mvc/ui/ui-misc', 'plugin/library/ui-table-form', 'utils/utils'],
- function(Ui, TableForm, Utils) {
-
/**
* This class renders the chart configuration form.
*/
-return Backbone.View.extend({
- // initialize
- initialize: function(app, options) {
- // link app
- this.app = app;
-
- // link this
- var self = this;
-
- // get current chart object
- this.chart = this.app.chart;
-
- // create settings
- this.form = new TableForm.View(app, {
- title : 'Configuration',
- content : 'This chart type does not provide any options.'
- });
-
- // set element
- this.setElement(this.form.$el);
-
- // change
- var self = this;
- this.chart.on('change', function() {
- self._refresh();
- });
- },
-
- // update dataset
- _refresh: function() {
- // get settings
- var chart_definition = this.chart.definition;
-
- // check if chart definition is available
- if (!chart_definition) {
- return;
- }
-
- // set title
- this.form.title(chart_definition.category + ' - ' + chart_definition.title + ':');
-
- // update table form model
- this.form.update(chart_definition.settings, this.chart.settings);
- }
-});
+define( [ 'mvc/ui/ui-table', 'mvc/ui/ui-misc', 'mvc/form/form-parameters', 'utils/utils' ], function( Table, Ui, Parameters, Utils ) {
+ return Backbone.View.extend({
+ initialize: function( app, options ) {
+ var self = this;
+ this.app = app;
+ this.chart = this.app.chart;
+ this.list = [];
+ this.parameters = new Parameters();
+ this.table_title = new Ui.Label({});
+ this.table = new Table.View( { content: 'This chart type does not provide any options.' } );
+ this.setElement( $( '' ).addClass( 'ui-form' )
+ .append( this.table_title.$el )
+ .append( this.table.$el ) );
+ this.chart.on( 'change', function() { self.render() } );
+ },
+ render: function() {
+ var chart_definition = this.chart.definition;
+ if ( chart_definition ) {
+ this.table_title.title( chart_definition.category + ' - ' + chart_definition.title + ':' );
+ this.table.delAll();
+ this.list = [];
+ var settings = chart_definition.settings;
+ for ( var id in settings ) {
+ this._add( settings[ id ].id || id, settings[ id ], this.chart.settings );
+ }
+ for ( var id in this.list ) {
+ this.list[ id ].trigger('change');
+ }
+ }
+ },
+
+ /** Add table row */
+ _add: function( name, settings_def, model ) {
+ var self = this;
+ if ( settings_def.type !== 'separator' ) {
+ switch( settings_def.type ) {
+ case 'select':
+ settings_def.onchange = function( new_value ) {
+ model.set( name, new_value );
+ var dict = _.findWhere( settings_def.data, { value: new_value } );
+ if ( dict && dict.operations ) {
+ var operations = dict.operations;
+ for ( var i in operations.show ) {
+ self.table.get( operations.show[ i ] ).fadeIn( 'fast' );
+ }
+ for ( var i in operations.hide ) {
+ self.table.get( operations.hide[ i ] ).hide();
+ }
+ }
+ };
+ break;
+ default:
+ settings_def.onchange = function( new_value ) { model.set( name, new_value ) };
+ }
+ settings_def.id = name;
+ settings_def.value = model.get( name ) || settings_def.init;
+ model.set( name, settings_def.value );
+ var field = this.parameters.create( settings_def );
+ var $input = $( '' ).append( field.$el );
+ settings_def.info && $input.append( $( '' ).addClass( 'ui-form-info' ).append( settings_def.info ) );
+ this.table.add( $( '' ).addClass( 'ui-form-title' ).append( settings_def.title ), '20%' );
+ this.table.add( $input );
+ this.list[ name ] = field;
+ } else {
+ this.table.add( $( '' ).addClass( 'ui-form-separator' ).append( settings_def.title + ':' ) );
+ this.table.add( $( '' ) );
+ }
+ this.table.append( name );
+ settings_def.hide && this.table.get( name ).hide();
+ }
+ });
});
\ No newline at end of file
diff --git a/config/plugins/visualizations/charts/static/views/types.js b/config/plugins/visualizations/charts/static/views/types.js
index 5b4c1f3d5b2..9ecba0c7a84 100644
--- a/config/plugins/visualizations/charts/static/views/types.js
+++ b/config/plugins/visualizations/charts/static/views/types.js
@@ -1,202 +1,140 @@
-// dependencies
-define(['utils/utils', 'mvc/ui/ui-misc'], function(Utils, Ui) {
-
/**
* This class renders the chart type selection grid.
*/
-return Backbone.View.extend({
- // defaults options
- optionsDefault: {
- onchange : null,
- ondblclick : null
- },
-
- // events
- events : {
- 'click' : '_onclick',
- 'dblclick' : '_ondblclick'
- },
-
- // initialize
- initialize : function(app, options) {
- // link this
- var self = this;
-
- // link app
- this.app = app;
-
- // configure options
- this.options = Utils.merge(options, this.optionsDefault);
-
- // create new element
- var $el = $('');
-
- // add label
- $el.append((new Ui.Label({ title : 'How many data points would you like to analyze?'})).$el);
-
- // construct chart type subset selection buttons
- this.library = new Ui.RadioButton.View({
- data : [ { label: 'Few (<500)', value: 'small' },
- { label: 'Some (<10k)', value: 'medium' },
- { label: 'Many (>10k)', value: 'large' }],
- onchange: function(value) {
- self._filter(value);
+define( [ 'utils/utils', 'mvc/ui/ui-misc' ], function( Utils, Ui ) {
+ return Backbone.View.extend({
+ optionsDefault: {
+ onchange : null,
+ ondblclick : null
+ },
+
+ events : {
+ 'click' : '_onclick',
+ 'dblclick' : '_ondblclick'
+ },
+
+ initialize : function( app, options ) {
+ var self = this;
+ this.app = app;
+ this.options = Utils.merge( options, this.optionsDefault );
+ this.library = new Ui.RadioButton.View({
+ data : [ { label: 'Few (<500)', value: 'small' },
+ { label: 'Some (<10k)', value: 'medium' },
+ { label: 'Many (>10k)', value: 'large' }],
+ onchange: function( value ) { self._filter( value ) }
+ });
+ this.setElement( $( '' ).addClass( 'charts-grid' )
+ .append( ( new Ui.Label( { title : 'How many data points would you like to analyze?' } ) ).$el )
+ .append( this.library.$el.addClass( 'ui-margin-bottom' ) ) );
+ this._render();
+ this.library.value( 'small' );
+ this.library.trigger( 'change' );
+ },
+
+ /** Set/Get selected chart type */
+ value: function( new_value ) {
+ var before = this.$el.find( '.current' ).attr( 'id' );
+ if ( new_value !== undefined ) {
+ this.$el.find( '.current' ).removeClass( 'current' );
+ this.$el.find( '#' + new_value ).addClass( 'current' );
}
- });
- $el.append(this.library.$el.addClass('ui-margin-bottom'));
-
- // set element
- this.setElement($el);
-
- // render
- this._render();
-
- // set
- this.library.value('small');
- this.library.trigger('change');
- },
-
- // value
- value: function(new_value) {
- // get current element
- var before = this.$el.find('.current').attr('id');
-
- // check if new_value is defined
- if (new_value !== undefined) {
-
- // remove current class
- this.$el.find('.current').removeClass('current');
-
- // add current class
- this.$el.find('#' + new_value).addClass('current');
- }
-
- // get current id/value
- var after = this.$el.find('.current').attr('id');
- if(after === undefined) {
- return null;
- } else {
- // fire onchange
- if (after != before && this.options.onchange) {
- this.options.onchange(new_value);
- }
-
- // return current value
- return after;
- }
- },
-
- // filter
- _filter: function(value) {
- // hide all category headers
- this.$el.find('.header').hide();
-
- // show chart types
- var types = this.app.types.attributes;
- for (var id in types) {
- var type = types[id];
- var $el = this.$el.find('#' + id);
- var $header = this.$el.find('#types-header-' + this.categories_index[type.category]);
- var keywords = type.keywords || '';
- if (keywords.indexOf(value) >= 0) {
- $el.show();
- $header.show();
- } else {
- $el.hide();
- }
- }
- },
-
- // render
- _render: function() {
- // load chart types into categories
- this.categories = {};
- this.categories_index = {};
-
- // counter
- var category_index = 0;
-
- // identify categories
- var types = this.app.types.attributes;
- for (var id in types) {
- var type = types[id];
- var category = type.category;
- if (!this.categories[category]) {
- this.categories[category] = {};
- this.categories_index[category] = category_index++;
- }
- this.categories[category][id] = type;
- }
-
- // add categories and charts to screen
- for (var category in this.categories) {
- // create empty element
- var $el = $('')
-
- // add header label
- $el.append(this._template_header({
- id : 'types-header-' + this.categories_index[category],
- title : category
- }));
-
- // add chart types
- for (var id in this.categories[category]) {
- // get type
- var type = this.categories[category][id];
-
- // make title
- var title = type.title + ' (' + type.library + ')';
- if (type.zoomable) {
- title = '' + title;
+ var after = this.$el.find( '.current' ).attr( 'id' );
+ if( after !== undefined ) {
+ if ( after != before && this.options.onchange ) {
+ this.options.onchange( new_value );
}
-
- // append type to screen
- $el.append(this._template_item({
- id : id,
- title : title,
- url : config.app_root + 'charts/' + this.app.chartPath(id) + '/logo.png'
- }));
+ return after;
}
-
- // add to view
- this.$el.append($el);
- }
- },
-
- // onclick
- _onclick: function(e) {
- var old_value = this.value();
- var new_value = $(e.target).closest('.item').attr('id');
- if (new_value != '') {
- if (new_value && old_value != new_value) {
- this.value(new_value);
+ },
+
+ /** Filter chart types */
+ _filter: function( value ) {
+ this.$el.find( '.header' ).hide();
+ var types = this.app.types.attributes;
+ for ( var id in types ) {
+ var type = types[ id ];
+ var $el = this.$el.find( '#' + id );
+ var $header = this.$el.find( '#types-header-' + this.categories_index[ type.category ] );
+ var keywords = type.keywords || '';
+ if ( keywords.indexOf( value ) >= 0 ) {
+ $el.show();
+ $header.show();
+ } else {
+ $el.hide();
+ }
}
+ },
+
+ /** Render chart type view */
+ _render: function() {
+ var category_index = 0;
+ this.categories = {};
+ this.categories_index = {};
+ var types = this.app.types.attributes;
+ for ( var id in types ) {
+ var type = types[ id ];
+ var category = type.category;
+ if ( !this.categories[ category ] ) {
+ this.categories[ category ] = {};
+ this.categories_index[ category ] = category_index++;
+ }
+ this.categories[ category ][ id ] = type;
+ }
+
+ // add categories and charts to screen
+ for (var category in this.categories) {
+ var $el = $( '' ).append( this._template_header({
+ id : 'types-header-' + this.categories_index[ category ],
+ title : category
+ }));
+ for ( var id in this.categories[ category ] ) {
+ var type = this.categories[ category ][ id ];
+ var title = type.title + ' (' + type.library + ')';
+ if ( type.zoomable ) {
+ title = '' + title;
+ }
+ $el.append( this._template_item({
+ id : id,
+ title : title,
+ url : config.app_root + 'charts/' + this.app.chartPath( id ) + '/logo.png'
+ }));
+ }
+ this.$el.append( $el );
+ }
+ },
+
+ /** Add click handler */
+ _onclick: function( e ) {
+ var old_value = this.value();
+ var new_value = $( e.target ).closest( '.item' ).attr( 'id' );
+ if ( new_value != '' ) {
+ if ( new_value && old_value != new_value ) {
+ this.value( new_value );
+ }
+ }
+ },
+
+ /** Add double click handler */
+ _ondblclick: function( e ) {
+ var value = this.value();
+ if ( value && this.options.ondblclick ) {
+ this.options.ondblclick( value );
+ }
+ },
+
+ // header template
+ _template_header: function( options ) {
+ return '
' +
+ '• ' + options.title +
+ '
';
+ },
+
+ // item template
+ _template_item: function( options ) {
+ return '
' +
+ '
' +
+ '
' + options.title + '
' +
+ '';
}
- },
-
- // ondblclick
- _ondblclick: function(e) {
- var value = this.value();
- if (value && this.options.ondblclick) {
- this.options.ondblclick(value);
- }
- },
-
- // template
- _template_header: function(options) {
- return '
' +
- '• ' + options.title +
- '
';
- },
-
- // template
- _template_item: function(options) {
- return '
' +
- '' +
- '
' + options.title + '
' +
- '';
- }
-
-});
-
+ });
});
diff --git a/config/plugins/visualizations/charts/static/views/viewer.js b/config/plugins/visualizations/charts/static/views/viewer.js
index ba7733403cd..17cba91fbcb 100644
--- a/config/plugins/visualizations/charts/static/views/viewer.js
+++ b/config/plugins/visualizations/charts/static/views/viewer.js
@@ -1,162 +1,140 @@
-// dependencies
-define(['utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet',
- 'plugin/views/viewport', 'plugin/library/screenshot'],
- function(Utils, Ui, Portlet, ViewportView, Screenshot) {
-
/**
* This class renders the chart viewer which encapsulates the chart viewport.
*/
-return Backbone.View.extend({
- // initialize
- initialize: function(app, options){
- // link app
- this.app = app;
-
- // link chart
- this.chart = this.app.chart;
-
- // create viewport
- this.viewport_view = new ViewportView(app);
-
- // link this
- var self = this;
-
- // message element
- this.message = new Ui.Message();
-
- // button menu
- var picture_button_menu = new Ui.ButtonMenu({
- icon : 'fa-camera',
- title : 'Screenshot',
- tooltip : 'Download as PNG, SVG or PDF file'
- });
-
- // add png option
- picture_button_menu.addMenu({
- id : 'button-png',
- title : 'Save as PNG',
- icon : 'fa-file',
- onclick : function() {
- self._wait (self.chart, function() {
- Screenshot.createPNG({
- $el : self.viewport_view.$el,
- title : self.chart.get('title'),
- error : function(err) {
- self.message.update({ message: err, status: 'danger' });
- }
+define( [ 'utils/utils', 'mvc/ui/ui-misc', 'mvc/ui/ui-portlet',
+ 'plugin/views/viewport', 'plugin/library/screenshot' ],
+ function( Utils, Ui, Portlet, ViewportView, Screenshot ) {
+ return Backbone.View.extend({
+ initialize: function(app, options){
+ var self = this;
+ this.app = app;
+ this.chart = this.app.chart;
+ this.viewport_view = new ViewportView( app );
+ this.message = new Ui.Message();
+
+ // button menu
+ var picture_button_menu = new Ui.ButtonMenu({
+ icon : 'fa-camera',
+ title : 'Screenshot',
+ tooltip : 'Download as PNG, SVG or PDF file'
+ });
+
+ // add png option
+ picture_button_menu.addMenu({
+ id : 'button-png',
+ title : 'Save as PNG',
+ icon : 'fa-file',
+ onclick : function() {
+ self._wait( self.chart, function() {
+ Screenshot.createPNG({
+ $el : self.viewport_view.$el,
+ title : self.chart.get( 'title' ),
+ error : function( err ) {
+ self.message.update( { message: err, status: 'danger' } );
+ }
+ });
});
- });
- }
- });
-
- // add png option
- picture_button_menu.addMenu({
- id : 'button-svg',
- title : 'Save as SVG',
- icon : 'fa-file-text-o',
- onclick : function() {
- self._wait (self.chart, function() {
- Screenshot.createSVG({
- $el : self.viewport_view.$el,
- title : self.chart.get('title'),
- error : function(err) {
- self.message.update({ message: err, status: 'danger' });
- }
+ }
+ });
+
+ // add svg option
+ picture_button_menu.addMenu({
+ id : 'button-svg',
+ title : 'Save as SVG',
+ icon : 'fa-file-text-o',
+ onclick : function() {
+ self._wait( self.chart, function() {
+ Screenshot.createSVG({
+ $el : self.viewport_view.$el,
+ title : self.chart.get( 'title' ),
+ error : function( err ) {
+ self.message.update( { message: err, status: 'danger' } );
+ }
+ });
});
- });
- }
- });
-
- // add png option
- picture_button_menu.addMenu({
- id : 'button-png',
- title : 'Save as PDF',
- icon : 'fa-file-o',
- onclick : function() {
- self.app.modal.show({
- title : 'Send chart data for PDF creation',
- body : 'Galaxy does not provide integrated PDF export scripts. You may click \'Continue\' to create the PDF by using a 3rd party service (https://export.highcharts.com).',
- buttons : {
- 'Cancel' : function() {self.app.modal.hide()},
- 'Continue' : function() {
- self.app.modal.hide();
- self._wait (self.chart, function() {
- Screenshot.createPDF({
- $el : self.viewport_view.$el,
- title : self.chart.get('title'),
- error : function(err) {
- self.message.update({ message: err, status: 'danger' });
- }
+ }
+ });
+
+ // add pdf option
+ picture_button_menu.addMenu({
+ id : 'button-png',
+ title : 'Save as PDF',
+ icon : 'fa-file-o',
+ onclick : function() {
+ self.app.modal.show({
+ title : 'Send chart data for PDF creation',
+ body : 'Galaxy does not provide integrated PDF export scripts. You may click \'Continue\' to create the PDF by using a 3rd party service (https://export.highcharts.com).',
+ buttons : {
+ 'Cancel' : function() { self.app.modal.hide() },
+ 'Continue' : function() {
+ self.app.modal.hide();
+ self._wait( self.chart, function() {
+ Screenshot.createPDF({
+ $el : self.viewport_view.$el,
+ title : self.chart.get( 'title' ),
+ error : function( err ) {
+ self.message.update( { message: err, status: 'danger' } );
+ }
+ });
});
+ }
+ }
+ });
+ }
+ });
+
+ // create portlet
+ this.portlet = new Portlet.View({
+ icon : 'fa-bar-chart-o',
+ title: 'Viewport',
+ operations: {
+ edit_button: new Ui.ButtonIcon({
+ icon : 'fa-edit',
+ tooltip : 'Customize this chart',
+ title : 'Editor',
+ onclick : function() {
+ self._wait( self.chart, function() {
+ self.app.go( 'editor' );
});
}
- }
- });
- }
- });
+ }),
+ picture_button_menu: picture_button_menu
+ }
+ });
- // create portlet
- this.portlet = new Portlet.View({
- icon : 'fa-bar-chart-o',
- title: 'Viewport',
- operations: {
- edit_button: new Ui.ButtonIcon({
- icon : 'fa-edit',
- tooltip : 'Customize this chart',
- title : 'Editor',
- onclick : function() {
- self._wait (self.chart, function() {
- self.app.go('editor');
- });
- }
- }),
- picture_button_menu: picture_button_menu
- }
- });
-
- // append portlet
- this.portlet.append(this.message.$el.addClass('ui-margin-top'));
- this.portlet.append(this.viewport_view.$el);
-
- // set element
- this.setElement(this.portlet.$el);
-
- // events
- var self = this;
- this.chart.on('change:title', function() {
- self._refreshTitle();
- });
- },
+ // append elements
+ this.portlet.append( this.message.$el.addClass( 'ui-margin-top' ) );
+ this.portlet.append( this.viewport_view.$el );
+ this.setElement( this.portlet.$el );
- // show
- show: function() {
- // show element
- this.$el.show();
-
- // trigger resize to refresh d3 element
- $(window).trigger('resize');
- },
-
- // hide
- hide: function() {
- this.$el.hide();
- },
-
- // refresh title
- _refreshTitle: function() {
- var title = this.chart.get('title');
- this.portlet.title(title);
- },
-
- // wait for chart to be ready
- _wait: function(chart, callback) {
- // get chart
- if (this.app.deferred.ready()) {
- callback();
- } else {
- this.message.update({message: 'Your chart is currently being processed. Please wait and try again.'});
+ // events
+ this.chart.on( 'change:title', function() { self._refreshTitle() } );
+ },
+
+ /** Show and refresh viewer */
+ show: function() {
+ this.$el.show();
+ $( window ).trigger( 'resize' );
+ },
+
+ /** Hide viewer */
+ hide: function() {
+ this.$el.hide();
+ },
+
+ /** Change title */
+ _refreshTitle: function() {
+ var title = this.chart.get( 'title' );
+ this.portlet.title( title );
+ },
+
+ /** Check if chart is ready for export */
+ _wait: function(chart, callback) {
+ if ( this.app.deferred.ready() ) {
+ callback();
+ } else {
+ this.message.update( { message: 'Your chart is currently being processed. Please wait and try again.' } );
+ }
}
- }
-});
-
+ });
});
\ No newline at end of file
diff --git a/config/plugins/visualizations/charts/static/views/viewport.js b/config/plugins/visualizations/charts/static/views/viewport.js
index 95a41ba97fa..10716e84ff4 100644
--- a/config/plugins/visualizations/charts/static/views/viewport.js
+++ b/config/plugins/visualizations/charts/static/views/viewport.js
@@ -1,303 +1,194 @@
-// dependencies
-define(['mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils'],
- function(Portlet, Ui, Utils) {
-
/**
* The viewport creates and manages the dom elements used by the visualization plugins to draw the chart.
* Additionally, this class creates default request strings and request dictionaries parsed to the visualization plugins.
* This is the last class of the charts core classes before handing control over to the visualization plugins.
*/
-return Backbone.View.extend({
+define( [ 'mvc/ui/ui-portlet', 'mvc/ui/ui-misc', 'utils/utils' ], function( Portlet, Ui, Utils ) {
+ return Backbone.View.extend({
+ // list of container/canvas elements
+ container_list: [],
+ canvas_list: [],
+ initialize: function( app, options ) {
+ var self = this;
+ this.app = app;
+ this.chart = this.app.chart;
+ this.options = options;
+ this.setElement( $( '' ).addClass( 'charts-viewport' )
+ .append( $( '' ).addClass( 'info' )
+ .append( $( '' ).addClass( 'icon' ) )
+ .append( $( '' ).addClass( 'text' ) ) ) );
+ this.$info = this.$( '.info' );
+ this.$icon = this.$( '.icon' );
+ this.$text = this.$( '.text' );
- // list of canvas elements
- container_list: [],
- canvas_list: [],
-
- // initialize
- initialize: function(app, options) {
- // link app
- this.app = app;
-
- // link chart
- this.chart = this.app.chart;
-
- // link options
- this.options = Utils.merge(options, this.optionsDefault);
-
- // create element
- this.setElement($(this._template()));
-
- // use full screen for viewer
- this._fullscreen(this.$el, 50);
-
- // prevent window scrolling
- var initial_overflow = $('body').css('overflow');
- this.$el.on('mouseover', function() {
- $('body').css('overflow', 'hidden');
- }).on('mouseout', function() {
- $('body').css('overflow', initial_overflow);
- });
-
- // create container element
- this._createContainer('div');
-
- // events
- var self = this;
- this.chart.on('redraw', function() {
- self.app.deferred.execute(function(process) {
- self._draw(process, self.chart);
+ // use full screen for viewer
+ this._fullscreen( this.$el, 50 );
+
+ // prevent window scrolling
+ var initial_overflow = $( 'body' ).css( 'overflow' );
+ this.$el.on( 'mouseover', function() {
+ $( 'body' ).css( 'overflow', 'hidden' );
+ }).on('mouseout', function() {
+ $( 'body' ).css( 'overflow', initial_overflow );
});
- });
-
- // link status handler
- this.chart.on('set:state', function() {
- // get info element
- var $info = self.$el.find('#info');
- var $container = self.$el.find('.charts-viewport-container');
-
- // get icon
- var $icon = $info.find('#icon');
-
- // remove icon
- $icon.removeClass();
-
- // show info
- $info.show();
- $info.find('#text').html(self.chart.get('state_info'));
-
- // check status
- var state = self.chart.get('state');
- switch (state) {
- case 'ok':
- $info.hide();
- $container.show();
- break;
- case 'failed':
- $icon.addClass('icon fa fa-warning');
- $container.hide();
- break;
- default:
- $icon.addClass('icon fa fa-spinner fa-spin');
- $container.show();
- }
- });
- },
-
- // show
- show: function() {
- this.$el.show();
- },
-
- // hide
- hide: function() {
- this.$el.hide();
- },
- // resize to fullscreen
- _fullscreen: function($el, margin) {
- // fix size
- $el.css('height', $(window).height() - margin);
-
- // catch window resize event
- $(window).resize(function () {
- $el.css('height', $(window).height() - margin);
- });
- },
-
- // creates n canvas elements
- _createContainer: function(tag, n) {
- // check size of requested canvas elements
- n = n || 1;
-
- // clear previous canvas elements
- for (var i in this.container_list) {
- this.container_list[i].remove();
- }
-
- // reset lists
- this.container_list = [];
- this.canvas_list = [];
-
- // create requested canvas elements
- for (var i = 0; i < n; i++) {
- // create element
- var container_el = $(this._templateContainer(tag, parseInt(100 / n)));
-
- // add to view
- this.$el.append(container_el);
-
- // add to list
- this.container_list[i] = container_el;
-
- // add a separate list for canvas elements
- this.canvas_list[i] = container_el.find('.charts-viewport-canvas').attr('id');
- }
- },
-
- // add
- _draw: function(process, chart) {
- // link this
- var self = this;
-
- // identify chart type
- var chart_type = chart.get('type');
-
- // load chart settings
- this.chart_definition = chart.definition;
-
- // determine number of svg/div-elements to create
- var n_panels = 1;
- if (chart.settings.get('use_panels') === 'true') {
- n_panels = chart.groups.length;
- }
-
- // create canvas element and add to canvas list
- 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_definition.execute ||
- (this.chart_definition.execute && chart.get('modified'))) {
-
- // reset jobs
- this.app.jobs.cleanup(chart);
-
- // reset modified flag
- chart.set('modified', false);
- }
-
- // create chart view
- var self = this;
- require(['plugin/charts/' + this.app.chartPath(chart_type) + '/wrapper'], function(ChartView) {
- if (self.chart_definition.execute) {
- self.app.jobs.request(chart, self._defaultSettingsString(chart), self._defaultRequestString(chart),
- function() {
- var view = new ChartView(self.app, {
- process : process,
- chart : chart,
- request_dictionary : self._defaultRequestDictionary(chart),
- canvas_list : self.canvas_list
- });
- },
- function() {
- process.reject();
- }
- );
- } else {
- var view = new ChartView(self.app, {
- process : process,
- chart : chart,
- request_dictionary : self._defaultRequestDictionary(chart),
- canvas_list : self.canvas_list
+ // create container element
+ this._createContainer( 'div' );
+
+ // link redraw trigger
+ var self = this;
+ this.chart.on( 'redraw', function() {
+ self.app.deferred.execute( function( process ) {
+ self._draw( process, self.chart );
});
- }
- });
- },
-
- //
- // REQUEST STRING FUNCTIONS
- //
- // create default chart request
- _defaultRequestString: function(chart) {
-
- // configure request
- var request_string = '';
-
- // add groups to data request
- var group_index = 0;
- var self = this;
- chart.groups.each(function(group) {
- // increase group counter
- group_index++;
-
- // add selected columns to column string
- for (var key in self.chart_definition.columns) {
- request_string += key + '_' + group_index + ':' + (parseInt(group.get(key)) + 1) + ', ';
- }
- });
-
- // return
- return request_string.substring(0, request_string.length - 2);
- },
-
- // create default chart request
- _defaultSettingsString: function(chart) {
-
- // configure settings
- var settings_string = '';
-
- // add settings to settings string
- for (key in chart.settings.attributes) {
- settings_string += key + ':' + chart.settings.get(key) + ', ';
- };
-
- // return
- return settings_string.substring(0, settings_string.length - 2);
- },
-
- // create default chart request
- _defaultRequestDictionary: function(chart) {
-
- // configure request
- var request_dictionary = {
- groups : []
- };
-
- // update request dataset id
- if (this.chart_definition.execute) {
- request_dictionary.id = chart.get('dataset_id_job');
- } else {
- request_dictionary.id = chart.get('dataset_id');
- }
-
- // add groups to data request
- var group_index = 0;
- var self = this;
- chart.groups.each(function(group) {
-
- // add columns
- var columns = {};
- for (var column_key in self.chart_definition.columns) {
- // get settings for column
- var column_settings = self.chart_definition.columns[column_key];
-
- // add to columns
- columns[column_key] = Utils.merge ({
- index : group.get(column_key)
- }, column_settings);
- }
-
- // add group data
- request_dictionary.groups.push({
- key : (++group_index) + ':' + group.get('key'),
- columns : columns
});
- });
-
- // return
- return request_dictionary;
- },
-
- // template
- _template: function() {
- return '';
- },
-
- // template svg/div element
- _templateContainer: function(tag, width) {
- return '';
- }
-
-});
+ // link status handler
+ this.chart.on( 'set:state', function() {
+ var $container = self.$el.find( '.charts-viewport-container' );
+ var $info = self.$info;
+ var $icon = self.$icon;
+ var $text = self.$text;
+ $icon.removeClass();
+ $info.show();
+ $text.html( self.chart.get( 'state_info' ) );
+ var state = self.chart.get( 'state' );
+ switch ( state ) {
+ case 'ok':
+ $info.hide();
+ $container.show();
+ break;
+ case 'failed':
+ $icon.addClass( 'icon fa fa-warning' );
+ $container.hide();
+ break;
+ default:
+ $icon.addClass( 'icon fa fa-spinner fa-spin' );
+ $container.show();
+ }
+ });
+ },
+
+ /** 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 );
+ $( window ).resize( function() {
+ $el.css( 'height', $( window ).height() - margin );
+ });
+ },
+
+ /** A chart may contain multiple sub charts/containers which are created here */
+ _createContainer: function( tag, n ) {
+ n = n || 1;
+ for ( var i in this.container_list ) {
+ this.container_list[ i ].remove();
+ }
+ this.container_list = [];
+ this.canvas_list = [];
+ for ( var i = 0; i < n; i++ ) {
+ var container_id = Utils.uid();
+ var container_el = $( '' ).addClass( 'charts-viewport-container' )
+ .width( parseInt( 100 / n ) + '%' )
+ .append( $( '' ).attr( 'id', 'menu' ) )
+ .append( $( '<' + tag + ' class="charts-viewport-canvas" />' ).attr( 'id', container_id ) );
+ this.$el.append( container_el );
+ this.container_list[ i ] = container_el;
+ this.canvas_list[ i ] = container_id;
+ }
+ },
+
+ /** Draws a new chart by loading and executing the corresponding chart wrapper */
+ _draw: function( process, chart ) {
+ var self = this;
+ var chart_type = chart.get( 'type' );
+ this.chart_definition = chart.definition;
+ var n_panels = 1;
+ if ( chart.settings.get( 'use_panels' ) === 'true' ) {
+ n_panels = chart.groups.length;
+ }
+ this._createContainer( this.chart_definition.tag, n_panels );
+ chart.state( 'wait', 'Please wait...' );
+ if ( !this.chart_definition.execute || ( this.chart_definition.execute && chart.get( 'modified' ) ) ) {
+ this.app.jobs.cleanup( chart );
+ chart.set( 'modified', false );
+ }
+ require( [ 'plugin/charts/' + this.app.chartPath( chart_type ) + '/wrapper' ], function( ChartView ) {
+ if ( self.chart_definition.execute ) {
+ self.app.jobs.request( chart, self._defaultSettingsString( chart ), self._defaultRequestString( chart ),
+ function() {
+ var view = new ChartView( self.app, {
+ process : process,
+ chart : chart,
+ request_dictionary : self._defaultRequestDictionary( chart ),
+ canvas_list : self.canvas_list
+ });
+ },
+ function() {
+ process.reject();
+ }
+ );
+ } else {
+ var view = new ChartView( self.app, {
+ process : process,
+ chart : chart,
+ request_dictionary : self._defaultRequestDictionary( chart ),
+ canvas_list : self.canvas_list
+ });
+ }
+ });
+ },
+
+ /** Creates default chart request */
+ _defaultRequestString: function( chart ) {
+ var request_string = '';
+ var group_index = 0;
+ var self = this;
+ chart.groups.each( function( group ) {
+ group_index++;
+ for ( var key in self.chart_definition.columns ) {
+ request_string += key + '_' + group_index + ':' + ( parseInt( group.get( key ) ) + 1 ) + ', ';
+ }
+ });
+ return request_string.substring( 0, request_string.length - 2 );
+ },
+
+ /** Creates default settings string for charts which require a job execution */
+ _defaultSettingsString: function( chart ) {
+ var settings_string = '';
+ for ( key in chart.settings.attributes ) {
+ settings_string += key + ':' + chart.settings.get( key ) + ', ';
+ };
+ return settings_string.substring( 0, settings_string.length - 2 );
+ },
+
+ /** Create default data request dictionary */
+ _defaultRequestDictionary: function( chart ) {
+ var request_dictionary = { groups : [] };
+ request_dictionary.id = this.chart_definition.execute ? chart.get( 'dataset_id_job' ) : chart.get( 'dataset_id' );
+ var group_index = 0;
+ var self = this;
+ chart.groups.each( function( group ) {
+ var columns = {};
+ for ( var column_key in self.chart_definition.columns ) {
+ var column_settings = self.chart_definition.columns[ column_key ];
+ columns[ column_key ] = Utils.merge( { index : group.get( column_key ) }, column_settings );
+ }
+ request_dictionary.groups.push( Utils.merge({
+ key : ( ++group_index ) + ':' + group.get( 'key' ),
+ columns : columns
+ }, group.attributes ));
+ });
+ return request_dictionary;
+ }
+ });
});
diff --git a/config/plugins/visualizations/graphviz/config/graphviz.xml b/config/plugins/visualizations/graphviz/config/graphviz.xml
index 1a51da4c699..ab0fea5d719 100644
--- a/config/plugins/visualizations/graphviz/config/graphviz.xml
+++ b/config/plugins/visualizations/graphviz/config/graphviz.xml
@@ -4,7 +4,17 @@
HistoryDatasetAssociation
- data.Text
+ json
+ dataset_id
+
+
+ HistoryDatasetAssociation
+ txt
+ dataset_id
+
+
+ HistoryDatasetAssociation
+ node-edge
dataset_id
diff --git a/config/plugins/visualizations/graphviz/static/js/graphVis.js b/config/plugins/visualizations/graphviz/static/js/graphVis.js
index f89e3d39ad0..e22814cd3d9 100644
--- a/config/plugins/visualizations/graphviz/static/js/graphVis.js
+++ b/config/plugins/visualizations/graphviz/static/js/graphVis.js
@@ -1,38 +1,49 @@
- var showNodeLabel;
- var showEdgeLabel;
- var showOut;
- var showIn;
- var demoNodes = [];
- var demoEdges = [];
- var shape;
- var allcy;
- var cy;
+var showNodeLabel;
+var showEdgeLabel;
+var showOut;
+var showIn;
+var demoNodes = [];
+var demoEdges = [];
+var shape;
+var allcy;
+var cy;
+// The key to hold down when brush/box selecting: 16 === shift
+var BRUSH_KEY = 16;
+$(function() {
+ // remove horizontal scrollbar
+ $("body").css("overflow-x", "hidden");
-
- $(function() { // on dom ready
-
-
- $("body").css("overflow-x", "hidden"); //// remove horizontal scrollbar
-
-
- }); // END on dom ready
+ // set up a key that, when held down, allows box selection and turns panning off
+ $( document )
+ .on( 'keydown', function( ev ){
+ if( cy && ev.keyCode === BRUSH_KEY ){
+ cy.panningEnabled( false );
+ cy.boxSelectionEnabled( true );
+ }
+ })
+ .on( 'keyup', function( ev ){
+ if( cy && ev.keyCode === BRUSH_KEY ){
+ cy.panningEnabled( true );
+ cy.boxSelectionEnabled( false );
+ }
+ });
+});
// shape of the graph
- $("select option:selected").each(function() {
- shape = $(this).val();
+$("select option:selected").each(function() {
+ shape = $(this).val();
+});
- });
-
- ///////// create graph
- function createGraph(data) {
+///////// create graph
+function createGraph(data) {
+ window.graphData = data;
allcy = cytoscape({
headless: true,
});
cy = cytoscape({
-
container: document.getElementById('cy'),
layout: {
@@ -45,121 +56,131 @@
motionBlur: true,
textureOnViewport: true,
+ // initially have click and drag pan the viewport
+ panningEnabled: true,
+ boxSelectionEnabled: false,
+
ready: function() {
window.cy = this;
cy.nodes().on("click", function(e) {
-
showNodeInfo(e.cyTarget);
-
});
},
+
style: cytoscape.stylesheet()
.selector('node')
.css({
- 'content': showNodeLabel,
- 'text-valign': 'center',
- 'background-color': '#888888',
- 'opacity': 0.8
+ 'content': showNodeLabel,
+ 'text-valign': 'center',
+ 'background-color': '#888888',
+ 'opacity': 0.8
+ })
- })
.selector('edge')
.css({
- 'curve-style': 'unbundled-bezier',
- 'target-arrow-shape': 'triangle',
- 'width': 4,
- 'line-color': '#ddd',
- 'target-arrow-color': '#ddd',
- 'content': showEdgeLabel
+ 'curve-style': 'unbundled-bezier',
+ 'target-arrow-shape': 'triangle',
+ 'width': 2,
+ 'line-color': '#ddd',
+ 'target-arrow-color': '#ddd',
+ 'content': showEdgeLabel
+ })
-
- })
.selector(':selected')
.css({
- 'background-color': '#FE2E64',
- 'line-color': '#FE2E64',
- 'target-arrow-color': '#FE2E64',
- 'source-arrow-color': '#FE2E64',
- 'opacity': 1
- })
- .selector('core')
- .css({
- 'outside-texture-bg-color': 'white'
+ 'background-color': '#FE2E64',
+ 'line-color': '#FE2E64',
+ 'target-arrow-color': '#FE2E64',
+ 'source-arrow-color': '#FE2E64',
+ 'opacity': 1
+ })
- })
+ .selector('core')
+ .css({
+ 'outside-texture-bg-color': 'white'
+ })
});
+ window.cy = cy;
allcy.load(data);
-// if graph contains more than 50 nodes load only root nodes
- if (allcy.nodes().length > 50 && allcy.nodes().roots().length != 0 ) {
-
- var toAdd = allcy.nodes().roots().closedNeighborhood();
- allcy.nodes().roots().addClass("roots");
-
- showNodesToExpand(toAdd);
- cy.add(toAdd);
- cy.load(cy.elements('*').jsons());
+ // if graph contains more than 50 nodes load only root nodes
+ if (allcy.nodes().length > 50 && allcy.nodes().roots().length !== 0 ) {
+ var toAdd = allcy.nodes().roots().closedNeighborhood();
+ allcy.nodes().roots().addClass("roots");
+
+ showNodesToExpand(toAdd);
+ cy.add(toAdd);
+ cy.load(cy.elements('*').jsons());
cy.style()
.selector('.toBeExpaned')
.css({
+ 'width': 50,
+ 'height': 50
+ })
+ .update();
- 'width': 50,
- 'height': 50
- })
- .update();
-
} else {
-
- cy.add(data);
- cy.load(cy.elements('*').jsons());
+ cy.add(data);
+ cy.load(cy.elements('*').jsons());
}
- cy.boxSelectionEnabled(true);
-
-
checkBoxes();
-
- } // END create graph
+} // END create graph
- //// parse function for matrix data
- function parseAndCreate(demoNodes, demoEdges) {
- var data = {
- nodes: demoNodes,
- edges: demoEdges
- };
- createGraph(data);
- }
+//// parse function for matrix data
+function parseTextMatrix(data) {
+ var nodes = [],
+ edges = [];
+ data.split( '\n' ).forEach( function( line ){
+ var columns = line.split( /,?\s+/ ),
+ sourceId = columns[0]; // split by comma or space
- ///// parsing function for json: for link/egde and "" issues
- function parseJson(dataToParse) {
+ nodes.push({
+ data: { id: sourceId }
+ });
- if (dataToParse.links == null) {
+ for( var i = 1; i < columns.length; i++ ){
+ edges.push({
+ data: {
+ source : sourceId,
+ target : columns[i]
+ }
+ });
+ }
+ });
- var links = dataToParse.edges;
- } else {
- var links = dataToParse.links;
- dataToParse.edges = links;
+ createGraph({
+ nodes: nodes,
+ edges: edges
+ });
+}
- }
+///// parsing function for json: for link/egde and "" issues
+function parseJson( data ) {
- var nodes = dataToParse.nodes;
-
- for (var i = 0; i < nodes.length; i++) {
-
- dataToParse.nodes[i].data = nodes[i];
- dataToParse.nodes[i].data.id = '"' + nodes[i].id + '"';
- }
-
-
- for (var i = 0; i < links.length; i++) {
-
- dataToParse.edges[i].data = links[i];
- dataToParse.edges[i].data.source = '"' + links[i].source + '"';
- dataToParse.edges[i].data.target = '"' + links[i].target + '"';
- }
-
- createGraph(dataToParse);
- }
\ No newline at end of file
+ if( data.hasOwnProperty( 'links' ) ){
+ data.edges = data.links;
+ delete data.links;
+ }
+ data.nodes = data.nodes.map( function _processNode( node ){
+ return {
+ data : $.extend( {}, node.data, {
+ id : node.id + ''
+ })
+ };
+ });
+ data.edges = data.edges.map( function _processEdge( edge ){
+ return {
+ data : $.extend( {}, edge.data, {
+ id : edge.id || undefined,
+ source : data.nodes[ edge.source ].data.id,
+ target : data.nodes[ edge.target ].data.id
+ })
+ };
+ });
+ createGraph( data );
+}
\ No newline at end of file
diff --git a/config/plugins/visualizations/graphviz/static/js/toolPanelFunctions.js b/config/plugins/visualizations/graphviz/static/js/toolPanelFunctions.js
index fdd20f192ac..1108c67e7af 100644
--- a/config/plugins/visualizations/graphviz/static/js/toolPanelFunctions.js
+++ b/config/plugins/visualizations/graphviz/static/js/toolPanelFunctions.js
@@ -34,7 +34,7 @@ $(function() { // on dom ready
});
- //////// change the shape of the graph
+ //////// change the shape of the graph
$('#selectShape').change(function() {
$("select option:selected").each(function() {
@@ -54,11 +54,11 @@ $(function() { // on dom ready
if ($('#showOutNode').is(":checked")) {
showOut = true;
cy.nodes().on("tapend", highlightOut);
-
+
} else {
showOut = false;
cy.nodes().off("tapend", highlightOut);
-
+
resetHighlightOut(showIn, showOut);
}
});
@@ -71,13 +71,13 @@ $(function() { // on dom ready
if ($('#showInNode').is(":checked")) {
showIn = true;
cy.nodes().on("tapend", highlightIn);
-
+
} else {
showIn = false;
cy.nodes().off("tapend", highlightIn);
resetHighlightIn(showIn, showOut);
-
+
cy.nodes().removeClass('connectedNodeIn');
}
@@ -101,12 +101,12 @@ $(function() { // on dom ready
});
- //// disable/unable buttons
+ //// disable/unable buttons
$(document).on('click', function() {
var selectedNode = cy.nodes(':selected');
- if (selectedNode.outgoers().length == 0) {
+ if (selectedNode.outgoers().length === 0) {
$('.btn.colNode').prop('disabled', true);
@@ -149,7 +149,7 @@ $(function() { // on dom ready
var selectedNode = cy.nodes(':selected');
- if (e.which == 101 && selectedNode.size() != 0) { // 101 for 'e' = expand
+ if (e.which === 101 && selectedNode.size() !== 0) { // 101 for 'e' = expand
if (selectedNode.hasClass('toBeExpaned')) {
@@ -162,20 +162,20 @@ $(function() { // on dom ready
}
- if (e.which == 99 && selectedNode.size() != 0 && !selectedNode.hasClass('superNode') && selectedNode.outgoers().length != 0) { // 99 for 'c' = collapse
+ if (e.which === 99 && selectedNode.size() !== 0 && !selectedNode.hasClass('superNode') && selectedNode.outgoers().length !== 0) { // 99 for 'c' = collapse
colNode();
}
- if (e.which == 100 && selectedNode.size() != 0) { // 100 for 'd' = delete
+ if (e.which === 100 && selectedNode.size() !== 0) { // 100 for 'd' = delete
deleteSelectedNodes();
}
});
- /////////////// tool Panel movement
+ /////////////// tool Panel movement
$(document).on('click', '.slider-arrow.show', function() {
$(".slider-arrow, .panel").animate({
@@ -234,13 +234,9 @@ $(function() { // on dom ready
// document.getElementById('cy').style.width="100%";
cy.resize();
});
+}); // on dom ready END
-
-
-
-}) // on dom ready END
-
-///////// finding outgoing Nodes
+///////// finding outgoing Nodes
function highlightOut() {
var selectedNode = this;
@@ -259,7 +255,7 @@ function highlightOut() {
})
.update();
} else {
-
+
cy.nodes().not(this).removeClass('connectedNodeOut');
cy.nodes().not(this).removeClass('selectedNodeOut');
cy.edges().not(this).removeClass('connectedNodeOut');
@@ -290,7 +286,7 @@ function highlightOut() {
}
}
-/////// reset highlighting of outgoing nodes
+/////// reset highlighting of outgoing nodes
function resetHighlightOut(showIn, showOut) {
cy.style()
@@ -370,7 +366,7 @@ function highlightIn() {
}
-/////// reset highlighting of incoming nodes
+/////// reset highlighting of incoming nodes
function resetHighlightIn(showIn, showOut) {
cy.style()
@@ -401,7 +397,7 @@ function resetHighlightIn(showIn, showOut) {
}
-////// export PNG
+////// export PNG
function exportFunction() {
var pngPic = cy.png();
@@ -418,7 +414,6 @@ function downloadURI(uri, fname) {
link.click();
// Cleanup the DOM
document.body.removeChild(link);
- delete link;
}
///// restore Graph structure
@@ -449,7 +444,6 @@ function showNodeInfo(node) {
var j = 0;
for (var key in nodeContent) {
-
if (key == 'group' || key == 'data') {
continue;
}
@@ -458,10 +452,8 @@ function showNodeInfo(node) {
i++;
values[j] = nodeContent[key];
j++;
-
}
-
var childNodes = node.outgoers().nodes();
var childNum = childNodes.length;
@@ -472,16 +464,15 @@ function showNodeInfo(node) {
var table = createTable(fieldName, values, degree, parentNum, childNum);
$('#nodeInfoDiv').html("
" + fieldName[i] + "
"; $('').appendTo(document.getElementById("linkDiv")).prop('src', url); @@ -490,40 +481,27 @@ function showNodeInfo(node) { } } -function isValidUrl(str) { - var pattern = new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/); // fragment locater - if (!pattern.test(str)) { - - return false; - } else { - return true; - } -} - function createTable(fieldName, values, degree, parentNum, childNum) { - var table = "";
-
for (var i = 0; i < fieldName.length; i++) {
-
-
if (isValidUrl(values[i])) {
i++;
}
-
table += "
";
return table;
-
}
+function isValidUrl(str) {
+ var pattern = new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/); // fragment locater
+ return pattern.test(str);
+}
+
+
/////// delete selected nodes
@@ -539,7 +517,7 @@ function deleteSelectedNodes() {
cy.remove(edgesToRemove);
}
-/////// restore Deleted Nodes
+/////// restore Deleted Nodes
function restoreDeletedNodes() {
nodesToRemove.restore();
edgesToRemove.restore();
@@ -550,7 +528,7 @@ function expandNodes(selectedNode) {
cy.nodes().unbind("tapend");
var selectedNodeId = selectedNode.id();
- selectedNodeId = selectedNodeId.replace(/[^0-9\.]+/g, ""); // removing ""
+ selectedNodeId = selectedNodeId.replace(/[^0-9\.]+/g, ""); // removing ""
var eles = allcy.nodes();
@@ -559,7 +537,7 @@ function expandNodes(selectedNode) {
showNodesToExpand(nodesToAdd);
cy.add(eles[selectedNodeId].outgoers());
- selectedNode.removeClass('toBeExpaned');
+ selectedNode.removeClass('toBeExpaned');
$("select option:selected").each(function() {
shape = $(this).val();
@@ -583,7 +561,7 @@ function showNodesToExpand(toAdd) {
if (ele.outdegree() > 0 && !ele.hasClass('roots')) {
ele.addClass('toBeExpaned');
- }
+ }
});
}
@@ -604,7 +582,7 @@ function checkBoxes() {
resetHighlightIn(showIn, showOut);
cy.nodes().removeClass('connectedNodeIn');
}
-
+
if ($('#showOutNode').is(":checked")) {
showOut = true;
cy.nodes().on("tapend", highlightOut);
diff --git a/config/plugins/visualizations/graphviz/templates/graphviz.mako b/config/plugins/visualizations/graphviz/templates/graphviz.mako
index 4abf7300cae..6f6d689eb43 100644
--- a/config/plugins/visualizations/graphviz/templates/graphviz.mako
+++ b/config/plugins/visualizations/graphviz/templates/graphviz.mako
@@ -6,12 +6,14 @@
${hda.name} | ${visualization_name}
-<%
- root = h.url_for( '/' )
-%>
-
+ <%
+ root = h.url_for( '/' )
+ %>
+
+
+
${h.stylesheet_link( root + 'plugins/visualizations/graphviz/static/css/style.css' )}
-
+
${h.javascript_link( root + 'plugins/visualizations/graphviz/static/js/jquery.qtip.js' )}
${h.javascript_link( root + 'plugins/visualizations/graphviz/static/js/cytoscape.min.js' )}
${h.javascript_link( root + 'plugins/visualizations/graphviz/static/js/collapse.js' )}
@@ -25,63 +27,62 @@
${h.javascript_link( root + 'plugins/visualizations/graphviz/static/js/wz_tooltip.js' )}
+
+
Node Description
" + table); - for (var i = 0; i < fieldName.length; i++) { - if (isValidUrl(values[i])) { + for (var strIndex = 0; strIndex < fieldName.length; strIndex++) { + if (isValidUrl(values[strIndex])) { var e = document.createElement("div"); e.id = "linkDiv"; $('#nodeInfoDiv').append(e); - + var url = values[i]; - document.getElementById("linkDiv").innerHTML += "" + fieldName[i] + "
"; $('').appendTo(document.getElementById("linkDiv")).prop('src', url); @@ -490,40 +481,27 @@ function showNodeInfo(node) { } } -function isValidUrl(str) { - var pattern = new RegExp(/((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+\$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+\$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-_]*)?\??(?:[\-\+=&;%@\.\w_]*)#?(?:[\.\!\/\\\w]*))?)/); // fragment locater - if (!pattern.test(str)) { - - return false; - } else { - return true; - } -} - function createTable(fieldName, values, degree, parentNum, childNum) { - var table = "
| " + fieldName[i] + " | " + "" + values[i] + " | " + "
| " + "degree" + " | " + "" + degree + " | " + "
| " + "number of child nodes" + " | " + "" + childNum + " | " + "
| " + "number of parent nodes" + " | " + "" + parentNum + " | " + "