Skip to main content

Rearrangements between genomes by type (SyRI)

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.11. Desktop beta builds are coming soon.

The Columbia and Landsberg accessions of Arabidopsis thaliana differ by an inversion of more than a megabase on the short arm of chromosome 4, first seen under the microscope and later confirmed by assembling Landsberg. We find it again by aligning six assembled accessions and running SyRI, which sorts what an alignment contains into syntenic, inverted, translocated and duplicated regions. We compare each accession with Columbia and with the accession above it, and every comparison goes into one file whose ribbons take their color from the type SyRI assigns: the stack plotsr draws, and the same accessions as lanes under Columbia coordinates.

Prerequisites

Where the data comes from

TAIR10 for Columbia, and the chromosome-level assemblies of five more accessions from Jiao and Schneeberger 2020, the first three the ones a figure in the plotsr paper stacks.

Aligning a pair and running SyRI

SyRI reads a whole-genome alignment of two chromosome-level assemblies whose homologous chromosomes share a name. The script keeps the five nuclear chromosomes of each assembly and names them Chr1 to Chr5. It aligns each accession to Col-0, and to the accession above it in the stack:

# asm5 is the preset for genomes of one species
# --eqx writes = and X in the CIGAR, which SyRI reads the mismatches from
minimap2 -cx asm5 --eqx Col-0.fa Ler.fa >Col-0_Ler.aln.paf

# -F P says the alignment is PAF
# --nc runs that many chromosomes at once
syri -c Col-0_Ler.aln.paf -r Col-0.fa -q Ler.fa -F P --prefix Col-0_Ler. --nc 5

Col-0_Ler.syri.out holds one row per annotation. The structural regions are the rows with no parent: SYN, INV, TRANS, INVTR, DUP and INVDP, each with its interval on both genomes.

SyRI regions as one PAF

A SyRI region is an interval on each of two genomes, the same shape as a PAF alignment record. syri_to_paf.py writes each region as one, naming sequences <genome>#1#<chrom> so records from many pairs can share a file, with the inverted types on the minus strand and two tags: syri, the type, and color, the color plotsr gives that type. It reads sequence lengths from a .chrom.sizes file beside syri.out, the first two columns of the FASTA index. Concatenating the records from every pair gives one file for every view below:

curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/syri_to_paf.py
for name in Col-0 Ler; do
  samtools faidx $name.fa
  cut -f1,2 $name.fa.fai >$name.chrom.sizes
done
python3 syri_to_paf.py Col-0_Ler.syri.out --reference Col-0 --query Ler
cat Col-0_*.paf Ler_Cvi.paf Cvi_Eri.paf Eri_Kyo.paf Kyo_Sha.paf >syri_pangenome.paf

The ribbons need no sequence, so each accession gets an assembly with a ChromSizesAdapter over its .chrom.sizes. Col-0 is one; Ler, Cvi, Eri, Kyo and Sha repeat it with their own name and file:

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

{
  "name": "Col-0",
  "uri": "Col-0.chrom.sizes"
}
jbrowse add-assembly Col-0.chrom.sizes \
  --name Col-0 \
  --load copy

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

Col-0.chrom.sizes

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

  • Genome name: Col-0

Col-0.chrom.sizes is relative to a config.json. Replace it with its URL or its path on this computer.

Two entries in the track config matter here:

  • attributeColumns names the PAF tags the palette button offers: syri becomes a color-by mode, and color is the color the file puts beside each type
  • the MultiWaySyntenyDisplay entry sets up the lanes view: domain names the lanes and ribbonColor colors the bands by syri

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

