Group alignments by tag

facet splits the pileup into labeled lanes.

color and facet are the grammar of graphics’ color scale and facet over one field, ggplot2’s aes(color = HP) and facet_grid(rows = vars(HP)). Each takes { field, domain }, and a domain lists the values that come first, in order. Grouping and lane order covers every display that takes a facet.

View source — 33 lines

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

export default function GroupByTag() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        {
          trackId: 'volvox_bam',
          name: 'volvox-sorted.bam',
          uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox-sorted.bam',
        },
      ]}
      view={{
        loc: 'ctgA:39,728..40,459',
        tracks: [
          {
            trackId: 'volvox_bam',
            displaySnapshot: {
              type: 'LinearAlignmentsDisplay',
              height: 400,
              color: { field: 'tags.HP' },
              facet: 'tags.HP',
            },
          },
        ],
      }}
    />
  )
}