Biojs.ExpressionLoader showcase
PLEASE NOTE: the above example is being affected by the CSS rules of this site. Click on 'view in window' to see the component by using its own CSS stylesheet(s) only.
View in windowOverview
This component allows to load a tab-delimited file on the client. it uses HTML5 to load the file into the browser,
it does not require a server side.
Version
1.0.0.
To get the above Biojs.ExpressionLoader to work on your page, you need to do the following:
- Include the file Biojs.ExpressionLoader.js and its dependencies to your page header.
Biojs scripts
<script language="JavaScript" type="text/javascript" src="src/Biojs.js">
External script(s)
<script language="JavaScript" type="text/javascript" src="../biojs/dependencies/jquery/jquery-1.7.2.min.js">
CSS stylesheet(s)
<link rel="stylesheet" href="../biojs/dependencies/jquery/jquery-ui-1.8.2.css" />
- Create a div tag which holds an unique identifier.
<body> ... <div id="YourOwnDivId" /> ... </body> - Create a code snippet within a <script> tag and instance Biojs.ExpressionLoader into.
window.onload = function() { var instance = new Biojs.ExpressionLoader({ target: "YourOwnDivId" }); };
Required Parameters
-
target | {string}
Identifier of the DIV tag where the component should be displayed.
-
label | {String}
Text for the link that opens the file chooser dialog.
Optional Parameters
calculateExtrapolingData
Parameters:
-
colorData
getFormatedTable
Build a HTML string that displays a given number of rows as a table, including a last row of radio buttons to select a column
Parameters:
-
{int} rows
the number of rows to be included in the table.
Example :
instance.getFormatedTable(3);
getRGBString
Extrapolates a value using the minimum and maximum values and colors given as parameters. It returns a string in the format: "rgb([valRed],[valGreen],[valBlue])"
Parameters:
-
value
Example :
instance.getRGBString(0.6); instance.getRGBString(0.8); instance.getRGBString(0.1);
parseTabDelimitedString
Parse a String with tab delimited format into a hash, where the first column is treated as the key, and the value are all the other columns grouped as an array
Parameters:
-
{string} text
the tab delimited string
Example :
instance.parseTabDelimitedString('p1\t0.5\t0.3\t0.2\np2\t0.4\t0.2\t0.9');
startWizzard
Open the first parameter dialog to choose which column of the file should be loaded. It requires that a file(or a string) have been parsed previously because it uses the value in the attribute expressions.
Example :
instance.startWizzard();
wizzardStep2
Open the second parameter dialog to choose the range of expression values and their correspondent colors. It requires that a file(or a string) have been parsed previously because it uses the value in the attribute expressions.
Example :
instance.startWizzard();
onError
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{String}
error
a string describing the type of error.
Example :
instance.onError(
function( objEvent ) {
alert("ERROR: "+ objEvent.error);
}
);
onFileLoaded
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event. -
{Object}
expressions
a hash array containing the values loaded with the protein id(first column in the file) as the key and an array of numbers(expression data) as the value.
Example :
instance.onFileLoaded(function( objEvent ) {
alert("File loaded");
var expression =objEvent.expressions,
color=objEvent.colorData;
var i=0;
$('output').append("
");
for (var p in expression){
if (i++==40) break;
var value=1*expression[p][objEvent.column*1];
$('output').append("
"+p+" ("+value+")");
}
});
onFileRemoved
Parameters:
-
{function} actionPerformed
A function which receives an Biojs.Event object as argument.
Returned data in the Biojs.Event object:
-
{Object}
source
The component which did triggered the event.
Example :
instance.onFileRemoved(function( objEvent ) {
alert("File removed");
$('output').html("");
});