mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
528 lines
20 KiB
JavaScript
528 lines
20 KiB
JavaScript
define([
|
|
"../libs/underscore",
|
|
"../libs/d3",
|
|
"../mvc/base-mvc"
|
|
|
|
], function(){
|
|
/* =============================================================================
|
|
todo:
|
|
outside this:
|
|
BUG: visualization menu doesn't disappear
|
|
BUG?: get column_names (from datatype if necessary)
|
|
BUG: single vis in popupmenu should have tooltip with that name NOT 'Visualizations'
|
|
|
|
??: maybe better to do this with a canvas...
|
|
|
|
move renderScatter plot to obj, possibly view?
|
|
|
|
fix x axis - adjust ticks when tick labels are long - move odds down and extend tick line
|
|
|
|
provide callback in view to load data incrementally - for large sets
|
|
|
|
paginate
|
|
handle rerender
|
|
use endpoint (here and on the server (fileptr))
|
|
fetch (new?) data
|
|
handle rerender
|
|
|
|
selectable list of preset column comparisons (rnaseq etc.)
|
|
multiple plots on one page (small multiples)
|
|
|
|
where are bad dataprovider params handled? api/datasets?
|
|
|
|
config changes to the graph
|
|
render stats on the data (max, min, count)
|
|
render warning on long data (> maxDataPoints)
|
|
adjust endpoint
|
|
|
|
loading indicator
|
|
|
|
download svg -> base64 encode
|
|
dress up ui
|
|
|
|
incorporate glyphs, glyph state renderers
|
|
|
|
validate columns selection (here or server)
|
|
|
|
?? ensure svg styles thru d3 or css?
|
|
d3: configable (easily)
|
|
css: standard - better maintenance
|
|
? override at config
|
|
|
|
============================================================================= */
|
|
/**
|
|
* Two Variable scatterplot visualization using d3
|
|
* Uses semi transparent circles to show density of data in x, y grid
|
|
* usage :
|
|
* var plot = new TwoVarScatterplot({ containerSelector : 'div#my-plot', ... })
|
|
* plot.render( xColumnData, yColumnData );
|
|
*
|
|
* depends on: d3, underscore
|
|
*/
|
|
function TwoVarScatterplot( config ){
|
|
var plot = this,
|
|
TICK_LINE_AND_PADDING = 10,
|
|
GUESS_AT_SVG_CHAR_WIDTH = 7,
|
|
GUESS_AT_SVG_CHAR_HEIGHT = 10,
|
|
PADDING = 8,
|
|
X_LABEL_TOO_LONG_AT = 5;
|
|
|
|
//this.debugging = true;
|
|
this.log = function(){
|
|
if( this.debugging && console && console.debug ){
|
|
var args = Array.prototype.slice.call( arguments );
|
|
args.unshift( this.toString() );
|
|
console.debug.apply( null, args );
|
|
}
|
|
};
|
|
this.log( 'new TwoVarScatterplot:', config );
|
|
|
|
// ........................................................ set up chart config
|
|
// config will default to these values when not passed in
|
|
//NOTE: called on new
|
|
this.defaults = {
|
|
id : 'TwoVarScatterplot',
|
|
containerSelector : 'body',
|
|
maxDataPoints : 30000,
|
|
bubbleRadius : 4,
|
|
entryAnimDuration : 500,
|
|
//TODO: no effect?
|
|
xNumTicks : 10,
|
|
yNumTicks : 10,
|
|
xAxisLabelBumpY : 40,
|
|
yAxisLabelBumpX : -35,
|
|
width : 500,
|
|
height : 500,
|
|
//TODO: anyway to make this a sub-obj?
|
|
marginTop : 50,
|
|
marginRight : 50,
|
|
marginBottom : 50,
|
|
marginLeft : 50,
|
|
xMin : null,
|
|
xMax : null,
|
|
yMin : null,
|
|
yMax : null,
|
|
xLabel : "X",
|
|
yLabel : "Y"
|
|
};
|
|
this.config = _.extend( {}, this.defaults, config );
|
|
|
|
this.updateConfig = function( newConfig ){
|
|
_.extend( this.config, newConfig );
|
|
};
|
|
|
|
// ........................................................ helpers
|
|
this.toString = function(){
|
|
return this.config.id;
|
|
};
|
|
this.translateStr = function( x, y ){
|
|
return 'translate(' + x + ',' + y + ')';
|
|
};
|
|
this.rotateStr = function( d, x, y ){
|
|
return 'rotate(' + d + ',' + x + ',' + y + ')';
|
|
};
|
|
|
|
// ........................................................ initial element creation
|
|
//NOTE: called on new
|
|
this.svg = d3.select( this.config.containerSelector )
|
|
.append( "svg:svg" ).attr( "class", "chart" ).style( 'display', 'none' );
|
|
this.content = this.svg.append( "svg:g" ).attr( "class", "content" );
|
|
|
|
this.xAxis = this.content.append( 'g' ).attr( 'class', 'axis' ).attr( 'id', 'x-axis' );
|
|
this.xAxisLabel = this.xAxis.append( 'text' ).attr( 'class', 'axis-label' ).attr( 'id', 'x-axis-label' );
|
|
|
|
this.yAxis = this.content.append( 'g' ).attr( 'class', 'axis' ).attr( 'id', 'y-axis' );
|
|
this.yAxisLabel = this.yAxis.append( 'text' ).attr( 'class', 'axis-label' ).attr( 'id', 'y-axis-label' );
|
|
|
|
this.log( 'built svg:', d3.selectAll( 'svg' ) );
|
|
|
|
this.adjustChartDimensions = function( top, right, bottom, left ){
|
|
top = top || 0;
|
|
right = right || 0;
|
|
bottom = bottom || 0;
|
|
left = left || 0;
|
|
this.svg
|
|
.attr( "width", this.config.width + ( this.config.marginRight + right ) +
|
|
( this.config.marginLeft + left ) )
|
|
.attr( "height", this.config.height + ( this.config.marginTop + top ) +
|
|
( this.config.marginBottom + bottom ) )
|
|
// initial is hidden - show it
|
|
.style( 'display', 'block' );
|
|
|
|
// move content group away from margins
|
|
//TODO: allow top, right axis
|
|
this.content = this.svg.select( "g.content" )
|
|
.attr( "transform", this.translateStr( this.config.marginLeft + left, this.config.marginTop + top ) );
|
|
};
|
|
|
|
// ........................................................ data and scales
|
|
this.preprocessData = function( data ){
|
|
// set a cap on the data, limit to first n points
|
|
return data.slice( 0, this.config.maxDataPoints );
|
|
};
|
|
|
|
this.setUpDomains = function( xCol, yCol ){
|
|
this.xMin = this.config.xMin || d3.min( xCol );
|
|
this.xMax = this.config.xMax || d3.max( xCol );
|
|
this.yMin = this.config.yMin || d3.min( yCol );
|
|
this.yMax = this.config.yMax || d3.max( yCol );
|
|
};
|
|
|
|
this.setUpScales = function(){
|
|
// Interpolation for x, y based on data domains
|
|
this.xScale = d3.scale.linear()
|
|
.domain([ this.xMin, this.xMax ])
|
|
.range([ 0, this.config.width ]),
|
|
this.yScale = d3.scale.linear()
|
|
.domain([ this.yMin, this.yMax ])
|
|
.range([ this.config.height, 0 ]);
|
|
};
|
|
|
|
// ........................................................ axis and ticks
|
|
this.setUpXAxis = function(){
|
|
// origin: bottom, left
|
|
//TODO: incoporate top, right
|
|
this.xAxisFn = d3.svg.axis()
|
|
.scale( this.xScale )
|
|
.ticks( this.config.xNumTicks )
|
|
.orient( 'bottom' );
|
|
this.xAxis// = content.select( 'g#x-axis' )
|
|
.attr( 'transform', this.translateStr( 0, this.config.height ) )
|
|
.call( this.xAxisFn );
|
|
//this.log( 'xAxis:', this.xAxis );
|
|
|
|
this.xLongestLabel = d3.max( _.map( [ this.xMin, this.xMax ],
|
|
function( number ){ return ( String( number ) ).length; } ) );
|
|
//this.log( 'xLongestLabel:', this.xLongestLabel );
|
|
|
|
if( this.xLongestLabel >= X_LABEL_TOO_LONG_AT ){
|
|
//TODO: adjust ticks when tick labels are long - move odds down and extend tick line
|
|
// (for now) hide them
|
|
this.xAxis.selectAll( 'g' ).filter( ':nth-child(odd)' ).style( 'display', 'none' );
|
|
}
|
|
|
|
this.xAxisLabel// = xAxis.select( 'text#x-axis-label' )
|
|
.attr( 'x', this.config.width / 2 )
|
|
.attr( 'y', this.config.xAxisLabelBumpY )
|
|
.attr( 'text-anchor', 'middle' )
|
|
.text( this.config.xLabel );
|
|
//this.log( 'xAxisLabel:', this.xAxisLabel );
|
|
};
|
|
|
|
this.setUpYAxis = function(){
|
|
this.yAxisFn = d3.svg.axis()
|
|
.scale( this.yScale )
|
|
.ticks( this.config.yNumTicks )
|
|
.orient( 'left' );
|
|
this.yAxis// = content.select( 'g#y-axis' )
|
|
.call( this.yAxisFn );
|
|
this.log( 'yAxis:', this.yAxis );
|
|
|
|
// get the tick labels for the y axis
|
|
var yTickLabels = this.yAxis.selectAll( 'text' ).filter( function( e, i ){ return i !== 0; } );
|
|
//this.log( 'yTickLabels:', yTickLabels );
|
|
|
|
// get the longest label length (or 0 if no labels)
|
|
this.yLongestLabel = d3.max(
|
|
//NOTE: d3 returns an nested array - use the plain array inside ([0])
|
|
yTickLabels[0].map( function( e, i ){
|
|
return ( d3.select( e ).text() ).length;
|
|
})
|
|
) || 0;
|
|
//this.log( 'yLongestLabel:', this.yLongestLabel );
|
|
//TODO: lose the guessing if possible
|
|
var neededY = TICK_LINE_AND_PADDING + ( this.yLongestLabel * GUESS_AT_SVG_CHAR_WIDTH )
|
|
+ PADDING + GUESS_AT_SVG_CHAR_HEIGHT;
|
|
//this.log( 'neededY:', neededY );
|
|
|
|
// increase width for yLongerStr, increase margin for y
|
|
//TODO??: (or transform each number: 2k)
|
|
this.config.yAxisLabelBumpX = -( neededY - GUESS_AT_SVG_CHAR_HEIGHT );
|
|
if( this.config.marginLeft < neededY ){
|
|
var adjusting = ( neededY ) - this.config.marginLeft;
|
|
adjusting = ( adjusting < 0 )?( 0 ):( adjusting );
|
|
this.log( 'adjusting:', adjusting );
|
|
|
|
// update dimensions, translations
|
|
this.adjustChartDimensions( 0, 0, 0, adjusting );
|
|
}
|
|
//this.log( 'this.config.yAxisLableBumpx, this.config.marginLeft:',
|
|
// this.config.yAxisLabelBumpX, this.config.marginLeft );
|
|
|
|
this.yAxisLabel// = yAxis.select( 'text#y-axis-label' )
|
|
.attr( 'x', this.config.yAxisLabelBumpX )
|
|
.attr( 'y', this.config.height / 2 )
|
|
.attr( 'text-anchor', 'middle' )
|
|
.attr( 'transform', this.rotateStr( -90, this.config.yAxisLabelBumpX, this.config.height / 2 ) )
|
|
.text( this.config.yLabel );
|
|
//this.log( 'yAxisLabel:', this.yAxisLabel );
|
|
};
|
|
|
|
// ........................................................ grid lines
|
|
this.renderGrid = function(){
|
|
// VERTICAL
|
|
// select existing
|
|
this.vGridLines = this.content.selectAll( 'line.v-grid-line' )
|
|
.data( this.xScale.ticks( this.xAxisFn.ticks()[0] ) );
|
|
|
|
// append any extra lines needed (more ticks)
|
|
this.vGridLines.enter().append( 'svg:line' )
|
|
.classed( 'grid-line v-grid-line', true );
|
|
|
|
// update the attributes of existing and appended
|
|
this.vGridLines
|
|
.attr( 'x1', this.xScale )
|
|
.attr( 'y1', 0 )
|
|
.attr( 'x2', this.xScale )
|
|
.attr( 'y2', this.config.height );
|
|
|
|
// remove unneeded (less ticks)
|
|
this.vGridLines.exit().remove();
|
|
//this.log( 'vGridLines:', this.vGridLines );
|
|
|
|
// HORIZONTAL
|
|
this.hGridLines = this.content.selectAll( 'line.h-grid-line' )
|
|
.data( this.yScale.ticks( this.yAxisFn.ticks()[0] ) );
|
|
|
|
this.hGridLines.enter().append( 'svg:line' )
|
|
.classed( 'grid-line h-grid-line', true );
|
|
|
|
this.hGridLines
|
|
.attr( 'x1', 0 )
|
|
.attr( 'y1', this.yScale )
|
|
.attr( 'x2', this.config.width )
|
|
.attr( 'y2', this.yScale );
|
|
|
|
this.hGridLines.exit().remove();
|
|
//this.log( 'hGridLines:', this.hGridLines );
|
|
};
|
|
|
|
// ........................................................ data points
|
|
//TODO: these to config ...somehow
|
|
//TODO: use these in renderDatapoints ...somehow
|
|
this.glyphEnterState = function( d3Elem ){
|
|
|
|
};
|
|
this.glyphFinalState = function( d3Elem ){
|
|
|
|
};
|
|
this.glyphExitState = function( d3Elem ){
|
|
|
|
};
|
|
|
|
this.renderDatapoints = function( xCol, yCol ){
|
|
|
|
var xPosFn = function( d, i ){
|
|
return plot.xScale( xCol[ i ] );
|
|
};
|
|
var yPosFn = function( d, i ){
|
|
return plot.yScale( yCol[ i ] );
|
|
};
|
|
|
|
// select all existing glyphs and compare to incoming data
|
|
// enter() will yield those glyphs that need to be added
|
|
// exit() will yield existing glyphs that need to be removed
|
|
this.datapoints = this.content.selectAll( ".glyph" )
|
|
.data( xCol );
|
|
|
|
// enter - new data to be added as glyphs: give them a 'entry' position and style
|
|
this.datapoints.enter()
|
|
.append( "svg:circle" ).attr( "class", "glyph" )
|
|
// start all bubbles at corner...
|
|
.attr( "cx", xPosFn )
|
|
.attr( "cy", 0 )
|
|
.attr( "r", 0 );
|
|
|
|
// for all existing glyphs and those that need to be added: transition anim to final state
|
|
this.datapoints
|
|
// ...animate to final position
|
|
.transition().duration( this.config.entryAnimDuration )
|
|
.attr( "cx", xPosFn )
|
|
.attr( "cy", yPosFn )
|
|
.attr( "r", this.config.bubbleRadius );
|
|
|
|
// glyphs that need to be removed: transition to from normal state to 'exit' state, remove from DOM
|
|
this.datapoints.exit()
|
|
.transition().duration( this.config.entryAnimDuration )
|
|
.attr( "cy", this.config.height )
|
|
.attr( "r", 0 )
|
|
.style( "fill-opacity", 0 )
|
|
.remove();
|
|
|
|
//this.log( this.datapoints, 'glyphs rendered' );
|
|
};
|
|
|
|
this.render = function( xCol, yCol ){
|
|
//pre: columns passed are numeric
|
|
this.log( 'renderScatterplot', xCol.length, yCol.length, this.config );
|
|
|
|
//pre: xCol.len == yCol.len
|
|
//TODO: ^^ isn't necessarily true with current ColumnDataProvider
|
|
xCol = this.preprocessData( xCol );
|
|
yCol = this.preprocessData( yCol );
|
|
//this.log( 'xCol len', xCol.length, 'yCol len', yCol.length );
|
|
|
|
//TODO: compute min, max on server.
|
|
this.setUpDomains( xCol, yCol );
|
|
//this.log( 'xMin, xMax, yMin, yMax:', this.xMin, this.xMax, this.yMin, this.yMax );
|
|
|
|
this.setUpScales();
|
|
this.adjustChartDimensions();
|
|
|
|
this.setUpXAxis();
|
|
this.setUpYAxis();
|
|
|
|
this.renderGrid();
|
|
this.renderDatapoints( xCol, yCol );
|
|
//TODO: on hover red line to axes, display values
|
|
};
|
|
}
|
|
|
|
//==============================================================================
|
|
/**
|
|
* Scatterplot control UI as a backbone view
|
|
*
|
|
*/
|
|
var ScatterplotView = BaseView.extend( LoggableMixin ).extend({
|
|
//logger : console,
|
|
tagName : 'form',
|
|
className : 'scatterplot-settings-form',
|
|
|
|
loadingIndicatorImagePath : ( galaxy_paths.get( 'image_path' ) + '/loading_large_white_bg.gif' ),
|
|
|
|
events : {
|
|
'click #render-button' : 'renderScatterplot'
|
|
},
|
|
|
|
initialize : function( attributes ){
|
|
if( !attributes || !attributes.dataset ){
|
|
throw( "ScatterplotView requires a dataset" );
|
|
} else {
|
|
this.dataset = attributes.dataset;
|
|
}
|
|
|
|
// passed from mako helper
|
|
//TODO: integrate to galaxyPaths
|
|
this.apiDatasetsURL = attributes.apiDatasetsURL;
|
|
|
|
// set up the basic chart infrastructure with config (if any)
|
|
this.chartConfig = attributes.chartConfig || {};
|
|
this.log( 'this.chartConfig:', this.chartConfig );
|
|
this.plot = new TwoVarScatterplot( this.chartConfig );
|
|
},
|
|
|
|
render : function(){
|
|
//TODO: to template
|
|
var view = this,
|
|
html = '',
|
|
columnHtml = '';
|
|
|
|
// build column select controls for each x, y (based on name if available)
|
|
// ugh...hafta preprocess
|
|
this.dataset.metadata_column_types = this.dataset.metadata_column_types.split( ', ' );
|
|
_.each( this.dataset.metadata_column_types, function( type, index ){
|
|
// use only numeric columns
|
|
if( type === 'int' || type === 'float' ){
|
|
var name = 'column ' + index;
|
|
// label with the name if available
|
|
if( view.dataset.metadata_column_names ){
|
|
name = view.dataset.metadata_column_names[ index ];
|
|
}
|
|
columnHtml += '<option value="' + index + '">' + name + '</option>';
|
|
}
|
|
});
|
|
|
|
// loading indicator - initially hidden
|
|
html += '<div id="loading-indicator" style="display: none;">';
|
|
html += '<img class="loading-img" src=' + this.loadingIndicatorImagePath + ' />';
|
|
html += '<span class="loading-message"></span>';
|
|
html += '</div>';
|
|
|
|
// column selector containers
|
|
html += '<div id="x-column-input">';
|
|
html += '<label for="">Data column for X: </label><select name="x-column">' + columnHtml + '</select>';
|
|
html += '</div>';
|
|
|
|
html += '<div id="y-column-input">';
|
|
html += '<label for="">Data column for Y: </label><select name="y-column">' + columnHtml + '</select>';
|
|
html += '</div>';
|
|
|
|
html += '<input id="render-button" type="button" value="Draw" />';
|
|
html += '<div class="clear"></div>';
|
|
|
|
//TODO: other vals: max_vals, start_val, pagination
|
|
|
|
this.$el.append( html );
|
|
this.$el.find( '#render-button' );
|
|
return this;
|
|
},
|
|
|
|
showLoadingIndicator : function( message ){
|
|
message = message || '';
|
|
this.$el.find( 'div#loading-indicator' ).children( '.loading-message' ).text( message );
|
|
this.$el.find( 'div#loading-indicator' ).show( 'fast' );
|
|
},
|
|
|
|
hideLoadingIndicator : function(){
|
|
this.$el.find( 'div#loading-indicator' ).hide( 'fast' );
|
|
},
|
|
|
|
renderScatterplot : function(){
|
|
// parse the column values for both
|
|
// indeces (for the data fetch) and names (for the graph)
|
|
var view = this,
|
|
url = this.apiDatasetsURL + '/' + this.dataset.id + '?data_type=raw_data&',
|
|
|
|
xSelector = this.$el.find( '[name="x-column"]' ),
|
|
xVal = xSelector.val(),
|
|
xName = xSelector.children( '[value="' + xVal + '"]' ).text(),
|
|
|
|
ySelector = this.$el.find( '[name="y-column"]' ),
|
|
yVal = ySelector.val(),
|
|
yName = ySelector.children( '[value="' + yVal + '"]' ).text();
|
|
this.log( xName, yName );
|
|
|
|
this.chartConfig.xLabel = xName;
|
|
this.chartConfig.yLabel = yName;
|
|
|
|
//TODO: alter directly
|
|
view.plot.updateConfig( this.chartConfig );
|
|
|
|
//TODO: validate columns - minimally: we can assume either set by selectors or via a good query string
|
|
//TODO: other vals: max, start, page
|
|
//TODO: chart config
|
|
|
|
// fetch the data, sending chosen columns to the server
|
|
url += jQuery.param({
|
|
columns : '[' + [ xVal, yVal ] + ']'
|
|
});
|
|
this.log( 'url:', url );
|
|
|
|
this.showLoadingIndicator( 'Fetching data...' );
|
|
jQuery.ajax({
|
|
url : url,
|
|
dataType : 'json',
|
|
success : function( response ){
|
|
//TODO: server sends back an endpoint, cache for next pagination request
|
|
view.showLoadingIndicator( 'Rendering...' );
|
|
view.endpoint = response.endpoint;
|
|
view.plot.render(
|
|
// pull apart first two regardless of number of columns
|
|
_.map( response.data, function( columns ){ return columns[0]; } ),
|
|
_.map( response.data, function( columns ){ return columns[1]; } )
|
|
);
|
|
view.hideLoadingIndicator();
|
|
},
|
|
error : function( xhr, status, error ){
|
|
view.hideLoadingIndicator();
|
|
alert( 'ERROR:' + status + '\n' + error );
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
//==============================================================================
|
|
return {
|
|
//TwoVarScatterplot : TwoVarScatterplot,
|
|
ScatterplotView : ScatterplotView
|
|
};}); |