Class: Viewer

Viewer

The Viewer is the main container class for CGView. It controls the overal appearance of the map (e.g. width, height, etc). It also contains all the major components of the map (e.g. Layout, Sequence, Ruler, etc). Many of component options can be set during construction of the Viewer.

Action and Events

Action Viewer Method Event
Update update() viewer-update

Attributes

Attribute Type Description
name String Name for the map
id String ID for the map [Default: random 20 character HexString]
width Number Width of the viewer map in pixels [Default: 600]
height Number Height of the viewer map in pixels [Default: 600]
dataHasChanged Boolean Indicates that data been update/added since this attribute was reset
meta Boolean Meta data for the map. Updating this attribute will overwrite all the current meta data.
sequenceiu Object Sequence options
settingsiu Object Settings options
legendiu Object Legend options
backboneiu Object Backbone options
layoutiu Object Layout options
ruleriu Object Ruler options
dividersiu Object Dividers options
annotationiu Object Annotation options
highlighteriu Object Highlighter options

iu Ignored on Viewer update

Examples

cgv = new CGV.Viewer('#my-viewer', {
  height: 500,
  width: 500,
  sequence: {
    // The length of the sequence
    length: 1000
    // Or, you can provide a sequence
    // seq: 'ATGTAGCATGCATCAGTAGCTA...'
  }
});

// Draw the map
cgv.draw()

See the tutorials to learn more about making maps.

new Viewer(containerId, options)

Create a viewer

Name Type Description
containerId String

The ID (with or without '#') of the element to contain the viewer.

options Object

Attributes used to create the viewer. Component options will be passed to the contructor of that component.

Members

annotationAnnotation

Get the map annotation object

backboneBackbone

Get the Backbone

bbOffsetNumber

Get the distance from the backbone to the center of the canvas.

bpNumber

Get the bp for the center of the canvas. Alias for Canvas.bpForCanvasCenter().

dataHasChangedBoolean

Get or set the dataHasChanged property. This will be set to false, anytime the data API (add, update, remove, reorder) is used. It is reset to false automatically when a new JSON is loaded via IO.loadJSON().

dividersDividers

Get the map dividers object

events

Get the Events object.

formatString

Get or set the map format: circular, linear

geneticCodeNumber

Get or set the genetic code used for translation. This genetic code will be used unless a feature has an overriding genetic code. Alias for Settings.geneticCode. Default: 11

heightNumber

Get or set the width of the Viewer

highlighterHighlighter

Get the Highlighter

idString

Get map id

isAnimatingBoolean

Returns true if an animation started with Viewer.animate() is in progress.

layoutLayout

Get the map layout object

legendLegend

Get the map legend object

loading

Return true if viewer is being initialized or loading new data.

maxDimensionNumber

Get the height or the width of the viewer, which ever is largest.

maxZoomFactorNumber

Get the maximum allowed zoom level. The maximum zoom level is set so that at the maximum, the sequence can be clearly seen.

minDimensionNumber

Get the height or the width of the viewer, which ever is smallest.

minZoomFactorNumber

Get the minimum allowed zoom level

nameString

Get or set the map name

rulerRuler

Get the map ruler object

scaleObject

Return the canvas scales

sequenceSequence

Get the Sequence

settingsSettings

Get the map settings object

versionString

Get CGView version

widthNumber

Get or set the width of the Viewer

zoomFactorNumber

Get or set the zoom level of the map. A value of 1 is the intial zoom level. Increasing the zoom level to 2 will double the length of the backbone, and so on.

Methods

addBookmarks(data){CGArray.<Bookmark>}

Add one or more Bookmarks (see attributes). See adding records for details.

Name Type Description
data Object | Array

Object or array of objects describing the bookmarks

Returns:
Type Description
CGArray.<Bookmark> CGArray of added bookmarks

addCaptions(data){CGArray.<Caption>}

Add one or more captions (see attributes). See adding records for details.

Name Type Description
data Object | Array

Object or array of objects describing the captions

Returns:
Type Description
CGArray.<Caption> CGArray of added captions

addFeatures(data){CGArray.<Feature>}

Add one or more features (see attributes). See adding records for details.

Name Type Description
data Object | Array

Object or array of objects describing the features

Returns:
Type Description
CGArray.<Feature> CGArray of added features

addPlots(data){CGArray.<Plot>}

Add one or more plots (see attributes). See adding records for details.

Name Type Description
data Object | Array

Object or array of objects describing the plots

Returns:
Type Description
CGArray.<Plot> CGArray of added plots

addTracks(data){CGArray.<Track>}

