Skip to main content

Pangenome (pggb)

3 videos in this tutorial

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.20. Desktop beta builds for Linux and macOS are on the releases page; the Windows build waits on code signing.

A pangenome graph stores the sequence several genomes share once, as a path every genome follows, and branches where they differ. We build one of five E. coli strains with pggb and turn its outputs into tracks on the K12 genome. Most are linear projections, which flatten the graph onto K12's coordinates so it loads as an ordinary track; together they show which sequence all five strains share and which only some have. We:

  • load the alignment between the strains as a synteny track, and stack the strains in a linear synteny view
  • load the variants the graph calls against K12 as a variant track, one row per strain
  • load the graph's whole-genome alignment as a MAF track on K12
  • plot depth as a quantitative track and per-strain presence as a heatmap
  • load the graph itself as a graph track you browse by locus
Experimental

The graph view is a beta plugin. We welcome your feedback.

Prerequisites

# Debian/Ubuntu
sudo apt install samtools tabix minimap2 nodejs
# or conda, which has every tool above
conda install -c bioconda -c conda-forge samtools htslib minimap2 nodejs \
  ucsc-bedgraphtobigwig ncbi-datasets-cli
# or Linux x86_64 binaries for the tools apt lacks
wget -P ~/.local/bin \
  https://hgdownload.soe.ucsc.edu/admin/exe/linux.x86_64/bedGraphToBigWig \
  https://ftp.ncbi.nlm.nih.gov/pub/datasets/command-line/v2/linux-amd64/datasets \
  https://ftp.ncbi.nlm.nih.gov/pub/datasets/command-line/v2/linux-amd64/dataformat
chmod +x ~/.local/bin/bedGraphToBigWig ~/.local/bin/datasets ~/.local/bin/dataformat
# any platform
cargo install gfa-to-tabix
npm install -g @jbrowse/cli@next

The data

The page's commands fetch the five E. coli RefSeq assemblies by accession and build local files from them; run the build script first, or follow the same commands on your own assemblies. The graph tracks read our hosted copy, and the nanopore reads under Testing the CPZ-55 depth trough are the one file the script does not fetch.

What it isFile
K12GCF_000005845.2_ASM584v2/
SakaiGCF_000008865.2_ASM886v2/
CFT073GCF_000007445.1_ASM744v1/
NCTC86GCF_002007705.1_ASM200770v1/
IAI39GCF_000026345.1_ASM2634v1/
Nanopore reads from an unrelated isolate, E. coli E146DRR193901_1.fastq.gz

Building the graph

Each strain's FASTA holds its chromosome as one record named chr. Fetch and trim one assembly with the NCBI datasets CLI:

