Skip to main content

Synteny by ancestral linkage group (sponge, comb jelly, jellyfish)

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.

Certain sets of genes have stayed on the same chromosome together since before animals existed, and those sets have names. odp writes, for every pair of genomes it compares, a table of their orthologs with the set each one belongs to and a color for it. JBrowse loads that table as a synteny track, paints every ortholog with its set's color, and sorts one genome's chromosomes by where their orthologs land on the other. In a sponge the colors fall in one block per chromosome along a diagonal, and in a comb jelly each group is spread over several chromosomes. The color mode is a column of the table, so any label a pipeline puts beside an ortholog can drive it.

Prerequisites

Where the data comes from

The genomes and the ortholog tables are the Dryad deposit behind Schultz et al. 2023, released CC0.

The linkage-group label in the ortholog table

Simakov et al. 2022 named a set of gene families the BCnS linkage groups, after the bilaterians, cnidarians and sponges whose chromosomes have them, and gave each a letter: A1a, A2, B1, and so on to R. A gene belongs to one of them or to none. odp ships the groups as a database of protein models, searches every proteome it is given against them, and writes the group each ortholog landed in as a column beside it. A synteny track can read that column. Your own genomes need odp's table with its gene_group and color columns, written when odp runs with plot_LGs: True, and a .chrom file per genome.

The dotplot uses two genomes and the stack at the end adds four:

  • RES, the jellyfish Rhopilema esculentum, in the dotplot and the stack
  • EMU, the freshwater sponge Ephydatia muelleri, in the dotplot and the stack
  • HCA and BIN, the comb jellies Hormiphora californensis and Bolinopsis microptera, in the stack only
  • BFL, the amphioxus Branchiostoma floridae, in the stack only
  • CLAa, a cladorhizid sponge, in the stack only

odp's group database was built from five genomes, three of them on this page: the jellyfish, Ephydatia and amphioxus. The comb jellies and the cladorhizid took no part in it. odp compares genomes two at a time, so the deposit holds one table per pair, each of them every reciprocal best protein hit between the two.

A table's row is the gene pair, the group, where each gene sits, and the color:

rbh                    EMU_gene      RES_gene       gene_group  EMU_scaf  EMU_pos  RES_scaf  RES_pos   ...  color
rbh2way_EMU_RES_964    Em0019g38a    mRNA.RE04286   A1a         EMU19     180964   RES2      13815510  ...  #C23D51
rbh2way_EMU_RES_4123   Em0019g57a    mRNA.RE14076   None        EMU19     290216   RES8      13037026  ...  #000000

Gene intervals come from odp's .chrom files, since the table's position column holds one coordinate per gene and would make every feature one base long:

curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/rbh_to_blocks.py
# --species sets the column order, anchor first, which the track then follows
# --chrom gives each species' genes their real start and stop
# --attributes names the columns that pass through after the gene ids
python3 rbh_to_blocks.py EMU_RES_xy_reciprocal_best_hits.coloredby_BCnS_LGs.plotted.rbh \
  -o RES_EMU.blocks --bed-dir RES_EMU \
  --species RES EMU --chrom RES=RES.chrom EMU=EMU.chrom \
  --attributes gene_group color break_FET

The helper prints how many of each genome's gene ids its .chrom placed. An ortholog from outside the BCnS families gets . in the group column, which the browser draws in grey.

A .blocks row is the gene ids across the two genomes, then the attribute columns:

mRNA.RE04286  Em0019g38a  A1a  #C23D51  0.0000
mRNA.RE14076  Em0019g57a  .    #000000  1.8213

Loading the genomes

We'll load the two genomes of the dotplot. The genome FASTA needs a .fai beside it (samtools faidx), and its sequence names must match the table's scaffold columns. The stack adds four more assemblies the same way, one block each.

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

{
  "name": "RES",
  "displayName": "Rhopilema (jellyfish)",
  "uri": "RES.fa"
}
jbrowse add-assembly RES.fa \
  --name RES \
  --displayName "Rhopilema (jellyfish)" \
  --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, one per line:

