nightingale-navigation
This custom element can be used to zoom and navigate along the sequence displayed in Nightingale. When a user interacts with the component, a change event is triggered which uses to change display-start and display-end values on relevant custom elements.
Usage
<nightingale-navigation
length="456"
display-start="143"
display-end="400"
highlight="23:45"
rulerstart="1"
/>API Reference
Attributes
ruler-start: number (default 1)
The scale of coordinates will start from this value.
ruler-padding: number (default 10)
a horizontal padding to add on the ruler, to give the component a zooming efect even when the whole sequence is selected
scale-factor: number (default 10)
The quanity use to scale in or out when using the methods zoomIn or zoomOut
show-highlight: boolean (default false)
A shade representing a highlighted area can be added over the component.
Methods
locate(start: number, end: number)
Locates the selected area of the navigation component triggering the events related to it.
zoomIn()
Reduces the selected area of the navigation component by the quantity specified in the scale-factor attribute.
zoomOut()
Extends the selected area of the navigation component by the quantity specified in the scale-factor attribute.
Other attributes and parameters
This component inherits from NightingaleElement.
The component implements the following mixins: withManager, withResizable, withMargin, withPosition, withDimensions, withHighlight