The outage for Sunday 24th November has been cancelled.

Global

Methods

ACRM_alert(title, msg)

General purpose alert() dialogue using JQueryUI dialog rather than the simple JavaScript alert() method
Parameters:
Name Type Description
title string title for the confirm box
msg string the message to be displayed
Author:
  • - 15.06.14 Original By: ACRM
Source:

ACRM_array(length) → {array}

General purpose function to create a multi-dimensional array
Parameters:
Name Type Description
length int/int[] Size of each dimension
Author:
  • - 29.05.14 Taken from http://stackoverflow.com/questions/966225/ how-can-i-create-a-two-dimensional-array-in-javascript
Source:
Returns:
(multi-dimensional) Array Usage: ACRM_array(); // [] or new Array() ACRM_array(2); // new Array(2) ACRM_array(3, 2); // [new Array(2), // new Array(2), // new Array(2)]
Type
array

ACRM_confirm(title, msg, callback)

General purpose confirm() dialogue using JQueryUI dialog rather than the simple JavaScript confirm() method
Parameters:
Name Type Description
title string title for the confirm box
msg string the message to be displayed
callback function function to be called after the OK or cancel button is called. A boolean parameter is passed to the function - true for OK, false for cancel
Author:
  • - 15.06.14 Original By: ACRM
Source:

ACRM_deleteItemByLabel(key, value, array)

General purpose routine to delete an object from an array of objects where the object contains the specified key:value pair.
Parameters:
Name Type Description
key string The key (item in an object or hash key) to check
value string The value to check
array object[] The array of objects to manipulate
Author:
  • - 12.06.14 Original By: ACRM
Source:

ACRM_dialog(title, msg, width, pre)

General purpose dialogue using JQueryUI dialog
Parameters:
Name Type Description
title string title for the confirm box
msg string the message to be displayed
width string the width of the window (e.g. '600px')
pre bool wrap the displayed text in
 tags
Author:
  • - 17.06.14 Original By: ACRM
Source:

JSAV_autoLabels(sequences) → {string[]}

Create an array of labels
Parameters:
Name Type Description
sequences object[] Array of sequence objects
Author:
  • - 22.12.15 Original By: ACRM
Source:
Returns:
- Array of labels
Type
string[]

JSAV_buildASequenceHTML(id, sequence, prevSequence, selectable, dotify, nocolour, isConsensus, colourScheme, idSubmit, idSubmitClean) → {string}

Builds the HTML for printing a sequence as a table row. The row starts with the identifier and is followed by each amino acid in a separate tag with a class to indicate the amino acid type (e.g. taylorW for a tryptophan in Willie Taylor scheme).
Parameters:
Name Type Description
id string The identifier
sequence string A string containing the sequence
prevSequence string A string containing the previous sequence
selectable bool Display a selection checkbox
dotify bool Dotify the sequence
nocolour bool Don't colour dotified residues
isConsensus bool This is the consensus sequence
colourScheme string Name of colour scheme - maps to CSS - see JSAV_initColourChoices()
idSubmit string URL to visit when sequence label clicked
idSubmitClean bool Remove non-alpha characters from sequence before submitting it
Author:
  • - 30.05.14 Original By: ACRM - 16.06.14 Added dotify and nocolour - now takes prevSequence parameter - 17.06.14 Added isConsensus and colourScheme - 18.06.14 Added tooltip - 23.09.15 Added idSubmit/idSubmitClean - 11.02.16 Added idSubmitAttribute, now takes a sequence object rather than the sequence and the id
Source:
Returns:
text HTML snippet
Type
string

JSAV_buildConsensus(sequences) → {string}

Calculates a consensus sequence
Parameters:
Name Type Description
sequences object[] Array of sequence objects
Author:
  • - 17.06.14 Original By: ACRM
Source:
Returns:
- Consensus sequence
Type
string

JSAV_buildFASTA(divId) → {string}

Builds a FASTA version of the sequences that are currently selected, or all sequences if none are selected
Parameters:
Name Type Description
divId string The ID of the div we are printing in
Author:
  • - 17.06.14 Split out from JSAV_submitSequences() By: ACRM
Source:
Returns:
- FASTA sequence
Type
string

JSAV_buildHighlightHTML(divId, seqLen, selectable, highlight) → {string}

