CircularView

Auto-generated @jbrowse/mobx-state-tree API for the current JBrowse release — see pluggable elements for concepts. Provided by the circular-view plugin. View source.

Example usage

Hand-authored under defaultSession.views. The init shorthand takes a single assembly and the structural-variant tracks to draw as chords. A track entry may carry display config inline, and displayedRegionNames keeps an assembly's alt/unplaced contigs off the circle:

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

Members a composed model contributes are listed here too, so these tables are the whole surface.

Properties

Member	Description	Defined by
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	CircularView
offsetRadians `offsetRadians: types.stripDefault(types.number, defaultOffsetRadians)`	similar to offsetPx in linear genome view	CircularView
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.	CircularView
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.	CircularView
tracks `tracks: types.array( pluginManager.pluggableMstType('track', 'stateModel'), )`		CircularView
hideVerticalResizeHandle `hideVerticalResizeHandle: types.stripDefault(types.boolean, false)`	chrome switch, for an embed that drives the view itself	CircularView
hideTrackSelectorButton `hideTrackSelectorButton: types.stripDefault(types.boolean, false)`	chrome switch, for an embed that drives the view itself	CircularView
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	CircularView
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.	CircularView
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.	CircularView
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	CircularView
spacingPx `spacingPx: types.stripDefault(types.number, defaultSpacingPx)`	the gap drawn between adjacent chromosome arcs	CircularView
paddingPx `paddingPx: types.stripDefault(types.number, defaultPaddingPx)`	blank margin between the circle and the edge of the figure	CircularView
minVisibleWidth `minVisibleWidth: types.stripDefault( types.number, defaultMinVisibleWidth, )`	arcs thinner than this many pixels are elided instead of drawn, which is what stops a few thousand unplaced contigs becoming a ring of hairlines	CircularView
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 configs persist it.	CircularView
init `init: types.frozen<CircularViewInit \| undefined>()`	used for initializing the view from a session snapshot	CircularView
id `id: ElementId`		BaseViewModel
displayName `displayName: types.maybe(types.string)`	displayName is displayed in the header of the view, or assembly names being used if none is specified	BaseViewModel
minimized `minimized: types.stripDefault(types.boolean, false)`	collapse the view to its header bar, keeping it in the session rather than closing it	BaseViewModel

Volatiles

Member	Description	Defined by
volatileWidth `volatileWidth: undefined as number \| undefined`		CircularView
volatileError `volatileError: undefined as unknown`		CircularView
panX `panX: 0`		CircularView
panY `panY: 0`		CircularView
width `width: 800`		BaseViewModel
bodyMounted `bodyMounted: true`	Whether the container has this view's body in the DOM. `ViewContainer` mounts a view's body only while an IntersectionObserver says it is on screen, to hold the app under the WebGL2 context ceiling (`reference/GPU_CONTEXT_BUDGET.md`). A view below the fold therefore has no canvas, so nothing ever calls `markCanvasDrawn` and the pre-first-paint term of `displayPhase` pins every display in it at `loading` with nothing left to resolve it — which parks `[data-app-phase="ready"]` for the whole app on a view the user cannot see. Defaults true so the containers that always mount a body — embedded views, workspace panels, and any test rendering a display directly — are unaffected and need not set it. The raw flag, written by this view's own container. A display asks `effectiveBodyMounted` instead, because a nested view has no container of its own.	BaseViewModel

Getters

