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

Certain sets of genes have stayed on the same chromosome together since before animals existed; they are called ancestral linkage groups. 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. A sponge keeps each set on one chromosome; a comb jelly spreads each over several. We:

  • load the jellyfish-sponge table as a synteny track, each ortholog colored by its set
  • open it as a dotplot, with one genome's chromosomes sorted by where their orthologs sit on the other
  • narrow the dotplot to three chromosomes of each genome, around RES10 and EMU23
  • stack the genomes in a linear synteny view, with ribbons colored by set

Prerequisites

# Debian/Ubuntu
sudo apt install samtools nodejs
# or conda, which has every tool above
conda install -c bioconda -c conda-forge samtools nodejs
# any platform
npm install -g @jbrowse/cli@next

Download the data

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

Dryad has no direct download URL, so download the two tarballs by hand, 2.6 GB and 5.7 GB. The build script extracts only the genomes and tables the page uses, and fetches the Ephydatia assembly.

What it is File
Both tarballs, genomes.tar.gz and supplementary_information.tar.gz dryad.dncjsxm47
The Ephydatia assembly, which a script in the deposit fetches from the original host Emu_genome_v1.fa.gz

The linkage-group label in the ortholog table

Simakov et al. 2022 named a set of gene families the BCnS linkage groups. A gene belongs to one group or to none. odp searches every proteome it is given against a database of the groups' protein models and writes the group each ortholog was assigned as a column beside it, which a synteny track can read.

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

Code Species Used in
RES jellyfish Rhopilema esculentum dotplot and stack
EMU freshwater sponge Ephydatia muelleri dotplot and stack
HCA comb jelly Hormiphora californensis stack only
BIN comb jelly Bolinopsis microptera stack only
BFL amphioxus Branchiostoma floridae stack only
CLAa cladorhizid sponge stack only

odp's group database was built from a set of genomes, some of them on this page: the jellyfish, Ephydatia and amphioxus. The database was built without the comb jellies and the cladorhizid. odp compares genomes two at a time, so the deposit holds one table per pair, each listing every reciprocal best protein hit between its two genomes.

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

Running odp on your own genomes

The deposit holds odp's output for the page's genomes. For your own, odp takes a protein FASTA, a genome FASTA and a .chrom file per genome. A .chrom line is a protein id, the scaffold it sits on, the strand, and the least and greatest CDS coordinates, tab-separated. Name each genome by a short code, which becomes its assembly name in JBrowse.

odp runs under snakemake 7 or 8 and pandas 2, which a fresh environment does not pick by default:

# odp breaks under pandas 3 and snakemake 9; diamond, blast and hmmer are the
# searches it runs
conda create -n odp -c conda-forge -c bioconda python=3.11 \
  'snakemake-minimal>=7,<9' 'pandas<3' numpy matplotlib networkx scipy \
  seaborn biopython pyyaml diamond blast hmmer

odp runs from a directory beside its clone, the one holding config.yaml:

conda activate odp
git clone https://github.com/conchoecia/odp.git

For an NCBI annotation, a script in odp writes the .chrom from the GFF:

python3 odp/scripts/NCBIgff2chrom.py genomic.gff > SP.chrom

The colored tables come only from a linkage-group database unpacked in the clone. Building the BCnS one takes about a minute on 16 cores:

# odp refuses an LG_db directory whose name has '_', and a bare make also
# unpacks BCnS_LGs, so build this database alone; seqtk and fainfo compile
# from source, which needs a C compiler and the zlib headers
make -C odp BCnSSimakov2022 seqtk fainfo
# config.yaml; plot_LGs adds the gene_group and color columns from each
# installed linkage-group database, and diamond searches faster than blastp,
# odp's default
plot_LGs: True
diamond_or_blastp: diamond
species:
  EMU:
    proteins: EMU.pep
    chrom: EMU.chrom
    genome: EMU.fa
  RES:
    proteins: RES.pep
    chrom: RES.chrom
    genome: RES.fa
odp/bin/odp run --config config.yaml

Two RefSeq genomes, Nematostella and amphioxus, took about 20 minutes on 16 cores. odp writes the colored tables under odp/step2-figures/synteny_coloredby_BCnSSimakov2022/, one per pair. An older odp made the deposit, with a database named BCnS_LGs and the tables under synteny_analysis/. The conversion below reads both layouts. The group names are the same, and the palette in color differs.