Builds HTML for table rows that highlight a region in the alignment as being important (e.g. CDRs of antibodies). Note that ranges for highlighting count from zero.
Parameters:
Name Type Description
divId string The div we are working in
seqLen int The length of the alignment
selectable bool Are there sequences selection boxes
highlight int[] Array of residue ranges to highlight
Author:
  • - 13.06.14 Original By: ACRM
Source:
Returns:
- HTML
Type
string

JSAV_buildLabelsHTML(divId, seqLen, selectable, labels) → {string}

Create the HTML for a label row in the sequence display
Parameters:
Name Type Description
divId string The div we are working in
seqLen int The length of the alignment
selectable bool Are there sequences selection boxes
labels string[] Array of labels
Author:
  • - 22.12.15 Original By: ACRM
Source:
Returns:
- HTML
Type
string

JSAV_buildMarkerHTML(divId, seqLen, selectable) → {string}

Creates the HTML to display the marker row that indicates the selected residues to be used for sorting
Parameters:
Name Type Description
divId string Identifier of display div
seqLen int Length of sequences alignement
selectable int Do we have select boxes?
Author:
  • - 06.06.14 Original By: ACRM - 10.06.14 Added 'selectable' - 23.09.15 Added   into 'Sort Region' to stop it breaking the line
Source:
Returns:
- HTML
Type
string

JSAV_buildSelectAllHTML(divId, seqLen) → {string}

Build the HTML for creating a row in the table that contains a checkbox for selecting/deselecting all sequences
Parameters:
Name Type Description
divId string ID of the div we are working in
seqLen int sequence length
Author:
  • - 09.06.14 Original By: ACRM - 18.06.14 Added tooltip
Source:
Returns:
- HTML
Type
string

JSAV_buildSequencesHTML(divId, sequences, sortable, selectable, highlight, dotify, nocolour, consensus, labels) → {string}

Takes an array of sequence objects and builds the HTML to display them as a coloured table
Parameters:
Name Type Description
divId string ID of div in which to print
sequences object[] Array of sequence objects
sortable bool Should the marker line be displayed for sortable displays
selectable bool Should check marks be displayed
highlight int[] Ranges to be highlighted
dotify bool Dotify the sequence alignment
nocolour bool Don't colour dotified residues
consensus bool Display the consensus sequence
labels array Labels to display over sequence
Author:
  • - 30.05.14 Original By: ACRM - 06.06.14 Added call to build the marker row of selected residues - 10.06.14 Added sortable and selectable parameters - 13.06.14 Added highlight - 16.06.14 Added dotify - 17.06.14 Added consensus - 22.12.15 Added labels
Source:
Returns:
HTML
Type
string

JSAV_calcDifference(seq1, seq2, regionStart, regionStop, ignoreEnds) → {int}

Takes two sequences as strings and calculates the number of differences between them (effectively the Hamming distance). If ignoreEnds is specified then don't include gap characters at the ends of the sequences
Parameters:
Name Type Description
seq1 string Sequence string
seq2 string Sequence string
regionStart int Offset of start of region to sort
regionStop int Offset of end of region to sort
ignoreEnds BOOL Ignore gaps at the end of the sequences in calculating differences
Author:
  • - 29.05.14 Original By: ACRM - 04.06.14 Added ignoreEnds handling Created this Range version
Source:
Returns:
Number of differences between the sequences
Type
int

JSAV_calcDifferenceMatrix(sequences, start, stop, ignoreEnds) → {int-2DArray}

Takes an array of sequence objects and generates a 2D difference matrix. This contains the number of differences between each pair of sequences
Parameters:
Name Type Description
sequences object[] Array of sequence objects
start int Offset of start of region to sort
stop int Offset of end of region to sort
ignoreEnds BOOL Ignore insert characters at ends of sequences
Author:
  • - 29.05.14 Original By: ACRM - 04.06.14 Added ignoreEnds handling Range version
Source:
Returns:
Differences between each pair of sequences
Type
int-2DArray

JSAV_chooseRepresentative(differenceMatrix) → {int}

Choose a representative from a difference matrix. The difference matrix contains the number of differences between each pair of sequences. This routine simply totals up the number of differences for each sequence compared with all the other sequences and then chooses the one with fewest differences
Parameters:
Name Type Description
differenceMatrix int-2DArray Differences between each pair of sequences
Author:
  • - 29.05.14 Original By: ACRM
