CircularView

Auto-generated from the @jbrowse/mobx-state-tree model in the source — see the developer guide for concepts. Provided by the circular-view plugin. View source.

Lays one or more assemblies' chromosomes around a circle, and draws structural variants as chords and synteny alignments as ribbons across it.

Example usage

Hand-authored under defaultSession.views, with every setting written directly on the view object. assembly names the genome, a tracks entry may include display config inline, and displayedRegionNames lists the regions to draw, which keeps an assembly's alt/unplaced contigs off the circle:

{
  type: 'CircularView',
  assembly: 'hg38',
  displayedRegionNames: ['chr1', 'chr2', 'chr3'],
  tracks: [{ trackId: 'my-sv-vcf', encoding: { color: { value: 'red' } } }],
}

assembly also takes a list, for a synteny ribbon plot: each assembly lays its contigs out in turn, so the first genome takes one arc of the circle and the second the next, and a SyntenyTrack covering both draws a ribbon per alignment between them. displayedRegionNames keyed by assembly restricts each genome separately, and autoDiagonalize reorders the second to follow the first:

{
  type: 'CircularView',
  assembly: ['hg38', 'mm39'],
  displayedRegionNames: { hg38: ['chr1', 'chr2'] },
  tracks: ['hg38_vs_mm39'],
  autoDiagonalize: true,
}

Each section ends with the members a composed model contributes, linked to the page that documents them.

Properties

Member	Description
type `type: types.literal('CircularView') as unknown as string`
offsetRadians `offsetRadians: types.stripDefault(types.number, defaultOffsetRadians)`	the figure's rotation in radians, the linear view's offsetPx
bpPerPx `bpPerPx: types.stripDefault(types.number, defaultBpPerPx)`	the zoom level, base-pairs per pixel. Capped by `minimumRadiusPx`, and refit over by the first resize unless `autoFit` is false.
autoFit `autoFit: types.stripDefault(types.boolean, true)`	whether the view refits to its box on resize; a manual zoom or pan clears it
tracks `tracks: types.array( pluginManager.pluggableMstType('track', 'stateModel'), )`
hideVerticalResizeHandle `hideVerticalResizeHandle: types.stripDefault(types.boolean, false)`	chrome switch, for an embed that drives the view itself
hideTrackSelectorButton `hideTrackSelectorButton: types.stripDefault(types.boolean, false)`	chrome switch, for an embed that drives the view itself
disableImportForm `disableImportForm: types.stripDefault(types.boolean, false)`	never show the import form, even on an error, for an embed that picks the assembly itself (the SV inspector)
legend `legend: types.stripDefault(hiddenLegendConfigSchema, {})`	the key naming each track's ring, chords or ribbons in the corner, a HiddenLegend object: `{ show: true }` draws it
height `height: types.stripDefault(types.number, defaultHeight)`	the view's height in px, which sizes the fitted circle. Left at its default in a multi-view session, the view opens square to its width
displayedRegions `displayedRegions: types.stripDefault(types.frozen<Region[]>(), [])`	the regions the circle lays out, one arc each, in this order. `displayedRegionNames` names the same thing by refName and is the shorter form.
minimumRadiusPx `minimumRadiusPx: types.stripDefault( types.number, defaultMinimumRadiusPx, )`	how far out the circle may zoom, as the smallest radius it shrinks to; it is what caps bpPerPx
spacingPx `spacingPx: types.stripDefault(types.number, defaultSpacingPx)`	the gap drawn between adjacent chromosome arcs
paddingPx `paddingPx: types.stripDefault(types.number, defaultPaddingPx)`	blank margin between the circle and the edge of the figure
minVisibleWidth `minVisibleWidth: types.stripDefault( types.number, defaultMinVisibleWidth, )`	arcs thinner than this many pixels are elided instead of drawn, so a few thousand unplaced contigs do not become a ring of hairlines
trackSelectorType `trackSelectorType: types.stripDefault(types.string, 'hierarchical')`	ignored, kept because saved sessions carry it
launch `launch: types.frozen<LaunchInput<CircularViewCommands> \| undefined>()`	the launch keys still to apply, moved here by `preProcessSnapshot` and cleared once applied; not written by hand

