Protael JSON specification

Sequence object

Sequence object is the main object required by Protael.
seq = {
  "sequence"  : string,     // REQUIRED, main sequence.
  "seqcolors" : {
    "data"    : string,     // Comma-separated data set, ex: "C,C,C,C,C,H,H,H,H,H,C,...".
                            // Each element is used to assign specific background color to a residue.
    "colors"  : {
      string     : string   // Colors assigned to specific data values, e.g. "C" : "red".
  "ftracks"    : [ FTrack ],   // Array of feature tracks.
  "qtracks"    : [ QTrack ],   // Array of quantitative tracks.
  "markers"    : [ Marker ],   // Array of markers.
  "bridges"    : [ Bridge ],   // Array of bridges.
  "alignments" : [ Alignment], // Array of aligned sequences.
There are two common object types which could be used with any child object.
properties will be converted to data-d HTML attribute and by default used to display properties table in an object tooltip. If there is a property named pdbid Protael will try to fetch image of the corresponding structure from PDB and place it in the tooltip.
dbxrefs contains links (for example to external databases) and will be converted to data-x HTML attribute and by default used to display dialog with external links when object is clicked.
"properties" = {
  string  : string    // name:value pairs

    "properties" : {
      "pdbid"  : "1bo4"

"dbxrefs" = {
  string:string       // name:value pairs

    "dbxrefs": {
      "Protael website": ""

Feature track

FTrack object contains number of features that are grouped according to some criteria, for example data source, type, prediction method etc.
FTrack =  {
    "label"        : string,     // Track label, shown on the left-hand side of the view.
    "display"      : string,     // Defines how the feature will be drawn.
                                 // "block"(default) will render a rectangle and a label inside
                                 // "line" will render a line and a label above it.
    "showLine"     : boolean,    // Whether or not show center line; DEFAULT = TRUE.
    "allowOverlap" : boolean,    // Whether or nor allow overlapping sequences.
    "clazz"        : string,     // CSS class name.
    "features"     : [ Feature ] // Array of features in this track.

Feature = {
    "id"          : string,
    "label"       : string,    // REQUIRED, Label will be displayed on feature drawing.
    "start"       : integer,   // REQUIRED, start position of the feature.
    "end"         : integer,   // REQUIRED, end position of the feature.
    "clazz"       : string,    // CSS class name.
    "description" : string,    // Short description, will be shown in tooltip.
    "properties"  : Object,    // Additional properties.
    "dbxrefs"     : Object     // Links to external resources.

Quantitative track

Quantitative tracks are displayed as chart, where each datapoint corresponds to a residue.
QTrack = {
  "label"        : string,              // Track label.
  "color"        : string || [string],  // HTML color string. Could be single color, or
                                        // array of 2 or 3 colors for gradient fill. DEFAULT="orange"
  "type"         : string,              // chart type, area/area-spline(default)/line/spline/column.
  "values"       : [double] || string,  // REQUIRED, either array of values or,
                                        // for single-digit data, string containing 1 digit per residue
                                        // e.g. "012345654321".
  "displayScale" : boolean,             // When TRUE will display min and max values for the chart
  "displayMax"   : number,              // Max value to display on scale. DEFAULT = chart max value
  "displayMin"   : number,              // Min value to display on scale. DEFAULT = chart min value
  "transform"    : string,              // Transformation function name, possible values: "log" | "log2" | "log10" | "exp"
  "properties"   : Object,              // Additional properties.
  "dbxrefs"      : Object               // Links to external resources.

Marker and bridge

Markers and bridges are displayed in the main sequence area.
Marker = {
  "type"        : string    // REQUIRED, determines the shape of the marker.
                            // possible values: "gap" || "stick" || "glycan" || "oliglycan" || "unknownglycan" || "pin".
  "x"           : number,   // REQUIRED, if value is integer the marker will be placed in the center of the corresponding residue,
                            // if fractional (10.5) - between two residues, useful for example to mark gaps.
  "label"       : string,   // marker label
  "color"       : string,   // HTML color string.
  "position"    : string,   // position of the marker relative to the main sequence, DEFAULT: "top"
                            // "top" || "bottom"
  "properties"  : Object,   // Additional properties
  "dbxrefs"     : Object    // Links to external resources

Bridge = {
  "start"       : integer,  // REQUIRED. Bridge start.
  "end"         : integer,  // REQUIRED. Bridge end.
  "type"        : string,   // Bridge label (displayed in th middle of the bridge).
  "startlabel"  : string,   // Label for start position.
  "endlabel"    : string,   // Label for end position.
  "color"       : string,   // HTML color string.
  "properties"  : Object,   // Additional properties
  "dbxrefs"     : Object    // Links to external resources

Sequence alignment

Alignment = {
  "sequence"    : string,   // REQUIRED.
  "CS"          : string,   // Name of the coloring schema for this sequence,
                            // by default 'ALI' is used (gray background for aligned regions).
  "id"          : string,   // Sequence id
  "label"       : string,   // Label for tooltip (will be used in case "properties" is not set, see below).
  "start"       : integer,  // Start position of the alignment.
  "properties"  : Object,   // Additional properties
  "dbxrefs"     : Object    // Links to external resources

CSS styling

Most of the elements on Protael SVG display could be styled using CSS. Each element type (features, markers etc) has it's own CSS class name assigned.
For some elements (qtracks chart, markers, bridges) styling could be done only by providing corresponding parameters in JSON object.
NOTE: Protael uses SVG set of CSS properties.


Default background color is white. To override it use background property.
// This will change background color to 'black' and fill color for sequence text
// and markers/bridges (without JSON-specified color) to 'white'
containerId svg{
  background: black;
  fill: white;

Grid lines

There are two types of grid lines in Protael:
  • major - drawn every 50 residues
  • minor - drawn every 10 residues.
Element typeCSS class/IDComment
Grid#gridlinesDefines strike width and fill for all grid lines. style for grid labels.
Major grid to change major grid lines color and stroke width.
Minor grid to change minor grid lines color and stroke width.


Element typeCSS classComment
Feature style for ftracks.
Feature style for feature track label. style for individual feature, such as fill and stroke. Could be used with :hover selector to enable feature highlighting. style for feature labels, such as font size and color. To change color use fill property. Do not use stroke.

Quantitative tracks

Element typeCSS class/IDComment
Qtrack class is used only to "label" the whole qtrack group (label, scale lines, chart) to enable JavaScript interaction.
Qtrack scale style for max value scale line. Hidden by default. Use stroke property to change color.
Qtrack scale style for min value scale line. Hidden by default. Use stroke property to change color.
Qtrack scale style for center value scale line. Visible by default. Use stroke property to change color.
Qtrack style for qtrack label.
Qtrack to change stroke-* properties for the chart. Cannot be used to define fill color, this is done via JSON object.

Other elements

Element typeCSS class/IDComment
Tooltip.ui-tooltipThis is a standard JQuery UI tooltip class. font and stroke for bridges. It is not recommended to change CSS properties for bridges. only to "label" markers to enable JavaScript interaction.