RES.fa
RES.fa.fai

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

  • Genome name: RES
  • Assembly display name (under More options): Rhopilema (jellyfish)

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

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

{
  "name": "EMU",
  "displayName": "Ephydatia (sponge)",
  "uri": "EMU.fa"
}
jbrowse add-assembly EMU.fa \
  --name EMU \
  --displayName "Ephydatia (sponge)" \
  --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, one per line:

EMU.fa
EMU.fa.fai

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

  • Genome name: EMU
  • Assembly display name (under More options): Ephydatia (sponge)

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

Loading the RES-EMU table as a synteny track

attributeColumns makes the last three columns reachable. Each name in it becomes a color-by mode named after the column, so gene_group becomes a mode; color is the palette the file puts beside each label, and the menu leaves it out of the modes. break_FET is odp's test of the row's chromosome pair, which the stack below reads as opacity.

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

{
  "type": "SyntenyTrack",
  "trackId": "RES_EMU",
  "name": "RES vs EMU orthologs, colored by BCnS linkage group",
  "assemblyNames": ["RES", "EMU"],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "RES_EMU.blocks.gz",
    "blockAssemblies": ["RES", "EMU"],
    "bedLocations": ["RES_EMU.RES.bed.gz", "RES_EMU.EMU.bed.gz"],
    "attributeColumns": ["gene_group", "color", "break_FET"]
  }
}
jbrowse add-track-json '{
  "type": "SyntenyTrack",
  "trackId": "RES_EMU",
  "name": "RES vs EMU orthologs, colored by BCnS linkage group",
  "assemblyNames": ["RES", "EMU"],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "RES_EMU.blocks.gz",
    "blockAssemblies": ["RES", "EMU"],
    "bedLocations": ["RES_EMU.RES.bed.gz", "RES_EMU.EMU.bed.gz"],
    "attributeColumns": ["gene_group", "color", "break_FET"]
  }
}'

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": "RES_EMU",
  "name": "RES vs EMU orthologs, colored by BCnS linkage group",
  "assemblyNames": ["RES", "EMU"],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "RES_EMU.blocks.gz",
    "blockAssemblies": ["RES", "EMU"],
    "bedLocations": ["RES_EMU.RES.bed.gz", "RES_EMU.EMU.bed.gz"],
    "attributeColumns": ["gene_group", "color", "break_FET"]
  }
}

RES_EMU.blocks.gz, RES_EMU.RES.bed.gz, RES_EMU.EMU.bed.gz are relative to a config.json. Replace each 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.

The build script adds one such track per pair: this one for the dotplot, then one for each neighbouring pair of the six-genome stack.

One block per linkage group

Open the jellyfish-against-sponge table as a dotplot and pick gene_group under Color by value on the palette button in the view header; the legend comes up with it. Then Re-order chromosomes on the view menu sorts the vertical genome's chromosomes by where their orthologs land along the horizontal one, turning one block per group into a diagonal. The same view as a session, with the sponge's unplaced scaffolds left off its axis:

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

{
  "defaultSession": {
    "name": "Ancestral linkage groups",
    "views": [
      {
        "type": "DotplotView",
        "displayName": "Rhopilema (jellyfish) vs Ephydatia (sponge)",
        "views": [
          { "assembly": "RES" },
          { "assembly": "EMU", "displayedRegionNames": ["EMU*"] }
        ],
        "tracks": ["RES_EMU"],
        "color": { "field": "gene_group" },
        "autoDiagonalize": true,
        "lineWidth": 4,
        "height": 860
      }
    ]
  }
}
jbrowse set-default-session --session - << 'EOF'
{
  "name": "Ancestral linkage groups",
  "views": [
    {
      "type": "DotplotView",
      "displayName": "Rhopilema (jellyfish) vs Ephydatia (sponge)",
      "views": [
        { "assembly": "RES" },
        { "assembly": "EMU", "displayedRegionNames": ["EMU*"] }
      ],
      "tracks": ["RES_EMU"],
      "color": { "field": "gene_group" },
      "autoDiagonalize": true,
      "lineWidth": 4,
      "height": 860
    }
  ]
}
EOF

