- Use the following controls to change the data used by the chart.
+ Use the following control to change which columns are used by the chart. Click any cell
+ from the last three rows of the table to select the column for the appropriate data.
Use the 'Draw' button to render (or re-render) the chart with the current settings.
-{{! column selector containers }}
-
-
-
-
-
-
-
+
+
X Column: which column values will be used for the x axis of the chart.
+
Y Column: which column values will be used for the y axis of the chart.
+
ID Column: an additional column value displayed when the user hovers over a data point.
+ It may be useful to select unique or categorical identifiers here (such as gene ids).
+
+
+
+
+
{{{ peek }}}
-{{! optional id column }}
-
-
-
-
- These will be displayed (along with the x and y values) when you hover over
- a data point.
-
-
-
-
-
-
-
-{{! if we're using generic column selection names ('column 1') - allow the user to use the first line }}
-
-
Possible headers: {{ possibleHeaders }}
-
-
-
-
- It looks like Galaxy couldn't get proper column headers for this data.
- Would you like to use the column headers above as column names to select columns?
-
-
+
+ Note: If it can be determined from the dataset's filetype that column is not numeric, that
+ column choice may be disabled for either the x or y axis.
+
diff --git a/config/plugins/visualizations/scatterplot/src/scatterplot-config-editor.js b/config/plugins/visualizations/scatterplot/src/scatterplot-config-editor.js
index 88e9c4aba00..f11f59a8dfe 100644
--- a/config/plugins/visualizations/scatterplot/src/scatterplot-config-editor.js
+++ b/config/plugins/visualizations/scatterplot/src/scatterplot-config-editor.js
@@ -78,73 +78,62 @@ var ScatterplotConfigEditor = Backbone.View.extend( LoggableMixin ).extend({
return this;
},
+ /** get an object with arrays keyed with possible column types (numeric, text, all)
+ * and if metadata_column_types is set on the dataset, add the indeces of each
+ * column into the appropriate array.
+ * Used to disable certain columns from being selected for x, y axes.
+ */
+ _getColumnIndecesByType : function(){
+ //TODO: not sure these contraints are necc. now
+ var types = {
+ numeric : [],
+ text : [],
+ all : []
+ };
+ _.each( this.dataset.metadata_column_types || [], function( type, i ){
+ if( type === 'int' || type === 'float' ){
+ types.numeric.push( i );
+ } else if( type === 'str' || type === 'list' ){
+ types.text.push( i );
+ }
+ types.all.push( i );
+ });
+ if( types.numeric.length < 2 ){
+ types.numeric = [];
+ }
+ //console.log( 'types:', JSON.stringify( types ) );
+ return types;
+ },
+
/** controls for which columns are used to plot datapoints (and ids/additional info to attach if desired) */
_render_dataControl : function( $where ){
- //TODO: better handling of missing column names, column types
$where = $where || this.$el;
var editor = this,
- dataset = this.dataset,
- column_names = dataset.metadata_column_names || [],
- config = this.model.get( 'config' );
- //console.log( 'metadata_column_types:', this.dataset.metadata_column_types );
- //console.log( 'metadata_column_names:', this.dataset.metadata_column_names );
-
-//TODO: to peek based control
- var numericColumns = [],
- allColumns = _.map( dataset.metadata_column_types, function( type, i ){
- // save column data for select rendering, adding metadata name if available in dataset
- var column = { index: i, type: type, name: ( column_names[ i ] || ( 'column ' + ( i + 1 )) ) };
- // also add column to numerics if numeric type
- if( ( column.type === 'int' ) || ( column.type === 'float' ) ){
- numericColumns.push( column );
- }
- return column;
- });
- if( numericColumns.length < 2 ){
- numericColumns = allColumns;
- }
- //console.log( 'allColumns:', allColumns );
- //console.log( 'numericColumns:', numericColumns );
+ //column_names = dataset.metadata_column_names || [],
+ config = this.model.get( 'config' ),
+ columnTypes = this._getColumnIndecesByType();
// render the html
var $dataControl = $where.find( '.tab-pane#data-control' );
$dataControl.html( ScatterplotConfigEditor.templates.dataControl({
- allColumns : allColumns,
- numericColumns : numericColumns
+ peek : this.dataset.peek
}));
-//TODO: column selection boilerplate
- // preset to column selectors if they were passed in the config in the query string; set up events
- var newConfig = {
- xColumn : ( _.isFinite( config.xColumn ) )? ( config.xColumn ): ( numericColumns[0].index ),
- yColumn : ( _.isFinite( config.yColumn ) )? ( config.yColumn ): ( numericColumns[1].index ),
- idColumn : allColumns[0].index
- };
- // use an idColumn from the config or attempt to get one different from the numeric
- if( _.isFinite( config.idColumn ) ){
- newConfig.idColumn = config.idColumn;
- } else {
- if( allColumns.length > 2 ){
- var uniqueCol = _.find( allColumns, function( column, i ){
- return i !== newConfig.xColumn && i !== newConfig.yColumn;
- });
- newConfig.idColumn = uniqueCol.index;
- }
- }
- config = this.model.set( 'config', newConfig, { silent: true }).get( 'config' );
+ $dataControl.find( '.peek' ).peekControl({
+ controls : [
+ { label: 'X Column', id: 'xColumn', selected: config.xColumn, disabled: columnTypes.text },
+ { label: 'Y Column', id: 'yColumn', selected: config.yColumn, disabled: columnTypes.text },
+ { label: 'ID Column', id: 'idColumn', selected: config.idColumn }
+ ]
+ //renameColumns : true
- $dataControl.find( '[name="xColumn"]' ).val( config.xColumn ).on( 'change', function(){
- editor.model.set( 'config', { xColumn: Number( $( this ).val() ) });
+ }).on( 'peek-control.change', function( ev, data ){
+ //console.info( 'new selection:', data );
+ editor.model.set( 'config', data );
+
+ }).on( 'peek-control.rename', function( ev, data ){
+ //console.info( 'new column names', data );
});
- $dataControl.find( '[name="yColumn"]' ).val( config.yColumn ).on( 'change', function(){
- editor.model.set( 'config', { yColumn: Number( $( this ).val() ) });
- });
- $dataControl.find( 'select[name="idColumn"]' ).val( config.idColumn ).on( 'change', function(){
- editor.model.set( 'config', { idColumn: Number( $( this ).val() ) });
- });
- if( config.idColumn !== undefined ){
- $dataControl.find( '#include-id-checkbox' ).prop( 'checked', true ).trigger( 'change' );
- }
$dataControl.find( '[title]' ).tooltip();
return $dataControl;
diff --git a/config/plugins/visualizations/scatterplot/static/scatterplot-edit.js b/config/plugins/visualizations/scatterplot/static/scatterplot-edit.js
index 78ef57b66a5..9dd093a2b4c 100644
--- a/config/plugins/visualizations/scatterplot/static/scatterplot-edit.js
+++ b/config/plugins/visualizations/scatterplot/static/scatterplot-edit.js
@@ -1 +1 @@
-function scatterplot(a,b,c){function d(){var a={v:{},h:{}};return a.v.lines=p.selectAll("line.v-grid-line").data(m.x.ticks(q.x.fn.ticks()[0])),a.v.lines.enter().append("svg:line").classed("grid-line v-grid-line",!0),a.v.lines.attr("x1",m.x).attr("x2",m.x).attr("y1",0).attr("y2",b.height),a.v.lines.exit().remove(),a.h.lines=p.selectAll("line.h-grid-line").data(m.y.ticks(q.y.fn.ticks()[0])),a.h.lines.enter().append("svg:line").classed("grid-line h-grid-line",!0),a.h.lines.attr("x1",0).attr("x2",b.width).attr("y1",m.y).attr("y2",m.y),a.h.lines.exit().remove(),a}function e(){return t.attr("cx",function(a,b){return m.x(j(a,b))}).attr("cy",function(a,b){return m.y(k(a,b))}).style("display","block").filter(function(){var a=d3.select(this).attr("cx"),c=d3.select(this).attr("cy");return 0>a||a>b.width?!0:0>c||c>b.height?!0:!1}).style("display","none")}function f(){$(".chart-info-box").remove(),q.redraw(),e(),s=d(),$(o.node()).trigger("zoom.scatterplot",{scale:n.scale(),translate:n.translate()})}function g(a,c,d){return c+=8,$(['
\n Use the following controls to how the chart is displayed.\n The slide controls can be moved by the mouse or, if the \'handle\' is in focus, your keyboard\'s arrow keys.\n Move the focus between controls by using the tab or shift+tab keys on your keyboard.\n Use the \'Draw\' button to render (or re-render) the chart with the current settings.\n
\n Use the following controls to change the data used by the chart.\n Use the \'Draw\' button to render (or re-render) the chart with the current settings.\n
\n\n\n
\n \n \n
\n
\n \n \n
\n\n\n
\n \n \n
\n These will be displayed (along with the x and y values) when you hover over\n a data point.\n
\n
\n
\n \n \n
\n\n\n
\n
Possible headers: ',(h=c.possibleHeaders)?h=h.call(b,{hash:{},data:e}):(h=b.possibleHeaders,h=typeof h===j?h.apply(b):h),i+=k(h)+'\n
\n \n \n
\n It looks like Galaxy couldn\'t get proper column headers for this data.\n Would you like to use the column headers above as column names to select columns?\n
\n Use the following controls to how the chart is displayed.\n The slide controls can be moved by the mouse or, if the \'handle\' is in focus, your keyboard\'s arrow keys.\n Move the focus between controls by using the tab or shift+tab keys on your keyboard.\n Use the \'Draw\' button to render (or re-render) the chart with the current settings.\n
\n Use the following control to change which columns are used by the chart. Click any cell\n from the last three rows of the table to select the column for the appropriate data.\n Use the \'Draw\' button to render (or re-render) the chart with the current settings.\n
\n\n
\n
X Column: which column values will be used for the x axis of the chart.
\n
Y Column: which column values will be used for the y axis of the chart.
\n
ID Column: an additional column value displayed when the user hovers over a data point.\n It may be useful to select unique or categorical identifiers here (such as gene ids).\n
\n Note: If it can be determined from the dataset\'s filetype that column is not numeric, that\n column choice may be disabled for either the x or y axis.\n
"].join(""))}));c.empty().append(f)},toggleStats:function(a){var b=this.$el.find(".stats-display");a=void 0===a?b.is(":hidden"):a,a?(this.$el.find("svg").hide(),b.show(),this.$el.find(".controls .stats-toggle-btn").text("Plot")):(b.hide(),this.$el.find("svg").show(),this.$el.find(".controls .stats-toggle-btn").text("Stats"))},toString:function(){return"ScatterplotView()"}}),ScatterplotModel=Visualization.extend({defaults:{type:"scatterplot",config:{pagination:{currPage:0,perPage:3e3},width:400,height:400,margin:{top:16,right:16,bottom:40,left:54},x:{ticks:10,label:"X"},y:{ticks:10,label:"Y"},datapointSize:4,animDuration:500,scale:1,translate:[0,0]}}});
\ No newline at end of file
diff --git a/config/plugins/visualizations/scatterplot/templates/scatterplot.mako b/config/plugins/visualizations/scatterplot/templates/scatterplot.mako
index 425c39367da..20e994fa014 100644
--- a/config/plugins/visualizations/scatterplot/templates/scatterplot.mako
+++ b/config/plugins/visualizations/scatterplot/templates/scatterplot.mako
@@ -87,7 +87,7 @@ $(function(){
model : model,
dataset : hdaJson
}).render();
- //window.editor = editor;
+ window.editor = editor;
$( '.chart-header h2' ).click( function(){
var returned = prompt( 'Enter a new title:' );
diff --git a/static/scripts/mvc/ui.js b/static/scripts/mvc/ui.js
index 656dc939f52..9b05d805eac 100644
--- a/static/scripts/mvc/ui.js
+++ b/static/scripts/mvc/ui.js
@@ -1299,3 +1299,310 @@ function dropDownSelect( options, selected ){
});
}());
+
+//==============================================================================
+/** Column selection using the peek display as the control.
+ * Adds rows to the bottom of the peek with clickable areas in each cell
+ * to allow the user to select columns.
+ * Column selection can be limited to a single column or multiple.
+ * (Optionally) adds a left hand column of column selection prompts.
+ * (Optionally) allows the column headers to be clicked/renamed
+ * and set to some initial value.
+ * (Optionally) hides comment rows.
+ * (Optionally) allows pre-selecting and disabling certain columns for
+ * each row control.
+ *
+ * Construct by selecting a peek table to be used with jQuery and
+ * calling 'peekControl' with options.
+ * Options must include a 'controls' array and can include other options
+ * listed below.
+ * @example:
+ * $( 'pre.peek' ).peekControl({
+ * columnNames : ["Chromosome", "Start", "Base", "", "", "Qual" ],
+ * controls : [
+ * { label: 'X Column', id: 'xColumn' },
+ * { label: 'Y Column', id: 'yColumn', selected: 2 },
+ * { label: 'ID Column', id: 'idColumn', selected: 4, disabled: [ 1, 5 ] },
+ * { label: 'Heatmap', id: 'heatmap', selected: [ 2, 4 ], disabled: [ 0, 1 ], multiselect: true,
+ * selectedText: 'Included', unselectedText: 'Excluded' }
+ * ],
+ * renameColumns : true,
+ * hideCommentRows : true,
+ * includePrompts : true,
+ * topLeftContent : 'Data sample:'
+ * }).on( 'peek-control.change', function( ev, selection ){
+ * console.info( 'new selection:', selection );
+ * //{ yColumn: 2 }
+ * }).on( 'peek-control.rename', function( ev, names ){
+ * console.info( 'column names', names );
+ * //[ 'Bler', 'Start', 'Base', '', '', 'Qual' ]
+ * });
+ *
+ * An event is fired when column selection is changed and the event
+ * is passed an object in the form: { the row id : the new selection value }.
+ * An event is also fired when the table headers are re-named and
+ * is passed the new array of column names.
+ */
+(function(){
+
+ /** option defaults */
+ var defaults = {
+ /** does this control allow renaming headers? */
+ renameColumns : false,
+ /** does this control allow renaming headers? */
+ columnNames : [],
+ /** the comment character used by the peek's datatype */
+ commentChar : '#',
+ /** should comment rows be shown or hidden in the peek */
+ hideCommentRows : false,
+ /** should a column of row control prompts be used */
+ includePrompts : true,
+ /** what is the content of the top left cell (often a title) */
+ topLeftContent : 'Columns:'
+ },
+ /** the string of the event fired when a control row changes */
+ CHANGE_EVENT = 'peek-control.change',
+ /** the string of the event fired when a column is renamed */
+ RENAME_EVENT = 'peek-control.rename',
+ /** class added to the pre.peek element (to allow css on just the control) */
+ PEEKCONTROL_CLASS = 'peek-control',
+ /** class added to the control rows */
+ ROW_CLASS = 'control',
+ /** class added to the left-hand cells that serve as row prompts */
+ PROMPT_CLASS = 'control-prompt',
+ /** class added to selected _cells_/tds */
+ SELECTED_CLASS = 'selected',
+ /** class added to disabled/un-clickable cells/tds */
+ DISABLED_CLASS = 'disabled',
+ /** class added to the clickable surface within a cell to select it */
+ BUTTON_CLASS = 'button',
+ /** class added to peek table header (th) cells to indicate they can be clicked and are renamable */
+ RENAMABLE_HEADER_CLASS = 'renamable-header',
+ /** the data key used for each cell to store the column index ('data-...') */
+ COLUMN_INDEX_DATA_KEY = 'column-index',
+ /** renamable header data key used to store the column name (w/o the number and dot: '1.Bler') */
+ COLUMN_NAME_DATA_KEY = 'column-name';
+
+ //TODO: not happy with pure functional here - rows should polymorph (multi, single, etc.)
+ //TODO: needs clean up, move handlers to outer scope
+
+ // ........................................................................
+ /** validate the control data sent in for each row */
+ function validateControl( control ){
+ if( control.disabled && jQuery.type( control.disabled ) !== 'array' ){
+ throw new Error( '"disabled" must be defined as an array of indeces: ' + JSON.stringify( control ) );
+ }
+ if( control.multiselect && control.selected && jQuery.type( control.selected ) !== 'array' ){
+ throw new Error( 'Mulitselect rows need an array for "selected": ' + JSON.stringify( control ) );
+ }
+ if( !control.label || !control.id ){
+ throw new Error( 'Peek controls need a label and id for each control row: ' + JSON.stringify( control ) );
+ }
+ if( control.disabled && control.disabled.indexOf( control.selected ) !== -1 ){
+ throw new Error( 'Selected column is in the list of disabled columns: ' + JSON.stringify( control ) );
+ }
+ return control;
+ }
+
+ /** build the inner control surface (i.e. button-like) */
+ function buildButton( control, columnIndex ){
+ return $( '' ).addClass( BUTTON_CLASS ).text( control.label );
+ }
+
+ /** build the basic (shared) cell structure */
+ function buildControlCell( control, columnIndex ){
+ var $td = $( '
' )
+ .html( buildButton( control, columnIndex ) )
+ .attr( 'data-' + COLUMN_INDEX_DATA_KEY, columnIndex );
+
+ // disable if index in disabled array
+ if( control.disabled && control.disabled.indexOf( columnIndex ) !== -1 ){
+ $td.addClass( DISABLED_CLASS );
+ }
+ return $td;
+ }
+
+ /** set the text of the control based on selected/un */
+ function setSelectedText( $cell, control, columnIndex ){
+ var $button = $cell.children( '.' + BUTTON_CLASS );
+ if( $cell.hasClass( SELECTED_CLASS ) ){
+ $button.html( ( control.selectedText !== undefined )?( control.selectedText ):( control.label ) );
+ } else {
+ $button.html( ( control.unselectedText !== undefined )?( control.unselectedText ):( control.label ) );
+ }
+ }
+
+ /** build a cell for a row that only allows one selection */
+ function buildSingleSelectCell( control, columnIndex ){
+ // only one selection - selected is single index
+ var $cell = buildControlCell( control, columnIndex );
+ if( control.selected === columnIndex ){
+ $cell.addClass( SELECTED_CLASS );
+ }
+ setSelectedText( $cell, control, columnIndex );
+
+ // only add the handler to non-disabled controls
+ if( !$cell.hasClass( DISABLED_CLASS ) ){
+ $cell.click( function selectClick( ev ){
+ var $cell = $( this );
+ // don't re-select or fire event if already selected
+ if( !$cell.hasClass( SELECTED_CLASS ) ){
+ // only one can be selected - remove selected on all others, add it here
+ var $otherSelected = $cell.parent().children( '.' + SELECTED_CLASS ).removeClass( SELECTED_CLASS );
+ $otherSelected.each( function(){
+ setSelectedText( $( this ), control, columnIndex );
+ });
+
+ $cell.addClass( SELECTED_CLASS );
+ setSelectedText( $cell, control, columnIndex );
+
+ // fire the event from the table itself, passing the id and index of selected
+ var eventData = {},
+ key = $cell.parent().attr( 'id' ),
+ val = $cell.data( COLUMN_INDEX_DATA_KEY );
+ eventData[ key ] = val;
+ $cell.parents( '.peek' ).trigger( CHANGE_EVENT, eventData );
+ }
+ });
+ }
+ return $cell;
+ }
+
+ /** build a cell for a row that allows multiple selections */
+ function buildMultiSelectCell( control, columnIndex ){
+ var $cell = buildControlCell( control, columnIndex );
+ // multiple selection - selected is an array
+ if( control.selected && control.selected.indexOf( columnIndex ) !== -1 ){
+ $cell.addClass( SELECTED_CLASS );
+ }
+ setSelectedText( $cell, control, columnIndex );
+
+ // only add the handler to non-disabled controls
+ if( !$cell.hasClass( DISABLED_CLASS ) ){
+ $cell.click( function multiselectClick( ev ){
+ var $cell = $( this );
+ // can be more than one selected - toggle selected on this cell
+ $cell.toggleClass( SELECTED_CLASS );
+ setSelectedText( $cell, control, columnIndex );
+ var selectedColumnIndeces = $cell.parent().find( '.' + SELECTED_CLASS ).map( function( i, e ){
+ return $( e ).data( COLUMN_INDEX_DATA_KEY );
+ });
+ // fire the event from the table itself, passing the id and index of selected
+ var eventData = {},
+ key = $cell.parent().attr( 'id' ),
+ val = jQuery.makeArray( selectedColumnIndeces );
+ eventData[ key ] = val;
+ $cell.parents( '.peek' ).trigger( CHANGE_EVENT, eventData );
+ });
+ }
+ return $cell;
+ }
+
+ /** iterate over columns in peek and create a control for each */
+ function buildControlCells( count, control ){
+ var $cells = [];
+ // build a control for each column - using a build fn based on control
+ for( var columnIndex=0; columnIndex' ).attr( 'id', control.id ).addClass( ROW_CLASS );
+ if( includePrompts ){
+ var $promptCell = $( '
' ).addClass( PROMPT_CLASS ).text( control.label + ':' );
+ $controlRow.append( $promptCell );
+ }
+ $controlRow.append( buildControlCells( cellCount, control ) );
+ return $controlRow;
+ }
+
+ // ........................................................................
+ /** add to the peek, using options for configuration, return the peek */
+ function peekControl( options ){
+ options = jQuery.extend( true, {}, defaults, options );
+
+ var $peek = $( this ).addClass( PEEKCONTROL_CLASS ),
+ $peektable = $peek.find( 'table' ),
+ // get the size of the tables - width and height, number of comment rows
+ columnCount = $peektable.find( 'th' ).size(),
+ rowCount = $peektable.find( 'tr' ).size(),
+ // get the rows containing text starting with the comment char (also make them grey)
+ $commentRows = $peektable.find( 'td[colspan]' ).map( function( e, i ){
+ var $this = $( this );
+ if( $this.text() && $this.text().match( new RegExp( '^' + options.commentChar ) ) ){
+ return $( this ).css( 'color', 'grey' ).parent().get(0);
+ }
+ return null;
+ });
+
+ // should comment rows in the peek be hidden?
+ if( options.hideCommentRows ){
+ $commentRows.hide();
+ rowCount -= $commentRows.size();
+ }
+ //console.debug( 'rowCount:', rowCount, 'columnCount:', columnCount, '$commentRows:', $commentRows );
+
+ // should a first column of control prompts be added?
+ if( options.includePrompts ){
+ var $topLeft = $( '
' ).addClass( 'top-left' ).text( options.topLeftContent )
+ .attr( 'rowspan', rowCount );
+ $peektable.find( 'tr' ).first().prepend( $topLeft );
+ }
+
+ // save either the options column name or the parsed text of each column header in html5 data attr and text
+ var $headers = $peektable.find( 'th:not(.top-left)' ).each( function( i, e ){
+ var $this = $( this ),
+ // can be '1.name' or '1'
+ text = $this.text().replace( /^\d+\.*/, '' ),
+ name = options.columnNames[ i ] || text;
+ $this.attr( 'data-' + COLUMN_NAME_DATA_KEY, name )
+ .text( ( i + 1 ) + (( name )?( '.' + name ):( '' )) );
+ });
+
+ // allow renaming of columns when the header is clicked
+ if( options.renameColumns ){
+ $headers.addClass( RENAMABLE_HEADER_CLASS )
+ .click( function renameColumn(){
+ // prompt for new name
+ var $this = $( this ),
+ index = $this.index() + ( options.includePrompts? 0: 1 ),
+ prevName = $this.data( COLUMN_NAME_DATA_KEY ),
+ newColumnName = prompt( 'New column name:', prevName );
+ if( newColumnName !== null && newColumnName !== prevName ){
+ // set the new text and data
+ $this.text( index + ( newColumnName?( '.' + newColumnName ):'' ) )
+ .data( COLUMN_NAME_DATA_KEY, newColumnName )
+ .attr( 'data-', COLUMN_NAME_DATA_KEY, newColumnName );
+ // fire event for new column names
+ var columnNames = jQuery.makeArray(
+ $this.parent().children( 'th:not(.top-left)' ).map( function(){
+ return $( this ).data( COLUMN_NAME_DATA_KEY );
+ }));
+ $this.parents( '.peek' ).trigger( RENAME_EVENT, columnNames );
+ }
+ });
+ }
+
+ // build a row for each control
+ options.controls.forEach( function( control, i ){
+ validateControl( control );
+ var $controlRow = buildControlRow( columnCount, control, options.includePrompts );
+ $peektable.find( 'tbody' ).append( $controlRow );
+ });
+ return this;
+ }
+
+ // ........................................................................
+ // as jq plugin
+ jQuery.fn.extend({
+ peekControl : function $peekControl( options ){
+ return this.map( function(){
+ return peekControl.call( this, options );
+ });
+ }
+ });
+}());
diff --git a/static/scripts/packed/mvc/ui.js b/static/scripts/packed/mvc/ui.js
index d0b5d2e96ca..84ec5ae9a50 100644
--- a/static/scripts/packed/mvc/ui.js
+++ b/static/scripts/packed/mvc/ui.js
@@ -1 +1 @@
-var IconButton=Backbone.Model.extend({defaults:{title:"",icon_class:"",on_click:null,menu_options:null,is_menu_button:true,id:null,href:null,target:null,enabled:true,visible:true,tooltip_config:{}}});var IconButtonView=Backbone.View.extend({initialize:function(){this.model.attributes.tooltip_config={placement:"bottom"};this.model.bind("change",this.render,this)},render:function(){this.$el.tooltip("hide");var a=this.template(this.model.toJSON());a.tooltip(this.model.get("tooltip_config"));this.$el.replaceWith(a);this.setElement(a);return this},events:{click:"click"},click:function(a){if(_.isFunction(this.model.get("on_click"))){this.model.get("on_click")(a);return false}return true},template:function(b){var a='title="'+b.title+'" class="icon-button';if(b.is_menu_button){a+=" menu-button"}a+=" "+b.icon_class;if(!b.enabled){a+="_disabled"}a+='"';if(b.id){a+=' id="'+b.id+'"'}a+=' href="'+b.href+'"';if(b.target){a+=' target="'+b.target+'"'}if(!b.visible){a+=' style="display: none;"'}if(b.enabled){a=""}else{a=""}return $(a)}});var IconButtonCollection=Backbone.Collection.extend({model:IconButton});var IconButtonMenuView=Backbone.View.extend({tagName:"div",initialize:function(){this.render()},render:function(){var a=this;this.collection.each(function(d){var b=$("").attr("href","javascript:void(0)").attr("title",d.attributes.title).addClass("icon-button menu-button").addClass(d.attributes.icon_class).appendTo(a.$el).click(d.attributes.on_click);if(d.attributes.tooltip_config){b.tooltip(d.attributes.tooltip_config)}var c=d.get("options");if(c){make_popupmenu(b,c)}});return this}});var create_icon_buttons_menu=function(b,a){if(!a){a={}}var c=new IconButtonCollection(_.map(b,function(d){return new IconButton(_.extend(d,a))}));return new IconButtonMenuView({collection:c})};var Grid=Backbone.Collection.extend({});var GridView=Backbone.View.extend({});var PopupMenu=Backbone.View.extend({initialize:function(b,a){this.$button=b;if(!this.$button.size()){this.$button=$("")}this.options=a||[];var c=this;this.$button.click(function(d){$(".popmenu-wrapper").remove();c._renderAndShow(d);return false})},_renderAndShow:function(a){this.render();this.$el.appendTo("body").css(this._getShownPosition(a)).show();this._setUpCloseBehavior()},render:function(){this.$el.addClass("popmenu-wrapper").hide().css({position:"absolute"}).html(this.template(this.$button.attr("id"),this.options));if(this.options.length){var a=this;this.$el.find("li").each(function(c,b){var d=a.options[c];if(d.func){$(this).children("a.popupmenu-option").click(function(e){d.func.call(a,e,d)})}})}return this},template:function(b,a){return['
").addClass("pagination pagination-page-list"),r=function(t){n.goToPage($(this).data("page"))};for(var o=0;o=this.numPages){n=this.numPages-1}if(n===this.currPage){return this}this.currPage=n;this.$element.trigger("pagination.page-change",this.currPage);this._render();return this};i.prototype.prevPage=function c(){return this.goToPage(this.currPage-1)};i.prototype.nextPage=function h(){return this.goToPage(this.currPage+1)};i.prototype.page=function f(){return this.currPage};i.create=function k(n,o){return new i(n,o)};jQuery.fn.extend({pagination:function d(o){var n=jQuery.makeArray(arguments).slice(1);if(jQuery.type(o)==="object"){return this.map(function(){i.create($(this),o);return this})}var q=$(this[0]),r=q.data(i.prototype.DATA_KEY);if(r){if(jQuery.type(o)==="string"){var p=r[o];if(jQuery.type(p)==="function"){return p.apply(r,n)}}else{return r}}return undefined}})}());(function(){var g={renameColumns:false,columnNames:[],commentChar:"#",hideCommentRows:false,includePrompts:true,topLeftContent:"Columns:"},s="peek-control.change",t="peek-control.rename",l="peek-control",v="control",f="control-prompt",c="selected",n="disabled",u="button",q="renamable-header",p="column-index",a="column-name";function i(w){if(w.disabled&&jQuery.type(w.disabled)!=="array"){throw new Error('"disabled" must be defined as an array of indeces: '+JSON.stringify(w))}if(w.multiselect&&w.selected&&jQuery.type(w.selected)!=="array"){throw new Error('Mulitselect rows need an array for "selected": '+JSON.stringify(w))}if(!w.label||!w.id){throw new Error("Peek controls need a label and id for each control row: "+JSON.stringify(w))}if(w.disabled&&w.disabled.indexOf(w.selected)!==-1){throw new Error("Selected column is in the list of disabled columns: "+JSON.stringify(w))}return w}function o(x,w){return $("").addClass(u).text(x.label)}function k(x,w){var y=$("