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.9. 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. Each accession is compared with Columbia and with the accession above it, and every comparison goes into one file whose ribbons take their color from SyRI's type: the stack plotsr draws, and the same accessions as lanes under Columbia's own coordinates, with every region open to zooming and clicking.

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 plotsr's own figure 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 each assembly's five nuclear chromosomes and names them Chr1 to Chr5. Each accession is aligned 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's 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, that type's color in plotsr's palette. It reads each sequence's length from a .chrom.sizes file beside syri.out, the first two columns of the FASTA's index. Concatenating every pair's records 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 is an assembly of those chromosome lengths alone, a ChromSizesAdapter over its .chrom.sizes. On the track:

  • attributeColumns names the 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",
      "displayId": "syri_pangenome-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",
      "displayId": "syri_pangenome-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",
      "displayId": "syri_pangenome-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,
        "alpha": 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,
      "alpha": 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 frame's edge names. The domain lists the types in plotsr's order, and the key has one row per color: plotsr paints an inverted translocation as a translocation and an inverted duplication as a duplication, so INVTR shares a row with TRANS and INVDP with DUP.

The first 6 Mb of chromosome 4 in Col-0 above and Ler below, SyRI's regions colored by type. The crossed ribbon is the inversion between the two accessions, with syntenic regions either side of it. Open this view in JBrowse ↗ (large dataset — this session takes a while to load)

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it 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%22alpha%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.

Open this view in JBrowse Web ↗

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,
      "alpha": 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,
            "alpha": 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,
      "alpha": 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,
      "alpha": 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 \
  --session 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.

Six accessions

The same 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,
        "alpha": 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,
      "alpha": 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 SyRI's 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 this view in JBrowse ↗ (large dataset — this session takes a while to load)

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it 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%22alpha%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.

Open this view in JBrowse Web ↗

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,
      "alpha": 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,
            "alpha": 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,
      "alpha": 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,
      "alpha": 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 \
  --session 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's coordinates

The stack answers how each accession differs from its neighbour. A reader annotating Col-0 wants each accession's difference from Col-0, in Col-0's coordinates. syri_to_paf.py also writes each pair's regions on the reference alone, one BED row per region, named by its type, colored by itemRgb and carrying the accession's 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",
      "displayId": "syri_regions_on_Col-0-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",
      "displayId": "syri_regions_on_Col-0-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",
      "displayId": "syri_regions_on_Col-0-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 the track on. Turn on SyRI regions under it and switch it to Display types → Multi-way synteny display, which takes its lanes and colors from the track's display entry above:

  • Each accession is a lane drawn in its own coordinates, placed by its SyRI run against Col-0
  • The band between two lanes comes from the run between those two accessions, so it carries 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 ↗

The first 6 Mb of Col-0 chromosome 4: each accession's SyRI regions against Col-0 as a row above, and the accessions as lanes below in their own coordinates, each band colored by SyRI's type for 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 this view in JBrowse ↗ (large dataset — this session takes a while to load)

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it 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.

Open this view in JBrowse Web ↗

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 \
  --session 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.

Twenty-six accessions against TAIR10

Every one of the five accessions is inverted against Col-0 over the same stretch, which raises the question of which arrangement is the common one. The 1001 Genomes Plus project assembled accessions from across the species' range (Igolkina et al. 2025), and the same pipeline runs on 26 of them against TAIR10. The result is hosted with each accession's genes, transposons and methylation from the 1001 Genomes data centre. Open it over the chromosome 4 inversion with the SyRI rows, ordered by admixture group:

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

{
  "defaultSession": {
    "name": "26 accessions against TAIR10, chromosome 4",
    "views": [
      {
        "type": "LinearGenomeView",
        "assembly": "TAIR10",
        "loc": "Chr4:1-4,000,000",
        "tracks": [
          {
            "trackId": "syri_regions_on_TAIR10",
            "type": "LinearMultiRowFeatureDisplay",
            "height": 644
          }
        ]
      }
    ]
  }
}
jbrowse set-default-session --session - << 'EOF'
{
  "name": "26 accessions against TAIR10, chromosome 4",
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "TAIR10",
      "loc": "Chr4:1-4,000,000",
      "tracks": [
        {
          "trackId": "syri_regions_on_TAIR10",
          "type": "LinearMultiRowFeatureDisplay",
          "height": 644
        }
      ]
    }
  ]
}
EOF

