Skip to main content

Methylation (bisulfite)

JBrowse v5 beta

The tutorials target the JBrowse v5 beta, and the v4.3.0 release on the download page lacks some of what they show. To install the beta of JBrowse Web, run npm install -g @jbrowse/cli@next, then jbrowse create jbrowse2 --branch v5.0.0-beta.13. Desktop beta builds are coming soon.

Whole-genome bisulfite sequencing (WGBS) and enzymatic methyl sequencing (EM-seq) measure DNA methylation with short reads. We align an Arabidopsis thaliana WGBS run with bwameth, load the BAM, and color each read by its methylation in the CpG, CHG and CHH contexts. JBrowse computes the calls from the C→T changes in the reads, so the BAM needs no base-modification tags (MM/ML, which nanopore and PacBio basecallers write) and no methylation caller runs first.

Prerequisites

Where the data comes from

TAIR10 (RefSeq GCF_000001735.4) and one wild-type Col-0 WGBS run from the European Nucleotide Archive, DRR029742 (paired-end 150 bp).

The build script fetches these files, so there is nothing to download by hand.

What bisulfite data looks like

A chemical (sodium bisulfite) or enzymatic (APOBEC, in EM-seq) step converts every unmethylated cytosine to uracil, which reads as T, and a methylated cytosine still reads as C. Comparing each read to the reference recovers the methylation: a C→T change means unmethylated, and a retained C means methylated. JBrowse makes that comparison per read as it draws.

Plants methylate in three sequence contexts: CpG, CHG, and CHH (H is A, C, or T). JBrowse colors the reads by one context at a time.

Producing the BAM

The reproduce script trims the reads of DRR029742 with Trim Galore and aligns them with bwameth, which C→T converts reads and reference in silico and runs bwa mem. The BAM keeps the original read sequences, so the C→T changes are still there for JBrowse to find; Bismark BAMs work the same way. Trimming and alignment, on any pair of WGBS or EM-seq FASTQs:

trim_galore --paired R1.fastq.gz R2.fastq.gz
# index once per reference: bwameth aligns against a C->T copy of it
bwameth.py index tair10.fa
# the BAM keeps the original read sequences for JBrowse to compare
bwameth.py --reference tair10.fa -t 8 R1_val_1.fq.gz R2_val_2.fq.gz \
  | samtools sort -o arabidopsis_wgbs.bam -
samtools index arabidopsis_wgbs.bam

bwameth.py index writes the converted reference beside the original, so that directory has to be writable.

Checking the bisulfite conversion rate

An unconverted cytosine is indistinguishable from a methylated one, so measure the library's conversion rate first. The chloroplast is unmethylated, which makes it the control:

MethylDackel extract --CHH -r NC_000932.1 -o conversion \
  tair10.fa arabidopsis_wgbs.bam

Column 4 of conversion_CHH.bedGraph is the methylated percentage at each cytosine, which on an unmethylated sequence is the fraction the conversion missed. Modern libraries convert above 99%. An organism with no plastid uses the library's spike-in, usually unmethylated lambda or pUC19, added to the reference as an extra contig.

Optional aggregate methylation bigWigs from MethylDackel

MethylDackel calls a per-position methylation fraction in all three plant contexts, one bedGraph each, which becomes a bigWig once the header line is dropped and the percentage column kept:

# CpG is emitted always; --CHG --CHH add the two plant contexts.
# -o fixes the output prefix, which the loop below reads back.
MethylDackel extract --CHG --CHH -o arabidopsis_wgbs \
  tair10.fa arabidopsis_wgbs.bam
samtools faidx tair10.fa
cut -f1,2 tair10.fa.fai > tair10.chrom.sizes  # two columns, not the .fai itself
for ctx in CpG CHG CHH; do
  # tail drops MethylDackel's track line; cut keeps the percentage column
  tail -n +2 arabidopsis_wgbs_${ctx}.bedGraph | cut -f1-4 |
    sort -k1,1 -k2,2n > ${ctx}.bg
  bedGraphToBigWig ${ctx}.bg tair10.chrom.sizes arabidopsis_wgbs_${ctx}.bw
done

A MultiQuantitativeTrack with a subadapter per context draws the three bigWigs as labeled rows, the Aggregate methylation track in the figure below.

Goes in the tracks array of config.json. See Tracks.

{
  "type": "MultiQuantitativeTrack",
  "trackId": "arabidopsis_wgbs_methyldackel",
  "name": "Aggregate methylation (MethylDackel)",
  "assemblyNames": ["GCF_000001735.4"],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "subadapters": [
      {
        "type": "BigWigAdapter",
        "name": "CpG",
        "color": "#d62728",
        "uri": "arabidopsis_wgbs_CpG.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "CHG",
        "color": "#ff7f0e",
        "uri": "arabidopsis_wgbs_CHG.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "CHH",
        "color": "#1f77b4",
        "uri": "arabidopsis_wgbs_CHH.bw"
      }
    ]
  },
  "displayDefaults": {
    "mark": "bar",
    "scales": {
      "y": { "domainMin": 0, "domainMax": 100, "title": "% methylated" }
    }
  }
}
jbrowse add-track-json '{
  "type": "MultiQuantitativeTrack",
  "trackId": "arabidopsis_wgbs_methyldackel",
  "name": "Aggregate methylation (MethylDackel)",
  "assemblyNames": ["GCF_000001735.4"],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "subadapters": [
      {
        "type": "BigWigAdapter",
        "name": "CpG",
        "color": "#d62728",
        "uri": "arabidopsis_wgbs_CpG.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "CHG",
        "color": "#ff7f0e",
        "uri": "arabidopsis_wgbs_CHG.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "CHH",
        "color": "#1f77b4",
        "uri": "arabidopsis_wgbs_CHH.bw"
      }
    ]
  },
  "displayDefaults": {
    "mark": "bar",
    "scales": {
      "y": { "domainMin": 0, "domainMax": 100, "title": "% methylated" }
    }
  }
}'

