ColorByType

Introduction

A JBrowse plugin uses color-hash to color the features according the feature type. This plugin is derived from the Apollo plugin DraggableHTMLFeatures.

Screenshot

• Several feature types (e.g. mRNA, lncRNA, tRNA) were loaded into one track. The coloring of the exon/CDS boxes is related to the feature type of its parent.

Installation

Download to plugins/ColorByType and add a plugins configuration variable in your jbrowse_conf.json or trackList.json.(see JBrowse FAQ for more detail)

"plugins": ["ColorByType"]

Usage

• For an existing track, edit the trackList.json and change "type": "[trackType]" to "type": "ColorByType/View/Track/ColorByTypeDraggable"

Example

     {
         "category" : "NCBI Annotation Release 100/1. Gene Sets/NCBI_Annotation_Release_100_Gene",
         "key" : "NCBI_Annotation_Release_100_Gene",
         "label" : "NCBI_Annotation_Release_100_Gene",
         "trackType" : null,
         "type" : "ColorByType/View/Track/ColorByTypeDraggable",
         "urlTemplate" : "tracks/NCBI_Annotation_Release_100_Gene/{refseq}/trackData.json"
      },

• For a non-existing track, if you load data with flatfile-to-json.pl, you can augment the --trackType argument with ColorByType/View/Track/ColorByTypeDraggable.
• For loading NCBI release annotation to Jbrowse, you can use add_NCBI_annotation_track.py to help you load multiple feature types from the GFF into one track. (check here for the detail)

The coloring of the common feature types

• mRNA
  • exon #d7f7c0
  • CDS #28db25
• lnc_RNA
  • exon #262dff
• snoRNA
  • exon #7cedff
• transcript
  • exon #c589c6
• rRNA
  • exon #fff200
• snRNA
  • exon #80a823
• tRNA
  • exon #ef7902
• Others feature types will be colored by color-hash

Change/Add color for feature types

Others feature types will be colored by color-hash. If you want to change or add color for feature types, you can modifiy the style in ColorByTypeDraggable.js or use hooks→modify options for customization.

color for exon

To change or add color for exon features, you can add more else...if statment to ColorByTypeDraggable.js at L59-L75 and L91-L108.

Example:

// color of exon
if (type == 'mRNA') {
    div.children[i].children[j].style.backgroundColor = '#d7f7c0';
} else if (type == 'tRNA') {
    div.children[i].children[j].style.backgroundColor = '#ef7902';
} else if (type == '[new_featuretype]') {
    div.children[i].children[j].style.backgroundColor = '[Color Hex Color Codes]';
} else {
    div.children[i].children[j].style.backgroundColor = colorHash.hex(concat_subClassName);
}

color for CDS

To change or add color for CDS features, you can add more else...if statment to ColorByTypeDraggable.js at L79-L83 and L110-L114.

Example:

// color of CDS
if (type == 'mRNA') {
    div.children[i].children[j].style.backgroundColor = '#28db25';
} else if (type == '[new_featuretype]') {
    div.children[i].children[j].style.backgroundColor = '[Color Hex Color Codes]';
} else {
    div.children[i].children[j].style.backgroundColor = colorHash.hex(concat_subClassName);
}

Internal Dependencies

• css/main.css
  • The custom css for the track styles.
• jslib/color-hash
  • Functions for generating color based on the given string. Download from color-hash.