Open this session in JBrowse Web ↗

The first 4 Mb of TAIR10 chromosome 4, one row of SyRI regions per 1001 Genomes Plus accession. The top two rows, Col-0's own assembly and KBS-Mac-74, run syntenic across the inversion; every other row is inverted there. Open this view in JBrowse ↗ (large dataset — this session takes a while to load)

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it 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=https%3A%2F%2Fjbrowse.org%2Fdemos%2Farabidopsis_pangenome%2Fconfig.json&session=spec-%7B%22views%22%3A%5B%7B%22type%22%3A%22LinearGenomeView%22%2C%22assembly%22%3A%22TAIR10%22%2C%22loc%22%3A%22Chr4%3A1-4%2C000%2C000%22%2C%22tracks%22%3A%5B%7B%22trackId%22%3A%22syri_regions_on_TAIR10%22%2C%22type%22%3A%22LinearMultiRowFeatureDisplay%22%2C%22height%22%3A644%7D%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+syri%2Ftair10_1001g

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 TAIR10, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  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 TAIR10, one row per accession”.
    1. Drag the bar at the bottom edge of the track to resize it (644px here).
  3. Type your region of interest into the location box and press Enter.This figure is at Chr4:1-4,000,000.

Open this view in JBrowse Web ↗

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 TAIR10, loaded from a bgzip-compressed FASTA (.fa.gz + .fai + .gzi).
  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 TAIR10, one row per accession”.
    1. Drag the bar at the bottom edge of the track to resize it (644px here).
  3. Type your region of interest into the location box and press Enter.This figure is at Chr4:1-4,000,000.

This session spec draws the figure from https://jbrowse.org/demos/arabidopsis_pangenome/config.json: paste it after &session=spec- on a JBrowse Web link that loads that config.

{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "TAIR10",
      "loc": "Chr4:1-4,000,000",
      "tracks": [
        {
          "trackId": "syri_regions_on_TAIR10",
          "type": "LinearMultiRowFeatureDisplay",
          "height": 644
        }
      ]
    }
  ]
}

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/demos/arabidopsis_pangenome/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "TAIR10",
            "loc": "Chr4:1-4,000,000",
            "tracks": [
                {
                    "trackId": "syri_regions_on_TAIR10",
                    "type": "LinearMultiRowFeatureDisplay",
                    "height": 644
                }
            ]
        }
    ],
)
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/demos/arabidopsis_pangenome/config.json \
  --assembly TAIR10 --loc Chr4:1-4,000,000 \
  --track syri_regions_on_TAIR10 display:LinearMultiRowFeatureDisplay '{"height":644}' \
  --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": "TAIR10",
      "loc": "Chr4:1-4,000,000",
      "tracks": [
        {
          "trackId": "syri_regions_on_TAIR10",
          "type": "LinearMultiRowFeatureDisplay",
          "height": 644
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/arabidopsis_pangenome/config.json \
  --width 1500 --height 870 \
  --session 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.

The hosted demo also carries the 1135-accession Fst scan, the 1001 Genomes SNPs and a minigraph pangenome of the same genomes, all built by build_arabidopsis_pangenome.sh. Pangenome (hosting your own graph) turns a graph of your own into the files the pangenome's tracks read.

Check it against syri.out

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

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

It is 1,170,016 bp 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 fetches the six assemblies, runs SyRI on each accession against Col-0 and against the one above it, converts each table and writes the config; see Prerequisites.

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
  • A chromosome-level <name>.fa in the output directory is used as it is, so a row that has one needs no accession
  • Homologous chromosomes are spelled alike in every FASTA, since SyRI pairs them by name
bash build_syri_synteny.sh my_syri rows.txt

See also

References