In JBrowse Desktop, or in any running JBrowse Web session, open a view on this track’s assembly, then File → Open track..., choose Add track from pasted JSON, and paste:

{
  "type": "MultiQuantitativeTrack",
  "trackId": "arabidopsis_wgbs_methyldackel",
  "name": "Aggregate methylation (MethylDackel)",
  "assemblyNames": ["GCF_000001735.4"],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "subadapters": [
      {
        "type": "BigWigAdapter",
        "name": "CpG",
        "color": "#d62728",
        "uri": "arabidopsis_wgbs_CpG.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "CHG",
        "color": "#ff7f0e",
        "uri": "arabidopsis_wgbs_CHG.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "CHH",
        "color": "#1f77b4",
        "uri": "arabidopsis_wgbs_CHH.bw"
      }
    ]
  },
  "displayDefaults": {
    "mark": "bar",
    "scales": {
      "y": { "domainMin": 0, "domainMax": 100, "title": "% methylated" }
    }
  }
}

arabidopsis_wgbs_CpG.bw, arabidopsis_wgbs_CHG.bw, arabidopsis_wgbs_CHH.bw are relative to a config.json. Replace each with its URL or its path on this computer.

Loading the TAIR10 hub assembly and the WGBS BAM

TAIR10 is a genome hub on genomes.jbrowse.org, whose config.json holds the 2bit sequence, an alias table and the NCBI RefSeq genes. The view loads its assembly and gene track from there, and the BAM and the optional bigWigs go in beside them:

# a GenArk hub's path is its accession cut into threes
curl -fO https://jbrowse.org/hubs/genark/GCF/000/001/735/GCF_000001735.4/config.json

The reproduce script keeps the hub's assembly entry as written, adding tair10 as an alias so a session can still name it that way.

The hub's assembly entry

The excerpt leaves out the entry's UCSC metadata block; the downloaded config.json has it.

{
  "name": "GCF_000001735.4",
  "displayName": "thale cress (tair10.1 Columbia 2018)",
  "aliases": ["tair10"],
  "sequence": {
    "type": "ReferenceSequenceTrack",
    "trackId": "GCF_000001735.4-ReferenceSequenceTrack",
    "adapter": {
      "type": "TwoBitAdapter",
      "uri": "https://hgdownload.soe.ucsc.edu/hubs/GCF/000/001/735/GCF_000001735.4/GCF_000001735.4.2bit",
      "chromSizes": "https://hgdownload.soe.ucsc.edu/hubs/GCF/000/001/735/GCF_000001735.4/GCF_000001735.4.chrom.sizes.txt"
    }
  },
  "refNameAliases": {
    "adapter": {
      "type": "RefNameAliasAdapter",
      "refNameColumnHeaderName": "ucsc",
      "uri": "https://hgdownload.soe.ucsc.edu/hubs/GCF/000/001/735/GCF_000001735.4/GCF_000001735.4.chromAlias.txt"
    }
  },
  "geneticCodes": { "NC_000932.1": 11 }
}

The 2bit is the same TAIR10.1 sequence the reads were aligned to, and JBrowse reads each cytosine's context off it. The alias table maps NC_003070.9, 1, Chr1 and chr1 to one chromosome, so the BAM keeps the RefSeq names bwameth wrote, and refNameColumnHeaderName makes chr1 the name the view shows.

The BAM goes in beside the hub assembly:

jbrowse add-track arabidopsis_wgbs.bam --assemblyNames GCF_000001735.4 \
  --name "Arabidopsis WGBS (bwameth)" --load copy

The displayDefaults in the alignments track config set the context the track opens on, and the track menu switches it afterwards:

Goes in the tracks array of config.json. See Tracks.

{
  "trackId": "arabidopsis_wgbs",
  "name": "Arabidopsis WGBS (bwameth)",
  "uri": "arabidopsis_wgbs.bam",
  "assemblyNames": ["GCF_000001735.4"],
  "displayDefaults": {
    "baseColor": { "field": "bisulfite" },
    "modifications": { "cytosineContext": "CG" }
  }
}
jbrowse add-track arabidopsis_wgbs.bam \
  --trackId arabidopsis_wgbs \
  --name "Arabidopsis WGBS (bwameth)" \
  --assemblyNames GCF_000001735.4 \
  --displayDefaults '{"baseColor":{"field":"bisulfite"},"modifications":{"cytosineContext":"CG"}}' \
  --load copy

In JBrowse Desktop, or in any running JBrowse Web session, open a view on this track’s assembly, then File → Open track..., choose Add track from pasted JSON, and paste:

{
  "trackId": "arabidopsis_wgbs",
  "name": "Arabidopsis WGBS (bwameth)",
  "uri": "arabidopsis_wgbs.bam",
  "assemblyNames": ["GCF_000001735.4"],
  "displayDefaults": {
    "baseColor": { "field": "bisulfite" },
    "modifications": { "cytosineContext": "CG" }
  }
}

arabidopsis_wgbs.bam is relative to a config.json. Replace it with its URL or its path on this computer.

In grammar-of-graphics terms, baseColor is a color channel for each base, here set from the bisulfite field. cytosineContext takes CG, CHG, CHH or all.

Coloring the reads by cytosine context

Color by... → Bisulfite / EM-seq in the alignments track menu sets baseColor to the bisulfite field, which paints each read's cytosines by context. The submenu offers:

  • CpG, CHG, CHH or All cytosines: methylated cytosines paint red
  • Show unmethylated (blue): once a context is set, converted sites paint blue, separating an unmethylated cytosine from a position with no cytosine. The figure and clip further down leave it off

Gene body methylation and transposon silencing

Plants run two unrelated methylation programs, and the three contexts distinguish them:

ProgramCpGCHGCHHEffect on the locus
Gene body methylation (gbM)yesnonoNone obvious, the gene stays transcribed. Depleted at both gene ends
Transposon and repeat silencingyesyesyesHeterochromatin, transcriptionally off

Red in the CpG context alone is gene body methylation, and red in all three contexts is silencing.

Type chr1:4,398,000-4,412,000 into the location box for a window containing one of each: the expressed gene AT1G12930 on the left, and a transposon on the right. The reproduce script prints the fraction per context for both regions.

To identify the element on the right, add the RepeatMasker track from the TAIR10 genome hub. It labels the element META1_LTR#LTR/Copia, an LTR retrotransposon. No RefSeq transcript overlaps it:

Goes in the tracks array of config.json. See Tracks.

{
  "type": "FeatureTrack",
  "trackId": "tair10_repeatmasker",
  "name": "RepeatMasker",
  "assemblyNames": ["GCF_000001735.4"],
  "adapter": {
    "type": "BigBedAdapter",
    "uri": "https://hgdownload.soe.ucsc.edu/hubs/GCF/000/001/735/GCF_000001735.4/bbi/GCF_000001735.4_TAIR10.1.rmsk.bb"
  }
}
jbrowse add-track https://hgdownload.soe.ucsc.edu/hubs/GCF/000/001/735/GCF_000001735.4/bbi/GCF_000001735.4_TAIR10.1.rmsk.bb \
  --trackId tair10_repeatmasker \
  --name RepeatMasker \
  --assemblyNames GCF_000001735.4

In JBrowse Desktop, or in any running JBrowse Web session, open a view on this track’s assembly, then File → Open track... and, in Add a track from file or URL, enter:

  • Main file: https://hgdownload.soe.ucsc.edu/hubs/GCF/000/001/735/GCF_000001735.4/bbi/GCF_000001735.4_TAIR10.1.rmsk.bb

Click Next. JBrowse reads the adapter and track type off the file name. Then fill in:

  • Track name: RepeatMasker
  • Assembly: GCF_000001735.4

Click Add.

Filter by... in the RepeatMasker track menu takes a filter. Enter jexl:feature.end-feature.start>1000 to keep repeats longer than 1 kb. The short simple repeats in the window drop out and the LTR element stays.

The figure below shows the three contexts side by side as three tracks that share one file and differ in trackId and in the context their displayDefaults pin. The CHG copy looks like this; the CpG and CHH copies change the trackId, the name and cytosineContext:

Goes in the tracks array of config.json. See Tracks.

{
  "trackId": "arabidopsis_wgbs_chg",
  "name": "Per-read WGBS, CHG context",
  "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram",
  "assemblyNames": ["GCF_000001735.4"],
  "displayDefaults": {
    "baseColor": { "field": "bisulfite" },
    "modifications": { "cytosineContext": "CHG" },
    "showCoverage": false
  }
}
jbrowse add-track https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram \
  --trackId arabidopsis_wgbs_chg \
  --name "Per-read WGBS, CHG context" \
  --assemblyNames GCF_000001735.4 \
  --displayDefaults '{"baseColor":{"field":"bisulfite"},"modifications":{"cytosineContext":"CHG"},"showCoverage":false}'

In JBrowse Desktop, or in any running JBrowse Web session, open a view on this track’s assembly, then File → Open track..., choose Add track from pasted JSON, and paste:

{
  "trackId": "arabidopsis_wgbs_chg",
  "name": "Per-read WGBS, CHG context",
  "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram",
  "assemblyNames": ["GCF_000001735.4"],
  "displayDefaults": {
    "baseColor": { "field": "bisulfite" },
    "modifications": { "cytosineContext": "CHG" },
    "showCoverage": false
  }
}
RefSeq genes, the RepeatMasker track, the aggregate MethylDackel track, and three copies of the same WGBS pileup colored by CpG, CHG and CHH. AT1G12930 is red in CpG only; the LTR/Copia element on the right is red in all three.
Open in JBrowse Web ↗Open in JBrowse Desktop ↗
Desktop link does nothing?

It needs JBrowse Desktop 5.0+. Or paste this link into Desktop's Open JBrowse Web link... (start screen, or File → Session):

https://jbrowse.org/code/jb2/main/?config=test_data%2Farabidopsis_methylation%2Fconfig_emseq_bisulfite.json&session=spec-%7B%22sessionTracks%22%3A%5B%7B%22type%22%3A%22AlignmentsTrack%22%2C%22trackId%22%3A%22arabidopsis_wgbs_cg%22%2C%22name%22%3A%22Per-read+WGBS+%E2%80%94+CpG+context%22%2C%22assemblyNames%22%3A%5B%22GCF_000001735.4%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22CramAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fbisulfite%2Farabidopsis_wgbs_bisulfite.cram%22%7D%7D%2C%7B%22type%22%3A%22AlignmentsTrack%22%2C%22trackId%22%3A%22arabidopsis_wgbs_chg%22%2C%22name%22%3A%22Per-read+WGBS+%E2%80%94+CHG+context%22%2C%22assemblyNames%22%3A%5B%22GCF_000001735.4%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22CramAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fbisulfite%2Farabidopsis_wgbs_bisulfite.cram%22%7D%7D%2C%7B%22type%22%3A%22AlignmentsTrack%22%2C%22trackId%22%3A%22arabidopsis_wgbs_chh%22%2C%22name%22%3A%22Per-read+WGBS+%E2%80%94+CHH+context%22%2C%22assemblyNames%22%3A%5B%22GCF_000001735.4%22%5D%2C%22adapter%22%3A%7B%22type%22%3A%22CramAdapter%22%2C%22uri%22%3A%22https%3A%2F%2Fjbrowse.org%2Fdemos%2Fbisulfite%2Farabidopsis_wgbs_bisulfite.cram%22%7D%7D%5D%2C%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22GCF_000001735.4%22%2C%22loc%22%3A%22chr1%3A4%2C398%2C000-4%2C412%2C000%22%2C%22tracks%22%3A%5B%7B%22trackId%22%3A%22GCF_000001735.4-ncbiRefSeq%22%7D%2C%7B%22trackId%22%3A%22GCF_000001735.4-repeatMasker%22%2C%22type%22%3A%22LinearBasicDisplay%22%2C%22filter%22%3A%5B%22jexl%3Afeature.end-feature.start%3E1000%22%5D%2C%22height%22%3A50%7D%2C%7B%22trackId%22%3A%22arabidopsis_methyldackel%22%2C%22type%22%3A%22LinearWiggleDisplay%22%2C%22mark%22%3A%22bar%22%2C%22scales%22%3A%7B%22y%22%3A%7B%22domainMin%22%3A0%2C%22domainMax%22%3A100%2C%22title%22%3A%22%25+methylated%22%7D%7D%2C%22height%22%3A170%7D%2C%7B%22trackId%22%3A%22arabidopsis_wgbs_cg%22%2C%22type%22%3A%22LinearAlignmentsDisplay%22%2C%22baseColor%22%3A%7B%22field%22%3A%22bisulfite%22%7D%2C%22modifications%22%3A%7B%22cytosineContext%22%3A%22CG%22%7D%2C%22showCoverage%22%3Afalse%2C%22heightMode%22%3A%22fixed%22%2C%22featureHeight%22%3A3%2C%22height%22%3A90%7D%2C%7B%22trackId%22%3A%22arabidopsis_wgbs_chg%22%2C%22type%22%3A%22LinearAlignmentsDisplay%22%2C%22baseColor%22%3A%7B%22field%22%3A%22bisulfite%22%7D%2C%22modifications%22%3A%7B%22cytosineContext%22%3A%22CHG%22%7D%2C%22showCoverage%22%3Afalse%2C%22heightMode%22%3A%22fixed%22%2C%22featureHeight%22%3A3%2C%22height%22%3A90%7D%2C%7B%22trackId%22%3A%22arabidopsis_wgbs_chh%22%2C%22type%22%3A%22LinearAlignmentsDisplay%22%2C%22baseColor%22%3A%7B%22field%22%3A%22bisulfite%22%7D%2C%22modifications%22%3A%7B%22cytosineContext%22%3A%22CHH%22%7D%2C%22showCoverage%22%3Afalse%2C%22heightMode%22%3A%22fixed%22%2C%22featureHeight%22%3A3%2C%22height%22%3A90%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+methylation%2Farabidopsis_wgbs_contexts