Member	Description	Defined by
width `number`		CircularView
effectivePaddingPx `number`	`paddingPx`, capped so it cannot eat a small box. The declared value is a fixed 80px sized for a circle with a window to itself, and it comes out of the radius twice. In the SV inspector, whose circle gets about a third of the width, that left the drawn disc covering 41% of the area it was given, and in a 316px-tall one — the height the SV tutorial's figure sets — the radius fell to 78px. Capped as a fraction of the half-box rather than at a pixel count, so the circle holds one shape at every size. The fraction is the one the declared 80px already is at the size it was tuned for, so a roomy circle is untouched and a cramped one is merely not made worse. The floor is what the ruler labels need to sit outside the arc at all.	CircularView
effectiveSpacingPx `number`	`spacingPx`, capped so the inter-chromosome gaps cannot take the ring. Also a fixed pixel count, and it is charged once per slice, so what it costs depends entirely on how big the circle ended up: 27% of the circumference at the SV inspector's default and 49% of it at that 316px-tall one, where the chromosomes drew as ticks with holes between them. Capping the total rather than the gap keeps a roomy circle on the declared value and only closes up where the ring is genuinely short. Measured against the radius the box would fit rather than `radiusPx`, which is derived from this.	CircularView
fitRadiusPx `number`	the radius the current box has room for — what `fitToWindow` aims at, and the scale `effectiveSpacingPx` measures itself against. A pure function of the box, so neither reads back a value derived from it	CircularView
circumferencePx `number`		CircularView
radiusPx `number`		CircularView
bpPerRadian `number`		CircularView
centerXY `[number, number]`		CircularView
totalBp `number`		CircularView
maxBpPerPx `number`		CircularView
minBpPerPx `number`		CircularView
atMaxBpPerPx `boolean`		CircularView
atMinBpPerPx `boolean`		CircularView
figureSize `number`	figure is always square, so width === height	CircularView
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.	CircularView
elidedRegions `SliceRegion[]`	this is displayedRegions, post-processed to elide regions that are too small to see reasonably	CircularView
assemblyNames `string[]`		CircularView
initialized `boolean`		CircularView
assemblyErrors `string`		CircularView
error `unknown`		CircularView
hasSomethingToShow `boolean`		CircularView
showLoading `boolean`	Whether to show a loading indicator instead of the import form or view	CircularView
loadingAssembly `(ModelInstanceTypeProps<…> & { error: unknown; loadingP: Promise<…> \| undefined; ... 10 more ...; refNameMismatches: Map<…>; } & ... 13 more ... & IStateTreeNode<...>) \| undefined`	The assembly whose load the spinner is waiting on. `init` names it before displayedRegions exist, so it is the source until then — the same order `initialized` above resolves in.	CircularView
loadingMessage `string \| undefined`	What the spinner says: which of the assembly's files is downloading, rather than a bare "Loading" for the slow part of startup. See agent-docs/reference/PROGRESS_REPORTING.md.	CircularView
loadingProgress `number \| undefined`	Determinate fraction for the spinner's bar, when the assembly load reports one	CircularView
loadingSource `string \| undefined`	The URL the assembly load is currently fetching, when the phase named one. Only the stalled-load notice reads it — see `ViewLoadingScreen`.	CircularView
showView `boolean`	Whether the view is fully initialized and ready to display	CircularView
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.	CircularView
staticSlices `Slice[]`		CircularView
effectiveBodyMounted `boolean`	Whether this view's body is in the DOM, counting the views it is nested inside — which is the question a display's phase actually asks. `bodyMounted` alone answers it only for a view a container renders directly. A view nested in another view (a synteny row, a breakpoint panel) has no container writing its flag, so it reads `true` forever while its whole subtree is out of the DOM, and every display in it waits for a first paint that nothing will make — the hang this flag exists to prevent, one level down. An ancestor that does not carry the flag at all leaves the answer alone rather than excusing the paint: only an explicit `false` unmounts, so a duck-typed stand-in that forgot it keeps waiting, which is the failure that shows up as a slow test rather than as a picture of an empty view.	BaseViewModel

Methods

Member	Description
menuItems `() => MenuItem[]`	return the view menu items

Actions

Member	Description	Defined by
fitToWindow `() => void`	size the figure so it exactly fills the smaller of the view's two dimensions	CircularView
setWidth `(newWidth: number) => number`		CircularView
setHeight `(newHeight: number) => number`		CircularView
rotateClockwiseButton `() => void`		CircularView
rotateCounterClockwiseButton `() => void`		CircularView
rotate `(delta: number) => void`		CircularView
resetView `() => void`	reset rotation, pan, and zoom back to the default fit-to-window view	CircularView
zoomInButton `() => void`		CircularView
zoomOutButton `() => void`		CircularView
setBpPerPx `(newVal: number) => void`		CircularView
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	CircularView
setDisplayedRegions `(regions: Region[]) => void`		CircularView
activateTrackSelector `() => Widget \| undefined`		CircularView
toggleTrack `(trackId: string) => boolean`		CircularView
setError `(error: unknown) => void`		CircularView
setInit `(init?: CircularViewInit \| undefined) => void`		CircularView
showTrack `(trackId: string, initialSnapshot?: any, displayInitialSnapshot?: any) => any`		CircularView
addTrackConf `(configuration: Record<string, unknown>, initialSnapshot?: any) => any`		CircularView
hideTrack `(trackId: string) => boolean`		CircularView
openExportDialog `() => void`		CircularView
exportSvg `(opts?: ExportSvgOptions) => Promise<void>`	creates an svg export and save using FileSaver	CircularView
resizeHeight `(distance: number) => number`		CircularView
resizeWidth `(distance: number) => number`		CircularView
setDisplayName `(name: string) => void`		BaseViewModel
setBodyMounted `(flag: boolean) => void`	See `bodyMounted`. Written by the view's container, which is the only thing that knows whether it rendered the body.	BaseViewModel
setMinimized `(flag: boolean) => void`		BaseViewModel

Guide: URL query parameter API

CircularView

Example usage#

Properties#

Volatiles#

Getters#

Methods#

Actions#

Related links#