# dash_bio_oncoprint Examples and Reference

see OncoPrint in action.

## OncoPrint

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

autosize: True

    using Dash, DashBio
    using StringEncodings, HTTP, JSON

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

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

    data = JSON.parse(data)

    app = dash(external_stylesheets=external_stylesheets)

    app.layout = html_div([
        dashbio_oncoprint(
            id="dashbio-default-oncoprint",
            data=data
        ),
        html_div(id="default-oncoprint-output")
    ])

    callback!(app,
        Output("default-oncoprint-output", "children"),
        [Input("dashbio-default-oncoprint", "eventDatum")]
    ) do event_data
        if event_data isa Nothing || length(event_data) == 0
            return "There are no event data. Hover over or click on a part of the graph to generate event data."
        end
        event_data = JSON.parse(event_data)

        return [
            html_div(
                "$key,$(replace(string(event_data[key]), "<br>" => "\n"))"
                )
            for key in keys(event_data)
        ]

    end

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

## Customization

### Colors

Change the color of specific mutations, as well as the background color.

    using Dash, DashBio
    using StringEncodings, HTTP, JSON

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

    app = dash()

    app.layout = dashbio_oncoprint(
        data=data,
        colorscale=Dict(
            "MISSENSE" =>  "#e763fa",
            "INFRAME" =>  "#E763FA"
        ),
        backgroundcolor="#F3F6FA"
    )

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

### Size And Spacing

Change the height and width of the component, and adjust the spacing between adjacent tracks.

    using Dash, DashBio
    using StringEncodings, HTTP, JSON

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

    app = dash()

    app.layout = dashbio_oncoprint(
        data=data,
        height=800,
        width=500,
        padding=0.25
    )

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

### Legend And Overview

Show or hide the legend and/or overview heatmap.

    using Dash, DashBio
    using StringEncodings, HTTP, JSON

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

    app = dash()

    app.layout = dashbio_oncoprint(
        data=data,
        showlegend=false,
        showoverview=false
    )

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

## OncoPrint 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 to the component.

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

`data` (Array; optional): Input data, in CBioPortal format where each list entry is a dict consisting of 'sample', 'gene', 'alteration', and 'type'.

`padding` (Real; default `0.05`): Adjusts the padding (as a proportion of whitespace) between two tracks. Value is a ratio between 0 and 1. Defaults to 0.05 (i.e., 5 percent). If set to 0, plot will look like a heatmap.

`colorscale` (Bool | Dict; optional): If not nothing, will override the default OncoPrint colorscale. Default OncoPrint colorscale same as CBioPortal implementation. Make your own colrscale as a {'mutation': COLOR} dict. Supported mutation keys are ['MISSENSE, 'INFRAME', 'FUSION', 'AMP', 'GAIN', 'HETLOSS', 'HMODEL', 'UP', 'DOWN'] Note that this is NOT a standard plotly colorscale.

`backgroundcolor` (String; default `'rgb(190, 190, 190)'`): Default color for the tracks, in common name, hex, rgb or rgba format. If left blank, will default to a light grey rgb(190, 190, 190).

`range` (Array; default `[nothing, nothing]`): Reset windowing to user preset on initial range or data change.

`showlegend` (Bool; default `true`): Toogles whether or not to show a legend on the right side of the plot, with mutation information.

`showoverview` (Bool; default `true`): Toogles whether or not to show a heatmap overview of the tracks.

`width` (Real | String; optional): Width of the OncoPrint. Will disable auto-resizing of plots if set.

`height` (Real | String; default `500`): Height of the OncoPrint. Will disable auto-resizing of plots if set.

`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/Chromosomal/oncoprint_dataset3.json