Source:
Returns:
- Index of the representative sequence
Type
int

JSAV_deleteSelectedSequences(divId)

Deletes a set of sequences that have been clicked
Parameters:
Name Type Description
divId string The ID of the div to work in
Author:
  • - 12.06.14 Original By: ACRM - 15.06.14 Changed from alert() to ACRM_alert() - 16.06.14 Changed from confirm() to ACRM_confirm() - 17.06.14 Added consensus - 22.12.15 Added passing of labels
Source:

JSAV_exportFASTA(divId)

Exports the selected sequences as FASTA
Parameters:
Name Type Description
divId string The ID of the div we are printing in
Author:
  • - 17.06.14 Original By: ACRM
Source:

JSAV_findClosestSequences(sequenceIndexes, refSeq, differenceMatrix) → {int[]}

Takes an array of sequence indexes, the index of a reference sequence and the difference matrix between all sequences. It then returns an array of sequence indexes for all the sequences most similar to the reference sequence
Parameters:
Name Type Description
sequenceIndexes int[] Indexes of a set of sequences to search
refSeq int Index of the sequence to compare with
differenceMatrix int-2DArray differences between sequences
Author:
  • - 04.06.14 Original By: ACRM
Source:
Returns:
Indexes of the sequences closest to the reference sequence
Type
int[]

JSAV_FindRealSequenceEnds(seqArray) → {int[]}

Finds the real ends of a sequence stored in an array by skipping over '-' characters. Returns the offsets of the actual ends. NOTE: Consequently to loop over the sequence you now need to do for(var i=seqEnds[0]; i<=seqEnds[1]; i++) i.e. <= rather than < the last position
Parameters:
Name Type Description
seqArray char[] Sequence stored in an array
Author:
  • - 04.06.14 Original By: ACRM
Source:
Returns:
Offsets of first and last real amino acid
Type
int[]

JSAV_getRange(divId) → {int[]}

Simple wrapper function to obtain the currently selected range
Parameters:
Name Type Description
divId string Identifier for display div
Author:
  • - 06.06.14 Original By: ACRM
Source:
Returns:
Start and stop of range
Type
int[]

JSAV_init()

Initializes global arrays
Author:
  • - 09.06.14 Original By: ACRM - 12.06.14 Added more arrays - 17.06.14 Added gConsensus array
Source:

JSAV_initColourChoices() → {string[]}

Simply returns an array of the available colouring schemes in the CSS file
Author:
  • - 17.06.14 Original By: ACRM
Source:
Returns:
- Colour schemes
Type
string[]

JSAV_markRange(divId, seqLen, start, stop)

Marks a range of residues in the main sequence display table. The special marker row is used for this and we simply alter the class to pick up the appropriate colour for the cells from CSS
Parameters:
Name Type Description
divId string Identifier for the display div
seqLen int Length of the alignment
start int Offset of first residue to be marked (0-based)
stop int Offset of last residue to be marked (0-based)
Author:
  • - 06.06.14 Original By: ACRM - 13.06.14 Changed from highlighted to marked
Source:

JSAV_modifyCSS(divId)

Change the elements to have a white border
Parameters:
Name Type Description
divId string The ID of the div to work in
Author:
  • - 12.06.14 Original By: ACRM
Source:

JSAV_printAction(divId, action, label)

Prints the action button
Parameters:
Name Type Description
divId string The ID of the div to print in
action string Function to call
label string Label for action button
Author:
  • - 13.06.14 Original By: ACRM - 18.06.14 Added tooltip
Source:

JSAV_printColourSelector(divId, options)

Prints a pulldown menu to select a colour scheme
Parameters:
Name Type Description
divId string The ID of the div we are printing in
options object User options
Author:
  • - 17.06.14 Original By: ACRM - 18.06.14 Added tooltip - 02.09.14 Modifies the DOM rather than writing to document By: JHN
Source:

JSAV_printDelete(divId, label)

Prints the delete button
Parameters:
Name Type Description
divId string The ID of the div to print in
label string The label to print in the delete button
Author:
  • - 12.06.14 Original By: ACRM - 18.06.14 Added tooltip - 02.09.14 Modifies the DOM rather than printing to the document By: JHN - 23.09.15 Added label parameter and use of this label By: ACRM
