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)

Viewer.js, line 101

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>}

Viewer.js, line 1115

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>}

Viewer.js, line 769

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>}

Viewer.js, line 956

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>}

Viewer.js, line 1040

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>}

Viewer.js, line 630

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)

Viewer.js, line 1237

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]

bookmarks(term){Bookmark|CGArray.<Bookmark>}

Viewer.js, line 1105

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}

Viewer.js, line 755

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()

Viewer.js, line 1156

Clear the viewer canvas

contigs(term){CGArray}

Viewer.js, line 586

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)

Viewer.js, line 1189

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}

Viewer.js, line 577

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()

Viewer.js, line 1585

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

moveCaption(oldIndex, newIndex)

Viewer.js, line 801

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)

Viewer.js, line 1402

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)

Viewer.js, line 1420

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)

Viewer.js, line 1315

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)

Viewer.js, line 744

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}

Viewer.js, line 542

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

off()

Viewer.js, line 1609

See Events.off()

on()

Viewer.js, line 1602

See Events.on()

plots(term){Plot|CGArray}

Viewer.js, line 813

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()

Viewer.js, line 1570

Recenter the map tracks at the current bp position

removeBookmarks(bookmarks)

Viewer.js, line 1127

Remove bookmarks. See removing records for details.

Name Type Description
bookmarks Bookmark | Array

Bookmark or a array of bookmarks to remove

removeFeatures(features)

Viewer.js, line 972

Remove features. See removing records for details.

Name Type Description
features Feature | Array

Feature or a array of features to remove

removePlots(plots)

Viewer.js, line 1053

Remove plots. See removing records for details.

Name Type Description
plots Plot | Array

Plot or a array of plots to remove

removeTracks(tracks)

Viewer.js, line 651

Remove tracks. See removing records for details.

Name Type Description
tracks Track | Array

Track or a array of tracks to remove

reset()

Viewer.js, line 1563

Set zoom level to 1 and centers map

resize(width, height, keepAspectRatio, fast)

Viewer.js, line 510

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}

Viewer.js, line 563

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}

Viewer.js, line 825

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()

Viewer.js, line 1293

Stops an animation started with Viewer.animate().

tags(term){CGArray}

Viewer.js, line 843

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}

Viewer.js, line 620

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()

Viewer.js, line 1616

See Events.trigger()

updateBookmarks(bookmarksOrUpdates, attributes)

Viewer.js, line 1145

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)

Viewer.js, line 996

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)

Viewer.js, line 1073

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)

Viewer.js, line 702

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)

Viewer.js, line 1545

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)

Viewer.js, line 1555

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)

Viewer.js, line 1488

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.