Converting a table to a .blocks file

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

rbh_to_blocks.py prints how many of each genome's gene ids it found in the .chrom file. 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  4.1411820197020265e-230
mRNA.RE14076  Em0019g57a  .    #000000  524.9999053847149

Loading the jellyfish and sponge assemblies

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"
}

Edits config.json in the current folder, creating it if there is none. See JBrowse CLI with Desktop.

jbrowse add-assembly RES.fa \
  --name RES \
  --displayName "Rhopilema (jellyfish)" \
  --load copy

In JBrowse Desktop, Open your own 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"
}

Edits config.json in the current folder, creating it if there is none. See JBrowse CLI with Desktop.

jbrowse add-assembly EMU.fa \
  --name EMU \
  --displayName "Ephydatia (sponge)" \
  --load copy

In JBrowse Desktop, Open your own 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 jellyfish-sponge table as a synteny track

attributeColumns exposes the last three columns of the .blocks file:

  • gene_group becomes a color-by mode named after it.
  • color holds the color odp chose for each group, which that mode paints the group with, so it is not a mode of its own.
  • break_FET is odp's test of the row's chromosome pair, which sets opacity in the stack below.

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",
    "blockAssemblies": ["RES", "EMU"],
    "bedLocations": ["RES_EMU/RES.bed", "RES_EMU/EMU.bed"],
    "attributeColumns": ["gene_group", "color", "break_FET"]
  }
}

Edits config.json in the current folder. See JBrowse CLI with Desktop.

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",
    "blockAssemblies": ["RES", "EMU"],
    "bedLocations": ["RES_EMU/RES.bed", "RES_EMU/EMU.bed"],
    "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",
    "blockAssemblies": ["RES", "EMU"],
    "bedLocations": ["RES_EMU/RES.bed", "RES_EMU/EMU.bed"],
    "attributeColumns": ["gene_group", "color", "break_FET"]
  }
}

RES_EMU.blocks, RES_EMU/RES.bed, RES_EMU/EMU.bed 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.

Dotplot of jellyfish against sponge, colored by linkage group

We'll open the jellyfish-against-sponge table as a dotplot, then:

  • Pick gene_group under Color by value on the palette button in the view header, which also opens the legend.
  • Choose Re-order chromosomes on the view menu to sort the vertical genome's chromosomes by where their orthologs land along the horizontal one, which turns one block per group into a diagonal.

As a session, the same dotplot with the sponge's unplaced scaffolds left off its axis. In grammar-of-graphics terms, encoding.color maps the gene_group field to colors:

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"],
        "encoding": { "color": "gene_group" },
        "autoDiagonalize": true,
        "lineWidth": 4,
        "height": 860
      }
    ]
  }
}

Replaces any defaultSession in config.json in the current folder. See JBrowse CLI with Desktop.

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"],
      "encoding": { "color": "gene_group" },
      "autoDiagonalize": true,
      "lineWidth": 4,
      "height": 860
    }
  ]
}
EOF

Open this session in JBrowse Web ↗

Jellyfish against sponge as a dotplot, each ortholog colored by its linkage group.
Open in JBrowse Web ↗

Large dataset: slow to open.

Or rebuild it from your own data:

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

From scratch:

  1. Open your genomes: Open your own genome in JBrowse Desktop, then File → Open genome... for each of the rest, or jbrowse add-assembly for each in JBrowse Web.This figure has 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. Add your file: use the track panel under the two axis selectors and choose New track. Needs an MCScan .blocks file plus one BED per genome.Or pick a synteny track you already have under Quick start, which fills in both axes.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 chromosomes...Reorders 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.
  8. Dotplot display settings (the sliders button in the view header) → Line width → drag to 4pxWider makes a sparse plot legible; narrower keeps a dense one from filling in.
  9. Drag the bar at the bottom edge of the view to resize it (860px here).

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

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

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/demos/odp_linkage_groups/config.json
- Tracks:
  - RES vs EMU orthologs, colored by BCnS linkage group (RES_EMU), SyntenyTrack, an MCScan .blocks file plus one BED per genome, drawn as DotplotDisplay

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