8 inherited properties from 5 models

From SyntenyFadeMixin: render

From TrackColorsMixin: encoding, trackColors

From ParkedColorMixin: parkedColors

From SyntenyFilterMixin: filter

From BaseViewModel: id, displayName, minimized

Volatiles

Member	Description
volatileWidth `number \| undefined`
heightFollowsWidth `boolean`
volatileError `unknown`
panX `number`
panY `number`
ringHost `RingHost`	the strip every linear display in this view lays out along, and the rings drawn from it — see `regionHost`
hover `PointerTarget \| undefined`	the chord or ribbon under the pointer, which the highlight paths and the tooltip read
hoverClientXY `[number, number] \| undefined`	where the pointer was on the page while it was on `hover`, which only the tooltip follows
chordPass `ChordPass`	the canvas the chords and ribbons of every chord display draw on

10 inherited volatiles from 5 models

From SyntenyFadeMixin: fadeThinLatch

From TrackColorsMixin: seenAttributeRanges

From ImportFormSyntenyMixin: importFormSyntenyTrackSelections

From DiagonalizeProgressMixin: awaitingAutoDiagonalize, pendingAutoDiagonalize, diagonalizeStatus, diagonalizeCancel, diagonalizeError

From BaseViewModel: width, bodyMounted

Getters

Member	Description
showLegend `boolean`	`legend.show`: whether the key draws
ownTracks `any[]`	the tracks this view holds itself, for the census
width `number`
circleRegions `(Region \| { circular: boolean; assemblyName: string; refName: string; start: number; end: number; reversed?: boolean \| undefined; })[]`	`displayedRegions`, each marked `circular` where it is a whole sequence its assembly lists in `circularRefNames`
fitLayout `FitLayout`	the circle that fills the box: its scale, radius and padding
fitInput `FitInput`	what `fitLayout` measures the circle from
namesFeaturesOutside `boolean`	a circle of one contig is a map: its ring displays' features are named outside the circle with leaders, not along their rows
effectivePaddingPx `number`	`paddingPx`, capped in a small box and floored at what the labels drawn at the fit or at this zoom reach
ring `{ spacingPx: number; radiusPx: number; }`	the ring at this zoom: its gaps' spacing and the radius that closes it — see `ringAt`
effectiveSpacingPx `number`	`spacingPx`, capped so the gaps take at most a quarter of the ring
totalGapUnits `number`	how many inter-slice gaps go round the circle, a genome boundary counting as several
radiusPx `number`
circumferencePx `number`
bpPerRadian `number`
centerXY `[number, number]`
totalBp `number`
maxBpPerPx `number`
minBpPerPx `number`
atMaxBpPerPx `boolean`
atMinBpPerPx `boolean`
figureSize `number`	figure is always square, so width === height
figureOriginXY `[number, number]`	the figure's top-left in the view's box, centered horizontally and placed by `figureMiddleY` vertically, plus the pan
circleCenterXY `[number, number]`	the circle's centre in the view's box
polarFrame `{ canvasWidth: number; canvasHeight: number; centerX: number; centerY: number; offsetRadians: number; }`	what the ring and chord canvases both draw against: the view's box, the circle's centre in it and the figure's rotation
elisionMask `string`	which displayed regions are too narrow at this zoom to draw as themselves, one character each
elidedRegions `SliceRegion[]`	`displayedRegions` with each run of too-narrow regions in one assembly folded into one elided slice
pendingLaunch `LaunchInput<CircularViewCommands & { unknown?: Record<string, unknown> \| undefined; malformed?: Record<string, unknown> \| undefined; legacyInit?: boolean \| undefined; }> \| undefined`	the launch state still to apply
assemblyNames `string[]`
chordSyntenyDisplays `ChordSyntenyDisplaySelf[]`	the ribbon displays of `syntenyTracks()`; a chromosome reorder reads its alignments from these
canDiagonalize `boolean`	whether a reorder applies: a ribbon track, and exactly two genomes (ADR-121)
paintedAssemblyName `string \| undefined`	the genome whose ideogram a ribbon track paints by what aligns to it from the first, rather than in the colors of its chromosomes
ideogramPaint `ReadonlyMap<string, PaintRun[]>`	that genome's paint, by slice key
launchAssemblyNames `string[]`	the assemblies a pending launch names, which the gates wait on before `displayedRegions` exist
initialized `boolean`
assemblyErrors `string \| undefined`
error `unknown`
hasSomethingToShow `boolean`
showLoading `boolean`	whether the loading screen stands in for the form or the figure
loadingAssembly `Assembly \| undefined`	the assembly whose load the spinner waits on
loading `ViewLoading \| undefined`	the loading screen's text while `showLoading`
showView `boolean`	whether the figure draws: regions, and every assembly loaded
showImportForm `boolean`	nothing to show or an error, unless `disableImportForm`, which an error does not override
status `ViewStatus`	the lifecycle as one value, as the linear view answers it
regionHost `RingHost`	the strip a linear display lays out along and draws its ring from (ADR-119)
chordRadiusPx `number`	Where the chord displays start: inside the innermost ring, or at the ruler when the view holds none.
chordDisplays `ChordLayerDisplay[]`	the displays drawing across the circle, in track order: every first display registered for this view rather than laid out as a ring
hoveredChord `ChordHit \| undefined`	the chord or ribbon under the pointer
hoveredBand `AxisSlice`	the chromosome whose band is under the pointer, on the chord axis
chordFocusGaps `number`	that chromosome as the chord stage's focus: its slice's gap count, the name a foot gives it, or -1 for none
bandComposition `{ name: string; shares: PartnerShare[]; } \| undefined`	the hovered chromosome's name and the share of it each chromosome aligned to it covers, most first
hoversChord `boolean`	whether the pointer is on a chord or ribbon, which only changes as it crosses onto one or off it
chordAxis `ChordAxis`	the circle's slices on the unrolled genome axis, unchanged by a zoom or rotation
chordScale `PolarScale`	the scale from the unrolled axis to radians
autoFadeWidthPx `number`	the narrowest capped mean ribbon span on screen, which the auto fade judges
chordThinFadeFloor `1 \| 0.15`	the least alpha the thin fade leaves a ribbon, 1 while it is off
staticSlices `Slice[]`	the slices at this zoom, in radians
legendSpec `LegendSpec`	one row per track: its name beside the color or ramp it paints with