{
  "type": "SyntenyTrack",
  "trackId": "syri_pangenome",
  "name": "SyRI regions",
  "assemblyNames": ["Col-0", "Ler", "Cvi", "Eri", "Kyo", "Sha"],
  "adapter": {
    "type": "MultiGenomePAFAdapter",
    "uri": "syri_pangenome.paf",
    "attributeColumns": ["syri", "color"]
  },
  "displays": [
    {
      "type": "MultiWaySyntenyDisplay",
      "domain": ["Ler", "Cvi", "Eri", "Kyo", "Sha"],
      "ribbonColor": {
        "field": "syri",
        "domain": ["SYN", "INV", "TRANS", "INVTR", "DUP", "INVDP"]
      }
    }
  ]
}
jbrowse add-track-json '{
  "type": "SyntenyTrack",
  "trackId": "syri_pangenome",
  "name": "SyRI regions",
  "assemblyNames": ["Col-0", "Ler", "Cvi", "Eri", "Kyo", "Sha"],
  "adapter": {
    "type": "MultiGenomePAFAdapter",
    "uri": "syri_pangenome.paf",
    "attributeColumns": ["syri", "color"]
  },
  "displays": [
    {
      "type": "MultiWaySyntenyDisplay",
      "domain": ["Ler", "Cvi", "Eri", "Kyo", "Sha"],
      "ribbonColor": {
        "field": "syri",
        "domain": ["SYN", "INV", "TRANS", "INVTR", "DUP", "INVDP"]
      }
    }
  ]
}'

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": "syri_pangenome",
  "name": "SyRI regions",
  "assemblyNames": ["Col-0", "Ler", "Cvi", "Eri", "Kyo", "Sha"],
  "adapter": {
    "type": "MultiGenomePAFAdapter",
    "uri": "syri_pangenome.paf",
    "attributeColumns": ["syri", "color"]
  },
  "displays": [
    {
      "type": "MultiWaySyntenyDisplay",
      "domain": ["Ler", "Cvi", "Eri", "Kyo", "Sha"],
      "ribbonColor": {
        "field": "syri",
        "domain": ["SYN", "INV", "TRANS", "INVTR", "DUP", "INVDP"]
      }
    }
  ]
}

syri_pangenome.paf 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.

Columbia against Landsberg on chromosome 4

Open the first 6 Mb of chromosome 4 in both accessions and pick syri under Color by value on the palette button in the view header:

Goes at the top level of config.json, replacing any defaultSession there. See Default session.

{
  "defaultSession": {
    "name": "Col-0 vs Ler, chromosome 4",
    "views": [
      {
        "type": "LinearSyntenyView",
        "views": [
          { "assembly": "Col-0", "loc": "Chr4:1-6,000,000" },
          { "assembly": "Ler", "loc": "Chr4:1-6,000,000" }
        ],
        "tracks": [["syri_pangenome"]],
        "color": {
          "field": "syri",
          "domain": ["SYN", "INV", "TRANS", "INVTR", "DUP", "INVDP"]
        },
        "drawCurves": true,
        "opacity": 0.9,
        "fadeThinAlignmentsMode": "off",
        "collapseEmptyRows": true,
        "levelHeights": [260]
      }
    ]
  }
}
jbrowse set-default-session --session - << 'EOF'
{
  "name": "Col-0 vs Ler, chromosome 4",
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        { "assembly": "Col-0", "loc": "Chr4:1-6,000,000" },
        { "assembly": "Ler", "loc": "Chr4:1-6,000,000" }
      ],
      "tracks": [["syri_pangenome"]],
      "color": {
        "field": "syri",
        "domain": ["SYN", "INV", "TRANS", "INVTR", "DUP", "INVDP"]
      },
      "drawCurves": true,
      "opacity": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [260]
    }
  ]
}
EOF

Open this session in JBrowse Web ↗

The syntenic regions run straight down in grey, and one inverted region crosses over between them. The thin ribbons leaving the frame are duplications and translocations whose other end sits on another chromosome, which the label at the edge of the frame names. The key has one row per color, since plotsr paints an inverted translocation as a translocation and an inverted duplication as a duplication: INVTR shares a row with TRANS and INVDP with DUP.

Chromosome 4 in Col-0 above and Ler below, SyRI regions colored by type. The crossed ribbon is the inversion between the two accessions, with syntenic regions either side.
Open in JBrowse Web ↗Open in JBrowse Desktop ↗

This session loads a large dataset and takes a while to open.

Or rebuild it from your own data:

Opening in Desktop needs JBrowse Desktop 5.0+, and saves the view as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or File → Session):

