Class Index | File Index

Classes


Class Biojs.InteractionsBundleD3


Version 0.9.0_alpha.

Extends Biojs.

Defined in: Biojs.InteractionsBundleD3.js.

Class Summary
Constructor Attributes Constructor Name and Description
 
This component uses the D3 library and specifically its implementation of the bundle algorithm to represent a network of protein interactions.
Field Summary
Field Attributes Field Name and Description
<inner>  
Array containing the supported event names
<inner>  
opt
Default values for the options
Method Summary
Method Attributes Method Name and Description
 
addInteraction(proteinId1, proteinId2, extraAtributes)
Adds an interaction between 2 proteins that are already in the graphic using their IDs
 
addLegends(legends, type, color)
Adds a legend to the graphic
 
addOrganism(organism)
 
addProtein(protein)
Adds a protein to the graphic
 
 
constructor(options)
 
getInteraction(proteinId1, proteinId2)
gets the interaction object by the id of its proteins
 
getInteractionIndex(proteinId1, proteinId2)
Gets the array index of the interaction object by the ids of the interactors
 
getProtein(proteinId)
gets the protein object by its id
 
hide(selector)
Hides the elements on the graphic that match the selector.
 
hideLegend(protein)
Shows/Hide the legend(id) of the protein
 
highlight(selector)
Highlight the elements on the graphic that match the selector.
 
imports(nodes)
 
refreshSizeScale(selector)
Scales the size of the proteins which value has been modify by other means
 
removeInteraction(proteinId1, proteinId2)
removes from the graphic the interaction by the id of its proteins
 
removeProtein(proteinId, excludelist)
removes a protein from the graphic with all the interactions unless the interactor is also interacting with another protein that is visible.
 
Resets the graphic to zero proteins zero interactions
 