The session spec that draws the view:
{
  "views": [
    {
      "type": "DotplotView",
      "displayName": "Rhopilema (jellyfish) vs Ephydatia (sponge)",
      "views": [
        {
          "assembly": "RES"
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU*"
          ]
        }
      ],
      "tracks": [
        "RES_EMU"
      ],
      "encoding": {
        "color": "gene_group"
      },
      "autoDiagonalize": true,
      "lineWidth": 4,
      "height": 860
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "DotplotView",
      "displayName": "Rhopilema (jellyfish) vs Ephydatia (sponge)",
      "views": [
        {
          "assembly": "RES"
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU*"
          ]
        }
      ],
      "tracks": [
        "RES_EMU"
      ],
      "encoding": {
        "color": "gene_group"
      },
      "autoDiagonalize": true,
      "lineWidth": 4,
      "height": 860
    }
  ]
}
JSON

cat > callouts.json <<'JSON'
[
  {
    "type": "box",
    "anchor": {
      "hLoc": "RES2",
      "vLoc": "EMU19"
    }
  },
  {
    "type": "text",
    "text": "A1a: one sponge chromosome",
    "fontSize": 18,
    "leader": true,
    "anchor": {
      "hLoc": "RES2",
      "vLoc": "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.

More: Using JBrowse with AI agents.

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

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/demos/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"
            ],
            "encoding": {
                "color": "gene_group"
            },
            "autoDiagonalize": True,
            "lineWidth": 4,
            "height": 860
        }
    ],
)
app  # display the widget

This view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.

import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'

const configUrl = "https://jbrowse.org/demos/odp_linkage_groups/config.json"
const configPromise = fetch(configUrl)
  .then(res => res.json())
  .then(config => {
    addRelativeUris(config, new URL(configUrl))
    return config
  })

