dash_bioAlignmentChart Examples and Reference

see AlignmentChart in action.

AlignmentChart

An example of a default AlignmentChart component without any extra properties

17131925313743495561P53_BARBU 00P53_CANFA 01P53_BOSIN 02P53_BOVIN 03P53_CHICK 04P53_CAVPO 05P53_CHLAE 06P53_CRIGR 07P53_DANRE 08P53_DELLE 09P53_EQUAS 10P53_FELCA 11P53_HORSE 12P53_HUMAN 13P53_ICTPU 14P53_MACFA 15P53_MACFU 16P53_MACMU 17P53_MARMO 18P53_MESAU 19P53_MOUSE 20P53_ONCMY 21P53_ORYLA 22P53_PLAFE 23P53_PIG 24P53_RABIT 25P53_RAT 26P53_SHEEP 27P53_TETMU 28P53_SPEBE 29P53_TUPBE 30P53_XENLA 31P53_XIPMA 32P53_XIPHE 33Consensus 3400.20.40.60.800.20.40.60.8
ConservationGap
No data.
library(dashBio)
library(readr)

app <- Dash$new()

data = read_file("https://git.io/alignment_viewer_p53.fasta")

app$layout(htmlDiv(list(
    dashbioAlignmentChart(
        id = "my-default-alignment-viewer",
        data = data
    ),
    htmlDiv(id = "default-alignment-viewer-output")
)))

app$callback(
    output(id = "default-alignment-viewer-output", property = "children"),
    params = list(
        input(id = "my-default-alignment-viewer", property = "eventDatum")
    ),
    update_output <- function(value) {
        if (!exists("value")) {
            return("No data.")
        }
        else {
            return(str(value))
        }
    }
)

app$run_server()

Customization

Color Scales

Change the colors used for the heatmap.

17131925313743495561P53_BARBU 00P53_CANFA 01P53_BOSIN 02P53_BOVIN 03P53_CHICK 04P53_CAVPO 05P53_CHLAE 06P53_CRIGR 07P53_DANRE 08P53_DELLE 09P53_EQUAS 10P53_FELCA 11P53_HORSE 12P53_HUMAN 13P53_ICTPU 14P53_MACFA 15P53_MACFU 16P53_MACMU 17P53_MARMO 18P53_MESAU 19P53_MOUSE 20P53_ONCMY 21P53_ORYLA 22P53_PLAFE 23P53_PIG 24P53_RABIT 25P53_RAT 26P53_SHEEP 27P53_TETMU 28P53_SPEBE 29P53_TUPBE 30P53_XENLA 31P53_XIPMA 32P53_XIPHE 33Consensus 3400.20.40.60.800.20.40.60.8
ConservationGap
library(dashBio)
library(readr)

app <- Dash$new()

data = read_file("https://git.io/alignment_viewer_p53.fasta")

app$layout(htmlDiv(list(
    dashbioAlignmentChart(
        data = data,
        colorscale = "hydro",
        conservationcolorscale = "blackbody"
    )
)))

app$run_server()

Show/Hide Barplots

Enable or disable the secondary bar plots for gaps and conservation.

17131925313743495561P53_BARBU 00P53_CANFA 01P53_BOSIN 02P53_BOVIN 03P53_CHICK 04P53_CAVPO 05P53_CHLAE 06P53_CRIGR 07P53_DANRE 08P53_DELLE 09P53_EQUAS 10P53_FELCA 11P53_HORSE 12P53_HUMAN 13P53_ICTPU 14P53_MACFA 15P53_MACFU 16P53_MACMU 17P53_MARMO 18P53_MESAU 19P53_MOUSE 20P53_ONCMY 21P53_ORYLA 22P53_PLAFE 23P53_PIG 24P53_RABIT 25P53_RAT 26P53_SHEEP 27P53_TETMU 28P53_SPEBE 29P53_TUPBE 30P53_XENLA 31P53_XIPMA 32P53_XIPHE 33Consensus 34
library(dashBio)
library(readr)

app <- Dash$new()

data = read_file("https://git.io/alignment_viewer_p53.fasta")

app$layout(htmlDiv(list(
    dashbioAlignmentChart(
        data = data,
        showconservation = FALSE,
        showgap = FALSE,
        colorscale = "purine"
    )
)))

app$run_server()

Tile Size

Change the height and/or width of the tiles.

171319253137P53_BARBU 00P53_CANFA 01P53_BOSIN 02P53_BOVIN 03P53_CHICK 04P53_CAVPO 05P53_CHLAE 06P53_CRIGR 07P53_DANRE 08P53_DELLE 09P53_EQUAS 10P53_FELCA 11P53_HORSE 12P53_HUMAN 13P53_ICTPU 14P53_MACFA 15P53_MACFU 16P53_MACMU 17P53_MARMO 18P53_MESAU 19P53_MOUSE 20P53_ONCMY 21P53_ORYLA 22P53_PLAFE 23P53_PIG 24P53_RABIT 25P53_RAT 26P53_SHEEP 27P53_TETMU 28P53_SPEBE 29P53_TUPBE 30P53_XENLA 31P53_XIPMA 32P53_XIPHE 33Consensus 3400.20.40.60.800.20.40.60.8
ConservationGap
library(dashBio)
library(readr)

app <- Dash$new()

data = read_file("https://git.io/alignment_viewer_p53.fasta")

app$layout(htmlDiv(list(
    dashbioAlignmentChart(
        data = data,
        tilewidth = 80,
        tileheight = 50
    )
)))

app$run_server()

Consensus Sequence

Toggle the display of the consensus sequence at the bottom of the heatmap.

17131925313743495561P53_BARBU 00P53_CANFA 01P53_BOSIN 02P53_BOVIN 03P53_CHICK 04P53_CAVPO 05P53_CHLAE 06P53_CRIGR 07P53_DANRE 08P53_DELLE 09P53_EQUAS 10P53_FELCA 11P53_HORSE 12P53_HUMAN 13P53_ICTPU 14P53_MACFA 15P53_MACFU 16P53_MACMU 17P53_MARMO 18P53_MESAU 19P53_MOUSE 20P53_ONCMY 21P53_ORYLA 22P53_PLAFE 23P53_PIG 24P53_RABIT 25P53_RAT 26P53_SHEEP 27P53_TETMU 28P53_SPEBE 29P53_TUPBE 30P53_XENLA 31P53_XIPMA 32P53_XIPHE 3300.20.40.60.800.20.40.60.8
ConservationGap
library(dashBio)
library(readr)

app <- Dash$new()

data = read_file("https://git.io/alignment_viewer_p53.fasta")

app$layout(htmlDiv(list(
    dashbioAlignmentChart(
        data = data,
        showconsensus = FALSE
    )
)))

app$run_server()

Event

Event Datum

Show data on clicking or hovering the Alignment Chart.

17131925313743495561P53_BARBU 00P53_CANFA 01P53_BOSIN 02P53_BOVIN 03P53_CHICK 04P53_CAVPO 05P53_CHLAE 06P53_CRIGR 07P53_DANRE 08P53_DELLE 09P53_EQUAS 10P53_FELCA 11P53_HORSE 12P53_HUMAN 13P53_ICTPU 14P53_MACFA 15P53_MACFU 16P53_MACMU 17P53_MARMO 18P53_MESAU 19P53_MOUSE 20P53_ONCMY 21P53_ORYLA 22P53_PLAFE 23P53_PIG 24P53_RABIT 25P53_RAT 26P53_SHEEP 27P53_TETMU 28P53_SPEBE 29P53_TUPBE 30P53_XENLA 31P53_XIPMA 32P53_XIPHE 33Consensus 3400.20.40.60.800.20.40.60.8
ConservationGap

Hover or click on data to see it here.

No data.
library(manhattanly)
library(dashBio)
library(readr)
library(dash)
library(dashHtmlComponents)

app <- Dash$new()

data = read_file("https://git.io/alignment_viewer_p53.fasta")

app$layout(htmlDiv(list(
  dashbioAlignmentChart(
    id = "alignment-viewer-eventDatum-usage",
    data = data
  ),
  htmlP("Hover or click on data to see it in console."),
  htmlDiv(id = "alignment-viewer-eventDatum-usage-output")
)))

app$callback(
  output(id = "alignment-viewer-eventDatum-usage-output", property = "children"),
  params = list(
    input(id = "alignment-viewer-eventDatum-usage", property = "eventDatum")
  ),
  update_output <- function(value) {
    if (!exists("value")) {
      return("No data.")
    }
    else {
      return(str(value))
    }
  }
)

app$run_server()

AlignmentChart 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 (character; optional): The ID of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.

eventDatum (character; optional): A Dash prop that returns data on clicking, hovering or resizing the viewer.

data (character; optional): Input data, either in FASTA or Clustal format.

extension (character; default 'fasta'): Format type of the input data, either in FASTA or Clustal.

