SequenceViewer Examples and Reference


Default SequenceViewer

An example of a default SequenceViewer component without any extra properties.

import six.moves.urllib.request as urlreq
from six import PY3
import dash
import dash_bio as dashbio
from dash_bio_utils import protein_reader
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

fasta_str = urlreq.urlopen(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
    'sequence_viewer_P01308.fasta'
).read()

if PY3:
    fasta_str = fasta_str.decode('utf-8')

seq = protein_reader.read_fasta(datapath_or_datastring=fasta_str, is_datafile=False)[0]['sequence']

app.layout = html.Div([
    dashbio.SequenceViewer(
        id='my-sequence-viewer',
        sequence=seq
    ),
    html.Div(id='sequence-viewer-output')
])


@app.callback(
    dash.dependencies.Output('sequence-viewer-output', 'children'),
    [dash.dependencies.Input('my-sequence-viewer', 'mouseSelection')]
)
def update_output(value):
    if value is None or len(value) == 0:
        return 'There is no mouse selection.'
    return 'The mouse selection is {}.'.format(value['selection'])


if __name__ == '__main__':
    app.run_server(debug=True)

Line Length And Line Numbers

Change the characters per line, and toggle the display of line numbers.

import six.moves.urllib.request as urlreq
from six import PY3
import dash_bio as dashbio
from dash_bio_utils import protein_reader

fasta_str = urlreq.urlopen(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
    'sequence_viewer_P01308.fasta'
).read()

if PY3:
    fasta_str = fasta_str.decode('utf-8')

seq = protein_reader.read_fasta(datapath_or_datastring=fasta_str, is_datafile=False)[0]['sequence']

dashbio.SequenceViewer(
    id='sequence-viewer-lines',
    sequence=seq,
    showLineNumbers=False,
    charsPerLine=20
)  

Subsequence Selection

Highlight a part of the sequence with a defined color.

import six.moves.urllib.request as urlreq
from six import PY3
import dash_bio as dashbio
from dash_bio_utils import protein_reader

fasta_str = urlreq.urlopen(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
    'sequence_viewer_P01308.fasta'
).read()

if PY3:
    fasta_str = fasta_str.decode('utf-8')

seq = protein_reader.read_fasta(datapath_or_datastring=fasta_str, is_datafile=False)[0]['sequence']

dashbio.SequenceViewer(
    id='sequence-viewer-selection',
    sequence=seq,
    selection=[10, 20, 'green']
)  

Toolbar

Display a toolbar to change the line length from the component itself.

import six.moves.urllib.request as urlreq
from six import PY3
import dash_bio as dashbio
from dash_bio_utils import protein_reader

fasta_str = urlreq.urlopen(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
    'sequence_viewer_P01308.fasta'
).read()

if PY3:
    fasta_str = fasta_str.decode('utf-8')

seq = protein_reader.read_fasta(datapath_or_datastring=fasta_str, is_datafile=False)[0]['sequence']

dashbio.SequenceViewer(
    id='sequence-viewer-toolbar',
    sequence=seq,
    toolbar=True
)  

Title And Badge

Show a title or a badge with the nucleotide or amino acid count of the protein.

import six.moves.urllib.request as urlreq
from six import PY3
import dash_bio as dashbio
from dash_bio_utils import protein_reader

fasta_str = urlreq.urlopen(
    'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' +
    'sequence_viewer_P01308.fasta'
).read()

if PY3:
    fasta_str = fasta_str.decode('utf-8')

seq = protein_reader.read_fasta(datapath_or_datastring=fasta_str, is_datafile=False)[0]['sequence']

dashbio.SequenceViewer(
    id='sequence-viewer-titlebadge',
    sequence=seq,
    title='Insulin',
    badge=False
)  

Access this documentation in your Python terminal with:
```python

help(dash_bio.SequenceViewer)
```

id (string; optional): The ID used to identify this component in Dash callbacks.

badge (boolean; default True): The option of whether or not to display a badge showing the amino acid count at the top of the component beside the title.

charsPerLine (number; default 40): The number of amino acids that will display per line.

coverage (dict; optional): A coverage of the entire sequence; each section of the sequence can have its own text color, background color, tooltip (on hover), and an optional underscore. The props start and end represent the beginning and terminating indices of the section in question. Cannot be used at the same time as selection. coverage has the following type: list of dicts containing keys ‘start’, ‘end’, ‘color’, ‘bgcolor’, ‘tooltip’, ‘underscore’, ‘onclick’. Those keys have the following types:

  • start (number; optional)
  • end (number; optional)
  • color (string; optional)
  • bgcolor (string; optional)
  • tooltip (string; optional)
  • underscore (boolean; optional)
  • onclick (optional)

coverageClicked (number; optional): Contains the index of the section that was clicked last in the coverage list supplied.

legend (dict; optional): A legend corresponding to the color codes above (optionally displayed). legend has the following type: list of dicts containing keys ‘name’, ‘color’, ‘underscore’. Those keys have the following types:

  • name (string; optional)
  • color (string; optional)
  • underscore (boolean; optional)

mouseSelection (dict; optional): Contains information about the subsequence selected by the mouse. Start and end refer to the initial and final indices, respectively, of the subsequence, and “selection” contains the string that is selected. mouseSelection has the following type: dict containing keys ‘start’, ‘end’, ‘selection’. Those keys have the following types:

  • start (number; optional)
  • end (number; optional)
  • selection (string; optional)

sequence (string; default '-'): The amino acid sequence that will be displayed.

showLineNumbers (boolean; default True): The option of whether or not to display line numbers.

search (boolean; default True): The option of whether or not to include a search bar in the header. This supports regex.

sequenceMaxHeight (string; default '400px'): The maximum height of the sequence.

selection (optional): A highlighted section of the sequence; the color of the highlight can also be defined. Takes a list of format [min, max, color] where min is a number that represents the starting index of the selection, max is a number that represents the stopping index of the selection, and color is a string that defines the highlight color. Cannot be used at the same time as coverage.

subpartSelected (dict; optional): A list of the subparts selected using the “search” function or the “selection” property. subpartSelected has the following type: list of dicts containing keys ‘start’, ‘end’, ‘sequence’. Those keys have the following types:

  • start (number; optional)
  • end (number; optional)
  • sequence (string; optional)

toolbar (boolean; default False): The option of whether or not to display a toolbar at the top that allows the user to choose the number of letters per line.

title (string; default ''): A string that displays at the top of the component.

wrapAminoAcids (boolean; default True): The option of whether or not to display the list of amino acids as broken up into separate lines of a fixed length set by charsPerLine.