export default function Figure() {
  const config = use(configPromise)
  return (
    <JBrowse
      assemblies={config.assemblies}
      tracks={config.tracks}
      aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
      configuration={config.configuration}
      views={[
        {
          "type": "DotplotView",
          "displayName": "Rhopilema (jellyfish) vs Ephydatia (sponge)",
          "views": [
            {
              "assembly": "RES"
            },
            {
              "assembly": "EMU",
              "displayedRegionNames": [
                "EMU*"
              ]
            }
          ],
          "tracks": [
            "RES_EMU"
          ],
          "encoding": {
            "color": "gene_group"
          },
          "autoDiagonalize": true,
          "lineWidth": 4,
          "height": 860
        }
      ]}
    />
  )
}

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

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "DotplotView",
      "displayName": "Rhopilema (jellyfish) vs Ephydatia (sponge)",
      "views": [
        {
          "assembly": "RES"
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU*"
          ]
        }
      ],
      "tracks": [
        "RES_EMU"
      ],
      "encoding": {
        "color": "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

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

The session spec behind the figure, over this config.

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

Inside a block the points fill the square, because gene order along each chromosome has shuffled while each gene has stayed on its chromosome.

Two fusions, mixed and unmixed

The jellyfish's RES10 has both J1 and Qa, and the sponge's EMU23 has both J2 and K. Every other genome on this page has each pair on separate chromosomes, so each is a fusion in one lineage. A fusion starts with the two groups end to end, and rearrangement inside the chromosome then interleaves their genes.1 We'll draw those two chromosomes and the four they pair with.

displayedRegionNames lists the chromosomes on each axis, in the order drawn, and the session leaves autoDiagonalize off so that order holds. filter keeps the orthologs that have a group, so the legend names only the four drawn:

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

{
  "defaultSession": {
    "name": "Two fusions",
    "views": [
      {
        "type": "DotplotView",
        "displayName": "Two fusions, one in each genome",
        "views": [
          {
            "assembly": "RES",
            "displayedRegionNames": ["RES10", "RES11", "RES15"]
          },
          {
            "assembly": "EMU",
            "displayedRegionNames": ["EMU5", "EMU2", "EMU23"]
          }
        ],
        "tracks": ["RES_EMU"],
        "encoding": { "color": "gene_group" },
        "filter": [{ "field": "gene_group", "valid": true }],
        "lineWidth": 6,
        "height": 700
      }
    ]
  }
}

Replaces any defaultSession in config.json in the current folder. See JBrowse CLI with Desktop.

jbrowse set-default-session --session - << 'EOF'
{
  "name": "Two fusions",
  "views": [
    {
      "type": "DotplotView",
      "displayName": "Two fusions, one in each genome",
      "views": [
        {
          "assembly": "RES",
          "displayedRegionNames": ["RES10", "RES11", "RES15"]
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": ["EMU5", "EMU2", "EMU23"]
        }
      ],
      "tracks": ["RES_EMU"],
      "encoding": { "color": "gene_group" },
      "filter": [{ "field": "gene_group", "valid": true }],
      "lineWidth": 6,
      "height": 700
    }
  ]
}
EOF

Open this session in JBrowse Web ↗

Three jellyfish chromosomes against three sponge chromosomes, orthologs colored by linkage group.
Open in JBrowse Web ↗

Large dataset: slow to open.

Or rebuild it from your own data:

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

From scratch:

  1. Open your genomes: Open your own genome in JBrowse Desktop, then File → Open genome... for each of the rest, or jbrowse add-assembly for each in JBrowse Web.This figure has 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. Add your file: use the track panel under the two axis selectors and choose New track. Needs an MCScan .blocks file plus one BED per genome.Or pick a synteny track you already have under Quick start, which fills in both axes.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 "Two fusions, one in each genome"
  6. Dotplot header → palette button → Color by value → gene_groupThe palette button's tooltip reads "Color by: ...".
  7. Dotplot header → palette button → Hide unlabelled rows (checked)Offered while a text column paints the color. Checked, the alignments that column leaves unlabelled are not drawn.
  8. Dotplot display settings (the sliders button in the view header) → Line width → drag to 6pxWider makes a sparse plot legible; narrower keeps a dense one from filling in.
  9. Drag the bar at the bottom edge of the view to resize it (700px here).

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

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

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/demos/odp_linkage_groups/config.json
- Tracks:
  - RES vs EMU orthologs, colored by BCnS linkage group (RES_EMU), SyntenyTrack, an MCScan .blocks file plus one BED per genome, drawn as DotplotDisplay

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

The session spec that draws the view:
{
  "views": [
    {
      "type": "DotplotView",
      "displayName": "Two fusions, one in each genome",
      "views": [
        {
          "assembly": "RES",
          "displayedRegionNames": [
            "RES10",
            "RES11",
            "RES15"
          ]
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU5",
            "EMU2",
            "EMU23"
          ]
        }
      ],
      "tracks": [
        "RES_EMU"
      ],
      "encoding": {
        "color": "gene_group"
      },
      "filter": [
        {
          "field": "gene_group",
          "valid": true
        }
      ],
      "lineWidth": 6,
      "height": 700
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "DotplotView",
      "displayName": "Two fusions, one in each genome",
      "views": [
        {
          "assembly": "RES",
          "displayedRegionNames": [
            "RES10",
            "RES11",
            "RES15"
          ]
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU5",
            "EMU2",
            "EMU23"
          ]
        }
      ],
      "tracks": [
        "RES_EMU"
      ],
      "encoding": {
        "color": "gene_group"
      },
      "filter": [
        {
          "field": "gene_group",
          "valid": true
        }
      ],
      "lineWidth": 6,
      "height": 700
    }
  ]
}
JSON

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

More: Using JBrowse with AI agents.

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

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/demos/odp_linkage_groups/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "DotplotView",
            "displayName": "Two fusions, one in each genome",
            "views": [
                {
                    "assembly": "RES",
                    "displayedRegionNames": [
                        "RES10",
                        "RES11",
                        "RES15"
                    ]
                },
                {
                    "assembly": "EMU",
                    "displayedRegionNames": [
                        "EMU5",
                        "EMU2",
                        "EMU23"
                    ]
                }
            ],
            "tracks": [
                "RES_EMU"
            ],
            "encoding": {
                "color": "gene_group"
            },
            "filter": [
                {
                    "field": "gene_group",
                    "valid": True
                }
            ],
            "lineWidth": 6,
            "height": 700
        }
    ],
)
app  # display the widget

This view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.

import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'

const configUrl = "https://jbrowse.org/demos/odp_linkage_groups/config.json"
const configPromise = fetch(configUrl)
  .then(res => res.json())
  .then(config => {
    addRelativeUris(config, new URL(configUrl))
    return config
  })

