CGView.js
Examples Tutorials Docs API JSON
  • Setup
  • Overview
  • Components
  • Record Actions
  • Add
  • Remove
  • Update
  • Reorder
  • Read
  • Advantages
  • Events
  • Dirty Data
  • Record Types
  • Viewer
  • Feature
  • Plot
  • Track
  • Settings
  • Legend
  • LegendItem
  • Caption
  • Annotation
  • Bookmark
  • Backbone
  • Sequence
  • Contig
  • Ruler
  • Divider
# Setup ### Dependencies - CGView.js has only one dependency: [D3](http://d3js.org) (Version 6 or 7). - When using CGView via script tags, D3 will have to be sourced first. ### Install via [npm](https://npmjs.com) or [yarn](https://yarnpkg.com) - Install: ```bash # npm npm install --save cgview # yarn yarn add cgview ``` - The following files will be available in node_modules/cgview/dist: ```bash # Required CSS file - cgview.css # Use one of the following (ESM or IIFE): - cgview.esm.js - cgview.esm.min.js - cgview.js - cgview.min.js ``` - Source CGView.js files (JavaScript and CSS): 
<!-- Javscript -->
<script src="cgview.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="cgview.css">
- Or import as an ES6 module: ```js import * as CGV from 'cgview.esm.js' import 'cgview.css'; ``` ### Install via [jsDelivr](https://www.jsdelivr.com) - Install (See [jsDelivr](https://www.jsdelivr.com) for specfying specific versions): 
<!-- Javscript -->
<!-- Source D3 before CGView -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cgview/dist/cgview.min.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cgview/dist/cgview.css">
# Overview CGView.js draws maps as a series of [tracks](api/Track.html) around the [backbone](api/Backbone.html). The Backbone represents the sequence and if the sequence is provided to CGView.js, then you can zoom in far enough to see the sequence in the backbone. Tracks contain either a [plot](api/Plot.html) or a set of [features](api/Feature.html). Tracks are drawn as as one or more [slots](api/Slot.html) where each Slot is a single ring on the map. Slots outside of the backbone show features on the forward strand, while inside slots show features on the reverse strand. Tracks containing a Plot are always drawn as a single slot, however, feature tracks can be drawn in 3 different configurations: Slots | Description ------|------------ 1 | All the features are drawn on a single Slot 2 | Features are drawn separated by strand 6 | Features are drawn separated by reading frame
# Components The [viewer](api/Viewer.html) is the main class in CGView.js and contains several components which control the look and feel of the Map. These components can be accessed through accessor members or methods. Members (or properties) provide access in cases where there is only a single component (e.g Sequence). Methods allow selection of one or more objects in cases where there can be more than one component (e.g. Features). See [CGArray.get](api/CGArray.html#get) for details. ```js // Access the sequence object viewer.sequence // Access all the features viewer.features() // Access the first feature viewer.features(1) // Access the first feature with the name 'my_feature' viewer.features('my_feature') ``` Component | Accessor | Description ---------------------------------|--------------------------------------------|------------ [Sequence](api/Sequence.html) | [sequence](api/Viewer.html#sequence) | The Sequence object contains the sequence itself or at the very least the length of the sequence. [Canvas](api/Canvas.html) | [canvas](api/Viewer.html#canvas) | The Canvas object contains the canvas layers, scale and various drawing methods. [IO](api/IO.html) | [io](api/Viewer.html#io) | The IO object has methods for reading and writing data to and from the Viewer. [Legend](api/Legend.html) | [legend](api/Viewer.html#legend) | The Legend object contains the [LegendItems](api/LegendItem.html) which are used to color the features and plots. [Backbone](api/Backbone.html) | [backbone](api/Viewer.html#backbone) | The Backbone represents the sequence. [Layout](api/Layout.html) | [layout](api/Viewer.html#layout) | The Layout handles drawing the map in different formats (e.g. circular, linear). [Ruler](api/Ruler.html) | [ruler](api/Viewer.html#ruler) | The Ruler controls how the sequence ruler is drawn. [Annotation](api/Annotation.html) | [annotation](api/Viewer.html#annotation) | Annotation controls how feature labels are drawn. [Settings](api/Settings.html) | [settings](api/Viewer.html#settings) | Settings store general options for the viewer. [Divider](api/Dividers.html) | [dividers](api/Viewer.html#dividers) | Controls the space and lines between each track and slot. [Highlighter](api/Highlighter.html) | [highlighter](api/Viewer.html#highlighter) | Highlighter controls what happens when mousing over features/plots. [Track](api/Track.html) | [tracks()](api/Viewer.html#tracks) | Returns one or more Tracks. [Feature](api/Feature.html) | [features()](api/Viewer.html#features) | Returns one or more Features. [Plot](api/Plot.html) | [plots()](api/Viewer.html#plots) | Returns one or more Plots. [Caption](api/Caption.html) | [captions()](api/Viewer.html#captions) | Returns one or more Captions. FeatureType | [featureType()](api/Viewer.html#featureTypes) | Returns one or more FeatureTypes.
# Record Actions There are several actions that can be used to manipulate and access the different types of records (e.g. features, tracks, etc) in CGView: read, add, remove, update, and reorder. While it is possible to change record properties directly, see [Record Action Advantages](#record-action-advantages) to learn why it is not recommended. The action descriptions below use Features and Tracks for the examples. Action details by record type are also provided. All the examples use a Viewer instance: cgv.
## Adding Records Adding records is done through methods on the Viewer Instance (e.g. addFeatures, addTracks, etc). Data can be added as a single object to create one record on as an array of objects to create an array of records. Adding one or more records will trigger a single event (e.g. features-add). Each record type will have a list of attributes that can be set when creating records or updating them. ```js // Add a single feature featureData = {...}; cgv.addFeatures(featureData); // => Feature // Add a multiple features featureData = [{...},{...}]; cgv.addFeatures(featureData); // => [Feature, Feature] ``` The data object is passed directly to the record constructor. So the following are similar, however, creating an object directly with the constructor does not trigger events or add the action to the CGView History (see [Record Action Advantages](#record-action-advantages)). ```js featureData = {...}; // Create Feature with Add Action (Recommended) cgv.addFeatures(featureData); // Create Feature directly (Not Recommended) new CGV.Feature(cgv, featureData); ```
## Removing Records Removing records is done through methods on the Viewer Instance (e.g. removeFeatures) or directly on the record. Removing records will trigger a single event (e.g. features-remove). ```js // Remove a single record feature = cgv.features(1); cgv.removeFeatures(feature); // OR feature.remove(); // Remove multiple records features = [feature_1, feature_2, features_3]; cgv.removeFeatures(features); ```
## Updating Records Updating records is done through methods on the Viewer Instance (e.g. updateFeatures) or directly on the record. Updating records will trigger a single event (e.g. features-update). The list of attributes that can be updated for a record are the same as for adding new records. ```js // attributes is an object describing the properties to change attributes = {type: 'CDS', legend: 'CDS'}; // Update a single record feature = cgv.features(1); cgv.updateFeatures(feature, attributes); // OR feature.update(attributes); // Update multiple records to have the same attributes features = [feature_1, feature_2, features_3]; cgv.updateFeatures(features, attributes); // Update multiple records with different attributes // The updates object has record cgvIDs as keys and the new attributes as values const updates = { feature_1.cgvID: {type: 'CDS', legend: 'CDS'}, feature_2.cgvID: {type: 'tRNA', legend: 'tRNA'} } cgv.updateFeatures(updates); ```
## Reordering Records For some records, the order is important (e.g. Tracks, Contigs, etc). Changing the order is done through methods on the Viewer Instance (e.g. moveTracks) or directly on the record. Moving records will trigger a move event (e.g. tracks-reordered). ```js track = cgv.tracks(1) cgv.moveTrack(track.index, newIndex) // OR track.move(newIndex); ```
## Reading Records Accessing records is done through methods on the Viewer Instance. ```js // Access all the features viewer.features() // Access the first feature viewer.features(1) // Access the first feature with the name 'my_feature' viewer.features('my_feature') ```
# Record Action Advantages Instead of using the record actions (e.g. update), you could change properties directly: ```js // Not recommended but it's OK to use this method if the advantages below do not apply. feature.start = 1234; ``` However, there are several advantages of using record actions: - More than one property can be changed at once. ```js feature.update({start: 1234, stop: 2345}); ``` - An error will be returned if the property does not exist. ```js feature.update({strt: 1234}); // => Error: Feature does not contain a 'strt' property. ``` - The update methods trigger [events](#s.events) (e.g. 'features-update') that can be used as hooks. ```js cgv.on('features-update', ({features}) => { const names = features.map( f => f.name ); console.log(`The following features have been updated: ${names.join(', ')}`) }); ``` - In some cases multiple objects (e.g. features, tracks, etc) can be updated at once. ```js // This will update all 3 features but only generate 1 'features-update' event. cgv.updateFeatures([feature1, feature2, feature3], {type: 'CDS'}); ``` - The update methods will also be added to the CGView History (LINK) and therefore can undone or redone. (NOT IMPLEMENTED YET) ```js cgv.undo(); cgv.redo(); ```
# Events Record actions (as described above) trigger events that can be used as hooks for callback functions. Record Action | Event Name | Callback Arguments --------------|------------|--------------------------------------- Add | *-add | Array of records added Remove | *-remove | Array of records removed Update | *-update | Object { records1, attributes2, updates3 } Reorder | *-reorder | Object { oldIndex, newIndex } - 1Records: will be the name of the record type (e.g. features, tracks, etc). - 2Attibutes: object of attributes used to change all of the records. - 3Updates: object of attributes changes for individual records (see [Updating Records](#s.updating-records)). See individual [record types](#s.details-by-record-type) for a list of event names. ## On Add a callback function to an event using [on()](api/Viewer.html#on). ```js cgv.on('features-add', (features) => { console.log(`Features added: ${features.length}`); }); ``` ## Off Remove callbacks for an event using [off()](Viewer.html#off). ```js cgv.off('features-add'). ``` ## Trigger Events can be triggered without changes to execute callback function. ```js cgv.trigger('features-update', [feature]); // Same as feature.update(); ``` ## Other Events There are addtional events not associated with record actions. Event | Description ------------------|----------------------------------------------------- cgv-load-json | Called when [IO.loadJSON()](api/IO.html#loadJSON) is executed mousemove | Called when mouse moves on the Viewer. Returns [event-like object](api/EventMonitor.html) click | Called when mouse clicks on the Viewer. Returns [event-like object](api/EventMonitor.html) zoom-start | Called once before the viewer is zoomed or moved zoom | Called every frame of the zoom or move zoom-end | Called once after the viewer is zoomed or moved bookmark-shortcut | Called when a bookmark shortcut key is clicked
# Dirty Data If the Record Actions are used to change data, the viewer property [Viewer.dataHasChanged](api/Viewer.html#dataHasChanged) will be set to true. This value is set to false automatically only when new data is read in via [IO.loadJSON()](api/IO.html#loadJSON). Otherwise it can be manually set to false. This could be used by a site to see if the data has changed and thus should be saved. Once saved, the site would manually set this property to false. ```js // New CGView object cgv.dataHasChanged // => false cgv.addFeatures({...}) cgv.dataHasChanged // => true ```
# Details by Record Type For each record type, two tables are shown. The top table shows the actions available for a record, including the methods to call the actions and the events that are triggered. The bottom table shows all the attributes that can be used for creating and updating records. Note, that some attribtues are required on creation and others are ignored on creation or updating. For these special cases, the attribute will be identified with one or more of the following superscripts: - rc Required on Record creation - ic Ignored on Record creation - iu Ignored on Record update
## [Viewer](api/Viewer.html) Action | Viewer Method | Event ----------------------------------------|--------------------------------------|----- [Update](#updating-records) | [update()](api/Viewer.html#update) | viewer-update Attribute | Type | Description ----------------------------------|-----------|------------ [name](api/Viewer.html#name) | String | Name for the map [id](api/Viewer.html#id) | String | ID for the map [Default: random 20 character HexString] [width](api/Viewer.html#width) | Number | Width of the viewer map in pixels [Default: 600] [height](api/Viewer.html#height) | Number | Height of the viewer map in pixels [Default: 600] [dataHasChanged](api/Viewer.html#dataHasChanged) | Boolean | Indicates that data been update/added since this attribute was reset [meta](api/Viewer.html#meta) | Boolean | Meta data for the map. Updating this attribute will overwrite **all** the current meta data. [sequence](api/Viewer.html#sequence)iu | Object | [Sequence](api/Sequence.html) options [settings](api/Viewer.html#settings)iu | Object | [Settings](api/Settings.html) options [legend](api/Viewer.html#legend)iu | Object | [Legend](api/Legend.html) options [backbone](api/Viewer.html#backbone)iu | Object | [Backbone](api/Backbone.html) options [layout](api/Viewer.html#layout)iu | Object | [Layout](api/Layout.html) options [ruler](api/Viewer.html#ruler)iu | Object | [Ruler](api/Ruler.html) options [dividers](api/Viewer.html#dividers)iu | Object | [Dividers](api/Dividers.html) options [annotation](api/Viewer.html#annotation)iu | Object | [Annotation](api/Annotation.html) options [highlighter](api/Viewer.html#highlighter)iu | Object | [Highlighter](api/Highlighter.html) options iu Ignored on Viewer update
## [Feature](api/Feature.html) Action | Viewer Method | Feature Method | Event ----------------------------------------|------------------------------------------------|---------------------|----- [Add](#adding-records) | [addFeatures()](api/Viewer.html#addFeatures) | - | features-add [Update](#updating-records) | [updateFeatures()](api/Viewer.html#updateFeatures) | [update()](api/Feature.html#update) | features-update [Remove](#removing-records) | [removeFeatures()](api/Viewer.html#removeFeatures) | [remove()](api/Feature.html#remove) | features-remove [Read](#reading-records) | [features()](api/Viewer.html#features) | - | - Attribute | Type | Description ---------------------------------|----------|------------ [name](api/Feature.html#name) | String | Name of feature [type](api/Feature.html#type) | String | Feature type (e.g. CDS, rRNA, etc) [legend](api/Feature.html#legend) | String\|LegendItem | Name of legendItem or the legendItem itself [source](api/Feature.html#source) | String | Source of the feature [tags](api/Feature.html#tags) | String\|Array | A single string or an array of strings associated with the feature as tags [contig](api/Feature.html#contig) | String\|Contig | Name of contig or the contig itself [start](api/Feature.html#start)rc | Number | Start base pair on the contig [stop](api/Feature.html#stop)rc | Number | Stop base pair on the contig [mapStart](api/Feature.html#mapStart)ic | Number | Start base pair on the map (converted to contig position) [mapStop](api/Feature.html#mapStop)ic | Number | Stop base pair on the map (converted to contig position) [strand](api/Feature.html#strand) | String | Strand the features is on [Default: 1] [score](api/Feature.html#score) | Number | Score associated with the feature [favorite](api/Feature.html#favorite) | Boolean | Feature is a favorite [Default: false] [visible](api/CGObject.html#visible) | Boolean | Feature is visible [Default: true] [meta](api/CGObject.html#meta) | Object | [Meta data](tutorials/details-meta-data.html) for Feature rc Required on Feature creation ic Ignored on Record creation
## [Plot](api/Plot.html) Action | Viewer Method | Plot Method | Event ----------------------------------------|------------------------------------------|---------------------|----- [Add](#adding-records) | [addPlots()](api/Viewer.html#addPlots) | - | plots-add [Update](#updating-records) | [updatePlots()](api/Viewer.html#updatePlots) | [update()](api/Plot.html#update) | plots-update [Remove](#removing-records) | [removePlots()](api/Viewer.html#removePlots) | [remove()](api/Plot.html#remove) | plots-remove [Read](#reading-records) | [plots()](api/Viewer.html#plots) | - | - Attribute | Type | Description ----------------------------------|----------|------------ [name](api/Plot.html#name) | String | Name of plot [legend](api/Plot.html#legend) | String\|LegendItem | Name of legendItem or the legendItem itself (sets positive and negative legend) [legendNegative](api/Plot.html#legendNegative) | String\|LegendItem | Name of legendItem or the legendItem itself for the plot above the baseline [legendPositive](api/Plot.html#legendPositive) | String\|LegendItem | Name of legendItem or the legendItem itself for the plot below the baseline [source](api/Plot.html#source) | String | Source of the plot [positions](api/Plot.html#positions)rc,iu | Array | Array of base pair position on contig [scores](api/Plot.html#scores)rc,iu | Array | Array of scores [baseline](api/Plot.html#baseline) | Number | Score where the plot goes from negative to positive (in terms of legend) [axisMax](api/Plot.html#axisMax) | Number | Maximum value for the plot axis [axisMin](api/Plot.html#axisMin) | Number | Minimum value for the plot axis [favorite](api/Plot.html#favorite) | Boolean | Plot is a favorite [Default: false] [visible](api/CGObject.html#visible) | Boolean | Plot is visible [Default: true] [meta](api/CGObject.html#meta) | Object | [Meta data](tutorials/details-meta-data.html) for Plot rc Required on Plot creation iu Ignored on Plot update
## [Track](api/Track.html) Action | Viewer Method | Track Method | Event ------------------------------------------|--------------------------------------------|---------------------|----- [Add](#adding-tracks) | [addTracks()](api/Viewer.html#addTracks) | - | tracks-add [Update](#updating-tracks) | [updateTracks()](api/Viewer.html#updateTracks) | [update()](api/Track.html#update) | tracks-update [Remove](#removing-tracks) | [removeTracks()](api/Viewer.html#removeTracks) | [remove()](api/Track.html#remove) | tracks-remove [Reorder](#reordering-tracks) | [moveTrack()](api/Viewer.html#moveTrack) | [move()](api/Track.html#move) | tracks-reorder [Read](#reading-tracks) | [tracks()](api/Viewer.html#tracks) | - | - Attribute | Type | Description ----------------------------------|-----------|------------ [name](api/Track.html#name) | String | Name of track [Default: "Unknown"] [dataType](api/Track.html#dataType) | String | Type of data shown by the track: plot, feature [Default: feature] [dataMethod](api/Track.html#dataMethod) | String | Methods used to extract/connect to features or a plot: sequence, source, type, tag [Default: source] [dataKeys](api/Track.html#dataKeys) | String\|Array | Values used by dataMethod to extract features or a plot. [position](api/Track.html#position) | String | Position relative to backbone: inside, outside, or both [Default: both] [separateFeaturesBy](api/Track.html#separateFeaturesBy) | String | How features should be separated: none, strand, or readingFrame [Default: strand] [thicknessRatio](api/Track.html#thicknessRatio) | Number | Thickness of track compared to other tracks [Default: 1] [loadProgress](api/Track.html#loadProgress) | Number | Number between 0 and 100 indicating progress of track loading. Used internally by workers. [drawOrder](api/Track.html#loadProgress) | String | Order to draw features in: position, score [Default: position] [favorite](api/Track.html#favorite) | Boolean | Track is a favorite [Default: false] [visible](api/CGObject.html#visible) | Boolean | Track is visible [Default: true] [meta](api/CGObject.html#meta) | Object | [Meta data](tutorials/details-meta-data.html) for Track
## [Settings](api/Settings.html) Action | Viewer Method | Settings Method | Event ----------------------------------------|----------------------------------|---------------------|----- [Update](#updating-records) | - | [update()](api/Settings.html#update) | settings-update [Read](#reading-records) | [settings](api/Viewer.html#settings) | - | - Attribute | Type | Description ------------------------------------|-----------|------------ [format](api/Settings.html#format) | String | The layout format of the map: circular, linear [Default: circular] [backgroundColor](api/Settings.html#backgroundColor) | String | A string describing the background color of the map [Default: 'white']. See Color for details. [showShading](api/Settings.html#showShading) | Boolean | Should a shading effect be drawn on the features [Default: true] [arrowHeadLength](api/Settings.html#arrowHeadLength) | Number | Length of feature arrowheads as a proportion of the feature thickness. From 0 (no arrowhead) to 1 (arrowhead as long on the feature is thick) [Default: 0.3] [initialMapThicknessProportion](api/Settings.html#initialMapThicknessProportion) | Number | Proportion of canvas size to use for drawing map tracks at a zoomFactor of 1 [Default: 0.1] [maxMapThicknessProportion](api/Settings.html#maxMapThicknessProportion) | Number | Proportion of canvas size to use for drawing map tracks at max zoom level [Default: 0.5]
## [Legend](api/Legend.html) Action | Viewer Method | Legend Method | Event ----------------------------------------|------------------------------|--------------------------------|----- [Update](#updating-records) | - | [update()](api/Legend.html#update) | legends-update [Read](#reading-records) | [legend](api/Viewer.html#legend) | - | - Attribute | Type | Description -----------------------------------|-----------|------------ [position](api/Legend.html#position) | String\|Object | Where to draw the legend [Default: 'top-right']. See Position for details. [anchor](api/Legend.html#anchor) | String\|Object | Where to anchor the legend box to the position [Default: 'auto']. See Anchor for details. [defaultFont](api/Legend.html#defaultFont) | String | A string describing the default font [Default: 'SansSerif, plain, 8']. See Font for details. [defaultFontColor](api/Legend.html#defaultFontColor) | String | A string describing the default font color [Default: 'black']. See Color for details. [defaultMinArcLength](api/Legend.html#defaultMinArcLength) | Number | Default minimum length in pixels to use when drawing arcs. From 0 to 2 pixels [Default: 1] [textAlignment](api/Legend.html#textAlignment) | String | Alignment of legend text: *left*, or *right* [Default: 'left'] [backgroundColor](api/Legend.html#font) | String | A string describing the background color of the legend [Default: 'white']. See Color for details. [on](api/Legend.html#on)ic | String | Place the legend relative to the 'canvas' or 'map' [Default: 'canvas'] [items](api/Legend.html#items)iu | Array | Array of legend item data. [visible](api/CGObject.html#visible) | Boolean | Legend is visible [Default: true] [meta](api/CGObject.html#meta) | Object | [Meta data](tutorials/details-meta-data.html) ic Ignored on Legend creation iu Ignored on Legend update
## [LegendItem](api/LegendItem.html) Action | Legend Method | LegendItem Method | Event -------------------------------------------|------------------------------------------|---------------------|----- [Add](#adding-records) | [addItems()](api/Legend.html#addItems) | - | legendItems-add [Update](#updating-records) | [updateItems()](api/Legend.html#updateItems) | [update()](api/LegendItem.html#update) | legendItems-update [Remove](#removing-records) | [removeItems()](api/Legend.html#removeItems) | [remove()](api/LegendItem.html#remove) | legendItems-remove [Reorder](#reordering-records) | [moveItem()](api/Legend.html#moveItem) | [move()](api/LegendItem.html#move) | legendItems-reorder [Read](#reading-records) | [items()](api/Legend.html#items) | - | - Attribute | Type | Description ---------------------------------|-----------|------------ [name](api/LegendItem.html#name) | String | Name to diplay for legendItem [font](api/LegendItem.html#font) | String | A string describing the font [Default: 'SansSerif, plain, 8']. See Font for details. [fontColor](api/LegendItem.html#fontColor) | String | A string describing the font color [Default: 'black']. See Color for details. [decoration](api/LegendItem.html#decoration) | String | How the features should be drawn. Choices: 'arc' [Default], 'arrow', 'score', 'none' [Default: 'arc'] [swatchColor](api/LegendItem.html#swatchColor) | String | A string describing the legendItem display color [Default: 'black']. See Color for details. [minArcLength](api/LegendItem.html#minArcLength) | Number | Minimum length in pixels to use when drawing arcs. From 0 to 2 pixels [Default: 1] [drawSwatch](api/LegendItem.html#drawSwatch) | Boolean | Draw the swatch beside the legendItem name [Default: true] [favorite](api/LegendItem.html#favorite) | Boolean | LegendItem is a favorite [Default: false] [visible](api/CGObject.html#visible) | Boolean | LegendItem is visible [Default: true] [meta](api/CGObject.html#meta) | Object | [Meta data](tutorials/details-meta-data.html)
## [Caption](api/Caption.html) Action | Viewer Method | Caption Method | Event -------------------------------------------|------------------------------------------------|----------------------|----- [Add](#adding-records) | [addCaptions()](api/Viewer.html#addCaptions) | - | captions-add [Update](#updating-records) | [updateCaptions()](api/Viewer.html#updateCaptions) | [update()](api/Caption.html#update) | captions-update [Remove](#removing-records) | [removeCaptions()](api/Viewer.html#removeCaptions) | [remove()](api/C#remove) | captions-remove [Reorder](#reordering-records) | [moveCaption()](api/Viewer.html#moveCaption) | [move()](api/Caption.html#move) | captions-reorder [Read](#reading-records) | [captions()](api/Viewer.html#captions) | - | - Attribute | Type | Description ---------------------------------|-----------|------------ [name](api/Caption.html#name) | String | Text of the caption [position](api/Caption.html#position) | String\|Object | Where to draw the caption [Default: 'middle-center']. See Position for details. [anchor](api/Caption.html#anchor) | String\|Object | Where to anchor the caption box to the position [Default: 'middle-center']. See Anchor for details. [font](api/Caption.html#font) | String | A string describing the font [Default: 'SansSerif, plain, 8']. See Font for details. [fontColor](api/Caption.html#fontColor) | String | A string describing the color [Default: 'black']. See Color for details. [textAlignment](api/Caption.html#textAlignment) | String | Alignment of caption text: *left*, *center*, or *right* [Default: 'left'] [backgroundColor](api/Caption.html#font) | String | A string describing the background color of the caption [Default: 'white']. See Color for details. [on](api/Caption.html#on)ic | String | Place the caption relative to the 'canvas' or 'map' [Default: 'canvas'] [visible](api/CGObject.html#visible) | Boolean | Caption is visible [Default: true] [meta](api/CGObject.html#meta) | Object | [Meta data](tutorial-meta.html) for Caption ic Ignored on Caption creation
## [Annotation](api/Annotation.html) Action | Viewer Method | Annotation Method | Event ------------------------------------------|--------------------------------------|---------------------|----- [Update](#s.updating-records) | - | [update()](api/Annotation.html#update) | annotation-update [Read](#s.reading-records) | [annotation](api/Viewer.html#annotation) | - | - Attribute | Type | Description ---------------------------------|-----------|------------ [font](api/Annotation.html#font) | String | A string describing the font [Default: 'monospace, plain, 12']. See Font for details. [color](api/Annotation.html#color) | String | A string describing the color [Default: undefined]. If the color is undefined, the legend color for the feature will be used. See Color for details. [onlyDrawFavorites](api/Annotation.html#onlyDrawFavorites) | Boolean | Only draw labels for features that are favorited [Default: false] [labelPlacement](api/Annotation.html#labelPlacement) | String | The label placement method for positioning labels. Choices: 'default', 'angled' [Default: 'default'] [visible](api/CGObject.html#visible) | Boolean | Labels are visible [Default: true] [meta](api/CGObject.html#meta) | Object | [Meta data](tutorial-meta.html) for Annotation
## [Bookmark](api/Bookmark.html) Action | Viewer Method | Bookmark Method | Event ------------------------------------------|--------------------------------------------------|---------------------|----- [Add](#s.adding-records) | [addBookmarks()](api/Viewer.html#addBookmarks) | - | bookmarks-add [Update](#s.updating-records) | [updateBookmarks()](api/Viewer.html#updateBookmarks) | [update()](api/Bookmark.html#update) | bookmarks-update [Remove](#s.removing-records) | [removeBookmarks()](api/Viewer.html#removeBookmarks) | [remove()](api/Bookmark.html#remove) | bookmarks-remove [Read](#s.reading-records) | [bookmarks()](api/Viewer.html#bookmarks) | - | - Attribute | Type | Description ---------------------------------|-----------|------------ [name](api/Bookmark.html#name) | String | Name of bookmark [Default: "Bookmark-N" where N is the number of the bookmark] [bp](api/Bookmark.html#bp) | Number | Base pair to center the map position [Default: Current bp] [zoom](api/Bookmark.html#zoom) | Number | Zoom factor [Default: Current zoomFactor] [format](api/Bookmark.html#format) | String | Map format [Default: Current map format] [bbOffset](api/Bookmark.html#bbOffset) | Number | Distance from the backbone to the center of the canvas [Default: 0] [shortcut](api/Bookmark.html#shortcut) | Character | Single character shortcut that when pressed moves the map to this position [Default: N (see name) up to 9] [favorite](api/Bookmark.html#favorite) | Boolean | Bookmark is a favorite [Default: false] [meta](api/CGObject.html#meta) | Object | [Meta data](tutorials/details-meta-data.html) for Bookmark
## [Backbone](api/Backbone.html) Action | Viewer Method | Backbone Method | Event ------------------------------------------|--------------------------------- |---------------------|----- [Update](#s.updating-records) | - | [update()](api/Backbone.html#update) | backbone-update [Read](#s.reading-records) | [backbone](api/Viewer.html#backbone) | - | - Attribute | Type | Description ----------------------------------|-----------|------------ [thickness](api/Backbone.html#thickness) | Number | Thickness of backbone [Default: 5] [color](api/Backbone.html#color) | String | A string describing the main backbone color [Default: 'grey']. See Color for details. [colorAlternate](api/Backbone.html#alternateColor) | String | A string describing the alternate color used for contigs [Default: 'rgb(200,200,200)']. See Color for details. [decoration](api/Backbone.html#decoration) | String | How the bakcbone should be drawn. Choices: 'arc', 'arrow' [Default: arc for single contig, arrow for muliple contigs] [visible](api/CGObject.html#visible) | Boolean | Backbone is visible [Default: true] [meta](api/CGObject.html#meta) | Object | [Meta data](tutorials/details-meta-data.html)
## [Sequence](api/Sequence.html) Action | Viewer Method | Sequence Method | Event ----------------------------------------|----------------------------------|---------------------|----- [Update](#updating-records) | - | [update()](api/Sequence.html#update) | sequence-update [Read](#reading-records) | [sequence](api/Viewer.html#sequence) | - | - Attribute | Type | Description ---------------------------------|-----------|------------ [name](api/Sequence.html#name) | String | Sequence name. [TODO] [seq](api/Sequence.html#seq)iu | String | The map sequence. [length](api/Sequence.html#length)iu | Number | The length of the sequence. This is ignored if a seq is provided. [Default: 1000] [contigs](api/Sequence.html#contigs)iu | Array | Array of contigs. Contigs are ignored if a seq is provided. [font](api/Sequence.html#font) | String | A string describing the font [Default: 'SansSerif, plain, 14']. See Font for details. [color](api/Sequence.html#color) | String | A string describing the sequence color [Default: 'black']. See Color for details. [visible](api/CGObject.html#visible) | Boolean | Sequence sequence is visible when zoomed in enough [Default: true] [meta](api/CGObject.html#meta) | Object | [Meta data](tutorials/details-meta-data.html) iu Ignored on Sequence update
## [Contig](api/Contig.html) Action | Sequence Method | Contig Method | Event -------------------------------------------|------------------------------------------------|---------------------|----- [Add](#adding-records) | [addContigs()](api/Sequence.html#addContigs) | - | contigs-add [Update](#updating-records) | [updateContigs()](api/Sequence.html#updateContigs) | [update()](api/Contig.html#update) | contigs-update [Remove](#removing-records) | [removeContigs()](api/Sequence.html#removeContigs) | [remove()](api/Contig.html#remove) | contigs-remove [Reorder](#reordering-records) | [moveContig()](api/Sequence.html#moveContig) | [move()](api/Contig.html#move) | contigs-reorder [Read](#reading-records) | [contigs()](api/Sequence.html#contigs) | - | - Attribute | Type | Description ---------------------------------|-----------|------------ [name](api/Contig.html#name) | String | Contig name. [seq](api/Contig.html#seq)iu | String | The contig sequence. [length](api/Contig.html#length)iu | Number | The length of the sequence. This is ignored if a seq is provided. [orientation](api/Contig.html#orientation) | String | '+' for forward orientation and '-' for the reverse. [color](api/Contig.html#color) | Color | A string describing the color [Default: 'black']. See Color for details. [visible](api/CGObject.html#visible) | Boolean | Contig is visible [Default: true]. [meta](api/CGObject.html#meta) | Object | [Meta data](tutorials/details-meta-data.html) iu Ignored on Contig update
## [Ruler](api/Ruler.html) Action | Viewer Method | Ruler Method | Event ----------------------------------------|----------------------------|---------------------|----- [Update](#updating-records) | - | [update()](api/Ruler.html#update) | ruler-update [Read](#reading-records) | [ruler](api/Viewer.html#ruler) | - | - Attribute | Type | Description ---------------------------------|-----------|------------ [font](api/Ruler.html#font) | String | A string describing the font [Default: 'sans-serif, plain, 10']. See Font for details. [color](api/Ruler.html#color) | String | A string describing the color [Default: 'black']. See Color for details. [visible](api/CGObject.html#visible) | Boolean | Rulers are visible [Default: true] [meta](api/CGObject.html#meta) | Object | [Meta data](tutorials/details-meta-data.html) for ruler
## [Divider](api/Divider.html) Action | Viewer Method | Divider Method | Event ----------------------------------------|----------------------------------|---------------------|----- [Update](#updating-records) | - | [update()](api/Divider.html#update) | divider-update [Read](#reading-records) | [dividers](api/Viewer.html#dividers) | - | - Attribute | Type | Description ---------------------------------|-----------|------------ [color](api/Divider.html#color) | String | A string describing the color [Default: 'black']. See Color for details. [thickness](api/Divider.html#thickness) | Number | Thickness of divider [Default: 1] [spacing](api/Divider.html#spacing) | Number | Spacing between divider and track/slot content [Default: 1] [mirror](api/Divider.html#mirror)ic | Boolean | If true, the other dividers will use the same settings as this divider. [visible](api/CGObject.html#visible) | Boolean | Dividers are visible [Default: true] [meta](api/CGObject.html#meta) | Object | [Meta data](tutorials/details-meta-data.html) for divider ic Ignored on Record creation