Component overview < BioJs

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 window

Overview

Graph display to highlight molecular interaction data. NOTE: The selection radio button options will just work if the instance of your object is globlal. Example: "var instance; window.onload = function() {instance = new Biojs.InteractionsFilterGraph(...)};"
Version 1.0.0.

To get the above Biojs.InteractionsFilterGraph to work on your page, you need to do the following:

Include the file Biojs.InteractionsFilterGraph.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 href="../biojs/css/Biojs.InteractionsFilterGraph.css" rel="stylesheet" type="text/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.InteractionsFilterGraph into.

window.onload = function() {
var instance = new Biojs.InteractionsFilterGraph({
	 	target: "YourOwnDivId",
     instanceName: "instance",
     graphHeight: '350px',
     graphWidth: '100%',
     interactions: {
		 "i1": ["P1","P2"],
	 	 "i2": ["P3","P4"],
		 "i3": ["P5","P6"],
		 "i4": ["P2","P6"],
		 "i5": ["P2","P4"],
		 "i6": ["P6","P1"],
		 "i7": ["P2","P6"]
		},
	 	filters:{
	 		timeSeries: {
				title: "Time after Sendai viral infection (hours)",
				presentation: "radio",
				active: true,
				dataType: "edges",
				data: {
				 "2":["i2","i3","i4"],
				 "6":["i2","i5","i6","i7"],
				 "12":["i1","i2","i3","i4","i6","i7"]
			}
		}
	}
});

};

Required Parameters

target | {string}

Identifier of the DIV tag where the component should be displayed.
instanceName | {string}

Instance name of the object
interactions | {string}

Object with binary interactions including interactors
filters | {string}

Filtering options use to highlight interactions in the graph
graphHeight | {string}

[400] Graph height
graphWidth | {string}

[400] Graph width

Optional Parameters

highlightFilterOption

Highlight a filter option in the graph

Parameters:

{string} dataElement Optional
Data element of one filter option.
{string} filterName Optional
Filter name of one filter option.

Example 1:

instance.highlightFilterOption("6","timeSeries");

Example 2:

instance.highlightFilterOption("2","timeSeries");

unselect

Unselect all the interactions in the graph

Example :

instance.unselect();

Biojs.InteractionsFilterGraph showcase