Open this session in JBrowse Web ↗

Rhopilema against Ephydatia, every ortholog colored by the BCnS linkage group odp assigned it and the sponge chromosomes sorted against the jellyfish. Each group is one block where a jellyfish chromosome meets a sponge chromosome, and the blocks run along the diagonal. The grey points are the orthologs in no group.
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=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fodp_linkage_groups%2Fconfig.json&session=spec-%7B%22views%22%3A%5B%7B%22type%22%3A%22DotplotView%22%2C%22displayName%22%3A%22Rhopilema+%28jellyfish%29+vs+Ephydatia+%28sponge%29%22%2C%22views%22%3A%5B%7B%22assembly%22%3A%22RES%22%7D%2C%7B%22assembly%22%3A%22EMU%22%2C%22displayedRegionNames%22%3A%5B%22EMU*%22%5D%7D%5D%2C%22tracks%22%3A%5B%22RES_EMU%22%5D%2C%22color%22%3A%7B%22field%22%3A%22gene_group%22%7D%2C%22autoDiagonalize%22%3Atrue%2C%22lineWidth%22%3A4%2C%22height%22%3A860%7D%5D%7D&sessionName=JBrowse+docs%3A+linkage_groups%2Falg_dotplot_res_emu

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 has RES on X and EMU on Y.
  2. Open the view: Add → Dotplot view, and set both axes to those assemblies in the import form.
  3. Point the import form at your own file: use the track panel under the two axis selectors, 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 both axes itself.This figure uses “RES vs EMU orthologs, colored by BCnS linkage group”.
  4. Click Launch.
  5. Click the view's title in its header and enter "Rhopilema (jellyfish) vs Ephydatia (sponge)"
  6. Dotplot header → palette button → Color by value → gene_groupThe palette button's tooltip reads "Color by: ...".
  7. Dotplot header → the ⋮ menu → Re-order chromosomesReorders and flips the vertical axis so the best-hit blocks line up on a diagonal. The spec runs it once as the view opens; the menu item is the same thing on demand.

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 has RES on X and EMU on Y.
  2. Open the view: Add → Dotplot view, and set both axes to those assemblies in the import form.
  3. Point the import form at your own file: use the track panel under the two axis selectors, 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 both axes itself.This figure uses “RES vs EMU orthologs, colored by BCnS linkage group”.
  4. Click Launch.
  5. Click the view's title in its header and enter "Rhopilema (jellyfish) vs Ephydatia (sponge)"
  6. Dotplot header → palette button → Color by value → gene_groupThe palette button's tooltip reads "Color by: ...".
  7. Dotplot header → the ⋮ menu → Re-order chromosomesReorders and flips the vertical axis so the best-hit blocks line up on a diagonal. The spec runs it once as the view opens; the menu item is the same thing on demand.

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

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

{
  "views": [
    {
      "type": "DotplotView",
      "displayName": "Rhopilema (jellyfish) vs Ephydatia (sponge)",
      "views": [
        {
          "assembly": "RES"
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU*"
          ]
        }
      ],
      "tracks": [
        "RES_EMU"
      ],
      "color": {
        "field": "gene_group"
      },
      "autoDiagonalize": true,
      "lineWidth": 4,
      "height": 860
    }
  ]
}

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/odp_linkage_groups/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "DotplotView",
            "displayName": "Rhopilema (jellyfish) vs Ephydatia (sponge)",
            "views": [
                {
                    "assembly": "RES"
                },
                {
                    "assembly": "EMU",
                    "displayedRegionNames": [
                        "EMU*"
                    ]
                }
            ],
            "tracks": [
                "RES_EMU"
            ],
            "color": {
                "field": "gene_group"
            },
            "autoDiagonalize": True,
            "lineWidth": 4,
            "height": 860
        }
    ],
)
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": "DotplotView",
      "displayName": "Rhopilema (jellyfish) vs Ephydatia (sponge)",
      "views": [
        {
          "assembly": "RES"
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU*"
          ]
        }
      ],
      "tracks": [
        "RES_EMU"
      ],
      "color": {
        "field": "gene_group"
      },
      "autoDiagonalize": true,
      "lineWidth": 4,
      "height": 860
    }
  ]
}
JSON

