Look at index.html and index2.html for example usage information
The main user entry point is:
printJSAV(divId, sequenceArray, options);
divIdis the name of a div that will be created
sequenceArrayis an array of sequence objects - these contain
optionsis an object describing options - see below
The options for controlling the display are:
sortable- Should the sorting options be displayed (default: false)
width- The width of the selection slider with units (default: '400px')
height- The height of the selection slider with units. This is actually a font size and the actualy slider height is relative to this (default: '6pt')
selectable- Should selection checkboxes be displayed for each sequence
deletable- Makes it possible to delete sequences
deleteLabel- Label for the delete button
highlight- Array of ranges to highlight (e.g. [24,34,50,56] would highlight positions 24-34 and 50-56)
submit- URL for submitting selected sequences
submitLabel- Label for submit button
idSubmit- URL for submitting a single sequence where its id/label has been clicked. See also
idSubmitAttributewhich allows other attributes to be passed
idSubmitClean- Remove non-alpha characters from sequence before submitting
idSubmitAttribute- Specifies which attribute of the sequence object should be passed to a URL specified with idSubmit. Default is 'sequence'
action- Function to call using selected sequences - the function will be passed the divId and array of sequence objects
actionLabel- Label for action button
dotify- Repeated residues in the alignment are replaced with dots
nocolor- Repeated residues are not coloured
toggleDotify- Display a checkbox to toggle the dotify mode
toggleDotifyLabel- Label for dotify checkbox toggle
toggleNocolor- Display a checkbox to toggle the nocolour-dotify mode
toggleNocolorLabel- Label for nocolour checkbox toggle
fasta- Create a FASTA export button
fastaLabel- Label for FASTA export button
consensus- Display consensus sequence
colorScheme- Default colour scheme - valid options depend on the css, but are currently taylor, clustal, zappo, hphob, helix, strand, turn, buried
selectColor- Display a pull-down to choose the colour scheme.
colorChoices- Array of colour scheme names - only used if the user has added to the CSS
plainTooltips- disable JQuery tool-tips
callback- name of a function to be called whenever the display is refreshed. The divId is passed into this function.
scrollX- 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)
scrollY- Specify a height for the sequence display div and make it scrollable (e.g. "500px")
labels- Array of residue labels
autoLabels- Generate sequential labels automatically
The Sequence Object
The sequence object must contain two fields:
idwhich contains an identifier that is displayed along side the sequence
sequencewhich is the 1-letter code sequence (with dashes as necessary for the alignment)
In addition it may contain any other required fields that will be passed around but are not used by JSAV itself. For example some sort of accession code that might be required by an 'action' run from JSAV.
The overall JSAV component is wrapped in a div with the ID specified in the call. Within this there are two divs
- the first displays the alignment and has class='JSAVDisplay'
- the second displays the controls and has class='JSAVControls'
Your code should include these with something like:
alternatively, you could access the JQuery code from Google APIs:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
Note that this must appear before including the JSAV.js code and CSS:
By default, JQuery tooltips are enabled. As above, these can be
disabled using the
The tooltips are fully compatible with the tooltipster package which gives more attractive tooltips. If you wish to use this, simply download the package from https://github.com/iamceege/tooltipster/archive/master.zip and add the following lines to your HTML:
Note that this must appear after including the JSAV.js code and
CSS (unless you also remember to set the
enableTooltipster() function must be called whenever the display is refreshed. This is achieved by
adding the option:
options.callback = "enableTooltipster";
In future, the slider may be replaced with http://refreshless.com/nouislider/ which works better on touchscreens.
Contributing to JSAV
Contributions to JSAV through pull requests are encouraged. If you contribute, you acknowledge that you transfer copyright in your modifications to University College London and Dr. Andrew C.R. Martin.