Add one or more tracks (see attributes). See adding records for details.

Name Type Description
data Object | Array

Object or array of objects describing the tracks

Returns:
Type Description
CGArray.<Track> CGArray of added tracks

animate(elements, options, step, reset, newAnimation)

Animate through a defined set of elements (eg. features, bookmarks) or a random number of features. By default the map will reset between animations. To stop the animation, click the map canvas or call Viewer.stopAnimate().

Name Type Default Description
elements Number | Array 5

An array of features or bookmarks. If a number is provided, that number of random features will be animated.

options Object

Options for the animations:

Name Type Description
noReset Boolean If set to true, the map will not reset between animations [Default: false]
resetPosition Feature,Bookmark A feature or bookmark to reset the map to between animations [Default: call Viewer.reset()]
resetDuration Number Number of milliseconds for the reset animation [Default: 3000]
resetPause Number Number of milliseconds to pause on the reset position [Default: 1000]
elementDuration Number Number of milliseconds for each element animation [Default: 3000]
elementPause Number Number of milliseconds to pause on each element position [Default: 1000]
step Number 0

The element index (base-0) to start the animation with [Default: 0]

reset Boolean false

Whether this is a reset animation or not [Default: false]

newAnimation Boolean true

Whether this is a newAnimation or a continuation of a previous one [Default: true]

Returns a CGArray of Bookmarks or a single Bookmark. See reading records for details.

Name Type Description
term Integer | String | Array

See CGArray.get for details.

Returns:
Type Description
Bookmark | CGArray.<Bookmark>

captions(term){CGArray}

Returns an CGArray of Captions or a single Caption.

Name Type Description
term Integer | String | Array

See CGArray.get for details.

Returns:
Type Description
CGArray

clear()

Clear the viewer canvas

contigs(term){CGArray}

Returns an CGArray of contigs or a single contig from all the contigs in the viewer. This is an alias for Viewer.sequence.contigs().

Name Type Description
term Integer | String | Array

See CGArray.get for details.

Returns:
Type Description
CGArray

draw(fast)

Draw the map. By default the full version of the map is drawn. The map can be drawn faster but this will reduce the number of features and other components are drawn.

Name Type Description
fast Boolean

If true, a fast version of the map is draw. Fast drawing is best for zooming and scrolling.

features(term){Feature|CGArray}

Returns a CGArray of features or a single feature. See reading records for details.

Name Type Description
term Integer | String | Array

See CGArray.get for details.

Returns:
Type Description
Feature | CGArray

invertColors()

Inverts the colors of all map elements (e.g. legendItems, backbone, background).

moveCaption(oldIndex, newIndex)

Move a caption from one index to a new one

Name Type Description
oldIndex Number

Index of caption to move (0-based)

newIndex Number

New index for the caption (0-based)

moveLeft(factor, options)

Moves the map left or counterclockwise by factor, where the factor is the fraction of the current visable range. For example, if 1000 bp are currently visible then the default (factor = 0.5) move would be 500 bp.

Name Type Description
factor Number

the fraction of the current visible region to move [Default: 0.5]

options Object

Options for the moving:

Name Type Description
bbOffset Number Distance the map backbone should be moved from center [Default: 0]
duration Number The animation duration in milliseconds [Default: 1000]
ease Number The d3 animation ease [Default: d3.easeCubic]
callback Function Function called after the animation is complete.

moveRight(factor, options)

Moves the map right or clockwise by factor, where the factor is the fraction of the current visable range. For example, if 1000 bp are currently visible then the default (factor = 0.5) move would be 500 bp.

Name Type Description
factor Number

the fraction of the current visible region to move [Default: 0.5]

options Object

Options for the moving:

Name Type Description
bbOffset Number Distance the map backbone should be moved from center [Default: 0]
duration Number The animation duration in milliseconds [Default: 1000]
ease Number The d3 animation ease [Default: d3.easeCubic]
callback Function Function called after the animation is complete.

moveTo(start, stop, options)

Move the viewer to show the map from the start to the stop position. If only the start position is provided, the viewer will center the image on that bp with the current zoom level.

Name Type Description
start Number

The start position in bp

stop Number

The stop position in bp

options Object

Options for the move:

Name Type Description
bbOffset Number Distance the map backbone should be moved from center [Default: 0]
duration Number The animation duration in milliseconds [Default: 1000]
ease Number The d3 animation ease [Default: d3.easeCubic]
callback Function Function called after the animation is complete.

moveTrack(oldIndex, newIndex)

Move a track from one index to a new one

Name Type Description
oldIndex Number

Index of track to move (0-based)

newIndex Number

New index for the track (0-based)

objects(term){CGArray|or|CGObject}

Returns an CGArray of CGObjects or a single CGObject from all the CGObjects in the viewer.

Term Returns
undefined All objects
String CGObject with a cgvID equal to the string or undefined
Array CGArray of CGObjects with matching cgvIDs
Name Type Description
term String | Array

The values returned depend on the term (see above table).

Returns:
Type Description
CGArray | or | CGObject

plots(term){Plot|CGArray}

Returns a CGArray of plots or a single plot. See reading records for details.

Name Type Description
term Integer | String | Array

See CGArray.get for details.

Returns:
Type Description
Plot | CGArray

recenterTracks()

Recenter the map tracks at the current bp position

removeBookmarks(bookmarks)

Remove bookmarks. See removing records for details.

Name Type Description
bookmarks Bookmark | Array

Bookmark or a array of bookmarks to remove

removeFeatures(features)

Remove features. See removing records for details.

Name Type Description
features Feature | Array

Feature or a array of features to remove

removePlots(plots)

Remove plots. See removing records for details.

Name Type Description
plots Plot | Array

Plot or a array of plots to remove

removeTracks(tracks)

Remove tracks. See removing records for details.

Name Type Description
tracks Track | Array

Track or a array of tracks to remove

reset()

Set zoom level to 1 and centers map

resize(width, height, keepAspectRatio, fast)

Resizes the the Viewer

Name Type Default Description
width Number

New width

height Number

New height

keepAspectRatio Boolean true

If only one of width/height is given the ratio will remain the same. (NOT IMPLEMENTED YET)

fast Boolean

After resize, should the viewer be draw redrawn fast.

slots(term){CGArray}

Returns an CGArray of Slots or a single Slot from all the Slots in the Layout.

Name Type Description
term Integer | String | Array

See CGArray.get for details.

Returns:
Type Description
CGArray

sources(term){CGArray}

Returns an CGArray of Feature/Plot Source name or a single item.

Name Type Description
term Integer | String | Array

See CGArray.get for details.

Returns:
Type Description
CGArray

stopAnimate()

Stops an animation started with Viewer.animate().

tags(term){CGArray}

Returns an CGArray of all Feature/Plot tags or a single item.

Name Type Description
term Integer | String | Array

See CGArray.get for details.

Returns:
Type Description
CGArray

tracks(term){Track|CGArray}

Returns a CGArray of tracks or a single track. See reading records for details.

Name Type Description
term Integer | String | Array

See CGArray.get for details.

Returns:
Type Description
Track | CGArray

trigger()

updateBookmarks(bookmarksOrUpdates, attributes)

Update attributes for one or more bookmarks. See updating records for details.

Name Type Description
bookmarksOrUpdates Bookmark | Array | Object

Bookmark, array of bookmarks or object describing updates

attributes Object

Object describing the properties to change

updateFeatures(featuresOrUpdates, attributes)

Update attributes for one or more features. See updating records for details.

Name Type Description
featuresOrUpdates Feature | Array | Object

Feature, array of features or object describing updates

attributes Object

Object describing the properties to change

updatePlots(plotsOrUpdates, attributes)

Update attributes for one or more plot. See updating records for details.

Name Type Description
plotsOrUpdates Plot | Array | Object

Plot, array of plot or object describing updates

attributes Object

Object describing the properties to change

updateTracks(tracksOrUpdates, attributes)

Update attributes for one or more tracks. See updating records for details.

Name Type Description
tracksOrUpdates Track | Array | Object

Track, array of tracks or object describing updates

attributes Object

Object describing the properties to change

zoomIn(factor, options)

Zoom in on the current bp a factor

Name Type Default Description
factor Number 2

Amount to zoom in by [Default: 2]

options Object

Options passed to Viewer.zoomTo()

zoomOut(factor, options)

Zoom out on the current bp a factor

Name Type Default Description
factor Number 2

Amount to zoom out by [Default: 2]

options Object

Options passed to Viewer.zoomTo()

zoomTo(bp, zoomFactor, options)

Move the viewer to bp position at the provided zoomFactor. If bp is falsy (inc. 0), the map is centered.

Name Type Description
bp Number

The position in bp

zoomFactor Number

The zoome level

options Object

Options for the zoom:

Name Type Description
bbOffset Number Distance the map backbone should be moved from center [Default: 0]
duration Number The animation duration in milliseconds [Default: 1000]
ease Number The d3 animation ease [Default: d3.easeCubic]
callback Function Function called after the animation is complete.