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.8. 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 four assembled accessions, each to the one above it, and running SyRI, which sorts what an alignment contains into syntenic, inverted, translocated and duplicated regions. SyRI's table loads as a synteny track whose ribbons take their color from the type column, which is the picture plotsr draws, with every region open to zooming and clicking.

Prerequisites

Where the data comes from

TAIR10 for Columbia, and the chromosome-level assemblies of three more accessions from Jiao and Schneeberger 2020, the four 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 genome is then aligned to the one 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 -ax asm5 --eqx Col-0.fa Ler.fa |
  samtools sort -O BAM -o Col-0_Ler.bam -

# -F B says the alignment is BAM
# --nc runs that many chromosomes at once
syri -c Col-0_Ler.bam -r Col-0.fa -q Ler.fa -F B --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 a synteny track

A JBrowse ortholog table is a list of id pairs joined to one BED per genome, and a SyRI region is an id with an interval on each genome, so the conversion is a rename. syri_to_blocks.py writes each region to both BEDs under its SyRI id, the inverted types on the minus strand of the query's, and one table row per region carrying its type, that type's color in plotsr's palette and its length:

curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/syri_to_blocks.py
python3 syri_to_blocks.py Col-0_Ler.syri.out --prefix Col-0_Ler

attributeColumns names the table's extra columns. type becomes a color-by mode, and color is the palette the file puts beside each type:

{
  "type": "SyntenyTrack",
  "trackId": "syri_Col-0_Ler",
  "name": "Col-0 vs Ler, SyRI regions",
  "assemblyNames": ["Col-0", "Ler"],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "Col-0_Ler.blocks",
    "blockAssemblies": ["Col-0", "Ler"],
    "bedLocations": [
      { "uri": "Col-0_Ler.Col-0.bed" },
      { "uri": "Col-0_Ler.Ler.bed" }
    ],
    "attributeColumns": ["type", "color", "length"]
  }
}
jbrowse add-track-json '{
  "type": "SyntenyTrack",
  "trackId": "syri_Col-0_Ler",
  "name": "Col-0 vs Ler, SyRI regions",
  "assemblyNames": ["Col-0", "Ler"],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "Col-0_Ler.blocks",
    "blockAssemblies": ["Col-0", "Ler"],
    "bedLocations": [
      { "uri": "Col-0_Ler.Col-0.bed" },
      { "uri": "Col-0_Ler.Ler.bed" }
    ],
    "attributeColumns": ["type", "color", "length"]
  }
}'

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_Col-0_Ler",
  "name": "Col-0 vs Ler, SyRI regions",
  "assemblyNames": ["Col-0", "Ler"],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "Col-0_Ler.blocks",
    "blockAssemblies": ["Col-0", "Ler"],
    "bedLocations": [
      { "uri": "Col-0_Ler.Col-0.bed" },
      { "uri": "Col-0_Ler.Ler.bed" }
    ],
    "attributeColumns": ["type", "color", "length"]
  }
}

Col-0_Ler.blocks, Col-0_Ler.Col-0.bed, Col-0_Ler.Ler.bed are relative to a config.json. Replace each with its URL or its path on this computer.

The ribbons need no sequence, so each accession is an assembly of its chromosome lengths alone, a ChromSizesAdapter over the first two columns of its .fai.

Columbia against Landsberg on chromosome 4

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

{
  "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_Col-0_Ler"]],
        "colorBy": { "field": "type" },
        "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_Col-0_Ler"]],
      "colorBy": { "field": "type" },
      "drawCurves": true,
      "alpha": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [260]
    }
  ]
}
EOF

Open this session in JBrowse

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 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)

The steps behind the figure above, run against your own data.

  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 “Col-0 vs Ler, SyRI regions”.
  4. Click Launch.
  5. Synteny view header → palette button → Color by value → typeThe 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. Launch synteny view dialog → Collapse panels to rulers (checked)Checked by default. A row the launch gave no tracks opens as its ruler alone instead of a "No tracks active" block; any row expands again from its own controls afterwards.
  9. Drag the bar below a synteny level to resize it.This figure's level is 260px tall.
  10. Type your region of interest into the location box and press Enter.Row 1 (Col-0) — This figure is at Chr4:1-6,000,000.
  11. Type your region of interest into the location box and press Enter.Row 2 (Ler) — This figure is at Chr4:1-6,000,000.

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

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session — swap in your own files afterwards.

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_Col-0_Ler%22%5D%5D%2C%22colorBy%22%3A%7B%22field%22%3A%22type%22%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

This session spec pastes after &session=spec- on any JBrowse Web instance.

{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "Col-0",
          "loc": "Chr4:1-6,000,000"
        },
        {
          "assembly": "Ler",
          "loc": "Chr4:1-6,000,000"
        }
      ],
      "tracks": [
        [
          "syri_Col-0_Ler"
        ]
      ],
      "colorBy": {
        "field": "type"
      },
      "drawCurves": true,
      "alpha": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [
        260
      ]
    }
  ]
}

Loaded against config: test_data/syri/config.json

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_Col-0_Ler"
                ]
            ],
            "colorBy": {
                "field": "type"
            },
            "drawCurves": True,
            "alpha": 0.9,
            "fadeThinAlignmentsMode": "off",
            "collapseEmptyRows": True,
            "levelHeights": [
                260
            ]
        }
    ],
)
app  # display the widget

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_Col-0_Ler"
        ]
      ],
      "colorBy": {
        "field": "type"
      },
      "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 \
  --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.

Four accessions

The same view stacks all four, each band drawing the SyRI run between the two genomes it joins:

{
  "defaultSession": {
    "name": "Four Arabidopsis accessions, SyRI regions",
    "views": [
      {
        "type": "LinearSyntenyView",
        "views": [
          { "assembly": "Col-0" },
          { "assembly": "Ler" },
          { "assembly": "Cvi" },
          { "assembly": "Eri" }
        ],
        "tracks": [["syri_Col-0_Ler"], ["syri_Ler_Cvi"], ["syri_Cvi_Eri"]],
        "colorBy": { "field": "type" },
        "drawCurves": true,
        "alpha": 0.9,
        "fadeThinAlignmentsMode": "off",
        "collapseEmptyRows": true,
        "levelHeights": [180, 180, 180]
      }
    ]
  }
}
jbrowse set-default-session --session - << 'EOF'
{
  "name": "Four Arabidopsis accessions, SyRI regions",
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        { "assembly": "Col-0" },
        { "assembly": "Ler" },
        { "assembly": "Cvi" },
        { "assembly": "Eri" }
      ],
      "tracks": [["syri_Col-0_Ler"], ["syri_Ler_Cvi"], ["syri_Cvi_Eri"]],
      "colorBy": { "field": "type" },
      "drawCurves": true,
      "alpha": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [180, 180, 180]
    }
  ]
}
EOF

Open this session in JBrowse

Five chromosomes of four Arabidopsis accessions, each band SyRI's comparison of the two genomes it joins, colored by type. The widest crossed ribbon is the chromosome 4 inversion in the band under Col-0, and the two bands below it run straight at that position. Open this view in JBrowse ↗ (large dataset — this session takes a while to load)

The steps behind the figure above, run against your own data.

  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.
  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 “Col-0 vs Ler, SyRI regions”.
  4. 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.This figure uses “Ler vs Cvi, SyRI regions”.
  5. 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.This figure uses “Cvi vs Eri, SyRI regions”.
  6. Click Launch.
  7. Synteny view header → palette button → Color by value → typeThe palette button's tooltip reads "Color by: ...".
  8. Synteny display settings (the sliders button in the view header) → Curved lines (checked)
  9. Synteny display settings (the sliders button in the view header) → Opacity → drag to 0.9Lower values let dense overlapping ribbons show through each other.
  10. Launch synteny view dialog → Collapse panels to rulers (checked)Checked by default. A row the launch gave no tracks opens as its ruler alone instead of a "No tracks active" block; any row expands again from its own controls afterwards.
  11. Drag the bar below a synteny level to resize it.This figure's 3 levels are 180, 180, 180px tall.

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

Open this view in JBrowse Desktop ↗

Opens JBrowse Desktop (JBrowse Desktop 5.0+) at this view and saves it as a reopenable session — swap in your own files afterwards.

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%5D%2C%22tracks%22%3A%5B%5B%22syri_Col-0_Ler%22%5D%2C%5B%22syri_Ler_Cvi%22%5D%2C%5B%22syri_Cvi_Eri%22%5D%5D%2C%22colorBy%22%3A%7B%22field%22%3A%22type%22%7D%2C%22drawCurves%22%3Atrue%2C%22alpha%22%3A0.9%2C%22fadeThinAlignmentsMode%22%3A%22off%22%2C%22collapseEmptyRows%22%3Atrue%2C%22levelHeights%22%3A%5B180%2C180%2C180%5D%7D%5D%7D&sessionName=JBrowse+docs%3A+syri%2Ffour_accessions

This session spec pastes after &session=spec- on any JBrowse Web instance.

{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "Col-0"
        },
        {
          "assembly": "Ler"
        },
        {
          "assembly": "Cvi"
        },
        {
          "assembly": "Eri"
        }
      ],
      "tracks": [
        [
          "syri_Col-0_Ler"
        ],
        [
          "syri_Ler_Cvi"
        ],
        [
          "syri_Cvi_Eri"
        ]
      ],
      "colorBy": {
        "field": "type"
      },
      "drawCurves": true,
      "alpha": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [
        180,
        180,
        180
      ]
    }
  ]
}

Loaded against config: test_data/syri/config.json

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"
                }
            ],
            "tracks": [
                [
                    "syri_Col-0_Ler"
                ],
                [
                    "syri_Ler_Cvi"
                ],
                [
                    "syri_Cvi_Eri"
                ]
            ],
            "colorBy": {
                "field": "type"
            },
            "drawCurves": True,
            "alpha": 0.9,
            "fadeThinAlignmentsMode": "off",
            "collapseEmptyRows": True,
            "levelHeights": [
                180,
                180,
                180
            ]
        }
    ],
)
app  # display the widget

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"
        }
      ],
      "tracks": [
        [
          "syri_Col-0_Ler"
        ],
        [
          "syri_Ler_Cvi"
        ],
        [
          "syri_Cvi_Eri"
        ]
      ],
      "colorBy": {
        "field": "type"
      },
      "drawCurves": true,
      "alpha": 0.9,
      "fadeThinAlignmentsMode": "off",
      "collapseEmptyRows": true,
      "levelHeights": [
        180,
        180,
        180
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/code/jb2/main/test_data/syri/config.json \
  --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.

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.

Reproduce it end to end

The script fetches the four assemblies, aligns each to the one above it, runs SyRI on the three pairs, converts each table and writes the config; see Prerequisites. Its ROWS list is one <name> <accession> line per genome in stack order. For genomes of your own, put a chromosome-level <name>.fa for each row into the output directory, homologous chromosomes spelled alike, and the download step skips it.

curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/build_syri_synteny.sh
bash build_syri_synteny.sh

See also

References