29 |
30 |
31 |
32 |
217 |
218 |
219 |
220 |
221 |
--------------------------------------------------------------------------------
/README:
--------------------------------------------------------------------------------
1 | Lorikeet Reference
2 | =====================================
3 |
4 | Lorikeet is a JQuery plugin to render MS/MS spectra annotated with fragment ions.
5 | The spectrum is interactive with zoom capabilities, selection of fragment types,
6 | switching annotations on and off etc. The plugin can, optionally, also render a MS1
7 | spectrum below the MS/MS spectrum, with options to highlight the precursor peak
8 | for the MS/MS scan, as well as any other precursor peaks.
9 |
10 |
11 | Files required for the plugin to work:
12 | 1. specview.js -- this file has the plugin's rendering functions
13 | 2. aminoacid.js
14 | 3. ion.js
15 | 4. peptide.js
16 | 5. jquery.flot.js -- this is a modified version of the flot (http://code.google.com/p/flot/)
17 | plotting library for JQuery. It is base off of subversion revision 263.
18 | 6. jquery.flot.selection.js -- part of the flot package. This is also from revision 263.
19 |
20 |
21 | Other Dependencies:
22 | 1. JQuery core library (tested with version 3.5.1)
23 | 2. JQuery UI library (tested with version 1.13.0. Lorikeet uses only the slider widget)
24 |
25 | A NOTE ABOUT Internet Explorer
26 | ---------------------------------------
27 | The flot JQuery plugin makes use of the canvas element of HTML5. This element is not
28 | supported in the current versions of IE. It should be supported in IE9.
29 | For the viewer to work on IE the ExplorerCanvas script has to be included in the page.
30 | This script brings the canvas functionality to IE.
31 |
32 | <%-- Only load the excanvas.min.js if it is IE 8 or lower. IE 8 does not support HTML5 so this is a way to have HTML5 canvas support --%>
33 |
34 |
35 |
36 |
37 | Examples:
38 | ---------------------------------------
39 | Please see the following examples of using the Lorikeet plugin in a html page:
40 | 1. example_use.html -- MS/MS spectrum only
41 | 2. example_use2.html -- MS/MS and MS1 spectra
42 |
43 |
44 | Stylesheet:
45 | ---------------------------------------
46 | The stylesheet lorikeet.css contains the necessary styling for the Lorikeet plugin.
47 | jquery-ui-1.13.0.slider.min.css contains the JQuery UI Slider specific CSS
48 |
49 |
50 | Usage:
51 | ---------------------------------------
52 | The following fragment has to be included in the HTML file where the viewer should be
53 | displayed. The id of the div can be any id that is unique on the page.
54 |
55 |
56 | The following fragment has to be included in a script element on the page. This is
57 | typically included in the window.onload function. $("#lorikeet") is the JQuery way
58 | of referring to a DOM element with the id "lorikeet".
59 | $("#lorikeet").specview(options);
60 |
61 |
62 | API Documentation:
63 | ---------------------------------------
64 | Lorikeet has only a single method that renders the viewer!
65 |
66 | specview(options)
67 |
68 | options is a set of key/value pairs that configure and provide data to the viewer.
69 |
70 | Options:
71 | {
72 | "sequence": null,
73 | "staticMods": [],
74 | "variableMods": [],
75 | "ntermMod": 0, // additional mass to be added to the n-term
76 | "ctermMod": 0, // additional mass to be added to the c-term
77 | "peaks": [],
78 | "massError": 0.5,
79 | "scanNum": null,
80 | "fileName": null,
81 | "charge": null,
82 | "precursorMz": null,
83 | "ms1peaks": null,
84 | "ms1scanLabel": null,
85 | "precursorPeaks": null,
86 | "precursorPeakClickFn": null,
87 | "zoomMs1": false,
88 | "width": 750, // width of the ms/ms plot
89 | "height": 450, // height of the ms/ms plot
90 | "extraPeakSeries": [],
91 | "showIonTable": true,
92 | "showViewingOptions": true,
93 | "showOptionsTable": true,
94 | "showSequenceInfo": true,
95 | "labelImmoniumIons": true,
96 | "labelPrecursorPeak": true,
97 | "labelReporters": false,
98 | "showMassErrorPlot": false,
99 | "massErrorPlotDefaultUnit": 'Da'
100 | }
101 |
102 | The required options(key/value pairs) are:
103 | ------------------------------------------
104 | 1. sequence: the sequence of the peptide
105 | 2. peaks: an array of peaks in the MS/MS scan.
106 | Example: [ [602.17,209860.34], [691.67,33731.58],[871.42,236841.11],[888.50,1005389.56] ]
107 |
108 | Other options (not required):
109 | ----------------------------
110 | 1. charge: The charge of the precursor. This information is displayed at the top of the scan.
111 | 2. precursorMz: The m/z of the precursor. This information is displayed at the top of the scan.
112 | This value is required for labeling the precursor peak in the MS1 scan if
113 | it is rendered, and also marking the precursor peak in the MS/MS scan.
114 | 3. scanNum: The scan number of the MS/MS scan. This information is displayed at the top of the scan.
115 | 4. fileName: Name of the file that contains the MS/MS scan. This information is displayed at the top of the scan.
116 | 5. staticMods: An array of static modifications. Each modification is a set of key/value pairs.
117 | Example: [{"modMass":57.0,"aminoAcid":"C"}];
118 | 4. variableMods: An array of variable modifications. Each modification is a set of key/value pairs.
119 | Example: [ {index: 14, modMass: 16.0, aminoAcid: 'M'} ] // index is the index (1-based)
120 | // of the modification in the sequence.
121 | 5. ntermMod: additional mass to be added to the N-terminus.
122 | 6. ctermMod: additional mass to be added to the C-terminus.
123 | 7. massError: mass tolerance used for labeling peaks in the MS/MS scan.
124 | 8. ms1Peaks: peaks in the MS1 scan. Format is the same as the "peaks" option.
125 | 9. precursorPeaks: Any precursor peaks in the MS1 scan that will be highlighted.
126 | Same format is the same as the "peaks" option.
127 | 10. zoomMs1: If the value is "true" the MS1 scan, upon initialization, is zoomed around the peak
128 | that is the closest match to the "precursorMz" option. Default is "false".
129 | 11. ms1scanLabel: Label for the MS1 scan.
130 | 12. precursorPeakClickFn: This is the function that will be called when a precursor peak is clicked.
131 | 13. width: width of the MS/MS plot area. Default is 750.
132 | 14. height: height of the MS/MS plot area. Default is 450.
133 | 15. extraPeakSeries: An array of user defined peak series. Each series should be a set of key value pairs.
134 | Example: {data: [[10.0,2.0],[20.0,3.0]], color: "#00aa00",labelType: 'mz',labels: ['one','two']}
135 | "labelType" should not be used if custom labels are provided as value to the "labels" key.
136 | If "labelType" is 'mz', custom labels are ignored.
137 | 16. showIonTable: Show a table with theoretical fragment ion masses to the right of the annotated MS/MS scan.
138 | Default is true.
139 | 17. showViewingOptions: Show zooming and other options at the bottom of the MS/MS scan. Default is true.
140 | 18. showOptionsTable: Show a table with all the available options to the left of the annotated MS/MS scan.
141 | Default is true.
142 | 19. showSequenceInfo: Show sequence, m/z, filename, scan number, charge etc. at the top of the MS/MS scan.
143 | Default is true.
144 | 20. labelImmoniumIons: Label immonium ions in the MS/MS scan. Default is true.
145 | Example file: example_precursor_immonium.html
146 | 21. labelPrecursorPeaks: Label precursor ion if found in the MS/MS scan. Default is true.
147 | Example file: example_precursor_immonium.html
148 | 22. labelReporters: Label reporter ions such as iTRAQ and TMT. Default is false.
149 | Example file: example_itraq.html
150 | 23. showMassErrorPlot: Display a plot showing the mass errors for annoated peaks. Default is false.
151 | Example file: example_mass_error_plot.html
152 | 24. massErrorPlotDefaultUnit: Unit for mass error plot. Default is 'Da'. Set to 'ppm' to see mass error in
153 | parts per million.
154 | }
155 |
156 |
--------------------------------------------------------------------------------
/js/ion.js:
--------------------------------------------------------------------------------
1 | // $LastChangedDate$
2 | // $LastChangedBy$
3 | // $LastChangedRevision$
4 |
5 | function Ion (t, color, charge, terminus) {
6 | this.type = t;
7 | this.color = color;
8 | this.charge = charge;
9 | this.label = this.type;
10 | if(this.charge > 1)
11 | this.label += charge;
12 | this.label += "+";
13 | this.term = terminus;
14 | }
15 |
16 | // Source: http://en.wikipedia.org/wiki/Web_colors
17 |
18 | // charge +1
19 | Ion.A_1 = new Ion("a", "#008000", 1, "n"); // green
20 | Ion.B_1 = new Ion("b", "#0000ff", 1, "n"); // blue
21 | Ion.C_1 = new Ion("c", "#008B8B", 1, "n"); // dark cyan
22 | Ion.X_1 = new Ion("x", "#4B0082", 1, "c"); // indigo
23 | Ion.Y_1 = new Ion("y", "#ff0000", 1, "c"); // red
24 | Ion.Z_1 = new Ion("z", "#FF8C00", 1, "c"); // dark orange
25 |
26 | // charge +2
27 | Ion.A_2 = new Ion("a", "#2E8B57", 2, "n"); // sea green
28 | Ion.B_2 = new Ion("b", "#4169E1", 2, "n"); // royal blue
29 | Ion.C_2 = new Ion("c", "#20B2AA", 2, "n"); // light sea green
30 | Ion.X_2 = new Ion("x", "#800080", 2, "c"); // purple
31 | Ion.Y_2 = new Ion("y", "#FA8072", 2, "c"); // salmon
32 | Ion.Z_2 = new Ion("z", "#FFA500", 2, "c"); // orange
33 |
34 | // charge +3
35 | Ion.A_3 = new Ion("a", "#9ACD32", 3, "n"); // yellow green
36 | Ion.B_3 = new Ion("b", "#00BFFF", 3, "n"); // deep sky blue
37 | Ion.C_3 = new Ion("c", "#66CDAA", 3, "n"); // medium aquamarine
38 | Ion.X_3 = new Ion("x", "#9932CC", 3, "c"); // dark orchid
39 | Ion.Y_3 = new Ion("y", "#FFA07A", 3, "c"); // light salmon
40 | Ion.Z_3 = new Ion("z", "#FFD700", 3, "c"); // gold
41 |
42 | var _ions = [];
43 | _ions["a"] = [];
44 | _ions["a"][1] = Ion.A_1;
45 | _ions["a"][2] = Ion.A_2;
46 | _ions["a"][3] = Ion.A_3;
47 | _ions["b"] = [];
48 | _ions["b"][1] = Ion.B_1;
49 | _ions["b"][2] = Ion.B_2;
50 | _ions["b"][3] = Ion.B_3;
51 | _ions["c"] = [];
52 | _ions["c"][1] = Ion.C_1;
53 | _ions["c"][2] = Ion.C_2;
54 | _ions["c"][3] = Ion.C_3;
55 | _ions["x"] = [];
56 | _ions["x"][1] = Ion.X_1;
57 | _ions["x"][2] = Ion.X_2;
58 | _ions["x"][3] = Ion.X_3;
59 | _ions["y"] = [];
60 | _ions["y"][1] = Ion.Y_1;
61 | _ions["y"][2] = Ion.Y_2;
62 | _ions["y"][3] = Ion.Y_3;
63 | _ions["z"] = [];
64 | _ions["z"][1] = Ion.Z_1;
65 | _ions["z"][2] = Ion.Z_2;
66 | _ions["z"][3] = Ion.Z_3;
67 |
68 | Ion.get = function _getIon(type, charge) {
69 |
70 | return _ions[type][charge];
71 | }
72 |
73 | Ion.getSeriesColor = function _getSeriesColor(ion) {
74 |
75 | return _ions[ion.type][ion.charge].color;
76 | }
77 |
78 |
79 | //-----------------------------------------------------------------------------
80 | // Ion Series
81 | //-----------------------------------------------------------------------------
82 | var MASS_H_1 = 1.00782503207; // H(1) Source: http://en.wikipedia.org/wiki/Isotopes_of_hydrogen
83 | var MASS_C_12 = 12.0; // C(12) Source: http://en.wikipedia.org/wiki/Isotopes_of_carbon
84 | var MASS_C_13 = 13.0033548378; // C(13) Source: http://en.wikipedia.org/wiki/Isotopes_of_carbon
85 | var MASS_N_14 = 14.0030740048; // N(14) Source: http://en.wikipedia.org/wiki/Isotopes_of_nitrogen
86 | var MASS_N_15 = 15.0001088982; // N(15) Source: http://en.wikipedia.org/wiki/Isotopes_of_nitrogen
87 | var MASS_O_16 = 15.99491461956; // O(16) Source: http://en.wikipedia.org/wiki/Isotopes_of_oxygen
88 | var MASS_O_18 = 17.9991610; // O(18) Source: http://en.wikipedia.org/wiki/Isotopes_of_oxygen
89 | var MASS_P_31 = 30.97376163; // P(31) Source: http://en.wikipedia.org/wiki/Isotopes_of_phosphorus
90 |
91 | // average masses
92 | var MASS_H = 1.00794; // Source: http://www.unimod.org/masses.html
93 | var MASS_C = 12.0107; // Source: http://en.wikipedia.org/wiki/Isotopes_of_carbon
94 | var MASS_N = 14.0067; // Source: http://en.wikipedia.org/wiki/Isotopes_of_nitrogen
95 | var MASS_O = 15.9994; // Source: http://en.wikipedia.org/wiki/Isotopes_of_oxygen
96 | var MASS_P = 30.9738; // Source: http://en.wikipedia.org/wiki/Isotopes_of_phosphorus
97 |
98 | var MASS_PROTON = 1.007276;
99 |
100 | Ion.MASS_PROTON = MASS_PROTON;
101 | Ion.MASS_H = MASS_H;
102 | Ion.MASS_C = MASS_C;
103 | Ion.MASS_N = MASS_N;
104 | Ion.MASS_O = MASS_O;
105 | Ion.MASS_P = MASS_P;
106 |
107 | Ion.MASS_H_1 = MASS_H_1;
108 | Ion.MASS_C_12 = MASS_C_12;
109 | Ion.MASS_C_13 = MASS_C_13;
110 | Ion.MASS_N_14 = MASS_N_14;
111 | Ion.MASS_N_15 = MASS_N_15;
112 | Ion.MASS_O_16 = MASS_O_16;
113 | Ion.MASS_O_18 = MASS_O_18;
114 | Ion.MASS_P_31 = MASS_P_31;
115 |
116 | // massType can be "mono" or "avg"
117 | Ion.getSeriesIon = function _getSeriesIon(ion, peptide, idxInSeq, massType) {
118 | if(ion.type == "a")
119 | return new Ion_A (peptide, idxInSeq, ion.charge, massType);
120 | if(ion.type == "b")
121 | return new Ion_B (peptide, idxInSeq, ion.charge, massType);
122 | if(ion.type == "c")
123 | return new Ion_C (peptide, idxInSeq, ion.charge, massType);
124 | if(ion.type == "x")
125 | return new Ion_X (peptide, idxInSeq, ion.charge, massType);
126 | if(ion.type == "y")
127 | return new Ion_Y (peptide, idxInSeq, ion.charge, massType);
128 | if(ion.type == "z")
129 | return new Ion_Z (peptide, idxInSeq, ion.charge, massType);
130 | }
131 |
132 | function _makeIonLabel(type, index, charge) {
133 | var label = type+""+index;
134 | for(var i = 1; i <= charge; i+=1)
135 | label += "+";
136 | return label;
137 | }
138 |
139 | function _getMz(neutralMass, charge) {
140 | return ( neutralMass + (charge * MASS_PROTON) ) / charge;
141 | }
142 |
143 | Ion.AmmoniaLossMass_mono = MASS_H_1 * 3 + MASS_N_14;
144 | Ion.AmmoniaLossMass_avg = MASS_H * 3 + MASS_N;
145 |
146 | Ion.WaterLossMass_mono = MASS_H_1 * 2 + MASS_O_16;
147 | Ion.WaterLossMass_avg = MASS_H * 2 + MASS_O;
148 |
149 | Ion.PhosphoLossMass_mono = MASS_H_1 * 3 + MASS_P_31 + MASS_O_16 * 4;
150 | Ion.PhosphoLossMass_avg = MASS_H * 3 + MASS_P + MASS_O * 4;
151 |
152 | function _getIonMzWithLoss(sion, neutralLosses, massType) {
153 | var neutralMass = (sion.mz * sion.charge) - (sion.charge * MASS_PROTON);
154 | var lossMass = 0;
155 | if(neutralLosses)
156 | {
157 | if(massType == 'mono') lossMass += neutralLosses.getTotalLossMass('mono');
158 | else if(massType == 'avg') lossMass += neutralLosses.getTotalLossMass('avg');
159 | }
160 | return _getMz((neutralMass - lossMass), sion.charge);
161 | }
162 |
163 | Ion.getMz = _getMz;
164 | Ion.getIonMzWithLoss = _getIonMzWithLoss;
165 |
166 | function Ion_A (peptide, endIdxPlusOne, charge, massType) {
167 | // Neutral mass: [N]+[M]-CHO ; N = mass of neutral N terminal group
168 | var mass = 0;
169 | if(massType == "mono")
170 | mass = peptide.getSeqMassMono(endIdxPlusOne, "n") - (MASS_C_12 + MASS_O_16);
171 | else if(massType == "avg")
172 | mass = peptide.getSeqMassAvg(endIdxPlusOne, "n") - (MASS_C + MASS_O);
173 | this.charge = charge;
174 | this.mz = _getMz(mass, charge);
175 | this.fragmentIndex = endIdxPlusOne;
176 | this.label = _makeIonLabel("a",this.fragmentIndex, charge);
177 | this.match = false;
178 | this.term = "n";
179 | return this;
180 | }
181 |
182 | function Ion_B (peptide, endIdxPlusOne, charge, massType) {
183 | // Neutral mass: [N]+[M]-H ; N = mass of neutral N terminal group
184 | var mass = 0;
185 | if(massType == "mono")
186 | mass = peptide.getSeqMassMono(endIdxPlusOne, "n");
187 | else if(massType == "avg")
188 | mass = peptide.getSeqMassAvg(endIdxPlusOne, "n");
189 | this.charge = charge;
190 | this.mz = _getMz(mass, charge);
191 | this.fragmentIndex = endIdxPlusOne;
192 | this.label = _makeIonLabel("b", this.fragmentIndex, charge);
193 | this.match = false;
194 | this.term = "n";
195 | return this;
196 | }
197 |
198 | function Ion_C (peptide, endIdxPlusOne, charge, massType) {
199 | // Neutral mass: [N]+[M]+NH2 ; N = mass of neutral N terminal group
200 | var mass = 0;
201 | if(massType == "mono")
202 | mass = peptide.getSeqMassMono(endIdxPlusOne, "n") + MASS_H_1 + (MASS_N_14 + 2*MASS_H_1);
203 | else if(massType == "avg")
204 | mass = peptide.getSeqMassAvg(endIdxPlusOne, "n") + MASS_H + (MASS_N + 2*MASS_H);
205 | this.charge = charge;
206 | this.mz = _getMz(mass, charge);
207 | this.fragmentIndex = endIdxPlusOne;
208 | this.label = _makeIonLabel("c", this.fragmentIndex, charge);
209 | this.match = false;
210 | this.term = "n";
211 | return this;
212 | }
213 |
214 | function Ion_X (peptide, startIdx, charge, massType) {
215 | // Neutral mass = [C]+[M]+CO-H ; C = mass of neutral C-terminal group (OH)
216 | var mass = 0;
217 | if(massType == "mono")
218 | mass = peptide.getSeqMassMono(startIdx, "c") + 2*MASS_O_16 + MASS_C_12;
219 | else if(massType == "avg")
220 | mass = peptide.getSeqMassAvg(startIdx, "c") + 2*MASS_O + MASS_C;
221 | this.charge = charge;
222 | this.mz = _getMz(mass, charge);
223 | this.fragmentIndex = peptide.sequence().length - startIdx;
224 | this.label = _makeIonLabel("x", this.fragmentIndex, charge);
225 | this.match = false;
226 | this.term = "c";
227 | return this;
228 | }
229 |
230 | function Ion_Y (peptide, startIdx, charge, massType) {
231 | // Neutral mass = [C]+[M]+H ; C = mass of neutral C-terminal group (OH)
232 | var mass = 0;
233 | if(massType == "mono")
234 | mass = peptide.getSeqMassMono(startIdx, "c") + 2*MASS_H_1 + MASS_O_16;
235 | else if(massType == "avg")
236 | mass = peptide.getSeqMassAvg(startIdx, "c") + 2*MASS_H + MASS_O;
237 | this.charge = charge;
238 | this.mz = _getMz(mass, charge);
239 | this.fragmentIndex = peptide.sequence().length - startIdx;
240 | this.label = _makeIonLabel("y", this.fragmentIndex, charge);
241 | this.match = false;
242 | this.term = "c";
243 | return this;
244 | }
245 |
246 | function Ion_Z (peptide, startIdx, charge, massType) {
247 | // Neutral mass = [C]+[M]-NH2 ; C = mass of neutral C-terminal group (OH)
248 | // We're really printing Z-dot ions so we add an H to make it OH+[M]-NH2 +H = [M]+O-N
249 | var mass = 0;
250 | if(massType == "mono")
251 | mass = peptide.getSeqMassMono(startIdx, "c") + MASS_O_16 - MASS_N_14;
252 | else if(massType == "avg")
253 | mass = peptide.getSeqMassAvg(startIdx, "c") + MASS_O - MASS_N;
254 | this.charge = charge;
255 | this.mz = _getMz(mass, charge);
256 | this.fragmentIndex = peptide.sequence().length - startIdx;
257 | this.label = _makeIonLabel("z", this.fragmentIndex, charge);
258 | this.match = false;
259 | this.term = "c";
260 | return this;
261 | }
262 |
--------------------------------------------------------------------------------
/html/example_use_neutral_loss.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Lorikeet Spectrum Viewer
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
Lorikeet Plugin Example
27 |
28 |
29 | Lorikeet can display custom neutral losses and multiple neutral losses per amino acid.
30 |
31 | The default is to have one neutral loss per amino acid, but you can set it to a higher number with the
32 | following option:
33 |
34 |
35 | maxNeutralLossCount: 2
36 |
37 | Custom potential losses at a residue can be specified in the modification options, as the losses array.
38 |
39 |