Global

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: