def color_picker(color_picker_type, graph_id=None, is_global=False):
if is_global:
return dash_daq.ColorPicker(
id="global-color-picker-{}".format(color_picker_type),
value={
'hex': '#000000',
'rgb': {
'r': 0,
'g': 0,
'b': 0,
'a': 1
}
})
t = color_picker_type + '-picker-' + str(graph_id)
return dash_daq.ColorPicker(id=t,
value={
'hex': '#000000',
'rgb': {
'r': 0,
'g': 0,
'b': 0,
'a': 1
}
})
def color_picker(color_picker_type, graph_id):
# ex.: line-color-1
t = color_picker_type + '-picker-' + str(graph_id)
return dash_daq.ColorPicker(
id=t,
label=color_picker_type,
value='#119DFF')
def make_dash_colorpicker(self, k):
comp_div = self.color_pickers_div[k]
comp = self.color_pickers[k]
return html.Div(
id=comp_div.id,
style=None if k == self.current_slider else {'display': 'none'},
children=daq.ColorPicker(
id=comp.id,
label=f'Color Picker {k}',
value=comp.val,
),
)
def _show_color_picker(
cell: Optional[Dict],
current_color_store: List[str]) -> dash_daq.ColorPicker:
"""Render the colorpicker"""
if not cell:
raise PreventUpdate
row_no = cell["row"]
return dash_daq.ColorPicker( # pylint: disable=not-callable
{
"id": self._uuid,
"element": "picker"
},
label=
f"Color for {[col for col in self._dframe.iloc[row_no] if col != 'COLOR']}",
value=dict(hex=current_color_store[row_no]),
)
def render(self):
return dbc.Div([
html.P(id='uuid'),
dbc.Container([
dbc.Row([
dbc.Col([
html.H1(id='clock',
children=self.timer.isoformat(),
style={"color": self.time_color})
]),
]),
dbc.Row([
dbc.Col([
daq.ColorPicker(id='color_picker',
value={"hex": self.time_color})
])
])
])
])
def layout():
return html.Div(
id='mol3d-body',
className='app-body',
children=[
html.Div(
id='mol3d-control-tabs',
className='control-tabs',
children=[
dcc.Tabs(
id='mol3d-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 Molecule3D?'),
html.
P('Molecule3D is a visualizer that allows you '
'to view biomolecules in multiple representations: '
'sticks, spheres, and cartoons.'),
html.
P('You can select a preloaded structure, or upload your own, '
'in the "Data" tab. A sample structure is also '
'available to download.'),
html.
P('In the "View" tab, you can change the style and '
'coloring of the various components of your molecule.'
)
])),
dcc.Tab(
label='Data',
value='upload-download',
children=html.Div(
className='control-tab',
children=[
html.Div(
title=
'download a sample data file to view',
children=[]),
html.Div(
title='Select molecule to view',
className="app-controls-block",
children=[
html.Div(
className=
'app-controls-name',
children='Select structure'
),
dcc.Dropdown(
id='dropdown-demostr',
options=[
{
'label':
'Measles nucleocapsid',
'value':
'{}4uft.pdb'.
format(DATAPATH)
},
{
'label':
'a-cobratoxin-AChBP complex',
'value':
'{}1yi5.pdb'.
format(DATAPATH)
},
{
'label':
'Calcium ATPase',
'value':
'{}1su4.pdb'.
format(DATAPATH)
},
{
'label':
'DNA',
'value':
'{}1bna.pdb'.
format(DATAPATH)
},
{
'label':
'T7 RNA polymerase',
'value':
'{}1msw.pdb'.
format(DATAPATH)
},
],
value='{}1bna.pdb'.format(
DATAPATH)),
],
),
html.Div(
title=
'Upload biomolecule to view here',
className='app-controls-block',
id='mol3d-upload-container',
children=[
dcc.Upload(
id='mol3d-upload-data',
className='control-upload',
children=html.Div([
'Drag and drop or click to upload a file.',
]),
# Allow multiple files to be uploaded
multiple=True),
html.A(html.Button(
"Download sample structure",
id=
"mol3d-download-sample-data",
className='control-download'
),
href=os.path.join(
'assets',
'sample_data',
'molecule3d_2mru.pdb'
),
download='2mru.pdb')
]),
html.Div(id='mol3d-data-info')
])),
dcc.Tab(
label='View',
value='view-options',
children=html.Div(
className='control-tab',
children=[
# Textarea container to display the selected atoms
html.Div(
title=
'view information about selected atoms '
'of biomolecule',
className="app-controls-block",
id="mol3d-selection-display",
children=[
html.P("Selection",
style={
'font-weight':
'bold',
'margin-bottom':
'10px'
}),
html.Div(
id='mol3d-selection-output'
),
]),
# Dropdown to select chain representation
# (sticks, cartoon, sphere)
html.Div(
title=
'select style for molecule representation',
className="app-controls-block",
id='mol3d-style',
children=[
html.P('Style',
style={
'font-weight':
'bold',
'margin-bottom':
'10px'
}),
dcc.Dropdown(
id='dropdown-styles',
options=[
{
'label': 'Sticks',
'value': 'stick'
},
{
'label': 'Cartoon',
'value': 'cartoon'
},
{
'label': 'Spheres',
'value': 'sphere'
},
],
value='cartoon'),
],
),
# Dropdown to select color of representation
html.Div(
title=
'select color scheme for viewing biomolecule',
className="app-controls-block",
id='mol3d-style-color',
children=[
html.P('Color',
style={
'font-weight':
'bold',
'margin-bottom':
'10px'
}),
dcc.Dropdown(
id='dropdown-style-color',
options=[
{
'label': 'Atom',
'value': 'atom'
},
{
'label':
'Residue identity',
'value': 'residue'
},
{
'label':
'Residue type',
'value':
'residue_type'
},
{
'label': 'Chain',
'value': 'chain'
},
],
value='residue'),
dcc.Dropdown(
id='mol3d-coloring-key',
options=[]),
],
),
html.Div(
title=
'Customize molecule coloring.',
className="app-controls-block",
children=[
html.
P(id='mol3d-customize-coloring',
style={
'font-weight': 'bold',
'margin-bottom': '10px'
}),
daq.ColorPicker(
id='mol3d-coloring-value',
size=315),
]),
]),
),
]),
]),
dcc.Loading(html.Div(id='mol3d-biomolecule-viewer', children=[])),
dcc.Store(id='mol3d-color-storage', data={})
])
def layout():
return html.Div(
id='clustergram-body',
className='app-body',
children=[
dcc.Loading(className='dashbio-loading',
children=html.Div(id='clustergram-wrapper',
children=dcc.Graph(
id='clustergram',
style={'display': 'none'}))),
html.Div(
id='clustergram-control-tabs',
className='control-tabs',
children=[
dcc.Tabs(
id='clustergram-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 Clustergram?'),
html.
P('Clustergram is a combination of a heatmap and '
'dendrograms that allows you to display '
'hierarchical clustering data. '
'Clusters on the dendrograms are highlighted in '
'one color if they comprise data points '
'that share some minimal level of correlation.'
),
html.
P('In the "Data" tab, you can select a preloaded '
'dataset to display or, alternatively, upload one '
'of your own. A sample dataset is also available '
'for download in the tab.'),
html.
P('In the "Graph" tab, you can choose the '
'dimension(s) along which clustering will be '
'performed (row or column). You can also change '
'the threshold that determines the point at which '
'clusters are highlighted for the row and column '
'dendrograms, and choose which rows and columns '
'are used to compute the clustering.'
),
html.
P('In addition, you can highlight specific clusters '
'by adding annotations to the clustergram, and '
'choose whether to show or hide the labels for the '
'rows and/or columns.')
])),
dcc.Tab(
label='Data',
value='datasets',
children=html.Div(
className='control-tab',
children=[
html.Div(
'Preloaded dataset',
title=
'Choose from some pre-loaded datasets '
+ 'to view them on the heatmap.',
className=
'fullwidth-app-controls-name',
),
dcc.Dropdown(
id='clustergram-datasets',
options=[{
'label':
'Anderson\'s Iris Data',
'value': 'iris'
}, {
'label': 'mtcars',
'value': 'mtcars'
}, {
'label': 'Prostate cancer',
'value': 'prostatecancer'
}, {
'label':
'Lung cancer subtypes',
'value': 'lungcancer'
}],
value='prostatecancer'),
html.Br(),
html.Div(
'Upload dataset',
title=
'Upload your own dataset below.',
className='app-controls-name'),
html.Div(id='file-upload-name'),
html.Div(
id=
'clustergram-file-upload-container',
title=
'Upload your own dataset here.',
children=[
dcc.Upload(
id='file-upload',
className='control-upload',
children=html.Div([
"Drag and drop .soft files, or click \
to select files."
]),
accept='.soft'),
],
),
html.Div([
html.A(html.Button(
'Download sample .soft data',
id=
'clustergram-download-sample-data',
className='control-download'),
href=os.path.join(
'assets', 'sample_data',
'clustergram_GDS5826.soft'
),
download='GDS5826.soft')
]),
html.Hr(),
html.Div(id='clustergram-info'),
])),
dcc.Tab(
label='Graph',
value='graph',
children=[
html.Div(
className='control-tab',
children=[
html.Div(
className='app-controls-block',
children=[
html.Div(
'Cluster by:',
title=
'Calculate dendrogram for row data, column '
'data, or both.',
className=
'app-controls-name'),
dcc.Dropdown(
id='cluster-checklist',
options=[{
'label': 'Row',
'value': 'row'
}, {
'label': 'Column',
'value': 'col'
}],
value=['row', 'col'],
multi=True)
]),
html.Div(
className='app-controls-block',
children=[
html.Div(
'Hide labels:',
title=
'Hide labels for the row and/or column '
+ 'dendrograms.',
className=
'app-controls-name'),
dcc.Dropdown(
id='hide-labels',
options=[{
'label': 'Row',
'value': 'row'
}, {
'label': 'Column',
'value': 'col'
}],
multi=True,
value=['row']),
]),
html.Hr(),
html.Div(
className='app-controls-block',
children=[
html.Div(
'Color threshold:',
className=
'app-controls-name'),
html.Div(
className=
'app-controls-desc',
children=
'Change the threshold level that is used to '
+
'determine separate clusters.',
),
]),
html.Br(),
html.Div(
id='threshold-wrapper',
children=[
'Column: ',
dcc.Slider(
id='column-threshold',
className=
'control-slider',
min=0,
max=20,
step=0.5,
value=10),
html.Br(), 'Row: ',
dcc.Slider(
id='row-threshold',
className=
'control-slider',
min=0,
max=20,
step=0.5,
value=10)
]),
html.Br(),
html.Hr(),
html.Div(
id='add-group-markers',
children=[
html.Div(
className=
'app-controls-block',
children=[
html.Div(
className=
'app-controls-name',
children=
'Annotations:'
),
html.Button(
id=
'remove-all-group-markers',
children=
'Remove all',
n_clicks=0,
n_clicks_timestamp
=0),
html.Div(
className=
'app-controls-desc',
children=[
'Annotate your heatmap by labeling clusters; '
'below, you can choose a color for the annotation, '
'as well as text for the annotation. Then, click '
'on the row cluster or column cluster that you '
'wish to annotate.'
]),
]),
daq.ColorPicker(
id=
'clustergram-annot-color',
value={
'hex':
color_palette[0]
},
size=315),
dcc.Input(
id='annotation',
placeholder=
'annotation text',
type='text',
value=''),
]),
html.Br(),
html.Hr(),
html.Div(
className='app-controls-block',
children=[
html.Div(
'Rows to display:',
title=
'Select a subset of rows from the uploaded '
+
'or preloaded dataset to compute clustering on.',
className=
'fullwidth-app-controls-name'
),
dcc.Dropdown(
id='selected-rows',
multi=True,
value=[])
]),
html.Div(
className='app-controls-block',
children=[
html.Div(
'Columns to display:',
title=
'Select a subset of columns from the uploaded '
+
'or preloaded dataset to compute clustering on.',
className=
'fullwidth-app-controls-name'
),
dcc.Dropdown(
id='selected-columns',
multi=True,
value=[]),
])
])
])
]),
dcc.Store(id='data-meta-storage'),
dcc.Store(id='fig-options-storage'),
dcc.Store(id='computed-traces'),
dcc.Store(id='curves-dict'),
dcc.Store(id='group-markers'),
])
])
"256": "256",
},
)
],
style={
"display": "flex",
"justify-content": "center",
"align-items": "center",
"marginBottom": "12%",
},
),
html.Div(
[
daq.ColorPicker(
id="color-picker",
label="Color Picker",
value=dict(hex="#119DFF"),
size=150,
)
],
style={
"border-radius": "1px",
"border-width": "5px",
"border-top": "1px solid rgb(216, 216, 216)",
"paddingTop": "5%",
"paddingBottom": "5%",
},
),
],
className="four columns",
style={
"border-radius": "5px",
import dash
import dash_daq as daq
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = dbc.Container([
daq.ColorPicker(id='color-picker',
label={
'label': '色彩选择器',
'style': {
'font-size': '18px',
'font-family': 'SimHei',
'font-weight': 'bold'
}
},
size=400,
value=dict(hex="#120E03")),
html.P('测试' * 100, id='demo-p', style={'margin-top': '20px'})
],
style={
'margin-top': '30px',
'max-width': '500px'
})
app.clientside_callback(
"""
function(color) {
return {'color': color.hex, 'margin-top': '20px'};
def generate_layout(graphs, configs):
if configs is None:
configs = {}
# Read-out graph view configs
elements = configs["elements"] if "elements" in configs else None
current_graph = configs[
"current_graph"] if "current_graph" in configs else ""
nodes_to_keep = configs["nodestokeep"] if "nodestokeep" in configs else []
top_n_slider_value = configs["top_n"] if "top_n" in configs else None
node_freq_type = configs[
"node_weight"] if "node_weight" in configs else "degree_frequency"
edge_freq_type = configs[
"edge_weight"] if "edge_weight" in configs else "npmi"
nodefreqslider = configs[
"nodefreqslider"] if "nodefreqslider" in configs else [0, 100000]
edgefreqslider = configs[
"edgefreqslider"] if "edgefreqslider" in configs else [0, 100000]
cluster_type = configs[
"cluster_type"] if "cluster_type" in configs else "entity_type"
clustersearch = configs[
"clustersearch"] if "clustersearch" in configs else []
current_layout = configs[
"current_layout"] if "current_layout" in configs else DEFAULT_LAYOUT
# Read-out old path search configs
searchpathfrom = configs[
"searchpathfrom"] if "searchpathfrom" in configs else None
searchpathto = configs[
"searchpathto"] if "searchpathto" in configs else None
searchnodetotraverse = configs[
"searchnodetotraverse"] if "searchnodetotraverse" in configs else None
searchpathlimit = configs[
"searchpathlimit"] if "searchpathlimit" in configs else 10
searchpathoverlap = configs[
"searchpathoverlap"] if "searchpathoverlap" in configs else [1]
nestedpaths = configs["nestedpaths"] if "nestedpaths" in configs else []
pathdepth = configs["pathdepth"] if "pathdepth" in configs else 2
global_button_group = dbc.FormGroup([
dbc.Col([
dbc.Button(html.Span(
[html.I(className="fas fa-redo"), " Reset view"]),
color="secondary",
className="mr-1",
id='bt-reset',
style={"margin": "2pt"}),
dbc.Tooltip(
"Reset the display to default values",
target="bt-reset",
placement="bottom",
)
],
width=6,
style={"padding-left": "0pt"}),
dbc.Col([
dbc.Label(html.Span("Recompute spanning tree", id="recomp-label"),
html_for="recompute-spanning-tree"),
dbc.Checklist(options=[{
"value": 1
}],
value=[1],
id="recompute-spanning-tree",
switch=True,
style={"margin-left": "5pt"}),
dbc.Tooltip(
"If enabled, the minimum spanning tree will be "
"recomputed on the nodes selected in the current "
"graph view (does not apply to filtering)",
target="recomp-label",
placement="bottom",
)
],
width=6)
],
row=True,
style={"margin-left": "5pt"})
editing_mode_radio = dbc.FormGroup([
dbc.Label("Choose the editing mode"),
dbc.RadioItems(
options=[
{
"label": "Editing (edit the graph object)",
"value": 1
},
{
"label": "Masking (edit the current view)",
"value": 2
},
],
value=1,
id="edit-mode",
),
])
edit_button_group = dbc.InputGroup([
dbc.Button(html.Span([html.I(className="fas fa-minus"), " Remove"]),
color="primary",
className="mr-1",
id='remove-button',
disabled=True,
style={"margin": "2pt"}),
dbc.Button(html.Span(
[html.I(className="fas fa-compress-alt"), " Merge"]),
color="primary",
className="mr-1",
id='merge-button',
style={"margin": "2pt"},
disabled=True),
dbc.Button(html.Span([html.I(className="fas fa-edit"), " Rename"]),
color="primary",
className="mr-1",
id='rename-button',
style={"margin": "2pt"},
disabled=True),
dbc.Button(html.Span([html.I(className="fas fa-redo"), " Reset"]),
color="secondary",
className="mr-1",
id='reset-elements-button',
style={
"float": "right",
"margin": "2pt"
},
disabled=False),
dbc.Modal(
[
dbc.ModalHeader("Merged label"),
dbc.ModalBody([
dbc.FormGroup([
dbc.Label("Would you like to"),
dbc.RadioItems(
options=[{
"label": "merge into one of the entities",
"value": 1
}, {
"label": "merge as a new entity",
"value": 2
}],
value=1,
id="merge-options",
),
]),
dbc.FormGroup([dbc.Input(id="merge-label-input")],
id="merge-input")
]),
dbc.ModalFooter([
dbc.Button("Apply",
id="merge-apply",
color="primary",
className="ml-auto"),
dbc.Button("Close",
id="merge-close",
color="default",
className="ml-auto")
]),
],
id="merge-modal",
),
dbc.Modal(
[
dbc.ModalHeader("Rename the selected node"),
dbc.ModalBody([
html.P(id="rename-error-message", style={"color": "red"}),
dbc.FormGroup([
dbc.Col(dbc.Label("New label"), width=3),
dbc.Col(dbc.Input(id="rename-input"), width=9)
],
row=True),
]),
dbc.ModalFooter([
dbc.Button("Apply",
id="rename-apply",
color="primary",
className="ml-auto"),
dbc.Button("Close",
id="rename-close",
color="default",
className="ml-auto")
]),
],
id="rename-modal",
),
])
dropdown_items = dcc.Dropdown(id="showgraph",
value=current_graph,
options=[{
'label': val.capitalize(),
'value': val
} for val in graphs],
style={"width": "100%"})
graph_type_dropdown = dbc.FormGroup([
dbc.Label(html.Span("Graph to display", id="showgraph-label"),
html_for="showgraph"),
dbc.Tooltip(
"Switch between different loaded graphs to display.",
target="showgraph-label",
placement="top",
), dropdown_items
])
search = dbc.FormGroup([
dbc.Label("Search node",
html_for="searchdropdown",
width=3,
style={
"text-align": "right",
"padding-right": "0pt"
}),
dbc.Col(dcc.Dropdown(id="searchdropdown", multi=False), width=6),
dbc.Col([
dbc.DropdownMenu([
dbc.DropdownMenuItem("png", id="png-menu"),
dbc.DropdownMenuItem(divider=True),
dbc.DropdownMenuItem("jpg", id="jpg-menu"),
dbc.DropdownMenuItem(divider=True),
dbc.DropdownMenuItem("svg", id="svg-menu"),
dbc.DropdownMenuItem(divider=True),
dbc.DropdownMenuItem(
"gml", id="gml-menu", href="/download/graph.gml")
] + [Download(id="download-gml")],
label="Download",
id='dropdown-download',
color="primary",
group=True,
className="mr-1",
in_navbar=True),
],
width=3)
],
row=True,
style={"margin": "3pt"})
freq_input_group = dbc.InputGroup([
dbc.Label(html.Span("Node Weight", id="node_freq_type-label"),
html_for="node_freq_type"),
dbc.Tooltip(
"Select a metric to use as the node weight "
"(node sizes are proportional to the selected weight)",
target="node_freq_type-label",
placement="top",
),
dcc.Dropdown(id="node_freq_type",
value=node_freq_type,
options=[{
'label': val[0],
'value': val[1]
} for val in node_frequency_type],
style={"width": "100%"}),
],
className="mb-1")
node_range_group = dbc.FormGroup([
dbc.Label(html.Span("Display Range", id="nodefreqslider-label"),
html_for="nodefreqslider"),
html.Div([
dcc.RangeSlider(id="nodefreqslider_content",
min=0,
max=100000,
value=nodefreqslider)
],
id="nodefreqslider"),
dbc.Tooltip(
"Adjust the node weight range (only the nodes having "
"the weight in the selected range will be displayed)",
target="nodefreqslider-label",
placement="bottom",
),
])
edge_input_group = dbc.InputGroup([
dbc.Label(html.Span("Edge Weight", id="edge_freq_type-label"),
html_for="edge_freq_type"),
dbc.Tooltip(
"Select a metric to use as the edge weight (edge thickness "
"is proportional to the selected weight)",
target="edge_freq_type-label",
placement="top",
),
dcc.Dropdown(id="edge_freq_type",
value=edge_freq_type,
options=[{
'label': val[0],
'value': val[1]
} for val in edge_frequency_type],
style={"width": "100%"})
],
className="mb-1")
edge_range_group = dbc.FormGroup([
dbc.Label(html.Span("Display Range", id="edgefreqslider-label"),
html_for="edgefreqslider"),
html.Div([
dcc.RangeSlider(id="edgefreqslider_content",
min=0,
max=100000,
value=edgefreqslider)
],
id="edgefreqslider"),
dbc.Tooltip(
"Adjust the edge weight range (only the edge having the "
"weight in the selected range will be displayed)",
target="edgefreqslider-label",
placement="bottom",
),
])
frequencies_form = dbc.FormGroup([
dbc.Col([freq_input_group, node_range_group], width=6),
dbc.Col([edge_input_group, edge_range_group], width=6)
],
style={"margin-bottom": "0pt"},
row=True)
display_message = html.P("Displaying top 100 most frequent entities",
id="display-message")
top_n_button = dbc.Button("Show N most frequent",
color="primary",
className="mr-1",
id='top-n-button',
style={"margin": "5pt"})
top_n_slider = daq.NumericInput(
id="top-n-slider",
min=1,
max=1000,
value=top_n_slider_value if top_n_slider_value else 100,
className="mr-1",
disabled=False,
style={"margin": "5pt"})
show_all_button = dbc.Button("Show all entities",
id="show-all-button",
color="primary",
className="mr-1",
style={
"float": "right",
"margin": "5pt"
})
top_n_groups = dbc.InputGroup([
top_n_button,
dbc.Tooltip(
"Display N nodes with the highest paper occurrence frequency, "
"where N is defined by the slider on the right.",
target="top-n-button",
placement="top",
), top_n_slider, show_all_button,
dbc.Tooltip(
"Display all the nodes of the current graph.",
target="show-all-button",
placement="top",
)
],
style={"margin-bottom": "10pt"})
item_details_card = dbc.Card(
dbc.CardBody([
html.H5("", className="card-title"),
html.H6("", className="card-subtitle"),
html.P("", className="card-text"),
dbc.Button("", color="primary", id="see-more-card")
],
id="item-card-body"))
view_selection_card = dbc.Card(dbc.CardBody([
html.H6("View selection", className="card-title"), graph_type_dropdown,
display_message, top_n_groups, frequencies_form
]),
id="view-selection-card",
style={"margin-bottom": "10pt"})
cluster_group = dbc.InputGroup([
dbc.Label(html.Span("Group by", id="group-by-label"),
html_for="cluster_type"),
dbc.Tooltip(
"Select a grouping factor for the nodes.",
target="group-by-label",
placement="top",
),
dcc.Dropdown(id="cluster_type",
value=cluster_type,
options=[{
'label': val[0],
'value': val[1]
} for val in cluster_types],
style={"width": "100%"})
],
className="mb-1")
cluster_filter = dcc.Dropdown(id="clustersearch",
multi=True,
options=[{
"label": el,
"value": el
} for el in clustersearch],
value=clustersearch)
filter_by_cluster = dbc.FormGroup([
dbc.Label(html.Span("Groups to display", id="clustersearch-label"),
html_for="clustersearch"),
dbc.Tooltip(
"Only the nodes beloning to the groups selected in the field "
"below will be displayed. You click or start typing to add new "
"groups to display, or click on the cross icon to remove a group.",
target="clustersearch-label",
placement="top",
), cluster_filter,
dbc.Button("Add all groups",
color="primary",
className="mr-1",
id='addAllClusters',
style={"margin-top": "10pt"}),
dbc.Tooltip(
"Add all available node groups to display.",
target="addAllClusters",
placement="bottom",
)
],
style={"margin-top": "10pt"})
cluster_layout_button = dbc.InputGroup([
dbc.Checklist(
options=[{
"value": 1,
"disabled": False
}],
value=[],
id="groupedLayout",
switch=True,
),
dbc.Label("Grouped Layout", html_for="groupedLayout"),
])
cluster_selection_card = dbc.Card(dbc.CardBody([
html.H6("Grouping", className="card-title"), cluster_group,
filter_by_cluster, cluster_layout_button
]),
style={"margin-bottom": "10pt"})
nodes_to_keep = dbc.FormGroup([
dbc.Label(html.Span("Nodes to keep", id="nodestokeep-label"),
html_for="nodestokeep"),
dcc.Dropdown(id="nodestokeep",
multi=True,
options=[{
"label": n,
"value": n
} for n in nodes_to_keep],
value=nodes_to_keep,
placeholder="Nodes to fix in the view..."),
dbc.Tooltip(
"The selected nodes will be fixed in the graph view "
"and will not be filtered by 'top N' or group filters "
"(start typing to obtain the nodes to select from).",
target="nodestokeep-label",
placement="top",
)
], )
form = dbc.Form([
global_button_group,
nodes_to_keep,
view_selection_card,
cluster_selection_card,
])
legend = dbc.FormGroup([html.Div(id="cluster_board", children=[])])
# ------ Path search form --------
path_from = dbc.FormGroup([
dbc.Label(html.Span("From", id="searchpathfrom-label"),
html_for="searchpathfrom",
width=3),
dbc.Tooltip(
"Select a node to use as the source in the path search",
target="searchpathfrom-label",
placement="top",
),
dbc.Col(dcc.Dropdown(id="searchpathfrom",
value=searchpathfrom,
options=([{
"label": searchpathfrom,
"value": searchpathfrom
}] if searchpathfrom else [])),
width=9)
],
row=True)
path_to = dbc.FormGroup([
dbc.Label(html.Span("To", id="searchpathto-label"),
html_for="searchpathto",
width=3),
dbc.Tooltip(
"Select a node to use as the target in the path search",
target="searchpathto-label",
placement="top",
),
dbc.Col(dcc.Dropdown(id="searchpathto",
options=([{
"label": searchpathto,
"value": searchpathto
}] if searchpathto else []),
value=searchpathto),
width=9)
],
row=True)
neighbor_control_group = html.Div([
dbc.FormGroup([
dbc.Col(dbc.Button("Find top N neighbors",
color="primary",
className="mr-1",
id='bt-neighbors',
style={"float": "right"}),
width=10),
dbc.Tooltip(
"Search for the neighbors with the highest mutual information "
"score.",
target="bt-neighbors",
placement="top",
),
dbc.Col(daq.NumericInput(
id="neighborlimit", min=1, max=100, value=10,
className="mr-1"),
width=2),
],
row=True)
])
neighbor_view_card = dbc.Card(dbc.CardBody([], id="neighbors-card-body"),
style={
"overflow-y": "scroll",
"height": "150pt"
})
top_n_paths = dbc.FormGroup([
dbc.Label(html.Span("Top N", id="searchpathlimit-label"),
html_for="searchpathlimit",
width=3),
dbc.Tooltip(
"Set a number of best paths to search for (the best paths are the "
"ones that maximize the mutual information)",
target="searchpathlimit-label",
placement="top",
),
dbc.Col(daq.NumericInput(id="searchpathlimit",
min=1,
max=50,
value=searchpathlimit,
className="mr-1"),
width=9)
],
row=True)
path_condition = dbc.FormGroup([
dbc.Label("Traversal conditions"),
dbc.FormGroup([
dbc.Col([
dbc.Label(html.Span("Entity to traverse",
id="searchnodetotraverse-label"),
html_for="searchnodetotraverse"),
dbc.Tooltip(
"Select an entity to traverse in the path search (if "
"selected, the search is performed in two steps: "
"from the source to the selected entity, and from "
"the selected entity to the target)",
target="searchnodetotraverse-label",
placement="top",
),
dcc.Dropdown(id="searchnodetotraverse",
value=searchnodetotraverse,
options=([{
"label": searchnodetotraverse,
"value": searchnodetotraverse
}] if searchnodetotraverse else []))
],
width=6),
dbc.Col([
dbc.Label(html.Span("Allow Overlap",
id="searchpathoverlap-label"),
html_for="searchpathoverlap"),
dbc.Tooltip(
"If the overlap is allowed, then the the paths "
"from the source to the intermediate entity can go "
"through the same entities as the paths from the "
"intermediary to the target. Otherwise the paths "
"should go through distinct entities",
target="searchpathoverlap-label",
placement="top",
),
dbc.Checklist(
options=[{
"value": 1
}],
value=searchpathoverlap,
id="searchpathoverlap",
switch=True,
)
],
width=6)
],
row=True)
])
nested_path = dbc.FormGroup([
dbc.Label("Nested path search"),
dbc.FormGroup([
dbc.Col(children=[
dbc.Label(html.Span("Nested", id="nestedpaths-label"),
html_for="nestedpaths"),
dbc.Tooltip(
"If enabled, the nested paths are found, i.e. for "
"every edge found in a path we search for other N "
"best paths from the source to the target of this "
"edge for <depth> times",
target="nestedpaths-label",
placement="top",
),
dbc.Checklist(
options=[{
"value": 1
}],
value=nestedpaths,
id="nestedpaths",
switch=True,
)
],
width=6),
dbc.Col([
dbc.Label(html.Span("Depth", id="pathdepth-label"),
html_for="pathdepth"),
dbc.Tooltip(
"Select the depth of nesting indicating for how many "
"iterations we expand the encountered edges into the "
"best paths.",
target="pathdepth-label",
placement="top",
),
daq.NumericInput(id="pathdepth",
min=1,
max=4,
value=pathdepth,
disabled=True,
className="mr-1")
],
width=6)
],
row=True)
])
search_path = dbc.InputGroup([
html.P("",
id="noPathMessage",
style={
"color": "red",
"margin-right": "10pt"
}),
dbc.Button(html.Span([html.I(className="fas fa-route"), " Find Paths"
]),
color="primary",
className="mr-1",
id='bt-path',
style={"float": "right"}),
dbc.Tooltip(
"Find paths between selected entities",
target="bt-path",
placement="bottom",
)
],
style={"float": "right"})
expand_edge = dbc.FormGroup([
dbc.Label("Edge expansion"),
dbc.FormGroup([
dbc.Col(dbc.Button("Expand edge",
color="primary",
className="mr-1",
id='bt-expand-edge',
disabled=True),
width=6),
dbc.Col(dbc.Label("N best paths",
html_for="expand-edge-n",
style={"margin-top": "5pt"}),
width=3),
dbc.Col(daq.NumericInput(
id="expand-edge-n", min=1, max=20, value=5, className="mr-1"),
width=3),
],
row=True)
])
form_path_finder = dbc.Form([
path_from, path_to, top_n_paths,
html.Hr(), path_condition,
html.Hr(), nested_path,
html.Hr(), expand_edge,
html.Hr(), search_path
])
graph_layout = dbc.FormGroup([
dbc.Label("Layout", html_for="searchdropdown", width=3),
dbc.Col(dcc.Dropdown(id='dropdown-layout',
options=[{
'label':
"{}{}".format(
val.capitalize(),
" ({})".format(graph_layout_options[val])
if graph_layout_options[val] else ""),
'value':
val
} for val in graph_layout_options.keys()],
value=current_layout,
clearable=False),
width=9)
],
row=True)
node_shape = dbc.FormGroup([
dbc.Label("Node Shape", html_for="dropdown-node-shape", width=3),
dbc.Col(dcc.Dropdown(id='dropdown-node-shape',
value='ellipse',
clearable=False,
options=([{
'label': val.capitalize(),
'value': val
} for val in node_shape_option_list])),
width=9)
],
row=True)
link_color_picker = dbc.FormGroup([
dbc.Col(
daq.ColorPicker(id='input-follower-color',
value=dict(rgb=dict(r=190, g=36, b=37, a=0)),
label="Highlight Color"))
],
row=True)
conf_form = dbc.Form([graph_layout, node_shape, link_color_picker])
# ---- Create a layout from components ----------------
cyto = cyto_module.Cytoscape(
id='cytoscape',
elements=elements,
stylesheet=CYTOSCAPE_STYLE_STYLESHEET,
style={
"width": "100%",
"height": "100%"
},
)
layout = html.Div([
dcc.Store(id='memory',
data={
"removed_nodes": [],
"removed_edges": [],
"added_nodes": [],
"added_edges": [],
"filtered_elements": [],
"removed_elements": {},
"renamed_elements": {},
"merging_backup": {
"added_elements": [],
"removed_elements": {}
},
"paper_backup": {}
}),
dbc.Row([]),
dbc.Row([
dbc.Col([
html.Div(style=VISUALIZATION_CONTENT_STYLE,
children=[cyto],
id="cyto-container"),
html.Div([
dcc.Loading(id="loading",
children=[html.Div(id="loading-output")],
type="default"),
],
id="loader-container",
className="fixed-top",
style={
"width": "60pt",
"height": "60pt",
"margin": "20pt"
}),
html.Div([
search,
],
id="search-container",
className="fixed-top",
style={
"width": "30%",
"margin-left": "80pt"
}),
html.Div([
dbc.Button(html.Span(
[html.I(className="fas fa-binoculars"), " Legend"]),
id="toggle-legend",
color="primary",
className="mr-1"),
dbc.Button(html.Span(
[html.I(className="fas fa-search-plus"), " Details"]),
id="toggle-details",
color="primary",
className="mr-1"),
dbc.Button(html.Span(
[html.I(className="fas fa-pen"), " Editing"]),
id="toggle-edit",
color="primary",
className="mr-1"),
dbc.Button(html.Span([
html.I(className="fas fa-star-of-life"), " Neighbors"
]),
id="toggle-neighbors",
color="primary",
className="mr-1"),
dbc.Button(html.Span(
[html.I(className="fas fa-angle-down"), ""]),
id="toggle-hide",
color="light",
className="mr-1"),
dbc.Collapse(dbc.Card([
dbc.CardHeader([
html.H6("Legend (colored by Entity Type)",
className="card-title",
style={"margin-bottom": "0pt"},
id="legend-title")
],
style={"margin-botton": "0pt"}),
dbc.CardBody([legend]),
],
style={"height": "100%"}),
style={"height": "150pt"},
id="collapse-legend"),
dbc.Collapse(dbc.Card([
dbc.CardHeader([
html.H6("Details",
className="card-title",
style={"margin-bottom": "0pt"})
],
style={"margin-botton": "0pt"}),
dbc.CardBody([item_details_card],
style={"overflow-y": "scroll"})
],
style={"height": "100%"}),
style={"height": "250pt"},
id="collapse-details"),
dbc.Collapse(dbc.Card([
dbc.CardHeader([
html.H6("Edit graph",
className="card-title",
style={"margin-bottom": "0pt"})
],
style={"margin-botton": "0pt"}),
dbc.CardBody([
dbc.Row([
dbc.Col([editing_mode_radio], width=5),
dbc.Col([edit_button_group], width=7)
])
])
],
style={"height": "100%"}),
style={"height": "150pt"},
id="collapse-edit"),
dbc.Collapse(dbc.Card([
dbc.CardHeader([
html.H6("Neighbors view",
className="card-title",
style={"margin-bottom": "0pt"})
],
style={"margin-botton": "0pt"}),
dbc.CardBody(
[neighbor_control_group, neighbor_view_card])
],
style={"height": "100%"}),
style={"height": "250pt"},
id="collapse-neighbors"),
],
className="fixed-bottom",
style={
"width": "55%",
})
],
width=8),
dbc.Col(html.Div(children=[
dbc.Button(html.Span(
[html.I(className="fas fa-cog"), " Controls"]),
id="collapse-button",
color="primary",
style={
"margin": "10pt",
"margin-left": "60%"
}),
dbc.Collapse(dbc.Tabs(
id='tabs',
children=[
dbc.Tab(id="graph-view-tab",
label='Graph view',
label_style={
"color": "#00AEF9",
"border-radius": "4px",
"background-color": "white"
},
children=[dbc.Card(dbc.CardBody([form]))]),
dbc.Tab(id="layout-tab",
label='Layout',
label_style={
"color": "#00AEF9",
"border-radius": "4px",
"background-color": "white"
},
children=[dbc.Card(dbc.CardBody([conf_form]))
]),
dbc.Tab(id="path-finder-tab",
label='Path finder',
label_style={
"color": "#00AEF9",
"border-radius": "4px",
"background-color": "white"
},
children=[
dbc.Card(dbc.CardBody([form_path_finder]))
])
]),
id="collapse"),
]),
width=4)
])
],
style={"overflow-x": "hidden"})
return cyto, layout, dropdown_items, cluster_filter
font = [
"Arial", "Open Sans", "Balto", "Courier New", "PT Sans Narrow",
"Times New Roman", "Comic Sans MS", "cursive"
]
layout = html.Div([
html.Div([html.H1("Financial Statistics by Age")],
style={'textAlign': "center"}),
html.Div([
html.Div([
html.Div(
[
daq.ColorPicker(
id='my-color-picker',
label='Select Color : Marker & Title',
value={"hex": "#E6738D"},
)
],
className="row",
style={
"margin-left": "auto",
"margin-right": "auto",
"width": "100%",
"padding": 20
}),
html.Div(
[
html.Span("Select Font Style : ",
className="six columns",
style={
def image_edit_tab(app):
return html.Div([
content_header('Image Editing', 'Draw on images'),
html.P('Users can edit images directly by drawing on them, or just draw on a blank canvas!'),
html.Br(),
html.P('Step 1: Upload an image (optional)'),
html.P('Step 2: Start drawing!'),
html.Div([
# Left item
html.Div([
html.Div([
dcc.Upload([
html.Img(src=app.get_asset_url('upload.svg')),
html.Span('Drag and drop image here, or click to upload')
],
id='upload-image',
multiple=False
),
],
id='div-image-input',
className='div-with-image small-image'
),
html.Br(),
html.Div([
DashCanvas(
id='image-canvas',
width=600,
height=400,
goButtonTitle='Save',
hide_buttons=['zoom', 'line', 'rectangle', 'select'],
),
html.Button(
'clear',
id='button-canvas-clear',
style={
'float': 'right',
'transform': 'translateY(-58px)'
}
)
],
id='div-image-output'
)
],
className='custom-dark-div custom-div-left custom-div-space-above custom-div-large-full'
),
# Right item
html.Div([
html.P('Brush width'),
daq.Knob(
id='knob-canvas',
min=2,
max=40,
value=5
),
html.Button(
html.P('-', style={'font-size': '2em'}),
id='button-image-minus',
style={
'display': 'inline-block',
'margin': 0,
'margin-right': '10px',
'transform': 'translateY(-50px)',
}
),
html.Button(
html.P('+', style={'font-size': '2em'}),
id='button-image-plus',
style={
'display': 'inline-block',
'margin': 0,
'transform': 'translateY(-50px)',
}
),
html.P('Brush colour'),
daq.ColorPicker(
id='image-color-picker',
label=' ',
value=dict(hex='#119DFF'),
style={
'border': 'none',
'overflow': 'hidden'
}
)
],
className='custom-div-center custom-div-space-above custom-div-smaller'
),
# Bottom item
html.Div(
id='image-result'
)
],
className='custom-container'
)
])
],
value='SIN',
labelStyle={'display': 'inline-block'},
style={
'margin': '30px auto 0px auto',
'display': 'flex',
'width': '80%',
'alignItems': 'center',
'justifyContent': 'space-between'
})
],
className='row power-settings-tab'),
html.Hr(),
daq.ColorPicker(id="color-picker",
label="Color Picker",
value=dict(hex="#447EFF"),
size=164,
theme={'dark': True}),
],
className='four columns left-panel'),
# Oscillator Panel - Right
html.Div([
html.Div([html.H3("GRAPH", id="graph-title")], className='Title'),
dcc.Tabs(
tabs=tabs,
value=1,
id='tabs',
style={
'backgroundColor': '#447EFF',
'height': '80%'
html.P("Schemat koloru punktów wykresu"),
dcc.Dropdown
(
id='color-theme',
value='rdbu',
options=[{"value": x, "label": x}
for x in px.colors.named_colorscales()]
),
html.Br(),
daq.ColorPicker
(
label='Kolor tła wykresu:',
id='background-plot-color-picker',
value=dict(hex='#DFE2E2')
),
html.P("Zakres koloru punktów dla wykresu:"),
dcc.RangeSlider
(
id='color-range-slider',
min=0,
max=500,
step=0.5,
marks={0: '0',
50: '50',
100: '100',
150: '150',
'label': 'Bar',
'value': 'bar'
}, {
'label': 'Scatter',
'value': 'scatter'
}, {
'label': 'Line',
'value': 'line'
}, {
'label': 'Pie',
'value': 'pie'
}],
value='bar',
disabled=False),
html.Div(id='dd_val'),
daq.ColorPicker(
id='my-color-picker', label='Color Picker', value=dict(hex='#2a20aa')),
dcc.Input(id='main_title', type='text', value='',
placeholder='Main Title'),
dcc.Input(id='xtitle', type='text', value='', placeholder='X axis'),
dcc.Input(id='ytitle', type='text', value='', placeholder='Y axis'),
],
width=2)
#*********************************************************************
#Layout1
layout1 = html.Div([
dbc.Container([
dbc.Row([leftside_col, center_col, rightside_col]),
],
fluid=True)
])
def layout():
return html.Div(
id='forna-body',
className='app-body',
children=[
html.Div(
id='forna-control-tabs',
className='control-tabs',
children=[
dcc.Tabs(
id='forna-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 FornaContainer?'),
dcc.Markdown('''
FornaContainer is a force-directed graph that is
used to represent the secondary structure of nucleic
acids (i.e., DNA and RNA).
In the "Add New" tab, you can enter a sequence
by specifying the nucleotide sequence and the
dot-bracket representation of the secondary
structure.
In the "Sequences" tab, you can select which
sequences will be displayed, as well as obtain
information about the sequences that you have
already created.
In the "Colors" tab, you can choose to color each
nucleotide according to its base, the structural
feature to which it belongs, or its position in
the sequence; you can also specify a custom color
scheme.
The example RNA molecule shown has ID
[PDB_01019](http://www.rnasoft.ca/strand/show_results.php?molecule_ID=PDB_01019)
on the [RNA Strand](http://www.rnasoft.ca/strand/) database.
''')
])),
dcc.Tab(
label='Add New',
value='add-sequence',
children=html.Div(
className='control-tab',
children=[
html.Div(
title=
'Enter a dot-bracket string and a nucleotide sequence.',
className='app-controls-block',
children=[
html.Div(
className=
'fullwidth-app-controls-name',
children='Sequence'),
html.Div(
className=
'app-controls-desc',
children=
'Specify the nucleotide sequence as a string.'
),
dcc.Input(id='forna-sequence',
placeholder=
initial_sequences[
'PDB_01019']
['sequence']),
html.Br(),
html.Br(),
html.Div(
className=
'fullwidth-app-controls-name',
children='Structure'),
html.Div(
className=
'app-controls-desc',
children=
'Specify the RNA secondary structure '
'with a dot-bracket string.'
),
dcc.Input(id='forna-structure',
placeholder=
initial_sequences[
'PDB_01019']
['structure']),
]),
html.Div(
title=
'Change some boolean properties.',
className='app-controls-block',
children=[
html.Div(
className=
'app-controls-name',
children='Apply force'),
daq.BooleanSwitch(
id='forna-apply-force',
on=True,
color='#85002D'),
html.Div(
className=
'app-controls-desc',
children=
'Indicate whether the force-directed layout '
+
'will be applied to this molecule.'
),
html.Br(),
html.Div(
className=
'app-controls-name',
children=
'Circularize external'),
daq.BooleanSwitch(
id=
'forna-circularize-external',
on=True,
color='#85002D'),
html.Div(
className=
'app-controls-desc',
children=
'Indicate whether the external loops '
+
'should be forced to be arranged in a circle.'
),
html.Br(),
html.Div(
className=
'app-controls-name',
children='Avoid others'),
daq.BooleanSwitch(
id='forna-avoid-others',
on=True,
color='#85002D'),
html.Div(
className=
'app-controls-desc',
children=
'Indicate whether this molecule should '
+
'"avoid" being close to other molecules.'
),
html.Br(),
html.Div(
className=
'app-controls-name',
children='Label interval'),
dcc.Slider(
id='forna-label-interval',
min=1,
max=10,
value=5,
marks={
i + 1: str(i + 1)
for i in range(10)
}),
html.Div(
className=
'app-controls-desc',
children=
'Indicate how often nucleotides are '
+
'labelled with their number.'
)
]),
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'fullwidth-app-controls-name',
children='ID'),
html.Div(
className=
'app-controls-desc',
children=
'Specify a unique ID for this sequence.'
),
dcc.Input(
id='forna-id',
placeholder='PDB_01019')
]),
html.Hr(),
html.Div(id='forna-error-message'),
html.Button(
id='forna-submit-sequence',
children='Submit sequence'),
])),
dcc.Tab(
label='Sequences',
value='show-sequences',
children=html.Div(
className='control-tab',
children=[
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'fullwidth-app-controls-name',
children=
'Sequences to display'),
html.Div(
className=
'app-controls-desc',
children=
'Choose the sequences to display by ID.'
),
html.Br(),
dcc.Dropdown(
id=
'forna-sequences-display',
multi=True,
clearable=True,
value=['PDB_01019'])
]),
html.Hr(),
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'app-controls-block',
children=[
html.Div(
className=
'fullwidth-app-controls-name',
children=
'Sequence information by ID'
),
html.Div(
className=
'app-controls-desc',
children=
'Search for a sequence by ID '
+
'to get more information.'
),
html.Br(),
dcc.Dropdown(
id=
'forna-sequences-info-search',
clearable=True),
html.Br(),
html.Div(
id=
'forna-sequence-info'
)
])
])
])),
dcc.Tab(
label='Colors',
value='colors',
children=html.Div(
className='control-tab',
children=[
html.Div(className='app-controls-name',
children='Color scheme'),
dcc.Dropdown(
id='forna-color-scheme',
options=[{
'label':
color_scheme,
'value':
color_scheme
} for color_scheme in [
'sequence', 'structure',
'positions', 'custom'
]],
value='sequence',
clearable=False),
html.Div(
className='app-controls-desc',
id='forna-color-scheme-desc',
children=
'Choose the color scheme to use.'),
html.Div(
id='forna-custom-colorscheme',
className='app-controls-block',
children=[
html.Hr(),
html.Div(
className=
'app-controls-name',
children='Molecule name'),
dcc.Dropdown(
id=
'forna-custom-colors-molecule'
),
html.Div(
className=
'app-controls-desc',
children=
'Select the sequence to which the custom '
+
'color scheme will be applied. If none is selected, '
+
'the color scheme will be applied to all molecules.'
),
html.Br(),
html.Div(
className=
'app-controls-name',
children='Coloring range'),
daq.ColorPicker(
id='forna-color-low',
label='Low',
labelPosition='top',
value={'hex': '#BE0000'}),
daq.ColorPicker(
id='forna-color-high',
label='High',
labelPosition='top',
value={'hex': '#336AFF'}),
html.Div(
className=
'fullwidth-app-controls-name',
children='Coloring domain'
),
html.Div(
className=
'app-controls-desc',
children=
'Specify a minimum and maximum value '
+
'which will be used to calculate intermediate '
+
'colors for nucleotides that have a numerical '
+
'value specified below.'),
html.Br(),
dcc.Input(
id='forna-color-domain-low',
type='number',
value=1),
dcc.Input(
id=
'forna-color-domain-high',
type='number',
value=100),
html.Br(),
html.Br(),
html.Div(
className=
'fullwidth-app-controls-name',
children='Colors map'),
html.Div(
className=
'app-controls-desc',
children=
'Specify the colors for each '
+
'nucleotide by entering the position of '
+
'the nucleotide into the left input box, '
+
'and either a) a string representation '
+
'of a color or b) a number within the '
+
'range specified above. Then, press the '
+ '"Submit" button,'),
html.Br(),
dcc.Input(
id=
'forna-color-map-nucleotide',
type='number',
min=1,
placeholder=1),
dcc.Input(
id='forna-color-map-color',
placeholder='green'),
html.Br(),
html.Br(),
html.Button(
id=
'forna-submit-custom-colors',
children='Submit')
])
]))
])
]),
html.Div(id='forna-container',
children=[
dash_bio.FornaContainer(id='forna',
height=500,
width=500)
]),
dcc.Store(id='forna-sequences', data=initial_sequences),
dcc.Store(id='forna-custom-colors')
])
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_daq as daq
app = dash.Dash(__name__)
app.layout = html.Div(
[daq.ColorPicker(id='my-daq-colorpicker', label="ColorPicker")])
if __name__ == '__main__':
app.run_server(debug=True)
import dash
import dash_daq as daq
import dash_html_components as html
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
daq.ColorPicker(id='my-color-picker',
label='Color Picker',
value=dict(hex='#119DFF')),
html.Div(id='color-picker-output')
])
@app.callback(dash.dependencies.Output('color-picker-output', 'children'),
[dash.dependencies.Input('my-color-picker', 'value')])
def update_output(value):
return 'The selected color is {}.'.format(value)
if __name__ == '__main__':
app.run_server(debug=True)
html.H5(
"LED Color",
id="led-title",
style={
"textAlign": "center",
"paddingTop": "5%"
},
),
html.Div([
daq.ColorPicker(
id="led-control",
label=" ",
size=130,
value={
"rgb": {
"r": 17,
"g": 157,
"b": 255,
"a": 1,
}
},
)
]),
],
style={
"border": "1px solid #2a3f5f",
"border-radius": "5px",
"marginBottom": "5%",
"paddingBottom": "19%",
},
),
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'),
]),
id="rainbow-switch",
on=False,
label="Rainbow",
vertical=True,
labelPosition="top",
className="one columns",
style={"width": "6%"},
disabled=False,
color="",
),
html.Div(
[
daq.ColorPicker(
id="color-picker",
size=164,
value={"hex": "#19AC51"},
label="Color Picker",
style={"textAlign": "right"},
)
],
className="two columns",
style={"width": "18.333%"},
),
],
className="row",
style={
"display": "flex",
"justify-content": "center",
"align-items": "center",
},
),
line=dict(color="darkblue", width=8)),
)
app = dash.Dash(__name__)
app.layout = html.Div([
html.H3("Drag and draw annotations"),
dcc.Graph(id="graph-styled-annotations", figure=fig),
html.Pre('Opacity of annotations'),
dcc.Slider(id="opacity-slider",
min=0,
max=1,
value=0.5,
step=0.1,
tooltip={'always_visible': True}),
daq.ColorPicker(id="annotation-color-picker",
label="Color Picker",
value=dict(hex="#119DFF")),
])
@app.callback(
Output("graph-styled-annotations", "figure"),
Input("opacity-slider", "value"),
Input("annotation-color-picker", "value"),
prevent_initial_call=True,
)
def on_style_change(slider_value, color_value):
fig = px.imshow(img)
fig.update_layout(
dragmode="drawrect",
newshape=dict(opacity=slider_value, fillcolor=color_value["hex"]),
selected_rows=[],
style_cell={'width': '150px'},
n_fixed_rows=1,
pagination_mode="fe",
pagination_settings={
"displayed_pages": 1,
"current_page": 0,
"page_size": 5,
},
navigation="page",
),
]),
html.Div([
daq.ColorPicker(
id='my-color-picker',
label='Color Picker',
value={"hex": "#0B6AAD"},
),
]),
html.Br(),
html.Hr(),
html.Div(
[
html.Div([
html.H5("Visualize"),
# sd_material_ui.IconButton(id='barChartIcon',
# iconClassName='far fa-chart-bar',
# iconStyle={ 'width': 100, 'height': 100, 'fontSize':40},
# ),
dcc.Dropdown(
id='dropdown_viz',
ColorPicker = html.Div(children=[
html.H1('Color Picker Examples and Reference'),
html.Hr(),
html.H3('Default Color Picker'),
html.P("An example of a default Color Picker without \
any extra properties."),
reusable_components.Markdown(
examples['color-picker'][0],
style=styles.code_container
),
html.Div(
examples['color-picker'][1],
className='example-container',
style={'overflow-x': 'initial'}
),
html.Hr(),
html.H3('Size'),
reusable_components.Markdown("Set the size (width) of the color picker in pixels using the `size` property."),
ComponentBlock('''import dash_daq as daq
daq.ColorPicker(
label="Small",
size=164,
)''', style=styles.code_container),
html.Hr(),
html.H3('Label'),
reusable_components.Markdown("Define the label and label position using the `label` and `labelPosition` \
properties."),
ComponentBlock('''import dash_daq as daq
daq.ColorPicker(
label="Label",
labelPosition="bottom"
)''', style=styles.code_container),
html.Hr(),
html.H3('Disabled'),
reusable_components.Markdown("To disable the Color Picker set `disabled` to `True`."),
ComponentBlock('''import dash_daq as daq
daq.ColorPicker(
label='Color Picker',
disabled=True,
)''', style=styles.code_container),
html.Hr(),
html.H3('Hex Colors'),
reusable_components.Markdown("Use hex values with the Color Picker by setting `value=dict(hex='#<hex_color>')`"),
ComponentBlock('''import dash_daq as daq
daq.ColorPicker(
label='Color Picker',
value=dict(hex="#0000FF"),
)''', style=styles.code_container),
html.Hr(),
html.H3('RGB Colors'),
reusable_components.Markdown("Use RGB color values with the Color Picker by setting: \
\n `value=(rgb=dict(r=<r_value>, g=<g_value>, b=<b_value>, a=<a_value>)`"),
ComponentBlock('''import dash_daq as daq
daq.ColorPicker(
label='Color Picker',
value=dict(rgb=dict(r=255, g=0, b=0, a=0))
)''', style=styles.code_container),
html.Hr(),
html.Hr(),
html.H3("Color Picker Properties"),
generate_prop_info('ColorPicker', lib=daq)
])
'secondary': '#6E6E6E',
}
rootLayout = html.Div([
daq.BooleanSwitch(
on=True,
id='darktheme-daq-booleanswitch',
className='dark-theme-control'
), html.Br(),
daq.ToggleSwitch(
id='darktheme-daq-toggleswitch',
className='dark-theme-control'
), html.Br(),
daq.ColorPicker(
value=17,
id='darktheme-daq-colorpicker',
className='dark-theme-control'
), html.Br(),
daq.Gauge(
min=0,
max=10,
value=6,
color=theme['primary'],
id='darktheme-daq-gauge',
className='dark-theme-control'
), html.Br(),
daq.GraduatedBar(
value=4,
color=theme['primary'],
id='darktheme-daq-graduatedbar',
className='dark-theme-control'
def layout():
return html.Div(
id='vp-page-content',
className='app-body',
children=[
dcc.Loading(className='dashbio-loading',
children=html.Div(
id='vp-graph-div',
children=dcc.Graph(id='vp-graph'),
)),
html.Div(
id='vp-control-tabs',
className='control-tabs',
children=[
dcc.Tabs(
id='vp-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 Volcano Plot?'),
html.
P('You can use Volcano Plot to interactively '
'identify clinically meaningful markers in '
'genomic experiments, i.e., markers that are '
'statistically significant and have an effect '
'size greater than some threshold. '
'Specifically, volcano plots depict the negative '
'log-base-10 p-values plotted against their '
'effect size.'),
html.
P('In the "Data" tab, you can select a dataset '
'to view on the plot. In the "View" tab, you '
'can control the color of the highlighted '
'points, as well as the threshold lines that '
'define which values are significant. You can '
'also access metadata from hovering and '
'clicking on the graph.')
])),
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='Dataset: '),
dcc.Dropdown(
id='vp-dataset-dropdown',
options=[{
'label':
DATASETS[dset]
['label'],
'value':
dset
} for dset in DATASETS],
value='SET2')
])
])),
dcc.Tab(
label='View',
value='view',
children=html.Div(
className='control-tab',
children=[
html.Div(
className='app-controls-block',
children=[
html.Div(className=
'app-controls-name',
children=
'Effect size bounds'),
dcc.RangeSlider(
id='vp-bound-val',
min=-4,
max=4,
value=[-1, 1],
step=0.01,
marks={
str(num): str(num)
for num in range(
-4, 5)
})
]),
html.Div(
className='app-controls-block',
children=[
html.Div(
className=
'app-controls-name',
children='Threshold',
),
dcc.Slider(
id='vp-genomic-line-val',
value=4,
max=10,
min=0,
step=0.01,
marks={
str(num): str(num)
for num in range(
0, 11, 2)
}),
]),
html.Div(
className='app-controls-block',
children=[
daq.ColorPicker(
id='vp-color-picker',
value=dict(hex="#0000FF"),
size=150,
),
html.Div(
id='vp-num-points-display',
children=[
html.Div(
title=
'Number of points in the upper left',
children=[
daq.LEDDisplay(
className=
'vp-input-like',
label=
'Upper left points',
id=
'vp-upper-left',
size=25,
color=
'#19D3F3'),
html.Div(
className=
'vp-test-util-div',
id=
'vp-upper-left-val'
)
]),
html.Br(),
html.Div(
className=
'vp-vertical-style',
title=
'Number of points in the upper right',
children=[
daq.LEDDisplay(
className=
'vp-input-like',
label=
'Upper right points',
id=
'vp-upper-right',
size=25,
color=
'#19D3F3'),
html.Div(
className=
'vp-test-util-div',
id=
'vp-upper-right-val'
)
]),
],
)
]),
html.Hr(),
html.Div(id='vp-event-data')
]))
])
])
])
import dash
import dash_daq as daq
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
defaultColor = '#000000'
colorPicker = html.Div([
daq.ColorPicker(
id='my-color-picker',
label='Pick A Color',
value={'hex': defaultColor}
),
html.Div(id='color-picker-output')
])
popover = html.Div(
[
html.P(
["Click on the word ", html.Span("popover", id="popover-target")]
),
dbc.Popover(
[
#dbc.PopoverHeader("Popover header"),
#dbc.PopoverBody("Popover body"),
colorPicker,
dbc.Button("OK", color="primary", outline=True, size="sm", id='ok-color-button'),
dbc.Button("Cancel", color="primary", outline=True, size="sm", id='cancel-color-button'),
className="three columns",
),
],
className="row",
),
html.Div(
[
html.Div(
daq.LEDDisplay(id="my-leddisplay", value="40",
color="#39FF14"),
className="four columns",
),
html.Div(
daq.ColorPicker(
id="my-colorpicker",
label="Choose display color",
value={"hex": "#39FF14"},
),
className="three columns",
),
],
className="row",
),
])
# *************************************************************************
# must have Dash 1.16.0 or higher for this to work
@app.callback(
Output("my-thermometer", "value"),
Output("my-leddisplay", "value"),
id="dark-theme-components",
className="left-panel-controls",
children=DarkThemeProvider(
theme=theme,
children=[
power_setting_div(None, "1"),
function_setting_div(None, "1"),
],
),
),
html.Div(
className="left-panel-color-picker",
children=[
daq.ColorPicker(
id="color-picker",
label=" ",
value=dict(hex="#0054A6"),
size=164,
)
],
),
],
)
],
),
# RIGHT PANEL - OSCILLATIONS
html.Div(
className="seven columns",
children=[
html.Div(
id="right-panel",
className="right-panel",
# html.Div(children=list_string, id='stored-data', style={'display':'none'})
], style={'columnCount':2}),
html.Div([
html.Div([
DashCanvas(id='canvas-color')], style={'display':'flex','align-items': 'center', 'justify-content': 'center'}),
html.Div([
html.H6(children=['Brush width'])],style={'display':'flex','align-items': 'center', 'justify-content': 'center'}),
dcc.Slider(
id='bg-width-slider',
min=2,
max=40,
step=1,
value=5
),
daq.ColorPicker(
id='color-picker',
label='Brush color',
value=dict(hex='#119DFF'))
])
])
@app.callback(Output('image', 'figure'),
[Input('my-slider', 'value')])
def update_figure(slider_value):
#dff = df[slider_value]
#image = dff.values.reshape(256,256,3)
displayed_image = image_library[slider_value]
fig = px.imshow(displayed_image)
fig.update_layout(clickmode='event+select', coloraxis_showscale=False)
fig.update_layout(coloraxis_showscale=False)
fig.update_xaxes(showticklabels=False)