Or rebuild it from your own data:

The short route: open the view in JBrowse Web, where File → Open track... adds your own files beside its hosted genome and tracks.

From scratch with your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one). For JBrowse Web, jbrowse add-assembly puts it in your config.json.This figure uses GCF_000001735.4, loaded from a .2bit genome.
  2. Add a track: check one your config has in the track selector, or File → Open track... to paste a URL or choose a local file. This one needs a BigBed file (.bb).This figure uses “NCBI RefSeq - RefSeq All”.
  3. Add the next track the same way. This one needs a BigBed file (.bb).This figure uses “RepeatMasker”.
    1. Track menu → Filter by... → add the expressionThis figure filters on feature.end-feature.start>1000.
  4. Add the next track the same way.This figure uses “Aggregate methylation (MethylDackel)”.
    1. Track menu → Plot type → XY plot
    2. Track menu → Y axis... → RangePins the axis: Min 0 and Max 100. A field left empty follows the data in view.
  5. Add the next track the same way. This one needs a CRAM file (.cram + .crai).This figure uses “Per-read WGBS — CpG context”.
    1. Track menu → Color by... → Bisulfite / EM-seq
    2. Track menu → Color by... → Modifications → One color per modification type
    3. Track menu → Color by... → Bisulfite / EM-seq → CpGUnder the bisulfite color field only.
    4. Track menu → Show... → Show coverage (unchecked)
    5. Track menu → Read height → Track sizing → Fixed read height + fixed track height
    6. Track menu → Read height → Compact
  6. Add the next track the same way. This one needs a CRAM file (.cram + .crai).This figure uses “Per-read WGBS — CHG context”.
    1. Track menu → Color by... → Bisulfite / EM-seq
    2. Track menu → Color by... → Modifications → One color per modification type
    3. Track menu → Color by... → Bisulfite / EM-seq → CHGUnder the bisulfite color field only.
    4. Track menu → Show... → Show coverage (unchecked)
    5. Track menu → Read height → Track sizing → Fixed read height + fixed track height
    6. Track menu → Read height → Compact
  7. Add the next track the same way. This one needs a CRAM file (.cram + .crai).This figure uses “Per-read WGBS — CHH context”.
    1. Track menu → Color by... → Bisulfite / EM-seq
    2. Track menu → Color by... → Modifications → One color per modification type
    3. Track menu → Color by... → Bisulfite / EM-seq → CHHUnder the bisulfite color field only.
    4. Track menu → Show... → Show coverage (unchecked)
    5. Track menu → Read height → Track sizing → Fixed read height + fixed track height
    6. Track menu → Read height → Compact
  8. Type your region of interest into the location box and press Enter.This figure is at chr1:4,398,000-4,412,000.

A figure adds its tracks to one session. The jbrowse CLI writes the same tracks into a config.json instead, where every session that opens it has them: add-track where flags cover the whole track, add-track-json where they do not.

jbrowse add-track https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram \
  --trackId arabidopsis_wgbs_cg \
  --name "Per-read WGBS — CpG context" \
  --assemblyNames GCF_000001735.4

jbrowse add-track https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram \
  --trackId arabidopsis_wgbs_chg \
  --name "Per-read WGBS — CHG context" \
  --assemblyNames GCF_000001735.4

jbrowse add-track https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram \
  --trackId arabidopsis_wgbs_chh \
  --name "Per-read WGBS — CHH context" \
  --assemblyNames GCF_000001735.4

Run these where the config.json is, or add --out <dir>, and point each uri at your own file. The config needs GCF_000001735.4 already — jbrowse add-assembly adds yours. The location and the settings the steps carry are session state rather than track config — that half is the Spec tab, or jbrowse set-default-session.

This session spec draws the figure. It goes after &session=spec- on a JBrowse Web link that loads https://jbrowse.org/code/jb2/main/test_data/arabidopsis_methylation/config_emseq_bisulfite.json, which is what the Web button above opens.

