-
Notifications
You must be signed in to change notification settings - Fork 9
IPSA Directive
The spectrum renderer used in IPSA has been configured to be used as an AngularJS directive. Angular directives, read more here, allows a developer to extend Angular JavaScript functionality into HTML tags. In other words, you can integrate IPSA's interactive spectrum renderer into a custom website with a few easy steps.
To see an bare-bones example of how to use IPSA as an angular directive, please refer to the 'custom website' directory found on this repository.
First, the following files need to be included in your web page.
-
Javascript files
IPSA.jsSpectrum RendererAngular.jsAngular v1.6.5lodash.jsArray Manipulationd3.vs.min.jsD3 version 3 codebased3-ease.v1.min.jsD3 transitionsd3-tip.jsTooltip behavior -
CSS files
PeptideAnnotator.cssIPSA's custom stylingInconsolata.cssStyle sheet for Inconsolata fontOpen+Sans.cssStyle sheet for Open Sans fontMontserrat.cssStyle sheet for Montserrat font -
Optional Dependencies
These two files aren't required, but allow you to easily resize IPSA using Bootstrap's grid-based templating. IPSA will automatically size itself to fill the container it's inside. We used Bootstrap in the custom website example shown below.
Bootstrap.jsv2.5.0, grid-based templating for HTMLBootstrap.cssBootstrap styling
If you're unfamiliar with Angular syntax, I'd first suggest you check out some introductory material here.
Once the above mentioned files are included in your web page, the spectrum renderer can be included by adding the following HTML tag:
<div annotated-spectrum plotdata="myData.plotData" peptide="myData.peptide" settings="myData.settings" class="content"></div>annotated-spectrum is the name of the directive.
plotdata is an attribute which passes the Javascript object myData.plotData to the directive.
peptide is an attribute which passes the Javascript object myData.peptide to the directive.
settings is an attribute which passes the Javascript object myData.settings to the directive.
- My_Custom_Webpage.html
<html ng-app="myApp">
<head>
<!-- Javascript Dependencies -->
<script src="js/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script src="js/lodash.min.js" charset="utf-8"></script>
<script src="js/d3.v3.min.js" charset="utf-8"></script>
<script src="js/d3-ease.v1.min.js"></script>
<script src="js/IPSA.js"></script>
<script src="js/d3-tip.js"></script>
<!-- CSS Dependencies -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/Montserrat.css" rel="stylesheet">
<link href="css/Open+Sans.css" rel="stylesheet">
<link href="css/Inconsolata.css" rel="stylesheet">
<link href="css/PeptideAnnotator.css" rel="stylesheet">
<!-- Your custom Javascript code, which provides the spectrum renderer with the spectral data and annotations -->
<script src="js/MyCustomJavascript.js"></script>
</head>
<body>
<div ng-controller="plotCtrl">
<div class="col-md-6">
<div annotated-spectrum plotdata="myData.plotData" peptide="myData.peptide" settings="myData.settings" class="content"></div>
<button ng-click="randomize()">Click me to randomize data</button>
</div>
</div>
</body>
</html>- MyCustomJavascript.js
// This javascript file populates IPSA's rendered spectrum with randomly generated data.
// link IPSA to this custom javascript file
angular.module("IPSA.directive");
var myApp = angular.module('myApp', ["IPSA.directive"]);
/* master controller to carry similar functionality to $rootScope */
myApp.controller('plotCtrl', function($scope, $log, $http) {
// $scope.myData is a JavaScript object which will pass all required data over to IPSA to parse.
// create a function to fill in modifications
var populateMods = function(pepSequence) {
var returnArray = [];
for (var i = 0; i < pepSequence.length + 2; i++) {
returnArray.push({
site: i - 1,
deltaElement: 0,
deltaMass: 0
});
}
return returnArray;
}
$scope.myData = {
// $scope.myData.plotData contains arrays which correspond to your spectral data and annotations
plotData:
{
x: [ ], // (float) spectral peak m/z values
y: [ ], // (float) spectral peak intensities (absolute, relative, ect.)
color: [ ], // (string) spectral peak colors in HEX format
label: [ ], // (string) text to include over an annotated spectral peak
labelCharge: [ ], // (int) the charge states of annotated fragments
neutralLosses: [ ], // (string) neutral losses of an annotated spectral peak (if applicable)
barwidth: [ ], // (int) width of rendered spectral peaks (1 is suggested)
massError: [ ], // (string) mass error of annotated spectral peak.
theoMz: [ ], // (float) theoreatical m/z of an annotated spectral peak.
percentBasePeak: [ ], // (float) relative intensity of a spectral peak.
TIC: 0 // (float) total ion current for this spectrum.
},
// $scope.myData.peptide contains data pertaining to your peptide sequence, precursor mz, precurosor charge
peptide:
{
sequence: "TESTPEPTIDE", // (string) peptide sequence
precursorMz: 609.77229, // (float) precursor mz
precursorCharge: 2, // (int) precursor charge
mods: populateMods("TESTPEPTIDE") // (string) modifications for each amino acid
},
// $scope.myData.settings contains values which handles several annotation settings
settings:
{
toleranceThreshold: 0, // (float) maximum allowed mass error
toleranceType: "", // (string) "ppm" or "Da"
ionizationMode: "" // (string) "+" or "-"
}
};
// generate random spectral data for the spectrum render. 150 peaks. m/zs from 0 -> 2000. relative intensities from 0 -> 100
$scope.randomize = function() {
$scope.myData.plotData.x = [ ];
$scope.myData.plotData.y = [ ];
$scope.myData.plotData.color = [ ];
$scope.myData.plotData.label = [ ];
$scope.myData.plotData.labelCharge = [ ];
$scope.myData.plotData.neutralLosses = [ ];
$scope.myData.plotData.barwidth = [ ];
$scope.myData.plotData.massError = [ ];
$scope.myData.plotData.theoMz = [ ];
$scope.myData.plotData.percentBasePeak = [ ];
$scope.myData.plotData.TIC = 0;
$log.log("randomizing");
_.times(150, function(n) {
var x = _.random(0, 2000);
var y = _.random(0, 100);
if (y < 1) {
y = 1;
}
$scope.myData.plotData.TIC += y;
$scope.myData.plotData.y.push(y);
$scope.myData.plotData.x.push(x);
$scope.myData.plotData.color.push("#A6A6A6");
$scope.myData.plotData.label.push("");
$scope.myData.plotData.labelCharge.push(0);
$scope.myData.plotData.neutralLosses.push("");
$scope.myData.plotData.barwidth.push(1);
$scope.myData.plotData.massError.push("");
$scope.myData.plotData.theoMz.push(0);
$scope.myData.plotData.percentBasePeak.push(100 * y/d3.max($scope.myData.plotData.y));
});
$scope.myData.plotData.x.sort(function(a, b){return a - b});
$scope.myData.settings.toleranceType = "ppm";
$scope.myData.settings.toleranceThreshold = 10;
$scope.myData.settings.ionizationMode = "+";
$log.log($scope.myData);
};
});