# dash_bio_sequenceviewer Examples and Reference

see SequenceViewer in action.

## SequenceViewer

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

110

####

1
41
81
MALWMRLLPL LALLALWGPD PAAAFVNQHL CGSHLVEALY
LVCGERGFFY TPKTRREAED LQVGQVELGG GPGAGSLQPL
ALEGSLQKRG IVEQCCTSIC SLYQLENYCN
There is no mouse selection.

    using Dash, DashBio, DashBioUtils
    using StringEncodings, HTTP, JSON

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

    app = dash(external_stylesheets=external_stylesheets)

    fasta_str  ="https://git.io/sequence_viewer_P01308.fasta"

    seq  = DashBioUtils.read_fasta(fasta_str , is_datafile = false)[1]["sequence"]

    app.layout =  html_div([
        dashbio_sequenceviewer(
            id="default-sequence-viewer",
            sequence=seq
        ),
        html_div(id="default-sequence-viewer-output")
    ])

    callback!(app,
        Output("default-sequence-viewer-output", "children"),
        [Input("default-sequence-viewer", "mouseSelection")]
    ) do value
        if value isa Nothing || length(value) == 0
            return "There is no mouse selection."
        end

        return "The mouse selection is $(value.selection)."
    end

    run_server(app, "0.0.0.0", debug=true)

## Customization

### Line Length And Line Numbers

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

110

####

MALWMRLLPL LALLALWGPD
PAAAFVNQHL CGSHLVEALY
LVCGERGFFY TPKTRREAED
LQVGQVELGG GPGAGSLQPL
ALEGSLQKRG IVEQCCTSIC
SLYQLENYCN

    using Dash, DashBio, DashBioUtils
    using StringEncodings, HTTP, JSON

    app = dash()

    fasta_str  ="https://git.io/sequence_viewer_P01308.fasta"

    seq  = DashBioUtils.read_fasta(fasta_str , is_datafile = false)[1]["sequence"]

    app.layout =  dashbio_sequenceviewer(
        id="sequence-viewer-lines",
        sequence=seq,
        showLineNumbers=false,
        charsPerLine=20
    )

    run_server(app, "0.0.0.0", debug=true)

### Subsequence Selection

Highlight a part of the sequence with a defined color.

110

####

1
41
81
MALWMRLLPL LALLALWGPD PAAAFVNQHL CGSHLVEALY
LVCGERGFFY TPKTRREAED LQVGQVELGG GPGAGSLQPL
ALEGSLQKRG IVEQCCTSIC SLYQLENYCN

    using Dash, DashBio, DashBioUtils
    using StringEncodings, HTTP, JSON

    app = dash()

    fasta_str  ="https://git.io/sequence_viewer_P01308.fasta"

    seq  = DashBioUtils.read_fasta(fasta_str , is_datafile = false)[1]["sequence"]

    app.layout =  dashbio_sequenceviewer(
        id="sequence-viewer-selection",
        sequence=seq,
        selection=[10, 20, "green"]
    )

    run_server(app, "0.0.0.0", debug=true)

### Toolbar

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

110

####

Char per line
1
41
81
MALWMRLLPL LALLALWGPD PAAAFVNQHL CGSHLVEALY
LVCGERGFFY TPKTRREAED LQVGQVELGG GPGAGSLQPL
ALEGSLQKRG IVEQCCTSIC SLYQLENYCN

    using Dash, DashBio, DashBioUtils
    using StringEncodings, HTTP, JSON

    app = dash()

    fasta_str  ="https://git.io/sequence_viewer_P01308.fasta"

    seq  = DashBioUtils.read_fasta(fasta_str , is_datafile = false)[1]["sequence"]

    app.layout =  dashbio_sequenceviewer(
        id="sequence-viewer-toolbar",
        sequence=seq,
        toolbar=true
    )

    run_server(app, "0.0.0.0", debug=true)

### Title And Badge

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

#### Insulin

1
41
81
MALWMRLLPL LALLALWGPD PAAAFVNQHL CGSHLVEALY
LVCGERGFFY TPKTRREAED LQVGQVELGG GPGAGSLQPL
ALEGSLQKRG IVEQCCTSIC SLYQLENYCN

    using Dash, DashBio, DashBioUtils
    using StringEncodings, HTTP, JSON

    app = dash()

    fasta_str  ="https://git.io/sequence_viewer_P01308.fasta"

    seq  = DashBioUtils.read_fasta(fasta_str , is_datafile = false)[1]["sequence"]

    app.layout =  dashbio_sequenceviewer(
        id="sequence-viewer-titlebadge",
        sequence=seq,
        title="Insulin",
        badge=false
    )

    run_server(app, "0.0.0.0", debug=true)

## SequenceViewer Properties

> Our recommended IDE for writing Dash apps is Dash Enterprise's Data Science Workspaces, which has typeahead support for Dash Component Properties. Find out if your company is using Dash Enterprise.

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

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

`showLineNumbers` (Bool; default `true`): The option of whether or not to display line numbers.

`wrapAminoAcids` (Bool; 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.

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

`toolbar` (Bool; 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.

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

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

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

`badge` (Bool; 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.

`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.

`coverage` (Array of Dicts; 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` is an Array of Dicts with keys:

- `bgcolor` (String; optional)

- `color` (String; optional)

- `end` (Real; optional)

- `onclick` (optional)

- `start` (Real; optional)

- `tooltip` (String; optional)

- `underscore` (Bool; optional)

`legend` (Array of Dicts; optional): A legend corresponding to the color codes above (optionally displayed).

`legend` is an Array of Dicts with keys:

- `color` (String; optional)

- `name` (String; optional)

- `underscore` (Bool; optional)

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

`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` is a Dict with keys:

- `end` (Real; optional)

- `selection` (String; optional)

- `start` (Real; optional)

`subpartSelected` (Array of Dicts; optional): A list of the subparts selected using the "search" function or the "selection" property.

`subpartSelected` is an Array of Dicts with keys:

- `end` (Real; optional)

- `sequence` (String; optional)

- `start` (Real; optional)

`loading_state` (Dict; optional): Object that holds the loading state object coming from dash-renderer.

`loading_state` is a Dict with keys:

- `component_name` (String; optional): Holds the name of the component that is loading.

- `is_loading` (Bool; optional): Determines if the component is loading or not.

- `prop_name` (String; optional): Holds which property is loading.

## Example Data

- https://github.com/plotly/datasets/blob/master/Dash_Bio/Genetic/sequence_viewer_P01308.fasta
- Severe acute respiratory syndrome coronavirus 2 isolate Wuhan-Hu-1, complete genome
- Human Genome Resources at NCBI