export default function Figure() {
  const config = use(configPromise)
  return (
    <JBrowse
      assemblies={config.assemblies}
      tracks={config.tracks}
      aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
      configuration={config.configuration}
      views={[
        {
          "type": "DotplotView",
          "displayName": "Two fusions, one in each genome",
          "views": [
            {
              "assembly": "RES",
              "displayedRegionNames": [
                "RES10",
                "RES11",
                "RES15"
              ]
            },
            {
              "assembly": "EMU",
              "displayedRegionNames": [
                "EMU5",
                "EMU2",
                "EMU23"
              ]
            }
          ],
          "tracks": [
            "RES_EMU"
          ],
          "encoding": {
            "color": "gene_group"
          },
          "filter": [
            {
              "field": "gene_group",
              "valid": true
            }
          ],
          "lineWidth": 6,
          "height": 700
        }
      ]}
    />
  )
}

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

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "DotplotView",
      "displayName": "Two fusions, one in each genome",
      "views": [
        {
          "assembly": "RES",
          "displayedRegionNames": [
            "RES10",
            "RES11",
            "RES15"
          ]
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU5",
            "EMU2",
            "EMU23"
          ]
        }
      ],
      "tracks": [
        "RES_EMU"
      ],
      "encoding": {
        "color": "gene_group"
      },
      "filter": [
        {
          "field": "gene_group",
          "valid": true
        }
      ],
      "lineWidth": 6,
      "height": 700
    }
  ]
}
JSON

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

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

The session spec behind the figure, over this config.

{
  "views": [
    {
      "type": "DotplotView",
      "displayName": "Two fusions, one in each genome",
      "views": [
        {
          "assembly": "RES",
          "displayedRegionNames": [
            "RES10",
            "RES11",
            "RES15"
          ]
        },
        {
          "assembly": "EMU",
          "displayedRegionNames": [
            "EMU5",
            "EMU2",
            "EMU23"
          ]
        }
      ],
      "tracks": [
        "RES_EMU"
      ],
      "encoding": {
        "color": "gene_group"
      },
      "filter": [
        {
          "field": "gene_group",
          "valid": true
        }
      ],
      "lineWidth": 6,
      "height": 700
    }
  ]
}

Along RES10, the J1 and Qa orthologs each run the chromosome's full length. On EMU23, J2 holds one end and K the rest.

Stacking the genomes, ribbons colored by linkage group

Figure 1d of Schultz et al. 2023 stacks the same tables, one row per genome, with ribbons between neighbours colored by group. A 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 in the break_FET column, multiplied by the number of chromosome pairs, so a value can pass 1). Like the paper's figure, the stack draws orthologs on a chromosome pair under 0.05 at opacity 0.8 and the rest at 0.15. That is an encoding.opacity scale, which maps the break_FET field, cut at 0.05, to a scale.range of two opacities.

Each setting in the session has a menu route except render and the encoding.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.
  • filter drops the alignments with no gene_group, which Hide unlabelled rows on the palette menu writes.
  • mark is Curved lines on the sliders button.
  • render.antialias turns off the fade a whole-genome view applies to sub-pixel ribbons, since the figure shows the ribbons' colors. It has no menu item.
  • encoding.opacity is the scale above. Opacity on the sliders button scales both opacities together; the mapping itself has no menu item.
  • levelHeights is each band's height, which dragging the bar under a band sets for every band.
  • collapseEmptyRows draws each genome row that has no track as a bare scale bar. Rows → Compact all views on the view menu does the same.

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"]
        ],
        "encoding": {
          "color": "gene_group",
          "opacity": {
            "field": "break_FET",
            "scale": {
              "type": "threshold",
              "domain": [0.05],
              "range": [0.8, 0.15]
            }
          }
        },
        "filter": [{ "field": "gene_group", "valid": true }],
        "autoDiagonalize": true,
        "diagonalizeAnchorRow": 2,
        "mark": { "interpolate": "bump" },
        "render": { "antialias": false },
        "levelHeights": [130, 130, 130, 130, 130],
        "collapseEmptyRows": true
      }
    ]
  }
}

Replaces any defaultSession in config.json in the current folder. See JBrowse CLI with Desktop.

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"]
      ],
      "encoding": {
        "color": "gene_group",
        "opacity": {
          "field": "break_FET",
          "scale": {
            "type": "threshold",
            "domain": [0.05],
            "range": [0.8, 0.15]
          }
        }
      },
      "filter": [{ "field": "gene_group", "valid": true }],
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 2,
      "mark": { "interpolate": "bump" },
      "render": { "antialias": false },
      "levelHeights": [130, 130, 130, 130, 130],
      "collapseEmptyRows": true
    }
  ]
}
EOF