Source:

JSAV_printFASTA(divId)

Prints the button to allow FASTA export
Parameters:
Name Type Description
divId string The ID of the div we are printing in
Author:
  • - 17.06.14 Original By: ACRM - 18.06.14 Added tooltip - 02.09.14 Modifies the DOM rather than printing to the document By: JHN
Source:

JSAV_printSlider(divId, seqLen, width, height)

Builds and prints the slider for selecting a maximum and minimum position for sorting. Also calls routine to display the currently selected range - i.e. the whole sequence length
Parameters:
Name Type Description
divId string The name of the div used for the display
seqLen int The length of the sequence alignment
width string The width of the slider
height string The height of the slider (text size)
Author:
  • - 06.06.14 Original By: ACRM - 10.06.14 Removed redundant variable and changed divs to spans - 15.06.14 Added height
Source:

JSAV_printSubmit(divId, url, label)

Prints the submit button
Parameters:
Name Type Description
divId string The ID of the div to print in
url string URL to which we are submitting
label string Label for submit button
Author:
  • - 12.06.14 Original By: ACRM - 18.06.14 Added tooltip - 02.09.14 Modifies the DOM rather than printing to the document By: JHN
Source:

JSAV_printToggleDotify(divId, options)

Print a checkbox for toggling dotify mode
Parameters:
Name Type Description
divId string The div that we are working in
options object The options
Author:
  • - 16.06.14 Original By: ACRM - 18.06.14 Added tooltip - 02.09.14 Modifies the DOM rather than printing to the document By: JHN - 23.09.15 Dotify label now comes from options By: ACRM
Source:

JSAV_printToggleNocolour(divId, options)

Print a checkbox for toggling nocolour-dotify mode
Parameters:
Name Type Description
divId string The div that we are working in
options object The options
Author:
  • - 16.06.14 Original By: ACRM - 18.06.14 Added tooltip - 02.09.14 Modifies the DOM rather than printing to the document By: JHN - 23.09.15 Obtains label from options.toggleNocolourLabel By: ACRM
Source:

JSAV_refresh(divId, sequences, sortable, selectable, border, start, stop, highlight, dotify, nocolour, consensus, labels)

Refreshes the content of the divId_sortable div with the new sequence table Also updates the marked range and the CSS if the border option is set
Parameters:
Name Type Description
divId char ID of an HTML
sequences object[] Array of sequence objects
sortable bool Is the display sortable
selectable bool Are checkboxes shown next to sequences
border bool Should CSS be updated to show a border
start int start of selected region
stop int end of selected region
highlight int[] regions to be highlighted
dotify bool Dotify the sequence
nocolour bool Don't colour dotified residues
consensus bool Should we display a consensus sequence
labels string[] Array of labels (or undefined)
Author:
  • - 12.06.14 Original split out from JSAV_sortAndRefreshSequences() By: ACRM - 16.06.14 Added dotify and nocolour - 17.06.14 Added consensus - 19.06.14 Added callback - 22.12.15 Added labels
Source:

JSAV_refreshSettings(divId)

Updates the buttons to match the settings. This is called when the window is reloaded
Parameters:
Name Type Description
divId string The ID of the div we are printing in
Author:
  • - 17.06.14 Original By: ACRM
Source:

JSAV_selectAll(divId)

Select all sequence selection buttons
Parameters:
Name Type Description
divId string The ID of the div to work in
Author:
  • - 09.06.14 Original By: ACRM
Source:

JSAV_selectAllOrNone(divId)

Toggle selection of all sequence selection buttons
Parameters:
Name Type Description
divId string The ID of the div to work in
Author:
  • - 09.06.14 Original By: ACRM
Source:

JSAV_setColourScheme(divId, select)

Called when the colour scheme selector is changed. Sets the selected colour scheme and refreshes the display
Parameters:
Name Type Description
divId string The ID of the div we are working in
select object The select pull-down
Author:
  • - 17.06.14 Original By: ACRM - 22.12.15 Added passing of labels
Source:

JSAV_showRange(eventOrId, ui, eventOrId, ui)

Displays the currently selected range as text and calls the routine to higlight that range in the alignment view. Called as JSAV_showRange(divID), or as a callback from a slider event
Parameters:
Name Type Description
eventOrId JQEvent JQuery Event
ui JQ-UI JQuery UI object --OR--
eventOrId text Identifier of the display div
ui null Must be set to null
Author:
  • - 06.06.14 Original By: ACRM - 10.06.14 Removed redundant .closest() from finding parent - 23.09.15 Changed "Sort from: xx to: xx" to "Region: positions xx to yy" - 24.09.15 Changed to using .html() instead of .text()
Source:

JSAV_sortAndRefreshSequences(divId, sortable, selectable, border) → {bool}

Sorts a set of sequences and refreshes the display in a div with the specified ID - the idea is that the unsorted sequences would be displayed here and then this is tied to the action on a button that sorts and refreshes the display.
Parameters:
Name Type Description
divId char ID of an HTML
sortable bool Is the display sortable
selectable bool Are checkboxes shown next to sequences
border bool Should CSS be updated to show a border
Author:
  • - 29.05.14 Original By: ACRM - 11.06.14 sequences is now global - 12.06.14 split out the JSAV_refresh() part - 16.06.14 Added dotify and nocolour options to refresh call - 17.06.14 Added consensus - 22.12.15 Added passing of labels
Source:
Returns:
FALSE - (not sure why!)
Type
bool

JSAV_sortSequences(sequences, start, stop) → {object[]}

Sorts an array of sequence objects to group similar sequences together. The sorting method chooses a representative sequence (one which is most similar to all the other sequences) placing that first in the list. To add to the sorted list, it iteratively chooses the sequences that are most similar to the last one in the list and, of those chooses the sequence most similar to the representative sequence
Parameters:
Name Type Description
sequences object[] Array of sequence objects
start int Offset of start of region to sort
stop int Offset of end of region to sort
Author:
  • - 29.05.14 Original By: ACRM - 04.06.14 Added ignoreEnds (true) to JSAV_calcDifferenceMatrix() call Range version
Source:
Returns:
Sorted array of sequence objects
Type
object[]

JSAV_submitSequences(divId)

Handles the user clicking the submit button. Build a FASTA version of the sequences that have been selected, fills them into a textarea in a form and then submits the form.
Parameters:
Name Type Description
divId string The ID of the div we are working in
Author:
  • - 13.06.14 Original By: ACRM - 17.06.14 Split out the JSAV_buildFASTA() section
Source:

JSAV_toggleOption(divId, theButton, theOption)

Read a checkbox and toggle the associated option, refreshing the display
Parameters:
Name Type Description
divId string The div that we are working in
theButton string The ID of the checkbox we are looking at
theOption string The name of the option we are toggling
Author:
  • - 16.06.14 Original By: ACRM - 17.06.14 Added consensus - 22.12.15 Added labels
Source:

JSAV_unselectAll(divId)

Unselect all sequence selection buttons
Parameters:
Name Type Description
divId string The ID of the div to work in
Author:
  • - 09.06.14 Original By: ACRM
Source:

JSAV_wrapAction(divId, action)

Wrap the action function. When the action button is clicked, this function is called to extract the relevant sequence data and call the user specified function, passing the divId and an array of sequence objects
Parameters:
Name Type Description
divId string The ID of the div to work in
action string The name of the user function
Author:
  • - 13.06.14 Original By: ACRM - 11.02.16 Modified the push so that it pushes the whole object rather than just the selected fields. This allows additional information fields to be passed around associated with a sequence but not displayed
Source:

printJSAV(sequences, divId, options)

