Haplotagged reads, declared as marks

A formula, a facet and a span mark over haplotagged reads.

The picture above, as a grammar of graphics: the formula step is ggplot2’s mutate(), lifting the HP tag into a field; facet is facet_grid(rows); pileup packs each section into rows; and span is a geom_rect colored by the field. The mark display guide maps every name, and the methylation tutorial reads these reads’ 5mC calls.

View source — 50 lines

import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

const assembly = {
  name: 'hg38',
  uri: 'https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz',
  refNameAliases: {
    uri: 'https://jbrowse.org/genomes/GRCh38/hg38_aliases.txt',
  },
  geneticCodes: { chrM: 2 },
}

const tracks = [
  {
    trackId: 'hg002_snrpn',
    name: 'HG002 SNRPN reads by haplotype',
    uri: 'https://jbrowse.org/demos/methylation/HG002_SNRPN_5mC_haplotagged.bam',
    type: 'AlignmentsTrack',
    displays: [
      {
        type: 'LinearMarkDisplay',
        displayId: 'hg002_snrpn-LinearMarkDisplay',
        height: 400,
        transform: [
          { type: 'formula', expr: "jexl:getTag(feature,'HP')", as: 'HP' },
        ],
        facet: 'HP',
        marks: [
          {
            mark: 'span',
            transform: [{ type: 'pileup' }],
            encoding: {
              row: 'row',
              color: { field: 'HP', scale: 'categorical', title: 'Haplotype' },
            },
          },
        ],
      },
    ],
  },
]

export default function ReadsAsMarks() {
  return (
    <LinearGenomeView
      assembly={assembly}
      tracks={tracks}
      view={{ loc: 'chr15:24,954,000..24,972,000', tracks: ['hg002_snrpn'] }}
    />
  )
}