28 inherited getters from 6 models

From SyntenyFadeMixin: antialias, fadeThinAlignments

From SyntenyColorsMixin: defaultOpacity, opacitySetting, opacityFade, opacityLevel, opacityField

From TrackColorsMixin: colorSetting, impliedColorField, colorPaint, colorValue, colorDomain, colorRange, colorableAttributes, attributeRanges, colorableTracks, trackColorAssignments, colorField, hideUnlabelled, hasLegendKey, colorLegendChips, colorScales

From ParkedColorMixin: parkedColor

From SyntenyFilterMixin: predicates, minLength

From BaseViewModel: rendersDisplays, effectiveBodyMounted, ownViews

Methods

Member	Description
syntenyTracks `() => ComparativeTrackModel[]`	the tracks drawing ribbons, which the view's color settings paint
loadedAttributeRanges `() => Record<string, AttributeRange>[]`	each ribbon display's attribute spans, over the alignments it holds
legendCigarOps `() => number`	a ribbon draws no indel blocks, so the key lists none
shapeShowsStrand `() => boolean`	a ribbon twists against its two arcs' directions, and nothing on the circle shows which way an arc runs
chordAt `(dx: number, dy: number) => ChordHit \| undefined`	the chord or ribbon under a point `dx`,`dy` CSS px from the circle's centre in the screen frame
bandAt `(dx: number, dy: number) => string \| undefined`	the place of the chromosome whose ideogram band holds a point `dx`,`dy` CSS px from the circle's centre in the screen frame
bandCenter `(key: string) => [number, number] \| undefined`	the middle of the ideogram band `key` names, CSS px from the circle's centre in the screen frame: the point `bandAt` answers `key` for
linearTracksFor `(assemblyName: string) => TrackInit[]`	the tracks a linear view of one genome on this circle opens with: each track on that genome but the synteny tracks, a ring as its display and a chord track as the linear view's own
tracksMenuItem `() => MenuItem`	each track's own menu, which on a linear view hangs off its label and on the circle has nowhere else to go
legendSpecIn `(palette?: JBrowsePalette \| undefined) => LegendSpec`	`legendSpec` in another theme, the SVG export's
menuItems `() => MenuItem[]`	return the view menu items

