API Reference

Overview

In AnguarJS, custom HTML tags are called "directives". Each directive encapsulates a set of SVG elements that work together to provide a visualization for a plasmid. Because of this, you generally don't need to know the details of SVG programming apart from understanding how SVG styling works. The general hierarchy of the directives are as follows (directives can be repeated as needed):

<plasmid>
    <plasmidtrack>
        <tracklabel></tracklabel>
        <trackscale></trackscale>
        <trackmarker>
            <markerlabel></markerlabel>
        </trackmarker>
    </plasmidtrack>
    <svgelement></svgelement>  (Can be used anywhere as long as its within the plasmid element)
</plasmid>
<plasmidapi></plasmidapi>

<plasmid>

A plasmid is the parent element and will generate the svg container within which all of the other graphics are drawn. The plasmid can be given a sequence or an explicit sequencelength to indicate how large the plasmid is. Other directives use this length in various calculations.

Properties

Parameter	Type	Details
plasmidheight	Numeric	Height (in pixels) of the box that surrounds the plasmid
plasmidwidth	Numeric	Width (in pixels) of the box that surrounds the plasmid
sequencelength	Numeric	Size, in nucleotides, of the plasmid represented. If the `sequence` attribute is specified, `sequencelength` will not be used. Rather, the length of the sequence will be calcaulated from the provided sequence.
sequence	Alpha	Series of nucleotides (ex. 'ATTACGATG') that represents the plasmid to be drawn

Example

<plasmid plasmidheight="300" plasmidwidth="300" sequencelength="1000">

Functions

Function/Property Name	Parameters
center Returns {x,y} coordinates of the center of the plasmid.	None
dimensions Returns {height,width} of the plasmid.	None
tracks Returns an array that represents all of the tracks declared in this plasmid	None

<plasmidtrack>

This element draws the plasmid's circular backbone within which a number of different features can be drawn. The plasmidtrack element is represented by an SVG path for a torus.

Properties

Parameter	Type	Details
radius	Numeric	The radius (in pixels) of the track. The radius is inherited by any component that is declared within this `plasmidtrack`. Defaults to 100 if nothing provided.
width	Numeric	The thickness (in pixels) of the plasmid ring. Defaults to 25 if nothing provided.

Example

<plasmidtrack radius="150" width="35">

Functions