{
  "sessionTracks": [
    {
      "type": "AlignmentsTrack",
      "trackId": "arabidopsis_wgbs_cg",
      "name": "Per-read WGBS — CpG context",
      "assemblyNames": [
        "GCF_000001735.4"
      ],
      "adapter": {
        "type": "CramAdapter",
        "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram"
      }
    },
    {
      "type": "AlignmentsTrack",
      "trackId": "arabidopsis_wgbs_chg",
      "name": "Per-read WGBS — CHG context",
      "assemblyNames": [
        "GCF_000001735.4"
      ],
      "adapter": {
        "type": "CramAdapter",
        "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram"
      }
    },
    {
      "type": "AlignmentsTrack",
      "trackId": "arabidopsis_wgbs_chh",
      "name": "Per-read WGBS — CHH context",
      "assemblyNames": [
        "GCF_000001735.4"
      ],
      "adapter": {
        "type": "CramAdapter",
        "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram"
      }
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "GCF_000001735.4",
      "loc": "chr1:4,398,000-4,412,000",
      "tracks": [
        {
          "trackId": "GCF_000001735.4-ncbiRefSeq"
        },
        {
          "trackId": "GCF_000001735.4-repeatMasker",
          "type": "LinearBasicDisplay",
          "filter": [
            "jexl:feature.end-feature.start>1000"
          ],
          "height": 50
        },
        {
          "trackId": "arabidopsis_methyldackel",
          "type": "LinearWiggleDisplay",
          "mark": "bar",
          "scales": {
            "y": {
              "domainMin": 0,
              "domainMax": 100,
              "title": "% methylated"
            }
          },
          "height": 170
        },
        {
          "trackId": "arabidopsis_wgbs_cg",
          "type": "LinearAlignmentsDisplay",
          "baseColor": {
            "field": "bisulfite"
          },
          "modifications": {
            "cytosineContext": "CG"
          },
          "showCoverage": false,
          "heightMode": "fixed",
          "featureHeight": 3,
          "height": 90
        },
        {
          "trackId": "arabidopsis_wgbs_chg",
          "type": "LinearAlignmentsDisplay",
          "baseColor": {
            "field": "bisulfite"
          },
          "modifications": {
            "cytosineContext": "CHG"
          },
          "showCoverage": false,
          "heightMode": "fixed",
          "featureHeight": 3,
          "height": 90
        },
        {
          "trackId": "arabidopsis_wgbs_chh",
          "type": "LinearAlignmentsDisplay",
          "baseColor": {
            "field": "bisulfite"
          },
          "modifications": {
            "cytosineContext": "CHH"
          },
          "showCoverage": false,
          "heightMode": "fixed",
          "featureHeight": 3,
          "height": 90
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own file.

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/code/jb2/main/test_data/arabidopsis_methylation/config_emseq_bisulfite.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []) + [
        {
            "type": "AlignmentsTrack",
            "trackId": "arabidopsis_wgbs_cg",
            "name": "Per-read WGBS — CpG context",
            "assemblyNames": [
                "GCF_000001735.4"
            ],
            "adapter": {
                "type": "CramAdapter",
                "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram"
            }
        },
        {
            "type": "AlignmentsTrack",
            "trackId": "arabidopsis_wgbs_chg",
            "name": "Per-read WGBS — CHG context",
            "assemblyNames": [
                "GCF_000001735.4"
            ],
            "adapter": {
                "type": "CramAdapter",
                "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram"
            }
        },
        {
            "type": "AlignmentsTrack",
            "trackId": "arabidopsis_wgbs_chh",
            "name": "Per-read WGBS — CHH context",
            "assemblyNames": [
                "GCF_000001735.4"
            ],
            "adapter": {
                "type": "CramAdapter",
                "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram"
            }
        }
    ],
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "GCF_000001735.4",
            "loc": "chr1:4,398,000-4,412,000",
            "tracks": [
                {
                    "trackId": "GCF_000001735.4-ncbiRefSeq"
                },
                {
                    "trackId": "GCF_000001735.4-repeatMasker",
                    "type": "LinearBasicDisplay",
                    "filter": [
                        "jexl:feature.end-feature.start>1000"
                    ],
                    "height": 50
                },
                {
                    "trackId": "arabidopsis_methyldackel",
                    "type": "LinearWiggleDisplay",
                    "mark": "bar",
                    "scales": {
                        "y": {
                            "domainMin": 0,
                            "domainMax": 100,
                            "title": "% methylated"
                        }
                    },
                    "height": 170
                },
                {
                    "trackId": "arabidopsis_wgbs_cg",
                    "type": "LinearAlignmentsDisplay",
                    "baseColor": {
                        "field": "bisulfite"
                    },
                    "modifications": {
                        "cytosineContext": "CG"
                    },
                    "showCoverage": False,
                    "heightMode": "fixed",
                    "featureHeight": 3,
                    "height": 90
                },
                {
                    "trackId": "arabidopsis_wgbs_chg",
                    "type": "LinearAlignmentsDisplay",
                    "baseColor": {
                        "field": "bisulfite"
                    },
                    "modifications": {
                        "cytosineContext": "CHG"
                    },
                    "showCoverage": False,
                    "heightMode": "fixed",
                    "featureHeight": 3,
                    "height": 90
                },
                {
                    "trackId": "arabidopsis_wgbs_chh",
                    "type": "LinearAlignmentsDisplay",
                    "baseColor": {
                        "field": "bisulfite"
                    },
                    "modifications": {
                        "cytosineContext": "CHH"
                    },
                    "showCoverage": False,
                    "heightMode": "fixed",
                    "featureHeight": 3,
                    "height": 90
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

cat > tracks.json <<'JSON'
[
  {
    "type": "AlignmentsTrack",
    "trackId": "arabidopsis_wgbs_cg",
    "name": "Per-read WGBS — CpG context",
    "assemblyNames": [
      "GCF_000001735.4"
    ],
    "adapter": {
      "type": "CramAdapter",
      "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram"
    }
  },
  {
    "type": "AlignmentsTrack",
    "trackId": "arabidopsis_wgbs_chg",
    "name": "Per-read WGBS — CHG context",
    "assemblyNames": [
      "GCF_000001735.4"
    ],
    "adapter": {
      "type": "CramAdapter",
      "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram"
    }
  },
  {
    "type": "AlignmentsTrack",
    "trackId": "arabidopsis_wgbs_chh",
    "name": "Per-read WGBS — CHH context",
    "assemblyNames": [
      "GCF_000001735.4"
    ],
    "adapter": {
      "type": "CramAdapter",
      "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram"
    }
  }
]
JSON

npx @jbrowse/img --config https://jbrowse.org/code/jb2/main/test_data/arabidopsis_methylation/config_emseq_bisulfite.json \
  --tracks tracks.json \
  --assembly GCF_000001735.4 --loc chr1:4,398,000-4,412,000 \
  --track GCF_000001735.4-ncbiRefSeq \
  --track GCF_000001735.4-repeatMasker display:LinearBasicDisplay '{"filter":["jexl:feature.end-feature.start>1000"],"height":50}' \
  --track arabidopsis_methyldackel display:LinearWiggleDisplay '{"mark":"bar","scales":{"y":{"domainMin":0,"domainMax":100,"title":"% methylated"}},"height":170}' \
  --track arabidopsis_wgbs_cg display:LinearAlignmentsDisplay '{"baseColor":{"field":"bisulfite"},"modifications":{"cytosineContext":"CG"},"showCoverage":false,"heightMode":"fixed","featureHeight":3,"height":90}' \
  --track arabidopsis_wgbs_chg display:LinearAlignmentsDisplay '{"baseColor":{"field":"bisulfite"},"modifications":{"cytosineContext":"CHG"},"showCoverage":false,"heightMode":"fixed","featureHeight":3,"height":90}' \
  --track arabidopsis_wgbs_chh display:LinearAlignmentsDisplay '{"baseColor":{"field":"bisulfite"},"modifications":{"cytosineContext":"CHH"},"showCoverage":false,"heightMode":"fixed","featureHeight":3,"height":90}' \
  --width 1500 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit: change the location or a track's settings, or add your own track under sessionTracks, and rerun.

cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "type": "AlignmentsTrack",
      "trackId": "arabidopsis_wgbs_cg",
      "name": "Per-read WGBS — CpG context",
      "assemblyNames": [
        "GCF_000001735.4"
      ],
      "adapter": {
        "type": "CramAdapter",
        "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram"
      }
    },
    {
      "type": "AlignmentsTrack",
      "trackId": "arabidopsis_wgbs_chg",
      "name": "Per-read WGBS — CHG context",
      "assemblyNames": [
        "GCF_000001735.4"
      ],
      "adapter": {
        "type": "CramAdapter",
        "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram"
      }
    },
    {
      "type": "AlignmentsTrack",
      "trackId": "arabidopsis_wgbs_chh",
      "name": "Per-read WGBS — CHH context",
      "assemblyNames": [
        "GCF_000001735.4"
      ],
      "adapter": {
        "type": "CramAdapter",
        "uri": "https://jbrowse.org/demos/bisulfite/arabidopsis_wgbs_bisulfite.cram"
      }
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "GCF_000001735.4",
      "loc": "chr1:4,398,000-4,412,000",
      "tracks": [
        {
          "trackId": "GCF_000001735.4-ncbiRefSeq"
        },
        {
          "trackId": "GCF_000001735.4-repeatMasker",
          "type": "LinearBasicDisplay",
          "filter": [
            "jexl:feature.end-feature.start>1000"
          ],
          "height": 50
        },
        {
          "trackId": "arabidopsis_methyldackel",
          "type": "LinearWiggleDisplay",
          "mark": "bar",
          "scales": {
            "y": {
              "domainMin": 0,
              "domainMax": 100,
              "title": "% methylated"
            }
          },
          "height": 170
        },
        {
          "trackId": "arabidopsis_wgbs_cg",
          "type": "LinearAlignmentsDisplay",
          "baseColor": {
            "field": "bisulfite"
          },
          "modifications": {
            "cytosineContext": "CG"
          },
          "showCoverage": false,
          "heightMode": "fixed",
          "featureHeight": 3,
          "height": 90
        },
        {
          "trackId": "arabidopsis_wgbs_chg",
          "type": "LinearAlignmentsDisplay",
          "baseColor": {
            "field": "bisulfite"
          },
          "modifications": {
            "cytosineContext": "CHG"
          },
          "showCoverage": false,
          "heightMode": "fixed",
          "featureHeight": 3,
          "height": 90
        },
        {
          "trackId": "arabidopsis_wgbs_chh",
          "type": "LinearAlignmentsDisplay",
          "baseColor": {
            "field": "bisulfite"
          },
          "modifications": {
            "cytosineContext": "CHH"
          },
          "showCoverage": false,
          "heightMode": "fixed",
          "featureHeight": 3,
          "height": 90
        }
      ]
    }
  ]
}
JSON

cat > callouts.json <<'JSON'
[
  {
    "type": "text",
    "text": "expressed gene body: CpG only",
    "fontSize": 20,
    "anchor": {
      "trackId": "GCF_000001735.4-ncbiRefSeq",
      "loc": "chr1:4,398,322-4,405,669",
      "fracY": 1,
      "dy": -16
    }
  },
  {
    "type": "text",
    "text": "LTR/Copia transposon, silenced: all three contexts",
    "fontSize": 20,
    "maxWidth": 300,
    "anchor": {
      "trackId": "GCF_000001735.4-ncbiRefSeq",
      "loc": "chr1:4,405,996-4,411,119",
      "fracY": 1,
      "dy": -16
    }
  },
  {
    "type": "text",
    "anchor": {
      "selector": "[data-testid^=\"trackRenderingContainer-\"][data-testid$=\"-arabidopsis_methyldackel\"]"
    },
    "dx": -690,
    "dy": -57,
    "fontSize": 22,
    "text": "CpG"
  },
  {
    "type": "text",
    "anchor": {
      "selector": "[data-testid^=\"trackRenderingContainer-\"][data-testid$=\"-arabidopsis_methyldackel\"]"
    },
    "dx": -690,
    "dy": 0,
    "fontSize": 22,
    "text": "CHG"
  },
  {
    "type": "text",
    "anchor": {
      "selector": "[data-testid^=\"trackRenderingContainer-\"][data-testid$=\"-arabidopsis_methyldackel\"]"
    },
    "dx": -690,
    "dy": 57,
    "fontSize": 22,
    "text": "CHH"
  },
  {
    "type": "text",
    "anchor": {
      "selector": "[data-testid^=\"trackRenderingContainer-\"][data-testid$=\"-arabidopsis_wgbs_cg\"]"
    },
    "dx": -690,
    "fontSize": 22,
    "text": "CpG"
  },
  {
    "type": "text",
    "anchor": {
      "selector": "[data-testid^=\"trackRenderingContainer-\"][data-testid$=\"-arabidopsis_wgbs_chg\"]"
    },
    "dx": -690,
    "fontSize": 22,
    "text": "CHG"
  },
  {
    "type": "text",
    "anchor": {
      "selector": "[data-testid^=\"trackRenderingContainer-\"][data-testid$=\"-arabidopsis_wgbs_chh\"]"
    },
    "dx": -690,
    "fontSize": 22,
    "text": "CHH"
  }
]
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/code/jb2/main/test_data/arabidopsis_methylation/config_emseq_bisulfite.json \
  --width 1500 --height 995 \
  --timeout 90000 \
  --spec session.json --annotations callouts.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

One WGBS pileup recolored CpG, then CHG, then CHH from the track menu, under the RefSeq genes, the RepeatMasker track and the aggregate MethylDackel rows: the LTR element stays red in all three contexts, and the gene body is red only in CpG.

Open the session the video starts in ↗, then take the steps it shows:

  1. CpG: methylated, red, over the gene body and the LTR element
  2. Color the reads by the CHG context
  3. Color the reads by the CHH context
  4. Only the LTR stays red in CHG and CHH; the gene body is CpG only

Open this view in JBrowse Web ↗ · Open this view in JBrowse Desktop ↗

Desktop link does nothing?

It needs JBrowse Desktop 5.0+. Or paste this link into Desktop's Open JBrowse Web link... (start screen, or File → Session):

https://jbrowse.org/code/jb2/main/?config=test_data%2Farabidopsis_methylation%2Fconfig_emseq_bisulfite.json&session=spec-%7B%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22GCF_000001735.4%22%2C%22loc%22%3A%22chr1%3A4%2C398%2C000-4%2C412%2C000%22%2C%22tracks%22%3A%5B%7B%22trackId%22%3A%22GCF_000001735.4-ncbiRefSeq%22%7D%2C%7B%22trackId%22%3A%22GCF_000001735.4-repeatMasker%22%2C%22type%22%3A%22LinearBasicDisplay%22%2C%22filter%22%3A%5B%22jexl%3Afeature.end-feature.start%3E1000%22%5D%2C%22height%22%3A50%7D%2C%7B%22trackId%22%3A%22arabidopsis_methyldackel%22%2C%22type%22%3A%22LinearWiggleDisplay%22%2C%22mark%22%3A%22bar%22%2C%22scales%22%3A%7B%22y%22%3A%7B%22domainMin%22%3A0%2C%22domainMax%22%3A100%2C%22title%22%3A%22%25+methylated%22%7D%7D%2C%22height%22%3A170%7D%2C%7B%22trackId%22%3A%22arabidopsis_wgbs%22%2C%22type%22%3A%22LinearAlignmentsDisplay%22%2C%22baseColor%22%3A%7B%22field%22%3A%22bisulfite%22%7D%2C%22modifications%22%3A%7B%22cytosineContext%22%3A%22CG%22%7D%2C%22showCoverage%22%3Afalse%2C%22heightMode%22%3A%22fixed%22%2C%22featureHeight%22%3A5%2C%22height%22%3A200%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+epigenomics%2Fbisulfite_contexts

The short route: open the view in JBrowse Web, where File → Open track... adds your own files beside its hosted genome and tracks.

From scratch with your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one). For JBrowse Web, jbrowse add-assembly puts it in your config.json.This figure uses GCF_000001735.4, loaded from a .2bit genome.
  2. Add a track: check one your config has in the track selector, or File → Open track... to paste a URL or choose a local file. This one needs a BigBed file (.bb).This figure uses “NCBI RefSeq - RefSeq All”.
  3. Add the next track the same way. This one needs a BigBed file (.bb).This figure uses “RepeatMasker”.
    1. Track menu → Filter by... → add the expressionThis figure filters on feature.end-feature.start>1000.
  4. Add the next track the same way.This figure uses “Aggregate methylation (MethylDackel)”.
    1. Track menu → Plot type → XY plot
    2. Track menu → Y axis... → RangePins the axis: Min 0 and Max 100. A field left empty follows the data in view.
  5. Add the next track the same way. This one needs a CRAM file (.cram + .crai).This figure uses “Arabidopsis WGBS (Col-0, DRR029742)”.
    1. Track menu → Color by... → Bisulfite / EM-seq
    2. Track menu → Color by... → Modifications → One color per modification type
    3. Track menu → Color by... → Bisulfite / EM-seq → CpGUnder the bisulfite color field only.
    4. Track menu → Show... → Show coverage (unchecked)
    5. Track menu → Read height → Track sizing → Fixed read height + fixed track height
    6. Track menu → Read height → Custom... → 5px
  6. Type your region of interest into the location box and press Enter.This figure is at chr1:4,398,000-4,412,000.

This session spec draws the figure. It goes after &session=spec- on a JBrowse Web link that loads https://jbrowse.org/code/jb2/main/test_data/arabidopsis_methylation/config_emseq_bisulfite.json, which is what the Web button above opens.

{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "GCF_000001735.4",
      "loc": "chr1:4,398,000-4,412,000",
      "tracks": [
        {
          "trackId": "GCF_000001735.4-ncbiRefSeq"
        },
        {
          "trackId": "GCF_000001735.4-repeatMasker",
          "type": "LinearBasicDisplay",
          "filter": [
            "jexl:feature.end-feature.start>1000"
          ],
          "height": 50
        },
        {
          "trackId": "arabidopsis_methyldackel",
          "type": "LinearWiggleDisplay",
          "mark": "bar",
          "scales": {
            "y": {
              "domainMin": 0,
              "domainMax": 100,
              "title": "% methylated"
            }
          },
          "height": 170
        },
        {
          "trackId": "arabidopsis_wgbs",
          "type": "LinearAlignmentsDisplay",
          "baseColor": {
            "field": "bisulfite"
          },
          "modifications": {
            "cytosineContext": "CG"
          },
          "showCoverage": false,
          "heightMode": "fixed",
          "featureHeight": 5,
          "height": 200
        }
      ]
    }
  ]
}

