# 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

    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.

    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.

    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

- https://github.com/plotly/datasets/blob/master/Dash_Bio/Genetic/needle_PIK3CA.json