# dash_bioNeedlePlot 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

    library(jsonlite)
    library(dashBio)
    library(data.table)

    app <- Dash$new()

    data = read_json("https://git.io/needle_PIK3CA.json")

    app$layout(htmlDiv(list(
        'Show or hide range slider',
        dccDropdown(
            id = 'default-needleplot-rangeslider',
            options = list(
                list('label' = 'Show', 'value' = TRUE),
                list('label' = 'Hide', 'value' = FALSE)
            ),
            clearable = FALSE,
            multi = FALSE,
            value = TRUE
        ),
      dashbioNeedlePlot(
            id = 'dashbio-default-needleplot',
            mutationData = data
        )
    )))

    app$callback(
        output(id = "dashbio-default-needleplot", property = "rangeSlider"),
        params = list(
            input(id = 'default-needleplot-rangeslider', property = 'value')
        ),
        update_needleplot <- function(show_rangeslider){
            return(show_rangeslider)
        }
    )

    app$run_server()

## Customization

### Needle Style

Change the appearance of the needles.

    library(dashBio)

    data = read_json("https://git.io/needle_PIK3CA.json")

    dashbioNeedlePlot(
        mutationData = data,
        needleStyle = list(
            "stemColor" = "#FF8888",
            "stemThickness" = 2,
            "stemConstHeight" = TRUE,
            "headSize" = 10,
            "headColor" = list("#FFDD00", "#000000")
        )
    )

### Domain Style

Change the appearance of the domains.

    library(dashBio)

    data = read_json("https://git.io/needle_PIK3CA.json")

    dashbioNeedlePlot(
        mutationData = data,
        domainStyle = list(
            "displayMinorDomains" = TRUE,
            "domainColor" = list("#FFDD00", "#00FFDD", "#0F0F0F", "#D3D3D3")
        )
    )

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

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

`mutationData` is a named list with keys:

- `domains` (unnamed list; optional)

- `mutationGroups` (unnamed list of characters; optional)

- `x` (character | unnamed list; optional)

- `y` (character | unnamed list; optional)

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

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

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

`rangeSlider` (logical; default `FALSE`): If TRUE, enables a rangeslider for the x-axis.

`needleStyle` (named list; 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 named list with keys:

- `headColor` (unnamed list | character; optional)

- `headSize` (numeric; optional)

- `headSymbol` (unnamed list | character; optional)

- `stemColor` (character; optional)

- `stemConstHeight` (logical; optional)

- `stemThickness` (numeric; optional)

`domainStyle` (named list; 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 named list with keys:

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

- `domainColor` (unnamed list; optional)

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

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

`width` (numeric | character; default `700`): Width of the Plot.

`height` (numeric | character; default `800`): Height of the Plot.

`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

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