https://jbrowse.org/code/jb2/main/?config=test_data%2Fsyri%2Fconfig.json&session=spec-%7B%22views%22%3A%5B%7B%22type%22%3A%22LinearSyntenyView%22%2C%22views%22%3A%5B%7B%22assembly%22%3A%22Col-0%22%2C%22loc%22%3A%22Chr4%3A1-6%2C000%2C000%22%7D%2C%7B%22assembly%22%3A%22Ler%22%2C%22loc%22%3A%22Chr4%3A1-6%2C000%2C000%22%7D%5D%2C%22tracks%22%3A%5B%5B%22syri_pangenome%22%5D%5D%2C%22color%22%3A%7B%22field%22%3A%22syri%22%2C%22domain%22%3A%5B%22SYN%22%2C%22INV%22%2C%22TRANS%22%2C%22INVTR%22%2C%22DUP%22%2C%22INVDP%22%5D%7D%2C%22drawCurves%22%3Atrue%2C%22opacity%22%3A0.9%2C%22fadeThinAlignmentsMode%22%3A%22off%22%2C%22collapseEmptyRows%22%3Atrue%2C%22levelHeights%22%3A%5B260%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+syri%2Fcol_ler_chr4

With your own data, the steps behind the figure:

  1. Open your genomes: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one), then File → Open genome... for each of the rest.This figure's rows, top to bottom: Col-0, Ler.
  2. Open the view: Add → Linear synteny view, and set the rows to those assemblies in the import form.
  3. Point the import form at your own file: click the arrow between two rows, choose New track, and paste a URL or pick a local file.A synteny track the session already has is quicker: pick it under Quick start, which fills in the rows itself.This figure uses “SyRI regions”.
  4. Click Launch.
  5. Synteny view header → palette button → Color by value → syriThe palette button's tooltip reads "Color by: ...".
  6. Synteny display settings (the sliders button in the view header) → Curved lines (checked)
  7. Synteny display settings (the sliders button in the view header) → Opacity → drag to 0.9Lower values let dense overlapping ribbons show through each other.
  8. Drag the bar below a synteny level to resize it.This figure's level is 260px tall.
  9. Row 1 (Col-0)
    1. Type your region of interest into the location box and press Enter.This figure is at Chr4:1-6,000,000.
  10. Row 2 (Ler)
    1. Type your region of interest into the location box and press Enter.This figure is at Chr4:1-6,000,000.

Some settings have no written step yet — see the Spec tab.

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genomes in your JBrowse Web's config.json: run jbrowse add-assembly once for each.This figure's rows, top to bottom: Col-0, Ler.
  2. Open the view: Add → Linear synteny view, and set the rows to those assemblies in the import form.
  3. Point the import form at your own file: click the arrow between two rows, choose New track, and paste a URL or pick a local file.A synteny track the session already has is quicker: pick it under Quick start, which fills in the rows itself.This figure uses “SyRI regions”.
  4. Click Launch.
  5. Synteny view header → palette button → Color by value → syriThe palette button's tooltip reads "Color by: ...".
  6. Synteny display settings (the sliders button in the view header) → Curved lines (checked)
  7. Synteny display settings (the sliders button in the view header) → Opacity → drag to 0.9Lower values let dense overlapping ribbons show through each other.
  8. Drag the bar below a synteny level to resize it.This figure's level is 260px tall.
  9. Row 1 (Col-0)
    1. Type your region of interest into the location box and press Enter.This figure is at Chr4:1-6,000,000.
  10. Row 2 (Ler)
    1. Type your region of interest into the location box and press Enter.This figure is at Chr4:1-6,000,000.

Some settings have no written step yet — see the Spec tab.

This session spec draws the figure from test_data/syri/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "Col-0",
          "loc": "Chr4:1-6,000,000"
        },
        {
          "assembly": "Ler",
          "loc": "Chr4:1-6,000,000"
        }
      ],
      "tracks": [
        [
          "syri_pangenome"
        ]
      ],
      "color": {
        "field": "syri",
        "domain": [
          "SYN",
          "INV",
          "TRANS",
          "INVTR",
          "DUP",
          "INVDP"
        ]
      },
      "drawCurves": true,
      "opacity": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [
        260
      ]
    }
  ]
}

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

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/code/jb2/main/test_data/syri/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearSyntenyView",
            "views": [
                {
                    "assembly": "Col-0",
                    "loc": "Chr4:1-6,000,000"
                },
                {
                    "assembly": "Ler",
                    "loc": "Chr4:1-6,000,000"
                }
            ],
            "tracks": [
                [
                    "syri_pangenome"
                ]
            ],
            "color": {
                "field": "syri",
                "domain": [
                    "SYN",
                    "INV",
                    "TRANS",
                    "INVTR",
                    "DUP",
                    "INVDP"
                ]
            },
            "drawCurves": True,
            "opacity": 0.9,
            "fadeThinAlignmentsMode": "off",
            "collapseEmptyRows": True,
            "levelHeights": [
                260
            ]
        }
    ],
)
app  # display the widget

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

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "Col-0",
          "loc": "Chr4:1-6,000,000"
        },
        {
          "assembly": "Ler",
          "loc": "Chr4:1-6,000,000"
        }
      ],
      "tracks": [
        [
          "syri_pangenome"
        ]
      ],
      "color": {
        "field": "syri",
        "domain": [
          "SYN",
          "INV",
          "TRANS",
          "INVTR",
          "DUP",
          "INVDP"
        ]
      },
      "drawCurves": true,
      "opacity": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [
        260
      ]
    }
  ]
}
JSON

