Skip to main content

Synteny visualization (OrthoFinder orthogroups)

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

Genomes too far apart to align base by base still keep their genes in order along the chromosomes. OrthoFinder infers orthogroups, sets of genes descended from one ancestral gene, from protein similarity alone. An orthogroup keeps every copy of a gene, so where a genome doubled or tripled, one region of a relative without that duplication pairs with two or three regions of it: bread wheat's three subgenomes, maize, zebrafish and tomato, and the fruit flies as a lineage with one copy. We:

  • run OrthoFinder and convert the orthogroups to a .blocks table that JBrowse reads
  • load the wheat orthogroups as a synteny track, stack tauschii over bread wheat, and color each link by its tauschii chromosome
  • open four more sets the same way (grasses, vertebrates, nightshades and drosophila) at one locus each, three of them also as multi-way lanes under one genome
  • chain the drosophila orthogroups into collinear blocks with MCScanX and load them as a PAF track

Prerequisites

# Debian/Ubuntu
sudo apt install tabix diamond-aligner gffread nodejs
# or conda, which has every tool above
conda install -c bioconda -c conda-forge htslib diamond gffread nodejs \
  ncbi-datasets-cli mcscanx orthofinder
# or Linux x86_64 binaries for the tools apt lacks
wget -P ~/.local/bin \
  https://ftp.ncbi.nlm.nih.gov/pub/datasets/command-line/v2/linux-amd64/datasets \
  https://ftp.ncbi.nlm.nih.gov/pub/datasets/command-line/v2/linux-amd64/dataformat
chmod +x ~/.local/bin/datasets ~/.local/bin/dataformat
# any platform
npm install -g @jbrowse/cli@next

The data

Each genome is an NCBI assembly, and the script fetches its protein FASTA, GFF3 and sequence report together with datasets download genome accession.

The page's commands build local files from these, and the tracks over those read them from disk; every other track reads a hosted copy. The build script fetches everything itself. Running OrthoFinder and building the blocks table takes a proteome per genome of your own.

What it isFile
vertebrates: human, chicken, frog, gar, zebrafishGCF_000001405.40, GCF_016699485.2, GCF_000004195.4, GCF_000242695.1, GCF_000002035.6
grasses: rice, sorghum, maize, brachypodium, setariaGCF_001433935.1, GCF_000003195.3, GCF_902167145.1, GCF_000005505.3, GCF_000263155.2
wheat: tauschii, wheat, durum, emmer, urartuGCF_002575655.3, GCF_018294505.1, GCA_900231445.1, GCF_002162155.2, GCF_003073215.2
drosophila: melanogaster, simulans, yakuba, pseudoobscura, virilisGCF_000001215.4, GCF_016746395.2, GCF_016746365.2, GCF_009870125.1, GCF_030788295.1
solanaceae: tomato, potato, pepper, tobacco, coffeeGCF_036512215.1, GCA_020169535.1, GCF_002878395.1, GCF_001879085.1, GCA_900059795.1

The wheat set: genomes of one polyploid history

The wheat set is the genomes of wheat's polyploid history:

  • Aegilops tauschii, diploid D donor
  • bread wheat, hexaploid, A+B+D
  • durum, domesticated tetraploid, A+B
  • wild emmer, durum's wild tetraploid ancestor
  • Triticum urartu, diploid A donor

Running OrthoFinder and building the blocks table

The build commands here produce the wheat set; the other four differ only in the proteomes used:

# -og stops after the orthogroups, skipping the gene trees and the species
# tree, which this table does not use and which are most of the runtime.
# -S diamond picks the aligner; -t is threads.
orthofinder -f proteomes -og -S diamond -t "$(getconf _NPROCESSORS_ONLN)"

The run writes proteomes/OrthoFinder/Results_<date>/Orthogroups/Orthogroups.tsv, which the next command reduces to one gene id per cell:

curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/orthogroups_to_blocks.py
python3 orthogroups_to_blocks.py Orthogroups.tsv -o tauschii.blocks \
  --bed tauschii=tauschii.bed --bed wheat=wheat.bed --bed durum=durum.bed \
  --bed emmer=emmer.bed --bed urartu=urartu.bed \
  --max-copies 4

blockAssemblies must match the column order the script prints. --assembly COLUMN=NAME renames a column; a misspelled column there renames nothing and raises no error, while a typo in --bed is an error:

python3 orthogroups_to_blocks.py Orthogroups.tsv -o tauschii.blocks \
  --bed tauschii=tauschii.bed --bed wheat=wheat.bed \
  --assembly wheat=bread_wheat

Duplicated genes: one ribbon, two ribbons or none

In Orthogroups.tsv each cell lists one genome's genes in an orthogroup, so two genes in one cell have no single ribbon. --pick chooses among three treatments:

--pickA rice gene with two maize orthologsUse when
firstone ribbon, to whichever maize gene OrthoFinder listed firstyou want maximum coverage and accept the arbitrary choice
expand (default)two ribbons, one per maize copythe duplication is part of what you are looking at
singleno ribbonyou want a strictly one-to-one table

A cell over --max-copies counts as a family and contributes no row:

python3 orthogroups_to_blocks.py Orthogroups.tsv -o tauschii.blocks \
  --bed tauschii=tauschii.bed --bed wheat=wheat.bed \
  --pick single --max-copies 2

Matching gene ids between the table and the BEDs

Column 4 of each BED must match the ids in the table exactly. The build script keeps each gene's longest protein and names it by the gene id, so OrthoFinder sees one protein per gene under the id the BED has. --bed name=file reports the share of ids placed, and the conversion stops if it places none.

Loading the wheat orthogroups as a synteny track

One track backs each pair of adjacent rows in the stack:

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

{
  "type": "SyntenyTrack",
  "trackId": "wheat_orthogroups",
  "name": "Wheat orthogroups (OrthoFinder)",
  "assemblyNames": ["tauschii", "wheat", "durum", "emmer", "urartu"],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "tauschii.blocks.gz",
    "blockAssemblies": ["durum", "emmer", "tauschii", "urartu", "wheat"],
    "bedLocations": [
      "durum.bed.gz",
      "emmer.bed.gz",
      "tauschii.bed.gz",
      "urartu.bed.gz",
      "wheat.bed.gz"
    ]
  }
}
jbrowse add-track-json '{
  "type": "SyntenyTrack",
  "trackId": "wheat_orthogroups",
  "name": "Wheat orthogroups (OrthoFinder)",
  "assemblyNames": ["tauschii", "wheat", "durum", "emmer", "urartu"],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "tauschii.blocks.gz",
    "blockAssemblies": ["durum", "emmer", "tauschii", "urartu", "wheat"],
    "bedLocations": [
      "durum.bed.gz",
      "emmer.bed.gz",
      "tauschii.bed.gz",
      "urartu.bed.gz",
      "wheat.bed.gz"
    ]
  }
}'

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": "wheat_orthogroups",
  "name": "Wheat orthogroups (OrthoFinder)",
  "assemblyNames": ["tauschii", "wheat", "durum", "emmer", "urartu"],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "tauschii.blocks.gz",
    "blockAssemblies": ["durum", "emmer", "tauschii", "urartu", "wheat"],
    "bedLocations": [
      "durum.bed.gz",
      "emmer.bed.gz",
      "tauschii.bed.gz",
      "urartu.bed.gz",
      "wheat.bed.gz"
    ]
  }
}

tauschii.blocks.gz, durum.bed.gz, emmer.bed.gz, tauschii.bed.gz, urartu.bed.gz, wheat.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.

A mismatch between blockAssemblies and the column order the conversion printed raises a track error naming both lists.

Assemblies from a chrom.sizes

A gene-level synteny view reads no sequence, so each assembly is a ChromSizesAdapter over a .chrom.sizes file (a name and a length per line) built from its NCBI sequence report. We'll load wheat; the other genomes repeat the block under each genome's name:

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

{ "name": "wheat", "uri": "wheat.chrom.sizes" }
jbrowse add-assembly wheat.chrom.sizes \
  --name wheat \
  --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:

wheat.chrom.sizes

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

  • Genome name: wheat

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

Gene tracks, one per genome

The multi-way display draws a lane per genome, with gene models from a gene track on that genome's assembly in the config, open or not (laneGeneTracks picks one when a genome has several). For your own annotation, add one per genome from a bgzipped, sorted GFF3 (prep) that uses the assembly's refNames, indexed with tabix -C:

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

{
  "type": "FeatureTrack",
  "trackId": "wheat_genes",
  "name": "wheat genes",
  "assemblyNames": ["wheat"],
  "adapter": {
    "type": "Gff3TabixAdapter",
    "uri": "wheat.sorted.gff3.gz",
    "csi": true
  }
}
jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "wheat_genes",
  "name": "wheat genes",
  "assemblyNames": ["wheat"],
  "adapter": {
    "type": "Gff3TabixAdapter",
    "uri": "wheat.sorted.gff3.gz",
    "csi": true
  }
}'

In JBrowse Desktop, or in any running JBrowse Web session, open a view on this track’s assembly, then File → Open track..., choose Add track from pasted JSON, and paste:

{
  "type": "FeatureTrack",
  "trackId": "wheat_genes",
  "name": "wheat genes",
  "assemblyNames": ["wheat"],
  "adapter": {
    "type": "Gff3TabixAdapter",
    "uri": "wheat.sorted.gff3.gz",
    "csi": true
  }
}

wheat.sorted.gff3.gz is relative to a config.json. Replace it with its URL or its path on this computer.

Stacking tauschii over wheat