Open this session in JBrowse Web ↗

The genomes in the paper's order, ribbons colored by linkage group, solid on significantly paired chromosomes and faint elsewhere.
Open in JBrowse Web ↗

Large dataset: slow to open.

Or rebuild it from your own data:

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

From scratch:

  1. Open your genomes: Open your own genome in JBrowse Desktop, then File → Open genome... for each of the rest, or jbrowse add-assembly for each in JBrowse Web.This figure's rows, top to bottom: 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. Add your file: click the arrow between two rows and choose New track. Needs an MCScan .blocks file plus one BED per genome.Or pick a synteny track you already have under Quick start, which fills in the rows.This figure uses “BIN vs HCA orthologs, colored by BCnS linkage group”.
  4. Add your file: click the arrow between two rows and choose New track. Needs an MCScan .blocks file plus one BED per genome.This figure uses “RES vs HCA orthologs, colored by BCnS linkage group”.
  5. Add your file: click the arrow between two rows and choose New track. Needs an MCScan .blocks file plus one BED per genome.This figure uses “RES vs BFL orthologs, colored by BCnS linkage group”.
  6. Add your file: click the arrow between two rows and choose New track. Needs an MCScan .blocks file plus one BED per genome.This figure uses “BFL vs EMU orthologs, colored by BCnS linkage group”.
  7. Add your file: click the arrow between two rows and choose New track. Needs an MCScan .blocks file plus one BED per genome.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 → palette button → Hide unlabelled rows (checked)Offered while a text column paints the color. Checked, the alignments that column leaves unlabelled are not drawn.
  12. Synteny view header → View options → Rows → Re-order chromosomes...Reorders 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.
  13. Synteny view header → View options → Rows → Re-order chromosomes... → Row to keep as it is → RESThe other rows reorder to match their neighbour nearer this one, which keeps its own chromosome order.
  14. Synteny display settings (the sliders button in the view header) → Curved lines (checked)
  15. 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 step yet: see Session.

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

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

Start from this JBrowse view.
- Config it loads: https://jbrowse.org/demos/odp_linkage_groups/config.json
- Tracks:
  - BIN vs HCA orthologs, colored by BCnS linkage group (BIN_HCA), SyntenyTrack, an MCScan .blocks file plus one BED per genome, drawn as LinearSyntenyDisplay
  - RES vs HCA orthologs, colored by BCnS linkage group (RES_HCA), SyntenyTrack, an MCScan .blocks file plus one BED per genome, drawn as LinearSyntenyDisplay
  - RES vs BFL orthologs, colored by BCnS linkage group (RES_BFL), SyntenyTrack, an MCScan .blocks file plus one BED per genome, drawn as LinearSyntenyDisplay
  - BFL vs EMU orthologs, colored by BCnS linkage group (BFL_EMU), SyntenyTrack, an MCScan .blocks file plus one BED per genome, drawn as LinearSyntenyDisplay
  - EMU vs CLAa orthologs, colored by BCnS linkage group (EMU_CLAa), SyntenyTrack, an MCScan .blocks file plus one BED per genome, drawn as LinearSyntenyDisplay

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

The session spec that draws the view:
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "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"
        ]
      ],
      "encoding": {
        "color": "gene_group",
        "opacity": {
          "field": "break_FET",
          "scale": {
            "type": "threshold",
            "domain": [
              0.05
            ],
            "range": [
              0.8,
              0.15
            ]
          }
        }
      },
      "filter": [
        {
          "field": "gene_group",
          "valid": true
        }
      ],
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 2,
      "mark": {
        "interpolate": "bump"
      },
      "render": {
        "antialias": false
      },
      "levelHeights": [
        130,
        130,
        130,
        130,
        130
      ],
      "collapseEmptyRows": true
    }
  ]
}
Redraw the figure headlessly
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"
        ]
      ],
      "encoding": {
        "color": "gene_group",
        "opacity": {
          "field": "break_FET",
          "scale": {
            "type": "threshold",
            "domain": [
              0.05
            ],
            "range": [
              0.8,
              0.15
            ]
          }
        }
      },
      "filter": [
        {
          "field": "gene_group",
          "valid": true
        }
      ],
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 2,
      "mark": {
        "interpolate": "bump"
      },
      "render": {
        "antialias": false
      },
      "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.

