Members
(constant) circlesPerRange
maximum number of peaks and envelopes points to be renderedon to graph per each bin(range)
- Source:
Methods
addBackGround(svg, spectrumParameters)
Function to add backGround color to the spectrum graph for MS1 spectrum at precursor mz
Parameters:
Name | Type | Description |
---|---|---|
svg |
Node | is a html node on which the graph is being ploted |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
- Source:
addCircles(svg, spectrumParameters, peakdata)
Function to add circles for the envelope data
Parameters:
Name | Type | Description |
---|---|---|
svg |
Node | is a html node on which the graph is being ploted |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
peakdata |
Array | Contians both peak list and envelopelist |
- Source:
addDatatoAxis(svg, spectrumParameters)
Function to add tick numbers on x and y axis
Parameters:
Name | Type | Description |
---|---|---|
svg |
Node | is a html node on which the graph is being ploted |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
- Source:
addErrorBlock(svg, spectrumParameters)
Draw Error plot
Parameters:
Name | Type | Description |
---|---|---|
svg |
Node | is a html node on which the graph is being ploted |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
- Source:
addErrorPlot(svg, spectrumParameters)
Add Error Plot to the MonoMass Spectrum
Parameters:
Name | Type | Description |
---|---|---|
svg |
Node | is a html node on which the graph is being ploted |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
- Source:
addLabels(svg, spectrumParameters)
Function to add labels on x and y axis
Parameters:
Name | Type | Description |
---|---|---|
svg |
Node | is a html node on which the graph is being ploted |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
- Source:
addSpectrum(id, peakList, envelopeList, monoMZ, ionData, graphFeatures)
Starting point of drawing spectrum graph
Parameters:
Name | Type | Description |
---|---|---|
id |
String | gets the svg id of the graph |
peakList |
Array | contains the list of data with mz and intensity used to draw lines on the graph |
envelopeList |
Array | contains the list of data with actual mass, mz and intensity used to draw circles on graph |
monoMZ |
float | Value to which tha graph as to point on click of mz value used to zoom the grpah to that location |
ionData |
Array | contains the list of data with mass and acid name |
graphFeatures |
object | contains all the features needed for drawing the graphs |
- Source:
compSpectrumParameters(peakList, envelopeList, monoMZ)
Function to set spectrum perameters based on the data
Parameters:
Name | Type | Description |
---|---|---|
peakList |
Array | contains the list of data with mz and intensity used to draw lines on the graph |
envelopeList |
Array | contains the list of data with actual mass, mz and intensity used to draw circles on graph |
monoMZ |
float | Value to which tha graph as to point on click of mz value used to zoom the grpah to that location |
- Source:
drag()
Function provides minMz and maxMz based on the amount of drag done
- Source:
drawAxis(svg, spectrumParameters)
Function to draw x-axis and y-axis
Parameters:
Name | Type | Description |
---|---|---|
svg |
Node | is a html node on which the graph is being ploted |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
- Source:
drawErrorPoints(svg, spectrumParameters)
Draw Error points on the error graph
Parameters:
Name | Type | Description |
---|---|---|
svg |
Node | is a html node on which the graph is being ploted |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
- Source:
drawErrorYticks(svg, spectrumParameters)
Draw Error plot y ticks
Parameters:
Name | Type | Description |
---|---|---|
svg |
Node | is a html node on which the graph is being ploted |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
- Source:
drawIons(svg, spectrumParameters, ionData)
Function to add IONS at the top of the peaks for each cluster of envelopes
Parameters:
Name | Type | Description |
---|---|---|
svg |
Node | is a html node on which the graph is being ploted |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
ionData |
Array | Contians Ion list to display on the graph |
- Source:
drawPeaks(svg, spectrumParameters, peakdata)
Function to draw peak lines on the graph
Parameters:
Name | Type | Description |
---|---|---|
svg |
Node | is a html node on which the graph is being ploted |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
peakdata |
Array | Contians both peak list and envelopelist |
- Source:
drawSequence(svg, spectrumParameters)
Draw Sequence on spectrum graph
Parameters:
Name | Type | Description |
---|---|---|
svg |
Node | is a html node on which the graph is being ploted |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
- Source:
drawSpectrum(svgId, spectrumParameters, peakData, ionData)
Function gets invokes whenever zoom or drag is invoked and redraws the graph whenever there is zoom or draw
This function invokes all the functions that draw the graph
Parameters:
Name | Type | Description |
---|---|---|
svgId |
string | Contains the Id from html on which the graph should be drawn |
spectrumParameters |
object | Contains the parameters to help draw the graph |
peakData |
list | Contains the data of Peaks and Envelopes to draws lines and circles on the graph |
ionData |
list | Contains Ions to draw upon the peaks |
- Source:
drawTicks(spectrumParameters)
Function that draws ticks on x-axis and y-axis
Parameters:
Name | Type | Description |
---|---|---|
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
- Source:
getCircleSize()
Function provides the radius of the circles drawn on the graph as zoomed in and out
- Source:
getErrorYPos()
Function provides the y coordinate for the error val on the error plot
- Source:
getPeakXPos()
Function provides the x coordinate for the mass
- Source:
getPeakYPos()
Function provides the y coordinate for the intensity
- Source:
getTickHeight()
Function Provides height between each tick when zoomed in and out or dragged
- Source:
getTickWidth()
Function Provides width between each tick when zoomed in and out or dragged
- Source:
groupBy(listData, keyValue)
Function returns a map list with key and value
Parameters:
Name | Type | Description |
---|---|---|
listData |
list | contains list of data |
keyValue |
string | contains keyword based on which new group is created |
- Source:
initScale()
Initializing the spectrum Parameters with the data from the peak list and envilopelist.
initializing xScale, yScale.
- Source:
onCircleMouseOut()
Function to reset to the original on mouse out of peaks
- Source:
onDragLimits()
When dragged function provides the bin ranges to divide the complete x axis into 5 bins.
This helps setting the number of peaks and circles to a limited number in each bin.
This speeds up the zoom and drag functionality.
- Source:
onMouseOut()
Function to remove the tooltips on mouseout
- Source:
onMouseOverCircle(this_element, envelope_list, spectrumParameters)
Function to show the data of Mass and Intensity on mouse over of circles
Parameters:
Name | Type | Description |
---|---|---|
this_element |
Node | is a html node. On mouse over generates tooltip based on the current peak |
envelope_list |
Array | Contains Envelope List |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
- Source:
onMouseOverPeak(this_element, spectrumParameters)
Function to show the data of Mass and Intensity on mouse over of peaks
Parameters:
Name | Type | Description |
---|---|---|
this_element |
Node | is a html node. On mouse over generates tooltip based on the current peak |
|
Object | Contains mz and intensity value of the current peak |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
- Source:
onPeakMouseOut(this_element)
Function to reset to the original on mouse out of peaks
Parameters:
Name | Type | Description |
---|---|---|
this_element |
Node | is a html node. On mouse over generates tooltip based on the current peak |
- Source:
setLimits()
when zoomed function provides the bin ranges to divide the complete x axis into 5 bins.
This helps setting the number of peaks and circles to a limited number in each bin.
This speeds up the zoom and drag functionality.
- Source:
sortEnvelopes(envelopeList)
Sorting envelopes based on intensity to show top 200 envelops with high intensitites
Parameters:
Name | Type | Description |
---|---|---|
envelopeList |
Array | contains the list of data with actual mass, mz and intensity used to draw circles on graph |
- Source:
SpectrumGraph(svgId, spectrumParameters, peakData, ionData)
Function draws the graph, binds zoom and drag function to the graph
Parameters:
Name | Type | Description |
---|---|---|
svgId |
String | SVG id on which the graph needed to be drawn |
spectrumParameters |
object | Contains the parameters like height, width etc.,. tht helps to draw the graph |
peakData |
Array | contains peakList and envelope list |
ionData |
Array | Contains data with mass and ACID name to plot on the graph |
- Source:
SpectrumParameters()
Get data from global variable spectrum_data and utilities to manupulate
the data
- Source:
xZoom()
Function provides with current xScale, current minMz and MaxMz based on the zoom on x-axis.
Function also calls setLimita which helps in drawing limited number of peaks and circles per eachbin/range of mz values.
- Source:
yZoom()
Function provides with current yScale, current max Intensity based on the zoom on y-axis
- Source:
zoom()
Function to invoke respective zoom functionality(zoom on x or y) based on position of X, Y
It fixes amount of zoom based on zooming in or out
- Source: