# CircularView Auto-generated @jbrowse/mobx-state-tree API for the current JBrowse release — see [pluggable elements](https://jbrowse.org/jb2-staging/docs/developer_guide/) for concepts. Provided by the `circular-view` plugin. [View source](https://github.com/GMOD/jbrowse-components/blob/main/plugins/circular-view/src/CircularView/model.ts). ## 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: ```js { 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](../baseviewmodel#property-id) | | **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](../baseviewmodel#property-displayname) | | **minimized**
minimized: types.stripDefault(types.boolean, false) | collapse the view to its header bar, keeping it in the session rather than closing it | [BaseViewModel](../baseviewmodel#property-minimized) | ## 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](../baseviewmodel#volatile-width) | | **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](../baseviewmodel#volatile-bodymounted) | ## 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](../baseviewmodel#getter-effectivebodymounted) | ## 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