mirror of
https://github.com/galaxyproject/galaxy.git
synced 2026-09-24 16:30:27 +08:00
Visualization framework: add plugin version of scatterplot to be managed in the repo
This commit is contained in:
Carl Eberhard
@@ -0,0 +1,56 @@
|
||||
<p class="help-text">
|
||||
Use the following controls to how the chart is displayed.
|
||||
The slide controls can be moved by the mouse or, if the 'handle' is in focus, your keyboard's arrow keys.
|
||||
Move the focus between controls by using the tab or shift+tab keys on your keyboard.
|
||||
Use the 'Draw' button to render (or re-render) the chart with the current settings.
|
||||
</p>
|
||||
|
||||
<div id="datapointSize" class="form-input numeric-slider-input">
|
||||
<label for="datapointSize">Size of data point: </label>
|
||||
<div class="slider-output">{{datapointSize}}</div>
|
||||
<div class="slider"></div>
|
||||
<p class="form-help help-text-small">
|
||||
Size of the graphic representation of each data point
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="animDuration" class="form-input checkbox-input">
|
||||
<label for="animate-chart">Animate chart transitions?: </label>
|
||||
<input type="checkbox" id="animate-chart"
|
||||
class="checkbox control"{{#if animDuration}} checked="true"{{/if}} />
|
||||
<p class="form-help help-text-small">
|
||||
Uncheck this to disable the animations used on the chart
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="width" class="form-input numeric-slider-input">
|
||||
<label for="width">Chart width: </label>
|
||||
<div class="slider-output">{{width}}</div>
|
||||
<div class="slider"></div>
|
||||
<p class="form-help help-text-small">
|
||||
(not including chart margins and axes)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="height" class="form-input numeric-slider-input">
|
||||
<label for="height">Chart height: </label>
|
||||
<div class="slider-output">{{height}}</div>
|
||||
<div class="slider"></div>
|
||||
<p class="form-help help-text-small">
|
||||
(not including chart margins and axes)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="X-axis-label"class="text-input form-input">
|
||||
<label for="X-axis-label">Re-label the X axis: </label>
|
||||
<input type="text" name="X-axis-label" id="X-axis-label" value="{{xLabel}}" />
|
||||
<p class="form-help help-text-small"></p>
|
||||
</div>
|
||||
|
||||
<div id="Y-axis-label" class="text-input form-input">
|
||||
<label for="Y-axis-label">Re-label the Y axis: </label>
|
||||
<input type="text" name="Y-axis-label" id="Y-axis-label" value="{{yLabel}}" />
|
||||
<p class="form-help help-text-small"></p>
|
||||
</div>
|
||||
|
||||
<input id="render-button" type="button" value="Draw" />
|
||||
@@ -0,0 +1 @@
|
||||
<svg width="{{width}}" height="{{height}}"></svg>
|
||||
|
After Width: | Height: | Size: 49 B |
@@ -0,0 +1,56 @@
|
||||
<p class="help-text">
|
||||
Use the following controls to change the data used by the chart.
|
||||
Use the 'Draw' button to render (or re-render) the chart with the current settings.
|
||||
</p>
|
||||
|
||||
{{! column selector containers }}
|
||||
<div class="column-select">
|
||||
<label for="X-select">Data column for X: </label>
|
||||
<select name="X" id="X-select">
|
||||
{{#each numericColumns}}
|
||||
<option value="{{index}}">{{name}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
<div class="column-select">
|
||||
<label for="Y-select">Data column for Y: </label>
|
||||
<select name="Y" id="Y-select">
|
||||
{{#each numericColumns}}
|
||||
<option value="{{index}}">{{name}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{! optional id column }}
|
||||
<div id="include-id">
|
||||
<label for="include-id-checkbox">Include a third column as data point IDs?</label>
|
||||
<input type="checkbox" name="include-id" id="include-id-checkbox" />
|
||||
<p class="help-text-small">
|
||||
These will be displayed (along with the x and y values) when you hover over
|
||||
a data point.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column-select" style="display: none">
|
||||
<label for="ID-select">Data column for IDs: </label>
|
||||
<select name="ID" id="ID-select">
|
||||
{{#each allColumns}}
|
||||
<option value="{{index}}">{{name}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{! if we're using generic column selection names ('column 1') - allow the user to use the first line }}
|
||||
<div id="first-line-header" style="display: none;">
|
||||
<p>Possible headers: {{ possibleHeaders }}
|
||||
</p>
|
||||
<label for="first-line-header-checkbox">Use the above as column headers?</label>
|
||||
<input type="checkbox" name="include-id" id="first-line-header-checkbox"
|
||||
{{#if usePossibleHeaders }}checked="true"{{/if}}/>
|
||||
<p class="help-text-small">
|
||||
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?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<input id="render-button" type="button" value="Draw" />
|
||||
<div class="clear"></div>
|
||||
+46
@@ -0,0 +1,46 @@
|
||||
{{! main layout }}
|
||||
|
||||
<div class="scatterplot-container chart-container tabbable tabs-left">
|
||||
{{! tab buttons/headers using Bootstrap }}
|
||||
<ul class="nav nav-tabs">
|
||||
{{! start with the data controls as the displayed tab }}
|
||||
<li class="active"><a href="#data-control" data-toggle="tab" class="tooltip"
|
||||
title="Use this tab to change which data are used">Data Controls</a></li>
|
||||
<li><a href="#chart-control" data-toggle="tab" class="tooltip"
|
||||
title="Use this tab to change how the chart is drawn">Chart Controls</a></li>
|
||||
<li><a href="#stats-display" data-toggle="tab" class="tooltip"
|
||||
title="This tab will display overall statistics for your data">Statistics</a></li>
|
||||
<li><a href="#chart-display" data-toggle="tab" class="tooltip"
|
||||
title="This tab will display the chart">Chart</a>
|
||||
{{! loading indicator - initially hidden }}
|
||||
<div id="loading-indicator" style="display: none;">
|
||||
<img class="loading-img" src="{{loadingIndicatorImagePath}}" />
|
||||
<span class="loading-message">{{message}}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{{! data form, chart config form, stats, and chart all get their own tab }}
|
||||
<div class="tab-content">
|
||||
{{! ---------------------------- tab for data settings form }}
|
||||
<div id="data-control" class="tab-pane active">
|
||||
{{! rendered separately }}
|
||||
</div>
|
||||
|
||||
{{! ---------------------------- tab for chart graphics control form }}
|
||||
<div id="chart-control" class="tab-pane">
|
||||
{{! rendered separately }}
|
||||
</div>
|
||||
|
||||
{{! ---------------------------- tab for data statistics }}
|
||||
<div id="stats-display" class="tab-pane">
|
||||
{{! rendered separately }}
|
||||
</div>
|
||||
|
||||
{{! ---------------------------- tab for actual chart }}
|
||||
<div id="chart-display" class="tab-pane">
|
||||
{{! chart rendered separately }}
|
||||
</div>
|
||||
|
||||
</div>{{! end .tab-content }}
|
||||
</div>{{! end .chart-control }}
|
||||
@@ -0,0 +1,8 @@
|
||||
<p class="help-text">By column:</p>
|
||||
<table id="chart-stats-table">
|
||||
<thead><th></th><th>X</th><th>Y</th></thead>
|
||||
{{#each stats}}
|
||||
<tr><td>{{name}}</td><td>{{xval}}</td><td>{{yval}}</td></tr>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</table>
|
||||
@@ -0,0 +1,488 @@
|
||||
/* =============================================================================
|
||||
todo:
|
||||
outside this:
|
||||
BUG: setting width, height in plot controls doesn't re-interpolate data locations!!
|
||||
BUG?: get metadata_column_names (from datatype if necessary)
|
||||
BUG: single vis in popupmenu should have tooltip with that name NOT 'Visualizations'
|
||||
|
||||
wire label setters, anim setter
|
||||
|
||||
TwoVarScatterplot:
|
||||
??: maybe better to do this with a canvas...
|
||||
save as visualization
|
||||
to seperate file?
|
||||
remove underscore dependencies
|
||||
add interface to change values (seperate)?
|
||||
download svg -> base64 encode
|
||||
incorporate glyphs, glyph state renderers
|
||||
|
||||
ScatterplotSettingsForm:
|
||||
some css bug that lowers the width of settings form when plot-controls tab is open
|
||||
causes chart to shift
|
||||
what can be abstracted/reused for other graphs?
|
||||
avoid direct manipulation of this.plot
|
||||
allow option to put plot into seperate tab of interface (for small multiples)
|
||||
|
||||
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
|
||||
use d3.TSV?
|
||||
render warning on long data (> maxDataPoints)
|
||||
adjust endpoint
|
||||
|
||||
selectable list of preset column comparisons (rnaseq etc.)
|
||||
how to know what sort of Tabular the data is?
|
||||
smarter about headers
|
||||
validate columns selection (here or server)
|
||||
|
||||
set stats column names by selected columns
|
||||
move chart into tabbed area...
|
||||
|
||||
Scatterplot.mako:
|
||||
multiple plots on one page (small multiples)
|
||||
?? 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 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;
|
||||
|
||||
// set up logging
|
||||
//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( console, 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',
|
||||
//TODO??: needed?
|
||||
maxDataPoints : 30000,
|
||||
datapointSize : 4,
|
||||
animDuration : 500,
|
||||
//TODO: variable effect (not always exactly # of ticks set to)
|
||||
xNumTicks : 10,
|
||||
yNumTicks : 10,
|
||||
xAxisLabelBumpY : 40,
|
||||
yAxisLabelBumpX : -40,
|
||||
width : 400,
|
||||
height : 400,
|
||||
//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.log( 'intial config:', this.config );
|
||||
|
||||
this.updateConfig = function( newConfig, rerender ){
|
||||
// setter for chart config
|
||||
//TODO: validate here
|
||||
_.extend( this.config, newConfig );
|
||||
this.log( this + '.updateConfig:', this.config );
|
||||
//TODO: implement rerender flag
|
||||
};
|
||||
|
||||
// ........................................................ helpers
|
||||
this.toString = function(){
|
||||
return this.config.id;
|
||||
};
|
||||
// conv. methods for svg transforms
|
||||
this.translateStr = function( x, y ){
|
||||
return 'translate(' + x + ',' + y + ')';
|
||||
};
|
||||
this.rotateStr = function( d, x, y ){
|
||||
return 'rotate(' + d + ',' + x + ',' + y + ')';
|
||||
};
|
||||
|
||||
// ........................................................ initial element creation
|
||||
this.adjustChartDimensions = function( top, right, bottom, left ){
|
||||
//this.log( this + '.adjustChartDimensions', arguments );
|
||||
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, min, max ){
|
||||
//this.log( this + '.preprocessData', arguments );
|
||||
//TODO: filter by min, max if set
|
||||
|
||||
// set a cap on the data, limit to first n points
|
||||
return ( data.length > this.config.maxDataPoints )? ( data.slice( 0, this.config.maxDataPoints ) ): ( data );
|
||||
};
|
||||
|
||||
this.findMinMaxes = function( xCol, yCol, meta ){
|
||||
//this.log( this + '.findMinMaxes', arguments );
|
||||
// configuration takes priority, otherwise meta (from the server) if passed, last-resort: compute it here
|
||||
this.xMin = this.config.xMin || ( meta )?( meta[0].min ):( d3.min( xCol ) );
|
||||
this.xMax = this.config.xMax || ( meta )?( meta[0].max ):( d3.max( xCol ) );
|
||||
this.yMin = this.config.yMin || ( meta )?( meta[1].min ):( d3.min( yCol ) );
|
||||
this.yMax = this.config.yMax || ( meta )?( meta[1].max ):( d3.max( yCol ) );
|
||||
};
|
||||
|
||||
this.setUpScales = function(){
|
||||
//this.log( this + '.setUpScales', arguments );
|
||||
// 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(){
|
||||
//this.log( this + '.setUpXAxis', arguments );
|
||||
// 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 );
|
||||
|
||||
//TODO: adjust ticks when tick labels are long - move odds down and extend tick line
|
||||
// (for now) hide them
|
||||
var xLongestTickLabel = d3.max( _.map( [ this.xMin, this.xMax ],
|
||||
function( number ){ return ( String( number ) ).length; } ) );
|
||||
//this.log( 'xLongestTickLabel:', xLongestTickLabel );
|
||||
if( xLongestTickLabel >= X_LABEL_TOO_LONG_AT ){
|
||||
this.xAxis.selectAll( 'g' ).filter( ':nth-child(odd)' ).style( 'display', 'none' );
|
||||
}
|
||||
|
||||
this.log( 'this.config.xLabel:', this.config.xLabel );
|
||||
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.log( this + '.setUpYAxis', arguments );
|
||||
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 );
|
||||
|
||||
// a too complicated section for increasing the left margin when tick labels are long
|
||||
// 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(){
|
||||
//this.log( this + '.renderGrid', arguments );
|
||||
// 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
|
||||
this.renderDatapoints = function( xCol, yCol, ids ){
|
||||
this.log( this + '.renderDatapoints', arguments );
|
||||
var count = 0,
|
||||
plot = this,
|
||||
xPosFn = function( d, i ){
|
||||
//if( d ){ this.log( 'x.data:', newXCol[ i ], 'plotted:', plot.xScale( newXCol[ i ] ) ); }
|
||||
return plot.xScale( xCol[ i ] );
|
||||
},
|
||||
yPosFn = function( d, i ){
|
||||
//if( d ){ this.log( 'y.data:', newYCol[ i ], 'plotted:', plot.yScale( newYCol[ i ] ) ); }
|
||||
return plot.yScale( yCol[ i ] );
|
||||
};
|
||||
|
||||
//this.datapoints = this.addDatapoints( xCol, yCol, ids, ".glyph" );
|
||||
var datapoints = this.content.selectAll( '.glyph' ).data( xCol );
|
||||
|
||||
// enter - NEW data to be added as glyphs: give them a 'entry' position and style
|
||||
count = 0;
|
||||
datapoints.enter()
|
||||
.append( 'svg:circle' )
|
||||
.each( function(){ count += 1; } )
|
||||
.classed( "glyph", true )
|
||||
.attr( "cx", 0 )
|
||||
.attr( "cy", this.config.height )
|
||||
// start all bubbles small...
|
||||
.attr( "r", 0 );
|
||||
this.log( count, ' new glyphs created' );
|
||||
|
||||
// for all EXISTING glyphs and those that need to be added: transition anim to final state
|
||||
count = 0;
|
||||
datapoints
|
||||
// ...animate to final position
|
||||
.transition().duration( this.config.animDuration )
|
||||
.each( function(){ count += 1; } )
|
||||
.attr( "cx", xPosFn )
|
||||
.attr( "cy", yPosFn )
|
||||
.attr( "r", plot.config.datapointSize );
|
||||
this.log( count, ' existing glyphs transitioned' );
|
||||
|
||||
// events
|
||||
// glyphs that need to be removed: transition to from normal state to 'exit' state, remove from DOM
|
||||
datapoints.exit()
|
||||
.each( function(){ count += 1; } )
|
||||
.transition().duration( this.config.animDuration )
|
||||
.attr( "cy", this.config.height )
|
||||
.attr( "r", 0 )
|
||||
.remove();
|
||||
this.log( count, ' glyphs removed' );
|
||||
|
||||
this._addDatapointEventhandlers( datapoints, xCol, yCol, ids );
|
||||
};
|
||||
|
||||
this._addDatapointEventhandlers = function( datapoints, xCol, yCol, ids ){
|
||||
var plot = this;
|
||||
datapoints
|
||||
//TODO: remove magic numbers
|
||||
.on( 'mouseover', function( d, i ){
|
||||
var datapoint = d3.select( this );
|
||||
datapoint
|
||||
.style( 'fill', 'red' )
|
||||
.style( 'fill-opacity', 1 );
|
||||
|
||||
// create horiz, vert lines to axis
|
||||
plot.content.append( 'line' )
|
||||
.attr( 'stroke', 'red' )
|
||||
.attr( 'stroke-width', 1 )
|
||||
// start not at center, but at the edge of the circle - to prevent mouseover thrashing
|
||||
.attr( 'x1', datapoint.attr( 'cx' ) - plot.config.datapointSize )
|
||||
.attr( 'y1', datapoint.attr( 'cy' ) )
|
||||
.attr( 'x2', 0 )
|
||||
.attr( 'y2', datapoint.attr( 'cy' ) )
|
||||
.classed( 'hoverline', true );
|
||||
|
||||
// if the vertical hoverline
|
||||
if( datapoint.attr( 'cy' ) < plot.config.height ){
|
||||
plot.content.append( 'line' )
|
||||
.attr( 'stroke', 'red' )
|
||||
.attr( 'stroke-width', 1 )
|
||||
.attr( 'x1', datapoint.attr( 'cx' ) )
|
||||
.attr( 'y1', datapoint.attr( 'cy' ) + plot.config.datapointSize )
|
||||
.attr( 'x2', datapoint.attr( 'cx' ) )
|
||||
.attr( 'y2', plot.config.height )
|
||||
.classed( 'hoverline', true );
|
||||
}
|
||||
|
||||
var datapointWindowPos = $( this ).offset();
|
||||
plot.datapointInfoBox = plot.infoBox(
|
||||
datapointWindowPos.top, datapointWindowPos.left,
|
||||
plot.infoHtml( xCol[ i ], yCol[ i ], ( ids )?( ids[ i ] ):( undefined ) )
|
||||
);
|
||||
$( 'body' ).append( plot.datapointInfoBox );
|
||||
})
|
||||
.on( 'mouseout', function(){
|
||||
d3.select( this )
|
||||
.style( 'fill', 'black' )
|
||||
.style( 'fill-opacity', 0.2 );
|
||||
plot.content.selectAll( '.hoverline' ).remove();
|
||||
if( plot.datapointInfoBox ){
|
||||
plot.datapointInfoBox.remove();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
this.render = function( columnData, meta ){
|
||||
this.log( this + '.render', arguments );
|
||||
this.log( '\t config:', this.config );
|
||||
|
||||
// prepare the data
|
||||
//pre: columns passed are numeric
|
||||
//pre: at least two columns are passed
|
||||
//assume: first column is x, second column is y, any remaining aren't used
|
||||
var xCol = columnData[0],
|
||||
yCol = columnData[1],
|
||||
ids = ( columnData.length > 2 )?( columnData[2] ):( undefined );
|
||||
//this.log( this + '.render', xCol.length, yCol.length, this.config );
|
||||
|
||||
//pre: xCol.len == yCol.len
|
||||
xCol = this.preprocessData( xCol );
|
||||
yCol = this.preprocessData( yCol );
|
||||
this.log( 'xCol len', xCol.length, 'yCol len', yCol.length );
|
||||
|
||||
this.findMinMaxes( xCol, yCol, meta );
|
||||
//this.log( 'xMin, xMax, yMin, yMax:', this.xMin, this.xMax, this.yMin, this.yMax );
|
||||
this.setUpScales();
|
||||
|
||||
// find (or build if it doesn't exist) the svg dom infrastructure
|
||||
if( !this.svg ){ this.svg = d3.select( 'svg' ).attr( "class", "chart" ); }
|
||||
if( !this.content ){
|
||||
this.content = this.svg.append( "svg:g" ).attr( "class", "content" ).attr( 'id', this.config.id );
|
||||
}
|
||||
//this.log( 'svg:', this.svg );
|
||||
//this.log( 'content:', this.content );
|
||||
|
||||
this.adjustChartDimensions();
|
||||
|
||||
if( !this.xAxis ){ this.xAxis = this.content.append( 'g' ).attr( 'class', 'axis' ).attr( 'id', 'x-axis' ); }
|
||||
if( !this.xAxisLabel ){
|
||||
this.xAxisLabel = this.xAxis.append( 'text' ).attr( 'class', 'axis-label' ).attr( 'id', 'x-axis-label' );
|
||||
}
|
||||
//this.log( 'xAxis:', this.xAxis, 'xAxisLabel:', this.xAxisLabel );
|
||||
|
||||
if( !this.yAxis ){ this.yAxis = this.content.append( 'g' ).attr( 'class', 'axis' ).attr( 'id', 'y-axis' ); }
|
||||
if( !this.yAxisLabel ){
|
||||
this.yAxisLabel = this.yAxis.append( 'text' ).attr( 'class', 'axis-label' ).attr( 'id', 'y-axis-label' );
|
||||
}
|
||||
//this.log( 'yAxis:', this.yAxis, 'yAxisLabel:', this.yAxisLabel );
|
||||
|
||||
this.setUpXAxis();
|
||||
this.setUpYAxis();
|
||||
|
||||
this.renderGrid();
|
||||
this.renderDatapoints( xCol, yCol, ids );
|
||||
};
|
||||
|
||||
this.infoHtml = function( x, y, id ){
|
||||
var retDiv = $( '<div/>' );
|
||||
if( id ){
|
||||
$( '<div/>' ).text( id ).css( 'font-weight', 'bold' ).appendTo( retDiv );
|
||||
}
|
||||
$( '<div/>' ).text( x ).appendTo( retDiv );
|
||||
$( '<div/>' ).text( y ).appendTo( retDiv );
|
||||
return retDiv.html();
|
||||
};
|
||||
|
||||
//TODO: html for now
|
||||
this.infoBox = function( top, left, html, adjTop, adjLeft ){
|
||||
adjTop = adjTop || 0;
|
||||
adjLeft = adjLeft || 20;
|
||||
var infoBox = $( '<div />' )
|
||||
.addClass( 'chart-info-box' )
|
||||
.css({
|
||||
'position' : 'absolute',
|
||||
'top' : top + adjTop,
|
||||
'left' : left + adjLeft
|
||||
});
|
||||
infoBox.html( html );
|
||||
return infoBox;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
//==============================================================================
|
||||
@@ -0,0 +1,631 @@
|
||||
/* =============================================================================
|
||||
todo:
|
||||
I'd like to move the svg creation out of the splot constr. to:
|
||||
allow adding splots to an existing canvas
|
||||
allow mult. splots sharing a canvas
|
||||
|
||||
|
||||
outside this:
|
||||
BUG: setting width, height in plot controls doesn't re-interpolate data locations!!
|
||||
BUG?: get metadata_column_names (from datatype if necessary)
|
||||
BUG: single vis in popupmenu should have tooltip with that name NOT 'Visualizations'
|
||||
|
||||
wire label setters, anim setter
|
||||
|
||||
TwoVarScatterplot:
|
||||
??: maybe better to do this with a canvas...
|
||||
save as visualization
|
||||
to seperate file?
|
||||
remove underscore dependencies
|
||||
add interface to change values (seperate)?
|
||||
download svg -> base64 encode
|
||||
incorporate glyphs, glyph state renderers
|
||||
|
||||
ScatterplotSettingsForm:
|
||||
some css bug that lowers the width of settings form when plot-controls tab is open
|
||||
causes chart to shift
|
||||
what can be abstracted/reused for other graphs?
|
||||
avoid direct manipulation of this.plot
|
||||
allow option to put plot into seperate tab of interface (for small multiples)
|
||||
|
||||
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
|
||||
use d3.TSV?
|
||||
render warning on long data (> maxDataPoints)
|
||||
adjust endpoint
|
||||
|
||||
selectable list of preset column comparisons (rnaseq etc.)
|
||||
how to know what sort of Tabular the data is?
|
||||
smarter about headers
|
||||
validate columns selection (here or server)
|
||||
|
||||
set stats column names by selected columns
|
||||
move chart into tabbed area...
|
||||
|
||||
Scatterplot.mako:
|
||||
multiple plots on one page (small multiples)
|
||||
?? ensure svg styles thru d3 or css?
|
||||
d3: configable (easily)
|
||||
css: standard - better maintenance
|
||||
? override at config
|
||||
|
||||
============================================================================= */
|
||||
/**
|
||||
* Scatterplot control UI as a backbone view
|
||||
* handles:
|
||||
* getting the desired data
|
||||
* configuring the plot display
|
||||
* showing (general) statistics
|
||||
*
|
||||
* initialize attributes REQUIRES a dataset and an apiDatasetsURL
|
||||
*/
|
||||
var ScatterplotControlForm = BaseView.extend( LoggableMixin ).extend({
|
||||
//logger : console,
|
||||
className : 'scatterplot-control-form',
|
||||
|
||||
//NOTE: should include time needed to render
|
||||
dataLoadDelay : 4000,
|
||||
dataLoadSize : 5000,
|
||||
|
||||
loadingIndicatorImage : 'loading_small_white_bg.gif',
|
||||
fetchMsg : 'Fetching data...',
|
||||
renderMsg : 'Rendering...',
|
||||
|
||||
initialize : function( attributes ){
|
||||
this.log( this + '.initialize, attributes:', attributes );
|
||||
|
||||
this.dataset = null;
|
||||
this.chartConfig = null;
|
||||
this.chart = null;
|
||||
this.loader = null;
|
||||
|
||||
// set up refs to the four tab areas
|
||||
this.$dataControl = null;
|
||||
this.$chartControl = null;
|
||||
this.$statsDisplay = null;
|
||||
this.$chartDisplay = null;
|
||||
|
||||
this.dataFetch = null;
|
||||
|
||||
this.initializeFromAttributes( attributes );
|
||||
this.initializeChart( attributes );
|
||||
this.initializeDataLoader( attributes );
|
||||
},
|
||||
|
||||
initializeFromAttributes : function( attributes ){
|
||||
// required settings: ensure certain vars we need are passed in attributes
|
||||
if( !attributes || !attributes.dataset ){
|
||||
throw( "ScatterplotView requires a dataset" );
|
||||
} else {
|
||||
this.dataset = attributes.dataset;
|
||||
}
|
||||
if( jQuery.type( this.dataset.metadata_column_types ) === 'string' ){
|
||||
this.dataset.metadata_column_types = this.dataset.metadata_column_types.split( ', ' );
|
||||
}
|
||||
this.log( '\t dataset:', this.dataset );
|
||||
|
||||
// attempt to get possible headers from the data's first line
|
||||
if( this.dataset.comment_lines && this.dataset.comment_lines.length ){
|
||||
//TODO:??
|
||||
var firstLine = this.dataset.comment_lines[0],
|
||||
possibleHeaders = firstLine.split( '\t' );
|
||||
if( possibleHeaders.length === this.dataset.metadata_column_types.length ){
|
||||
this.possibleHeaders = possibleHeaders;
|
||||
}
|
||||
}
|
||||
|
||||
// passed from mako helper
|
||||
//TODO: integrate to galaxyPaths
|
||||
//TODO: ?? seems like data loader section would be better
|
||||
if( !attributes.apiDatasetsURL ){
|
||||
throw( "ScatterplotView requires a apiDatasetsURL" );
|
||||
} else {
|
||||
this.dataURL = attributes.apiDatasetsURL + '/' + this.dataset.id + '?';
|
||||
}
|
||||
this.log( '\t dataURL:', this.dataURL );
|
||||
},
|
||||
|
||||
initializeChart : function( attributes ){
|
||||
// set up the basic chart infrastructure and config (if any)
|
||||
this.chartConfig = attributes.chartConfig || {};
|
||||
//if( this.logger ){ this.chartConfig.debugging = true; }
|
||||
this.log( '\t initial chartConfig:', this.chartConfig );
|
||||
|
||||
this.chart = new TwoVarScatterplot( this.chartConfig );
|
||||
//TODO: remove 2nd ref, use this.chart.config
|
||||
this.chartConfig = this.chart.config;
|
||||
},
|
||||
|
||||
initializeDataLoader : function( attributes ){
|
||||
// set up data loader
|
||||
var view = this;
|
||||
this.loader = new LazyDataLoader({
|
||||
//logger : ( this.logger )?( this.logger ):( null ),
|
||||
// we'll generate this when columns are chosen
|
||||
url : null,
|
||||
start : attributes.start || 0,
|
||||
//NOTE: metadata_data_lines can be null (so we won't know the total)
|
||||
total : attributes.total || this.dataset.metadata_data_lines,
|
||||
delay : this.dataLoadDelay,
|
||||
size : this.dataLoadSize,
|
||||
|
||||
buildUrl : function( start, size ){
|
||||
// currently VERY SPECIFIC to using data_providers.py start_val, max_vals params
|
||||
return this.url + '&' + jQuery.param({
|
||||
start_val: start,
|
||||
max_vals: size
|
||||
});
|
||||
}
|
||||
});
|
||||
$( this.loader ).bind( 'error', function( event, status, error ){
|
||||
view.log( 'ERROR:', status, error );
|
||||
alert( 'ERROR fetching data:\n' + status + '\n' + error );
|
||||
view.hideLoadingIndicator();
|
||||
});
|
||||
},
|
||||
|
||||
// ------------------------------------------------------------------------- CONTROLS RENDERING
|
||||
render : function(){
|
||||
this.log( this + '.render' );
|
||||
|
||||
// render the tab controls, areas and loading indicator
|
||||
this.$el.append( ScatterplotControlForm.templates.mainLayout({
|
||||
loadingIndicatorImagePath : '/static/images/' + this.loadingIndicatorImage,
|
||||
message : ''
|
||||
}));
|
||||
|
||||
// render the tab content
|
||||
this.$dataControl = this._render_dataControl();
|
||||
this.$chartControl = this._render_chartControl();
|
||||
this.$statsDisplay = this.$el.find( '.tab-pane#stats-display' );
|
||||
this.$chartDisplay = this._render_chartDisplay();
|
||||
|
||||
// auto render if given both x, y column choices in query for page
|
||||
//TODO:?? add autoRender=1 to query maybe?
|
||||
if( this.chartConfig.xColumn && this.chartConfig.yColumn ){
|
||||
this.renderChart();
|
||||
}
|
||||
|
||||
// set up behaviours
|
||||
this.$el.find( '.tooltip' ).tooltip();
|
||||
|
||||
// uncomment any of the following to have that tab show on initial load (for testing)
|
||||
//this.$el.find( 'ul.nav' ).find( 'a[href="#data-control"]' ).tab( 'show' );
|
||||
//this.$el.find( 'ul.nav' ).find( 'a[href="#chart-control"]' ).tab( 'show' );
|
||||
//this.$el.find( 'ul.nav' ).find( 'a[href="#stats-display"]' ).tab( 'show' );
|
||||
//this.$el.find( 'ul.nav' ).find( 'a[href="#chart-display"]' ).tab( 'show' );
|
||||
return this;
|
||||
},
|
||||
|
||||
_render_dataControl : function(){
|
||||
// controls for which columns are used to plot datapoints (and ids/additional info to attach if desired)
|
||||
var view = this,
|
||||
allColumns = [],
|
||||
numericColumns = [],
|
||||
usePossibleHeaders = ( this.possibleHeaders && this.$dataControl )?
|
||||
( this.$dataControl.find( '#first-line-header-checkbox' ).is( ':checked' ) ):( false );
|
||||
|
||||
// gather column indeces (from metadata_column_types) and names (from metadata_columnnames)
|
||||
_.each( this.dataset.metadata_column_types, function( type, index ){
|
||||
// use a 1 based index in names/values within the form (will be dec. when parsed out)
|
||||
var oneBasedIndex = index + 1,
|
||||
// default name is 'column <index>'...
|
||||
name = 'column ' + oneBasedIndex;
|
||||
|
||||
// ...but label with the name if available...
|
||||
if( view.dataset.metadata_column_names ){
|
||||
name = view.dataset.metadata_column_names[ index ];
|
||||
|
||||
// ...or, use the first line as headers if the user wants
|
||||
} else if( usePossibleHeaders ){
|
||||
name = view.possibleHeaders[ index ];
|
||||
}
|
||||
|
||||
// cache all columns here
|
||||
allColumns.push({ index: oneBasedIndex, name: name });
|
||||
|
||||
// filter numeric columns to their own list
|
||||
if( type === 'int' || type === 'float' ){
|
||||
numericColumns.push({ index: oneBasedIndex, name: name });
|
||||
}
|
||||
});
|
||||
//TODO: other vals: max_vals, start_val, pagination (chart-settings)
|
||||
|
||||
// render the html
|
||||
var $dataControl = this.$el.find( '.tab-pane#data-control' );
|
||||
$dataControl.html( ScatterplotControlForm.templates.dataControl({
|
||||
allColumns : allColumns,
|
||||
numericColumns : numericColumns,
|
||||
possibleHeaders : ( this.possibleHeaders )?( this.possibleHeaders.join( ', ' ) ):( '' ),
|
||||
usePossibleHeaders : usePossibleHeaders
|
||||
}));
|
||||
|
||||
if( !this.dataset.metadata_column_names && this.possibleHeaders ){
|
||||
$dataControl.find( '#first-line-header' ).show();
|
||||
}
|
||||
|
||||
// preset to column selectors if they were passed in the config in the query string
|
||||
$dataControl.find( '#X-select' ).val( this.chartConfig.xColumn );
|
||||
$dataControl.find( '#Y-select' ).val( this.chartConfig.yColumn );
|
||||
if( this.chartConfig.idColumn !== undefined ){
|
||||
$dataControl.find( '#include-id-checkbox' )
|
||||
.attr( 'checked', true ).trigger( 'change' );
|
||||
$dataControl.find( '#ID-select' ).val( this.chartConfig.idColumn );
|
||||
}
|
||||
|
||||
return $dataControl;
|
||||
},
|
||||
|
||||
_render_chartControl : function(){
|
||||
// tab content to control how the chart is rendered (data glyph size, chart size, etc.)
|
||||
var view = this,
|
||||
$chartControl = this.$el.find( '.tab-pane#chart-control' ),
|
||||
// limits for controls (by control/chartConfig id)
|
||||
//TODO: move into TwoVarScatterplot
|
||||
controlRanges = {
|
||||
'datapointSize' : { min: 2, max: 10, step: 1 },
|
||||
'width' : { min: 200, max: 800, step: 20 },
|
||||
'height' : { min: 200, max: 800, step: 20 }
|
||||
};
|
||||
|
||||
// render the html
|
||||
$chartControl.append( ScatterplotControlForm.templates.chartControl( this.chartConfig ) );
|
||||
|
||||
// set up behaviours, js on sliders
|
||||
$chartControl.find( '.numeric-slider-input' ).each( function(){
|
||||
var $this = $( this ),
|
||||
$output = $this.find( '.slider-output' ),
|
||||
$slider = $this.find( '.slider' ),
|
||||
id = $this.attr( 'id' );
|
||||
//chartControl.log( 'slider set up', 'this:', $this, 'slider:', $slider, 'id', id );
|
||||
|
||||
// what to do when the slider changes: update display and update chartConfig
|
||||
//TODO: move out of loop
|
||||
function onSliderChange(){
|
||||
var $this = $( this ),
|
||||
newValue = $this.slider( 'value' );
|
||||
//chartControl.log( 'slider change', 'this:', $this, 'output:', $output, 'value', newValue );
|
||||
$output.text( newValue );
|
||||
//chartControl.chartConfig[ id ] = newValue;
|
||||
}
|
||||
|
||||
$slider.slider( _.extend( controlRanges[ id ], {
|
||||
value : view.chartConfig[ id ],
|
||||
change : onSliderChange,
|
||||
slide : onSliderChange
|
||||
}));
|
||||
});
|
||||
|
||||
return $chartControl;
|
||||
},
|
||||
|
||||
_render_chartDisplay : function(){
|
||||
// render the tab content where the chart is displayed (but not the chart itself)
|
||||
var $chartDisplay = this.$el.find( '.tab-pane#chart-display' );
|
||||
$chartDisplay.append( ScatterplotControlForm.templates.chartDisplay( this.chartConfig ) );
|
||||
return $chartDisplay;
|
||||
},
|
||||
|
||||
// ------------------------------------------------------------------------- EVENTS
|
||||
events : {
|
||||
'change #include-id-checkbox' : 'toggleThirdColumnSelector',
|
||||
'change #first-line-header-checkbox' : 'rerenderDataControl',
|
||||
'click #data-control #render-button' : 'renderChart',
|
||||
'click #chart-control #render-button' : 'changeChartSettings'
|
||||
},
|
||||
|
||||
toggleThirdColumnSelector : function(){
|
||||
// show/hide the id selector on the data settings panel
|
||||
this.$el.find( 'select[name="ID"]' ).parent().toggle();
|
||||
},
|
||||
|
||||
rerenderDataControl : function(){
|
||||
this.$dataControl = this._render_dataControl();
|
||||
},
|
||||
|
||||
showLoadingIndicator : function( message, callback ){
|
||||
// display the loading indicator over the tab panels if hidden, update message (if passed)
|
||||
message = message || '';
|
||||
var indicator = this.$el.find( 'div#loading-indicator' );
|
||||
messageBox = indicator.find( '.loading-message' );
|
||||
|
||||
if( indicator.is( ':visible' ) ){
|
||||
if( message ){
|
||||
messageBox.fadeOut( 'fast', function(){
|
||||
messageBox.text( message );
|
||||
messageBox.fadeIn( 'fast', callback );
|
||||
});
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
|
||||
} else {
|
||||
if( message ){ messageBox.text( message ); }
|
||||
indicator.fadeIn( 'fast', callback );
|
||||
}
|
||||
},
|
||||
|
||||
hideLoadingIndicator : function( callback ){
|
||||
this.$el.find( 'div#loading-indicator' ).fadeOut( 'fast', callback );
|
||||
},
|
||||
|
||||
// ------------------------------------------------------------------------- CHART/STATS RENDERING
|
||||
renderChart : function(){
|
||||
// fetch the data, (re-)render the chart
|
||||
this.log( this + '.renderChart' );
|
||||
|
||||
//TODO: separate data fetch
|
||||
|
||||
// this is a complete re-render, so clear the prev. data
|
||||
this.data = null;
|
||||
this.meta = null;
|
||||
|
||||
// update the chartConfig (here and chart) using chart settings
|
||||
//TODO: separate and improve (used in changeChartSettings too)
|
||||
_.extend( this.chartConfig, this.getChartSettings() );
|
||||
this.log( '\t chartConfig:', this.chartConfig );
|
||||
this.chart.updateConfig( this.chartConfig, false );
|
||||
|
||||
// build the url with the current data settings
|
||||
this.loader.url = this.dataURL + '&' + jQuery.param( this.getDataSettings() );
|
||||
this.log( '\t loader: total lines:', this.loader.total, ' url:', this.loader.url );
|
||||
|
||||
// bind the new data event to: aggregate data, update the chart and stats with new data
|
||||
var view = this;
|
||||
$( this.loader ).bind( 'loaded.new', function( event, response ){
|
||||
view.log( view + ' loaded.new', response );
|
||||
|
||||
// aggregate data and meta
|
||||
view.postProcessDataFetchResponse( response );
|
||||
view.log( '\t postprocessed data:', view.data );
|
||||
view.log( '\t postprocessed meta:', view.meta );
|
||||
|
||||
// update the chart and stats
|
||||
view.showLoadingIndicator( view.renderMsg, function(){
|
||||
view.chart.render( view.data, view.meta );
|
||||
view.renderStats( view.data, view.meta );
|
||||
view.hideLoadingIndicator();
|
||||
});
|
||||
});
|
||||
// when all data loaded - unbind (or we'll start doubling event handlers)
|
||||
$( this.loader ).bind( 'complete', function( event, data ){
|
||||
view.log( view + ' complete', data );
|
||||
$( view.loader ).unbind();
|
||||
});
|
||||
|
||||
// begin loading the data, switch to the chart display tab
|
||||
view.showLoadingIndicator( view.fetchMsg, function(){
|
||||
view.$el.find( 'ul.nav' ).find( 'a[href="#chart-display"]' ).tab( 'show' );
|
||||
view.loader.load();
|
||||
});
|
||||
},
|
||||
|
||||
renderStats : function(){
|
||||
this.log( this + '.renderStats' );
|
||||
// render the stats table in the stats panel
|
||||
//TODO: there's a better way
|
||||
this.$statsDisplay.html( ScatterplotControlForm.templates.statsDisplay({
|
||||
stats: [
|
||||
{ name: 'Count', xval: this.meta[0].count, yval: this.meta[1].count },
|
||||
{ name: 'Min', xval: this.meta[0].min, yval: this.meta[1].min },
|
||||
{ name: 'Max', xval: this.meta[0].max, yval: this.meta[1].max },
|
||||
{ name: 'Sum', xval: this.meta[0].sum, yval: this.meta[1].sum },
|
||||
{ name: 'Mean', xval: this.meta[0].mean, yval: this.meta[1].mean },
|
||||
{ name: 'Median', xval: this.meta[0].median, yval: this.meta[1].median }
|
||||
]
|
||||
}));
|
||||
},
|
||||
|
||||
changeChartSettings : function(){
|
||||
// re-render the chart with new chart settings and OLD data
|
||||
var view = this;
|
||||
newChartSettings = this.getChartSettings();
|
||||
|
||||
// update the chart config from the chartSettings panel controls
|
||||
_.extend( this.chartConfig, newChartSettings );
|
||||
this.log( 'this.chartConfig:', this.chartConfig );
|
||||
this.chart.updateConfig( this.chartConfig, false );
|
||||
|
||||
// if there's current data, call chart.render with it (no data fetch)
|
||||
if( view.data && view.meta ){
|
||||
view.showLoadingIndicator( view.renderMsg, function(){
|
||||
view.$el.find( 'ul.nav' ).find( 'a[href="#chart-display"]' ).tab( 'show' );
|
||||
view.chart.render( view.data, view.meta );
|
||||
view.hideLoadingIndicator();
|
||||
});
|
||||
|
||||
// no current data, call renderChart instead (which will fetch data)
|
||||
} else {
|
||||
this.renderChart();
|
||||
}
|
||||
},
|
||||
|
||||
// ------------------------------------------------------------------------- DATA AGGREGATION
|
||||
postProcessDataFetchResponse : function( response ){
|
||||
// the loader only returns new data - it's up to this to munge the fetches together properly
|
||||
//TODO: we're now storing data in two places: loader and here
|
||||
// can't we reduce incoming data into loader.data[0]? are there concurrency problems?
|
||||
this.postProcessData( response.data );
|
||||
this.postProcessMeta( response.meta );
|
||||
},
|
||||
|
||||
postProcessData : function( newData ){
|
||||
// stack the column data on top of each other into this.data
|
||||
//this.log( this + '.postProcessData:', newData );
|
||||
var view = this;
|
||||
|
||||
// if we already have data: aggregate
|
||||
if( view.data ){
|
||||
_.each( newData, function( newColData, colIndex ){
|
||||
//view.log( colIndex + ' data:', newColData );
|
||||
//TODO??: time, space efficiency of this?
|
||||
view.data[ colIndex ] = view.data[ colIndex ].concat( newColData );
|
||||
});
|
||||
|
||||
// otherwise: assign (first load)
|
||||
} else {
|
||||
view.data = newData;
|
||||
}
|
||||
},
|
||||
|
||||
postProcessMeta : function( newMeta ){
|
||||
// munge the meta data (stats) from the server fetches together
|
||||
//pre: this.data must be preprocessed (needed for medians)
|
||||
//this.log( this + '.postProcessMeta:', newMeta );
|
||||
var view = this,
|
||||
colTypes = this.dataset.metadata_column_types;
|
||||
|
||||
// if we already have meta: aggregate
|
||||
if( view.meta ){
|
||||
_.each( newMeta, function( newColMeta, colIndex ){
|
||||
var colMeta = view.meta[ colIndex ],
|
||||
colType = colTypes[ colIndex ];
|
||||
//view.log( '\t ' + colIndex + ' postprocessing meta:', newColMeta );
|
||||
//view.log( colIndex + ' old meta:',
|
||||
// 'min:', colMeta.min,
|
||||
// 'max:', colMeta.max,
|
||||
// 'sum:', colMeta.sum,
|
||||
// 'mean:', colMeta.mean,
|
||||
// 'median:', colMeta.median
|
||||
//);
|
||||
|
||||
//!TODO: at what point are we getting int/float overflow on these?!
|
||||
//??: need to be null safe?
|
||||
colMeta.count += ( newColMeta.count )?( newColMeta.count ):( 0 );
|
||||
//view.log( colIndex, 'count:', colMeta.count );
|
||||
|
||||
if( ( colType === 'int' ) || ( colType === 'float' ) ){
|
||||
//view.log( colIndex + ' incoming meta:',
|
||||
// 'min:', newColMeta.min,
|
||||
// 'max:', newColMeta.max,
|
||||
// 'sum:', newColMeta.sum,
|
||||
// 'mean:', newColMeta.mean,
|
||||
// 'median:', newColMeta.median
|
||||
//);
|
||||
|
||||
colMeta.min = Math.min( newColMeta.min, colMeta.min );
|
||||
colMeta.max = Math.max( newColMeta.max, colMeta.max );
|
||||
colMeta.sum = newColMeta.sum + colMeta.sum;
|
||||
colMeta.mean = ( colMeta.count )?( colMeta.sum / colMeta.count ):( null );
|
||||
|
||||
// median's a pain bc of sorting (requires the data as well)
|
||||
var sortedCol = view.data[ colIndex ].slice().sort(),
|
||||
middleIndex = Math.floor( sortedCol.length / 2 );
|
||||
|
||||
if( sortedCol.length % 2 === 0 ){
|
||||
colMeta.median = ( ( sortedCol[ middleIndex ] + sortedCol[( middleIndex + 1 )] ) / 2 );
|
||||
|
||||
} else {
|
||||
colMeta.median = sortedCol[ middleIndex ];
|
||||
}
|
||||
|
||||
//view.log( colIndex + ' new meta:',
|
||||
// 'min:', colMeta.min,
|
||||
// 'max:', colMeta.max,
|
||||
// 'sum:', colMeta.sum,
|
||||
// 'mean:', colMeta.mean,
|
||||
// 'median:', colMeta.median
|
||||
//);
|
||||
}
|
||||
});
|
||||
|
||||
// otherwise: assign (first load)
|
||||
} else {
|
||||
view.meta = newMeta;
|
||||
//view.log( '\t meta (first load):', view.meta );
|
||||
}
|
||||
},
|
||||
|
||||
// ------------------------------------------------------------------------- GET DATA/CHART SETTINGS
|
||||
getDataSettings : function(){
|
||||
// parse the column values for both indeces (for the data fetch) and names (for the chart)
|
||||
var columnSelections = this.getColumnSelections(),
|
||||
columns = [];
|
||||
this.log( '\t columnSelections:', columnSelections );
|
||||
|
||||
//TODO: validate columns - minimally: we can assume either set by selectors or via a good query string
|
||||
|
||||
// get column indices for params, include the desired ID column (if any)
|
||||
//NOTE: these are presented in human-readable 1 base index (to match the data.peek) - adjust
|
||||
columns = [
|
||||
columnSelections.X.colIndex - 1,
|
||||
columnSelections.Y.colIndex - 1
|
||||
];
|
||||
if( this.$dataControl.find( '#include-id-checkbox' ).attr( 'checked' ) ){
|
||||
columns.push( columnSelections.ID.colIndex - 1 );
|
||||
}
|
||||
//TODO: other vals: max, start, page
|
||||
|
||||
var params = {
|
||||
data_type : 'raw_data',
|
||||
provider : 'column_with_stats',
|
||||
columns : '[' + columns + ']'
|
||||
};
|
||||
this.log( '\t data settings (url params):', params );
|
||||
return params;
|
||||
},
|
||||
|
||||
getColumnSelections : function(){
|
||||
// gets the current user-selected values for which columns to fetch from the data settings panel
|
||||
// returns a map: { column-select name (eg. X) : { colIndex : column-selector val,
|
||||
// colName : selected option text }, ... }
|
||||
var selections = {};
|
||||
this.$dataControl.find( 'div.column-select select' ).each( function(){
|
||||
var $this = $( this ),
|
||||
val = $this.val();
|
||||
selections[ $this.attr( 'name' ) ] = {
|
||||
colIndex : val,
|
||||
colName : $this.children( '[value="' + val + '"]' ).text()
|
||||
};
|
||||
});
|
||||
return selections;
|
||||
},
|
||||
|
||||
getChartSettings : function(){
|
||||
// gets the user-selected chartConfig from the chart settings panel
|
||||
var settings = {},
|
||||
colSelections = this.getColumnSelections();
|
||||
//this.log( 'colSelections:', colSelections );
|
||||
|
||||
//TODO: simplify with keys and loop
|
||||
settings.datapointSize = this.$chartControl.find( '#datapointSize.numeric-slider-input' )
|
||||
.find( '.slider' ).slider( 'value' );
|
||||
settings.width = this.$chartControl.find( '#width.numeric-slider-input' )
|
||||
.find( '.slider' ).slider( 'value' );
|
||||
settings.height = this.$chartControl.find( '#height.numeric-slider-input' )
|
||||
.find( '.slider' ).slider( 'value' );
|
||||
|
||||
// update axes labels using chartSettings inputs (if not at defaults), otherwise the selects' colName
|
||||
//TODO: a little confusing
|
||||
var chartSettingsXLabel = this.$chartControl.find( 'input#X-axis-label' ).val(),
|
||||
chartSettingsYLabel = this.$chartControl.find( 'input#Y-axis-label' ).val();
|
||||
settings.xLabel = ( chartSettingsXLabel === 'X' )?
|
||||
( colSelections.X.colName ):( chartSettingsXLabel );
|
||||
settings.yLabel = ( chartSettingsYLabel === 'Y' )?
|
||||
( colSelections.Y.colName ):( chartSettingsYLabel );
|
||||
|
||||
settings.animDuration = ( this.$chartControl.find( '#animate-chart' ).is( ':checked' ) )?
|
||||
( this.chart.defaults.animDuration ):( 0 );
|
||||
|
||||
this.log( '\t chartSettings:', settings );
|
||||
return settings;
|
||||
},
|
||||
|
||||
toString : function(){
|
||||
return 'ScatterplotControlForm(' + (( this.dataset )?( this.dataset.id ):( '' )) + ')';
|
||||
}
|
||||
});
|
||||
|
||||
ScatterplotControlForm.templates = {
|
||||
mainLayout : Templates.scatterplotControlForm,
|
||||
dataControl : Templates.dataControl,
|
||||
chartControl : Templates.chartControl,
|
||||
statsDisplay : Templates.statsDisplay,
|
||||
chartDisplay : Templates.chartDisplay
|
||||
};
|
||||
|
||||
//==============================================================================
|
||||
@@ -0,0 +1,182 @@
|
||||
<script type="text/template" class="template-visualization" id="template-visualization-scatterplotControlForm">
|
||||
{{! main layout }}
|
||||
|
||||
<div class="scatterplot-container chart-container tabbable tabs-left">
|
||||
{{! tab buttons/headers using Bootstrap }}
|
||||
<ul class="nav nav-tabs">
|
||||
{{! start with the data controls as the displayed tab }}
|
||||
<li class="active"><a href="#data-control" data-toggle="tab" class="tooltip"
|
||||
title="Use this tab to change which data are used">Data Controls</a></li>
|
||||
<li><a href="#chart-control" data-toggle="tab" class="tooltip"
|
||||
title="Use this tab to change how the chart is drawn">Chart Controls</a></li>
|
||||
<li><a href="#stats-display" data-toggle="tab" class="tooltip"
|
||||
title="This tab will display overall statistics for your data">Statistics</a></li>
|
||||
<li><a href="#chart-display" data-toggle="tab" class="tooltip"
|
||||
title="This tab will display the chart">Chart</a>
|
||||
{{! loading indicator - initially hidden }}
|
||||
<div id="loading-indicator" style="display: none;">
|
||||
<img class="loading-img" src="{{loadingIndicatorImagePath}}" />
|
||||
<span class="loading-message">{{message}}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{{! data form, chart config form, stats, and chart all get their own tab }}
|
||||
<div class="tab-content">
|
||||
{{! ---------------------------- tab for data settings form }}
|
||||
<div id="data-control" class="tab-pane active">
|
||||
{{! rendered separately }}
|
||||
</div>
|
||||
|
||||
{{! ---------------------------- tab for chart graphics control form }}
|
||||
<div id="chart-control" class="tab-pane">
|
||||
{{! rendered separately }}
|
||||
</div>
|
||||
|
||||
{{! ---------------------------- tab for data statistics }}
|
||||
<div id="stats-display" class="tab-pane">
|
||||
{{! rendered separately }}
|
||||
</div>
|
||||
|
||||
{{! ---------------------------- tab for actual chart }}
|
||||
<div id="chart-display" class="tab-pane">
|
||||
{{! chart rendered separately }}
|
||||
</div>
|
||||
|
||||
</div>{{! end .tab-content }}
|
||||
</div>{{! end .chart-control }}
|
||||
</script>
|
||||
|
||||
<script type="text/template" class="template-visualization" id="template-visualization-dataControl">
|
||||
|
||||
<p class="help-text">
|
||||
Use the following controls to change the data used by the chart.
|
||||
Use the 'Draw' button to render (or re-render) the chart with the current settings.
|
||||
</p>
|
||||
|
||||
{{! column selector containers }}
|
||||
<div class="column-select">
|
||||
<label for="X-select">Data column for X: </label>
|
||||
<select name="X" id="X-select">
|
||||
{{#each numericColumns}}
|
||||
<option value="{{index}}">{{name}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
<div class="column-select">
|
||||
<label for="Y-select">Data column for Y: </label>
|
||||
<select name="Y" id="Y-select">
|
||||
{{#each numericColumns}}
|
||||
<option value="{{index}}">{{name}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{! optional id column }}
|
||||
<div id="include-id">
|
||||
<label for="include-id-checkbox">Include a third column as data point IDs?</label>
|
||||
<input type="checkbox" name="include-id" id="include-id-checkbox" />
|
||||
<p class="help-text-small">
|
||||
These will be displayed (along with the x and y values) when you hover over
|
||||
a data point.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column-select" style="display: none">
|
||||
<label for="ID-select">Data column for IDs: </label>
|
||||
<select name="ID" id="ID-select">
|
||||
{{#each allColumns}}
|
||||
<option value="{{index}}">{{name}}</option>
|
||||
{{/each}}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{! if we're using generic column selection names ('column 1') - allow the user to use the first line }}
|
||||
<div id="first-line-header" style="display: none;">
|
||||
<p>Possible headers: {{ possibleHeaders }}
|
||||
</p>
|
||||
<label for="first-line-header-checkbox">Use the above as column headers?</label>
|
||||
<input type="checkbox" name="include-id" id="first-line-header-checkbox"
|
||||
{{#if usePossibleHeaders }}checked="true"{{/if}}/>
|
||||
<p class="help-text-small">
|
||||
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?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<input id="render-button" type="button" value="Draw" />
|
||||
<div class="clear"></div>
|
||||
</script>
|
||||
|
||||
<script type="text/template" class="template-visualization" id="template-visualization-chartControl">
|
||||
<p class="help-text">
|
||||
Use the following controls to how the chart is displayed.
|
||||
The slide controls can be moved by the mouse or, if the 'handle' is in focus, your keyboard's arrow keys.
|
||||
Move the focus between controls by using the tab or shift+tab keys on your keyboard.
|
||||
Use the 'Draw' button to render (or re-render) the chart with the current settings.
|
||||
</p>
|
||||
|
||||
<div id="datapointSize" class="form-input numeric-slider-input">
|
||||
<label for="datapointSize">Size of data point: </label>
|
||||
<div class="slider-output">{{datapointSize}}</div>
|
||||
<div class="slider"></div>
|
||||
<p class="form-help help-text-small">
|
||||
Size of the graphic representation of each data point
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="animDuration" class="form-input checkbox-input">
|
||||
<label for="animate-chart">Animate chart transitions?: </label>
|
||||
<input type="checkbox" id="animate-chart"
|
||||
class="checkbox control"{{#if animDuration}} checked="true"{{/if}} />
|
||||
<p class="form-help help-text-small">
|
||||
Uncheck this to disable the animations used on the chart
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="width" class="form-input numeric-slider-input">
|
||||
<label for="width">Chart width: </label>
|
||||
<div class="slider-output">{{width}}</div>
|
||||
<div class="slider"></div>
|
||||
<p class="form-help help-text-small">
|
||||
(not including chart margins and axes)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="height" class="form-input numeric-slider-input">
|
||||
<label for="height">Chart height: </label>
|
||||
<div class="slider-output">{{height}}</div>
|
||||
<div class="slider"></div>
|
||||
<p class="form-help help-text-small">
|
||||
(not including chart margins and axes)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="X-axis-label"class="text-input form-input">
|
||||
<label for="X-axis-label">Re-label the X axis: </label>
|
||||
<input type="text" name="X-axis-label" id="X-axis-label" value="{{xLabel}}" />
|
||||
<p class="form-help help-text-small"></p>
|
||||
</div>
|
||||
|
||||
<div id="Y-axis-label" class="text-input form-input">
|
||||
<label for="Y-axis-label">Re-label the Y axis: </label>
|
||||
<input type="text" name="Y-axis-label" id="Y-axis-label" value="{{yLabel}}" />
|
||||
<p class="form-help help-text-small"></p>
|
||||
</div>
|
||||
|
||||
<input id="render-button" type="button" value="Draw" />
|
||||
</script>
|
||||
|
||||
<script type="text/template" class="template-visualization" id="template-visualization-statsDisplay">
|
||||
<p class="help-text">By column:</p>
|
||||
<table id="chart-stats-table">
|
||||
<thead><th></th><th>X</th><th>Y</th></thead>
|
||||
{{#each stats}}
|
||||
<tr><td>{{name}}</td><td>{{xval}}</td><td>{{yval}}</td></tr>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</table>
|
||||
</script>
|
||||
|
||||
<script type="text/template" class="template-visualization" id="template-visualization-chartDisplay">
|
||||
<svg width="{{width}}" height="{{height}}"></svg>
|
||||
</script>
|
||||
Reference in New Issue
Block a user