npx @jbrowse/img dotplot --config https://jbrowse.org/demos/odp_linkage_groups/config.json \
  --spec session.json \
  --width 900 --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": "DotplotView",
      "displayName": "Rhopilema (jellyfish) vs Ephydatia (sponge)",
      "views": [
        {
          "assembly": "RES"
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU*"
          ]
        }
      ],
      "tracks": [
        "RES_EMU"
      ],
      "color": {
        "field": "gene_group"
      },
      "autoDiagonalize": true,
      "lineWidth": 4,
      "height": 860
    }
  ]
}
JSON

cat > callouts.json <<'JSON'
[
  {
    "type": "box",
    "anchor": {
      "hLocus": "RES2",
      "vLocus": "EMU19"
    }
  },
  {
    "type": "text",
    "text": "A1a: one sponge chromosome",
    "fontSize": 18,
    "leader": true,
    "anchor": {
      "hLocus": "RES2",
      "vLocus": "EMU19",
      "alignY": "top"
    },
    "dx": 10,
    "dy": -400
  }
]
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/odp_linkage_groups/config.json \
  --width 900 --height 1030 \
  --timeout 120000 \
  --spec session.json --annotations callouts.json -o figure.png

The figure's clicks close the legend, which this command does not do, so its picture differs there.

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.

Inside a block the points fill the square: the order of genes along each chromosome has been shuffled, and which chromosome each gene sits on has not.

Six genomes stacked

Figure 1d of the paper stacks the same tables: one row per genome, the ribbons between neighbours colored by group. The linear synteny view does that with one pair's track per band. The build script loads the pairs in the paper's order, two comb jellies over the jellyfish, amphioxus and two sponges, and the session below sets what the figure needs.

