dash_bio_needleplot Examples and Reference

see NeedlePlot in action.

NeedlePlot

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

Show or hide range slider
Show
2004006008001000−0.500.511.522.533.542004006008001000
HelixBeta strandNatural variantTurnSequence conflictDomainPI3K_p85BPI3K_rbdPI3K_C2PI3KaPI3_PI4_kinasePI3K_p85BPI3K_rbdPI3K_C2PI3KaPI3_PI4_kinase41 Mutations
using Dash, DashBio
using StringEncodings, HTTP, JSON

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
app = dash(external_stylesheets=external_stylesheets)

req = HTTP.request("GET", "https://git.io/needle_PIK3CA.json")
data = decode(req.body, "UTF-8")

mdata = JSON.parse(data)

app.layout = html_div([
    "Show or hide range slider",
    dcc_dropdown(
        id="default-needleplot-rangeslider",
        options=[
            Dict("label" => "Show", "value" => 1),
            Dict("label" => "Hide", "value" => 0)
        ],
        clearable=false,
        multi=false,
        value=1,
        style=Dict("width" => "400px")
    ),
    dashbio_needleplot(
        id="dashbio-default-needleplot",
        mutationData=mdata
    )
])

callback!(app,
    Output("dashbio-default-needleplot", "rangeSlider"),
    [Input("default-needleplot-rangeslider", "value")]
) do show_rangeslider
    return (show_rangeslider == 1) ? true : false
end

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

Customization

Needle Style

Change the appearance of the needles.

2004006008001000−0.4−0.200.20.40.60.812004006008001000
HelixBeta strandNatural variantTurnSequence conflictDomainPI3K_p85BPI3K_rbdPI3K_C2PI3KaPI3_PI4_kinasePI3K_p85BPI3K_rbdPI3K_C2PI3KaPI3_PI4_kinase41 Mutations
using Dash, DashBio
using StringEncodings, HTTP, JSON

app = dash()

req = HTTP.request("GET", "https://git.io/needle_PIK3CA.json")
data = decode(req.body, "UTF-8")

mdata = JSON.parse(data)

app.layout = dashbio_needleplot(
    mutationData=mdata,
    needleStyle=Dict(
        "stemColor" => "#FF8888",
        "stemThickness" => 2,
        "stemConstHeight" => true,
        "headSize" => 10,
        "headColor" => ["#FFDD00", "#000000"]
    )
)

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

Domain Style

Change the appearance of the domains.

2004006008001000−0.500.511.522.533.542004006008001000
HelixBeta strandNatural variantTurnSequence conflictDomainPI3K_p85BPI3K_rbdPI3K_C2PI3KaPI3_PI4_kinasePI3K_p85BPI3K_rbdPI3K_C2PI3KaPI3_PI4_kinase41 Mutations
using Dash, DashBio
using StringEncodings, HTTP, JSON

app = dash()

req = HTTP.request("GET", "https://git.io/needle_PIK3CA.json")
data = decode(req.body, "UTF-8")

mdata = JSON.parse(data)

app.layout = dashbio_needleplot(
    mutationData=mdata,
    domainStyle=Dict(
        "displayMinorDomains" => true,
        "domainColor" => ["#FFDD00", "#00FFDD", "#0F0F0F", "#D3D3D3"]
    )
)

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

NeedlePlot 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 of this component, used to identify dash components in callbacks. The ID needs to be unique across all of the components in an app.

mutationData (Dict; default { x: [], y: [], domains: [], mutationGroups: [],}): The data that are displayed on the plot.

mutationData is a Dict with keys:

  • domains (Array; optional)

  • mutationGroups (Array of Strings; optional)

  • x (String | Array; optional)

  • y (String | Array; optional)

margin (Dict; default {t: 100, l: 40, r: 0, b: 40}): Margins of the plot.

xlabel (String; optional): Title of the x-axis.

ylabel (String; optional): Title of the y-axis.

rangeSlider (Bool; default false): If true, enables a rangeslider for the x-axis.

needleStyle (Dict; default { stemColor: '#444', stemThickness: 0.5, stemConstHeight: false, headSize: 5, headColor: [ '#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999', '#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf', '#999999', '#e41a1c', ], headSymbol: 'circle',}): Options for the needle marking single site mutations.

needleStyle is a Dict with keys:

  • headColor (Array | String; optional)

  • headSize (Real; optional)

  • headSymbol (Array | String; optional)

  • stemColor (String; optional)

  • stemConstHeight (Bool; optional)

  • stemThickness (Real; optional)

domainStyle (Dict; default { displayMinorDomains: false, domainColor: [ '#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', '#fccde5', '#d9d9d9', '#bc80bd', '#ccebc5', '#ffed6f', '#8dd3c7', '#ffffb3', '#bebada', '#fb8072', '#80b1d3', '#fdb462', '#b3de69', ], textangle: 0,}): Options for the protein domain coloring.

domainStyle is a Dict with keys:

  • displayMinorDomains (Bool; optional): The prop x sometimes contains smaller domains (e.g. multi-site mutations), if true, these are displayed.

  • domainColor (Array; optional)

  • textangle (Real; optional): Sets the angle at which the domain annotation text is drawn with respect to the horizontal.

clickData (Array; optional): An array of the points on the graph that have been clicked with Plotly.js clickEvents.

width (Real | String; default 700): Width of the Plot.

height (Real | String; default 800): Height of the Plot.

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