def test_dbop002_colorscale(dash_duo): app = dash.Dash(__name__) new_colorscale = { 'AMP': 'rgb(10, 200, 100)', 'FUSION': 'rgb(100, 10, 20)', 'HOMDEL': 'rgb(200, 50, 60)' } # fusion deep del amp app.layout = html.Div( simple_app_layout(dash_bio.OncoPrint(id=_COMPONENT_ID, data=_data))) simple_app_callback( app, dash_duo, component_id=_COMPONENT_ID, test_prop_name='colorscale', test_prop_value=json.dumps(new_colorscale), prop_value_type='dict', validation_fn=lambda x: json.dumps(x) == json.dumps(new_colorscale), take_snapshot=True) fus = dash_duo.find_elements( 'g.cartesianlayer g.plot g.trace.bars:nth-child(2) g.point > path') for point in fus: match = re.search(r'.*fill: ([\w\s,\(\)]+);.*', point.get_attribute('style')) assert match.group(1) == 'rgb(100, 10, 20)' deep_del = dash_duo.find_elements( 'g.cartesianlayer g.plot g.trace.bars:nth-child(3) g.point > path') for point in deep_del: match = re.search(r'.*fill: ([\w\s,\(\)]+);.*', point.get_attribute('style')) assert match.group(1) == 'rgb(200, 50, 60)' amp = dash_duo.find_elements( 'g.cartesianlayer g.plot g.trace.bars:nth-child(4) g.point > path') for point in amp: match = re.search(r'.*fill: ([\w\s,\(\)]+);.*', point.get_attribute('style')) assert match.group(1) == 'rgb(10, 200, 100)'
def test_dbop001_background_color(dash_duo): app = dash.Dash(__name__) app.layout = html.Div( simple_app_layout(dash_bio.OncoPrint(id=_COMPONENT_ID, data=_data))) simple_app_callback(app, dash_duo, component_id=_COMPONENT_ID, test_prop_name='backgroundcolor', test_prop_value='rgb(25, 211, 243)', prop_value_type='string', take_snapshot=True) background = dash_duo.find_elements( 'g.cartesianlayer g.plot g.trace.bars:nth-child(1) g.point > path') for point in background: match = re.search(r'.*fill: ([\w\s,\(\)]+);.*', point.get_attribute('style')) assert match.group(1) == 'rgb(25, 211, 243)'
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash.Dash(__name__, external_stylesheets=external_stylesheets) data = urlreq.urlopen( 'https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/' + 'oncoprint_dataset3.json').read() if PY3: data = data.decode('utf-8') data = json.loads(data) app.layout = html.Div([ dashbio.OncoPrint(id='my-dashbio-oncoprint', data=data), html.Div(id='oncoprint-output') ]) @app.callback(dash.dependencies.Output('oncoprint-output', 'children'), [dash.dependencies.Input('my-dashbio-oncoprint', 'eventDatum')]) def update_output(event_data): if event_data is None or len(event_data) == 0: return 'There are no event data. Hover over or click on a part \ of the graph to generate event data.' event_data = json.loads(event_data) return [ html.Div('{}: {}'.format(key,
def layout(): return html.Div( id='oncoprint-body', children=[ html.Div([ html.Div([ dash_bio.OncoPrint(id='oncoprint-chart', data=dataset3), ], className='oncoprint-card eight columns'), html.Div([ dcc.Tabs( id='oncoprint-tabs', value='oncoprint-tab-select', children=[ dcc.Tab( label='Select', value='oncoprint-tab-select', children=[ html.Div([ html.H4("Select Dataset"), dcc.Dropdown( id='oncoprint-dropdown', className='oncoprint-select', options=[{ 'label': '{}.json'.format(ds), 'value': ds } for ds in DATASETS], value='dataset3', ), ], className='oncoprint-subcard'), html.Div([ html.H4("Hover/Click/Event Data"), dcc.Textarea( id="oncoprint-events", placeholder= "Hover or click on data to see it here.", value= "Hover or click on data to see it here.", className="oncoprint-events", ), ], className='oncoprint-subcard'), html.Div([ html.H4("What is OncoPrint?"), html.P(""" The OncoPrint component is used to view multiple genetic alteration events through an interactive and zoomable heatmap. It is a React/Dash port of the popular oncoPrint() function from the BioConductor R package. Under the hood, the rendering is done using Plotly.js built upon D3. Plotly's interactivity allows the user to bind clicks and hovers to genetic events, allowing the user to create complex bioinformatic apps or workflows that rely on crossfiltering. """), html.P(""" Read more about the component here: https://github.com/plotly/react-oncoprint """), ], className='oncoprint-subcard'), ], ), dcc.Tab( label='Customize', value='oncoprint-tab-customize', children=[ html.Div([ html.H4('Layout'), html.Hr( className='oncoprint-separator'), html.Div( className='oncoprint-settings', children=[ html.H6("Overview"), dcc.RadioItems( id= 'oncoprint-show-overview-radio', className='oncoprint-radio', options=[ { 'label': 'Show', 'value': True }, { 'label': 'Hide', 'value': False }, ], value=True, labelStyle={ 'display': 'inline-block', 'margin-right': '8px', }, ), ], ), html.Div( className='oncoprint-settings', children=[ html.H6("Legend"), dcc.RadioItems( id= 'oncoprint-show-legend-radio', className='oncoprint-radio', options=[ { 'label': 'Show ', 'value': True }, { 'label': 'Hide ', 'value': False }, ], value=True, labelStyle={ 'display': 'inline-block', 'margin-right': '8px', }, ), ], ), html.Div( className='oncoprint-settings', children=[ html.H6("Padding"), html. P('Adjust the padding (as percentage) ' 'between two tracks.'), dcc.Slider( className= 'oncoprint-slider', id= 'oncoprint-padding-input', value=0.05, min=0, max=0.1, step=0.01, marks={ '0': '0', '0.02': '0.02', '0.04': '0.04', '0.06': '0.06', '0.08': '0.08', '0.1': '0.1', }, ), ], ), ], className='oncoprint-subcard'), html.Div([ html.H4('Colorscale'), html.Hr( className='oncoprint-separator'), html.Div( className='oncoprint-settings', children=[ html.H6("Track color"), html. P('Change the default background ' 'color for the tracks.'), dcc.Dropdown( id= 'oncoprint-tracks-color-dropdown', options=[{ 'label': col_code, 'value': col_code } for col_code in TRACKS_COLORS_OPT ], value=TRACKS_COLORS_OPT[0], ), ], ), html.Hr( className='oncoprint-separator'), html.H6("Mutation colors"), html. P("Select a mutation type and a color " "to customize its look."), html.Div( className= 'oncoprint-half-container', children=[ html.Div( className= 'oncoprint-half-settings', children=[ html.H6( "Mutation type"), dcc.Dropdown( id= 'oncoprint-colorscale-mutation-dropdown', options=[ { 'label': mut_type, 'value': mut_type } for mut_type in COLORSCALE_MUTATIONS_OPT ], value= COLORSCALE_MUTATIONS_OPT[ 0], ), ], ), html.Div( className= 'oncoprint-half-settings', children=[ html.H6("Color"), dcc.Dropdown( id= 'oncoprint-colorscale-color-dropdown', options=[ { 'label': col_code, 'value': col_code } for col_code in COLORSCALE_COLORS_OPT ], value= COLORSCALE_COLORS_OPT[ 0], ), ], ), ], ), ], className='oncoprint-subcard'), ], ), ], ), ], className='oncoprint-card four columns'), ], className='oncoprint-wrapper row'), dcc.Store(id='oncoprint-store'), ])
def layout(): return html.Div( id='oncoprint-body', className='app-body', children=[ dcc.Loading(className='dashbio-loading', children=dash_bio.OncoPrint(id='oncoprint-chart', height=550, data=[])), html.Div( id='oncoprint-control-tabs', className='control-tabs', children=[ dcc.Tabs( id='oncoprint-tabs', value='what-is', children=[ dcc.Tab(label='About', value='what-is', children=html.Div( className='control-tab', children=[ html.H4( className='what-is', children='What is OncoPrint?'), html.P(""" The OncoPrint component is used to view multiple genomic alteration events through an interactive and zoomable heatmap. It is a React/Dash port of the popular oncoPrint() function from the Bioconductor R package. Under the hood, the rendering is done with D3 via Plotly.js. Plotly's interactivity allows you to bind clicks and hovers to genetic events, letting you create complex bioinformatics apps or workflows that leverage crossfiltering. """), html.P(""" Read more about the component here: https://github.com/plotly/react-oncoprint """) ])), dcc.Tab( label='Data', value='data', children=html.Div( className='control-tab', children=[ html.Div( className='app-controls-block', children=[ html.Div( className= 'app-controls-name', children='Select dataset'), dcc.Dropdown( id='oncoprint-dropdown', className= 'oncoprint-select', options=[{ 'label': '{}.json'.format(ds), 'value': ds } for ds in DATASETS], value='cBioPortalData', ), ]), html.Hr( className='oncoprint-separator'), html.Div([ html.H4('Event metadata'), html.Div(id='oncoprint-events'), ]) ])), dcc.Tab( label='View', value='view', children=html.Div( className='control-tab', children=[ html.H4('Layout'), html.Div( className='app-controls-block', children=[ html.Div(className= 'app-controls-name', children='Overview'), daq.ToggleSwitch( id= 'oncoprint-show-overview', label=['hide', 'show'], color='#009DFF', size=35, value=True), ]), html.Div( className='app-controls-block', children=[ html.Div(className= 'app-controls-name', children='Legend'), daq.ToggleSwitch( id='oncoprint-show-legend', label=['hide', 'show'], color='#009DFF', size=35, value=True), ]), html.Div( className='app-controls-block', children=[ html.Div(className= 'app-controls-name', children='Padding'), dcc.Slider( className='control-slider', id= 'oncoprint-padding-input', value=0.05, min=0, max=0.1, step=0.01, marks={ '0': '0', '0.02': '0.02', '0.04': '0.04', '0.06': '0.06', '0.08': '0.08', '0.1': '0.1', }, ), html.Div( className= 'app-controls-desc', children= 'Adjust padding (as percentage) ' 'between two tracks.'), ]), html.Hr( className='oncoprint-separator'), html.Div([ html.H4('Colors'), html.P('Change default background ' 'color for the tracks.'), html.Div( className='app-controls-block', children=[ html.Div( className= 'fullwidth-app-controls-name', children='Track color' ), daq.ColorPicker( id= 'oncoprint-tracks-color', value={ 'hex': '#AAAAAA' }) ]), html.Hr( className='oncoprint-separator' ), html.H6("Mutation colors"), html. P("Select a mutation type and a color " "to customize its look."), html.Div( className='app-controls-block', children=[ html.Div( className= 'app-controls-name', children='Mutation type' ), dcc.Dropdown( id= 'oncoprint-colorscale-mutation-dropdown', options=[ { 'label': mut_type, 'value': mut_type } for mut_type in COLORSCALE_MUTATIONS_OPT ], value= COLORSCALE_MUTATIONS_OPT[ 0], ), ]), html.Div( className='app-controls-block', children=[ html.Div( className= 'app-controls-name', children= 'Mutation color'), daq.ColorPicker( id= 'oncoprint-mutation-color', value={ 'hex': COLORSCALE_COLORS_OPT[ 0] }) ]) ]) ])) ]) ]), dcc.Store(id='oncoprint-store'), ]),
import dash_html_components as html import dash_bio as dashbio import json import urllib.request as urlreq import base64 data = urlreq.urlopen( "https://raw.githubusercontent.com/plotly/dash-bio/master/tests/dashbio_demos/dash-onco-print/data/dataset3.json" ).read().decode("utf-8") data = json.loads(data) component = dashbio.OncoPrint(id='my-dashbio-oncoprint', data=data, width=800) component_image = html.Img(src='data:image/png;base64,{}'.format( base64.b64encode(open('./images/pic_oncoprint.png', 'rb').read()).decode()), style={ 'width': '800px', 'float': 'left' }) def callbacks(app): return