odp tests each pair of chromosomes for more shared orthologs than chance (Fisher's exact test, corrected for the number of pairs, in the break_FET column). Like the paper's figure, the stack draws an ortholog on a pair under 0.05 at opacity 0.8 and the rest at 0.15.

Each setting in the session has a menu route except fadeThinAlignmentsMode and the opacity mapping:

  • autoDiagonalize sorts each row against its neighbour, working outward from diagonalizeAnchorRow. Rows count from 0, so 2 is the jellyfish, where each group sits on one chromosome. Rows → Re-order chromosomes on the view menu runs the same sort and asks for that row.
  • hideUnlabelled draws only the orthologs in a group: Hide unlabelled rows on the palette menu.
  • drawCurves bundles the ribbons: Curved lines on the sliders button.
  • fadeThinAlignmentsMode turns off the fade a whole-genome view applies to sub-pixel ribbons, since their colors are what the figure shows. It has no menu item.
  • opacity reads break_FET through a threshold at 0.05. Opacity on the sliders button scales both opacities together; the mapping itself has no menu item.

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

{
  "defaultSession": {
    "name": "Ancestral linkage groups, six genomes",
    "views": [
      {
        "type": "LinearSyntenyView",
        "displayName": "Comb jellies, jellyfish, amphioxus, sponges",
        "views": [
          { "assembly": "BIN", "displayedRegionNames": ["BIN*"] },
          { "assembly": "HCA", "displayedRegionNames": ["HCA*"] },
          { "assembly": "RES", "displayedRegionNames": ["RES*"] },
          { "assembly": "BFL", "displayedRegionNames": ["BFL*"] },
          { "assembly": "EMU", "displayedRegionNames": ["EMU*"] },
          { "assembly": "CLAa", "displayedRegionNames": ["CLA*_hapA"] }
        ],
        "tracks": [
          ["BIN_HCA"],
          ["RES_HCA"],
          ["RES_BFL"],
          ["BFL_EMU"],
          ["EMU_CLAa"]
        ],
        "color": { "field": "gene_group" },
        "hideUnlabelled": true,
        "autoDiagonalize": true,
        "diagonalizeAnchorRow": 2,
        "drawCurves": true,
        "fadeThinAlignmentsMode": "off",
        "opacity": {
          "field": "break_FET",
          "scale": "threshold",
          "domain": [0.05],
          "range": [0.8, 0.15]
        },
        "levelHeights": [130, 130, 130, 130, 130],
        "collapseEmptyRows": true
      }
    ]
  }
}
jbrowse set-default-session --session - << 'EOF'
{
  "name": "Ancestral linkage groups, six genomes",
  "views": [
    {
      "type": "LinearSyntenyView",
      "displayName": "Comb jellies, jellyfish, amphioxus, sponges",
      "views": [
        { "assembly": "BIN", "displayedRegionNames": ["BIN*"] },
        { "assembly": "HCA", "displayedRegionNames": ["HCA*"] },
        { "assembly": "RES", "displayedRegionNames": ["RES*"] },
        { "assembly": "BFL", "displayedRegionNames": ["BFL*"] },
        { "assembly": "EMU", "displayedRegionNames": ["EMU*"] },
        { "assembly": "CLAa", "displayedRegionNames": ["CLA*_hapA"] }
      ],
      "tracks": [
        ["BIN_HCA"],
        ["RES_HCA"],
        ["RES_BFL"],
        ["BFL_EMU"],
        ["EMU_CLAa"]
      ],
      "color": { "field": "gene_group" },
      "hideUnlabelled": true,
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 2,
      "drawCurves": true,
      "fadeThinAlignmentsMode": "off",
      "opacity": {
        "field": "break_FET",
        "scale": "threshold",
        "domain": [0.05],
        "range": [0.8, 0.15]
      },
      "levelHeights": [130, 130, 130, 130, 130],
      "collapseEmptyRows": true
    }
  ]
}
EOF

Open this session in JBrowse Web ↗

Six genomes in the order of the paper's figure 1d, ribbons colored by linkage group, orthologs on significantly paired chromosomes solid and the rest faint. Each Bolinopsis chromosome pairs with one Hormiphora chromosome in the top band, each Hormiphora chromosome scatters over many jellyfish chromosomes in the second, and from the jellyfish down the groups travel as bundles.
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=https%3A%2F%2Fjbrowse.org%2Fdemos%2Fodp_linkage_groups%2Fconfig.json&session=spec-%7B%22views%22%3A%5B%7B%22type%22%3A%22LinearSyntenyView%22%2C%22displayName%22%3A%22Comb+jellies%2C+jellyfish%2C+amphioxus%2C+sponges%22%2C%22views%22%3A%5B%7B%22assembly%22%3A%22BIN%22%2C%22displayedRegionNames%22%3A%5B%22BIN*%22%5D%7D%2C%7B%22assembly%22%3A%22HCA%22%2C%22displayedRegionNames%22%3A%5B%22HCA*%22%5D%7D%2C%7B%22assembly%22%3A%22RES%22%2C%22displayedRegionNames%22%3A%5B%22RES*%22%5D%7D%2C%7B%22assembly%22%3A%22BFL%22%2C%22displayedRegionNames%22%3A%5B%22BFL*%22%5D%7D%2C%7B%22assembly%22%3A%22EMU%22%2C%22displayedRegionNames%22%3A%5B%22EMU*%22%5D%7D%2C%7B%22assembly%22%3A%22CLAa%22%2C%22displayedRegionNames%22%3A%5B%22CLA*_hapA%22%5D%7D%5D%2C%22tracks%22%3A%5B%5B%22BIN_HCA%22%5D%2C%5B%22RES_HCA%22%5D%2C%5B%22RES_BFL%22%5D%2C%5B%22BFL_EMU%22%5D%2C%5B%22EMU_CLAa%22%5D%5D%2C%22color%22%3A%7B%22field%22%3A%22gene_group%22%7D%2C%22hideUnlabelled%22%3Atrue%2C%22autoDiagonalize%22%3Atrue%2C%22diagonalizeAnchorRow%22%3A2%2C%22drawCurves%22%3Atrue%2C%22fadeThinAlignmentsMode%22%3A%22off%22%2C%22opacity%22%3A%7B%22field%22%3A%22break_FET%22%2C%22scale%22%3A%22threshold%22%2C%22domain%22%3A%5B0.05%5D%2C%22range%22%3A%5B0.8%2C0.15%5D%7D%2C%22levelHeights%22%3A%5B130%2C130%2C130%2C130%2C130%5D%2C%22collapseEmptyRows%22%3Atrue%7D%5D%7D&sessionName=JBrowse+docs%3A+linkage_groups%2Falg_stack

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: BIN, HCA, RES, BFL, EMU, CLAa.
  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 “BIN vs HCA orthologs, colored by BCnS linkage group”.
  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 “RES vs HCA orthologs, colored by BCnS linkage group”.
  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 “RES vs BFL orthologs, colored by BCnS linkage group”.
  6. 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 “BFL vs EMU orthologs, colored by BCnS linkage group”.
  7. 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 “EMU vs CLAa orthologs, colored by BCnS linkage group”.
  8. Click Launch.
  9. Click the view's title in its header and enter "Comb jellies, jellyfish, amphioxus, sponges"
  10. Synteny view header → palette button → Color by value → gene_groupThe palette button's tooltip reads "Color by: ...".
  11. Synteny view header → View options → Rows → Re-order chromosomesReorders and flips each row so the best-hit blocks line up on a diagonal. The spec runs it once as the view opens; the menu item is the same thing on demand.
  12. Synteny display settings (the sliders button in the view header) → Curved lines (checked)
  13. Drag the bar below a synteny level to resize it.This figure's 5 levels are 130, 130, 130, 130, 130px 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: BIN, HCA, RES, BFL, EMU, CLAa.
  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 “BIN vs HCA orthologs, colored by BCnS linkage group”.
  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 “RES vs HCA orthologs, colored by BCnS linkage group”.
  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 “RES vs BFL orthologs, colored by BCnS linkage group”.
  6. 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 “BFL vs EMU orthologs, colored by BCnS linkage group”.
  7. 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 “EMU vs CLAa orthologs, colored by BCnS linkage group”.
  8. Click Launch.
  9. Click the view's title in its header and enter "Comb jellies, jellyfish, amphioxus, sponges"
  10. Synteny view header → palette button → Color by value → gene_groupThe palette button's tooltip reads "Color by: ...".
  11. Synteny view header → View options → Rows → Re-order chromosomesReorders and flips each row so the best-hit blocks line up on a diagonal. The spec runs it once as the view opens; the menu item is the same thing on demand.
  12. Synteny display settings (the sliders button in the view header) → Curved lines (checked)
  13. Drag the bar below a synteny level to resize it.This figure's 5 levels are 130, 130, 130, 130, 130px tall.

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

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

{
  "views": [
    {
      "type": "LinearSyntenyView",
      "displayName": "Comb jellies, jellyfish, amphioxus, sponges",
      "views": [
        {
          "assembly": "BIN",
          "displayedRegionNames": [
            "BIN*"
          ]
        },
        {
          "assembly": "HCA",
          "displayedRegionNames": [
            "HCA*"
          ]
        },
        {
          "assembly": "RES",
          "displayedRegionNames": [
            "RES*"
          ]
        },
        {
          "assembly": "BFL",
          "displayedRegionNames": [
            "BFL*"
          ]
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU*"
          ]
        },
        {
          "assembly": "CLAa",
          "displayedRegionNames": [
            "CLA*_hapA"
          ]
        }
      ],
      "tracks": [
        [
          "BIN_HCA"
        ],
        [
          "RES_HCA"
        ],
        [
          "RES_BFL"
        ],
        [
          "BFL_EMU"
        ],
        [
          "EMU_CLAa"
        ]
      ],
      "color": {
        "field": "gene_group"
      },
      "hideUnlabelled": true,
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 2,
      "drawCurves": true,
      "fadeThinAlignmentsMode": "off",
      "opacity": {
        "field": "break_FET",
        "scale": "threshold",
        "domain": [
          0.05
        ],
        "range": [
          0.8,
          0.15
        ]
      },
      "levelHeights": [
        130,
        130,
        130,
        130,
        130
      ],
      "collapseEmptyRows": true
    }
  ]
}

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/odp_linkage_groups/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearSyntenyView",
            "displayName": "Comb jellies, jellyfish, amphioxus, sponges",
            "views": [
                {
                    "assembly": "BIN",
                    "displayedRegionNames": [
                        "BIN*"
                    ]
                },
                {
                    "assembly": "HCA",
                    "displayedRegionNames": [
                        "HCA*"
                    ]
                },
                {
                    "assembly": "RES",
                    "displayedRegionNames": [
                        "RES*"
                    ]
                },
                {
                    "assembly": "BFL",
                    "displayedRegionNames": [
                        "BFL*"
                    ]
                },
                {
                    "assembly": "EMU",
                    "displayedRegionNames": [
                        "EMU*"
                    ]
                },
                {
                    "assembly": "CLAa",
                    "displayedRegionNames": [
                        "CLA*_hapA"
                    ]
                }
            ],
            "tracks": [
                [
                    "BIN_HCA"
                ],
                [
                    "RES_HCA"
                ],
                [
                    "RES_BFL"
                ],
                [
                    "BFL_EMU"
                ],
                [
                    "EMU_CLAa"
                ]
            ],
            "color": {
                "field": "gene_group"
            },
            "hideUnlabelled": True,
            "autoDiagonalize": True,
            "diagonalizeAnchorRow": 2,
            "drawCurves": True,
            "fadeThinAlignmentsMode": "off",
            "opacity": {
                "field": "break_FET",
                "scale": "threshold",
                "domain": [
                    0.05
                ],
                "range": [
                    0.8,
                    0.15
                ]
            },
            "levelHeights": [
                130,
                130,
                130,
                130,
                130
            ],
            "collapseEmptyRows": True
        }
    ],
)
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",
      "displayName": "Comb jellies, jellyfish, amphioxus, sponges",
      "views": [
        {
          "assembly": "BIN",
          "displayedRegionNames": [
            "BIN*"
          ]
        },
        {
          "assembly": "HCA",
          "displayedRegionNames": [
            "HCA*"
          ]
        },
        {
          "assembly": "RES",
          "displayedRegionNames": [
            "RES*"
          ]
        },
        {
          "assembly": "BFL",
          "displayedRegionNames": [
            "BFL*"
          ]
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU*"
          ]
        },
        {
          "assembly": "CLAa",
          "displayedRegionNames": [
            "CLA*_hapA"
          ]
        }
      ],
      "tracks": [
        [
          "BIN_HCA"
        ],
        [
          "RES_HCA"
        ],
        [
          "RES_BFL"
        ],
        [
          "BFL_EMU"
        ],
        [
          "EMU_CLAa"
        ]
      ],
      "color": {
        "field": "gene_group"
      },
      "hideUnlabelled": true,
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 2,
      "drawCurves": true,
      "fadeThinAlignmentsMode": "off",
      "opacity": {
        "field": "break_FET",
        "scale": "threshold",
        "domain": [
          0.05
        ],
        "range": [
          0.8,
          0.15
        ]
      },
      "levelHeights": [
        130,
        130,
        130,
        130,
        130
      ],
      "collapseEmptyRows": true
    }
  ]
}
JSON