8 inherited methods from 4 models

From SyntenyColorsMixin: colorableTrackConfigs, colorableAttributeNames, legendAlpha

From TrackColorsMixin: colorSurface, offersReferenceColor, trackColorFor

From ParkedColorMixin: parkedColorOf

From SyntenyFilterMixin: lowerBound

Actions

Member	Description
fitToWindow `() => void`	size the figure so it exactly fills the smaller of the view's two dimensions
setWidth `(newWidth: number) => number`
setHeight `(newHeight: number) => number`
setShowLegend `(flag: boolean) => void`
rotateClockwiseButton `() => void`
rotateCounterClockwiseButton `() => void`
rotate `(delta: number) => void`
resetView `() => void`	reset rotation, pan, and zoom back to the default fit-to-window view
zoomInButton `() => void`
zoomOutButton `() => void`
zoomAboutViewMiddle `(newBpPerPx: number) => void`	zoom about the circle's middle while the figure sits where the fit put it, and about the view's middle once a zoom to the cursor has panned it, so what the user zoomed toward stays in view
setBpPerPx `(newVal: number) => void`
zoomToPoint `(newBpPerPx: number, cursorX: number, cursorY: number) => void`	zoom toward/away from a point on the figure, keeping whatever is under it visually fixed. The point is its offset in screen px from the middle of the circle — what `offsetFromCenter` in the component hands back
setDisplayedRegions `(regions: Region[]) => void`
activateTrackSelector `() => Widget \| undefined`
toggleTrack `(trackId: string) => boolean`
setError `(error: unknown) => void`
setHover `(target: PointerTarget \| undefined, clientX?: any, clientY?: any) => void`	the pointer is on `target`, or on nothing, at client `x`,`y`. A move that stays on one target keeps it, so only the tooltip follows it
setLaunch `(launch?: LaunchInput<CircularViewCommands> \| undefined) => void`
clearView `() => void`	back to the import form: no regions, no tracks, no pending launch and no error from the one before
showTrack `(trackId: string, initialSnapshot?: any, displayInitialSnapshot?: any, inlineConf?: Record<string, unknown> \| undefined) => any`
addTrackConf `(configuration: Record<string, unknown>, initialSnapshot?: any) => any`
hideTrack `(trackId: string) => boolean`
openExportDialog `() => void`
openReorderChromosomesDialog `() => void`
openInLinearSyntenyView `() => void`	a linear synteny view of this circle's genomes, a row each over the chromosomes the circle shows with the tracks it shows for that genome, its ribbon tracks between them, reordered, in this view's color and length filter. A self-alignment opens the genome against itself
autoDiagonalize `() => Promise<void>`	The init-time reorder, behind the "Reordering chromosomes" screen `withDiagonalizeProgress` drives.
exportSvg `(opts?: ViewExportSvgOptions) => Promise<string>`	renders the view to SVG markup, which it returns; saves it through FileSaver unless `save: false`
launchTrack `(trackId: string, initialSnapshot?: any, displayInitialSnapshot?: any) => Promise<any>`	showTrack for a track whose display state model may be lazily loaded: loads it, then shows
launchToggleTrack `(trackId: string) => Promise<boolean>`	toggleTrack with launchTrack's loading behavior
launchTrackConf `(configuration: Record<string, unknown>, initialSnapshot?: any) => Promise<any>`	`addTrackConf` with `launchTrack`'s loading behavior, for a track handed over inline rather than from a session list
resizeHeight `(distance: number) => number`
resizeWidth `(distance: number) => number`