npx @jbrowse/img synteny --config https://jbrowse.org/code/jb2/main/test_data/syri/config.json \
  --spec session.json \
  --width 1500 --out figure.svg

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

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "Col-0",
          "loc": "Chr4:1-6,000,000"
        },
        {
          "assembly": "Ler",
          "loc": "Chr4:1-6,000,000"
        }
      ],
      "tracks": [
        [
          "syri_pangenome"
        ]
      ],
      "color": {
        "field": "syri",
        "domain": [
          "SYN",
          "INV",
          "TRANS",
          "INVTR",
          "DUP",
          "INVDP"
        ]
      },
      "drawCurves": true,
      "opacity": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [
        260
      ]
    }
  ]
}
JSON

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

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

Stacking six accessions, one SyRI run per band

The syri_pangenome track stacks all six, each band drawing the SyRI run between the two genomes it joins:

Goes at the top level of config.json, replacing any defaultSession there. See Default session.

{
  "defaultSession": {
    "name": "Six Arabidopsis accessions, SyRI regions",
    "views": [
      {
        "type": "LinearSyntenyView",
        "views": [
          { "assembly": "Col-0" },
          { "assembly": "Ler" },
          { "assembly": "Cvi" },
          { "assembly": "Eri" },
          { "assembly": "Kyo" },
          { "assembly": "Sha" }
        ],
        "tracks": [
          ["syri_pangenome"],
          ["syri_pangenome"],
          ["syri_pangenome"],
          ["syri_pangenome"],
          ["syri_pangenome"]
        ],
        "color": {
          "field": "syri",
          "domain": ["SYN", "INV", "TRANS", "INVTR", "DUP", "INVDP"]
        },
        "drawCurves": true,
        "opacity": 0.9,
        "fadeThinAlignmentsMode": "off",
        "collapseEmptyRows": true,
        "levelHeights": [150, 150, 150, 150, 150]
      }
    ]
  }
}
jbrowse set-default-session --session - << 'EOF'
{
  "name": "Six Arabidopsis accessions, SyRI regions",
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        { "assembly": "Col-0" },
        { "assembly": "Ler" },
        { "assembly": "Cvi" },
        { "assembly": "Eri" },
        { "assembly": "Kyo" },
        { "assembly": "Sha" }
      ],
      "tracks": [
        ["syri_pangenome"],
        ["syri_pangenome"],
        ["syri_pangenome"],
        ["syri_pangenome"],
        ["syri_pangenome"]
      ],
      "color": {
        "field": "syri",
        "domain": ["SYN", "INV", "TRANS", "INVTR", "DUP", "INVDP"]
      },
      "drawCurves": true,
      "opacity": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [150, 150, 150, 150, 150]
    }
  ]
}
EOF

Open this session in JBrowse Web ↗

Five chromosomes of six Arabidopsis accessions, each band the SyRI comparison of the two genomes it joins, colored by type. The chromosome 4 inversion crosses only in the band under Col-0, and a chromosome 3 inversion only in the band between Kyo and Sha.
Open in JBrowse Web ↗Open in JBrowse Desktop ↗

This session loads a large dataset and takes a while to open.

Or rebuild it from your own data:

Opening in Desktop needs JBrowse Desktop 5.0+, and saves the view as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or File → Session):

https://jbrowse.org/code/jb2/main/?config=test_data%2Fsyri%2Fconfig.json&session=spec-%7B%22views%22%3A%5B%7B%22type%22%3A%22LinearSyntenyView%22%2C%22views%22%3A%5B%7B%22assembly%22%3A%22Col-0%22%7D%2C%7B%22assembly%22%3A%22Ler%22%7D%2C%7B%22assembly%22%3A%22Cvi%22%7D%2C%7B%22assembly%22%3A%22Eri%22%7D%2C%7B%22assembly%22%3A%22Kyo%22%7D%2C%7B%22assembly%22%3A%22Sha%22%7D%5D%2C%22tracks%22%3A%5B%5B%22syri_pangenome%22%5D%2C%5B%22syri_pangenome%22%5D%2C%5B%22syri_pangenome%22%5D%2C%5B%22syri_pangenome%22%5D%2C%5B%22syri_pangenome%22%5D%5D%2C%22color%22%3A%7B%22field%22%3A%22syri%22%2C%22domain%22%3A%5B%22SYN%22%2C%22INV%22%2C%22TRANS%22%2C%22INVTR%22%2C%22DUP%22%2C%22INVDP%22%5D%7D%2C%22drawCurves%22%3Atrue%2C%22opacity%22%3A0.9%2C%22fadeThinAlignmentsMode%22%3A%22off%22%2C%22collapseEmptyRows%22%3Atrue%2C%22levelHeights%22%3A%5B150%2C150%2C150%2C150%2C150%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+syri%2Fsix_accessions

With your own data, the steps behind the figure:

  1. Open your genomes: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one), then File → Open genome... for each of the rest.This figure's rows, top to bottom: Col-0, Ler, Cvi, Eri, Kyo, Sha.
  2. Open the view: Add → Linear synteny view, and set the rows to those assemblies in the import form.
  3. Point the import form at your own file: click the arrow between two rows, choose New track, and paste a URL or pick a local file.A synteny track the session already has is quicker: pick it under Quick start, which fills in the rows itself.This figure uses “SyRI regions” for all 5 bands.
  4. Click Launch.
  5. Synteny view header → palette button → Color by value → syriThe palette button's tooltip reads "Color by: ...".
  6. Synteny display settings (the sliders button in the view header) → Curved lines (checked)
  7. Synteny display settings (the sliders button in the view header) → Opacity → drag to 0.9Lower values let dense overlapping ribbons show through each other.
  8. Drag the bar below a synteny level to resize it.This figure's 5 levels are 150, 150, 150, 150, 150px tall.

Some settings have no written step yet — see the Spec tab.

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genomes in your JBrowse Web's config.json: run jbrowse add-assembly once for each.This figure's rows, top to bottom: Col-0, Ler, Cvi, Eri, Kyo, Sha.
  2. Open the view: Add → Linear synteny view, and set the rows to those assemblies in the import form.
  3. Point the import form at your own file: click the arrow between two rows, choose New track, and paste a URL or pick a local file.A synteny track the session already has is quicker: pick it under Quick start, which fills in the rows itself.This figure uses “SyRI regions” for all 5 bands.
  4. Click Launch.
  5. Synteny view header → palette button → Color by value → syriThe palette button's tooltip reads "Color by: ...".
  6. Synteny display settings (the sliders button in the view header) → Curved lines (checked)
  7. Synteny display settings (the sliders button in the view header) → Opacity → drag to 0.9Lower values let dense overlapping ribbons show through each other.
  8. Drag the bar below a synteny level to resize it.This figure's 5 levels are 150, 150, 150, 150, 150px tall.

Some settings have no written step yet — see the Spec tab.

This session spec draws the figure from test_data/syri/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "Col-0"
        },
        {
          "assembly": "Ler"
        },
        {
          "assembly": "Cvi"
        },
        {
          "assembly": "Eri"
        },
        {
          "assembly": "Kyo"
        },
        {
          "assembly": "Sha"
        }
      ],
      "tracks": [
        [
          "syri_pangenome"
        ],
        [
          "syri_pangenome"
        ],
        [
          "syri_pangenome"
        ],
        [
          "syri_pangenome"
        ],
        [
          "syri_pangenome"
        ]
      ],
      "color": {
        "field": "syri",
        "domain": [
          "SYN",
          "INV",
          "TRANS",
          "INVTR",
          "DUP",
          "INVDP"
        ]
      },
      "drawCurves": true,
      "opacity": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [
        150,
        150,
        150,
        150,
        150
      ]
    }
  ]
}

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

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/code/jb2/main/test_data/syri/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearSyntenyView",
            "views": [
                {
                    "assembly": "Col-0"
                },
                {
                    "assembly": "Ler"
                },
                {
                    "assembly": "Cvi"
                },
                {
                    "assembly": "Eri"
                },
                {
                    "assembly": "Kyo"
                },
                {
                    "assembly": "Sha"
                }
            ],
            "tracks": [
                [
                    "syri_pangenome"
                ],
                [
                    "syri_pangenome"
                ],
                [
                    "syri_pangenome"
                ],
                [
                    "syri_pangenome"
                ],
                [
                    "syri_pangenome"
                ]
            ],
            "color": {
                "field": "syri",
                "domain": [
                    "SYN",
                    "INV",
                    "TRANS",
                    "INVTR",
                    "DUP",
                    "INVDP"
                ]
            },
            "drawCurves": True,
            "opacity": 0.9,
            "fadeThinAlignmentsMode": "off",
            "collapseEmptyRows": True,
            "levelHeights": [
                150,
                150,
                150,
                150,
                150
            ]
        }
    ],
)
app  # display the widget

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

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "Col-0"
        },
        {
          "assembly": "Ler"
        },
        {
          "assembly": "Cvi"
        },
        {
          "assembly": "Eri"
        },
        {
          "assembly": "Kyo"
        },
        {
          "assembly": "Sha"
        }
      ],
      "tracks": [
        [
          "syri_pangenome"
        ],
        [
          "syri_pangenome"
        ],
        [
          "syri_pangenome"
        ],
        [
          "syri_pangenome"
        ],
        [
          "syri_pangenome"
        ]
      ],
      "color": {
        "field": "syri",
        "domain": [
          "SYN",
          "INV",
          "TRANS",
          "INVTR",
          "DUP",
          "INVDP"
        ]
      },
      "drawCurves": true,
      "opacity": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [
        150,
        150,
        150,
        150,
        150
      ]
    }
  ]
}
JSON

npx @jbrowse/img synteny --config https://jbrowse.org/code/jb2/main/test_data/syri/config.json \
  --spec session.json \
  --width 1500 --out figure.svg

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

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "Col-0"
        },
        {
          "assembly": "Ler"
        },
        {
          "assembly": "Cvi"
        },
        {
          "assembly": "Eri"
        },
        {
          "assembly": "Kyo"
        },
        {
          "assembly": "Sha"
        }
      ],
      "tracks": [
        [
          "syri_pangenome"
        ],
        [
          "syri_pangenome"
        ],
        [
          "syri_pangenome"
        ],
        [
          "syri_pangenome"
        ],
        [
          "syri_pangenome"
        ]
      ],
      "color": {
        "field": "syri",
        "domain": [
          "SYN",
          "INV",
          "TRANS",
          "INVTR",
          "DUP",
          "INVDP"
        ]
      },
      "drawCurves": true,
      "opacity": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [
        150,
        150,
        150,
        150,
        150
      ]
    }
  ]
}
JSON

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

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

Every accession in Columbia coordinates

Each band in the stack compares an accession with its neighbour. To compare every accession with Col-0 in Col-0 coordinates, syri_to_paf.py also writes each pair's regions in reference coordinates, one BED row per region, named by its type, colored by itemRgb and holding the accession name in a query column. The rows against Col-0 concatenate into one track:

{
  head -n1 Col-0_Ler.regions.bed
  for name in Ler Cvi Eri Kyo Sha; do
    tail -n +2 Col-0_$name.regions.bed
  done | sort -k1,1 -k2,2n
} | bgzip >syri_regions.bed.gz
tabix -p bed syri_regions.bed.gz

rows.field gives the track one row per accession:

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

{
  "type": "FeatureTrack",
  "trackId": "syri_regions_on_Col-0",
  "name": "SyRI regions on Col-0, by accession",
  "assemblyNames": ["Col-0"],
  "adapter": {
    "type": "BedTabixAdapter",
    "uri": "syri_regions.bed.gz",
    "disableGeneHeuristic": true
  },
  "displays": [
    {
      "type": "LinearMultiRowFeatureDisplay",
      "rows": {
        "field": "query",
        "domain": ["Ler", "Cvi", "Eri", "Kyo", "Sha"]
      },
      "color": { "domain": ["SYN", "INV", "TRANS", "INVTR", "DUP", "INVDP"] }
    }
  ]
}
jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "syri_regions_on_Col-0",
  "name": "SyRI regions on Col-0, by accession",
  "assemblyNames": ["Col-0"],
  "adapter": {
    "type": "BedTabixAdapter",
    "uri": "syri_regions.bed.gz",
    "disableGeneHeuristic": true
  },
  "displays": [
    {
      "type": "LinearMultiRowFeatureDisplay",
      "rows": {
        "field": "query",
        "domain": ["Ler", "Cvi", "Eri", "Kyo", "Sha"]
      },
      "color": { "domain": ["SYN", "INV", "TRANS", "INVTR", "DUP", "INVDP"] }
    }
  ]
}'

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": "syri_regions_on_Col-0",
  "name": "SyRI regions on Col-0, by accession",
  "assemblyNames": ["Col-0"],
  "adapter": {
    "type": "BedTabixAdapter",
    "uri": "syri_regions.bed.gz",
    "disableGeneHeuristic": true
  },
  "displays": [
    {
      "type": "LinearMultiRowFeatureDisplay",
      "rows": {
        "field": "query",
        "domain": ["Ler", "Cvi", "Eri", "Kyo", "Sha"]
      },
      "color": { "domain": ["SYN", "INV", "TRANS", "INVTR", "DUP", "INVDP"] }
    }
  ]
}

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

Open a linear genome view on Col-0 at Chr4:1-6,000,000 and turn on SyRI regions on Col-0, by accession and SyRI regions. Switch SyRI regions to Display types → Multi-way synteny display, which takes its lanes and colors from the track's MultiWaySyntenyDisplay entry:

  • each accession is a lane, drawn in the coordinates of its assembly and placed by the SyRI run against Col-0
  • the band between two lanes comes from the run between those two accessions, so it has the type SyRI gave that pair

Goes at the top level of config.json, replacing any defaultSession there. See Default session.

{
  "defaultSession": {
    "name": "Six accessions in Col-0's coordinates",
    "views": [
      {
        "type": "LinearGenomeView",
        "assembly": "Col-0",
        "loc": "Chr4:1-6,000,000",
        "tracks": [
          {
            "trackId": "syri_regions_on_Col-0",
            "type": "LinearMultiRowFeatureDisplay",
            "height": 110
          },
          {
            "trackId": "syri_pangenome",
            "type": "MultiWaySyntenyDisplay",
            "height": 640
          }
        ]
      }
    ]
  }
}
jbrowse set-default-session --session - << 'EOF'
{
  "name": "Six accessions in Col-0's coordinates",
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "Col-0",
      "loc": "Chr4:1-6,000,000",
      "tracks": [
        {
          "trackId": "syri_regions_on_Col-0",
          "type": "LinearMultiRowFeatureDisplay",
          "height": 110
        },
        {
          "trackId": "syri_pangenome",
          "type": "MultiWaySyntenyDisplay",
          "height": 640
        }
      ]
    }
  ]
}
EOF

Open this session in JBrowse Web ↗

Col-0 chromosome 4 with one row of SyRI regions per accession above, and the accessions as lanes in their own assembly coordinates below, each band colored by the SyRI type between the two genomes it joins. Every accession is inverted against Col-0 across the same stretch, and the bands between accessions run straight there.
Open in JBrowse Web ↗Open in JBrowse Desktop ↗

This session loads a large dataset and takes a while to open.

Or rebuild it from your own data:

Opening in Desktop needs JBrowse Desktop 5.0+, and saves the view as a reopenable session.

Nothing happens?

Paste this link into Desktop's Open JBrowse Web link... (start screen, or File → Session):

https://jbrowse.org/code/jb2/main/?config=test_data%2Fsyri%2Fconfig.json&session=spec-%7B%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22Col-0%22%2C%22loc%22%3A%22Chr4%3A1-6%2C000%2C000%22%2C%22tracks%22%3A%5B%7B%22trackId%22%3A%22syri_regions_on_Col-0%22%2C%22type%22%3A%22LinearMultiRowFeatureDisplay%22%2C%22height%22%3A110%7D%2C%7B%22trackId%22%3A%22syri_pangenome%22%2C%22type%22%3A%22MultiWaySyntenyDisplay%22%2C%22height%22%3A640%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+syri%2Fcol0_lanes

With your own data, the steps behind the figure:

  1. Open your genome: on the JBrowse Desktop start screen click Open new genome (or Show all available genomes to pick a hosted one).This figure uses Col-0.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “SyRI regions on Col-0, by accession”.
    1. Drag the bar at the bottom edge of the track to resize it (110px here).
  3. Add your own track: File → Open track..., then paste a URL or choose a local file.This figure uses “SyRI regions”.
    1. Drag the bar at the bottom edge of the track to resize it (640px here).
  4. Type your region of interest into the location box and press Enter.This figure is at Chr4:1-6,000,000.

Its genome and tracks are hosted, so File → Open track... there adds your own files beside them.

With your own data, the steps behind the figure:

  1. Put your genome in your JBrowse Web's config.json: jbrowse add-assembly adds it.This figure uses Col-0.
  2. Add your own track: File → Open track..., then paste a URL or choose a local file. This one needs a bgzip-compressed, tabix-indexed BED (.bed.gz + .tbi).This figure uses “SyRI regions on Col-0, by accession”.
    1. Drag the bar at the bottom edge of the track to resize it (110px here).
  3. Add your own track: File → Open track..., then paste a URL or choose a local file.This figure uses “SyRI regions”.
    1. Drag the bar at the bottom edge of the track to resize it (640px here).
  4. Type your region of interest into the location box and press Enter.This figure is at Chr4:1-6,000,000.

This session spec draws the figure from test_data/syri/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "Col-0",
      "loc": "Chr4:1-6,000,000",
      "tracks": [
        {
          "trackId": "syri_regions_on_Col-0",
          "type": "LinearMultiRowFeatureDisplay",
          "height": 110
        },
        {
          "trackId": "syri_pangenome",
          "type": "MultiWaySyntenyDisplay",
          "height": 640
        }
      ]
    }
  ]
}

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

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/code/jb2/main/test_data/syri/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "Col-0",
            "loc": "Chr4:1-6,000,000",
            "tracks": [
                {
                    "trackId": "syri_regions_on_Col-0",
                    "type": "LinearMultiRowFeatureDisplay",
                    "height": 110
                },
                {
                    "trackId": "syri_pangenome",
                    "type": "MultiWaySyntenyDisplay",
                    "height": 640
                }
            ]
        }
    ],
)
app  # display the widget

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

npx @jbrowse/img --config https://jbrowse.org/code/jb2/main/test_data/syri/config.json \
  --assembly Col-0 --loc Chr4:1-6,000,000 \
  --track syri_regions_on_Col-0 display:LinearMultiRowFeatureDisplay '{"height":110}' \
  --track syri_pangenome display:MultiWaySyntenyDisplay '{"height":640}' \
  --width 1500 --out figure.svg

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

Hand this to a coding agent. It rebuilds the figure above headlessly, and the session file is then the thing to edit — swap an adapter uri for your own file and rerun.

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "Col-0",
      "loc": "Chr4:1-6,000,000",
      "tracks": [
        {
          "trackId": "syri_regions_on_Col-0",
          "type": "LinearMultiRowFeatureDisplay",
          "height": 110
        },
        {
          "trackId": "syri_pangenome",
          "type": "MultiWaySyntenyDisplay",
          "height": 640
        }
      ]
    }
  ]
}
JSON

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

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

Checking the chromosome 4 inversion against syri.out

The largest inverted region of the Col-0 and Ler run, straight from the SyRI table:

awk -F'\t' '$11=="INV" {print $3-$2+1, $1, $2, $3}' Col-0_Ler.syri.out | sort -nr | head -1

The largest inversion is on Chr4, from 1,612,606 to 2,782,621, the interval the crossed ribbon spans and the orange block on the Ler row.

Reproduce it end to end

The script needs the tools under Prerequisites and works in four steps:

  1. Fetch the six assemblies and keep the five nuclear chromosomes, named Chr1 to Chr5, since SyRI pairs chromosomes by name.
  2. Align each accession to Col-0 and to the accession above it, and run SyRI on each alignment.
  3. Convert each SyRI table to PAF records and reference-coordinate BED rows.
  4. Write the config with the six assemblies, the stacked track and the Col-0 regions track.
curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/build_syri_synteny.sh
bash build_syri_synteny.sh

For genomes of your own, pass a rows file after the output directory:

  • one <name> [accession] line per genome, in stack order, the reference first
  • the script uses a chromosome-level <name>.fa in the output directory as it is, so a row that has one needs no accession
  • homologous chromosomes must be spelled alike in every FASTA, since SyRI pairs them by name
bash build_syri_synteny.sh my_syri rows.txt

See also

Citations