npx @jbrowse/img synteny --config https://jbrowse.org/demos/odp_linkage_groups/config.json \
  --spec session.json \
  --width 1400 --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",
      "displayName": "Comb jellies, jellyfish, amphioxus, sponges",
      "views": [
        {
          "assembly": "BIN",
          "displayedRegionNames": [
            "BIN*"
          ]
        },
        {
          "assembly": "HCA",
          "displayedRegionNames": [
            "HCA*"
          ]
        },
        {
          "assembly": "RES",
          "displayedRegionNames": [
            "RES*"
          ]
        },
        {
          "assembly": "BFL",
          "displayedRegionNames": [
            "BFL*"
          ]
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU*"
          ]
        },
        {
          "assembly": "CLAa",
          "displayedRegionNames": [
            "CLA*_hapA"
          ]
        }
      ],
      "tracks": [
        [
          "BIN_HCA"
        ],
        [
          "RES_HCA"
        ],
        [
          "RES_BFL"
        ],
        [
          "BFL_EMU"
        ],
        [
          "EMU_CLAa"
        ]
      ],
      "color": {
        "field": "gene_group"
      },
      "hideUnlabelled": true,
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 2,
      "drawCurves": true,
      "fadeThinAlignmentsMode": "off",
      "opacity": {
        "field": "break_FET",
        "scale": "threshold",
        "domain": [
          0.05
        ],
        "range": [
          0.8,
          0.15
        ]
      },
      "levelHeights": [
        130,
        130,
        130,
        130,
        130
      ],
      "collapseEmptyRows": true
    }
  ]
}
JSON

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

