Biojs.Ruler 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
Ruler is a component to deal with the definition and interaction of rules that follow the structure:
In [LOCATION] [ACTION] the [TARGET] with [CONDITION] [PARAMETERS]
The component receives a JSON structure defining the values of the different parts of the rule and it
generates forms and lists.
The component generates events when rules are created, removed or reordered.
Version
1.0.1.
To get the above Biojs.Ruler to work on your page, you need to do the following:
- Include the file Biojs.Ruler.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.Ruler into.
window.onload = function() { var instance = new Biojs.Ruler({ target: "YourOwnDivId", allowOrdering:true, rules:{ "location": [ "all proteins", "protein1", "protein2", "protein3", "protein4" ], "target": [ { "name": "Proteins", "action": [ {name:"Show",type:"single"}, {name:"Hide",type:"single"}, {name:"Highlight",type:"single"}, {name:"Color",type:"color"}, {name:"Color Range",type:"colorRange"}, {name:"Show Label",type:"select",options:["ID","Functional Class","Organism","Gene Name"]} ], "conditions": [ { "name": "interactions with", "type": "selects", "amount": 1, "values": [ "protein1", "protein2", "protein3", "protein4" ] }, { "name": "number of interactions", "type": "numeric_comparison" }, { "name": "accession number", "type": "text_comparison" } ] }, { "name": "Interactions", "action": [ {name:"Show",type:"single"}, {name:"Hide",type:"single"}, {name:"Highlight",type:"single"}, {name:"Color",type:"color"}, ], "conditions": [ { "name": "protein", "type": "selects", "amount": 1, "values": [ "protein1", "protein2", "protein3", "protein4" ] }, { "name": "proteins", "type": "selects", "amount": 2, "values": [ "protein1", "protein2", "protein3", "protein4" ] }, { "name": "score", "type": "numeric_comparison" } ] } ] } }); };
Required Parameters
-
target | {string}
Identifier of the DIV tag where the component should be displayed.
-
rules | {Object}
A json stucture defining, the rules, possible values, conditions, etc. An example of the structure here:
{ "location": [ "Some part of the page" ], "action": ["Action 1", "Action 2", "Action 3" ], "target": [ { "name": "First Target", "conditions": [ { "name": "Select from", "type": "selects", "amount": 1, "values": ["An Option","another option" ] }, { "name": "number", "type": "numeric_comparison" }, { "name": "some text", "type": "text_comparison" } ] } ] }
Optional Parameters
-
allowOrdering | {boolean}
The list of created rules can be reordered by drag&drop, it requires the jquery ui dependencies
Default: true
addActiveRule
Add a rule to the active rules' set. this method can be invoked from an external script, be careful when using by following the rules' model.
Parameters:
-
{object} rule
Optional
A rule with predefined values as an Object that contain the fields: location, action, target, condition, parameters, color -
n
Example :
instance.addActiveRule({location:"protein1", action:"Color", target:"Proteins", condition:"number of interactions", parameters:["==","2"], color:"#F00"});
addRule
Add a rule to the new rule panel. this method can be invoked from an external script, be careful when using to create rules that follow the rules' model.
Parameters:
-
{object} rule
Optional
A rule with predefined values as an Object that contain the fields: location, action, target, condition, parameters, color
Example :
instance.addRule({location:"protein1", action:"Color", target:"Proteins", condition:"number of interactions", parameters:["==","2"], color:"#F00"});
changeRules
Change the Rules' model. Warning: this method does not take care of rules that have been defined with a previous model.
Parameters:
-
{object} rules
A json stucture defining, the rules, possible values, conditions, etc. See the example for the the constructor.
Example :
instance.changeRules({
"location": [ "Some part of the page" ],
"action": ["Action 1", "Action 2", "Action 3" ],
"target": [ {
"name": "First Target",
"conditions": [ {
"name": "Select from",
"type": "selects",
"amount": 1,
"values": ["An Option","another option" ]
}, {
"name": "number",
"type": "numeric_comparison"
}, {
"name": "some text",
"type": "text_comparison"
} ]
} ]
});
getActiveRules
Get an array with the active rules
Example :
instance.getActiveRules();
setAffectedByRule
Set the number of affected values by a given rule
Parameters:
-
{string} id
The id of the rule wich affecte value is going to be set. -
{integer} number
The amount of entities affected by the rule.
Example :
instance.setAffectedByRule('YourOwnDivId_rule_1',58);
onOrderChanged
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. -
{Array}
rules
Array with all the active rules. Each rule is an Object that contain the fields: location, action, target, condition, parameters, id, color
Example :
instance.onOrderChanged(
function( objEvent ) {
alert("Order has changed");
}
);
onRuleCreated
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}
new_rule
The rule that has been created. The rule Object contain the fields: location, action, target, condition, parameters(array), id, color -
{Array}
rules
Array with all the active rules. Each rule is an Object that contain the fields: location, action, target, condition, parameters, id, color
Example :
instance.onRuleCreated(
function( objEvent ) {
alert("New rule: In "+objEvent.new_rule.location+" "+objEvent.new_rule.action+" the "+objEvent.new_rule.target+" with "+objEvent.new_rule.condition+" "+objEvent.new_rule.parameters.join()+"");
}
);
onRuleEditing
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}
editing
The rule that has been selected to be edited. The rule Object contain the fields: location, action, target, condition, parameters(array), id, color -
{Array}
rules
Array with all the active rules. Each rule is an Object that contain the fields: location, action, target, condition, parameters, id, color
Example :
instance.onRuleEditing(
function( objEvent ) {
alert("Editing Rule: In "+objEvent.editing.location+" "+objEvent.editing.action+" the "+objEvent.editing.target+" with "+objEvent.editing.condition+" "+objEvent.editing.parameters.join()+"");
}
);
onRuleRemoved
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}
removed
The rule that has been removed. The rule Object contain the fields: location, action, target, condition, parameters(array), id, color -
{Array}
rules
Array with all the active rules. Each rule is an Object that contain the fields: location, action, target, condition, parameters, id, color
Example :
instance.onRuleRemoved(
function( objEvent ) {
alert("Rule removed: In "+objEvent.removed.location+" "+objEvent.removed.action+" the "+objEvent.removed.target+" with "+objEvent.removed.condition+" "+objEvent.removed.parameters.join()+"");
}
);