Restart the graphic to materialize the changes don on it(e.g.
 
setColor(selector, color)
Set the stroke's color of the elements on the graphic that match the selector.
 
setFillColor(selector, color)
Set the fill's color of the elements on the graphic that match the selector.
 
setSize(width, height)
allows to resize the SVG element updating the gravity points
 
setSizeScale(protein, scale)
Scales the area of a protein
 
show(selector)
Shows the elements on the graphic that match the selector.
 
showLegend(protein, typeLegend)
Shows/Hide the legend(id) of the protein
 
swapShowLegend(protein)
Shows/Hide the legend(id) of the protein
Methods borrowed from class Biojs:
addListener, extend, getId, listen, raiseEvent, removeListener, setEventHandlers, setOptions
Event Summary
Event Attributes Event Name and Description
 
interactionClick(actionPerformed)
 
interactionMouseOut(actionPerformed)
 
interactionMouseOver(actionPerformed)
 
proteinClick(actionPerformed)
 
proteinMouseOut(actionPerformed)
 
proteinMouseOver(actionPerformed)
 
sizeChanged(actionPerformed)
Class Detail
Biojs.InteractionsBundleD3(options)
This component uses the D3 library and specifically its implementation of the bundle algorithm to represent a network of protein interactions.
Author: Gustavo A. Salazar.
			var instance = new Biojs.InteractionsBundleD3({
				target: "YourOwnDivId",
			});	
			var pid=1;
			for (var i=0;i<100;i++)
				instance.addProtein({id:'p'+pid++,group:1,organism:"human"});
			for (var i=0;i<100;i++)
				instance.addProtein({id:'p'+pid++,group:1,organism:"TB"});
			for (var i=1;i<200;i++){
	 			instance.addInteraction("p"+(i),"p"+(100+i),{id:"p"+(i)+"_p"+(100+i),feature1:"value"});
				instance.addInteraction("p"+(i),"p"+(i%17),{id:"p"+(i)+"_p"+(i%17),feature1:"value"});
			}
			instance.restart();
Parameters:
{Object} options
An object with the options for the InteractionsD3 component.
Options detailed:
{string} target
Identifier of the DIV tag where the component should be displayed.
{string} width
Width of the SVG element, if given in percentage, it will use it on proportion of the container
{string} height
Height of the SVG element, if given in percentage, it will use it on proportion of the container
{string} radius
Radius of the nodes representing the proteins
{string} textLength
Space in pixels to be reserved for the labels around the circle
Requires:
jQuery Core 1.7.2
D3
InteractionsD3 CSS
Field Detail
<inner> eventTypes
Array containing the supported event names

<inner> opt
Default values for the options
Method Detail
addInteraction(proteinId1, proteinId2, extraAtributes)
Adds an interaction between 2 proteins that are already in the graphic using their IDs

for (var i=1;i<200;i++){
  instance.addInteraction("p"+(i),"p"+(i%23),{id:"p"+(i)+"_p"+(i%23),feature1:"value"});
}
instance.restart();
Parameters:
{string} proteinId1
Id of the first protein in the interaction
{string} proteinId2
Id of the second protein in the interaction
{Object} extraAtributes Optional, Default: {}
An object containing meta information of the interaction to be stored in the interaction itself. useful for triggered events

addLegends(legends, type, color)
Adds a legend to the graphic
						
instance.addLegends(["Legend red"],"Color","#FF0000");
instance.restart();
Parameters:
legends
type
color

addOrganism(organism)
Parameters:
organism

addProtein(protein)
Adds a protein to the graphic
for (var i=0;i<50;i++)
  instance.addProtein({id:'new'+pid++,group:1,organism:"human"});
instance.restart();
Parameters:
{Object} protein
An object containing information of the protein

clearAndRestartGraphic()

constructor(options)
Parameters:
options

{Object} getInteraction(proteinId1, proteinId2)
gets the interaction object by the id of its proteins
alert( instance.getInteraction('p1','p3'));
Parameters:
{string} proteinId1
The id of the first protein
{string} proteinId2
The id of the second protein
Returns:
{Object} An object containing information of the interaction

{Integer} getInteractionIndex(proteinId1, proteinId2)
Gets the array index of the interaction object by the ids of the interactors
alert(instance.getInteractionIndex('3','5'));
Parameters:
{string} proteinId1
The id of the first protein interacting
{string} proteinId2
The id of the second protein interacting
Returns:
{Integer} An int value indicating the index of the interaction in the array this.interactions

{Object} getProtein(proteinId)
gets the protein object by its id
alert(instance.getProtein('p3'));
Parameters:
{string} proteinId
The id of the protein
Returns:
{Object} protein An object containing information of the protein

hide(selector)
Hides the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
instance.hide('[id *="node-p1"]');
Parameters:
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string

hideLegend(protein)
Shows/Hide the legend(id) of the protein
instance.swapShowLegend("#node-p"+(pid-1)+" .legend");
Parameters:
{string} protein
the id of the protein to swap the visibility of the legend

highlight(selector)
Highlight the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
instance.highlight(".figure");
Parameters:
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string

imports(nodes)
Parameters:
nodes

refreshSizeScale(selector)
Scales the size of the proteins which value has been modify by other means
var j=0;
for (var i in instance.proteins)
	instance.proteins[i].size=1+(j++)%4;
instance.refreshSizeScale(".figure");
Parameters:
{string} selector
a CSS3 selector to choose the nodes to resize

removeInteraction(proteinId1, proteinId2)
removes from the graphic the interaction by the id of its proteins
for (var i=1;i<100;i+=1)
  instance.removeInteraction('p'+i,'p'+(100+i));
instance.restart();
Parameters:
{string} proteinId1
The id of the first protein
{string} proteinId2
The id of the second protein

removeProtein(proteinId, excludelist)
removes a protein from the graphic with all the interactions unless the interactor is also interacting with another protein that is visible.
instance.removeProtein('p2');
instance.restart();
Parameters:
{string} proteinId
The id of the protein to delete
excludelist

resetGraphic()
Resets the graphic to zero proteins zero interactions
instance.resetGraphic();

restart()
Restart the graphic to materialize the changes don on it(e.g. add/remove proteins)
instance.restart();

setColor(selector, color)
Set the stroke's color of the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
instance.setColor(".figure","#FF0000");
Parameters:
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
{string} color
a color in web format eg. #FF0000

setFillColor(selector, color)
Set the fill's color of the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
instance.setFillColor(".figure","#FF0000");
Parameters:
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string
{string} color
a color in web format eg. #FF0000

setSize(width, height)
allows to resize the SVG element updating the gravity points
instance.setSize(400,400);
instance.restart();
Parameters:
{string} width
value of width to be assign to the SVG
{string} height
value of height to be assign to the SVG

setSizeScale(protein, scale)
Scales the area of a protein
instance.setSizeScale("#figure_p188",4);
Parameters:
{string} protein
the id of the protein to scale
{integer} scale
value to scale a node

show(selector)
Shows the elements on the graphic that match the selector. Check the CSS3 selectors documentation to build a selector string
instance.show('[id *="node-p1"]');
Parameters:
{string} selector
a string to represent a set of elements. Check the CSS3 selectors documentation to build a selector string

showLegend(protein, typeLegend)
Shows/Hide the legend(id) of the protein
instance.swapShowLegend("#node-p"+(pid-1)+" .legend");
Parameters:
{string} protein
the id of the protein to swap the visibility of the legend
typeLegend

swapShowLegend(protein)
Shows/Hide the legend(id) of the protein
instance.swapShowLegend("#node-p"+(pid-1)+" .legend");
Parameters:
{string} protein
the id of the protein to swap the visibility of the legend
Event Detail
interactionClick(actionPerformed)
instance.interactionClick(
   function( objEvent ) {
     instance.swapShowLegend("#node-" + objEvent.interaction.source.key + " .legend",'#FF0000');
     instance.swapShowLegend("#node-" + objEvent.interaction.target.key + " .legend",'#FF0000');
     alert("Click on the interaction " + objEvent.interaction.id);
   }
);
Parameters:
{function} actionPerformed
It is triggered when the user clicks over an interaction path
Event object data:
{@link Biojs.Event} objEvent
Object containing the information of the event
{Object} objEvent.source
The component which did triggered the event.
{Object} objEvent.interaction
the information of the interaction that has been clicked.

interactionMouseOut(actionPerformed)
instance.interactionMouseOut(
   function( objEvent ) {
     instance.setColor("#link-" + objEvent.interaction.source.key +"-"+ objEvent.interaction.target.key,"");
     instance.setColor("#link-" + objEvent.interaction.target.key +"-"+ objEvent.interaction.source.key,"");
     instance.setColor("#node-" + objEvent.interaction.source.key,'');
     instance.setColor("#node-" + objEvent.interaction.target.key,'');
     alert("The mouse is out of the interaction " + objEvent.interaction.id);
   }
);
Parameters:
{function} actionPerformed
It is triggered when the mouse pointer leave an interaction
Event object data:
{@link Biojs.Event} objEvent
Object containing the information of the event
{Object} source
The component which did triggered the event.
{Object} interaction
the information of the interaction that has been mouseout.

interactionMouseOver(actionPerformed)
instance.interactionMouseOver(
   function( objEvent ) {
     instance.highlight("#link-" + objEvent.interaction.source.key +"-"+ objEvent.interaction.target.key);
     instance.highlight("#link-" + objEvent.interaction.target.key +"-"+ objEvent.interaction.source.key );
     instance.setColor("#node-" + objEvent.interaction.source.key,'#0f0');
     instance.setColor("#node-" + objEvent.interaction.target.key,'#0f0');
     alert("The mouse is over the interaction " + objEvent.interaction.id);
   }
);
Parameters:
{function} actionPerformed
It is triggered when the mouse pointer is over an interaction
Event object data:
{@link Biojs.Event} objEvent
Object containing the information of the event
{Object} source
The component which did triggered the event.
{Object} interaction
the information of the interaction that has been mouseover.

proteinClick(actionPerformed)
instance.proteinClick(
   function( objEvent ) {
     instance.swapShowLegend("#node-" + objEvent.protein.key + " .legend",'#FF0000');
     alert("The protein " + objEvent.protein.id + " was clicked.");
   }
);
Parameters:
{function} actionPerformed
It is triggered when the user clicks on a protein
Event object data:
{@link Biojs.Event} objEvent
Object containing the information of the event
{Object} objEvent.source
The component which did triggered the event.
{Object} objEvent.protein
the information of the protein that has been clicked.

proteinMouseOut(actionPerformed)
instance.proteinMouseOut(
   function( objEvent ) {
     instance.setColor("#node-" + objEvent.protein.key,'');
     instance.setColor("path.link.target-" + objEvent.protein.key,"");
     instance.setColor("path.link.target-" + objEvent.protein.key,"");
     alert("The mouse is out the protein " + objEvent.protein.id);
   }
);
Parameters:
{function} actionPerformed
It is triggered when the mouse pointer leave the area of a protein
Event object data:
{@link Biojs.Event} objEvent
Object containing the information of the event
{Object} objEvent.source
The component which did triggered the event.
{Object} objEvent.protein
the information of the protein that has been mouseout.

proteinMouseOver(actionPerformed)
instance.proteinMouseOver(
   function( objEvent ) {
     instance.highlight("path.link.target-" + objEvent.protein.key);
     instance.highlight("path.link.target-" + objEvent.protein.key);
     instance.setColor("#node-" + objEvent.protein.key,'#0f0');
     alert("The mouse is over of the protein " + objEvent.protein.id);
   }
);
Parameters:
{function} actionPerformed
It is triggered when the mouse pointer is over a protein
Event object data:
{@link Biojs.Event} objEvent
Object containing the information of the event
{Object} objEvent.source
The component which did triggered the event.
{Object} objEvent.protein
the information of the protein that has been mouseover.

sizeChanged(actionPerformed)
instance.sizeChanged(
   function( objEvent ) {
     alert("The size has changed: ("+objEvent.width+","+objEvent.height+")" );
   }
);
Parameters:
{function} actionPerformed
It is triggered when the size of the SVG element has been changed.
Event object data:
{@link Biojs.Event} objEvent
Object containing the information of the event
{Object} source
The component which did triggered the event.
{Object} width
The width of the new size
{Object} height
The height of the new size

Documentation generated by JsDoc Toolkit 2.3.2 on Thu Apr 17 2014 17:42:43 GMT+0100 (BST)