colorscale (character | named list; default 'clustal2'): Colorscale in 'buried', 'cinema', 'clustal', 'clustal2', 'helix', 'hydrophobicity' 'lesk', 'mae', 'nucleotide', 'purine', 'strand', 'taylor', 'turn', 'zappo', or your own colorscale as a {'nucleotide': COLOR} dict. Note that this is NOT a standard plotly colorscale.

opacity (numeric | character; optional): Opacity of the main plot as a value between 0 and 1.

textcolor (character; optional): Color of the nucleotide labels, in common name, hex, rgb or rgba format. If left blank, handled by the colorscale automatically.

textsize (numeric | character; default 10): Size of the nucleotide labels, as a number.

showlabel (logical; default TRUE): Toggles displaying sequence labels at left of alignment.

showid (logical; default TRUE): Toggles displaying sequence IDs at left of alignment.

showconservation (logical; default TRUE): Enables the display of conservation secondary barplot where the most conserved nucleotides or amino acids get greater bars.

conservationcolor (character; optional): Color of the conservation secondary barplot, in common name, hex, rgb or rgba format.

conservationcolorscale (character | unnamed list; default 'Viridis'): Colorscale of the conservation barplot, in Plotly colorscales (e.g. 'Viridis') or as custom Plotly colorscale under a list format. Note that this conservationcolorscale argument does NOT follow the same format as the colorscale argument.

conservationopacity (numeric | character; optional): Opacity of the conservation secondary barplot as a value between 0 and 1.

conservationmethod (a value equal to: 'conservation' or 'entropy'; default 'entropy'): Whether to use most conserved ratio (MLE) 'conservation' or normalized entropy 'entropy' to determine conservation, which is a value between 0 and 1 where 1 is most conserved.

correctgap (logical; default TRUE): Whether to normalize the conservation barchart By multiplying it elementwise with the gap barchart, as to lower the conservation values across sequences regions with many gaps.

showgap (logical; default TRUE): Enables the display of gap secondary barplot where the sequence regions with the fewest gaps get the greatest bars.

gapcolor (character; default 'grey'): Color of the gap secondary barplot, in common name, hex, rgb or rgba format.

gapcolorscale (character | unnamed list; optional): Colorscale of the gap barplot, in Plotly colorscales (e.g. 'Viridis') or as custom Plotly colorscale under a list format. Note that this conservationcolorscale argument does NOT follow the same format as the colorscale argument.

gapopacity (numeric | character; optional): Opacity of the gap secondary barplot as a value between 0 and 1.

groupbars (logical; default FALSE): If both conservation and gap are enabled, toggles whether to group bars or to stack them as separate subplots. No effect if not both gap and conservation are shown.

showconsensus (logical; default TRUE): Displays toggling the consensus sequence, where each nucleotide in the consensus sequence is the argmax of its distribution at a set nucleotide.

tilewidth (numeric; default 16): Sets how many pixels each nucleotide/amino acid on the Alignment Chart takes up horizontally. The total number of tiles (numtiles) seen horizontally is automatically determined by rounding the Viewer width divided by the tile width. the Viewwer width divided by the tile witdth.

tileheight (numeric; default 16): Sets how many pixels each nucleotide/amino acid on the Alignment Chart takes up vertically. If enabled, set height dynamically.

overview (a value equal to: 'heatmap', 'slider' or 'none'; default 'heatmap'): Toggles whether the overview should be a heatmap, a slider, or none.

numtiles (numeric; optional): Sets how many tiles to display across horitontally. If enabled, overrides tilewidth and sets the amount of tiles directly based off that value.

scrollskip (numeric; default 10): If overview is set to 'scroll', determines how many tiles to skip with each slider movement. Has no effect if scroll is not enabled (such as with overview or none).

tickstart (numeric | character; default 1): Determines where to start annotating the first tile. If let blank will be automatically determined by Plotly. Equivalent to Plotly's tick0 property. Does not function if overview mode 'slider' is applied. (Current bug).

ticksteps (numeric | character; default 6): Determines at what interval to keep annotating the tiles. If left blank will be automatially determined by Plotly. Equivalent to Plotly's dtick property. Does not function if overview mode 'slider' is applied. (Current bug).

width (numeric | character; optional): Width of the Viewer. Property takes precedence over tileswidth and numtiles if either of them is set.

height (numeric | character; optional): Width of the Viewer. Property takes precedence over tilesheight if both are set.

sequenceIds (unnamed list; optional): Sequences ids to display.

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

loading_state is a named list with keys:

  • component_name (character; optional): Holds the name of the component that is loading.

  • is_loading (logical; optional): Determines if the component is loading or not.

  • prop_name (character; optional): Holds which property is loading.

Example Data