More: Using JBrowse with AI agents.

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

from jbrowse_anywidget import JBrowseApp, fetch_hub

config = fetch_hub("https://jbrowse.org/demos/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"
                ]
            ],
            "encoding": {
                "color": "gene_group",
                "opacity": {
                    "field": "break_FET",
                    "scale": {
                        "type": "threshold",
                        "domain": [
                            0.05
                        ],
                        "range": [
                            0.8,
                            0.15
                        ]
                    }
                }
            },
            "filter": [
                {
                    "field": "gene_group",
                    "valid": True
                }
            ],
            "autoDiagonalize": True,
            "diagonalizeAnchorRow": 2,
            "mark": {
                "interpolate": "bump"
            },
            "render": {
                "antialias": False
            },
            "levelHeights": [
                130,
                130,
                130,
                130,
                130
            ],
            "collapseEmptyRows": True
        }
    ],
)
app  # display the widget

This view in your React 19 app, with @jbrowse/react-app2 and @jbrowse/core. Add your own files to tracks.

import { use } from 'react'
import { JBrowse } from '@jbrowse/react-app2'
import '@jbrowse/react-app2/styles.css'
import { addRelativeUris } from '@jbrowse/core/util/addRelativeUris'

const configUrl = "https://jbrowse.org/demos/odp_linkage_groups/config.json"
const configPromise = fetch(configUrl)
  .then(res => res.json())
  .then(config => {
    addRelativeUris(config, new URL(configUrl))
    return config
  })

export default function Figure() {
  const config = use(configPromise)
  return (
    <JBrowse
      assemblies={config.assemblies}
      tracks={config.tracks}
      aggregateTextSearchAdapters={config.aggregateTextSearchAdapters}
      configuration={config.configuration}
      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"
            ]
          ],
          "encoding": {
            "color": "gene_group",
            "opacity": {
              "field": "break_FET",
              "scale": {
                "type": "threshold",
                "domain": [
                  0.05
                ],
                "range": [
                  0.8,
                  0.15
                ]
              }
            }
          },
          "filter": [
            {
              "field": "gene_group",
              "valid": true
            }
          ],
          "autoDiagonalize": true,
          "diagonalizeAnchorRow": 2,
          "mark": {
            "interpolate": "bump"
          },
          "render": {
            "antialias": false
          },
          "levelHeights": [
            130,
            130,
            130,
            130,
            130
          ],
          "collapseEmptyRows": true
        }
      ]}
    />
  )
}

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

cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "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"
        ]
      ],
      "encoding": {
        "color": "gene_group",
        "opacity": {
          "field": "break_FET",
          "scale": {
            "type": "threshold",
            "domain": [
              0.05
            ],
            "range": [
              0.8,
              0.15
            ]
          }
        }
      },
      "filter": [
        {
          "field": "gene_group",
          "valid": true
        }
      ],
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 2,
      "mark": {
        "interpolate": "bump"
      },
      "render": {
        "antialias": false
      },
      "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

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

The session spec behind the figure, over this config.

{
  "views": [
    {
      "type": "LinearSyntenyView",
      "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"
        ]
      ],
      "encoding": {
        "color": "gene_group",
        "opacity": {
          "field": "break_FET",
          "scale": {
            "type": "threshold",
            "domain": [
              0.05
            ],
            "range": [
              0.8,
              0.15
            ]
          }
        }
      },
      "filter": [
        {
          "field": "gene_group",
          "valid": true
        }
      ],
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 2,
      "mark": {
        "interpolate": "bump"
      },
      "render": {
        "antialias": false
      },
      "levelHeights": [
        130,
        130,
        130,
        130,
        130
      ],
      "collapseEmptyRows": true
    }
  ]
}

The comb jellies spread most groups over several chromosomes, where the jellyfish keeps each on one, so the second band is the faintest. Both comb jellies spread them the same way, so the band between the two stays solid.

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 assemblies, one track per pair, and a session holding the dotplot and the stack.
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

See also

Citations

Notes

  1. The fusion-with-mixing model is from Simakov et al. 2022. Schultz et al. 2023 find fusions that sponges, cnidarians and bilaterians share, four of them mixed, which comb jellies and three unicellular outgroups lack, and so place the comb jellies as sister to all other animals. ↩