The figure's clicks close the legend, which this command does not do, so its picture differs there.

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.

In the second band, between Hormiphora and the jellyfish, far fewer grouped orthologs sit on a significant pair than in the other bands. Each comb jelly chromosome mixes groups that match no jellyfish chromosome, and those orthologs draw faint. The two comb jellies agree with each other in the band above.

Amphioxus and Ephydatia helped build the group database, so the bundles running through them are expected. The cladorhizid took no part, and in the bottom band the groups still reach it as bundles.

Checking the linkage-group counts against the odp tables

The counts behind the pictures come straight from the tables. For one group, tally the chromosomes its orthologs sit on in the genome a table's file name leads with:

# gene_group is column 4; column 5 is the chromosome in the genome the
# file name leads with, EMU here
awk -F'\t' 'NR>1 && $4=="A1a" {print $5}' \
  EMU_RES_xy_reciprocal_best_hits.coloredby_BCnS_LGs.plotted.rbh \
  | sort | uniq -c | sort -rn

Changing the file and the group in that command gives the counts behind the stack. In Hormiphora (HCA_RES), even the chromosome holding the largest share of a group holds less than half of it, which is why most of the stack's second band is faint. In the cladorhizid (CLAa_EMU), which took no part in building the group database, most of each group still sits on one chromosome.

Reproduce it end to end

Download genomes.tar.gz and supplementary_information.tar.gz from the Dryad page into ~/Downloads first, since Dryad has no direct download URL. The script needs the tools under Prerequisites and works in three steps:

  1. Unpack the genomes and pair tables the page uses from the two tarballs, and fetch the Ephydatia assembly, which the deposit does not redistribute, from its original host.
  2. Convert each pair's odp table into a .blocks table and two BEDs, taking each gene's extent from the .chrom files and keeping the group, color and break_FET columns.
  3. Write the six assemblies, one track per pair, and the dotplot session.
curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/build_odp_linkage_groups_synteny.sh
DRYAD_DIR=~/Downloads bash build_odp_linkage_groups_synteny.sh

For your own genomes, run odp with plot_LGs: True and point the conversion at the tables it writes under synteny_analysis/step2-figures/synteny_coloredby_BCnS_LGs/.

See also

Citations