# $acc: the RefSeq accession; $strain: the name the graph gives the sample
datasets download genome accession "$acc" --filename "$strain.zip"
unzip -o "$strain.zip" -d "$strain"
# keep the first record, the chromosome, renamed chr; the rest are plasmids
awk '/^>/{n++; if (n == 1) print ">chr"; next} n == 1' \
  "$strain"/ncbi_dataset/data/*/*.fna > "$strain.fa"

pggb takes one FASTA of all the genomes, with PanSN names, sample#haplotype#contig. Concatenate the five haploid strains as haplotype 1 and index the result:

for strain in K12 Sakai CFT073 NCTC86 IAI39; do
  awk -v s="$strain" '/^>/{print ">" s "#1#chr"; next} {print}' "$strain.fa"
done > all.fa
bgzip all.fa
samtools faidx all.fa.gz

The pggb image includes every tool below, odgi among them, so wrap docker run once and run pggb:

in_pggb() {
  docker run --rm -u "$(id -u):$(id -g)" -w /data -v "$PWD":/data \
    ghcr.io/pangenome/pggb:202603141454453ade6b "$@"
}

# -n: haplotype count
# -c: mappings kept per segment; raise it along with -n
# -p: minimum identity; -s: segment length
# -V K12:10000: a VCF against the K12 path; -M: a MAF
in_pggb pggb -i /data/all.fa.gz -o /data/pggb \
  -n 5 -c 4 -p 90 -s 5000 -V K12:10000 -M -t "$(getconf _NPROCESSORS_ONLN)"
og=$(ls pggb/*.smooth.final.og)

Under singularity, singularity exec --bind "$PWD":/data --pwd /data docker://<image> replaces the wrapper body.

Load the genomes

Every projection is a track on a strain's assembly, and each strain's FASTA holds one sequence named chr, the refName the graph's paths are renamed to below. We'll add K12, the reference the projections target, from a bgzip-compressed, indexed FASTA:

Goes in the assemblies array of config.json. See Assemblies.

{
  "name": "K12",
  "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.fa.gz"
}
jbrowse add-assembly https://jbrowse.org/demos/ecoli_pangenome/K12.fa.gz \
  --name K12

In JBrowse Desktop, Open new genome on the start screen (or File → Open genome... in a session), then Open from a URL and paste, one per line:

https://jbrowse.org/demos/ecoli_pangenome/K12.fa.gz
https://jbrowse.org/demos/ecoli_pangenome/K12.fa.gz.fai
https://jbrowse.org/demos/ecoli_pangenome/K12.fa.gz.gzi

JBrowse reads the format off the file name. Then fill in:

  • Genome name: K12

Sakai, CFT073, NCTC86 and IAI39 load the same way, named as in the assemblyNames of the tracks below.

Synteny between the strains (wfmash)

pggb's first step is an all-vs-all alignment by wfmash, which JBrowse reads as a synteny track once jbrowse make-pif indexes it:

cp pggb/*.alignments.wfmash.paf ecoli_pggb_ava.paf
jbrowse make-pif ecoli_pggb_ava.paf --csi

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

{
  "type": "SyntenyTrack",
  "trackId": "ecoli_pggb_ava",
  "name": "pggb graph: all-vs-all synteny (wfmash)",
  "assemblyNames": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"],
  "adapter": {
    "type": "MultiGenomeIndexedPAFAdapter",
    "uri": "ecoli_pggb_ava.pif.gz",
    "csi": true,
    "assemblyNames": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"]
  }
}
jbrowse add-track-json '{
  "type": "SyntenyTrack",
  "trackId": "ecoli_pggb_ava",
  "name": "pggb graph: all-vs-all synteny (wfmash)",
  "assemblyNames": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"],
  "adapter": {
    "type": "MultiGenomeIndexedPAFAdapter",
    "uri": "ecoli_pggb_ava.pif.gz",
    "csi": true,
    "assemblyNames": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"]
  }
}'

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": "SyntenyTrack",
  "trackId": "ecoli_pggb_ava",
  "name": "pggb graph: all-vs-all synteny (wfmash)",
  "assemblyNames": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"],
  "adapter": {
    "type": "MultiGenomeIndexedPAFAdapter",
    "uri": "ecoli_pggb_ava.pif.gz",
    "csi": true,
    "assemblyNames": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"]
  }
}

ecoli_pggb_ava.pif.gz is relative to a config.json. Replace it with its URL or its path on this computer.

That shows it in the linear view. For the synteny view, open Add → Linear synteny view, pick the track under Quick start, and click Launch.

Stack the strains with Add → Linear synteny view, whose Quick start fills in a row per assembly the track lists.

The wfmash alignment pggb built the graph from, the strains stacked.
Open in JBrowse Web ↗

Large dataset: slow to open.

Or rebuild it from your own data:

Quickest: open the view, then File → Open track... for your files.

From scratch:

  1. Open your genomes: Open new genome in JBrowse Desktop, then File → Open genome... for each of the rest, or jbrowse add-assembly for each in JBrowse Web.This figure's rows, top to bottom: K12, Sakai, CFT073, NCTC86, IAI39.
  2. Open the view: Add → Linear synteny view, and set the rows to those assemblies in the import form.
  3. Add your file: click the arrow between two rows and choose New track. Needs one indexed PAF of several genomes, PanSN-named (.pif.gz + .tbi).Or pick a synteny track you already have under Quick start, which fills in the rows.This figure uses “pggb graph: all-vs-all synteny (wfmash)”.
  4. Click Launch.
  5. Synteny display settings (the sliders button in the view header) → Curved lines (unchecked)
  6. Synteny display settings (the sliders button in the view header) → Min length → drag to 10,000bpHides alignments shorter than this, which is what clears the hairball of short spurious chains at whole-genome zoom.
  7. Drag the bar below a synteny level to resize it.This figure's 4 levels are 110, 110, 110, 110px tall.

Paste into a coding agent, with your goal on the first line.

My goal: [write yours, e.g. this view of my own files, or these track settings in my config.json]

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/demos/ecoli_pangenome/config.json
- Tracks:
  - pggb graph: all-vs-all synteny (wfmash) (ecoli_pggb_ava), SyntenyTrack, one indexed PAF of several genomes, PanSN-named (.pif.gz + .tbi), drawn as LinearSyntenyDisplay

Docs: https://jbrowse.org/jb2/docs/agents_authoring/ (writing a config), https://jbrowse.org/jb2/docs/agents/ (driving a running JBrowse). Use the jbrowse-authoring, jbrowse-hosted-data and jbrowse-capture skills if you have them. Check any config with `npx @jbrowse/cli validate`, then render it and look: a config that loads is not yet a track that drew.

The session spec that draws the view:
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "K12"
        },
        {
          "assembly": "Sakai"
        },
        {
          "assembly": "CFT073"
        },
        {
          "assembly": "NCTC86"
        },
        {
          "assembly": "IAI39"
        }
      ],
      "tracks": [
        "ecoli_pggb_ava"
      ],
      "mark": {
        "interpolate": "linear"
      },
      "filter": [
        {
          "field": "length",
          "gte": 10000
        }
      ],
      "levelHeights": [
        110,
        110,
        110,
        110
      ],
      "collapseEmptyRows": true
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "K12"
        },
        {
          "assembly": "Sakai"
        },
        {
          "assembly": "CFT073"
        },
        {
          "assembly": "NCTC86"
        },
        {
          "assembly": "IAI39"
        }
      ],
      "tracks": [
        "ecoli_pggb_ava"
      ],
      "mark": {
        "interpolate": "linear"
      },
      "filter": [
        {
          "field": "length",
          "gte": 10000
        }
      ],
      "levelHeights": [
        110,
        110,
        110,
        110
      ],
      "collapseEmptyRows": true
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --width 1500 --height 715 \
  --timeout 120000 \
  --spec session.json -o figure.png

More: Using JBrowse with AI agents.

This view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/demos/ecoli_pangenome/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearSyntenyView",
            "views": [
                {
                    "assembly": "K12"
                },
                {
                    "assembly": "Sakai"
                },
                {
                    "assembly": "CFT073"
                },
                {
                    "assembly": "NCTC86"
                },
                {
                    "assembly": "IAI39"
                }
            ],
            "tracks": [
                "ecoli_pggb_ava"
            ],
            "mark": {
                "interpolate": "linear"
            },
            "filter": [
                {
                    "field": "length",
                    "gte": 10000
                }
            ],
            "levelHeights": [
                110,
                110,
                110,
                110
            ],
            "collapseEmptyRows": True
        }
    ],
)
app  # display the widget

jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "K12"
        },
        {
          "assembly": "Sakai"
        },
        {
          "assembly": "CFT073"
        },
        {
          "assembly": "NCTC86"
        },
        {
          "assembly": "IAI39"
        }
      ],
      "tracks": [
        "ecoli_pggb_ava"
      ],
      "mark": {
        "interpolate": "linear"
      },
      "filter": [
        {
          "field": "length",
          "gte": 10000
        }
      ],
      "levelHeights": [
        110,
        110,
        110,
        110
      ],
      "collapseEmptyRows": true
    }
  ]
}
JSON

npx @jbrowse/img synteny --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --spec session.json \
  --width 1500 --out figure.svg

For a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).

The session spec behind the figure, over this config.

{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "K12"
        },
        {
          "assembly": "Sakai"
        },
        {
          "assembly": "CFT073"
        },
        {
          "assembly": "NCTC86"
        },
        {
          "assembly": "IAI39"
        }
      ],
      "tracks": [
        "ecoli_pggb_ava"
      ],
      "mark": {
        "interpolate": "linear"
      },
      "filter": [
        {
          "field": "length",
          "gte": 10000
        }
      ],
      "levelHeights": [
        110,
        110,
        110,
        110
      ],
      "collapseEmptyRows": true
    }
  ]
}

Select a span on K12's ruler and pick Launch → Linear synteny view to stack the strains over that span alone. The same selection on another strain's row, with Replace current view, re-anchors the stack on that strain:

Launch over a K12 window opens a stack anchored on K12; a drag on the Sakai row re-anchors it on Sakai.

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

  1. K-12, with one lane per strain and the graph segments
  2. Select a span and launch a stack of the strains on it
  3. Sakai's row runs twice as long: 38 kb sits where K-12 has none
  4. Select that stretch on Sakai's row to re-anchor the stack on Sakai
  5. Anchored on Sakai: the white wedge is its prophage, which K-12 lacks
Open this view in JBrowse Web ↗ ·

Quickest: open the view, then File → Open track... for your files.

From scratch:

  1. Open your genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses K12, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  2. Add your track: File → Open track..., or check it in the track selector. Needs one PAF of several genomes, PanSN-named (.paf).This figure uses “E. coli pangenome (all-vs-all PAF)”.
    1. Track menu → Group by → Mate assemblySynteny tracks only: one section per assembly on the other side of the alignment. The figure hides the K12 lane: "Hide self-alignment lane" below the radios for the view's own assembly, or Hide on a lane's chip.
    2. Track menu → Feature height → Custom... → 14px
  3. Add the next track the same way.This figure uses “minigraph graph: rGFA segments (browsable by locus)”.
    1. Track menu → Show → Names (unchecked)
    2. Track menu → Show → Descriptions (unchecked)
  4. Go to your region in the location box.This figure is at chr:783,000-832,000.

Paste into a coding agent, with your goal on the first line.

My goal: [write yours, e.g. this view of my own files, or these track settings in my config.json]

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/demos/ecoli_pangenome/config.json
- Tracks:
  - E. coli pangenome (all-vs-all PAF) (ecoli_ava), SyntenyTrack, one PAF of several genomes, PanSN-named (.paf), drawn as LGVSyntenyDisplay
  - minigraph graph: rGFA segments (browsable by locus) (ecoli_minigraph_segments), GraphTrack, drawn as LinearBasicDisplay

Docs: https://jbrowse.org/jb2/docs/agents_authoring/ (writing a config), https://jbrowse.org/jb2/docs/agents/ (driving a running JBrowse). Use the jbrowse-authoring, jbrowse-hosted-data and jbrowse-capture skills if you have them. Check any config with `npx @jbrowse/cli validate`, then render it and look: a config that loads is not yet a track that drew.

The session spec that draws the view:
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:783,000-832,000",
      "tracks": [
        {
          "trackId": "ecoli_ava",
          "facet": {
            "field": "mateAssembly",
            "hidden": [
              "K12"
            ]
          },
          "pileup": {
            "mark": {
              "height": 14
            }
          },
          "height": 135
        },
        {
          "trackId": "ecoli_minigraph_segments",
          "type": "LinearBasicDisplay",
          "labels": {
            "name": {
              "show": false
            },
            "description": {
              "show": false
            }
          },
          "height": 60
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:783,000-832,000",
      "tracks": [
        {
          "trackId": "ecoli_ava",
          "facet": {
            "field": "mateAssembly",
            "hidden": [
              "K12"
            ]
          },
          "pileup": {
            "mark": {
              "height": 14
            }
          },
          "height": 135
        },
        {
          "trackId": "ecoli_minigraph_segments",
          "type": "LinearBasicDisplay",
          "labels": {
            "name": {
              "show": false
            },
            "description": {
              "show": false
            }
          },
          "height": 60
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --width 1920 --height 780 \
  --spec session.json -o figure.png

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file (replace YOUR_FILE).

jbrowse add-track-json '{
  "type": "SyntenyTrack",
  "trackId": "ecoli_ava",
  "name": "E. coli pangenome (all-vs-all PAF)",
  "assemblyNames": [
    "K12",
    "Sakai",
    "CFT073",
    "NCTC86",
    "IAI39"
  ],
  "adapter": {
    "type": "MultiGenomePAFAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "facet": {
      "field": "mateAssembly",
      "hidden": [
        "K12"
      ]
    },
    "pileup": {
      "mark": {
        "height": 14
      }
    },
    "height": 135
  }
}'

Run beside config.json, or add --out <dir>. Needs K12, Sakai, CFT073, NCTC86, IAI39 in the config (jbrowse add-assembly).

The session spec behind the figure, over this config.

{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:783,000-832,000",
      "tracks": [
        {
          "trackId": "ecoli_ava",
          "facet": {
            "field": "mateAssembly",
            "hidden": [
              "K12"
            ]
          },
          "pileup": {
            "mark": {
              "height": 14
            }
          },
          "height": 135
        },
        {
          "trackId": "ecoli_minigraph_segments",
          "type": "LinearBasicDisplay",
          "labels": {
            "name": {
              "show": false
            },
            "description": {
              "show": false
            }
          },
          "height": 60
        }
      ]
    }
  ]
}

Synteny read out of the graph with odgi untangle

odgi untangle follows each strain's path and reports which stretch of the K12 path it traverses, so this synteny comes from the graph itself. -p writes it as a PAF, which make-pif indexes the same way:

printf 'K12#1#chr\n' > target.txt
printf 'Sakai#1#chr\nCFT073#1#chr\nNCTC86#1#chr\nIAI39#1#chr\n' > query.txt
# -m merges runs shorter than this into the previous segment
# -j is the minimum jaccard similarity for a match
# -e forces a segment boundary every N bp; omit it on graphs with many haplotypes
in_pggb odgi untangle -i "/data/$og" \
  -R /data/target.txt -Q /data/query.txt -m 1000 -j 0.5 -e 5000 -p -t "$(getconf _NPROCESSORS_ONLN)" \
  > ecoli_pggb_untangle.paf
jbrowse make-pif ecoli_pggb_untangle.paf --csi

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

{
  "type": "SyntenyTrack",
  "trackId": "ecoli_pggb_untangle",
  "name": "pggb graph: synteny from the graph (odgi untangle)",
  "assemblyNames": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"],
  "adapter": {
    "type": "MultiGenomeIndexedPAFAdapter",
    "uri": "ecoli_pggb_untangle.pif.gz",
    "csi": true,
    "assemblyNames": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"]
  }
}
jbrowse add-track-json '{
  "type": "SyntenyTrack",
  "trackId": "ecoli_pggb_untangle",
  "name": "pggb graph: synteny from the graph (odgi untangle)",
  "assemblyNames": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"],
  "adapter": {
    "type": "MultiGenomeIndexedPAFAdapter",
    "uri": "ecoli_pggb_untangle.pif.gz",
    "csi": true,
    "assemblyNames": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"]
  }
}'

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": "SyntenyTrack",
  "trackId": "ecoli_pggb_untangle",
  "name": "pggb graph: synteny from the graph (odgi untangle)",
  "assemblyNames": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"],
  "adapter": {
    "type": "MultiGenomeIndexedPAFAdapter",
    "uri": "ecoli_pggb_untangle.pif.gz",
    "csi": true,
    "assemblyNames": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"]
  }
}

ecoli_pggb_untangle.pif.gz is relative to a config.json. Replace it with its URL or its path on this computer.

That shows it in the linear view. For the synteny view, open Add → Linear synteny view, pick the track under Quick start, and click Launch.

untangle_to_bed.py turns the same PAF into a BED with a strain column, so one track can draw every strain on K12's axis. In grammar-of-graphics terms, rows assigns one row per strain, and encoding.color is a color scale that here uses scale.type: "identity" for the colors the file states, red where the strain runs inverted:

curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/untangle_to_bed.py
python3 untangle_to_bed.py ecoli_pggb_untangle.paf chr > ecoli_pggb_untangle_rows.bed
jbrowse sort-bed ecoli_pggb_untangle_rows.bed | bgzip > ecoli_pggb_untangle_rows.bed.gz
tabix -C -p bed ecoli_pggb_untangle_rows.bed.gz

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

{
  "type": "FeatureTrack",
  "trackId": "ecoli_pggb_untangle_rows",
  "name": "pggb graph: untangle per strain (orientation, vs K12)",
  "uri": "ecoli_pggb_untangle_rows.bed.gz",
  "csi": true,
  "assemblyNames": ["K12"],
  "displays": [
    {
      "type": "LinearMultiRowFeatureDisplay",
      "rows": {
        "field": "strain",
        "sort": ["Sakai", "CFT073", "NCTC86", "IAI39"]
      },
      "encoding": {
        "color": {
          "scale": {
            "type": "identity",
            "domain": ["rgb(153,153,153)", "rgb(214,39,40)"],
            "names": ["Same orientation as K12", "Inverted"]
          }
        }
      }
    }
  ]
}
jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "ecoli_pggb_untangle_rows",
  "name": "pggb graph: untangle per strain (orientation, vs K12)",
  "uri": "ecoli_pggb_untangle_rows.bed.gz",
  "csi": true,
  "assemblyNames": ["K12"],
  "displays": [
    {
      "type": "LinearMultiRowFeatureDisplay",
      "rows": {
        "field": "strain",
        "sort": ["Sakai", "CFT073", "NCTC86", "IAI39"]
      },
      "encoding": {
        "color": {
          "scale": {
            "type": "identity",
            "domain": ["rgb(153,153,153)", "rgb(214,39,40)"],
            "names": ["Same orientation as K12", "Inverted"]
          }
        }
      }
    }
  ]
}'

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": "FeatureTrack",
  "trackId": "ecoli_pggb_untangle_rows",
  "name": "pggb graph: untangle per strain (orientation, vs K12)",
  "uri": "ecoli_pggb_untangle_rows.bed.gz",
  "csi": true,
  "assemblyNames": ["K12"],
  "displays": [
    {
      "type": "LinearMultiRowFeatureDisplay",
      "rows": {
        "field": "strain",
        "sort": ["Sakai", "CFT073", "NCTC86", "IAI39"]
      },
      "encoding": {
        "color": {
          "scale": {
            "type": "identity",
            "domain": ["rgb(153,153,153)", "rgb(214,39,40)"],
            "names": ["Same orientation as K12", "Inverted"]
          }
        }
      }
    }
  ]
}

ecoli_pggb_untangle_rows.bed.gz is relative to a config.json. Replace it with its URL or its path on this computer.

The odgi untangle synteny two ways, each inverted arm boxed in its own color in both. Above, one row per strain over K12. Below, K12 against IAI39 as a dotplot.
Open in JBrowse Web ↗

Or rebuild it from your own data:

Quickest: open the view, then File → Open track... for your files.

From scratch:

  1. Open your genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses K12, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  2. Add your track: File → Open track..., or check it in the track selector. Needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “pggb graph: untangle per strain (orientation, vs K12)”.
  3. Go to your region in the location box.This figure is at chr:1-4,641,652.

Rebuilds the figure headlessly. Edit the session file (location, track settings, your own track under sessionTracks) and rerun.

The figure stacks 2 frames: one command draws each, and ImageMagick stacks them.

Frame 1: Rows

cat > session-1.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1-4,641,652",
      "tracks": [
        {
          "trackId": "ecoli_pggb_untangle_rows",
          "height": 240
        }
      ]
    }
  ]
}
JSON

cat > callouts-1.json <<'JSON'
[
  {
    "type": "box",
    "color": "#ef6c00",
    "strokeWidth": 3,
    "anchor": {
      "trackId": "ecoli_pggb_untangle_rows",
      "loc": "chr:213,443-262,948"
    }
  },
  {
    "type": "box",
    "color": "#2e7d32",
    "strokeWidth": 3,
    "anchor": {
      "trackId": "ecoli_pggb_untangle_rows",
      "loc": "chr:302,899-501,436"
    }
  },
  {
    "type": "box",
    "color": "#6a1b9a",
    "strokeWidth": 3,
    "anchor": {
      "trackId": "ecoli_pggb_untangle_rows",
      "loc": "chr:914,963-1,194,177"
    }
  },
  {
    "type": "box",
    "color": "#1565c0",
    "strokeWidth": 3,
    "anchor": {
      "trackId": "ecoli_pggb_untangle_rows",
      "loc": "chr:1,635,838-2,229,302"
    }
  },
  {
    "type": "box",
    "color": "#00838f",
    "strokeWidth": 3,
    "anchor": {
      "trackId": "ecoli_pggb_untangle_rows",
      "loc": "chr:3,946,786-4,171,723"
    }
  }
]
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --width 1000 --height 450 \
  --timeout 90000 \
  --spec session-1.json --annotations callouts-1.json -o frame-1.png

Frame 2: Dotplot

cat > session-2.json <<'JSON'
{
  "views": [
    {
      "type": "DotplotView",
      "tracks": [
        "ecoli_pggb_untangle"
      ],
      "views": [
        {
          "assembly": "K12"
        },
        {
          "assembly": "IAI39"
        }
      ]
    }
  ]
}
JSON

cat > callouts-2.json <<'JSON'
[
  {
    "type": "box",
    "color": "#ef6c00",
    "strokeWidth": 3,
    "anchor": {
      "hLoc": "chr:213,443-262,948",
      "vLoc": "chr:449,188-493,004"
    }
  },
  {
    "type": "box",
    "color": "#2e7d32",
    "strokeWidth": 3,
    "anchor": {
      "hLoc": "chr:302,899-501,436",
      "vLoc": "chr:228,426-443,280"
    }
  },
  {
    "type": "box",
    "color": "#6a1b9a",
    "strokeWidth": 3,
    "anchor": {
      "hLoc": "chr:914,963-1,194,177",
      "vLoc": "chr:2,058,958-2,336,701"
    }
  },
  {
    "type": "box",
    "color": "#1565c0",
    "strokeWidth": 3,
    "anchor": {
      "hLoc": "chr:1,635,838-2,229,302",
      "vLoc": "chr:906,630-1,574,975"
    }
  },
  {
    "type": "box",
    "color": "#00838f",
    "strokeWidth": 3,
    "anchor": {
      "hLoc": "chr:3,946,786-4,171,723",
      "vLoc": "chr:3,083,154-3,330,675"
    }
  }
]
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --width 1000 --height 746 \
  --timeout 120000 \
  --spec session-2.json --annotations callouts-2.json -o frame-2.png
magick frame-1.png frame-2.png -append figure.png

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file (replace YOUR_FILE).

jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "ecoli_pggb_untangle_rows",
  "name": "pggb graph: untangle per strain (orientation, vs K12)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "BedTabixAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "height": 240
  }
}'

Run beside config.json, or add --out <dir>. Needs K12 in the config (jbrowse add-assembly).

This view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/demos/ecoli_pangenome/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "K12",
            "loc": "chr:1-4,641,652",
            "tracks": [
                {
                    "trackId": "ecoli_pggb_untangle_rows",
                    "height": 240
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.

npx @jbrowse/img --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --assembly K12 --loc chr:1-4,641,652 \
  --track ecoli_pggb_untangle_rows '{"height":240}' \
  --width 1000 --out figure.svg

For a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).

The session spec behind the figure, over this config.

{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1-4,641,652",
      "tracks": [
        {
          "trackId": "ecoli_pggb_untangle_rows",
          "height": 240
        }
      ]
    }
  ]
}
Open in JBrowse Web ↗

Large dataset: slow to open.

Or rebuild it from your own data:

Quickest: open the view, then File → Open track... for your files.

From scratch:

  1. Open your genomes: Open new genome in JBrowse Desktop, then File → Open genome... for each of the rest, or jbrowse add-assembly for each in JBrowse Web.This figure has K12 on X and IAI39 on Y.
  2. Open the view: Add → Dotplot view, and set both axes to those assemblies in the import form.
  3. Add your file: use the track panel under the two axis selectors and choose New track. Needs one indexed PAF of several genomes, PanSN-named (.pif.gz + .tbi).Or pick a synteny track you already have under Quick start, which fills in both axes.This figure uses “pggb graph: synteny from the graph (odgi untangle)”.
  4. Click Launch.

Rebuilds the figure headlessly. Edit the session file (location, track settings, your own track under sessionTracks) and rerun.

The figure stacks 2 frames: one command draws each, and ImageMagick stacks them.

Frame 1: Rows

cat > session-1.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1-4,641,652",
      "tracks": [
        {
          "trackId": "ecoli_pggb_untangle_rows",
          "height": 240
        }
      ]
    }
  ]
}
JSON

cat > callouts-1.json <<'JSON'
[
  {
    "type": "box",
    "color": "#ef6c00",
    "strokeWidth": 3,
    "anchor": {
      "trackId": "ecoli_pggb_untangle_rows",
      "loc": "chr:213,443-262,948"
    }
  },
  {
    "type": "box",
    "color": "#2e7d32",
    "strokeWidth": 3,
    "anchor": {
      "trackId": "ecoli_pggb_untangle_rows",
      "loc": "chr:302,899-501,436"
    }
  },
  {
    "type": "box",
    "color": "#6a1b9a",
    "strokeWidth": 3,
    "anchor": {
      "trackId": "ecoli_pggb_untangle_rows",
      "loc": "chr:914,963-1,194,177"
    }
  },
  {
    "type": "box",
    "color": "#1565c0",
    "strokeWidth": 3,
    "anchor": {
      "trackId": "ecoli_pggb_untangle_rows",
      "loc": "chr:1,635,838-2,229,302"
    }
  },
  {
    "type": "box",
    "color": "#00838f",
    "strokeWidth": 3,
    "anchor": {
      "trackId": "ecoli_pggb_untangle_rows",
      "loc": "chr:3,946,786-4,171,723"
    }
  }
]
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --width 1000 --height 450 \
  --timeout 90000 \
  --spec session-1.json --annotations callouts-1.json -o frame-1.png

Frame 2: Dotplot

cat > session-2.json <<'JSON'
{
  "views": [
    {
      "type": "DotplotView",
      "tracks": [
        "ecoli_pggb_untangle"
      ],
      "views": [
        {
          "assembly": "K12"
        },
        {
          "assembly": "IAI39"
        }
      ]
    }
  ]
}
JSON

cat > callouts-2.json <<'JSON'
[
  {
    "type": "box",
    "color": "#ef6c00",
    "strokeWidth": 3,
    "anchor": {
      "hLoc": "chr:213,443-262,948",
      "vLoc": "chr:449,188-493,004"
    }
  },
  {
    "type": "box",
    "color": "#2e7d32",
    "strokeWidth": 3,
    "anchor": {
      "hLoc": "chr:302,899-501,436",
      "vLoc": "chr:228,426-443,280"
    }
  },
  {
    "type": "box",
    "color": "#6a1b9a",
    "strokeWidth": 3,
    "anchor": {
      "hLoc": "chr:914,963-1,194,177",
      "vLoc": "chr:2,058,958-2,336,701"
    }
  },
  {
    "type": "box",
    "color": "#1565c0",
    "strokeWidth": 3,
    "anchor": {
      "hLoc": "chr:1,635,838-2,229,302",
      "vLoc": "chr:906,630-1,574,975"
    }
  },
  {
    "type": "box",
    "color": "#00838f",
    "strokeWidth": 3,
    "anchor": {
      "hLoc": "chr:3,946,786-4,171,723",
      "vLoc": "chr:3,083,154-3,330,675"
    }
  }
]
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --width 1000 --height 746 \
  --timeout 120000 \
  --spec session-2.json --annotations callouts-2.json -o frame-2.png
magick frame-1.png frame-2.png -append figure.png

More: Using JBrowse with AI agents.

This view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/demos/ecoli_pangenome/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "DotplotView",
            "tracks": [
                "ecoli_pggb_untangle"
            ],
            "views": [
                {
                    "assembly": "K12"
                },
                {
                    "assembly": "IAI39"
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "DotplotView",
      "tracks": [
        "ecoli_pggb_untangle"
      ],
      "views": [
        {
          "assembly": "K12"
        },
        {
          "assembly": "IAI39"
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/img dotplot --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --spec session.json \
  --width 1000 --out figure.svg

For a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).

The session spec behind the figure, over this config.

{
  "views": [
    {
      "type": "DotplotView",
      "tracks": [
        "ecoli_pggb_untangle"
      ],
      "views": [
        {
          "assembly": "K12"
        },
        {
          "assembly": "IAI39"
        }
      ]
    }
  ]
}

Variants against K12 (pggb -V)

pggb -V wrote a VCF of every variant the graph decomposes against the K12 path, genotyped in the other four strains. Its CHROM is the PanSN path, K12#1#chr, so rename it to the assembly's chr:

printf 'K12#1#chr\tchr\n' > rename_chrs.tsv
in_pggb bash -c "bcftools annotate --rename-chrs /data/rename_chrs.tsv \
  /data/pggb/*.smooth.final.K12.decomposed.vcf \
  | bcftools sort -Oz -o /data/ecoli_pggb.vcf.gz && tabix -C -p vcf /data/ecoli_pggb.vcf.gz"

Each strain is one haplotype, so rows: "haplotype" draws one row per strain, colored by that strain's allele:

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

{
  "type": "VariantTrack",
  "trackId": "ecoli_pggb_variants",
  "name": "pggb graph: pangenome variants (vs K12)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "VcfTabixAdapter",
    "uri": "ecoli_pggb.vcf.gz",
    "csi": true
  },
  "displays": [{ "type": "LinearVariantDisplay", "rows": "haplotype" }]
}
jbrowse add-track-json '{
  "type": "VariantTrack",
  "trackId": "ecoli_pggb_variants",
  "name": "pggb graph: pangenome variants (vs K12)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "VcfTabixAdapter",
    "uri": "ecoli_pggb.vcf.gz",
    "csi": true
  },
  "displays": [{ "type": "LinearVariantDisplay", "rows": "haplotype" }]
}'

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": "VariantTrack",
  "trackId": "ecoli_pggb_variants",
  "name": "pggb graph: pangenome variants (vs K12)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "VcfTabixAdapter",
    "uri": "ecoli_pggb.vcf.gz",
    "csi": true
  },
  "displays": [{ "type": "LinearVariantDisplay", "rows": "haplotype" }]
}

ecoli_pggb.vcf.gz is relative to a config.json. Replace it with its URL or its path on this computer.

With a length after the path name, as in -V K12:10000, pggb runs vcfbub and vcfwave over the VCF to decompose large sites into smaller variants, giving *.decomposed.vcf.

The undecomposed *.smooth.final.K12.vcf keeps one record per bubble (where paths split and rejoin) for the graph track to read.

Whole-genome alignment onto K12 (MAF)

pggb -M wrote the multiple alignment as a MAF. Re-root every block on K12, rename the rows to sample.chr, and blank the padding smoothxg writes around each row, then convert the MAF to the CSI-indexed BED that MafTabixAdapter reads:

curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/reroot_maf.py
# all.fa.gz is the pggb input: the padding sits on either end of a row, so
# only the genome says which bases are the row's own
python3 reroot_maf.py pggb/*.smooth.maf ecoli_pggb.maf all.fa.gz K12#1#chr
curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/maf_to_bed.py
python3 maf_to_bed.py ecoli_pggb.maf ecoli_pggb.maf.bed
bgzip ecoli_pggb.maf.bed
tabix -C -p bed ecoli_pggb.maf.bed.gz

To order the rows by how much graph each pair of strains shares, build a tree from odgi similarity and point nhLocation at it:

curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/odgi_similarity_to_newick.py
in_pggb odgi similarity -i "/data/$og" -D '#' -p 1 > ecoli_pggb_similarity.tsv
python3 odgi_similarity_to_newick.py ecoli_pggb_similarity.tsv ecoli_pggb.nh

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

{
  "type": "MafTrack",
  "trackId": "ecoli_pggb_maf",
  "name": "pggb graph: whole-genome alignment (MAF, vs K12)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "MafTabixAdapter",
    "samples": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"],
    "nhLocation": { "uri": "ecoli_pggb.nh" },
    "uri": "ecoli_pggb.maf.bed.gz",
    "csi": true
  }
}
jbrowse add-track-json '{
  "type": "MafTrack",
  "trackId": "ecoli_pggb_maf",
  "name": "pggb graph: whole-genome alignment (MAF, vs K12)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "MafTabixAdapter",
    "samples": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"],
    "nhLocation": { "uri": "ecoli_pggb.nh" },
    "uri": "ecoli_pggb.maf.bed.gz",
    "csi": true
  }
}'

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": "MafTrack",
  "trackId": "ecoli_pggb_maf",
  "name": "pggb graph: whole-genome alignment (MAF, vs K12)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "MafTabixAdapter",
    "samples": ["K12", "Sakai", "CFT073", "NCTC86", "IAI39"],
    "nhLocation": { "uri": "ecoli_pggb.nh" },
    "uri": "ecoli_pggb.maf.bed.gz",
    "csi": true
  }
}

ecoli_pggb.nh, ecoli_pggb.maf.bed.gz are relative to a config.json. Replace each with its URL or its path on this computer.

The graph's alignment projected onto K12 as a MAF, one row per strain, under the variant calls.
Open in JBrowse Web ↗

Or rebuild it from your own data:

Quickest: open the view, then File → Open track... for your files.

From scratch:

  1. Open your genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses K12, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  2. Add your track: File → Open track..., or check it in the track selector. Needs a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi).This figure uses “K12 genes”.
  3. Add the next track the same way. Needs a bgzip-compressed, tabix-indexed VCF (.vcf.gz + .tbi).This figure uses “pggb graph: pangenome variants (vs K12)”.
    1. Track menu → Rows → Per haplotypeSplits each sample into one row per haplotype, named <sample> HP1, HP2. The item stays disabled until phased variants are found in the file.
  4. Add the next track the same way. Needs a bgzip-compressed, tabix-indexed MAF (.maf.gz + .tbi).This figure uses “pggb graph: whole-genome alignment (MAF, vs K12)”.
  5. Go to your region in the location box.This figure is at chr:4,540,000-4,600,000.

Paste into a coding agent, with your goal on the first line.

My goal: [write yours, e.g. this view of my own files, or these track settings in my config.json]

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/demos/ecoli_pangenome/config.json
- Tracks:
  - K12 genes (K12_genes), FeatureTrack, a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi), drawn as LinearBasicDisplay
  - pggb graph: pangenome variants (vs K12) (ecoli_pggb_variants), VariantTrack, a bgzip-compressed, tabix-indexed VCF (.vcf.gz + .tbi), drawn as LinearVariantDisplay
  - pggb graph: whole-genome alignment (MAF, vs K12) (ecoli_pggb_maf), MafTrack, a bgzip-compressed, tabix-indexed MAF (.maf.gz + .tbi), drawn as LinearMafDisplay

Docs: https://jbrowse.org/jb2/docs/agents_authoring/ (writing a config), https://jbrowse.org/jb2/docs/agents/ (driving a running JBrowse). Use the jbrowse-authoring, jbrowse-hosted-data and jbrowse-capture skills if you have them. Check any config with `npx @jbrowse/cli validate`, then render it and look: a config that loads is not yet a track that drew.

The session spec that draws the view:
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:4,540,000-4,600,000",
      "tracks": [
        {
          "trackId": "K12_genes"
        },
        {
          "trackId": "ecoli_pggb_variants",
          "rows": "haplotype",
          "height": 170
        },
        {
          "trackId": "ecoli_pggb_maf",
          "height": 130
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:4,540,000-4,600,000",
      "tracks": [
        {
          "trackId": "K12_genes"
        },
        {
          "trackId": "ecoli_pggb_variants",
          "rows": "haplotype",
          "height": 170
        },
        {
          "trackId": "ecoli_pggb_maf",
          "height": 130
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --width 1000 --height 745 \
  --timeout 90000 \
  --spec session.json -o figure.png

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file (replace YOUR_FILE).

jbrowse add-track-json '{
  "type": "VariantTrack",
  "trackId": "ecoli_pggb_variants",
  "name": "pggb graph: pangenome variants (vs K12)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "VcfTabixAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "rows": "haplotype",
    "height": 170
  }
}'

jbrowse add-track-json '{
  "type": "MafTrack",
  "trackId": "ecoli_pggb_maf",
  "name": "pggb graph: whole-genome alignment (MAF, vs K12)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "MafTabixAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "height": 130
  }
}'

Run beside config.json, or add --out <dir>. Needs K12 in the config (jbrowse add-assembly).

This view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/demos/ecoli_pangenome/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "K12",
            "loc": "chr:4,540,000-4,600,000",
            "tracks": [
                {
                    "trackId": "K12_genes"
                },
                {
                    "trackId": "ecoli_pggb_variants",
                    "rows": "haplotype",
                    "height": 170
                },
                {
                    "trackId": "ecoli_pggb_maf",
                    "height": 130
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.

npx @jbrowse/img --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --assembly K12 --loc chr:4,540,000-4,600,000 \
  --track K12_genes \
  --track ecoli_pggb_variants '{"rows":"haplotype","height":170}' \
  --track ecoli_pggb_maf '{"height":130}' \
  --width 1000 --out figure.svg

For a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).

The session spec behind the figure, over this config.

{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:4,540,000-4,600,000",
      "tracks": [
        {
          "trackId": "K12_genes"
        },
        {
          "trackId": "ecoli_pggb_variants",
          "rows": "haplotype",
          "height": 170
        },
        {
          "trackId": "ecoli_pggb_maf",
          "height": 130
        }
      ]
    }
  ]
}

Drag across the rows, and the menu on release lists each strain the selection covers under two submenus:

  • Open aligned genome at the matching region opens that strain's genome at the aligned stretch
  • Linear synteny view, K12 vs... opens K12 and that strain as a linear synteny view
A drag across the MAF rows, the menu listing the strains it covers, and the synteny view the IAI39 entry opens.

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

  1. The pggb alignment, one row per strain; IAI39's row is blank mid-window
  2. Drag across the rows; the menu offers a view per strain
  3. K-12 over IAI39: no ribbon under ybhH and ybhI, which IAI39 lacks
Open this view in JBrowse Web ↗ ·

Quickest: open the view, then File → Open track... for your files.

From scratch:

  1. Open your genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses K12, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  2. Add your track: File → Open track..., or check it in the track selector. Needs a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi).This figure uses “K12 genes”.
    1. Track menu → Filter by → Genes → Only genesGenes counts every gene, transcript and RNA type, the configured transcript and container types, and a top-level CDS; the rest of a GFF, such as NCBI region and match rows, is not a gene.
    2. Track menu → Feature height → Compact
  3. Add the next track the same way. Needs a bgzip-compressed, tabix-indexed MAF (.maf.gz + .tbi).This figure uses “pggb graph: whole-genome alignment (MAF, vs K12)”.
    1. Track menu → Show → Tree (checked)On by default. The item is disabled until there is a tree to show — a clustering run, or a MAF track’s guide tree; the row labels have their own toggle beneath it.
  4. Go to your region in the location box.This figure is at chr:800,100-804,300.

Paste into a coding agent, with your goal on the first line.

My goal: [write yours, e.g. this view of my own files, or these track settings in my config.json]

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/demos/ecoli_pangenome/config.json
- Tracks:
  - K12 genes (K12_genes), FeatureTrack, a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi), drawn as LinearBasicDisplay
  - pggb graph: whole-genome alignment (MAF, vs K12) (ecoli_pggb_maf), MafTrack, a bgzip-compressed, tabix-indexed MAF (.maf.gz + .tbi), drawn as LinearMafDisplay

Docs: https://jbrowse.org/jb2/docs/agents_authoring/ (writing a config), https://jbrowse.org/jb2/docs/agents/ (driving a running JBrowse). Use the jbrowse-authoring, jbrowse-hosted-data and jbrowse-capture skills if you have them. Check any config with `npx @jbrowse/cli validate`, then render it and look: a config that loads is not yet a track that drew.

The session spec that draws the view:
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:800,100-804,300",
      "tracks": [
        {
          "trackId": "K12_genes",
          "filter": [
            "geneLike"
          ],
          "displayMode": "compact"
        },
        {
          "trackId": "ecoli_pggb_maf",
          "rows": {
            "axis": {
              "tree": true
            }
          },
          "height": 150
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:800,100-804,300",
      "tracks": [
        {
          "trackId": "K12_genes",
          "filter": [
            "geneLike"
          ],
          "displayMode": "compact"
        },
        {
          "trackId": "ecoli_pggb_maf",
          "rows": {
            "axis": {
              "tree": true
            }
          },
          "height": 150
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --width 1920 --height 1340 \
  --spec session.json -o figure.png

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file (replace YOUR_FILE).

jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "K12_genes",
  "name": "K12 genes",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "Gff3TabixAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "filter": [
      "geneLike"
    ],
    "displayMode": "compact"
  }
}'

jbrowse add-track-json '{
  "type": "MafTrack",
  "trackId": "ecoli_pggb_maf",
  "name": "pggb graph: whole-genome alignment (MAF, vs K12)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "MafTabixAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "rows": {
      "axis": {
        "tree": true
      }
    },
    "height": 150
  }
}'

Run beside config.json, or add --out <dir>. Needs K12 in the config (jbrowse add-assembly).

This view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/demos/ecoli_pangenome/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "K12",
            "loc": "chr:800,100-804,300",
            "tracks": [
                {
                    "trackId": "K12_genes",
                    "filter": [
                        "geneLike"
                    ],
                    "displayMode": "compact"
                },
                {
                    "trackId": "ecoli_pggb_maf",
                    "rows": {
                        "axis": {
                            "tree": True
                        }
                    },
                    "height": 150
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.

npx @jbrowse/img --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --assembly K12 --loc chr:800,100-804,300 \
  --track K12_genes '{"filter":["geneLike"],"displayMode":"compact"}' \
  --track ecoli_pggb_maf '{"rows":{"axis":{"tree":true}},"height":150}' \
  --width 1920 --out figure.svg

For a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).

The session spec behind the figure, over this config.

{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:800,100-804,300",
      "tracks": [
        {
          "trackId": "K12_genes",
          "filter": [
            "geneLike"
          ],
          "displayMode": "compact"
        },
        {
          "trackId": "ecoli_pggb_maf",
          "rows": {
            "axis": {
              "tree": true
            }
          },
          "height": 150
        }
      ]
    }
  ]
}

Pangenome depth: core versus accessory sequence

odgi depth counts how many paths cross each K12 window, so core sequence reads the strain count and sequence only K12 has reads 1. Make 500 bp windows, count, and write a bigWig:

reflen=$(awk -v p="K12#1#chr" '$1 == p {print $2}' all.fa.gz.fai)
awk -v p="K12#1#chr" -v len="$reflen" -v w=500 \
  'BEGIN { for (s = 0; s < len; s += w) { e = s + w; if (e > len) e = len
           print p "\t" s "\t" e } }' > depth_windows.bed

in_pggb odgi depth -i "/data/$og" -b /data/depth_windows.bed |
  awk -v p="K12#1#chr" -v OFS='\t' '$1 == p && $4 + 0 == $4 { print "chr", $2, $3, $4 }' |
  sort -k1,1 -k2,2n > ecoli_pggb_depth.bedgraph

printf 'chr\t%s\n' "$reflen" > chrom.sizes
bedGraphToBigWig ecoli_pggb_depth.bedgraph chrom.sizes ecoli_pggb_depth.bw

The config draws reference lines at the strain count and at 1:

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

{
  "type": "QuantitativeTrack",
  "trackId": "ecoli_pggb_depth",
  "name": "pggb graph: pangenome depth (paths over K12)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "BigWigAdapter",
    "uri": "ecoli_pggb_depth.bw"
  },
  "displayDefaults": {
    "encoding": {
      "y": {
        "axis": { "title": "paths" },
        "rules": [
          { "value": 5, "label": "all five strains" },
          { "value": 1, "label": "K12 alone" }
        ]
      }
    }
  }
}
jbrowse add-track ecoli_pggb_depth.bw \
  --trackId ecoli_pggb_depth \
  --name "pggb graph: pangenome depth (paths over K12)" \
  --assemblyNames K12 \
  --displayDefaults '{"encoding":{"y":{"axis":{"title":"paths"},"rules":[{"value":5,"label":"all five strains"},{"value":1,"label":"K12 alone"}]}}}' \
  --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:

{
  "type": "QuantitativeTrack",
  "trackId": "ecoli_pggb_depth",
  "name": "pggb graph: pangenome depth (paths over K12)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "BigWigAdapter",
    "uri": "ecoli_pggb_depth.bw"
  },
  "displayDefaults": {
    "encoding": {
      "y": {
        "axis": { "title": "paths" },
        "rules": [
          { "value": 5, "label": "all five strains" },
          { "value": 1, "label": "K12 alone" }
        ]
      }
    }
  }
}

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

The curve doubles over the rrnC and rrnB operons (ribosomal RNA gene copies), because the graph folds those two copies onto each other.

Per-strain presence

odgi pav splits depth per strain, as the fraction of each window that the strain's path crosses. Write one bigWig per strain other than K12:

in_pggb odgi pav -i "/data/$og" -b /data/depth_windows.bed > pav.tsv
for strain in Sakai CFT073 NCTC86 IAI39; do
  awk -F'\t' -v OFS='\t' -v g="${strain}#1#chr" \
    '$5 == g && $6 + 0 == $6 { print "chr", $2, $3, $6 }' pav.tsv |
    sort -k1,1 -k2,2n > "pav_${strain}.bedgraph"
  bedGraphToBigWig "pav_${strain}.bedgraph" chrom.sizes "ecoli_pggb_pav_${strain}.bw"
done

The four bigWigs load as one heatmap track, a row per strain, where a white column is a stretch that strain lacks:

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

{
  "type": "MultiQuantitativeTrack",
  "trackId": "ecoli_pggb_pav",
  "name": "pggb graph: per-strain presence (odgi pav, vs K12)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "subadapters": [
      {
        "type": "BigWigAdapter",
        "name": "Sakai",
        "uri": "ecoli_pggb_pav_Sakai.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "CFT073",
        "uri": "ecoli_pggb_pav_CFT073.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "NCTC86",
        "uri": "ecoli_pggb_pav_NCTC86.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "IAI39",
        "uri": "ecoli_pggb_pav_IAI39.bw"
      }
    ]
  },
  "displayDefaults": { "mark": "rect" }
}
jbrowse add-track-json '{
  "type": "MultiQuantitativeTrack",
  "trackId": "ecoli_pggb_pav",
  "name": "pggb graph: per-strain presence (odgi pav, vs K12)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "subadapters": [
      {
        "type": "BigWigAdapter",
        "name": "Sakai",
        "uri": "ecoli_pggb_pav_Sakai.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "CFT073",
        "uri": "ecoli_pggb_pav_CFT073.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "NCTC86",
        "uri": "ecoli_pggb_pav_NCTC86.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "IAI39",
        "uri": "ecoli_pggb_pav_IAI39.bw"
      }
    ]
  },
  "displayDefaults": { "mark": "rect" }
}'

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": "ecoli_pggb_pav",
  "name": "pggb graph: per-strain presence (odgi pav, vs K12)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "subadapters": [
      {
        "type": "BigWigAdapter",
        "name": "Sakai",
        "uri": "ecoli_pggb_pav_Sakai.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "CFT073",
        "uri": "ecoli_pggb_pav_CFT073.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "NCTC86",
        "uri": "ecoli_pggb_pav_NCTC86.bw"
      },
      {
        "type": "BigWigAdapter",
        "name": "IAI39",
        "uri": "ecoli_pggb_pav_IAI39.bw"
      }
    ]
  },
  "displayDefaults": { "mark": "rect" }
}

ecoli_pggb_pav_Sakai.bw, ecoli_pggb_pav_CFT073.bw, ecoli_pggb_pav_NCTC86.bw, ecoli_pggb_pav_IAI39.bw are relative to a config.json. Replace each with its URL or its path on this computer.

Open chr:450,000-590,000 with the K12 genes on. The figure shades chr:501,500-539,000.

K12 genes, the aggregate depth curve, and odgi pav below it, one row per non-K12 strain.
Open in JBrowse Web ↗

Or rebuild it from your own data:

Quickest: open the view, then File → Open track... for your files.

From scratch:

  1. Open your genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses K12, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  2. Add your track: File → Open track..., or check it in the track selector. Needs a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi).This figure uses “K12 genes”.
  3. Add the next track the same way. Needs a BigWig file (.bw).This figure uses “pggb graph: pangenome depth (paths over K12)”.
    1. Track menu → Y axis... → Reference linesHorizontal lines at 5 and 1, on the same scale as the plot. Each row takes a value, a label and a color; removing every row removes every line.
  4. Add the next track the same way. Needs one BigWig file (.bw) per row.This figure uses “pggb graph: per-strain presence (odgi pav, vs K12)”.
    1. Track menu → Plot type → Heatmap
  5. Go to your region in the location box.This figure is at chr:450,000-590,000.
  6. View menu → Zoom to region / use the location box, then add a highlightThis figure highlights 1 region; highlights can also be set with the &highlight= URL parameter.

Paste into a coding agent, with your goal on the first line.

My goal: [write yours, e.g. this view of my own files, or these track settings in my config.json]

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/demos/ecoli_pangenome/config.json
- Tracks:
  - K12 genes (K12_genes), FeatureTrack, a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi), drawn as LinearBasicDisplay
  - pggb graph: pangenome depth (paths over K12) (ecoli_pggb_depth), QuantitativeTrack, a BigWig file (.bw), drawn as LinearWiggleDisplay
  - pggb graph: per-strain presence (odgi pav, vs K12) (ecoli_pggb_pav), MultiQuantitativeTrack, one BigWig file (.bw) per row, drawn as LinearWiggleDisplay

Docs: https://jbrowse.org/jb2/docs/agents_authoring/ (writing a config), https://jbrowse.org/jb2/docs/agents/ (driving a running JBrowse). Use the jbrowse-authoring, jbrowse-hosted-data and jbrowse-capture skills if you have them. Check any config with `npx @jbrowse/cli validate`, then render it and look: a config that loads is not yet a track that drew.

The session spec that draws the view:
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:450,000-590,000",
      "highlight": [
        {
          "refName": "chr",
          "start": 501500,
          "end": 539000,
          "color": "rgba(255,193,7,0.30)"
        }
      ],
      "tracks": [
        {
          "trackId": "K12_genes",
          "height": 90
        },
        {
          "trackId": "ecoli_pggb_depth",
          "height": 150,
          "encoding": {
            "y": {
              "axis": {
                "title": "paths"
              },
              "rules": [
                {
                  "value": 5,
                  "label": "all five strains"
                },
                {
                  "value": 1,
                  "label": "K12 alone"
                }
              ]
            }
          }
        },
        {
          "trackId": "ecoli_pggb_pav",
          "mark": "rect",
          "height": 240
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:450,000-590,000",
      "highlight": [
        {
          "refName": "chr",
          "start": 501500,
          "end": 539000,
          "color": "rgba(255,193,7,0.30)"
        }
      ],
      "tracks": [
        {
          "trackId": "K12_genes",
          "height": 90
        },
        {
          "trackId": "ecoli_pggb_depth",
          "height": 150,
          "encoding": {
            "y": {
              "axis": {
                "title": "paths"
              },
              "rules": [
                {
                  "value": 5,
                  "label": "all five strains"
                },
                {
                  "value": 1,
                  "label": "K12 alone"
                }
              ]
            }
          }
        },
        {
          "trackId": "ecoli_pggb_pav",
          "mark": "rect",
          "height": 240
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --width 1000 --height 775 \
  --timeout 90000 \
  --spec session.json -o figure.png

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file (replace YOUR_FILE).

jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "K12_genes",
  "name": "K12 genes",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "Gff3TabixAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "height": 90
  }
}'

jbrowse add-track-json '{
  "type": "QuantitativeTrack",
  "trackId": "ecoli_pggb_depth",
  "name": "pggb graph: pangenome depth (paths over K12)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "BigWigAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "height": 150,
    "encoding": {
      "y": {
        "axis": {
          "title": "paths"
        },
        "rules": [
          {
            "value": 5,
            "label": "all five strains"
          },
          {
            "value": 1,
            "label": "K12 alone"
          }
        ]
      }
    }
  }
}'

jbrowse add-track-json '{
  "type": "MultiQuantitativeTrack",
  "trackId": "ecoli_pggb_pav",
  "name": "pggb graph: per-strain presence (odgi pav, vs K12)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "MultiWiggleAdapter",
    "bigWigs": [
      "YOUR_FILE_1",
      "YOUR_FILE_2"
    ]
  },
  "displayDefaults": {
    "mark": "rect",
    "height": 240
  }
}'

Run beside config.json, or add --out <dir>. Needs K12 in the config (jbrowse add-assembly).

This view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/demos/ecoli_pangenome/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "K12",
            "loc": "chr:450,000-590,000",
            "highlight": [
                {
                    "refName": "chr",
                    "start": 501500,
                    "end": 539000,
                    "color": "rgba(255,193,7,0.30)"
                }
            ],
            "tracks": [
                {
                    "trackId": "K12_genes",
                    "height": 90
                },
                {
                    "trackId": "ecoli_pggb_depth",
                    "height": 150,
                    "encoding": {
                        "y": {
                            "axis": {
                                "title": "paths"
                            },
                            "rules": [
                                {
                                    "value": 5,
                                    "label": "all five strains"
                                },
                                {
                                    "value": 1,
                                    "label": "K12 alone"
                                }
                            ]
                        }
                    }
                },
                {
                    "trackId": "ecoli_pggb_pav",
                    "mark": "rect",
                    "height": 240
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.

npx @jbrowse/img --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --assembly K12 --loc chr:450,000-590,000 \
  --view '{"highlight":[{"refName":"chr","start":501500,"end":539000,"color":"rgba(255,193,7,0.30)"}]}' \
  --track K12_genes '{"height":90}' \
  --track ecoli_pggb_depth '{"height":150,"encoding":{"y":{"axis":{"title":"paths"},"rules":[{"value":5,"label":"all five strains"},{"value":1,"label":"K12 alone"}]}}}' \
  --track ecoli_pggb_pav '{"mark":"rect","height":240}' \
  --width 1000 --out figure.svg

For a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).

The session spec behind the figure, over this config.

{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:450,000-590,000",
      "highlight": [
        {
          "refName": "chr",
          "start": 501500,
          "end": 539000,
          "color": "rgba(255,193,7,0.30)"
        }
      ],
      "tracks": [
        {
          "trackId": "K12_genes",
          "height": 90
        },
        {
          "trackId": "ecoli_pggb_depth",
          "height": 150,
          "encoding": {
            "y": {
              "axis": {
                "title": "paths"
              },
              "rules": [
                {
                  "value": 5,
                  "label": "all five strains"
                },
                {
                  "value": 1,
                  "label": "K12 alone"
                }
              ]
            }
          }
        },
        {
          "trackId": "ecoli_pggb_pav",
          "mark": "rect",
          "height": 240
        }
      ]
    }
  ]
}

Across the shaded span IAI39's row is empty and depth drops by one. The deeper trough to its right, chr:565,000-585,000, is the prophage that begins at intD, where depth falls toward the K12 alone line.

Testing the CPZ-55 depth trough with nanopore reads

A depth trough marks a stretch of K12 the other strains lack. Reads from a new isolate show whether it lacks the stretch too. We'll load nanopore reads from E. coli E146, an isolate outside the graph, over CPZ-55, a cryptic prophage only K12 has. Download them:

curl -fO https://ftp.sra.ebi.ac.uk/vol1/fastq/DRR193/DRR193901/DRR193901_1.fastq.gz

Map them onto K12:

minimap2 -ax map-ont K12.fa DRR193901_1.fastq.gz | samtools sort -o ecoli_e146_ont.bam
samtools index ecoli_e146_ont.bam

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

{
  "trackId": "ecoli_e146_ont",
  "name": "E146 nanopore reads (vs K12)",
  "uri": "ecoli_e146_ont.bam",
  "assemblyNames": ["K12"]
}
jbrowse add-track ecoli_e146_ont.bam \
  --trackId ecoli_e146_ont \
  --name "E146 nanopore reads (vs K12)" \
  --assemblyNames K12 \
  --load copy

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: ecoli_e146_ont.bam

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

  • Track name: E146 nanopore reads (vs K12)
  • Assembly: K12

Click Add.

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

Type chr:2,554,000-2,570,000. Reads long enough to cross the trough show it as a single labelled deletion.

Nanopore reads from another isolate over one K12 depth trough, with the graph's depth curve and MAF below.
Open in JBrowse Web ↗

Large dataset: slow to open.

Or rebuild it from your own data:

Quickest: open the view, then File → Open track... for your files.

From scratch:

  1. Open your genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses K12, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  2. Add your track: File → Open track..., or check it in the track selector. Needs a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi).This figure uses “K12 genes”.
  3. Add the next track the same way. Needs a BAM file (.bam + .bai).This figure uses “E146 nanopore reads (vs K12)”.
    1. Track menu → Read connections → View as pairs/link supplementary alignments (checked)
    2. Track menu → Group by → Split reads
    3. Track menu → Color by → Insert size and orientation
  4. Add the next track the same way. Needs a BigWig file (.bw).This figure uses “pggb graph: pangenome depth (paths over K12)”.
  5. Add the next track the same way. Needs a bgzip-compressed, tabix-indexed MAF (.maf.gz + .tbi).This figure uses “pggb graph: whole-genome alignment (MAF, vs K12)”.
  6. Go to your region in the location box.This figure is at chr:2,554,000-2,570,000.

Paste into a coding agent, with your goal on the first line.

My goal: [write yours, e.g. this view of my own files, or these track settings in my config.json]

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/demos/ecoli_pangenome/config.json
- Tracks:
  - K12 genes (K12_genes), FeatureTrack, a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi), drawn as LinearBasicDisplay
  - E146 nanopore reads (vs K12) (ecoli_e146_ont), AlignmentsTrack, a BAM file (.bam + .bai), drawn as LinearAlignmentsDisplay
  - pggb graph: pangenome depth (paths over K12) (ecoli_pggb_depth), QuantitativeTrack, a BigWig file (.bw), drawn as LinearWiggleDisplay
  - pggb graph: whole-genome alignment (MAF, vs K12) (ecoli_pggb_maf), MafTrack, a bgzip-compressed, tabix-indexed MAF (.maf.gz + .tbi), drawn as LinearMafDisplay

Docs: https://jbrowse.org/jb2/docs/agents_authoring/ (writing a config), https://jbrowse.org/jb2/docs/agents/ (driving a running JBrowse). Use the jbrowse-authoring, jbrowse-hosted-data and jbrowse-capture skills if you have them. Check any config with `npx @jbrowse/cli validate`, then render it and look: a config that loads is not yet a track that drew.

The session spec that draws the view:
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:2,554,000-2,570,000",
      "tracks": [
        {
          "trackId": "K12_genes"
        },
        {
          "trackId": "ecoli_e146_ont",
          "unit": "chain",
          "facet": "split",
          "encoding": {
            "color": "insertSizeAndOrientation"
          },
          "height": 210
        },
        {
          "trackId": "ecoli_pggb_depth",
          "height": 100
        },
        {
          "trackId": "ecoli_pggb_maf",
          "height": 130
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:2,554,000-2,570,000",
      "tracks": [
        {
          "trackId": "K12_genes"
        },
        {
          "trackId": "ecoli_e146_ont",
          "unit": "chain",
          "facet": "split",
          "encoding": {
            "color": "insertSizeAndOrientation"
          },
          "height": 210
        },
        {
          "trackId": "ecoli_pggb_depth",
          "height": 100
        },
        {
          "trackId": "ecoli_pggb_maf",
          "height": 130
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --width 1000 --height 865 \
  --timeout 120000 \
  --spec session.json -o figure.png

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file (replace YOUR_FILE).

jbrowse add-track-json '{
  "type": "AlignmentsTrack",
  "trackId": "ecoli_e146_ont",
  "name": "E146 nanopore reads (vs K12)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "BamAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "unit": "chain",
    "facet": "split",
    "encoding": {
      "color": "insertSizeAndOrientation"
    },
    "height": 210
  }
}'

jbrowse add-track-json '{
  "type": "QuantitativeTrack",
  "trackId": "ecoli_pggb_depth",
  "name": "pggb graph: pangenome depth (paths over K12)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "BigWigAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "height": 100
  }
}'

jbrowse add-track-json '{
  "type": "MafTrack",
  "trackId": "ecoli_pggb_maf",
  "name": "pggb graph: whole-genome alignment (MAF, vs K12)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "MafTabixAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "height": 130
  }
}'

Run beside config.json, or add --out <dir>. Needs K12 in the config (jbrowse add-assembly).

This view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/demos/ecoli_pangenome/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "K12",
            "loc": "chr:2,554,000-2,570,000",
            "tracks": [
                {
                    "trackId": "K12_genes"
                },
                {
                    "trackId": "ecoli_e146_ont",
                    "unit": "chain",
                    "facet": "split",
                    "encoding": {
                        "color": "insertSizeAndOrientation"
                    },
                    "height": 210
                },
                {
                    "trackId": "ecoli_pggb_depth",
                    "height": 100
                },
                {
                    "trackId": "ecoli_pggb_maf",
                    "height": 130
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.

npx @jbrowse/img --config https://jbrowse.org/demos/ecoli_pangenome/config.json \
  --assembly K12 --loc chr:2,554,000-2,570,000 \
  --track K12_genes \
  --track ecoli_e146_ont '{"unit":"chain","facet":"split","encoding":{"color":"insertSizeAndOrientation"},"height":210}' \
  --track ecoli_pggb_depth '{"height":100}' \
  --track ecoli_pggb_maf '{"height":130}' \
  --width 1000 --out figure.svg

For a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).

The session spec behind the figure, over this config.

{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:2,554,000-2,570,000",
      "tracks": [
        {
          "trackId": "K12_genes"
        },
        {
          "trackId": "ecoli_e146_ont",
          "unit": "chain",
          "facet": "split",
          "encoding": {
            "color": "insertSizeAndOrientation"
          },
          "height": 210
        },
        {
          "trackId": "ecoli_pggb_depth",
          "height": 100
        },
        {
          "trackId": "ecoli_pggb_maf",
          "height": 130
        }
      ]
    }
  ]
}

The graph as a track

The graph genome view plugin draws the graph itself as a track of the linear view. gfa-to-tabix build indexes it by following the K12 path, and takes the bubbles from pggb's undecomposed VCF, renamed like the decomposed one:

in_pggb bash -c "bcftools annotate --rename-chrs /data/rename_chrs.tsv \
  /data/pggb/*.smooth.final.K12.vcf \
  | bcftools sort -Oz -o /data/ecoli_pggb_snarls.vcf.gz && tabix -C -p vcf /data/ecoli_pggb_snarls.vcf.gz"
gfa-to-tabix build pggb/*.smooth.final.gfa -o ecoli_pggb --reference K12 --snarls ecoli_pggb_snarls.vcf.gz

The command writes the segments and links, a coarse tier with variants under 50 bp folded into the reference, and ecoli_pggb.config.json, all in the contig layout. The uris below are our hosted copy.

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

{
  "type": "GraphTrack",
  "trackId": "ecoli_pggb_segments",
  "name": "pggb graph segments (whole graph, by locus)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "RgfaTabixAdapter",
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
    "format": 2,
    "coarse": {
      "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
      "format": 2,
      "aboveBpPerPx": 5
    }
  },
  "displayDefaults": {
    "labels": { "name": { "show": false }, "description": { "show": false } }
  },
  "displays": [
    { "type": "LinearGraphDisplay" },
    { "type": "LinearBasicDisplay" }
  ]
}
jbrowse add-track-json '{
  "type": "GraphTrack",
  "trackId": "ecoli_pggb_segments",
  "name": "pggb graph segments (whole graph, by locus)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "RgfaTabixAdapter",
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
    "format": 2,
    "coarse": {
      "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
      "format": 2,
      "aboveBpPerPx": 5
    }
  },
  "displayDefaults": {
    "labels": { "name": { "show": false }, "description": { "show": false } }
  },
  "displays": [
    { "type": "LinearGraphDisplay" },
    { "type": "LinearBasicDisplay" }
  ]
}'

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": "GraphTrack",
  "trackId": "ecoli_pggb_segments",
  "name": "pggb graph segments (whole graph, by locus)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "RgfaTabixAdapter",
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
    "format": 2,
    "coarse": {
      "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
      "format": 2,
      "aboveBpPerPx": 5
    }
  },
  "displayDefaults": {
    "labels": { "name": { "show": false }, "description": { "show": false } }
  },
  "displays": [
    { "type": "LinearGraphDisplay" },
    { "type": "LinearBasicDisplay" }
  ]
}

Open track... → Add pangenome graph track adds the same track from an empty session:

Adding the graph track to a K12 session with Open track... → Add pangenome graph track.

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

  1. Load the graph by URL from File, Open track
  2. The graph draws under the genes, cut from the window on screen
  3. Select the IS5 element on the scale bar and zoom to it
  4. At IS5 the graph re-cuts: strains without the element take the arc past it
Open this view in JBrowse Web ↗ ·

Quickest: open the view, then File → Open track... for your files.

From scratch:

  1. Open your genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses K12, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  2. Add your track: File → Open track..., or check it in the track selector. Needs a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi).This figure uses “K12 genes”.
  3. Go to your region in the location box.This figure is at chr:1,290,000-1,310,000.

Paste into a coding agent, with your goal on the first line.

My goal: [write yours, e.g. this view of my own files, or these track settings in my config.json]

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/code/jb2/main/test_data/graphgenomeview/config.json
- Tracks:
  - K12 genes (K12_genes), FeatureTrack, a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi), drawn as LinearBasicDisplay

Docs: https://jbrowse.org/jb2/docs/agents_authoring/ (writing a config), https://jbrowse.org/jb2/docs/agents/ (driving a running JBrowse). Use the jbrowse-authoring, jbrowse-hosted-data and jbrowse-capture skills if you have them. Check any config with `npx @jbrowse/cli validate`, then render it and look: a config that loads is not yet a track that drew.

The session spec that draws the view:
{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "K12_genes",
      "name": "K12 genes",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
        },
        "index": {
          "location": {
            "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
          },
          "indexType": "CSI"
        }
      }
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1,290,000-1,310,000",
      "tracks": [
        {
          "trackId": "K12_genes",
          "type": "LinearBasicDisplay",
          "height": 70
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "K12_genes",
      "name": "K12 genes",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
        },
        "index": {
          "location": {
            "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
          },
          "indexType": "CSI"
        }
      }
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1,290,000-1,310,000",
      "tracks": [
        {
          "trackId": "K12_genes",
          "type": "LinearBasicDisplay",
          "height": 70
        }
      ]
    }
  ]
}
JSON

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

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file.

jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "K12_genes",
  "name": "K12 genes",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "Gff3TabixAdapter",
    "gffGzLocation": {
      "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
    },
    "index": {
      "location": {
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
      },
      "indexType": "CSI"
    }
  },
  "displayDefaults": {
    "height": 70
  }
}'

Run beside config.json, or add --out <dir>. Needs K12 in the config (jbrowse add-assembly).

This view in a notebook, with jbrowse-anywidget. Swap a track's uri for your file.

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/code/jb2/main/test_data/graphgenomeview/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []) + [
        {
            "type": "FeatureTrack",
            "trackId": "K12_genes",
            "name": "K12 genes",
            "assemblyNames": [
                "K12"
            ],
            "adapter": {
                "type": "Gff3TabixAdapter",
                "gffGzLocation": {
                    "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
                },
                "index": {
                    "location": {
                        "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
                    },
                    "indexType": "CSI"
                }
            }
        }
    ],
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "K12",
            "loc": "chr:1,290,000-1,310,000",
            "tracks": [
                {
                    "trackId": "K12_genes",
                    "type": "LinearBasicDisplay",
                    "height": 70
                }
            ]
        }
    ],
)
app  # display the widget

jbrowse-img draws this view as an SVG, no browser needed. Swap --config or a track for your own.

cat > tracks.json <<'JSON'
[
  {
    "type": "FeatureTrack",
    "trackId": "K12_genes",
    "name": "K12 genes",
    "assemblyNames": [
      "K12"
    ],
    "adapter": {
      "type": "Gff3TabixAdapter",
      "gffGzLocation": {
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
      },
      "index": {
        "location": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
        },
        "indexType": "CSI"
      }
    }
  }
]
JSON

npx @jbrowse/img --config https://jbrowse.org/code/jb2/main/test_data/graphgenomeview/config.json \
  --tracks tracks.json \
  --assembly K12 --loc chr:1,290,000-1,310,000 \
  --track K12_genes display:LinearBasicDisplay '{"height":70}' \
  --width 1920 --out figure.svg

For a PNG, --out figure.png (needs rsvg-convert: apt install librsvg2-bin, brew install librsvg).

The session spec behind the figure, over this config.

{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "K12_genes",
      "name": "K12 genes",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
        },
        "index": {
          "location": {
            "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
          },
          "indexType": "CSI"
        }
      }
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1,290,000-1,310,000",
      "tracks": [
        {
          "trackId": "K12_genes",
          "type": "LinearBasicDisplay",
          "height": 70
        }
      ]
    }
  ]
}

Type chr:1,292,500-1,307,500. Zoomed out past five bp per pixel, the track draws the coarse tier, the graph with variants under 50 bp folded into the reference, with charcoal where the strains differ. The tier also loads as a separate track:

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

{
  "type": "GraphTrack",
  "trackId": "ecoli_pggb_tier50",
  "name": "pggb graph, variants under 50 bp folded (coarse tier)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "RgfaTabixAdapter",
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
    "format": 2
  },
  "displays": [
    { "type": "LinearGraphDisplay" },
    { "type": "LinearBasicDisplay" }
  ]
}
jbrowse add-track-json '{
  "type": "GraphTrack",
  "trackId": "ecoli_pggb_tier50",
  "name": "pggb graph, variants under 50 bp folded (coarse tier)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "RgfaTabixAdapter",
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
    "format": 2
  },
  "displays": [
    { "type": "LinearGraphDisplay" },
    { "type": "LinearBasicDisplay" }
  ]
}'

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": "GraphTrack",
  "trackId": "ecoli_pggb_tier50",
  "name": "pggb graph, variants under 50 bp folded (coarse tier)",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "RgfaTabixAdapter",
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
    "format": 2
  },
  "displays": [
    { "type": "LinearGraphDisplay" },
    { "type": "LinearBasicDisplay" }
  ]
}

To set the tier beside the strains:

  • In the tier track's menu, Display types → Feature display draws the tier's segments as a row at any zoom, marking where the strains differ.
  • Turn on the MAF track between the tier and the graph. A strain's row breaks across each bubble it skips, so the MAF names the strains.
  • Add a second copy of the K12 genes and keep the insertion sequences with Filter by → Edit filters... and startsWith(feature.name || '','ins').
K12 around two insertion sequences: the bubble tier, the MAF's strain rows and the graph track. The highlight is insH21.
Open in JBrowse Web ↗

Large dataset: slow to open.

Or rebuild it from your own data:

Quickest: open the view, then File → Open track... for your files.

From scratch:

  1. Open your genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses K12, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  2. Add your track: File → Open track..., or check it in the track selector. Needs a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi).This figure uses “K12 insertion sequences”.
    1. Track menu → Filter by → add the expressionThis figure filters on startsWith(get(feature,'name') || '','ins').
  3. Add the next track the same way.This figure uses “pggb graph, variants under 50 bp folded (coarse tier)”.
    1. Track menu → Show → Names (unchecked)
    2. Track menu → Show → Descriptions (unchecked)
    3. Track menu → Settings → colorA per-feature expression. The Color by radios write a solid color, a field's palette, and the strand colors only, so an expression is authored on the track config.
  4. Add the next track the same way. Needs a bgzip-compressed, tabix-indexed MAF (.maf.gz + .tbi).This figure uses “pggb graph: whole-genome alignment (MAF, vs K12)”.
    1. Track menu → Edit colors/arrangement... → drag the rows into orderThe same dialog renames a row and recolors it, so a figure's 5 rows carry their order, any labels it shows, and any color it picked.
    2. Track menu → Show → Coverage (unchecked)
  5. Add the next track the same way.This figure uses “pggb graph segments (whole graph, by locus)”.
  6. Go to your region in the location box.This figure is at chr:1,292,500-1,307,500.
  7. View menu → Zoom to region / use the location box, then add a highlightThis figure highlights 1 region; highlights can also be set with the &highlight= URL parameter.

Some settings have no step yet: see Session.

Paste into a coding agent, with your goal on the first line.

My goal: [write yours, e.g. this view of my own files, or these track settings in my config.json]

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/code/jb2/main/test_data/graphgenomeview/config.json
- Tracks:
  - K12 insertion sequences (K12_insertion_sequences), FeatureTrack, a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi), drawn as LinearBasicDisplay
  - pggb graph, variants under 50 bp folded (coarse tier) (ecoli_pggb_tier50), GraphTrack, drawn as LinearBasicDisplay
  - pggb graph: whole-genome alignment (MAF, vs K12) (ecoli_pggb_maf), MafTrack, a bgzip-compressed, tabix-indexed MAF (.maf.gz + .tbi), drawn as LinearMafDisplay
  - pggb graph segments (whole graph, by locus) (ecoli_pggb_segments), GraphTrack, drawn as LinearGraphDisplay

Docs: https://jbrowse.org/jb2/docs/agents_authoring/ (writing a config), https://jbrowse.org/jb2/docs/agents/ (driving a running JBrowse). Use the jbrowse-authoring, jbrowse-hosted-data and jbrowse-capture skills if you have them. Check any config with `npx @jbrowse/cli validate`, then render it and look: a config that loads is not yet a track that drew.

The session spec that draws the view:
{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "K12_genes",
      "name": "K12 genes",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
        },
        "index": {
          "location": {
            "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
          },
          "indexType": "CSI"
        }
      }
    },
    {
      "type": "FeatureTrack",
      "trackId": "K12_insertion_sequences",
      "name": "K12 insertion sequences",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
        },
        "index": {
          "location": {
            "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
          },
          "indexType": "CSI"
        }
      }
    },
    {
      "type": "GraphTrack",
      "trackId": "ecoli_pggb_tier50",
      "name": "pggb graph, variants under 50 bp folded (coarse tier)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "RgfaTabixAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
        "format": 2
      },
      "displays": [
        {
          "type": "LinearGraphDisplay"
        },
        {
          "type": "LinearBasicDisplay"
        }
      ]
    },
    {
      "type": "MafTrack",
      "trackId": "ecoli_pggb_maf",
      "name": "pggb graph: whole-genome alignment (MAF, vs K12)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "MafTabixAdapter",
        "samples": [
          "K12",
          "Sakai",
          "CFT073",
          "NCTC86",
          "IAI39"
        ],
        "nhLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.nh"
        },
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.maf.bed.gz",
        "csi": true
      }
    },
    {
      "type": "GraphTrack",
      "trackId": "ecoli_pggb_segments",
      "name": "pggb graph segments (whole graph, by locus)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "RgfaTabixAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
        "format": 2,
        "coarse": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
          "format": 2,
          "aboveBpPerPx": 5
        }
      },
      "displayDefaults": {
        "labels": {
          "name": {
            "show": false
          },
          "description": {
            "show": false
          }
        }
      },
      "displays": [
        {
          "type": "LinearGraphDisplay"
        },
        {
          "type": "LinearBasicDisplay"
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1,292,500-1,307,500",
      "highlight": [
        {
          "assemblyName": "K12",
          "refName": "chr",
          "start": 1299498,
          "end": 1300697,
          "color": "rgba(21,101,192,0.12)"
        }
      ],
      "tracks": [
        {
          "trackId": "K12_insertion_sequences",
          "filter": [
            "jexl:startsWith(get(feature,'name') || '','ins')"
          ],
          "height": 50
        },
        {
          "trackId": "ecoli_pggb_tier50",
          "type": "LinearBasicDisplay",
          "labels": {
            "name": {
              "show": false
            },
            "description": {
              "show": false
            }
          },
          "height": 50,
          "encoding": {
            "color": {
              "value": "jexl:get(feature,'rank')>0 ? 'rgb(60,65,72)' : 'hsl(' + min(300, max(0, ((get(feature,'start')+get(feature,'end'))/2 - 1292500) / 15000 * 300)) + ',70%,50%)'"
            }
          }
        },
        {
          "trackId": "ecoli_pggb_maf",
          "rows": {
            "sort": [
              "K12",
              "CFT073",
              "IAI39",
              "NCTC86",
              "Sakai"
            ]
          },
          "coverage": {
            "show": false
          },
          "height": 110
        },
        {
          "trackId": "ecoli_pggb_segments",
          "type": "LinearGraphDisplay",
          "color": {
            "field": "position",
            "domainMin": 1292500,
            "domainMax": 1307500
          },
          "geneTrackId": "K12_genes",
          "height": 240
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "K12_genes",
      "name": "K12 genes",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
        },
        "index": {
          "location": {
            "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
          },
          "indexType": "CSI"
        }
      }
    },
    {
      "type": "FeatureTrack",
      "trackId": "K12_insertion_sequences",
      "name": "K12 insertion sequences",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
        },
        "index": {
          "location": {
            "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
          },
          "indexType": "CSI"
        }
      }
    },
    {
      "type": "GraphTrack",
      "trackId": "ecoli_pggb_tier50",
      "name": "pggb graph, variants under 50 bp folded (coarse tier)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "RgfaTabixAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
        "format": 2
      },
      "displays": [
        {
          "type": "LinearGraphDisplay"
        },
        {
          "type": "LinearBasicDisplay"
        }
      ]
    },
    {
      "type": "MafTrack",
      "trackId": "ecoli_pggb_maf",
      "name": "pggb graph: whole-genome alignment (MAF, vs K12)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "MafTabixAdapter",
        "samples": [
          "K12",
          "Sakai",
          "CFT073",
          "NCTC86",
          "IAI39"
        ],
        "nhLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.nh"
        },
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.maf.bed.gz",
        "csi": true
      }
    },
    {
      "type": "GraphTrack",
      "trackId": "ecoli_pggb_segments",
      "name": "pggb graph segments (whole graph, by locus)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "RgfaTabixAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
        "format": 2,
        "coarse": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
          "format": 2,
          "aboveBpPerPx": 5
        }
      },
      "displayDefaults": {
        "labels": {
          "name": {
            "show": false
          },
          "description": {
            "show": false
          }
        }
      },
      "displays": [
        {
          "type": "LinearGraphDisplay"
        },
        {
          "type": "LinearBasicDisplay"
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1,292,500-1,307,500",
      "highlight": [
        {
          "assemblyName": "K12",
          "refName": "chr",
          "start": 1299498,
          "end": 1300697,
          "color": "rgba(21,101,192,0.12)"
        }
      ],
      "tracks": [
        {
          "trackId": "K12_insertion_sequences",
          "filter": [
            "jexl:startsWith(get(feature,'name') || '','ins')"
          ],
          "height": 50
        },
        {
          "trackId": "ecoli_pggb_tier50",
          "type": "LinearBasicDisplay",
          "labels": {
            "name": {
              "show": false
            },
            "description": {
              "show": false
            }
          },
          "height": 50,
          "encoding": {
            "color": {
              "value": "jexl:get(feature,'rank')>0 ? 'rgb(60,65,72)' : 'hsl(' + min(300, max(0, ((get(feature,'start')+get(feature,'end'))/2 - 1292500) / 15000 * 300)) + ',70%,50%)'"
            }
          }
        },
        {
          "trackId": "ecoli_pggb_maf",
          "rows": {
            "sort": [
              "K12",
              "CFT073",
              "IAI39",
              "NCTC86",
              "Sakai"
            ]
          },
          "coverage": {
            "show": false
          },
          "height": 110
        },
        {
          "trackId": "ecoli_pggb_segments",
          "type": "LinearGraphDisplay",
          "color": {
            "field": "position",
            "domainMin": 1292500,
            "domainMax": 1307500
          },
          "geneTrackId": "K12_genes",
          "height": 240
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/code/jb2/main/test_data/graphgenomeview/config.json \
  --width 1000 --height 780 \
  --timeout 120000 \
  --spec session.json -o figure.png

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file.

jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "K12_genes",
  "name": "K12 genes",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "Gff3TabixAdapter",
    "gffGzLocation": {
      "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
    },
    "index": {
      "location": {
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
      },
      "indexType": "CSI"
    }
  }
}'

jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "K12_insertion_sequences",
  "name": "K12 insertion sequences",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "Gff3TabixAdapter",
    "gffGzLocation": {
      "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
    },
    "index": {
      "location": {
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
      },
      "indexType": "CSI"
    }
  },
  "displayDefaults": {
    "filter": [
      "jexl:startsWith(get(feature,'\''name'\'') || '\'''\'','\''ins'\'')"
    ],
    "height": 50
  }
}'

jbrowse add-track-json '{
  "type": "GraphTrack",
  "trackId": "ecoli_pggb_tier50",
  "name": "pggb graph, variants under 50 bp folded (coarse tier)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "RgfaTabixAdapter",
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
    "format": 2
  },
  "displays": [
    {
      "type": "LinearGraphDisplay"
    },
    {
      "type": "LinearBasicDisplay",
      "labels": {
        "name": {
          "show": false
        },
        "description": {
          "show": false
        }
      },
      "height": 50,
      "encoding": {
        "color": {
          "value": "jexl:get(feature,'\''rank'\'')>0 ? '\''rgb(60,65,72)'\'' : '\''hsl('\'' + min(300, max(0, ((get(feature,'\''start'\'')+get(feature,'\''end'\''))/2 - 1292500) / 15000 * 300)) + '\'',70%,50%)'\''"
        }
      }
    }
  ]
}'

jbrowse add-track-json '{
  "type": "MafTrack",
  "trackId": "ecoli_pggb_maf",
  "name": "pggb graph: whole-genome alignment (MAF, vs K12)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "MafTabixAdapter",
    "samples": [
      "K12",
      "Sakai",
      "CFT073",
      "NCTC86",
      "IAI39"
    ],
    "nhLocation": {
      "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.nh"
    },
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.maf.bed.gz",
    "csi": true
  },
  "displayDefaults": {
    "rows": {
      "sort": [
        "K12",
        "CFT073",
        "IAI39",
        "NCTC86",
        "Sakai"
      ]
    },
    "coverage": {
      "show": false
    },
    "height": 110
  }
}'

jbrowse add-track-json '{
  "type": "GraphTrack",
  "trackId": "ecoli_pggb_segments",
  "name": "pggb graph segments (whole graph, by locus)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "RgfaTabixAdapter",
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
    "format": 2,
    "coarse": {
      "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
      "format": 2,
      "aboveBpPerPx": 5
    }
  },
  "displayDefaults": {
    "labels": {
      "name": {
        "show": false
      },
      "description": {
        "show": false
      }
    }
  },
  "displays": [
    {
      "type": "LinearGraphDisplay"
    },
    {
      "type": "LinearBasicDisplay"
    }
  ]
}'

Run beside config.json, or add --out <dir>. Needs K12 in the config (jbrowse add-assembly).

The session spec behind the figure, over this config.

{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "K12_genes",
      "name": "K12 genes",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
        },
        "index": {
          "location": {
            "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
          },
          "indexType": "CSI"
        }
      }
    },
    {
      "type": "FeatureTrack",
      "trackId": "K12_insertion_sequences",
      "name": "K12 insertion sequences",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
        },
        "index": {
          "location": {
            "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
          },
          "indexType": "CSI"
        }
      }
    },
    {
      "type": "GraphTrack",
      "trackId": "ecoli_pggb_tier50",
      "name": "pggb graph, variants under 50 bp folded (coarse tier)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "RgfaTabixAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
        "format": 2
      },
      "displays": [
        {
          "type": "LinearGraphDisplay"
        },
        {
          "type": "LinearBasicDisplay"
        }
      ]
    },
    {
      "type": "MafTrack",
      "trackId": "ecoli_pggb_maf",
      "name": "pggb graph: whole-genome alignment (MAF, vs K12)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "MafTabixAdapter",
        "samples": [
          "K12",
          "Sakai",
          "CFT073",
          "NCTC86",
          "IAI39"
        ],
        "nhLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.nh"
        },
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.maf.bed.gz",
        "csi": true
      }
    },
    {
      "type": "GraphTrack",
      "trackId": "ecoli_pggb_segments",
      "name": "pggb graph segments (whole graph, by locus)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "RgfaTabixAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
        "format": 2,
        "coarse": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
          "format": 2,
          "aboveBpPerPx": 5
        }
      },
      "displayDefaults": {
        "labels": {
          "name": {
            "show": false
          },
          "description": {
            "show": false
          }
        }
      },
      "displays": [
        {
          "type": "LinearGraphDisplay"
        },
        {
          "type": "LinearBasicDisplay"
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1,292,500-1,307,500",
      "highlight": [
        {
          "assemblyName": "K12",
          "refName": "chr",
          "start": 1299498,
          "end": 1300697,
          "color": "rgba(21,101,192,0.12)"
        }
      ],
      "tracks": [
        {
          "trackId": "K12_insertion_sequences",
          "filter": [
            "jexl:startsWith(get(feature,'name') || '','ins')"
          ],
          "height": 50
        },
        {
          "trackId": "ecoli_pggb_tier50",
          "type": "LinearBasicDisplay",
          "labels": {
            "name": {
              "show": false
            },
            "description": {
              "show": false
            }
          },
          "height": 50,
          "encoding": {
            "color": {
              "value": "jexl:get(feature,'rank')>0 ? 'rgb(60,65,72)' : 'hsl(' + min(300, max(0, ((get(feature,'start')+get(feature,'end'))/2 - 1292500) / 15000 * 300)) + ',70%,50%)'"
            }
          }
        },
        {
          "trackId": "ecoli_pggb_maf",
          "rows": {
            "sort": [
              "K12",
              "CFT073",
              "IAI39",
              "NCTC86",
              "Sakai"
            ]
          },
          "coverage": {
            "show": false
          },
          "height": 110
        },
        {
          "trackId": "ecoli_pggb_segments",
          "type": "LinearGraphDisplay",
          "color": {
            "field": "position",
            "domainMin": 1292500,
            "domainMax": 1307500
          },
          "geneTrackId": "K12_genes",
          "height": 240
        }
      ]
    }
  ]
}

A segment K12 lacks has coordinates on the strain that has it, and its right-click menu opens that strain's genome there. Type chr:1,004,500-1,004,961, right-click the 75 bp CFT073 segment and pick Open in CFT073.

A node's menu on the CFT073 allele, and the CFT073 view its Open in entry adds.

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

  1. Right-click the CFT073 allele and open it on CFT073
  2. On CFT073, ssuE runs into pyrD: the genes K-12 has between them are gone
Open this view in JBrowse Web ↗ ·

Quickest: open the view, then File → Open track... for your files.

From scratch:

  1. Open pane 1: Add → Linear genome view.
    1. Open your genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses K12, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
    2. Add your track: + → Add track in this view's track selector, or check it there. Needs a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi).This figure uses “K12 genes”.
    3. Go to your region in the location box.This figure is at chr:996,800-1,005,900.
  2. Open pane 2: Add → Linear genome view.
    1. Open your genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses K12, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
    2. Add your track: + → Add track in this view's track selector, or check it there.This figure uses “pggb graph segments (whole graph, by locus)”.
      1. Track menu → Layout → Force-directed
    3. Go to your region in the location box.This figure is at chr:1,004,500-1,004,961.

Some settings have no step yet: see Session.

Paste into a coding agent, with your goal on the first line.

My goal: [write yours, e.g. this view of my own files, or these track settings in my config.json]

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/code/jb2/main/test_data/graphgenomeview/ecoli_pangenome.json
- Tracks:
  - K12 genes (K12_genes), FeatureTrack, a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi), drawn as LinearBasicDisplay
  - pggb graph segments (whole graph, by locus) (ecoli_pggb_segments), GraphTrack, drawn as LinearGraphDisplay

Docs: https://jbrowse.org/jb2/docs/agents_authoring/ (writing a config), https://jbrowse.org/jb2/docs/agents/ (driving a running JBrowse). Use the jbrowse-authoring, jbrowse-hosted-data and jbrowse-capture skills if you have them. Check any config with `npx @jbrowse/cli validate`, then render it and look: a config that loads is not yet a track that drew.

The session spec that draws the view:
{
  "sessionTracks": [
    {
      "type": "GraphTrack",
      "trackId": "ecoli_pggb_segments",
      "name": "pggb graph segments (whole graph, by locus)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "RgfaTabixAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
        "format": 2,
        "coarse": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
          "format": 2,
          "aboveBpPerPx": 5
        }
      },
      "displayDefaults": {
        "labels": {
          "name": {
            "show": false
          },
          "description": {
            "show": false
          }
        }
      },
      "displays": [
        {
          "type": "LinearGraphDisplay"
        },
        {
          "type": "LinearBasicDisplay"
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:996,800-1,005,900",
      "tracks": [
        {
          "trackId": "K12_genes"
        }
      ]
    },
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1,004,500-1,004,961",
      "tracks": [
        {
          "trackId": "ecoli_pggb_segments",
          "type": "LinearGraphDisplay",
          "layoutMode": "force",
          "color": {
            "field": "rank"
          },
          "maxRegionBp": 508,
          "layers": {
            "bubbles": false
          },
          "height": 420
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "type": "GraphTrack",
      "trackId": "ecoli_pggb_segments",
      "name": "pggb graph segments (whole graph, by locus)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "RgfaTabixAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
        "format": 2,
        "coarse": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
          "format": 2,
          "aboveBpPerPx": 5
        }
      },
      "displayDefaults": {
        "labels": {
          "name": {
            "show": false
          },
          "description": {
            "show": false
          }
        }
      },
      "displays": [
        {
          "type": "LinearGraphDisplay"
        },
        {
          "type": "LinearBasicDisplay"
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:996,800-1,005,900",
      "tracks": [
        {
          "trackId": "K12_genes"
        }
      ]
    },
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1,004,500-1,004,961",
      "tracks": [
        {
          "trackId": "ecoli_pggb_segments",
          "type": "LinearGraphDisplay",
          "layoutMode": "force",
          "color": {
            "field": "rank"
          },
          "maxRegionBp": 508,
          "layers": {
            "bubbles": false
          },
          "height": 420
        }
      ]
    }
  ]
}
JSON

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

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file.

jbrowse add-track-json '{
  "type": "GraphTrack",
  "trackId": "ecoli_pggb_segments",
  "name": "pggb graph segments (whole graph, by locus)",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "RgfaTabixAdapter",
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
    "format": 2,
    "coarse": {
      "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
      "format": 2,
      "aboveBpPerPx": 5
    }
  },
  "displayDefaults": {
    "labels": {
      "name": {
        "show": false
      },
      "description": {
        "show": false
      }
    }
  },
  "displays": [
    {
      "type": "LinearGraphDisplay"
    },
    {
      "type": "LinearBasicDisplay"
    }
  ]
}'

Run beside config.json, or add --out <dir>. Needs K12 in the config (jbrowse add-assembly).

The session spec behind the figure, over this config.

{
  "sessionTracks": [
    {
      "type": "GraphTrack",
      "trackId": "ecoli_pggb_segments",
      "name": "pggb graph segments (whole graph, by locus)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "RgfaTabixAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
        "format": 2,
        "coarse": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.fold50",
          "format": 2,
          "aboveBpPerPx": 5
        }
      },
      "displayDefaults": {
        "labels": {
          "name": {
            "show": false
          },
          "description": {
            "show": false
          }
        }
      },
      "displays": [
        {
          "type": "LinearGraphDisplay"
        },
        {
          "type": "LinearBasicDisplay"
        }
      ]
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:996,800-1,005,900",
      "tracks": [
        {
          "trackId": "K12_genes"
        }
      ]
    },
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1,004,500-1,004,961",
      "tracks": [
        {
          "trackId": "ecoli_pggb_segments",
          "type": "LinearGraphDisplay",
          "layoutMode": "force",
          "color": {
            "field": "rank"
          },
          "maxRegionBp": 508,
          "layers": {
            "bubbles": false
          },
          "height": 420
        }
      ]
    }
  ]
}

Coloring each segment by how many strains have it

The index records which strains pass through each segment, and a feature track over the same files colors each segment by that count:

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

{
  "type": "FeatureTrack",
  "trackId": "ecoli_pggb_carriage",
  "name": "pggb graph: strains per segment",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "RgfaTabixAdapter",
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
    "format": 2
  },
  "displayDefaults": {
    "displayMode": "collapsed",
    "labels": { "name": { "show": false }, "description": { "show": false } },
    "encoding": {
      "color": {
        "field": "sampleCount",
        "scale": {
          "domain": ["5", "4", "3", "2", "1"],
          "range": ["#bdbdbd", "#fed976", "#feb24c", "#fd8d3c", "#e31a1c"],
          "names": [
            "All 5 strains (core)",
            "4 strains",
            "3 strains",
            "2 strains",
            "1 strain (private)"
          ]
        },
        "legend": { "title": "Strains" }
      }
    }
  }
}
jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "ecoli_pggb_carriage",
  "name": "pggb graph: strains per segment",
  "assemblyNames": ["K12"],
  "adapter": {
    "type": "RgfaTabixAdapter",
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
    "format": 2
  },
  "displayDefaults": {
    "displayMode": "collapsed",
    "labels": { "name": { "show": false }, "description": { "show": false } },
    "encoding": {
      "color": {
        "field": "sampleCount",
        "scale": {
          "domain": ["5", "4", "3", "2", "1"],
          "range": ["#bdbdbd", "#fed976", "#feb24c", "#fd8d3c", "#e31a1c"],
          "names": [
            "All 5 strains (core)",
            "4 strains",
            "3 strains",
            "2 strains",
            "1 strain (private)"
          ]
        },
        "legend": { "title": "Strains" }
      }
    }
  }
}'

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

  • File type: Indexed GFA (gfa-to-tabix .segs.bed.gz or .graph.bed.gz)
  • Path: https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb.graph.bed.gz
  • Track name: pggb graph: strains per segment
  • Assembly: K12

Type chr:1,299,499-1,300,693, the IS5 element. Advanced → Edit plot... in the track menu shows the encoding.color block as text and applies edits live.

The IS5 element: the depth curve over the strains-per-segment track. Red marks a segment K12 alone has.
Open in JBrowse Web ↗

Large dataset: slow to open.

Or rebuild it from your own data:

Quickest: open the view, then File → Open track... for your files.

From scratch:

  1. Open your genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses K12, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  2. Add your track: File → Open track..., or check it in the track selector. Needs a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi).This figure uses “K12 genes”.
    1. Track menu → Filter by → Edit filters...
  3. Add the next track the same way. Needs a BigWig file (.bw).This figure uses “pggb graph: pangenome depth (paths over K12)”.
  4. Add the next track the same way.This figure uses “pggb graph: strains per segment”.
  5. Go to your region in the location box.This figure is at chr:1,299,300-1,300,900.

Paste into a coding agent, with your goal on the first line.

My goal: [write yours, e.g. this view of my own files, or these track settings in my config.json]

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/code/jb2/main/test_data/graphgenomeview/config.json
- Tracks:
  - K12 genes (K12_genes), FeatureTrack, a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi), drawn as LinearBasicDisplay
  - pggb graph: pangenome depth (paths over K12) (ecoli_pggb_depth), QuantitativeTrack, a BigWig file (.bw), drawn as LinearWiggleDisplay
  - pggb graph: strains per segment (ecoli_pggb_carriage), FeatureTrack, drawn as LinearBasicDisplay

Docs: https://jbrowse.org/jb2/docs/agents_authoring/ (writing a config), https://jbrowse.org/jb2/docs/agents/ (driving a running JBrowse). Use the jbrowse-authoring, jbrowse-hosted-data and jbrowse-capture skills if you have them. Check any config with `npx @jbrowse/cli validate`, then render it and look: a config that loads is not yet a track that drew.

The session spec that draws the view:
{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "K12_genes",
      "name": "K12 genes",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
        },
        "index": {
          "location": {
            "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
          },
          "indexType": "CSI"
        }
      }
    },
    {
      "type": "QuantitativeTrack",
      "trackId": "ecoli_pggb_depth",
      "name": "pggb graph: pangenome depth (paths over K12)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "BigWigAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb_depth.bw"
      },
      "displayDefaults": {
        "encoding": {
          "y": {
            "axis": {
              "title": "paths"
            },
            "rules": [
              {
                "value": 5,
                "label": "all five strains"
              },
              {
                "value": 1,
                "label": "K12 alone"
              }
            ]
          }
        }
      }
    },
    {
      "type": "FeatureTrack",
      "trackId": "ecoli_pggb_carriage",
      "name": "pggb graph: strains per segment",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "RgfaTabixAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
        "format": 2
      },
      "displayDefaults": {
        "displayMode": "collapsed",
        "labels": {
          "name": {
            "show": false
          },
          "description": {
            "show": false
          }
        },
        "encoding": {
          "color": {
            "field": "sampleCount",
            "scale": {
              "domain": [
                "5",
                "4",
                "3",
                "2",
                "1"
              ],
              "range": [
                "#bdbdbd",
                "#fed976",
                "#feb24c",
                "#fd8d3c",
                "#e31a1c"
              ],
              "names": [
                "All 5 strains (core)",
                "4 strains",
                "3 strains",
                "2 strains",
                "1 strain (private)"
              ]
            },
            "legend": {
              "title": "Strains"
            }
          }
        }
      }
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1,299,300-1,300,900",
      "tracks": [
        {
          "trackId": "K12_genes",
          "height": 70,
          "filter": [
            {
              "field": "type",
              "equal": "gene"
            }
          ]
        },
        {
          "trackId": "ecoli_pggb_depth",
          "height": 100
        },
        {
          "trackId": "ecoli_pggb_carriage",
          "type": "LinearBasicDisplay",
          "height": 150
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "K12_genes",
      "name": "K12 genes",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
        },
        "index": {
          "location": {
            "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
          },
          "indexType": "CSI"
        }
      }
    },
    {
      "type": "QuantitativeTrack",
      "trackId": "ecoli_pggb_depth",
      "name": "pggb graph: pangenome depth (paths over K12)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "BigWigAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb_depth.bw"
      },
      "displayDefaults": {
        "encoding": {
          "y": {
            "axis": {
              "title": "paths"
            },
            "rules": [
              {
                "value": 5,
                "label": "all five strains"
              },
              {
                "value": 1,
                "label": "K12 alone"
              }
            ]
          }
        }
      }
    },
    {
      "type": "FeatureTrack",
      "trackId": "ecoli_pggb_carriage",
      "name": "pggb graph: strains per segment",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "RgfaTabixAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
        "format": 2
      },
      "displayDefaults": {
        "displayMode": "collapsed",
        "labels": {
          "name": {
            "show": false
          },
          "description": {
            "show": false
          }
        },
        "encoding": {
          "color": {
            "field": "sampleCount",
            "scale": {
              "domain": [
                "5",
                "4",
                "3",
                "2",
                "1"
              ],
              "range": [
                "#bdbdbd",
                "#fed976",
                "#feb24c",
                "#fd8d3c",
                "#e31a1c"
              ],
              "names": [
                "All 5 strains (core)",
                "4 strains",
                "3 strains",
                "2 strains",
                "1 strain (private)"
              ]
            },
            "legend": {
              "title": "Strains"
            }
          }
        }
      }
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1,299,300-1,300,900",
      "tracks": [
        {
          "trackId": "K12_genes",
          "height": 70,
          "filter": [
            {
              "field": "type",
              "equal": "gene"
            }
          ]
        },
        {
          "trackId": "ecoli_pggb_depth",
          "height": 100
        },
        {
          "trackId": "ecoli_pggb_carriage",
          "type": "LinearBasicDisplay",
          "height": 150
        }
      ]
    }
  ]
}
JSON

cat > callouts.json <<'JSON'
[
  {
    "type": "text",
    "text": "odgi depth, windowed",
    "fontSize": 15,
    "anchor": {
      "trackId": "ecoli_pggb_depth",
      "loc": "chr:1,300,000",
      "fracY": 0.3
    }
  },
  {
    "type": "text",
    "text": "GFA SM:Z: tag, per segment",
    "fontSize": 15,
    "anchor": {
      "trackId": "ecoli_pggb_carriage",
      "loc": "chr:1,299,340",
      "fracY": 0.55
    }
  }
]
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/code/jb2/main/test_data/graphgenomeview/config.json \
  --width 1000 --height 610 \
  --timeout 120000 \
  --spec session.json --annotations callouts.json -o figure.png

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file.

jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "K12_genes",
  "name": "K12 genes",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "Gff3TabixAdapter",
    "gffGzLocation": {
      "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
    },
    "index": {
      "location": {
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
      },
      "indexType": "CSI"
    }
  },
  "displayDefaults": {
    "height": 70,
    "filter": [
      {
        "field": "type",
        "equal": "gene"
      }
    ]
  }
}'

jbrowse add-track https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb_depth.bw \
  --trackId ecoli_pggb_depth \
  --name "pggb graph: pangenome depth (paths over K12)" \
  --assemblyNames K12 \
  --displayDefaults '{"encoding":{"y":{"axis":{"title":"paths"},"rules":[{"value":5,"label":"all five strains"},{"value":1,"label":"K12 alone"}]}},"height":100}'

jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "ecoli_pggb_carriage",
  "name": "pggb graph: strains per segment",
  "assemblyNames": [
    "K12"
  ],
  "adapter": {
    "type": "RgfaTabixAdapter",
    "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
    "format": 2
  },
  "displayDefaults": {
    "displayMode": "collapsed",
    "labels": {
      "name": {
        "show": false
      },
      "description": {
        "show": false
      }
    },
    "encoding": {
      "color": {
        "field": "sampleCount",
        "scale": {
          "domain": [
            "5",
            "4",
            "3",
            "2",
            "1"
          ],
          "range": [
            "#bdbdbd",
            "#fed976",
            "#feb24c",
            "#fd8d3c",
            "#e31a1c"
          ],
          "names": [
            "All 5 strains (core)",
            "4 strains",
            "3 strains",
            "2 strains",
            "1 strain (private)"
          ]
        },
        "legend": {
          "title": "Strains"
        }
      }
    }
  }
}'

Run beside config.json, or add --out <dir>. Needs K12 in the config (jbrowse add-assembly).

The session spec behind the figure, over this config.

{
  "sessionTracks": [
    {
      "type": "FeatureTrack",
      "trackId": "K12_genes",
      "name": "K12 genes",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "Gff3TabixAdapter",
        "gffGzLocation": {
          "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz"
        },
        "index": {
          "location": {
            "uri": "https://jbrowse.org/demos/ecoli_pangenome/K12.gff.gz.csi"
          },
          "indexType": "CSI"
        }
      }
    },
    {
      "type": "QuantitativeTrack",
      "trackId": "ecoli_pggb_depth",
      "name": "pggb graph: pangenome depth (paths over K12)",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "BigWigAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb_depth.bw"
      },
      "displayDefaults": {
        "encoding": {
          "y": {
            "axis": {
              "title": "paths"
            },
            "rules": [
              {
                "value": 5,
                "label": "all five strains"
              },
              {
                "value": 1,
                "label": "K12 alone"
              }
            ]
          }
        }
      }
    },
    {
      "type": "FeatureTrack",
      "trackId": "ecoli_pggb_carriage",
      "name": "pggb graph: strains per segment",
      "assemblyNames": [
        "K12"
      ],
      "adapter": {
        "type": "RgfaTabixAdapter",
        "uri": "https://jbrowse.org/demos/ecoli_pangenome/ecoli_pggb",
        "format": 2
      },
      "displayDefaults": {
        "displayMode": "collapsed",
        "labels": {
          "name": {
            "show": false
          },
          "description": {
            "show": false
          }
        },
        "encoding": {
          "color": {
            "field": "sampleCount",
            "scale": {
              "domain": [
                "5",
                "4",
                "3",
                "2",
                "1"
              ],
              "range": [
                "#bdbdbd",
                "#fed976",
                "#feb24c",
                "#fd8d3c",
                "#e31a1c"
              ],
              "names": [
                "All 5 strains (core)",
                "4 strains",
                "3 strains",
                "2 strains",
                "1 strain (private)"
              ]
            },
            "legend": {
              "title": "Strains"
            }
          }
        }
      }
    }
  ],
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "K12",
      "loc": "chr:1,299,300-1,300,900",
      "tracks": [
        {
          "trackId": "K12_genes",
          "height": 70,
          "filter": [
            {
              "field": "type",
              "equal": "gene"
            }
          ]
        },
        {
          "trackId": "ecoli_pggb_depth",
          "height": 100
        },
        {
          "trackId": "ecoli_pggb_carriage",
          "type": "LinearBasicDisplay",
          "height": 150
        }
      ]
    }
  ]
}

Reproduce it end to end

build_ecoli_pangenome_graph.sh runs every step above except the E146 read mapping. The script:

  1. Downloads the assemblies and builds the graph with pggb.
  2. Writes the synteny, variant, MAF, depth, presence and graph tracks from it.
  3. Downloads JBrowse and writes a config.json with the assemblies, their gene tracks, every other track on this page, and a default session.
curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/build_ecoli_pangenome_graph.sh
bash build_ecoli_pangenome_graph.sh
npx --yes serve ecoli_pangenome_graph_build/jbrowse2

CONTAINER=singularity forces the container runtime. To add genomes, add rows to the strain table in the script; wfmash time grows with the square of the genome count.

See also