We'll stack the D-genome donor over bread wheat: Add → Linear synteny view, pick wheat_orthogroups and add tauschii above wheat; the all-vs-all tutorial walks the dialog. Then:

  • Navigate the wheat row to 1A 1B 1D 2A 2B 2D 3A 3B 3D 4A 4B 4D 5A 5B 5D 6A 6B 6D 7A 7B 7D, the seven homoeologous groups side by side, with the unplaced Un left out.
  • Pick Query in the palette button menu. The palette sets the view's encoding.color, a color scale from a field to colors, and Query paints each link by its tauschii chromosome.

The same view as a session over the hosted wheat config:

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

{
  "defaultSession": {
    "name": "Tauschii over wheat",
    "views": [
      {
        "type": "LinearSyntenyView",
        "views": [
          { "assembly": "tauschii" },
          {
            "assembly": "wheat",
            "loc": "1A 1B 1D 2A 2B 2D 3A 3B 3D 4A 4B 4D 5A 5B 5D 6A 6B 6D 7A 7B 7D"
          }
        ],
        "tracks": ["wheat_orthogroups"],
        "encoding": { "color": "query", "opacity": 0.15 }
      }
    ]
  }
}
jbrowse set-default-session --session - << 'EOF'
{
  "name": "Tauschii over wheat",
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        { "assembly": "tauschii" },
        {
          "assembly": "wheat",
          "loc": "1A 1B 1D 2A 2B 2D 3A 3B 3D 4A 4B 4D 5A 5B 5D 6A 6B 6D 7A 7B 7D"
        }
      ],
      "tracks": ["wheat_orthogroups"],
      "encoding": { "color": "query", "opacity": 0.15 }
    }
  ]
}
EOF

Open this session in JBrowse Web ↗

Aegilops tauschii over bread wheat on the wheat orthogroups track, each link colored by its tauschii chromosome.
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 new 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: tauschii, wheat.
  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 “Wheat orthogroups (OrthoFinder)”.
  4. Click Launch.
  5. Synteny view header → palette button → QueryThe palette button's tooltip reads "Color by: ...".
  6. Synteny display settings (the sliders button in the view header) → Opacity → drag to 0.15Lower values let dense overlapping ribbons show through each other.
  7. Nothing to run — the view keeps each assembly's own chromosome order.Re-order chromosomes is the opt-in, and this figure leaves it alone on purpose: the order along the axis is part of what the figure is showing.
  8. Drag the bar below a synteny level to resize it.This figure's level is 430px tall.
  9. Synteny display settings (the sliders button in the view header) → Curved lines (unchecked)
  10. Row 2 (wheat)
    1. Go to your region in the location box.This figure is at 1A 1B 1D 2A 2B 2D 3A 3B 3D 4A 4B 4D 5A 5B 5D 6A 6B 6D 7A 7B 7D.

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/orthofinder_wheat/config.json
- Tracks:
  - Wheat orthogroups (OrthoFinder) (wheat_orthogroups), 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",
      "views": [
        {
          "assembly": "tauschii"
        },
        {
          "assembly": "wheat",
          "loc": "1A 1B 1D 2A 2B 2D 3A 3B 3D 4A 4B 4D 5A 5B 5D 6A 6B 6D 7A 7B 7D"
        }
      ],
      "tracks": [
        [
          "wheat_orthogroups"
        ]
      ],
      "encoding": {
        "color": "query",
        "opacity": 0.15
      },
      "autoDiagonalize": false,
      "collapseEmptyRows": true,
      "levelHeights": [
        430
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "tauschii"
        },
        {
          "assembly": "wheat",
          "loc": "1A 1B 1D 2A 2B 2D 3A 3B 3D 4A 4B 4D 5A 5B 5D 6A 6B 6D 7A 7B 7D"
        }
      ],
      "tracks": [
        [
          "wheat_orthogroups"
        ]
      ],
      "encoding": {
        "color": "query",
        "opacity": 0.15
      },
      "autoDiagonalize": false,
      "collapseEmptyRows": true,
      "levelHeights": [
        430
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/orthofinder_wheat/config.json \
  --width 1500 --height 640 \
  --timeout 300000 \
  --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/orthofinder_wheat/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearSyntenyView",
            "views": [
                {
                    "assembly": "tauschii"
                },
                {
                    "assembly": "wheat",
                    "loc": "1A 1B 1D 2A 2B 2D 3A 3B 3D 4A 4B 4D 5A 5B 5D 6A 6B 6D 7A 7B 7D"
                }
            ],
            "tracks": [
                [
                    "wheat_orthogroups"
                ]
            ],
            "encoding": {
                "color": "query",
                "opacity": 0.15
            },
            "autoDiagonalize": False,
            "collapseEmptyRows": True,
            "levelHeights": [
                430
            ],
            "mark": {
                "interpolate": "linear"
            }
        }
    ],
)
app  # display the widget

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",
      "views": [
        {
          "assembly": "tauschii"
        },
        {
          "assembly": "wheat",
          "loc": "1A 1B 1D 2A 2B 2D 3A 3B 3D 4A 4B 4D 5A 5B 5D 6A 6B 6D 7A 7B 7D"
        }
      ],
      "tracks": [
        [
          "wheat_orthogroups"
        ]
      ],
      "encoding": {
        "color": "query",
        "opacity": 0.15
      },
      "autoDiagonalize": false,
      "collapseEmptyRows": true,
      "levelHeights": [
        430
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}
JSON

npx @jbrowse/img synteny --config https://jbrowse.org/demos/orthofinder_wheat/config.json \
  --spec session.json \
  --width 1500 --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",
      "views": [
        {
          "assembly": "tauschii"
        },
        {
          "assembly": "wheat",
          "loc": "1A 1B 1D 2A 2B 2D 3A 3B 3D 4A 4B 4D 5A 5B 5D 6A 6B 6D 7A 7B 7D"
        }
      ],
      "tracks": [
        [
          "wheat_orthogroups"
        ]
      ],
      "encoding": {
        "color": "query",
        "opacity": 0.15
      },
      "autoDiagonalize": false,
      "collapseEmptyRows": true,
      "levelHeights": [
        430
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}

An orthogroup holds a gene's A, B and D copies (homoeologs) together, and --pick expand draws a link to each, so every tauschii chromosome fans out to the three wheat chromosomes of its group.

Wheat 4A against the D genome

Navigate the wheat row to 4A alone, keeping Query:

Aegilops tauschii's D-genome chromosomes over wheat 4A. Color by → Query gives each chromosome its own color.
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 new 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: tauschii, wheat.
  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 “Wheat orthogroups (OrthoFinder)”.
  4. Click Launch.
  5. Synteny view header → palette button → QueryThe palette button's tooltip reads "Color by: ...".
  6. Synteny display settings (the sliders button in the view header) → Opacity → drag to 0.5Lower values let dense overlapping ribbons show through each other.
  7. Nothing to run — the view keeps each assembly's own chromosome order.Re-order chromosomes is the opt-in, and this figure leaves it alone on purpose: the order along the axis is part of what the figure is showing.
  8. Drag the bar below a synteny level to resize it.This figure's level is 430px tall.
  9. Synteny display settings (the sliders button in the view header) → Curved lines (unchecked)
  10. Row 2 (wheat)
    1. Go to your region in the location box.This figure is at 4A.

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/orthofinder_wheat/config.json
- Tracks:
  - Wheat orthogroups (OrthoFinder) (wheat_orthogroups), 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",
      "views": [
        {
          "assembly": "tauschii"
        },
        {
          "assembly": "wheat",
          "loc": "4A"
        }
      ],
      "tracks": [
        [
          "wheat_orthogroups"
        ]
      ],
      "encoding": {
        "color": "query",
        "opacity": 0.5
      },
      "autoDiagonalize": false,
      "collapseEmptyRows": true,
      "levelHeights": [
        430
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "tauschii"
        },
        {
          "assembly": "wheat",
          "loc": "4A"
        }
      ],
      "tracks": [
        [
          "wheat_orthogroups"
        ]
      ],
      "encoding": {
        "color": "query",
        "opacity": 0.5
      },
      "autoDiagonalize": false,
      "collapseEmptyRows": true,
      "levelHeights": [
        430
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}
JSON

cat > callouts.json <<'JSON'
[
  {
    "type": "text",
    "text": "4AL/5AL",
    "fontSize": 20,
    "anchor": {
      "selector": "[data-testid=\"refLabel-5D\"]",
      "alignX": "left"
    },
    "dy": 54
  },
  {
    "type": "text",
    "text": "4AL/7BS",
    "fontSize": 20,
    "anchor": {
      "selector": "[data-testid=\"refLabel-7D\"]",
      "alignX": "right"
    },
    "dx": -30,
    "dy": 150
  }
]
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/orthofinder_wheat/config.json \
  --width 1500 --height 640 \
  --timeout 120000 \
  --spec session.json --annotations callouts.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/orthofinder_wheat/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearSyntenyView",
            "views": [
                {
                    "assembly": "tauschii"
                },
                {
                    "assembly": "wheat",
                    "loc": "4A"
                }
            ],
            "tracks": [
                [
                    "wheat_orthogroups"
                ]
            ],
            "encoding": {
                "color": "query",
                "opacity": 0.5
            },
            "autoDiagonalize": False,
            "collapseEmptyRows": True,
            "levelHeights": [
                430
            ],
            "mark": {
                "interpolate": "linear"
            }
        }
    ],
)
app  # display the widget

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",
      "views": [
        {
          "assembly": "tauschii"
        },
        {
          "assembly": "wheat",
          "loc": "4A"
        }
      ],
      "tracks": [
        [
          "wheat_orthogroups"
        ]
      ],
      "encoding": {
        "color": "query",
        "opacity": 0.5
      },
      "autoDiagonalize": false,
      "collapseEmptyRows": true,
      "levelHeights": [
        430
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}
JSON

npx @jbrowse/img synteny --config https://jbrowse.org/demos/orthofinder_wheat/config.json \
  --spec session.json \
  --width 1500 --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",
      "views": [
        {
          "assembly": "tauschii"
        },
        {
          "assembly": "wheat",
          "loc": "4A"
        }
      ],
      "tracks": [
        [
          "wheat_orthogroups"
        ]
      ],
      "encoding": {
        "color": "query",
        "opacity": 0.5
      },
      "autoDiagonalize": false,
      "collapseEmptyRows": true,
      "levelHeights": [
        430
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}

Other chromosomes appear on 4A only as single genes. The runs from tauschii 5 and 7 are the 4AL/5AL and 4AL/7BS translocations (Devos et al. 1995; Dvorak et al. 2018).

Grasses: one rice region in two maize copies

The other four sets build with bash build_orthofinder_synteny.sh <set> (Reproduce it end to end), and each has a hosted config at https://jbrowse.org/demos/orthofinder_<set>/config.json.

Maize went through a whole-genome duplication after it split from sorghum (Schnable et al. 2009), so one rice region pairs with one sorghum region and two maize regions.

One rice locus against both maize copies

Open the grasses config and stack sorghum over rice over maize, with grasses_orthogroups in each band. Then:

  • Turn on sorghum genes, rice genes and maize genes.
  • Navigate the rows to 1:5,934,000-6,126,000[rev], 3:31,590,000-31,775,000 and 1:286,676,000-287,665,000 5:6,261,000-6,790,000[rev].
  • Pick Target in the palette button menu to paint each link by the chromosome it lands on.

Sorghum is the control: it shares the ancestry and lacks the duplication.

One rice locus between sorghum and maize from the grasses orthogroups track, a gene track under each row.
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 new 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: sorghum, rice, maize.
  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 “Grasses orthogroups (OrthoFinder)”.
  4. Click Launch.
  5. Synteny view header → palette button → TargetThe palette button's tooltip reads "Color by: ...".
  6. Synteny display settings (the sliders button in the view header) → Opacity → drag to 0.65Lower values let dense overlapping ribbons show through each other.
  7. Synteny display settings (the sliders button in the view header) → Curved lines (unchecked)
  8. Drag the bar below a synteny level to resize it.This figure's 2 levels are 190, 500px tall.
  9. Row 1 (sorghum)
    1. Add your track: + → Add track in this view's track selector, or check it there. Needs a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi).This figure uses “sorghum genes”.
      1. Track menu → Filter by → Genes → Only genesGenes counts every gene, transcript and RNA type, the configured transcript and container types, and a top-level CDS; the rest of a GFF, such as NCBI region and match rows, is not a gene.
      2. Track menu → Feature height → Compact
      3. Track menu → Show → Names (unchecked)
      4. Track menu → Show → Descriptions (unchecked)
    2. Go to your region in the location box.This figure is at 1:5,934,000-6,126,000[rev].
  10. Row 2 (rice)
    1. Add the next track the same way. Needs a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi).This figure uses “rice genes”.
      1. Track menu → Filter by → Genes → Only genesGenes counts every gene, transcript and RNA type, the configured transcript and container types, and a top-level CDS; the rest of a GFF, such as NCBI region and match rows, is not a gene.
      2. Track menu → Feature height → Compact
      3. Track menu → Show → Names (unchecked)
      4. Track menu → Show → Descriptions (unchecked)
    2. Go to your region in the location box.This figure is at 3:31,590,000-31,775,000.
  11. Row 3 (maize)
    1. Add the next track the same way. Needs a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi).This figure uses “maize genes”.
      1. Track menu → Filter by → Genes → Only genesGenes counts every gene, transcript and RNA type, the configured transcript and container types, and a top-level CDS; the rest of a GFF, such as NCBI region and match rows, is not a gene.
      2. Track menu → Feature height → Compact
      3. Track menu → Show → Names (unchecked)
      4. Track menu → Show → Descriptions (unchecked)
    2. Go to your region in the location box.This figure is at 1:286,676,000-287,665,000 5:6,261,000-6,790,000[rev].

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/orthofinder_grasses/config.json
- Tracks:
  - Grasses orthogroups (OrthoFinder) (grasses_orthogroups), SyntenyTrack, an MCScan .blocks file plus one BED per genome, drawn as LinearSyntenyDisplay
  - sorghum genes (sorghum_genes), FeatureTrack, a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi), drawn as LinearBasicDisplay
  - rice genes (rice_genes), FeatureTrack, a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi), drawn as LinearBasicDisplay
  - maize genes (maize_genes), FeatureTrack, a bgzip-compressed, tabix-indexed GFF3 (.gff.gz + .tbi), drawn as LinearBasicDisplay

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",
      "views": [
        {
          "assembly": "sorghum",
          "loc": "1:5,934,000-6,126,000[rev]",
          "tracks": [
            {
              "trackId": "sorghum_genes",
              "filter": [
                "geneLike"
              ],
              "displayMode": "compact",
              "labels": {
                "name": {
                  "show": false
                },
                "description": {
                  "show": false
                }
              },
              "height": 40
            }
          ]
        },
        {
          "assembly": "rice",
          "loc": "3:31,590,000-31,775,000",
          "tracks": [
            {
              "trackId": "rice_genes",
              "filter": [
                "geneLike"
              ],
              "displayMode": "compact",
              "labels": {
                "name": {
                  "show": false
                },
                "description": {
                  "show": false
                }
              },
              "height": 40
            }
          ]
        },
        {
          "assembly": "maize",
          "loc": "1:286,676,000-287,665,000 5:6,261,000-6,790,000[rev]",
          "tracks": [
            {
              "trackId": "maize_genes",
              "filter": [
                "geneLike"
              ],
              "displayMode": "compact",
              "labels": {
                "name": {
                  "show": false
                },
                "description": {
                  "show": false
                }
              },
              "height": 40
            }
          ]
        }
      ],
      "tracks": [
        "grasses_orthogroups"
      ],
      "encoding": {
        "color": "target",
        "opacity": 0.65
      },
      "mark": {
        "interpolate": "linear"
      },
      "levelHeights": [
        190,
        500
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "sorghum",
          "loc": "1:5,934,000-6,126,000[rev]",
          "tracks": [
            {
              "trackId": "sorghum_genes",
              "filter": [
                "geneLike"
              ],
              "displayMode": "compact",
              "labels": {
                "name": {
                  "show": false
                },
                "description": {
                  "show": false
                }
              },
              "height": 40
            }
          ]
        },
        {
          "assembly": "rice",
          "loc": "3:31,590,000-31,775,000",
          "tracks": [
            {
              "trackId": "rice_genes",
              "filter": [
                "geneLike"
              ],
              "displayMode": "compact",
              "labels": {
                "name": {
                  "show": false
                },
                "description": {
                  "show": false
                }
              },
              "height": 40
            }
          ]
        },
        {
          "assembly": "maize",
          "loc": "1:286,676,000-287,665,000 5:6,261,000-6,790,000[rev]",
          "tracks": [
            {
              "trackId": "maize_genes",
              "filter": [
                "geneLike"
              ],
              "displayMode": "compact",
              "labels": {
                "name": {
                  "show": false
                },
                "description": {
                  "show": false
                }
              },
              "height": 40
            }
          ]
        }
      ],
      "tracks": [
        "grasses_orthogroups"
      ],
      "encoding": {
        "color": "target",
        "opacity": 0.65
      },
      "mark": {
        "interpolate": "linear"
      },
      "levelHeights": [
        190,
        500
      ]
    }
  ]
}
JSON

cat > callouts.json <<'JSON'
[
  {
    "type": "text",
    "text": "maize 1",
    "anchor": {
      "view": [
        0,
        2
      ],
      "trackId": "maize_genes",
      "loc": "1:286,900,000",
      "fracY": 0
    },
    "dy": -100
  },
  {
    "type": "text",
    "text": "maize 5",
    "anchor": {
      "view": [
        0,
        2
      ],
      "trackId": "maize_genes",
      "loc": "5:6,450,000",
      "fracY": 0
    },
    "dy": -100
  }
]
JSON

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

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file (replace YOUR_FILE).

jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "sorghum_genes",
  "name": "sorghum genes",
  "assemblyNames": [
    "sorghum"
  ],
  "adapter": {
    "type": "Gff3TabixAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "filter": [
      "geneLike"
    ],
    "displayMode": "compact",
    "labels": {
      "name": {
        "show": false
      },
      "description": {
        "show": false
      }
    },
    "height": 40
  }
}'

jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "rice_genes",
  "name": "rice genes",
  "assemblyNames": [
    "rice"
  ],
  "adapter": {
    "type": "Gff3TabixAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "filter": [
      "geneLike"
    ],
    "displayMode": "compact",
    "labels": {
      "name": {
        "show": false
      },
      "description": {
        "show": false
      }
    },
    "height": 40
  }
}'

jbrowse add-track-json '{
  "type": "FeatureTrack",
  "trackId": "maize_genes",
  "name": "maize genes",
  "assemblyNames": [
    "maize"
  ],
  "adapter": {
    "type": "Gff3TabixAdapter",
    "uri": "YOUR_FILE"
  },
  "displayDefaults": {
    "filter": [
      "geneLike"
    ],
    "displayMode": "compact",
    "labels": {
      "name": {
        "show": false
      },
      "description": {
        "show": false
      }
    },
    "height": 40
  }
}'

