Advanced JSON tutorial

The main interface of JBrowseR involves using the View component. An introduction to using this interface can be found here. JBrowseR has several R functions for generating configuration to pass to the View component. Under the hood, these functions are returning strings of JBrowse 2 JSON configuration.

While JBrowseR supports the majority of JBrowse 2 configuration and greatly simplifies usage, it does not support the entire configuration API. If you find yourself wanting to do something unique or custom that JBrowse 2 supports but isn’t provided by the View component, you can use the JsonView component. This component can be passed a full JSON configuration as an argument.

Example JSON configuration

This is what the JSON configuration for an assembly looks like:

{
  "assembly": {
    "name": "Sars-Cov2",
    "sequence": {
      "type": "ReferenceSequenceTrack",
      "trackId": "Sars-Cov2-ReferenceSequenceTrack",
      "adapter": {
        "type": "BgzipFastaAdapter",
        "fastaLocation": {
          "uri": "https://jbrowse.org/genomes/sars-cov2/fasta/sars-cov2.fa.gz"
        },
        "faiLocation": {
          "uri": "https://jbrowse.org/genomes/sars-cov2/fasta/sars-cov2.fa.gz.fai"
        },
        "gziLocation": {
          "uri": "https://jbrowse.org/genomes/sars-cov2/fasta/sars-cov2.fa.gz.gzi"
        }
      }
    }
  }
}

Let’s see how this compares to the configuration generated JBrowseR:

library(JBrowseR)

assembly(
  "https://jbrowse.org/genomes/sars-cov2/fasta/sars-cov2.fa.gz",
  bgzip = TRUE
)

## [1] "{ \"name\": \"sars-cov2\", \"sequence\": { \"type\": \"ReferenceSequenceTrack\", \"trackId\": \"sars-cov2-ReferenceSequenceTrack\", \"adapter\": { \"type\": \"BgzipFastaAdapter\", \"fastaLocation\": { \"uri\": \"https://jbrowse.org/genomes/sars-cov2/fasta/sars-cov2.fa.gz\" }, \"faiLocation\": { \"uri\": \"https://jbrowse.org/genomes/sars-cov2/fasta/sars-cov2.fa.gz.fai\" }, \"gziLocation\": { \"uri\": \"https://jbrowse.org/genomes/sars-cov2/fasta/sars-cov2.fa.gz.gzi\" } } } }"

JBrowseR generates equivalent JSON for the same assembly. This gives a better understanding of what is happening when generating JBrowse 2 configuration using JBrowseR.

Using the JsonView

Now, if we have a JSON file config.json containing the configuration above, we can parse it and use it to configure a browser. Here is what this looks like:

library(shiny)
library(JBrowseR)

ui <- fluidPage(
  titlePanel("JSON JBrowseR Example"),
  JBrowseROutput("browserOutput")
)

server <- function(input, output, session) {
  # using JBrowseR helper function to parse the config
  config <- json_config("./config.json")

  output$browserOutput <- renderJBrowseR(
    JBrowseR("JsonView",
            config = config,
            location = "NC_045512.2:1..2,000"
    )
  )
}

shinyApp(ui, server)

Resources

Here are some great resources for learning more about JBrowse 2 configuration:

• JBrowse 2 config guide
• JBrowse 2 React component example
• JBrowse 2 CLI quickstart
• JBrowse 2 graphical config editing quickstart
• JBrowse 2 test data

One important point when looking at JB2 config files is that the main app accepts an array of assembly objects. On the other hand, the React LGV component only accepts one assembly object, since it is a single linear genome view. Since JBrowseR is powered by the LGV component, it also only accepts a single assembly.