2010-04-14 07:14:33 +02:00
function ScatterplotDialog ( column ) {
this . _column = column ;
2010-04-13 02:25:43 +02:00
this . _plot _method = "lin" ;
2010-04-13 06:48:20 +02:00
this . _createDialog ( ) ;
2010-04-30 21:14:45 +02:00
this . _active = true ;
2010-04-10 10:28:06 +02:00
}
ScatterplotDialog . prototype . _createDialog = function ( ) {
var self = this ;
var frame = DialogSystem . createDialog ( ) ;
2010-04-13 02:25:43 +02:00
frame . width ( "1100px" ) ;
2010-04-10 10:28:06 +02:00
2010-04-14 07:14:33 +02:00
var header = $ ( '<div></div>' ) . addClass ( "dialog-header" ) . text ( 'Scatterplot Matrix' + ( ( typeof this . _column == "undefined" ) ? "" : " (focusing on '" + this . _column + "')" ) ) . appendTo ( frame ) ;
2010-04-10 10:28:06 +02:00
var body = $ ( '<div></div>' ) . addClass ( "dialog-body" ) . appendTo ( frame ) ;
var footer = $ (
'<div class="dialog-footer">' +
'<table width="100%"><tr>' +
'<td class="left" style="text-align: left"></td>' +
'<td class="right" style="text-align: right"></td>' +
'</tr></table>' +
'</div>'
) . appendTo ( frame ) ;
2010-04-13 02:25:43 +02:00
2010-04-10 10:28:06 +02:00
var html = $ (
2010-04-13 08:40:33 +02:00
'<div class="grid-layout layout-normal"><table width="100%">' +
2010-04-13 02:25:43 +02:00
'<tr>' +
'<td>' +
'<span class="clustering-dialog-controls">Plot type: <select bind="plotSelector">' +
2010-04-17 05:00:38 +02:00
'<option selected="true" value="lin">linear</option>' +
'<option value="log">log-log</option>' +
2010-04-13 02:25:43 +02:00
'</select></span>' +
2010-04-15 08:20:56 +02:00
'<span class="clustering-dialog-controls">Plot Size: <input bind="plotSize" type="test" size="2" value=""> px</span>' +
'<span class="clustering-dialog-controls">Dot Size: <input bind="dotSize" type="test" size="2" value=""> px</span>' +
2010-04-17 05:00:38 +02:00
'<span class="clustering-dialog-controls">Rotation: <select bind="rotationSelector">' +
'<option selected="true" value="none">none</option>' +
'<option value="cw">45° clockwise</option>' +
'<option value="ccw">45° counter-clockwise</option>' +
'</select></span>' +
2010-04-13 02:25:43 +02:00
'</td>' +
'</tr>' +
'<tr>' +
'<td>' +
'<div bind="tableContainer" class="scatterplot-dialog-table-container"></div>' +
'</td>' +
'</tr>' +
'</table></div>'
2010-04-10 10:28:06 +02:00
) . appendTo ( body ) ;
2010-04-13 02:25:43 +02:00
2010-04-10 10:28:06 +02:00
this . _elmts = DOM . bind ( html ) ;
2010-04-13 02:25:43 +02:00
this . _elmts . plotSelector . change ( function ( ) {
2010-04-17 05:00:38 +02:00
self . _plot _method = $ ( this ) . find ( "option:selected" ) . attr ( "value" ) ;
2010-04-13 02:25:43 +02:00
self . _renderMatrix ( ) ;
} ) ;
2010-04-17 05:00:38 +02:00
this . _elmts . rotationSelector . change ( function ( ) {
self . _rotation = $ ( this ) . find ( "option:selected" ) . attr ( "value" ) ;
self . _renderMatrix ( ) ;
} ) ;
2010-04-13 02:25:43 +02:00
this . _elmts . plotSize . change ( function ( ) {
try {
self . _plot _size = parseInt ( $ ( this ) . val ( ) )
self . _renderMatrix ( ) ;
} catch ( e ) {
alert ( "Must be a number" ) ;
}
} ) ;
this . _elmts . dotSize . change ( function ( ) {
try {
self . _dot _size = parseFloat ( $ ( this ) . val ( ) )
self . _renderMatrix ( ) ;
} catch ( e ) {
alert ( "Must be a number" ) ;
}
} ) ;
2010-04-10 10:28:06 +02:00
var left _footer = footer . find ( ".left" ) ;
var right _footer = footer . find ( ".right" ) ;
2010-04-15 08:56:07 +02:00
$ ( '<button></button>' ) . text ( "Done" ) . click ( function ( ) { self . _dismiss ( ) ; } ) . appendTo ( right _footer ) ;
2010-04-10 10:28:06 +02:00
this . _level = DialogSystem . showDialog ( frame ) ;
2010-04-13 02:25:43 +02:00
this . _renderMatrix ( ) ;
2010-04-10 10:28:06 +02:00
} ;
2010-04-13 02:25:43 +02:00
ScatterplotDialog . prototype . _renderMatrix = function ( ) {
2010-04-10 10:28:06 +02:00
var self = this ;
2010-04-13 02:25:43 +02:00
var container = this . _elmts . tableContainer . html (
2010-04-15 08:20:56 +02:00
'<div style="margin: 1em; font-size: 130%; color: #888; background-color: white;">Processing... <img src="/images/small-spinner.gif"></div>'
2010-04-13 02:25:43 +02:00
) ;
2010-04-15 08:20:56 +02:00
if ( theProject . columnModel . columns . length > 0 ) {
var params = {
project : theProject . id
2010-04-13 05:44:42 +02:00
} ;
2010-04-15 08:20:56 +02:00
$ . getJSON ( "/command/get-columns-info?" + $ . param ( params ) , function ( data ) {
if ( data == null || typeof data . length == 'undefined' ) {
container . html ( "Error calling 'get-columns-info'" ) ;
return ;
}
2010-04-14 07:14:33 +02:00
2010-04-15 08:20:56 +02:00
var columns = [ ] ;
for ( var i = 0 ; i < data . length ; i ++ ) {
if ( data [ i ] . is _numeric ) {
columns . push ( data [ i ] ) ;
}
2010-04-13 08:40:33 +02:00
}
2010-04-15 08:20:56 +02:00
if ( typeof self . _plot _size == 'undefined' ) {
self . _plot _size = Math . max ( Math . floor ( 500 / columns . length / 5 ) * 5 , 20 ) ;
self . _dot _size = 0.4 ;
self . _elmts . plotSize . val ( self . _plot _size ) ;
self . _elmts . dotSize . val ( self . _dot _size ) ;
}
var table = '<table class="scatterplot-matrix-table"><tbody>' ;
2010-04-30 21:14:45 +02:00
var createScatterplot = function ( cx , cy ) {
2010-04-15 08:20:56 +02:00
var title = cx + ' (x) vs. ' + cy + ' (y)' ;
var link = '<a href="javascript:{}" title="' + title + '" cx="' + cx + '" cy="' + cy + '">' ;
var plotter _params = {
'cx' : cx ,
'cy' : cy ,
2010-04-17 05:00:38 +02:00
'l' : self . _plot _size ,
2010-04-15 08:20:56 +02:00
'dot' : self . _dot _size ,
2010-04-17 05:00:38 +02:00
'dim_x' : self . _plot _method ,
'dim_y' : self . _plot _method ,
'r' : self . _rotation
2010-04-15 08:20:56 +02:00
} ;
var params = {
project : theProject . id ,
engine : JSON . stringify ( ui . browsingEngine . getJSON ( ) ) ,
plotter : JSON . stringify ( plotter _params )
} ;
2010-04-30 21:14:45 +02:00
var url = "/command/get-scatterplot?" + $ . param ( params ) ;
2010-04-30 06:09:04 +02:00
var attrs = [
'width="' + self . _plot _size + '"' ,
2010-04-30 21:14:45 +02:00
'height="' + self . _plot _size + '"' ,
'src2="' + url + '"'
2010-04-30 06:09:04 +02:00
] ;
return link + '<img ' + attrs . join ( ' ' ) + ' /></a>' ;
2010-04-14 07:14:33 +02:00
} ;
2010-04-15 08:20:56 +02:00
for ( var i = 0 ; i < columns . length ; i ++ ) {
table += '<tr>' ;
var div _class = "column_header" ;
if ( columns [ i ] . name == self . _column ) div _class += " current_column" ;
table += '<td class="' + div _class + '" colspan="' + ( i + 1 ) + '">' + columns [ i ] . name + '</td>'
for ( var j = i + 1 ; j < columns . length ; j ++ ) {
var cx = columns [ i ] . name ;
var cy = columns [ j ] . name ;
var div _class = "scatterplot" ;
2010-04-30 06:09:04 +02:00
var current = cx == self . _column || cy == self . _column ;
if ( current ) div _class += " current_column" ;
2010-04-30 21:14:45 +02:00
table += '<td><div class="' + div _class + '">' + createScatterplot ( cx , cy ) + '</div></td>' ;
2010-04-15 08:20:56 +02:00
}
table += '</tr>' ;
2010-04-14 07:14:33 +02:00
}
2010-04-15 08:20:56 +02:00
table += "</tbody></table>" ;
var width = container . width ( ) ;
2010-04-30 06:09:04 +02:00
container . empty ( ) . css ( "width" , width + "px" ) . html ( table ) ;
2010-04-15 08:20:56 +02:00
container . find ( "a" ) . click ( function ( ) {
var options = {
"name" : $ ( this ) . attr ( "title" ) ,
2010-04-17 05:00:38 +02:00
"cx" : $ ( this ) . attr ( "cx" ) ,
"cy" : $ ( this ) . attr ( "cy" ) ,
2010-04-30 08:12:42 +02:00
"l" : 150 ,
2010-04-17 05:00:38 +02:00
"ex" : "value" ,
"ey" : "value" ,
2010-04-15 08:20:56 +02:00
"dot" : self . _dot _size ,
2010-04-17 05:00:38 +02:00
"dim_x" : self . _plot _method ,
"dim_y" : self . _plot _method ,
'r' : self . _rotation
2010-04-15 08:20:56 +02:00
} ;
ui . browsingEngine . addFacet ( "scatterplot" , options ) ;
//self._dismiss();
} ) ;
2010-04-30 23:19:13 +02:00
2010-04-30 21:14:45 +02:00
var load _images = function ( data ) {
2010-04-30 23:19:13 +02:00
if ( self . _active ) {
data . batch = 0 ;
var end = Math . min ( data . index + data . batch _size , data . images . length ) ;
for ( ; data . index < end ; data . index ++ ) {
load _image ( data ) ;
2010-04-30 06:09:04 +02:00
}
2010-04-15 08:20:56 +02:00
}
2010-04-30 21:14:45 +02:00
} ;
2010-04-30 23:19:13 +02:00
var load _image = function ( data ) {
var img = $ ( data . images [ data . index ] ) ;
var src2 = img . attr ( "src2" ) ;
if ( src2 ) {
img . attr ( "src" , src2 ) ;
img . removeAttr ( "src2" ) ;
img . load ( function ( ) {
data . batch ++ ;
if ( data . batch == data . batch _size ) {
load _images ( data ) ;
}
} ) ;
}
} ;
2010-04-30 21:14:45 +02:00
load _images ( {
index : 0 ,
2010-04-30 23:19:13 +02:00
batch _size : 4 ,
2010-04-30 21:14:45 +02:00
images : container . find ( ".scatterplot img" )
} )
2010-04-15 08:20:56 +02:00
} ) ;
2010-04-10 10:28:06 +02:00
} else {
container . html (
'<div style="margin: 2em;"><div style="font-size: 130%; color: #333;">There are no columns in this dataset</div></div>'
) ;
}
} ;
ScatterplotDialog . prototype . _dismiss = function ( ) {
2010-04-30 21:14:45 +02:00
this . _active = false ;
2010-04-10 10:28:06 +02:00
DialogSystem . dismissUntil ( this . _level - 1 ) ;
} ;