Run beside config.json, or add --out <dir>. Needs sorghum, rice, maize in the config (jbrowse add-assembly).

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/orthofinder_grasses/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearSyntenyView",
            "views": [
                {
                    "assembly": "sorghum",
                    "loc": "1:5,934,000-6,126,000[rev]",
                    "tracks": [
                        {
                            "trackId": "sorghum_genes",
                            "filter": [
                                "geneLike"
                            ],
                            "displayMode": "compact",
                            "labels": {
                                "name": {
                                    "show": False
                                },
                                "description": {
                                    "show": False
                                }
                            },
                            "height": 40
                        }
                    ]
                },
                {
                    "assembly": "rice",
                    "loc": "3:31,590,000-31,775,000",
                    "tracks": [
                        {
                            "trackId": "rice_genes",
                            "filter": [
                                "geneLike"
                            ],
                            "displayMode": "compact",
                            "labels": {
                                "name": {
                                    "show": False
                                },
                                "description": {
                                    "show": False
                                }
                            },
                            "height": 40
                        }
                    ]
                },
                {
                    "assembly": "maize",
                    "loc": "1:286,676,000-287,665,000 5:6,261,000-6,790,000[rev]",
                    "tracks": [
                        {
                            "trackId": "maize_genes",
                            "filter": [
                                "geneLike"
                            ],
                            "displayMode": "compact",
                            "labels": {
                                "name": {
                                    "show": False
                                },
                                "description": {
                                    "show": False
                                }
                            },
                            "height": 40
                        }
                    ]
                }
            ],
            "tracks": [
                "grasses_orthogroups"
            ],
            "encoding": {
                "color": "target",
                "opacity": 0.65
            },
            "mark": {
                "interpolate": "linear"
            },
            "levelHeights": [
                190,
                500
            ]
        }
    ],
)
app  # display the widget

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",
      "views": [
        {
          "assembly": "sorghum",
          "loc": "1:5,934,000-6,126,000[rev]",
          "tracks": [
            {
              "trackId": "sorghum_genes",
              "filter": [
                "geneLike"
              ],
              "displayMode": "compact",
              "labels": {
                "name": {
                  "show": false
                },
                "description": {
                  "show": false
                }
              },
              "height": 40
            }
          ]
        },
        {
          "assembly": "rice",
          "loc": "3:31,590,000-31,775,000",
          "tracks": [
            {
              "trackId": "rice_genes",
              "filter": [
                "geneLike"
              ],
              "displayMode": "compact",
              "labels": {
                "name": {
                  "show": false
                },
                "description": {
                  "show": false
                }
              },
              "height": 40
            }
          ]
        },
        {
          "assembly": "maize",
          "loc": "1:286,676,000-287,665,000 5:6,261,000-6,790,000[rev]",
          "tracks": [
            {
              "trackId": "maize_genes",
              "filter": [
                "geneLike"
              ],
              "displayMode": "compact",
              "labels": {
                "name": {
                  "show": false
                },
                "description": {
                  "show": false
                }
              },
              "height": 40
            }
          ]
        }
      ],
      "tracks": [
        "grasses_orthogroups"
      ],
      "encoding": {
        "color": "target",
        "opacity": 0.65
      },
      "mark": {
        "interpolate": "linear"
      },
      "levelHeights": [
        190,
        500
      ]
    }
  ]
}
JSON

npx @jbrowse/img synteny --config https://jbrowse.org/demos/orthofinder_grasses/config.json \
  --spec session.json \
  --width 1500 --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",
      "views": [
        {
          "assembly": "sorghum",
          "loc": "1:5,934,000-6,126,000[rev]",
          "tracks": [
            {
              "trackId": "sorghum_genes",
              "filter": [
                "geneLike"
              ],
              "displayMode": "compact",
              "labels": {
                "name": {
                  "show": false
                },
                "description": {
                  "show": false
                }
              },
              "height": 40
            }
          ]
        },
        {
          "assembly": "rice",
          "loc": "3:31,590,000-31,775,000",
          "tracks": [
            {
              "trackId": "rice_genes",
              "filter": [
                "geneLike"
              ],
              "displayMode": "compact",
              "labels": {
                "name": {
                  "show": false
                },
                "description": {
                  "show": false
                }
              },
              "height": 40
            }
          ]
        },
        {
          "assembly": "maize",
          "loc": "1:286,676,000-287,665,000 5:6,261,000-6,790,000[rev]",
          "tracks": [
            {
              "trackId": "maize_genes",
              "filter": [
                "geneLike"
              ],
              "displayMode": "compact",
              "labels": {
                "name": {
                  "show": false
                },
                "description": {
                  "show": false
                }
              },
              "height": 40
            }
          ]
        }
      ],
      "tracks": [
        "grasses_orthogroups"
      ],
      "encoding": {
        "color": "target",
        "opacity": 0.65
      },
      "mark": {
        "interpolate": "linear"
      },
      "levelHeights": [
        190,
        500
      ]
    }
  ]
}

A rice window against four grasses

Open the same five grasses as a multi-way synteny track on rice. Its top lane draws the rice genes, so no separate gene track is needed:

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

{
  "defaultSession": {
    "name": "Grasses multi-way synteny track",
    "views": [
      {
        "type": "LinearGenomeView",
        "assembly": "rice",
        "loc": "3:31,590,000-31,775,000",
        "tracks": [
          {
            "trackId": "grasses_orthogroups",
            "type": "MultiWaySyntenyDisplay",
            "rows": {
              "sort": ["sorghum", "brachypodium", "setaria", "maize"]
            },
            "height": 480
          }
        ]
      }
    ]
  }
}
jbrowse set-default-session --session - << 'EOF'
{
  "name": "Grasses multi-way synteny track",
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "rice",
      "loc": "3:31,590,000-31,775,000",
      "tracks": [
        {
          "trackId": "grasses_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": ["sorghum", "brachypodium", "setaria", "maize"]
          },
          "height": 480
        }
      ]
    }
  ]
}
EOF

Open this session in JBrowse Web ↗

A rice window over four grass lanes from one orthogroups track, each drawing its own gene models.
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 genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses rice, loaded from a .chrom.sizes file.
  2. Add your track: File → Open track..., or check it in the track selector. Needs an MCScan .blocks file plus one BED per genome.This figure uses “Grasses orthogroups (OrthoFinder)”.
    1. Track menu → Lanes → Lane menusOpen a lane's submenu and choose Move up or Move down, or drag the lane's name in the left gutter. This figure's order, top to bottom: sorghum, brachypodium, setaria, maize.
  3. Go to your region in the location box.This figure is at 3:31,590,000-31,775,000.

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/orthofinder_grasses/config.json
- Tracks:
  - Grasses orthogroups (OrthoFinder) (grasses_orthogroups), SyntenyTrack, an MCScan .blocks file plus one BED per genome, drawn as MultiWaySyntenyDisplay

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": "LinearGenomeView",
      "assembly": "rice",
      "loc": "3:31,590,000-31,775,000",
      "tracks": [
        {
          "trackId": "grasses_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": [
              "sorghum",
              "brachypodium",
              "setaria",
              "maize"
            ]
          },
          "height": 480
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "rice",
      "loc": "3:31,590,000-31,775,000",
      "tracks": [
        {
          "trackId": "grasses_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": [
              "sorghum",
              "brachypodium",
              "setaria",
              "maize"
            ]
          },
          "height": 480
        }
      ]
    }
  ]
}
JSON

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

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file (replace YOUR_FILE).

jbrowse add-track-json '{
  "type": "SyntenyTrack",
  "trackId": "grasses_orthogroups",
  "name": "Grasses orthogroups (OrthoFinder)",
  "assemblyNames": [
    "rice",
    "sorghum",
    "maize",
    "brachypodium",
    "setaria"
  ],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "YOUR_FILE"
  },
  "displays": [
    {
      "type": "MultiWaySyntenyDisplay",
      "rows": {
        "sort": [
          "sorghum",
          "brachypodium",
          "setaria",
          "maize"
        ]
      },
      "height": 480
    }
  ]
}'

Run beside config.json, or add --out <dir>. Needs rice, sorghum, maize, brachypodium, setaria in the config (jbrowse add-assembly).

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/orthofinder_grasses/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "rice",
            "loc": "3:31,590,000-31,775,000",
            "tracks": [
                {
                    "trackId": "grasses_orthogroups",
                    "type": "MultiWaySyntenyDisplay",
                    "rows": {
                        "sort": [
                            "sorghum",
                            "brachypodium",
                            "setaria",
                            "maize"
                        ]
                    },
                    "height": 480
                }
            ]
        }
    ],
)
app  # display the widget

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

npx @jbrowse/img --config https://jbrowse.org/demos/orthofinder_grasses/config.json \
  --assembly rice --loc 3:31,590,000-31,775,000 \
  --track grasses_orthogroups display:MultiWaySyntenyDisplay '{"rows":{"sort":["sorghum","brachypodium","setaria","maize"]},"height":480}' \
  --width 1500 --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": "LinearGenomeView",
      "assembly": "rice",
      "loc": "3:31,590,000-31,775,000",
      "tracks": [
        {
          "trackId": "grasses_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": [
              "sorghum",
              "brachypodium",
              "setaria",
              "maize"
            ]
          },
          "height": 480
        }
      ]
    }
  ]
}

A stacked view shows both maize copies at once. Advanced → Launch → Linear synteny view (visible region) in the lane track menu offers a full row per grass.

Launching a stack from the lane track: the track menu entry, the dialog's row checkboxes, and Replace current view.

Open the session the video starts in ↗, then take the steps it shows:

  1. Rice's genes, with one ortholog lane per grass under them
  2. From the track menu, launch a synteny view of this region
  3. The dialog lists a panel per grass, with the span each opens at
  4. The stack replaces the lanes: rice on top, each grass below it
Open this view in JBrowse Web ↗ ·

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

From scratch:

  1. Open your genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses rice, loaded from a .chrom.sizes file.
  2. Add your track: File → Open track..., or check it in the track selector. Needs an MCScan .blocks file plus one BED per genome.This figure uses “Grasses orthogroups (OrthoFinder)”.
    1. Track menu → Lanes → Lane menusOpen a lane's submenu and choose Move up or Move down, or drag the lane's name in the left gutter. This figure's order, top to bottom: sorghum, brachypodium, setaria, maize.
  3. Go to your region in the location box.This figure is at 3:31,590,000-31,775,000.

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/orthofinder_grasses/config.json
- Tracks:
  - Grasses orthogroups (OrthoFinder) (grasses_orthogroups), SyntenyTrack, an MCScan .blocks file plus one BED per genome, drawn as MultiWaySyntenyDisplay

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": "LinearGenomeView",
      "assembly": "rice",
      "loc": "3:31,590,000-31,775,000",
      "tracks": [
        {
          "trackId": "grasses_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": [
              "sorghum",
              "brachypodium",
              "setaria",
              "maize"
            ]
          },
          "height": 480
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "rice",
      "loc": "3:31,590,000-31,775,000",
      "tracks": [
        {
          "trackId": "grasses_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": [
              "sorghum",
              "brachypodium",
              "setaria",
              "maize"
            ]
          },
          "height": 480
        }
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/orthofinder_grasses/config.json \
  --width 1920 --height 830 \
  --spec session.json -o figure.png

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file (replace YOUR_FILE).

jbrowse add-track-json '{
  "type": "SyntenyTrack",
  "trackId": "grasses_orthogroups",
  "name": "Grasses orthogroups (OrthoFinder)",
  "assemblyNames": [
    "rice",
    "sorghum",
    "maize",
    "brachypodium",
    "setaria"
  ],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "YOUR_FILE"
  },
  "displays": [
    {
      "type": "MultiWaySyntenyDisplay",
      "rows": {
        "sort": [
          "sorghum",
          "brachypodium",
          "setaria",
          "maize"
        ]
      },
      "height": 480
    }
  ]
}'

Run beside config.json, or add --out <dir>. Needs rice, sorghum, maize, brachypodium, setaria in the config (jbrowse add-assembly).

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/orthofinder_grasses/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "rice",
            "loc": "3:31,590,000-31,775,000",
            "tracks": [
                {
                    "trackId": "grasses_orthogroups",
                    "type": "MultiWaySyntenyDisplay",
                    "rows": {
                        "sort": [
                            "sorghum",
                            "brachypodium",
                            "setaria",
                            "maize"
                        ]
                    },
                    "height": 480
                }
            ]
        }
    ],
)
app  # display the widget

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

npx @jbrowse/img --config https://jbrowse.org/demos/orthofinder_grasses/config.json \
  --assembly rice --loc 3:31,590,000-31,775,000 \
  --track grasses_orthogroups display:MultiWaySyntenyDisplay '{"rows":{"sort":["sorghum","brachypodium","setaria","maize"]},"height":480}' \
  --width 1920 --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": "LinearGenomeView",
      "assembly": "rice",
      "loc": "3:31,590,000-31,775,000",
      "tracks": [
        {
          "trackId": "grasses_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": [
              "sorghum",
              "brachypodium",
              "setaria",
              "maize"
            ]
          },
          "height": 480
        }
      ]
    }
  ]
}

Vertebrates: one gar chromosome in two zebrafish copies

The teleost fishes, zebrafish among them, descend from a genome duplication that spotted gar branched off before (Braasch et al. 2016). Open the vertebrates config and stack gar over zebrafish, with vertebrates_orthogroups in the band. Then:

  • Navigate the gar row to LG11 and leave zebrafish whole.
  • Pick Target in the palette button menu to paint each link by its zebrafish chromosome.
  • Uncheck Off-screen mates in the settings menu, which otherwise labels the zebrafish genes whose gar partners sit on other gar chromosomes.
Gar LG11 over the whole zebrafish genome from the vertebrates orthogroups track, each link colored by its zebrafish chromosome.
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 new 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: gar, zebrafish.
  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 “Vertebrates orthogroups (OrthoFinder)”.
  4. Click Launch.
  5. Synteny view header → palette button → TargetThe palette button's tooltip reads "Color by: ...".
  6. Synteny display settings (the sliders button in the view header) → Opacity → drag to 0.4Lower values let dense overlapping ribbons show through each other.
  7. 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.
  8. Drag the bar below a synteny level to resize it.This figure's level is 430px tall.
  9. Synteny display settings (the sliders button in the view header) → Curved lines (unchecked)
  10. Synteny display settings (the sliders button in the view header) → Off-screen mates (unchecked)On by default: a locus syntenic to a contig the facing panel is not showing draws no ribbon, so without the marks it looks exactly like a locus syntenic to nothing.
  11. Row 1 (gar)
    1. Go to your region in the location box.This figure is at LG11.

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/orthofinder_vertebrates/config.json
- Tracks:
  - Vertebrates orthogroups (OrthoFinder) (vertebrates_orthogroups), 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",
      "views": [
        {
          "assembly": "gar",
          "loc": "LG11"
        },
        {
          "assembly": "zebrafish"
        }
      ],
      "tracks": [
        "vertebrates_orthogroups"
      ],
      "encoding": {
        "color": "target",
        "opacity": 0.4
      },
      "autoDiagonalize": true,
      "collapseEmptyRows": true,
      "levelHeights": [
        430
      ],
      "mark": {
        "interpolate": "linear"
      },
      "offscreen": {
        "show": false
      }
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "gar",
          "loc": "LG11"
        },
        {
          "assembly": "zebrafish"
        }
      ],
      "tracks": [
        "vertebrates_orthogroups"
      ],
      "encoding": {
        "color": "target",
        "opacity": 0.4
      },
      "autoDiagonalize": true,
      "collapseEmptyRows": true,
      "levelHeights": [
        430
      ],
      "mark": {
        "interpolate": "linear"
      },
      "offscreen": {
        "show": false
      }
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/orthofinder_vertebrates/config.json \
  --width 1500 --height 640 \
  --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/orthofinder_vertebrates/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearSyntenyView",
            "views": [
                {
                    "assembly": "gar",
                    "loc": "LG11"
                },
                {
                    "assembly": "zebrafish"
                }
            ],
            "tracks": [
                "vertebrates_orthogroups"
            ],
            "encoding": {
                "color": "target",
                "opacity": 0.4
            },
            "autoDiagonalize": True,
            "collapseEmptyRows": True,
            "levelHeights": [
                430
            ],
            "mark": {
                "interpolate": "linear"
            },
            "offscreen": {
                "show": False
            }
        }
    ],
)
app  # display the widget

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",
      "views": [
        {
          "assembly": "gar",
          "loc": "LG11"
        },
        {
          "assembly": "zebrafish"
        }
      ],
      "tracks": [
        "vertebrates_orthogroups"
      ],
      "encoding": {
        "color": "target",
        "opacity": 0.4
      },
      "autoDiagonalize": true,
      "collapseEmptyRows": true,
      "levelHeights": [
        430
      ],
      "mark": {
        "interpolate": "linear"
      },
      "offscreen": {
        "show": false
      }
    }
  ]
}
JSON

npx @jbrowse/img synteny --config https://jbrowse.org/demos/orthofinder_vertebrates/config.json \
  --spec session.json \
  --width 1500 --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",
      "views": [
        {
          "assembly": "gar",
          "loc": "LG11"
        },
        {
          "assembly": "zebrafish"
        }
      ],
      "tracks": [
        "vertebrates_orthogroups"
      ],
      "encoding": {
        "color": "target",
        "opacity": 0.4
      },
      "autoDiagonalize": true,
      "collapseEmptyRows": true,
      "levelHeights": [
        430
      ],
      "mark": {
        "interpolate": "linear"
      },
      "offscreen": {
        "show": false
      }
    }
  ]
}

The human HOXD cluster against four vertebrates

Open human at 2:176,090,000-176,290,000, the HOXD cluster of body-axis patterning genes, with the orthogroups track on the multi-way synteny display. A lane (one horizontal strip per genome) for each of chicken, frog, gar and zebrafish draws under the human genes.

The human HOXD cluster over four vertebrate lanes from one orthogroups track, each lane with its genome's genes.
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 genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses human, loaded from a .chrom.sizes file.
  2. Add your track: File → Open track..., or check it in the track selector. Needs an MCScan .blocks file plus one BED per genome.This figure uses “Vertebrates orthogroups (OrthoFinder)”.
    1. Track menu → Lanes → Lane menusOpen a lane's submenu and choose Move up or Move down, or drag the lane's name in the left gutter. This figure's order, top to bottom: chicken, frog, gar, zebrafish.
  3. Go to your region in the location box.This figure is at 2:176,090,000-176,290,000.

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/orthofinder_vertebrates/config.json
- Tracks:
  - Vertebrates orthogroups (OrthoFinder) (vertebrates_orthogroups), SyntenyTrack, an MCScan .blocks file plus one BED per genome, drawn as MultiWaySyntenyDisplay

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": "LinearGenomeView",
      "assembly": "human",
      "loc": "2:176,090,000-176,290,000",
      "tracks": [
        {
          "trackId": "vertebrates_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": [
              "chicken",
              "frog",
              "gar",
              "zebrafish"
            ]
          },
          "height": 480
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "human",
      "loc": "2:176,090,000-176,290,000",
      "tracks": [
        {
          "trackId": "vertebrates_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": [
              "chicken",
              "frog",
              "gar",
              "zebrafish"
            ]
          },
          "height": 480
        }
      ]
    }
  ]
}
JSON

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

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file (replace YOUR_FILE).

jbrowse add-track-json '{
  "type": "SyntenyTrack",
  "trackId": "vertebrates_orthogroups",
  "name": "Vertebrates orthogroups (OrthoFinder)",
  "assemblyNames": [
    "human",
    "chicken",
    "frog",
    "gar",
    "zebrafish"
  ],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "YOUR_FILE"
  },
  "displays": [
    {
      "type": "MultiWaySyntenyDisplay",
      "rows": {
        "sort": [
          "chicken",
          "frog",
          "gar",
          "zebrafish"
        ]
      },
      "height": 480
    }
  ]
}'

Run beside config.json, or add --out <dir>. Needs human, chicken, frog, gar, zebrafish in the config (jbrowse add-assembly).

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/orthofinder_vertebrates/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "human",
            "loc": "2:176,090,000-176,290,000",
            "tracks": [
                {
                    "trackId": "vertebrates_orthogroups",
                    "type": "MultiWaySyntenyDisplay",
                    "rows": {
                        "sort": [
                            "chicken",
                            "frog",
                            "gar",
                            "zebrafish"
                        ]
                    },
                    "height": 480
                }
            ]
        }
    ],
)
app  # display the widget

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

npx @jbrowse/img --config https://jbrowse.org/demos/orthofinder_vertebrates/config.json \
  --assembly human --loc 2:176,090,000-176,290,000 \
  --track vertebrates_orthogroups display:MultiWaySyntenyDisplay '{"rows":{"sort":["chicken","frog","gar","zebrafish"]},"height":480}' \
  --width 1500 --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": "LinearGenomeView",
      "assembly": "human",
      "loc": "2:176,090,000-176,290,000",
      "tracks": [
        {
          "trackId": "vertebrates_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": [
              "chicken",
              "frog",
              "gar",
              "zebrafish"
            ]
          },
          "height": 480
        }
      ]
    }
  ]
}

Nightshades: one coffee region in three tomato copies

Tomato, potato and pepper share a whole-genome triplication that coffee lacks (Tomato Genome Consortium 2012; Denoeud et al. 2014). Open the solanaceae config and stack tomato over coffee over tomato, with solanaceae_orthogroups in both bands. Then:

  • Navigate the rows to 7:66,700,000-70,550,000, VII:24,200,000-28,800,000 and 10:850,000-2,400,000[rev] 12:4,600,000-6,900,000: one tomato copy above coffee and the other two below.
  • Pick Reference in the palette button menu to paint each link by its tomato chromosome.
  • Uncheck Off-screen mates in the settings menu, which otherwise marks the coffee genes whose other partners fall outside the windows.
One coffee window between three tomato windows from the solanaceae orthogroups track, links colored by tomato chromosome.
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 new 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: tomato, coffee, tomato.
  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 “Solanaceae orthogroups (OrthoFinder)”.
  4. Click Launch.
  5. Synteny view header → palette button → ReferenceThe palette button's tooltip reads "Color by: ...". Reference is offered only in a stacked view of three or more genomes, where there is a shared reference to trace.
  6. Synteny display settings (the sliders button in the view header) → Opacity → drag to 0.5Lower values let dense overlapping ribbons show through each other.
  7. Synteny display settings (the sliders button in the view header) → Curved lines (unchecked)
  8. Synteny display settings (the sliders button in the view header) → Off-screen mates (unchecked)On by default: a locus syntenic to a contig the facing panel is not showing draws no ribbon, so without the marks it looks exactly like a locus syntenic to nothing.
  9. Drag the bar below a synteny level to resize it.This figure's 2 levels are 260, 360px tall.
  10. Row 1 (tomato)
    1. Go to your region in the location box.This figure is at SL4.0ch07:63,900,000-67,900,000.
  11. Row 2 (coffee)
    1. Go to your region in the location box.This figure is at 5:24,200,000-28,800,000.
  12. Row 3 (tomato)
    1. Go to your region in the location box.This figure is at SL4.0ch10:300,000-1,950,000[rev] SL4.0ch12:4,300,000-6,510,000.

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/orthofinder_solanaceae/config.json
- Tracks:
  - Solanaceae orthogroups (OrthoFinder) (solanaceae_orthogroups), 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",
      "views": [
        {
          "assembly": "tomato",
          "loc": "SL4.0ch07:63,900,000-67,900,000"
        },
        {
          "assembly": "coffee",
          "loc": "5:24,200,000-28,800,000"
        },
        {
          "assembly": "tomato",
          "loc": "SL4.0ch10:300,000-1,950,000[rev] SL4.0ch12:4,300,000-6,510,000"
        }
      ],
      "tracks": [
        "solanaceae_orthogroups"
      ],
      "encoding": {
        "color": "reference",
        "opacity": 0.5
      },
      "mark": {
        "interpolate": "linear"
      },
      "offscreen": {
        "show": false
      },
      "collapseEmptyRows": true,
      "levelHeights": [
        260,
        360
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "tomato",
          "loc": "SL4.0ch07:63,900,000-67,900,000"
        },
        {
          "assembly": "coffee",
          "loc": "5:24,200,000-28,800,000"
        },
        {
          "assembly": "tomato",
          "loc": "SL4.0ch10:300,000-1,950,000[rev] SL4.0ch12:4,300,000-6,510,000"
        }
      ],
      "tracks": [
        "solanaceae_orthogroups"
      ],
      "encoding": {
        "color": "reference",
        "opacity": 0.5
      },
      "mark": {
        "interpolate": "linear"
      },
      "offscreen": {
        "show": false
      },
      "collapseEmptyRows": true,
      "levelHeights": [
        260,
        360
      ]
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/orthofinder_solanaceae/config.json \
  --width 1500 --height 860 \
  --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/orthofinder_solanaceae/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearSyntenyView",
            "views": [
                {
                    "assembly": "tomato",
                    "loc": "SL4.0ch07:63,900,000-67,900,000"
                },
                {
                    "assembly": "coffee",
                    "loc": "5:24,200,000-28,800,000"
                },
                {
                    "assembly": "tomato",
                    "loc": "SL4.0ch10:300,000-1,950,000[rev] SL4.0ch12:4,300,000-6,510,000"
                }
            ],
            "tracks": [
                "solanaceae_orthogroups"
            ],
            "encoding": {
                "color": "reference",
                "opacity": 0.5
            },
            "mark": {
                "interpolate": "linear"
            },
            "offscreen": {
                "show": False
            },
            "collapseEmptyRows": True,
            "levelHeights": [
                260,
                360
            ]
        }
    ],
)
app  # display the widget

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",
      "views": [
        {
          "assembly": "tomato",
          "loc": "SL4.0ch07:63,900,000-67,900,000"
        },
        {
          "assembly": "coffee",
          "loc": "5:24,200,000-28,800,000"
        },
        {
          "assembly": "tomato",
          "loc": "SL4.0ch10:300,000-1,950,000[rev] SL4.0ch12:4,300,000-6,510,000"
        }
      ],
      "tracks": [
        "solanaceae_orthogroups"
      ],
      "encoding": {
        "color": "reference",
        "opacity": 0.5
      },
      "mark": {
        "interpolate": "linear"
      },
      "offscreen": {
        "show": false
      },
      "collapseEmptyRows": true,
      "levelHeights": [
        260,
        360
      ]
    }
  ]
}
JSON

npx @jbrowse/img synteny --config https://jbrowse.org/demos/orthofinder_solanaceae/config.json \
  --spec session.json \
  --width 1500 --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",
      "views": [
        {
          "assembly": "tomato",
          "loc": "SL4.0ch07:63,900,000-67,900,000"
        },
        {
          "assembly": "coffee",
          "loc": "5:24,200,000-28,800,000"
        },
        {
          "assembly": "tomato",
          "loc": "SL4.0ch10:300,000-1,950,000[rev] SL4.0ch12:4,300,000-6,510,000"
        }
      ],
      "tracks": [
        "solanaceae_orthogroups"
      ],
      "encoding": {
        "color": "reference",
        "opacity": 0.5
      },
      "mark": {
        "interpolate": "linear"
      },
      "offscreen": {
        "show": false
      },
      "collapseEmptyRows": true,
      "levelHeights": [
        260,
        360
      ]
    }
  ]
}

Each copy has lost genes since the triplication, so most coffee genes draw to one of the three.

Drosophila: one copy, rearranged

The drosophila set stacks D. melanogaster with close relatives D. simulans and D. yakuba and the distant D. pseudoobscura and D. virilis, which share no genome duplication since they split. The chromosome arms (Muller elements) keep their gene content, while inversions reorder the genes inside each arm. In D. pseudoobscura melanogaster's 3L arm (Muller D) is the right arm of the X (Richards et al. 2005).

Open the drosophila config and stack the flies as simulans, melanogaster, yakuba, melanogaster, pseudoobscura, melanogaster, virilis, so every band sets one fly against melanogaster, with drosophila_orthogroups in each band. Then:

  • Pick Show all regions - same bp per pixel in the view menu (coord: { ratio: 1 } in a session spec), which puts the rows on one bp/px, so row length on screen matches genome size.
  • Pick Rows → Re-order chromosomes (autoDiagonalize in a session spec), which sorts each row's chromosomes against its neighbour so the links run along a diagonal.
  • Pick Reference in the palette button menu to paint each ribbon by the melanogaster arm it leaves.
