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.

Example usage

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

{
  type: 'CircularView',
  assembly: 'hg38',
  displayedRegionNames: ['chr1', 'chr2', 'chr3'],
  tracks: [{ trackId: 'my-sv-vcf', color: '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,
}

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

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`	this is a string instead of the const literal 'CircularView' to reduce some typescripting strictness, but you should pass the string 'CircularView' to the model explicitly
offsetRadians `offsetRadians: types.stripDefault(types.number, defaultOffsetRadians)`	similar to offsetPx in linear genome view
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 keeps re-fitting to its container on resize. Cleared once the user manually zooms/pans so their view (persisted via bpPerPx/offsetRadians) is preserved across resizes and reloads.
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)`	suppress the import form even on an error — what the SV inspector's circle wants, since its assembly comes from the sheet beside it and a form there would offer a control that cannot work
showLegend `showLegend: types.stripDefault(types.boolean, false)`	a key naming each track's ring, chords or ribbons in the corner
height `height: types.stripDefault(types.number, defaultHeight)`	the height of the view in pixels. The circle auto-fits its container, so this is what sizes the drawing.
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 in the circle may be zoomed, as a floor on the radius; 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')`	vestigial: the hierarchical selector is the only one that exists, so this value is ignored. Retained because saved sessions and share links persist it.
launch `launch: types.frozen<LaunchInput<CircularViewCommands> \| undefined>()`	transient launch state: the settings written on the view object that need resolving before they can be view state — the assembly the circle is drawn from, the refNames to restrict it to, chord track recipes. `preProcessSnapshot` moves them here off the snapshot, the afterAttach autorun applies them and clears this, so a saved session never retains it. Not written by hand: author every setting directly on the view.

9 inherited properties from 4 models

From BaseViewModel: id, displayName, minimized

From SyntenyColorsMixin: opacity, minAlignmentLength

From TrackColorsMixin: color, trackColors, hideUnlabelled

From SyntenyFadeMixin: fadeThinAlignmentsMode

Volatiles

Member	Description
volatileWidth `number \| undefined`
volatileError `unknown`
panX `number`
panY `number`
ringHost `ModelInstanceTypeProps<…> & {…} & {…} & { setWidth(): void; setBodyMounted(): void; setMinimized(): void; setDisplayName(): void; scrollZoom(): void; setStripElement(displayId: string, el: HTMLElement \| null): void; setCoarseDynamicBlocks(blocks: BlockSet, bpPerPx: number): void; syncRings(displayIds: string[]): void; } & { setView(view: RingHostView): void; beforeDestroy(): void; } & IStateTreeNode<…>`	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 ModelInstanceTypeProps<…> & {…} & {…} & {…} & {…} & { attachRenderingBackend<B>(backend: B, setup: () => RenderingBackendCallbacks<…>): void; } & { view: ChordPassView \| undefined; drawnCells: ReadonlySet<…>; } & { readonly frame: ChordLayerFrame; readonly cells: ReadonlyMap<…>; readonly canRender: boolean; readonly rendersCanvas: boolean; drew(cell: ChordCell): boolean; } & { setView(view: ChordPassView): void; setDrawnCells(cells: ReadonlyMap<…>): void; } & { startRenderingBackend(backend: ChordBackend): void; } & IStateTreeNode<…>	the canvas the chords and ribbons of every chord display draw on

10 inherited volatiles from 5 models

From BaseViewModel: width, bodyMounted

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

From ImportFormSyntenyMixin: importFormSyntenyTrackSelections

From TrackColorsMixin: seenAttributeRanges

From SyntenyFadeMixin: fadeThinLatch

Getters

Member	Description
ownTracks `any[]`	The census entry for this view: the tracks it holds itself. Declared rather than derived — see `BaseViewModel.ownTracks`.
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 and radius, and the padding the view keeps at every zoom. A pure function of the regions and the box — see `fitLayout`
effectivePaddingPx `number`	`paddingPx`, capped at a share of a small box and floored at what the labels drawn at the fit reach, so a label is never drawn at a negative x and clipped by the box
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]`	top-left of the figure within the view's box, then shifted by the zoom-to-cursor pan. Centered horizontally: a view much wider than it is tall would otherwise leave the circle jammed in the corner under the controls. Vertically it hangs from the top of a box taller than it is wide — see `figureMiddleY`, which `zoomToPoint` reads for the same reason.
elisionMask `string`	which displayed regions are too narrow at this zoom to draw as themselves, one character each
elidedRegions `SliceRegion[]`	this is displayedRegions, post-processed to elide regions that are too small to see reasonably. A run of them never crosses from one assembly into the next, so each genome's arcs stay its own. Read off `elisionMask`, so a zoom that elides nothing new rebuilds nothing
pendingLaunch `LaunchInput<CircularViewCommands & { unknown?: Record<string, unknown> \| undefined; malformed?: Record<string, unknown> \| undefined; legacyInit?: boolean \| undefined; } & IStateTreeNode<IType<LaunchInput<CircularViewCommands> \| undefined, LaunchInput<CircularViewCommands> \| undefined, LaunchInput<CircularViewCommands> \| undefined>>> \| undefined`	the launch state that still has something to apply — the gate the loading and import-form paths below read.
assemblyNames `string[]`
chordSyntenyDisplays `ChordSyntenyDisplaySelf[]`	the ribbon displays of `syntenyTracks()`; a chromosome reorder reads its alignments from these
canDiagonalize `boolean`	Whether a chromosome reorder has anything to do: a ribbon track to take alignments from, and exactly the two genomes a mirrored layout is defined for. One is a self-alignment, with no second arc to reorder; three or more have no layout in which every pair reads as a band.
paintedAssemblyName `string \| undefined`	the genome whose ideogram a ribbon track paints by what aligns to it from the first, rather than in its own chromosomes' colors
ideogramPaint `ReadonlyMap<string, PaintRun[]>`	that genome's paint, by slice key
launchAssemblyNames `string[]`	The assemblies a pending launch names, which the gates below wait on before `displayedRegions` exist. A blob carrying only tracks names none, and waiting on one nobody named never ends.
initialized `boolean`
assemblyErrors `string \| undefined`
error `unknown`
hasSomethingToShow `boolean`
showLoading `boolean`	Whether to show a loading indicator instead of the import form or view
loadingAssembly (ModelInstanceTypeProps<…> & {…} & {…} & {…} & {…} & {…} & {…} & {…} & {…} & {…} & {…} & {…} & {…} & { getCanonicalRefName2(refName: string): string; isValidRefName(refName: string): boolean; } & { isCircularRefName(refName: string): boolean; getRefNamePosition(refName: string): number \| undefined; getAliasesForRefName(refName: string): string[]; getRefNameMapForAdapter(adapterConf: AdapterConf, options: BaseOptions): Promise<…>; getRefNameMismatch(adapterCacheKey: string): RefNameMismatch \| undefined; } & IStateTreeNode<…>) \| undefined	The assembly whose load the spinner is waiting on. A pending launch names them before displayedRegions exist, so it is the source until then — the same order `initialized` above resolves in.
loading `ViewLoading \| undefined`	What the loading screen says while `showLoading`, read off the assembly whose load is the wait; undefined otherwise.
showView `boolean`	Whether the view is fully initialized and ready to display
showImportForm `boolean`	`!hasSomethingToShow \|\| !!error`, the same predicate as every other view, with `disableImportForm` suppressing the whole thing rather than only its first half. The `\|\|` used to bind the other way, so an error re-enabled a form the embedder had turned off. That is reachable, and the sv-inspector — `disableImportForm`'s only setter — is where: its circle is driven by the spreadsheet's assembly, so a circle left sitting on regions whose assembly the config no longer has reports an error (the case the region-binding autorun's comment describes). The inspector then grew a circular-view import form inside its own panel, offering an assembly dropdown whose Open the inspector's autorun overwrites on the next pass — a control that cannot work, in a view that asked not to have it. The error still has to be reported, so the component renders a bare ErrorBanner in that case; the form is only the usual place a circular view puts one.
status `ViewStatus`	The view's lifecycle as one value — ready, error, loading or noRegions — for a host that draws its own chrome and has to render all four. Same shape and same precedence as the linear view's, through `computeViewStatus`.
regionHost `ModelInstanceTypeProps<…> & {…} & {…} & { setWidth(): void; setBodyMounted(): void; setMinimized(): void; setDisplayName(): void; scrollZoom(): void; setStripElement(displayId: string, el: HTMLElement \| null): void; setCoarseDynamicBlocks(blocks: BlockSet, bpPerPx: number): void; syncRings(displayIds: string[]): void; } & { setView(view: RingHostView): void; beforeDestroy(): void; } & IStateTreeNode<…>`	The node a linear display's foundation reads as its view: the circumference unrolled into a strip. A display registered for the linear genome view draws on this view as a ring of that strip, so `containingHost` answers this rather than the view itself.
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, which the chord displays place their feet on; rebuilt when the regions or their elision change, never by a zoom or a rotation alone
chordScale `{ radiansPerBp: number; gapRadians: number; }`	the polar stage's scale from the unrolled axis to radians: per base, and per gap between slices
autoFadeWidthPx `number`	The width 'auto' compares against its thresholds: the narrowest capped mean span, on screen, of any ribbon display with enough alignments to judge, and nothing to judge before the circle has a size
chordThinFadeFloor `1 \| 0.15`	the least alpha the thin fade leaves a ribbon, 1 while it is off
staticSlices `Slice[]`
legendSpec `LegendSpec`	one row per track: its name beside the color or ramp it paints with

22 inherited getters from 4 models

From BaseViewModel: rendersDisplays, effectiveBodyMounted, ownViews

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

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

From SyntenyFadeMixin: fadeThinAlignments

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, which keys a ring whose colors follow the theme (alignments, MAF) in that theme. The ribbon key takes no colors from the theme.
menuItems `() => MenuItem[]`	return the view menu items

6 inherited methods from 2 models

From SyntenyColorsMixin: colorableTrackConfigs, colorableAttributeNames, legendAlpha

From TrackColorsMixin: colorSurface, offersReferenceColor, trackColorFor

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`