Function/Property Name	Parameters
center Returns {x,y} coordinates of the center of the track.	None
markergroup(groupname) Returns an array that represents markers that have been assigned the given groupName.	groupname Alpha Required groupname assigned to a set of `trackmarker` elements in this track
getPosition(position, positionOption, radiusAdjust) Returns the {x,y} coordinates of the provided position on the track.	position Numeric Required Position on the track in relation to the length of the plasmid sequence (or sequencelength if set explicitly. positionOption Numeric Can be either (0 - middle of the track, 1 - inside of the track, 2 - outside of the track) radiusAdjust Numeric Number of pixels (positive or negative) to adjust. Can be used to determine locations close to or away from the track
plasmid Returns a reference to the parent plasmid element	None
markers Returns an array that represents all of the markers on this track	None
scales Returns an array that represents all of the scales on this track	None
labels Returns an array that represents all of the labels on this track	None

<tracklabel>

Draws a label in the middle of a track.

Parameter	Type	Details
text	Alpha	Text of the label to draw
vadjust	Numeric	Vertical offset of the label from the center of the track. A positive number means that the label will be drawn further down, while a negative number will make the label be drawn further up
hadjust	Numeric	Horizontal offset of the label from the center of the track. A positive number means that the label will be drawn closer to the right, while a negative number means the label will be be drawn closer to the left

Example

<tracklabel text="plEX-112">

Functions

Function/Property Name	Parameters
track Returns a reference to the parent track element	None

<trackscale>

This element provides labels and tickmarks for the track. It generates an SVG path element representing all the tick marks to be drawn as well as an optional set of SVG text elements for the labels.

Properties

Parameter	Type	Details
interval	Numeric	How often a tick mark should be placed. The interval is used along with the plasmid's sequence length to determine how many tick marks to show.
ticksize	Numeric	Vertical size of the tick marks. If negative, the ticks grow inward. The width of the tickmarks can be styled using the CSS `stroke-width` property.
direction	in or out	Determine which side of the track the ticks and labels should appear
vadjust	Numeric	Offset in pixels from the track. A positive number means that the ticks will be drawn further away from the track. A negative number will allow ticks to be plced closer to the center of the track.
showlabels	1 or 0	Determines if labels will be shown or not.
labelvadjust	Numeric	Distance of the labels to their respective tick marks.
labelclass	Alpha	Provide a class name to style the labels
labelstyle	Alpha	Indicate the style of the labels directly using this property. See example below.

Example

<trackscale interval="20" vadjust="5" direction="in" showlabels="1" labelstyle="fill:#fc0">

Functions

Function/Property Name	Parameters
track Returns a reference to the parent track element	None

<trackmarker>

The primary mechanism to indicate special features on the track is provided by this element using the properties below. A trackmarker will generate an SVG path that draws an arc on the track. It has optional attributes to indicate arrow ends on either side of the marker. In addition, if no end property is provided, the marker will become a line rather than a range. This is important because the styling of a range will use the fill CSS property, however, a marker line will be styled using the stroke CSS property.

Properties

Parameter	Type	Details
start	Numeric Required	Starting position of the marker in relation to the plasmid's sequence
end	Numeric	Ending position of the marker in relation to the plasmid's sequence
vadjust	Numeric	Offset in pixels from the track. A positive number means that the marker will be drawn further away from the track, while a negative number will make the marker be drawn closer to the center of the track
wadjust	Numeric	Offset width of the marker in relation the track's width. A negative number will make the marker thinner than the track, while a positive number will make it thicker. A value of 0 means the marker will be the same width of the track
markergroup	Alpha	Label a group of markers by giving them a unique name using this property
arrowstartlength	Numeric	The length, width, and angle of a the starting arrow head can be specified here
arrowstartwidth	Numeric	The length, width, and angle of a the starting arrow head can be specified here
arrowstartangle	Numeric	The length, width, and angle of a the starting arrow head can be specified here
arrowendlength	Numeric	The length, width, and angle of a the ending arrow head can be specified here
arrowendwidth	Numeric	The length, width, and angle of a the ending arrow head can be specified here
arrowendangle	Numeric	The length, width, and angle of a the ending arrow head can be specified here
markerclick	Alpha	Used to indicate a call-back when a marker is clicked. The call-back should be defined on the controller scope that contains the plasmid. The signature of the callback function (in this case 'handler') should look like `markerclick='handler($event, $marker)'` $event is a reference to a raw javascript event $marker is a reference to the marker that was clicked

Example

<trackmarker start="20" end="55" markerclick="clicked($event,$marker)">

Functions

Function/Property Name	Parameters
sequence Returns the partial sequence designated by the marker's start and end properties	None
getPosition(hAdjust, vAdjust, hAlign, vAlign) Returns the marker's {x, y} position offset by some optional parameters. If no parameters are provided, the function returns {x,y} locations for 9 positions of the marker outer.begin outer.middle outer.end middle.begin middle.middle middle.end inner.begin inner.middle inner.end	hAdjust Numeric Return the marker's position, adjusted horizontally by the value specified here. Can be positive or negative vAdjust Numeric Return the marker's position, adjusted vertically by the value specified here. Can be positive or negative hAlign midde or start or end Return the horizontal side of the marker indicated by this property vAlign midde or inner or outer Return the vertical side of the marker indicated by this property
track Returns a reference to the parent track element	None
labels Returns an array that represents all of the labels attached to this marker	None

<markerlabel>

A marker can optionally have a number of markerlabel elements. These elements will inherit positional attributes of their parent trackmarker elements which can be adjusted using the properties below.

Properties

Parameter	Type	Details
text	Alpha	Text of the label
vadjust	Numeric	Vertical offset of the label from the marker. A positive number means that the label will be drawn further away from the marker, while a negative number will make the label be drawn closer to the center of the track
hadjust	Numeric	Horizontal offset of the label from the marker. A positive number means that the label will be drawn closer to the ending position of the marker, while a negative number means the label will be be drawn closer to the starting position of the marker
valign	midde inner outer	Vertical alignment of the label with the marker
halign	midde inner outer	Horizontal alignment of the label with the marker
type	path	Labels can either be drawn normally, or can follow the circular path of the marker.
showline	1 or 0	Determines if line will be drawn from the label to the marker. By default, the line connects the middle of the label with the middle of the marker
linestyle	Alpha	Style of the line going from the label to the marker
lineclass	Alpha	Class name of the line going from the label to the marker
linevadjust	Numeric	Vertical adjustment of the line to the label
labelclick	Alpha	Used to indicate a call-back when a label is clicked. The call-back should be defined on the controller scope that contains the plasmid. The signature of the callback function (in this case 'handler') should look like `labelclick='handler($event, $label)'` $event is a reference to a raw javascript event $label is a reference to the label that was clicked If a click handler is not defined for this label, the event will bubble up to the containing marker's click event.

Example

<markerlabel text="Sample" type="path" style="fill:#c00">

Functions

Function/Property Name	Parameters
marker Returns a reference to the parent marker element	None

<svgelement>

This element provides a way to insert any arbitrary SVG element in the plasmid. This is most useful for adding SVG anchor <a> links, images or any other SVG element (including lines, circles, etc). This element can encapsulate other plasmid elements where required.

Parameter	Type	Details
type	Alpha	SVG element to draw
(variable)	Alpha	Indicate specific attibutes for whichever SVG element you wish to draw

Example

<svgelement type="a" xlink:href="http://angularplasmid.vixis.com">
    <markerlabel>...</markerlabel>
</svgelement>

Functions

None

<plasmidapi>

This element provides access to the AngularPlasmid api that will allow your page to interact and get information from the rendered plasmids (For instance, to position other HTML elements on the plasmid).

Parameter	Type	Details
name	Alpha	Name of the variable that will be available in the controller scope to provide access to the plasmids drawn

Example

<plasmidapi name="api">

Functions

Function/Property Name	Parameters
plasmids Returns an array that contains all of the plasmids drawn within the scope of the controller.	None
plasmid(id) Returns a specific plasmid if it was identified by an `id` value when it was declared (Ex. <plasmid id="p1" >)	id Alpha id of the plasmid to return. The `id` needs to be an attribute of a declared plasmid

Directives

API Reference

Overview

<plasmid>

Properties

Example

Functions

<plasmidtrack>

Properties

Example

Functions

<tracklabel>

Example

Functions

<trackscale>

Properties

Example

Functions

<trackmarker>

Properties

Example

Functions

<markerlabel>

Properties

Example

Functions

<svgelement>

Example

Functions

<plasmidapi>

Example

Functions