Four flies stacked with melanogaster between each pair, ribbons colored by melanogaster arm.
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 new 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: simulans, melanogaster, yakuba, melanogaster, pseudoobscura, melanogaster, virilis.
  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 “Drosophila orthogroups (OrthoFinder)”.
  4. Click Launch.
  5. Synteny view header → palette button → ReferenceThe palette button's tooltip reads "Color by: ...". Reference is offered only in a stacked view of three or more genomes, where there is a shared reference to trace.
  6. Synteny display settings (the sliders button in the view header) → Opacity → drag to 0.15Lower values let dense overlapping ribbons show through each other.
  7. 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.
  8. Synteny view header → View options → Rows → Re-order chromosomes... → Row to keep as it is → melanogaster (row 2)The other rows reorder to match their neighbour nearer this one, which keeps its own chromosome order.
  9. Synteny view header → View options → Show all regions - same bp per pixelRow length becomes genome size, which is what makes the rows comparable.
  10. Drag the bar below a synteny level to resize it.This figure's 6 levels are 150, 150, 150, 150, 150, 150px tall.
  11. Synteny display settings (the sliders button in the view header) → Curved lines (unchecked)

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/orthofinder_drosophila/config.json
- Tracks:
  - Drosophila orthogroups (OrthoFinder) (drosophila_orthogroups), 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",
      "views": [
        {
          "assembly": "simulans"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "yakuba"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "pseudoobscura"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "virilis"
        }
      ],
      "tracks": [
        "drosophila_orthogroups"
      ],
      "encoding": {
        "color": "reference",
        "opacity": 0.15
      },
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 1,
      "coord": {
        "ratio": 1
      },
      "collapseEmptyRows": true,
      "levelHeights": [
        150,
        150,
        150,
        150,
        150,
        150
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "simulans"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "yakuba"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "pseudoobscura"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "virilis"
        }
      ],
      "tracks": [
        "drosophila_orthogroups"
      ],
      "encoding": {
        "color": "reference",
        "opacity": 0.15
      },
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 1,
      "coord": {
        "ratio": 1
      },
      "collapseEmptyRows": true,
      "levelHeights": [
        150,
        150,
        150,
        150,
        150,
        150
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}
JSON

cat > callouts.json <<'JSON'
[
  {
    "type": "text",
    "text": "XR = 3L",
    "fontSize": 20,
    "anchor": {
      "text": "X [rev]",
      "alignX": "left"
    },
    "dy": -70,
    "leader": true
  }
]
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/orthofinder_drosophila/config.json \
  --width 1500 --height 1240 \
  --timeout 120000 \
  --spec session.json --annotations callouts.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/orthofinder_drosophila/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearSyntenyView",
            "views": [
                {
                    "assembly": "simulans"
                },
                {
                    "assembly": "melanogaster"
                },
                {
                    "assembly": "yakuba"
                },
                {
                    "assembly": "melanogaster"
                },
                {
                    "assembly": "pseudoobscura"
                },
                {
                    "assembly": "melanogaster"
                },
                {
                    "assembly": "virilis"
                }
            ],
            "tracks": [
                "drosophila_orthogroups"
            ],
            "encoding": {
                "color": "reference",
                "opacity": 0.15
            },
            "autoDiagonalize": True,
            "diagonalizeAnchorRow": 1,
            "coord": {
                "ratio": 1
            },
            "collapseEmptyRows": True,
            "levelHeights": [
                150,
                150,
                150,
                150,
                150,
                150
            ],
            "mark": {
                "interpolate": "linear"
            }
        }
    ],
)
app  # display the widget

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",
      "views": [
        {
          "assembly": "simulans"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "yakuba"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "pseudoobscura"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "virilis"
        }
      ],
      "tracks": [
        "drosophila_orthogroups"
      ],
      "encoding": {
        "color": "reference",
        "opacity": 0.15
      },
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 1,
      "coord": {
        "ratio": 1
      },
      "collapseEmptyRows": true,
      "levelHeights": [
        150,
        150,
        150,
        150,
        150,
        150
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}
JSON

npx @jbrowse/img synteny --config https://jbrowse.org/demos/orthofinder_drosophila/config.json \
  --spec session.json \
  --width 1500 --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",
      "views": [
        {
          "assembly": "simulans"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "yakuba"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "pseudoobscura"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "virilis"
        }
      ],
      "tracks": [
        "drosophila_orthogroups"
      ],
      "encoding": {
        "color": "reference",
        "opacity": 0.15
      },
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 1,
      "coord": {
        "ratio": 1
      },
      "collapseEmptyRows": true,
      "levelHeights": [
        150,
        150,
        150,
        150,
        150,
        150
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}

Gene order in one 3L window across the flies

Open melanogaster at 3L:5,789,000-5,931,000 with the multi-way synteny display, which draws a lane per fly. Every fly keeps this window's melanogaster genes.

Melanogaster 3L over four Drosophila lanes from one orthogroups track.
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 genome: Open new genome in JBrowse Desktop, or jbrowse add-assembly for JBrowse Web.This figure uses melanogaster, loaded from a .chrom.sizes file.
  2. Add your track: File → Open track..., or check it in the track selector. Needs an MCScan .blocks file plus one BED per genome.This figure uses “Drosophila orthogroups (OrthoFinder)”.
    1. Track menu → Lanes → Lane menusOpen a lane's submenu and choose Move up or Move down, or drag the lane's name in the left gutter. This figure's order, top to bottom: simulans, yakuba, pseudoobscura, virilis.
  3. Go to your region in the location box.This figure is at 3L:5,789,000-5,931,000.

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/orthofinder_drosophila/config.json
- Tracks:
  - Drosophila orthogroups (OrthoFinder) (drosophila_orthogroups), SyntenyTrack, an MCScan .blocks file plus one BED per genome, drawn as MultiWaySyntenyDisplay

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": "LinearGenomeView",
      "assembly": "melanogaster",
      "loc": "3L:5,789,000-5,931,000",
      "tracks": [
        {
          "trackId": "drosophila_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": [
              "simulans",
              "yakuba",
              "pseudoobscura",
              "virilis"
            ]
          },
          "height": 480
        }
      ]
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearGenomeView",
      "assembly": "melanogaster",
      "loc": "3L:5,789,000-5,931,000",
      "tracks": [
        {
          "trackId": "drosophila_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": [
              "simulans",
              "yakuba",
              "pseudoobscura",
              "virilis"
            ]
          },
          "height": 480
        }
      ]
    }
  ]
}
JSON

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

More: Using JBrowse with AI agents.

Adds these tracks to your config.json, styled as in the figure. Point each uri at your file (replace YOUR_FILE).

jbrowse add-track-json '{
  "type": "SyntenyTrack",
  "trackId": "drosophila_orthogroups",
  "name": "Drosophila orthogroups (OrthoFinder)",
  "assemblyNames": [
    "melanogaster",
    "simulans",
    "yakuba",
    "pseudoobscura",
    "virilis"
  ],
  "adapter": {
    "type": "MCScanBlocksAdapter",
    "uri": "YOUR_FILE"
  },
  "displays": [
    {
      "type": "MultiWaySyntenyDisplay",
      "rows": {
        "sort": [
          "simulans",
          "yakuba",
          "pseudoobscura",
          "virilis"
        ]
      },
      "height": 480
    }
  ]
}'

Run beside config.json, or add --out <dir>. Needs melanogaster, simulans, yakuba, pseudoobscura, virilis in the config (jbrowse add-assembly).

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/orthofinder_drosophila/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearGenomeView",
            "assembly": "melanogaster",
            "loc": "3L:5,789,000-5,931,000",
            "tracks": [
                {
                    "trackId": "drosophila_orthogroups",
                    "type": "MultiWaySyntenyDisplay",
                    "rows": {
                        "sort": [
                            "simulans",
                            "yakuba",
                            "pseudoobscura",
                            "virilis"
                        ]
                    },
                    "height": 480
                }
            ]
        }
    ],
)
app  # display the widget

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

npx @jbrowse/img --config https://jbrowse.org/demos/orthofinder_drosophila/config.json \
  --assembly melanogaster --loc 3L:5,789,000-5,931,000 \
  --track drosophila_orthogroups display:MultiWaySyntenyDisplay '{"rows":{"sort":["simulans","yakuba","pseudoobscura","virilis"]},"height":480}' \
  --width 1500 --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": "LinearGenomeView",
      "assembly": "melanogaster",
      "loc": "3L:5,789,000-5,931,000",
      "tracks": [
        {
          "trackId": "drosophila_orthogroups",
          "type": "MultiWaySyntenyDisplay",
          "rows": {
            "sort": [
              "simulans",
              "yakuba",
              "pseudoobscura",
              "virilis"
            ]
          },
          "height": 480
        }
      ]
    }
  ]
}

Collinear blocks from the same orthogroups

An orthogroup lists the related genes and holds no gene order. MCScanX's MCScanX_h chains ortholog pairs that keep their order into collinear blocks. Start by writing every gene pair an orthogroup holds between two flies:

# every melanogaster-simulans pair in an orthogroup, each copy of a duplicated
# gene included, so MCScanX_h picks the collinear copy by gene order
python3 orthogroups_to_blocks.py Orthogroups.tsv -o melanogaster.blocks \
  --homology melanogaster:simulans=x.homology

MCScanX_h reads those pairs and x.gff, four columns per gene (chromosome, gene id, start, end) with each chromosome name prefixed by a two-letter code for its genome:

# -s 10: a block holds at least 10 gene pairs
# -m 24: at most 24 genes skipped between two pairs of a block
# -g 0: a skipped gene costs nothing, so -s alone sets the size cutoff
# -b 2: blocks between the two genomes only, none within one
# -a: write the .collinearity file and skip the HTML
MCScanX_h x -a -b 2 -s 10 -m 24 -g 0

