opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Scatterplot (plugin version): small fixes, move dataset out of config, namespace hbrs templates

Browse Source
This commit is contained in:
Carl Eberhard
2013-11-19 10:19:22 -05:00
parent b2cffd410c
commit 018f5187e8
6 changed files with 26 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/plugins/visualizations/scatterplot/src/scatterplot-config-editor.js
+12 -7
View File
@@ -37,14 +37,19 @@ var ScatterplotConfigEditor = BaseView.extend( LoggableMixin ).extend({
/** initialize requires a configuration Object containing a dataset Object */
initialize : function( attributes ){
//console.log( this + '.initialize, attributes:', attributes );
if( !attributes || !attributes.config || !attributes.config.dataset ){
if( !attributes || !attributes.config || !attributes.dataset ){
throw new Error( "ScatterplotView requires a configuration and dataset" );
}
this.dataset = attributes.config.dataset;
//console.log( 'config:', attributes.config );
this.dataset = attributes.dataset;
//console.log( 'dataset:', this.dataset );
//TODO: ScatterplotView -> ScatterplotDisplay, this.plotView -> this.display
this.plotView = new ScatterplotView({
dataset : attributes.dataset,
config : attributes.config
//TODO: if data
});
},
@@ -197,8 +202,8 @@ var ScatterplotConfigEditor = BaseView.extend( LoggableMixin ).extend({
// parse the column values for both indeces (for the data fetch) and names (for the chart)
var $dataControls = this.$el.find( '#data-control' );
var settings = {
xColumn : $dataControls.find( '[name="xColumn"]' ).val(),
yColumn : $dataControls.find( '[name="yColumn"]' ).val()
xColumn : Number( $dataControls.find( '[name="xColumn"]' ).val() ),
yColumn : Number( $dataControls.find( '[name="yColumn"]' ).val() )
};
if( $dataControls.find( '#include-id-checkbox' ).prop( 'checked' ) ){
settings.idColumn = $dataControls.find( '[name="idColumn"]' ).val();
@@ -229,9 +234,9 @@ var ScatterplotConfigEditor = BaseView.extend( LoggableMixin ).extend({
});
ScatterplotConfigEditor.templates = {
mainLayout : Templates.editor,
dataControl : Templates.datacontrol,
chartControl : Templates.chartcontrol
mainLayout : scatterplot.editor,
dataControl : scatterplot.datacontrol,
chartControl : scatterplot.chartcontrol
};
//==============================================================================
config/plugins/visualizations/scatterplot/src/scatterplot-display.js
+7 -10
View File
@@ -10,14 +10,10 @@ var ScatterplotView = Backbone.View.extend({
//TODO: should be a view on visualization(revision) model
defaults : {
dataset : {
},
metadata : {
dataLines : undefined
},
ajaxFn : null,
pagination : {
currPage : 0,
perPage : 3000
@@ -48,6 +44,7 @@ var ScatterplotView = Backbone.View.extend({
initialize : function( attributes ){
this.config = _.extend( _.clone( this.defaults ), attributes.config || {});
this.dataset = attributes.dataset;
//console.debug( this + '.config:', this.config );
},
@@ -65,7 +62,7 @@ var ScatterplotView = Backbone.View.extend({
//console.debug( 'currPage', this.config.pagination.currPage );
var view = this;
//TODO: very tied to datasets - should be generalized eventually
xhr = jQuery.getJSON( '/api/datasets/' + this.config.dataset.id, {
xhr = jQuery.getJSON( '/api/datasets/' + this.dataset.id, {
data_type : 'raw_data',
provider : 'dataset-column',
limit : this.config.pagination.perPage,
@@ -151,7 +148,7 @@ var ScatterplotView = Backbone.View.extend({
},
renderLineInfo : function( data ){
var totalLines = this.config.dataset.metadata_data_lines || 'an unknown number of',
var totalLines = this.dataset.metadata_data_lines || 'an unknown number of',
lineStart = ( this.config.pagination.currPage * this.config.pagination.perPage ),
lineEnd = lineStart + data.length;
return $( '<p/>' ).addClass( 'scatterplot-data-info' )
@@ -168,9 +165,9 @@ var ScatterplotView = Backbone.View.extend({
}
//TODO: cache numPages/numLines in config
var view = this,
dataLines = this.config.dataset.metadata_data_lines,
dataLines = this.dataset.metadata_data_lines,
numPages = ( dataLines )?( Math.ceil( dataLines / this.config.pagination.perPage ) ):( undefined );
//console.debug( 'data:', this.config.dataset.metadata_data_lines, 'numPages:', numPages );
//console.debug( 'data:', this.dataset.metadata_data_lines, 'numPages:', numPages );
// prev next buttons
var $prev = makePage$Li( 'Prev' ).click( function(){
@@ -207,9 +204,9 @@ var ScatterplotView = Backbone.View.extend({
}
//TODO: cache numPages/numLines in config
var view = this,
dataLines = this.config.dataset.metadata_data_lines,
dataLines = this.dataset.metadata_data_lines,
numPages = ( dataLines )?( Math.ceil( dataLines / this.config.pagination.perPage ) ):( undefined );
//console.debug( 'data:', this.config.dataset.metadata_data_lines, 'numPages:', numPages );
//console.debug( 'data:', this.dataset.metadata_data_lines, 'numPages:', numPages );
// page numbers (as separate control)
//var $paginationContainer = $( '<div/>' ).addClass( 'pagination-container' ),
config/plugins/visualizations/scatterplot/src/visualization-templates.html
-197
View File
@@ -1,197 +0,0 @@
<script type="text/template" class="template-visualization" id="template-visualization-scatterplotControlForm">
{{! main layout }}
<h1>WHAAAAA?</h1>
<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 title="Use this tab to change which data are used"
href="#data-control" data-toggle="tab">Data Controls</a>
</li>
<li>
<a title="Use this tab to change how the chart is drawn"
href="#chart-control" data-toggle="tab" >Chart Controls</a>
</li>
<li>
<a title="This tab will display overall statistics for your data"
href="#stats-display" data-toggle="tab">Statistics</a>
</li>
<li>
<a title="This tab will display the chart"
href="#chart-display" data-toggle="tab">Chart</a>
<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">
<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>
</div>
{{! ---------------------------- tab for actual chart }}
<div id="chart-display" class="tab-pane">
<svg width="{{width}}" height="{{height}}"></svg>
</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>