The same view with jbrowse-anywidget, from the config the figure loads. Swap a track's uri for your own file.

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/code/jb2/main/test_data/arabidopsis_methylation/config_emseq_bisulfite.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "GCF_000001735.4",
            "loc": "chr1:4,398,000-4,412,000",
            "tracks": [
                {
                    "trackId": "GCF_000001735.4-ncbiRefSeq"
                },
                {
                    "trackId": "GCF_000001735.4-repeatMasker",
                    "type": "LinearBasicDisplay",
                    "filter": [
                        "jexl:feature.end-feature.start>1000"
                    ],
                    "height": 50
                },
                {
                    "trackId": "arabidopsis_methyldackel",
                    "type": "LinearWiggleDisplay",
                    "mark": "bar",
                    "scales": {
                        "y": {
                            "domainMin": 0,
                            "domainMax": 100,
                            "title": "% methylated"
                        }
                    },
                    "height": 170
                },
                {
                    "trackId": "arabidopsis_wgbs",
                    "type": "LinearAlignmentsDisplay",
                    "baseColor": {
                        "field": "bisulfite"
                    },
                    "modifications": {
                        "cytosineContext": "CG"
                    },
                    "showCoverage": False,
                    "heightMode": "fixed",
                    "featureHeight": 5,
                    "height": 200
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws the same view as an SVG, from the command line and without a browser. Point --config at your own config, or swap a track for your own file with --bam, --vcfgz and the other file flags.

npx @jbrowse/img --config https://jbrowse.org/code/jb2/main/test_data/arabidopsis_methylation/config_emseq_bisulfite.json \
  --assembly GCF_000001735.4 --loc chr1:4,398,000-4,412,000 \
  --track GCF_000001735.4-ncbiRefSeq \
  --track GCF_000001735.4-repeatMasker display:LinearBasicDisplay '{"filter":["jexl:feature.end-feature.start>1000"],"height":50}' \
  --track arabidopsis_methyldackel display:LinearWiggleDisplay '{"mark":"bar","scales":{"y":{"domainMin":0,"domainMax":100,"title":"% methylated"}},"height":170}' \
  --track arabidopsis_wgbs display:LinearAlignmentsDisplay '{"baseColor":{"field":"bisulfite"},"modifications":{"cytosineContext":"CG"},"showCoverage":false,"heightMode":"fixed","featureHeight":5,"height":200}' \
  --width 1920 --out figure.svg

--out figure.png writes a PNG instead, through rsvg-convert (apt install librsvg2-bin, brew install librsvg).

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit: change the location or a track's settings, or add your own track under sessionTracks, and rerun.

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "GCF_000001735.4",
      "loc": "chr1:4,398,000-4,412,000",
      "tracks": [
        {
          "trackId": "GCF_000001735.4-ncbiRefSeq"
        },
        {
          "trackId": "GCF_000001735.4-repeatMasker",
          "type": "LinearBasicDisplay",
          "filter": [
            "jexl:feature.end-feature.start>1000"
          ],
          "height": 50
        },
        {
          "trackId": "arabidopsis_methyldackel",
          "type": "LinearWiggleDisplay",
          "mark": "bar",
          "scales": {
            "y": {
              "domainMin": 0,
              "domainMax": 100,
              "title": "% methylated"
            }
          },
          "height": 170
        },
        {
          "trackId": "arabidopsis_wgbs",
          "type": "LinearAlignmentsDisplay",
          "baseColor": {
            "field": "bisulfite"
          },
          "modifications": {
            "cytosineContext": "CG"
          },
          "showCoverage": false,
          "heightMode": "fixed",
          "featureHeight": 5,
          "height": 200
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/code/jb2/main/test_data/arabidopsis_methylation/config_emseq_bisulfite.json \
  --width 1920 --height 970 \
  --spec session.json -o figure.png

Using JBrowse with AI agents covers the rest: hosted genomes to point it at, and why waiting for the render is the part that goes wrong.

Reproduce it end to end

The whole pipeline is wrapped in one script, build_arabidopsis_wgbs.sh. It:

  1. downloads the TAIR10 reference and the DRR029742 WGBS run, then trims and aligns them with bwameth
  2. downloads JBrowse and writes a config.json with the hub's TAIR10 assembly and RefSeq genes and the pileup pre-colored Bisulfite / CpG, opening on the window above
  3. with MethylDackel on PATH, prints the conversion rate and the per-context fractions (the aggregate bigWig track is left out either way)
curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/build_arabidopsis_wgbs.sh
bash build_arabidopsis_wgbs.sh          # builds ./arabidopsis_wgbs_build/jbrowse2
npx --yes serve arabidopsis_wgbs_build/jbrowse2 # then open the printed URL

On Debian/Ubuntu, apt install wget curl samtools covers several prerequisites; the rest install from the pages linked there. The alignment step downloads a full WGBS run, so allow time and disk.

See also