JBrowse HTML feature classes

Here are some of the feature classes built into JBrowse. These are what you specify for the --cssclass option to gff-to-json.pl, or for the "class" value or "subfeatureClasses" map in the config file. You can also easily add your own; look in the genome.css file for examples.

Feature classes

Features with no subfeatures will be drawn as rectangles like those below, depending on their cssClass configuration.

cssClassdisplayed
feature
feature2
feature3
feature4
feature5
match_part
exon
est
cds
loops
helix
dblhelix
ibeam
transcript-exon
transcript-UTR
transcript-CDS
triangle hgred
triangle hgblue
hourglass hgred
hourglass hgblue
generic_parent
generic_part_a

Two-level Features

To show features with subfeatures, JBrowse draws the elements for the subfeatures on top of the element for the parent feature. The parent feature's class is set with className and the classes for the subfeatures are set with subfeatureClasses.

data config displayed
parent feature with two subfeatures of type 'exon' 
"style": {
  "className": "transcript",
  "arrowheadClass": "transcript-arrowhead",
  "subfeatureClasses": {
      "exon": "transcript-exon"
    }
 }
parent feature with two subfeatures of type 'CDS' 
"style": {
  "className": "transcript",
  "arrowheadClass": "transcript-arrowhead",
  "subfeatureClasses": {
      "CDS": "transcript-CDS"
    }
 }
parent feature with two subfeatures of type 'match_part' 
"style": {
  "className": "generic_parent",
  "arrowheadClass": "arrowhead",
  "subfeatureClasses": {
      "match_part": "match_part"
    }
 }
parent feature with two subfeatures of type 'match_part' 
"style": {
  "className": "generic_parent",
  "arrowheadClass": "arrowhead",
  "subfeatureClasses": {
      "match_part": "generic_part_a"
    }
 }