Difference between revisions of "JBrowse Tutorial 2012"

...
 
  "TRACK DEFAULTS": {
    "class": "feature"
  },
 
 "tracks": [
    {
      "track": "Genes",
      "key": "Genes",
      "feature": ["mRNA"],
      "autocomplete": "all",
      "class": "transcript",
      "subfeature_classes" : {
            "CDS" : "transcript-CDS",
            "UTR" : "transcript-UTR"
      },
      "arrowheadClass" : "arrowhead"
    },
   ...
]</javascript>
 
<tt>track</tt> specifies the track identifier (a unique name for the track, for the software to use).  This should be just letters and numbers and - and _ characters; using other characters makes things less convenient.
 
<tt>key</tt> specifies a human-friendly name for the track, which can use any characters you want.
 
<tt>feature</tt> gives a list of feature types to include in the track.
 
<tt>autocomplete</tt> including this setting makes the features in the track searchable.
 
<tt>urltemplate</tt> specifies a URL pattern that you can use to link genomic features to specific web pages.
 
<tt>class</tt> specifies the [[Glossary#CSS|CSS]] class that describes how the feature should look.
 
For this particular track, I've specified the <tt>transcript</tt> feature class.
 
Run the <tt>bin/biodb-to-json.pl</tt> script with this config file to format this track, and the others in the file:
 
 $ <span class="enter">bin/biodb-to-json.pl --conf ../pythium-1.conf</span>
 
Refresh JBrowse in your web browser.  You should now see a bunch of annotation tracks.
 
==== Index feature names ====
 
When you generate JSON for a track, if you specify <tt>"autocomplete"</tt> then a listing of all of the feature names from that track (along with feature locations) will also be generated and used to provide feature searching and autocompletion.
 
The <tt>bin/generate-names.pl</tt> script collects those lists of names from all the tracks and combines them into one big tree that the client uses to search.
 
 $ <span class="enter">bin/generate-names.pl -v</span>
 
Visit in web browser, try typing a feature name, such as '''maker-scf1117875582023-snap-gene-0.26-mRNA-1'''.  Notice that JBrowse tries to auto-complete what you type.
 
=== Data from flat files ===
 
We're going to add a couple more tracks that come from <tt>repeats.gff</tt>, a different flat file.
 
==== Features ====
 
To get feature data from flat files into JBrowse, use <tt>flatfile-to-json.pl</tt>.
 
* We'll add a RepeatMasker track:
 
 $ <span class="enter">bin/flatfile-to-json.pl --trackLabel repeatmasker \
     --type match:repeatmasker --getType --getSubfeatures --key RepeatMasker \
     --arrowheadClass arrowhead --className generic_parent \
     --subfeatureClasses '{"match_part" : "feature"}' --gff ../repeats.gff</span>
 
* And then a RepeatRunner track:
 
 $ <span class="enter">bin/flatfile-to-json.pl --trackLabel repeatrunner \
     --type protein_match:repeatrunner --getType --getSubfeatures \
     --key RepeatRunner --arrowheadClass arrowhead --className generic_parent \
     --subfeatureClasses '{"match_part" : "feature"}' --gff ../repeats.gff</span>
 
Visit in web browser; you should see the two new RepeatMasker and RepeatRunner tracks.
 
==== BAM data ====
 
Now let's add some simulated short-read alignments from a BAM file.  To import data from a BAM source:
 
 $ <span class="enter"> bin/bam-to-json.pl \
     --bam ../simulated-sorted.bam \
     --tracklabel BAM_data --key "BAM Data"
 
=== Quantitative data ===
 
==== BigWig ====
 
JBrowse can display quantitative data directly from a BigWig file on your web server.  Simply place the BigWig file in a directory accessible to your web server, and add a snippet of configuration to JBrowse to add the track, similar to:
 
<syntaxhighlight lang="javascript">
     {
        "label" : "bam_coverage",
        "key" : "BAM coverage",
        "storeClass" : "BigWig",
        "urlTemplate" : "../../simulated-sorted.bam.coverage.bw",
        "type" : "Wiggle",
        "variance_band" : true
      }
</javascript>
 
This can be added by either editing the <tt>data/trackList.json</tt> file with a text editor, or by running something like this at the command line to inject the track configuration:
 
 $ <span class="enter">echo ' {
        "label" : "bam_coverage",
        "key" : "BAM coverage",
        "storeClass" : "BigWig",
        "urlTemplate" : "../../simulated-sorted.bam.coverage.bw",
        "type" : "Wiggle",
        "variance_band" : true
      } ' | bin/add-track-json.pl data/trackList.json</span>
 
==== Tiled Images ====
 
JBrowse also has a formatter that converts wiggle-format data to image tiles.  JBrowse does this with a C++ program, <code>setup.sh</code> attempts to compile for you.
 
There isn't any Pythium wiggle example data for this class, but the command to make image tiles from a wiggle file takes the form:
 
 $ <span class="enter">bin/wig-to-json.pl --wig /path/to/wiggle.wig \
     --tracklabel "coverage_wig" --key "Wiggle Coverage" --min 0 --max 50</span>
 
=== Faceted Track Selection ===
 
JBrowse has a new, very powerful faceted track selector that can be used to search for tracks using metadata associated with them.
 
The track metadata is kept in a CSV-format file, with any number of columns, and with a "label" column whose contents must correspond to the track labels in the JBrowse configuration.
 
The demo bundle contains an example <tt>trackMetadata.csv</tt> file, which can be copied into the <tt>data</tt> directory for use with this configuration.
 
 $ <span class="enter">cp trackMetadata.csv jbrowse/data</span>
 
Then a simple faceted track selection configuration might look like:
 
<syntaxhighlight lang="javascript">
   trackSelector: {
       type: 'Faceted',
   },
   trackMetadata: {
       sources: [
          { type: 'csv', url: 'data/trackMetadata.csv' }
       ]
   }
</javascript>
 
The <tt>jbrowse_conf.json</tt> file in the <tt>jbrowse</tt> directory already conveniently contains this stanza, commented out.  Uncomment it, refresh your browser, and you should now see the faceted track selector activated.
 
== Upgrading an Existing JBrowse ==
 
If the old JBrowse is 1.3.0 or later, simply move the data directory from the old JBrowse directory into the new JBrowse directory.
 
== Common Problems ==
 
* JSON syntax errors
 
 
== Future JBrowse Plans ==
 
See the [[Media:JBrowse_gmod_aug2012.pdf|accompanying slides (PDF)]]
 
 
== Other links ==
 
* Config file ref: http://jbrowse.org/code/jbrowse-master/docs/config.html
* DIV test: http://jbrowse.org/test/boatdiv/boat.html
 
[[Category:Tutorials]]
[[Category:JBrowse]]
[[Category:2012 Summer School]]