This is the only routine called by a user. It takes an array of sequence objects and displays them as a coloured sortable table optionally with a slider and sort button, delete button, etc
Parameters:
Name Type Description
sequences object[] Array of sequence objects
divId string ID of div to print in
options Object Options that can be provided - see Properties
Properties:
Name Type Description
options.sortable bool Should the sorting options be displayed (default: false)
options.width string The width of the selection slider with units (default: '400px')
options.height string The height of the selection slider with units (default: '6pt')
options.selectable bool Should selection checkboxes be displayed for each sequence
options.deletable bool Makes it possible to delete sequences
options.deleteLabel string Label for delete button
options.highlight int[] Array of ranges to highlight
options.submit string URL for submitting selected sequences
options.submitLabel string Label for submit button
options.idSubmit string URL for submitting a single sequence where its id/label has been clicked. See also options.idSubmitAttribute
options.idSubmitClean bool Remove non-alpha characters from sequence before submitting
options.idSubmitAttribute string Specifies which attribute of the sequence object should be passed to a URL specified with options.idSubmit. Default is 'sequence'
options.action string Function to call using selected sequences. This is passed the seqId and array of currently selected sequence objects
options.actionLabel string Label for action button
options.dotify bool Repeated amino acids in the sequence are replaced by a dot
options.nocolour bool Dotified amino acids are not coloured (except deletions)
options.toggleDotify bool Create a check box for toggling dotify
options.toggleDotifyLabel string Label for dotify checkbox toggle
options.toggleNocolour bool Create a check box for toggling nocolour
options.toggleNocolourLabel string Label for nocolour checkbox toggle
options.fasta bool Create a FASTA export button
options.fastaLabel string Label for FASTA export button
options.consensus bool Display consensus sequence
options.colourScheme string Default colour scheme - valid options depend on the css, but are currently taylor, clustal, zappo, hphob, helix, strand, turn, buried. Note that this must be specified in lower case
options.selectColour bool Display a pull-down to choose the colour scheme.
options.colourChoices string[] Array of colour scheme names - only used if the user has added to the CSS. This can be in mixed case.
options.plainTooltips bool Don't use JQuery tooltips
options.callback callback Specify the name of a function to be called whenever the display is refreshed. This is passed the seqId
options.scrollX string Specify a width for the sequence display div and make it scrollable (e.g. "500px") Use "100%" to make it the width of the screen (or containing div)
options.scrollY string Specify a height for the sequence display div and make it scrollable (e.g. "500px")
options.labels string[] Array of residue label strings
options.autolabels bool Automatically generate label strings (overrides options.labels)
Author:
  • - 29.05.14 Original By: ACRM - 30.05.14 Now just calls JSAV_buildSequencesHTML() and prints the results - 05.06.14 Added divId parameter and sortable - 06.06.14 Added width - 10.06.14 sortable and width parameters now replaced by 'options' Added 'selectable' option Stores sequence length in global array - 11.06.14 Added deletable - 13.06.14 Cleaned up use of defaults - 13.06.14 Added highlight - 13.06.14 Added submit and action, submitLabel and actionLabel - 15.06.14 Added height - 16.06.14 Added dotify, nocolour, toggleDotify, toggleNocolour - 17.06.14 Added fasta, fastaLabel Added consensus Added colourScheme/colorScheme Added selectColour/selectColor and colourChoices/colorChoices - 18.06.14 Added tooltips and plainTooltips option - 19.06.14 Added callback - 02.09.14 Avoid using write and writeln. Rather use jQuery to insert into DOM. Fixes overwrite issues with using after page closure. By: JHN - 23.09.15 Added toggleDotifyLabel Added toggleNocolourLabel/toggleNocolorLabel Added deleteLabel Move FASTA before submit and action buttons Added idSubmit and idSubmitClean By: ACRM - 24.09.15 Added scrollX and scrollY - 22.12.15 Added labels and autolabels - 11.02.16 Added idSubmitAttribute
Source:
Example
 
var Seqs = [];
Seqs.push({id :"id1b1.L", sequence :"SASSSVNYMYACREFGHIKLMNPTRSTVWY"});
Seqs.push({id :"id1a.L",  sequence :"SASSSTNYMYACDEFGHIKLMNPQRSTVWY"});

var options = Array();
options.width = '400px';
options.sortable = true;
options.highlight = [3,5,10,14];
options.submit = "http://www.bioinf.org.uk/cgi-bin/echo.pl";
options.submitLabel = "Submit sequences";
options.action = "myAction";
options.actionLabel = "My Action";
options.consensus = true;
options.deletable = true;
options.fasta = true;
printJSAV('mySeqDisplay', sequenceArray, options);
Where 'mySeqDisplay' is the name of a div that will be created
      sequenceArray  is an array of sequence objects
      options        is an object describing options - see below

Note that the sequence object can contain additional fields that mean nothing to
JSAV itself but may be used by 'actions' that are called from JSAV (e.g. an
accession code).