Convert the blocks to PAF, one line per block, with each sequence named for its assembly (melanogaster#1#2L):

curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/mcscanx_to_anchors.py
python3 mcscanx_to_anchors.py --gff x.gff --collinearity x.collinearity \
  --species aa=melanogaster --species bb=simulans \
  --paf melanogaster.simulans.paf \
  --chrom-sizes melanogaster=melanogaster.chrom.sizes \
  --chrom-sizes simulans=simulans.chrom.sizes

The PAF files of every pair, concatenated, back every band of a stack from one track:

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

{
  "type": "SyntenyTrack",
  "trackId": "drosophila_blocks",
  "name": "Drosophila collinear blocks (MCScanX)",
  "assemblyNames": [
    "melanogaster",
    "simulans",
    "yakuba",
    "pseudoobscura",
    "virilis"
  ],
  "adapter": {
    "type": "MultiGenomePAFAdapter",
    "uri": "https://jbrowse.org/demos/orthofinder_drosophila/drosophila.blocks.paf.gz",
    "assemblyNames": [
      "melanogaster",
      "simulans",
      "yakuba",
      "pseudoobscura",
      "virilis"
    ]
  }
}
jbrowse add-track https://jbrowse.org/demos/orthofinder_drosophila/drosophila.blocks.paf.gz \
  --trackId drosophila_blocks \
  --name "Drosophila collinear blocks (MCScanX)" \
  --assemblyNames melanogaster,simulans,yakuba,pseudoobscura,virilis \
  --adapterType MultiGenomePAFAdapter

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": "drosophila_blocks",
  "name": "Drosophila collinear blocks (MCScanX)",
  "assemblyNames": [
    "melanogaster",
    "simulans",
    "yakuba",
    "pseudoobscura",
    "virilis"
  ],
  "adapter": {
    "type": "MultiGenomePAFAdapter",
    "uri": "https://jbrowse.org/demos/orthofinder_drosophila/drosophila.blocks.paf.gz",
    "assemblyNames": [
      "melanogaster",
      "simulans",
      "yakuba",
      "pseudoobscura",
      "virilis"
    ]
  }
}

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.

Stack the flies in the same order as above and pick drosophila_blocks for every band:

The same stack from the drosophila_blocks track, one ribbon per collinear block.
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 new 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: simulans, melanogaster, yakuba, melanogaster, pseudoobscura, melanogaster, virilis.
  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 one PAF of several genomes, PanSN-named (.paf).Or pick a synteny track you already have under Quick start, which fills in the rows.This figure uses “Drosophila collinear blocks (MCScanX)”.
  4. Click Launch.
  5. Synteny view header → palette button → ReferenceThe palette button's tooltip reads "Color by: ...". Reference is offered only in a stacked view of three or more genomes, where there is a shared reference to trace.
  6. Synteny display settings (the sliders button in the view header) → Opacity → drag to 0.5Lower values let dense overlapping ribbons show through each other.
  7. 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.
  8. Synteny view header → View options → Rows → Re-order chromosomes... → Row to keep as it is → melanogaster (row 2)The other rows reorder to match their neighbour nearer this one, which keeps its own chromosome order.
  9. Synteny view header → View options → Show all regions - same bp per pixelRow length becomes genome size, which is what makes the rows comparable.
  10. Drag the bar below a synteny level to resize it.This figure's 6 levels are 150, 150, 150, 150, 150, 150px tall.
  11. Synteny display settings (the sliders button in the view header) → Curved lines (unchecked)

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/orthofinder_drosophila/config.json
- Tracks:
  - Drosophila collinear blocks (MCScanX) (drosophila_blocks), SyntenyTrack, one PAF of several genomes, PanSN-named (.paf), 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",
      "views": [
        {
          "assembly": "simulans"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "yakuba"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "pseudoobscura"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "virilis"
        }
      ],
      "tracks": [
        "drosophila_blocks"
      ],
      "encoding": {
        "color": "reference",
        "opacity": 0.5
      },
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 1,
      "coord": {
        "ratio": 1
      },
      "collapseEmptyRows": true,
      "levelHeights": [
        150,
        150,
        150,
        150,
        150,
        150
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}
Redraw the figure headlessly
cat > session.json <<'JSON'
{
  "views": [
    {
      "type": "LinearSyntenyView",
      "views": [
        {
          "assembly": "simulans"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "yakuba"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "pseudoobscura"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "virilis"
        }
      ],
      "tracks": [
        "drosophila_blocks"
      ],
      "encoding": {
        "color": "reference",
        "opacity": 0.5
      },
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 1,
      "coord": {
        "ratio": 1
      },
      "collapseEmptyRows": true,
      "levelHeights": [
        150,
        150,
        150,
        150,
        150,
        150
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}
JSON

npx @jbrowse/capture --instance https://jbrowse.org/code/jb2/main/ \
  --config https://jbrowse.org/demos/orthofinder_drosophila/config.json \
  --width 1500 --height 1240 \
  --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/orthofinder_drosophila/config.json")
app = JBrowseApp(
    assemblies=config["assemblies"],
    tracks=config.get("tracks", []),
    views=[
        {
            "type": "LinearSyntenyView",
            "views": [
                {
                    "assembly": "simulans"
                },
                {
                    "assembly": "melanogaster"
                },
                {
                    "assembly": "yakuba"
                },
                {
                    "assembly": "melanogaster"
                },
                {
                    "assembly": "pseudoobscura"
                },
                {
                    "assembly": "melanogaster"
                },
                {
                    "assembly": "virilis"
                }
            ],
            "tracks": [
                "drosophila_blocks"
            ],
            "encoding": {
                "color": "reference",
                "opacity": 0.5
            },
            "autoDiagonalize": True,
            "diagonalizeAnchorRow": 1,
            "coord": {
                "ratio": 1
            },
            "collapseEmptyRows": True,
            "levelHeights": [
                150,
                150,
                150,
                150,
                150,
                150
            ],
            "mark": {
                "interpolate": "linear"
            }
        }
    ],
)
app  # display the widget

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",
      "views": [
        {
          "assembly": "simulans"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "yakuba"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "pseudoobscura"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "virilis"
        }
      ],
      "tracks": [
        "drosophila_blocks"
      ],
      "encoding": {
        "color": "reference",
        "opacity": 0.5
      },
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 1,
      "coord": {
        "ratio": 1
      },
      "collapseEmptyRows": true,
      "levelHeights": [
        150,
        150,
        150,
        150,
        150,
        150
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}
JSON

npx @jbrowse/img synteny --config https://jbrowse.org/demos/orthofinder_drosophila/config.json \
  --spec session.json \
  --width 1500 --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",
      "views": [
        {
          "assembly": "simulans"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "yakuba"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "pseudoobscura"
        },
        {
          "assembly": "melanogaster"
        },
        {
          "assembly": "virilis"
        }
      ],
      "tracks": [
        "drosophila_blocks"
      ],
      "encoding": {
        "color": "reference",
        "opacity": 0.5
      },
      "autoDiagonalize": true,
      "diagonalizeAnchorRow": 1,
      "coord": {
        "ratio": 1
      },
      "collapseEmptyRows": true,
      "levelHeights": [
        150,
        150,
        150,
        150,
        150,
        150
      ],
      "mark": {
        "interpolate": "linear"
      }
    }
  ]
}

Reproduce it end to end

build_orthofinder_synteny.sh runs everything above and writes a config.json with the assemblies, gene tracks, the synteny track and a stacked default session:

  1. Download each genome's proteins, GFF3 and sequence report from NCBI, keeping each gene's longest protein under its gene id so the table and the BEDs agree, and write a gene BED and chrom.sizes per genome.
  2. Run OrthoFinder to the orthogroups only.
  3. Convert the orthogroups to a .blocks table, dropping cells over MAXCOPIES as gene families, and print how one-to-one each adjacent pair of genomes is.
  4. Chain every pair of genomes into collinear blocks with MCScanX_h, and collect the blocks into one PAF.
  5. Write the assemblies, gene tracks, the orthogroups and blocks tracks and a stacked session.
curl -fO https://raw.githubusercontent.com/GMOD/jbrowse-components/main/scripts/build_orthofinder_synteny.sh
bash build_orthofinder_synteny.sh wheat   # or: vertebrates, grasses, drosophila, solanaceae
npx --yes serve orthofinder_wheat_build/jbrowse2  # then open the printed URL

The sets the script accepts, and what each costs to build:

SetGenomesDIAMOND runsNCBI annotation
vertebrateshuman, chicken, frog, gar, zebrafish25RefSeq
grassesrice, sorghum, maize, brachypodium, setaria25RefSeq
wheattauschii, wheat, durum, emmer, urartu25RefSeq and GenBank
drosophilamelanogaster, simulans, yakuba, pseudoobscura, virilis25RefSeq
solanaceaetomato, potato, pepper, tobacco, coffee25RefSeq and GenBank

Two cuts are environment variables:

VariableDefaultWhat it cuts
MAXSEQ30sequence regions kept per genome, the ones with the most genes
MAXCOPIES4genes in one orthogroup cell past which it is a gene family rather than a set of copies
MAXSEQ=60 MAXCOPIES=6 bash build_orthofinder_synteny.sh wheat

The NCBI datasets CLI names chromosomes that a GFF3 gives as INSDC accessions, each from its sequence report.

Your own genomes

A set name tells the script which NCBI assemblies to download. Your own genomes need a FASTA and a GFF3 per genome. gffread translates each CDS into the proteome and prints the transcript-to-gene map and FASTA index alongside.

Name the files in a manifest, one line per genome:

cat > my_genomes.tsv <<'EOF'
# name    genome                    annotation              aliases
speciesA  data/speciesA.fa.gz       data/speciesA.gff3.gz
speciesB  https://host/B.fa.gz      https://host/B.gff3.gz  GCF_000001405.40
EOF

bash build_orthofinder_synteny.sh my_genomes.tsv
npx --yes serve orthofinder_my_genomes_build/jbrowse2  # then open the printed URL
  • Column 1 names the assembly, and columns 2 and 3 take a local path or URL.
  • Column 4 is optional. An INSDC accession fetches NCBI's sequence report for chromosome names, and a file name supplies a two-column alias table.
  • Column 2 also takes a proteome directly, which skips translation; its headers then need a gene:<id> tag matching ID=gene:<id> in the GFF3.
  • Two genomes make a valid manifest.

See also

Citations