options=parse_options({
'Active Power': 'P',
'Reactive Power': 'Q',
'Apparent Power': 'S',
'Voltage': 'V',
'Current': 'I',
'THD': 'Hd',
}),
value='V')
],
className='inputGroup inline p-2')
anomal_plot = dbc.Card([
dbc.CardHeader('3-Phase Unbalances Detection', className='card_header'),
variable_picker,
dcc.Loading(dcc.Graph(id='anomalies_plot', style=dict(height='300px')),
type="default"),
],
color="dark",
outline=True)
##################
# voltage excursion
##################
vex_input = html.Div(children=[
html.Div('MA Window (Days): ',
className='inputGroup__label d-inline-block'),
daq.NumericInput(id='vex_ma_range',
min=1,
value=10,
max=60,
className='inputGroup__input d-inline-block')
className="row app-row",
children=[
html.Div(
id="dropdown-container",
className="one-half column",
children=[
html.Label("Select a City",
className="select-city-label"),
dcc.Dropdown(id='demo-dropdown', multi=True),
],
)
],
),
dcc.Loading(id='loading',
children=[
html.Div(id='graph-container',
className="u-max-full-width"),
]),
html.Div(id='ticker-text', className="row ticker-text"),
dcc.Interval(id='interval',
interval=server.config["UPDATE_INTERVAL"],
n_intervals=0),
dcc.Markdown(
"Matthew Krump | [matthewkrump.com](https://matthewkrump.com/) | Rendered by [Dash](https://plotly.com/dash/)",
id='footer',
className="footer",
)
],
)
def charts_layout(df, settings, **inputs):
"""
Builds main dash inputs with dropdown options populated with the columns of the dataframe associated with the
page. Inputs included are: chart tabs, query, x, y, z, group, aggregation, rolling window/computation,
chart per group toggle, bar sort, bar mode, y-axis range editors
:param df: dataframe to drive the charts built on page
:type df: :class:`pandas:pandas.DataFrame`
:param settings: global settings associated with this dataframe (contains properties like "query")
:type param: dict
:return: dash markup
"""
[chart_type, x, y, z, group, agg] = [inputs.get(p) for p in ['chart_type', 'x', 'y', 'z', 'group', 'agg']]
y = y or []
show_input = show_input_handler(chart_type)
show_cpg = show_chart_per_group(**inputs)
show_yaxis = show_yaxis_ranges(**inputs)
bar_style = bar_input_style(**inputs)
options = build_input_options(df, **inputs)
x_options, y_multi_options, y_single_options, z_options, group_options, barsort_options, yaxis_options = options
query_placeholder = (
"Enter pandas query (ex: col1 == 1)"
)
query_label = html.Div([
html.Span('Query'),
html.A(html.I(className='fa fa-info-circle ml-4'),
href='https://pandas.pydata.org/pandas-docs/stable/user_guide/indexing.html#indexing-query',
target='_blank', style={'color': 'white'})
], className='input-group-addon', style={'min-width': '7em'})
return html.Div([
dcc.Store(id='query-data', data=inputs.get('query')),
dcc.Store(id='input-data', data={k: v for k, v in inputs.items() if k not in ['cpg', 'barmode', 'barsort']}),
dcc.Store(id='chart-input-data', data={k: v for k, v in inputs.items() if k in ['cpg', 'barmode', 'barsort']}),
dcc.Store(id='range-data'),
dcc.Store(id='yaxis-data', data=inputs.get('yaxis')),
dcc.Store(id='last-chart-input-data', data=inputs),
dcc.Input(id='chart-code', type='hidden'),
html.Div(html.Div(dcc.Tabs(
id='chart-tabs',
value=chart_type or 'line',
children=[build_tab(t.get('label', t['value'].capitalize()), t['value']) for t in CHARTS],
style=dict(height='36px')
), className='col-md-12'), className='row pt-3 pb-3 charts-filters'),
html.Div(html.Div([
html.Div([
query_label, dcc.Input(
id='query-input', type='text', placeholder=query_placeholder, className='form-control',
value=inputs.get('query') or settings.get('query'), style={'line-height': 'inherit'})
], className='input-group mr-3')],
className='col'
), className='row pt-3 pb-3 charts-filters'),
html.Div([
build_input('X', dcc.Dropdown(
id='x-dropdown',
options=x_options,
placeholder='Select a column',
value=x,
style=dict(width='inherit'),
)),
build_input('Y', dcc.Dropdown(
id='y-multi-dropdown',
options=y_multi_options,
multi=True,
placeholder='Select a column(s)',
style=dict(width='inherit'),
value=y if show_input('y', 'multi') else None
), className='col', id='y-multi-input', style={'display': 'block' if show_input('y', 'multi') else 'none'}),
build_input('Y', dcc.Dropdown(
id='y-single-dropdown',
options=y_single_options,
placeholder='Select a column',
style=dict(width='inherit'),
value=y[0] if show_input('y') and len(y) else None
), className='col', id='y-single-input', style={'display': 'block' if show_input('y') else 'none'}),
build_input('Z', dcc.Dropdown(
id='z-dropdown',
options=z_options,
placeholder='Select a column',
style=dict(width='inherit'),
value=z
), className='col', id='z-input', style={'display': 'block' if show_input('z') else 'none'}),
build_input('Group', dcc.Dropdown(
id='group-dropdown',
options=group_options,
multi=True,
placeholder='Select a group(s)',
value=group,
style=dict(width='inherit'),
), className='col', id='group-input', style={'display': 'block' if show_input('group') else 'none'}),
], className='row pt-3 pb-3 charts-filters'),
html.Div([
build_input('Aggregation', dcc.Dropdown(
id='agg-dropdown',
options=[build_option(v, AGGS[v]) for v in ['count', 'nunique', 'sum', 'mean', 'rolling', 'corr',
'first', 'last', 'median', 'min', 'max', 'std', 'var',
'mad', 'prod']],
placeholder='Select an aggregation',
style=dict(width='inherit'),
value=agg,
)),
html.Div([
build_input('Window', dcc.Input(
id='window-input', type='number', placeholder='Enter days', className='form-control text-center',
style={'line-height': 'inherit'}, value=inputs.get('window')
)),
build_input('Computation', dcc.Dropdown(
id='rolling-comp-dropdown',
options=[
build_option('corr', 'Correlation'),
build_option('count', 'Count'),
build_option('cov', 'Covariance'),
build_option('kurt', 'Kurtosis'),
build_option('max', 'Maximum'),
build_option('mean', 'Mean'),
build_option('median', 'Median'),
build_option('min', 'Minimum'),
build_option('skew', 'Skew'),
build_option('std', 'Standard Deviation'),
build_option('sum', 'Sum'),
build_option('var', 'Variance'),
],
placeholder='Select an computation',
style=dict(width='inherit'), value=inputs.get('rolling_comp')
))
], id='rolling-inputs', style=dict(display='block' if agg == 'rolling' else 'none'))
], className='row pt-3 pb-3 charts-filters'),
html.Div(
[
build_input('Chart Per\nGroup',
html.Div(daq.BooleanSwitch(id='cpg-toggle', on=inputs.get('cpg') or False),
className='toggle-wrapper'),
id='cpg-input', style={'display': 'block' if show_cpg else 'none'}, className='col-auto'),
build_input('Barmode', dcc.Dropdown(
id='barmode-dropdown',
options=[
build_option('group', 'Group'),
build_option('stack', 'Stack'),
build_option('relative', 'Relative'),
],
value=inputs.get('barmode') or 'group',
placeholder='Select a mode',
), className='col-auto addon-min-width', style=bar_style, id='barmode-input'),
build_input('Barsort', dcc.Dropdown(
id='barsort-dropdown', options=barsort_options, value=inputs.get('barsort')
), className='col-auto addon-min-width', style=bar_style, id='barsort-input'),
html.Div(
html.Div(
[
html.Span('Y-Axis', className='input-group-addon'),
dcc.Dropdown(id='yaxis-dropdown', options=yaxis_options),
html.Span('Min:', className='input-group-addon col-auto'),
dcc.Input(
id='yaxis-min-input', type='number', className='form-control col-auto',
style={'line-height': 'inherit'}
),
html.Span('Max:', className='input-group-addon col-auto'),
dcc.Input(
id='yaxis-max-input', type='number', className='form-control col-auto',
style={'line-height': 'inherit'}
)
],
className='input-group',
),
className='col-auto addon-min-width', id='yaxis-input',
style=dict(display='block' if show_yaxis else 'none')
),
],
className='row pt-3 pb-5 charts-filters'
),
dcc.Loading(html.Div(id='chart-content', style={'height': '70vh'}), type='circle'),
dcc.Textarea(id="copy-text", style=dict(position='absolute', left='-110%'))
], className='charts-body')
layout_header,
html.H3('Inversión Internacional'),
html.Div([
html.P('Intervalo de fechas.'),
dcc.DatePickerRange(
id='daterange_internacional',
first_day_of_week=1,
min_date_allowed=datetime(2016, 1, 1),
max_date_allowed=end_date,
initial_visible_month=end_date,
start_date=start_date,
end_date=end_date,
display_format='M-D-Y',
),
dcc.Loading(id="loading-icon_fig-ex-fwd",
children=[dcc.Graph(id='fig_ex-fwd')],
type="circle"),
],
className='pretty_container'),
html.Div([
dcc.Checklist(id='check_fig-ex',
options=[{
'label': ' Mostrar en porcentaje',
'value': 'True'
}],
className="dcc_control no-print"),
dcc.Loading(id="loading-icon_fig-ex",
children=[dcc.Graph(id='fig_ex')],
type="circle"),
],
className='pretty_container'),
def create_app_ui():
# Create the UI of the Webpage here
main_layout = html.Div([
html.H1('CDR Analysis with Insights',
id='Main_title',
style={
'backgroundColor': 'black',
"color": "white",
'align': 'center',
'textAlign': 'center'
}),
dcc.Tabs(id="Tabs",
value="tab-1",
children=[
dcc.Tab(label="Call Analytics tool",
id="Call Analytics tool",
value="tab-1",
children=[
html.Br(),
html.Br(),
dcc.Dropdown(
id='start-date-dropdown',
options=start_date_list,
placeholder="Select Starting Date here",
value="2019-06-20"),
dcc.Dropdown(
id='end-date-dropdown',
options=end_date_list,
placeholder="Select Ending Date here",
value="2019-06-25"),
dcc.Dropdown(id='group-dropdown',
placeholder="Select group here",
multi=True),
dcc.Dropdown(id='Report-type-dropdown',
options=report_type_list,
placeholder="Select Report Type",
value="Hourly")
]),
dcc.Tab(label="Device Analytics tool",
id="Device Analytics tool",
value="tab-2",
children=[
html.Br(),
dcc.Dropdown(id='device-date-dropdown',
options=start_date_list,
placeholder="Select Date here",
multi=True),
html.Br()
]),
dcc.Tab(label="Service Analytics tool",
id="Service Analytics tool",
value="tab-3",
children=[
html.Br(),
dcc.Dropdown(id='service-date-dropdown',
options=start_date_list,
placeholder="Select Date here",
multi=True),
html.Br()
])
]),
html.Br(),
dcc.Loading(
html.Div(id='visualization-object', children='Graph,Card, Table')),
])
return main_layout
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '25px',
'textAlign': 'center',
'marginBottom': '10px',
'marginLeft': '50px',
#'margin' : 'auto',
},
# Allow multiple files to be uploaded
multiple=True,
accept='image/*'),
dcc.Loading(id="loading-1",
children=[
html.Div(id='output_mrkdwn',
children=dcc.Markdown(INITIAL_MESSAGE)),
html.Div(id='output-image-upload'),
html.Div(id='tabs-content',
style={'margin': 'auto'})
]),
],
style={ #'float':'right',
'float': 'middle',
'width': '70%',
},
),
])
# _________________________End of Layout__________________________________
# ________________________________________________________________________
'''_________________________Image layout___________________________________'''
def layout():
"""Dynamically serve a layout based on updated DB values (for dropdown menu)"""
# Needs db connection! (Set up tunnel if testing app locally)
_ids = get_doc_ids_from_db()
dropdown_dates = {num2str_month(_id): _id for _id in _ids}
children_list = [
html.Div([
html.H2('Topic modelling'),
dcc.Markdown('''
Our goal in this section is to analyze whether female
and male sources are more likely to be associated with specific topics in
the news. We utilize data scraped from seven Canadian news
organizations' websites, following which we identify the gender of those quoted
(*sources*). We then perform large-scale topic discovery on each month's data
using Latent Dirichlet Allocation (LDA), as shown below.
''')
], ),
html.Div(
html.Img(src="/static/topic-pipeline-flowchart-1.png",
style={'width': '100%'})),
html.Br(),
html.
P('From the dropdown menu below, select a recent month to view its results.'
),
dcc.Dropdown(id='date-dropdown',
options=[{
'label': date_str,
'value': date_num
} for date_str, date_num in dropdown_dates.items()],
value=_ids[-1],
className='dropdown'),
html.Br(),
html.H4('Top keywords for each topic discovered'),
html.Div(
DataTable(
id='topic-table',
columns=[
{
'name': 'Topic labels',
'id': 'topic_names'
},
{
'name': 'Keywords',
'id': 'topic_words'
},
],
style_table={'overflowX': 'auto'},
style_cell={
'backgroundColor': 'rgba(102, 204, 204, 0.05)',
'textAlign': 'left',
'font_family': 'Arial',
'padding': '0px 10px',
},
style_data={
'height': 'auto',
'lineHeight': '30px'
},
style_header={
'backgroundColor': 'rgb(255, 255, 255)',
'text-align': 'left',
},
style_as_list_view=True,
)),
html.Br(),
html.Div(
dcc.Loading(id='topic-load-progress',
children=[dcc.Store(id='topic-data')])),
# html.H4('Topics per outlet'),
html.H5('''
Which topics were covered more extensively by each outlet?
'''),
html.Div([dcc.Graph(id='outlet-heatmap')]),
html.Div(
html.Img(src="/static/topic-pipeline-flowchart-2.png",
style={'width': '100%'})),
dcc.Markdown('''
Once we identify topics, we calculate an aggregated quantity that we call *gender prominence*,
which is a measure that characterizes whether a given topic (on average) featured more
prominently in articles that quote one gender more frequently than they do the other.
To do this, we separate our news corpus for the given month into two smaller corpora - one
with articles that contain majority-female sources (at least one more female source than male),
and the other with articles that contain majority-male sources. These corpora are termed the
"female corpus" and "male corpus" respectively.
'''),
html.Br(),
# html.H4('Topics and gender representation among sources'),
html.H5('''
Which topics showed the largest difference in gender representation?
'''),
html.Div(id='female-male-corpus-stats'),
html.Div([
dcc.Graph(id='outlet-gender-heatmap'),
dcc.Markdown('''
Topics that are red exhibit 'female prominence', i.e., they are topics
for which the mean topic intensity is much greater in the female corpus than
it is in the male corpus. The opposite is true for topics that exhibit 'male prominence'
(shown in blue).
'''),
html.Br(),
html.H5('''
Which topics were covered more extensively in the female corpus?
'''),
html.Div(id='female-corpus-stats'),
dcc.Graph(id='female-topic-bars'),
html.Br(),
html.H5('''
Which topics were covered more extensively in the male corpus?
'''),
html.Div(id='male-corpus-stats'),
dcc.Graph(id='male-topic-bars'),
html.Br(),
]),
html.Br(),
dcc.Markdown('''
[Click here](/static/GGT_topic_model_technical_report.pdf) to learn more about
the Gender Gap Tracker's topic modelling methodology.
'''),
]
return children_list
html.Div(
className="banner",
style={
"marginBottom": "1.5em"
},
children=[
html.H6("Performance vs Benchmark")
],
),
dcc.Loading(
id="benchmark_overlay_graph_loading",
type="default",
children=[
dcc.Graph(
id="benchmark_overlay_graph",
figure={
"layout": default_layout
},
config={'displayModeBar': False, 'showTips': False}
),
],
),
],
),
],
),
],
),
],
)
"label": "Alumni",
"value": "Alumni"
},
],
value=["Actives", "Inactives"],
multi=True,
),
],
style=style["big_graph"],
),
html.Div(
children=[
dcc.Loading(
type="default",
children=[
# Graph 1: Chapter size over time
dcc.Graph(id="composition-graph"),
],
)
],
style=style["big_graph"],
),
html.Div(
children=[
html.Div(
children=[
html.Div(id="actives-num"),
html.H6(
"Actives",
style=dict(color=COLORS["Actives"],
textAlign="center"),
def get_str_dtype(df, col):
"""Return dtype of col in df"""
dtypes = ['datetime', 'bool', 'int', 'float', 'object', 'category']
for d in dtypes:
if d in str(df.dtypes.loc[col]).lower():
return d
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.COSMO])
server = app.server
app.layout = html.Div(
[
dcc.Loading(dcc.Store(id='twitter_df', storage_type='memory')),
html.Br(),
dbc.Row(
[
dbc.Col(
[
html.A(
[
html.Img(
src='data:image/png;base64,' + img_base64,
width=200,
style={'display': 'inline-block'}),
],
href='https://github.com/eliasdabbas/advertools'),
html.Br(),
# html.A(children=['online marketing', html.Br(),
# multi=True,
# placeholder="You can select multiple companies",
# ),
# For productive deployment use the following options:
options=format_for_dashdropdown(get_companies_from_sec()),
multi=True,
placeholder="You can select multiple companies"
),
html.Br(),
# html.Hr(),
dcc.Loading(
id='loading-1', type='default',
children = dcc.Graph(id='my-graph', figure={})
# fullscreen=True
),
html.Div([
html.H3('[X-Axis] Graph time horizon:',
style={'width': '49%', 'display': 'inline-block'}),
html.H3('[Y-Axis] Graph mode:',
style={'width': '49%', 'display': 'inline-block'})
]),
html.Div([
dcc.RadioItems(
id='view-periode',
options=[
{'label': '1M', 'value': '30D'},
'value': 2
}],
value=1)
]),
# column 4
html.Div(
id='input-column-4',
className='three columns',
children=[
html.Button('Run', id='start-heuristic', n_clicks=0),
# dcc.Div(id='progress-value',),
# html.Br(),
dcc.Loading(
id="loading",
children=[html.Div(id="loading-output-2")],
type="default",
),
html.Div(id='click_status', children=[]),
]),
# right column
# html.Div(
# id='heuristic-right-column',
# className='seven columns',
# children=[
# html.Div(id='heuristic-output', children='Click the Run button'),
# dash_table.DataTable(id='heuristic-output-table',
# columns=[{'name': i, 'id': i} for i in ['staging', 'sender', 'receiver', 'staging1', 'vehicleType', 'patientType', 'scenario', 'value']], # receiver / name
# page_current=0,
# page_size=10,
children=[
html.P(
id="map-title",
children=
"CONFIRMED CASES AND DEATHS BY COUNTRY UPDATED EVERY 10 SECONDS",
),
html.Div(
id="loading-outer-frame",
children=[
dcc.Loading(
id="loading",
children=dcc.Graph(id='graph1',
figure={
"data": [],
"layout": []
},
style={
'width': '100%',
'hight': '100%',
'margin': '0%'
}),
)
],
),
],
style={
'width': '46%',
'hight': '120%',
'margin': '0%',
'display': 'inline-block',
'animation-name': 'example',
### SIDEBAR ###
side_bar = html.Div([
account_dropdown, currency_dropdown, country_code_dropdown, label_dropdown,
date_range, filter_button, clear_filter_button
],
style={'height': '100vh'})
### GRAPH ###
graph_type_selection = dbc.ButtonGroup([
dbc.Button("Plot", id='plot-graph-button', color='info'),
dbc.Button("Tree", id='tree-graph-button', color='info'),
dbc.Button("Map", id='map-graph-button', color='info')
])
graph = dbc.Card(dcc.Loading(dcc.Graph(id='graph')))
### BODY ###
body = html.Div(
dbc.Row([
dbc.Col(side_bar, className='m-2', width=3),
dbc.Col([
dbc.Row(graph_type_selection, justify='end', className='mt-2'),
dbc.Row(dbc.Col(graph), className='mt-2')
],
className='mr-4')
]))
### LAYOUT ###
layout = html.Div([body, data_store])
style={
'font-weight': 'bold',
'text-align': 'center',
'font-size': 25,
'color': 'black',
'text-align': 'center'
})
],
style={'background-color': '#fadcf4'}),
md=2)
]),
##### dropdowns
### Stacked Bar Chart
dcc.Loading(id="loading1", children=[html.Div(dcc.Graph(id="barchart1"))]),
### Pie Chart
dbc.Row([
dbc.Col(html.Div([dcc.Graph(id="barchart2")]), md=4),
dbc.Col(html.Div([dcc.Graph(id="piechart")]), md=4),
dbc.Col(html.Div([dcc.Graph(id="boxplot")]), md=4),
])
])
app.layout = html.Div([html.Div(first_layout)])
@app.callback(dash.dependencies.Output('WHO_dropdown', 'value'),
[dash.dependencies.Input('clear-button', 'n_clicks')])
def clearWho(clicks):
if clicks == 0:
#dbc.Button("Загрузить данные", id='submit-button', color="secondary"),
html.Div(
dbc.Button(id='download-link',
children='Сохранить отчет за месяц')
)
],
md=4,
),
dbc.Col([
#html.H4("График за месяц"),
html.Div([
dcc.Loading(id='loading-1',
children=[
html.Div(
dcc.Graph(
id='month-graph',
style={'height': '400px'}))
],
type='circle',
fullscreen=True)
]),
html.Div([
dcc.Loading(id='loading-2',
children=[
html.Div(id='json-month-data',
style={'display': 'none'})
],
type='circle',
fullscreen=True)
]),
#html.Div(id='json-month-data', style={'display': 'none'}),
labelStyle={'display': 'inline-block'}),
dcc.Textarea(
id='translation-input',
style={
'width': '100%',
'height': 200
},
),
html.Button(children=strings.TRANSLATE_BTN_LABEL,
id='translate-btn',
n_clicks=0,
className="input-btn"),
dcc.Loading(id='translate-loader',
type='circle',
children=[
html.Div(id='translate-output-container',
children="",
className="output-container")
],
parent_className='loader')
],
className="input-div"),
html.Div(children=[
html.P(strings.DETECT_DESCRIPTION),
dcc.RadioItems(id='algorithm-chooser',
options=[
{
'label': 'Red Neuronal',
'value': 'nn'
},
{
'label': 'SVM',
id='submit-val-redirect',
className="btn waves-effect waves-light"),
id='url-link',
href='https://vk.com/search',
target="_blank"),
],
className='input-field col s4 push-s2')
],
className='row',
style=style_block)
] + [
html.Div([
dcc.Loading(
id="loading-2",
children=[
html.H5([html.H5(id="loading-output-2")])
],
type="circle",
)
],
className='row')
] + [
html.Div([
html.H5('ID пользователя в ВК: ',
className='col s3'),
html.H5(id='user_id',
style={
'color': 'green',
},
className='col s3')
],
def setup_default_graph(self):
"""General graph with all the nodes available."""
# Set layout
layout = html.Div([
html.Div(className='eight columns', children=[
dcc.Loading(
id='loading-1',
type='default',
children=cyto.Cytoscape(
id='cytoscape' + self.name,
elements=self.data,
stylesheet=DEFAULT_STYLESHEET,
style={
'height': '100vh',
'width': '100%'
})
)
]),
html.Div(style=STYLES['tab'], className='four columns', children=[
dcc.Tabs(id='tabs' + self.name, children=[
dcc.Tab(label='Control Panel', children=[
html.Div(
id='rules-box' + self.name,
children=[
drc.NamedDropdown(
name='Filters',
id='dropdown-rules' + self.name,
options=drc.DropdownOptionsList(
*RULES
),
value=RULE,
clearable=False
)],
style=STYLES['search'],
) if self.rules_enable else '',
drc.NamedDropdown(
name='Layout',
id='dropdown-layout' + self.name,
options=drc.DropdownOptionsList(
'random',
'grid',
'circle',
'concentric',
'breadthfirst',
'cose'
),
value='grid',
clearable=False
),
drc.NamedDropdown(
name='Expand by',
id='dropdown-expand' + self.name,
options=drc.DropdownOptionsList(
*self.element_types
),
value=self.element_types[0],
clearable=False
) if self.expand_enable else '',
html.Div(
id='custom' + self.name,
style=STYLES['inputs'], children=[
drc.NamedInput(
style=STYLES['text-inputs'],
name='Custom Query',
id='custom-query' + self.name,
value='',
placeholder=(
'MATCH (n)-[r]-(m) WHERE ID(n) = {id} '
'RETURN n, r, m')),
drc.NamedInput(
style=STYLES['text-inputs'],
name='Custom Query Variables',
id='custom-query-variables' + self.name,
value='',
placeholder='n, r, m')]
) if self.expand_enable else '',
drc.NamedRadioItems(
name='Selection options',
id='selection-options' + self.name,
options=[
{'label': 'Only keep selection',
'value': 'focus'},
{'label': 'Keep all the nodes',
'value': 'no_focus'}
],
value='focus'
),
html.Div(
id='actions-box' + self.name,
children=[
html.Button(
children='Reset',
id='reset-submit' + self.name,
type='submit',
className='button',
n_clicks=0),
html.A(
children='Export data',
id='export-submit' + self.name,
className='button',
href='/download/' + self.name),
html.Button(
children='Custom search',
id='custom-search' + self.name,
type='button',
className='button',
n_clicks=0)
],
style=STYLES['actions'],
),
html.Div(
id='search-box' + self.name,
children=[
dcc.Input(
style=STYLES['text-inputs'],
id='search' + self.name,
type='text', value='',
placeholder='MATCH (n)-[r]-(n2:Property) RETURN n,r'),
html.Button(
children='Search',
id='search-submit' + self.name,
type='submit',
className='button',
n_clicks=0),
],
style=STYLES['search'],
),
html.Div(
id='node-number' + self.name
)
]),
dcc.Tab(label='Elements Properties', children=[
html.Div(
children=[
html.P('Element Object JSON:'),
dash_treeview_antd.TreeView(
id='hover-element-json-output' + self.name,
multiple=False,
checkable=False,
selected=[],
expanded=['root'],
data={})
],
style=STYLES['json-output'])
]),
dcc.Tab(label='Graph Conventions', children=[
html.Div(children=[
html.Br(),
html.Div(
className='center',
children=[
html.Img(
className='responsive',
src='../assets/images/convention.svg'
)])
])
])
]),
])
])
return layout
),
className="canvas-outer",
style={"margin-top": "1em"},
),
],
className="v-card-content",
),
html.Div(
html.Button(id="clear", children="clear"),
className="v-card-content-markdown-outer",
),
html.Div(
[
html.B("Text Recognition Output",
className="section_title"),
dcc.Loading(dcc.Markdown(id="text-output", children="")),
],
className="v-card-content",
style={"margin-top": "1em"},
),
],
className="app__content",
),
])
@app.callback(Output("canvas", "json_objects"), [Input("clear", "n_clicks")])
def clear_canvas(n):
if n is None:
return dash.no_update
strings = ['{"objects":[ ]}', '{"objects":[]}']
def set_layout(app):
header = [getHeader(app)]
body = [
html.Div(className='col col-12 my-3',
children=[
html.Div(children=[
dcc.Loading(color=BRAND, children=[
dcc.Graph(
id='cve_suppressions_most_frequent',
figure=cve_suppressions_most_frequent.get_fig()
)
])
]),
]),
html.Div(className='col col-12 col-xl-6 my-3',
children=[
html.Div(children=[
dcc.Loading(color=BRAND, children=[
dcc.Graph(
id='cve_suppressions_per_team',
figure=cve_suppressions_per_team.get_fig()
)
])
]),
]),
html.Div(className='col col-12 col-xl-6 my-3',
children=[
html.Div(children=[
dcc.Loading(color=BRAND, children=[
dcc.Graph(
id='js_apps_checks',
figure=js_apps_checks.get_fig()
)
])
]),
]),
html.Div(className='col col-12 col-xl-6 my-3',
children=[
html.Div(children=[
dcc.Loading(color=BRAND, children=[
dcc.Graph(
id='node_versions',
figure=node_versions.get_fig()
)
])
]),
]),
html.Div(className='col col-12 col-xl-6 my-3',
children=[
html.Div(children=[
dcc.Loading(color=BRAND, children=[
dcc.Graph(
id='java_versions',
figure=java_versions.get_fig()
)
])
]),
]),
]
app.layout = layout(header, body)
'value': 'True'
},
{
'label': 'No',
'value': 'False'
},
],
value='True',
labelStyle={
'display': 'inline-block',
'margin': '5px'
}),
html.Button('Submit', id='button'),
dcc.Loading(children=[
html.Div(id='compute-details'),
html.Div(id='plot-download'),
html.Div(id='plot-qiime2'),
html.Div(id='plot-output')
])
]
BODY = dbc.Container(
[
dbc.Row([
dbc.Col(dbc.Card(DASHBOARD)),
], style={"marginTop": 30}),
],
className="mt-12",
)
app.layout = html.Div(children=[NAVBAR, BODY])
value='State'),
dcc.RadioItems(id='crossfilter-xaxis-time',
options=[{
'label': i,
'value': i
} for i in ['Minute', '10-Minute', 'Hours']],
value='Minute',
labelStyle={'display': 'inline-block'})
],
style={
'width': '49%',
'display': 'inline-block'
}),
dcc.Input(id="input-1", value='Input triggers local spinner'),
dcc.Loading(id="loading-1",
children=[html.Div(id="loading-output-1")],
type="default"),
html.Div([
dcc.Input(id="input-2", value='Input triggers nested spinner'),
dcc.Loading(
id="loading-2",
children=[html.Div([html.Div(id="loading-output-2")])],
type="circle",
)
]),
html.Div(
id="kpi_1_container",
className="chart_div pretty_container",
children=[
html.P("KPI 1"),
dcc.Graph(id="kpi_1", config=dict(displayModeBar=False)),
} for i in list(df.columns.values)],
placeholder=
'Pick an economic indicator...',
)
],
className="app__dropdown",
),
html.Br(),
html.Span(
"Tip: Drag to zoom, double click to reset."),
dcc.Loading(
id="loading-icon-ta",
children=[
html.Div(
dcc.Graph(id="economics_graph",
figure=fig,
config={
'displayModeBar': False,
'scrollZoom': False
}))
],
type="default"),
html.Br(),
html.Br(),
html.Span("March release for "),
html.Span(id='metric_name',
children='N/A - pick a metric above.'),
html.Span(id='metric_value', children=''),
html.Br(),
],
className="two-thirds column",
),
],
color='dark',
dark=True,
sticky='top',
)
MOL_LOADING= html.Div(id='speck-body',
className='app-body',
children=[
dcc.Loading(className='dashbio-loading',
children=html.Div(
id='speck-container',
children=[
dash_bio.Speck(
id='speck',
view={'resolution':600, 'zoom':0.1},
scrollZoom=True
)
]),
)
]
)
LEFT_COLUMN =dbc.Jumbotron(
[
html.Div(id='speck-control-tabs',
className='control-tabs',
children=[
dcc.Tabs(id='speck-tabs',
value='what-is',
def layout_graphs():
return [
dcc.Input(value='', type='hidden', id='load_info'),
dcc.Input(value='', type='hidden', id='start_info'),
dcc.Tabs(
id="tabs",
value='tab-preview',
children=[
dcc.Tab(disabled=True),
dcc.Tab(
label='Preview',
value='tab-preview',
children=[dcc.Loading(dcc.Graph(id='graph_preview', ))],
id='preview_head'),
dcc.Tab(label='Signal scale',
value='tab-raw',
children=[dcc.Loading(dcc.Graph(id='graph_raw', ))],
id='raw_head'),
dcc.Tab(label='Base scale',
value='tab-base',
children=[dcc.Loading(dcc.Graph(id='graph_base', ))],
id='base_head'),
dcc.Tab(
label='Base probability',
value='tab-prob',
children=[
html.
P('A logo with more then 200 Bases is unreadeable. '
'Use the slider or search to determine the shown range.'
),
dcc.RangeSlider(min=0,
max=200,
value=[0],
updatemode='drag',
id='logo_range'),
dcc.Input(id='range_from', value='0', disabled=True),
' to ',
dcc.Input(id='range_to', value='200', disabled=True),
dcc.Input(value='[0,200]',
type='hidden',
id='hidden_range'),
dcc.Loading([
dcc.Graph(id='graph_prob', ),
]),
html.H2('Logo Options'),
dcc.RadioItems(
options=[
{
'label': 'Up next',
'value': 'up'
},
{
'label': 'At call',
'value': 'at'
},
# {'label': 'Around', 'value': 'ar'},
],
value='up',
id="logo_options",
labelStyle={
'display': 'inline-block',
'padding': 10
})
],
id='prob_head'),
]),
html.Div([
html.H2('Graph Options'),
dcc.Checklist(options=[
{
'label': 'Stack Traces',
'value': 'trace_stack'
},
{
'label': 'Normalize to 1',
'value': 'normalize'
},
],
value=[],
id="graph_options",
labelStyle={
'display': 'inline-block',
'padding': 10
})
],
id='hide_options'),
html.Embed(src='/logo.svg',
style={
'maxWidth': '20%',
'maxHeight': '60px',
'position': 'absolute',
'left': 0,
'top': 0
},
type='image/svg+xml'),
]
],
'layout': {
'title': 'Dash Data Visualization'
}
}),
html.H5("Dash Cnavas testing"),
# dc.DashCanvas(id='canvas-1')
# html.Canvas(id="html-canvas"),
# Testing different src for iframe - local html file
html.Iframe(
src=
"https://kitware.github.io/vtk-js/examples/GeometryViewer/GeometryViewer.html",
# src="assets/geom_view.html",
height=300,
width=600),
dcc.Loading(html.Button(id="test-button"))
])
@app.callback(Output('test-button', 'children'),
[Input('test-button', 'n_clicks')])
def testing_button(clicks):
print("number of clicks {}".format(clicks))
print()
output = "Start"
if clicks is None:
output = "Button"
else:
output = "Button {}".format(clicks)
vps.main()
'margin': '10px'
}),
html.Div(
[html.Button(id='submit-button', n_clicks=0, children='Submit')],
style={
'width': '20%',
'display': 'inline-block',
'vertical-align': 'top',
'margin': '10px',
'color': colors['text']
})
]),
html.Div([
html.Div(dcc.Loading(html.Div(id='output-image-upload-raw'),
style={
'position': 'fixed',
'top': '50%'
}),
style={
'width': '50%',
'display': 'inline-block',
'height': '100%',
'vertical-align': 'middle'
}),
html.Div(dcc.Loading(html.Div(id='output-image-upload-kmeans'),
style={
'position': 'fixed',
'top': '50%'
}),
style={
'width': '50%',
html.P('Please select your favorite genre:'),
html.Div(
className='div-for-dropdown',
children=[
dcc.Dropdown(
id='favorite_genre',
options=genres_dic,
style={'backgroundColor': '#1E1E1E'},
),
],
style={'color': '#1E1E1E'})
]),
html.Div(className='eight columns div-for-charts bg-grey',
children=[
dcc.Loading(id="loading-1",
type="default",
children=html.Div(
id="movie_recommandation1"))
])
])
])
# System2 layout
tab2_content = html.Div(children=[
html.Div(className='div-user-controls',
children=[
html.H2('Movie Recommandation'),
html.P('Please rate these movies as many as possible:'),
display_movies_to_rate(movieID_toRate_list),
dbc.Button(
"Click Here to get your recommendations",
id="recommend_button",
def build_layout():
layout = dcc.Tab(
label='Dimension Reduction',
children=[
dbc.Row(html.Hr(), style={'height': '3%'}),
html.Div([
'Compare tumors and subpopulations via dimension reduction scatterplots. For each plot, select a tumor as well as an attribute used to color each tumor.'
]),
dbc.Container(
fluid=True,
children=[
dbc.Row(html.Hr(), style={'height': '1%'}),
dbc.Row(children=[
#dbc.Col(width=100, style={'width': '1%'}),
dbc.Row(
[
dbc.Card(children=[
dbc.CardHeader("Plot 1",
style={
"background-color":
"#e3e3e3",
"font-weight": "bold",
"font-size": "Large",
"text-align": "center"
}),
dbc.CardBody(
_build_control_panel(1) + [
dbc.Row(html.Hr(),
style={'height': '3%'}),
html.Div(["Tumor Information:"]),
html.Div(
[
html.Iframe(
srcDoc="",
id='msg-box-1',
style={
"width": "100%",
"border": "0",
"height": "80px"
})
],
style={
"margin": "3px",
'border-style': 'dotted',
'border-width': 'thin'
}),
dbc.Row(html.Hr(),
style={'height': '3%'}),
dcc.Loading(
id="loading-1",
type="default",
color='black',
children=html.Div([
html.Div(
id=
'dim-reduc-scatter-1',
children=[
dcc.Graph(
figure=
_build_dim_reduc(
DEFAULT_TUMOR_1,
2,
DEFAULT_ALGO,
DEFAULT_NUM_DIM,
DEFAULT_GENE,
'gene', 2,
1.0),
config=
_build_plot_config(
'svg'),
)
])
],
id=
'louad-out-1'
)),
dbc.Row([
dbc.Col(
[],
width=100,
style={"width": "15px"}),
dbc.Col(
[html.H6("Dot size: ")],
width=100,
style={"width": "40%"}),
dbc.Col([
dcc.Slider(
min=1,
max=6,
#step=None,
value=2,
id='dot-size-1')
])
]),
dbc.Row([
dbc.Col(
[],
width=100,
style={"width": "15px"}),
dbc.Col([html.H6("Opacity: ")],
width=100,
style={"width": "40%"
}),
dbc.Col([
dcc.Slider(min=0.2,
max=1,
step=0.1,
value=1.0,
id='alpha-1')
])
]),
dbc.Row([
dbc.Col(
[],
width=100,
style={"width": "15px"}),
dbc.Col([
html.H6(
"Download format: ")
],
width=100,
style={"width": "40%"
}),
dbc.Col([
dcc.Dropdown(
options=[{
'label': 'SVG',
'value': 'svg'
}, {
'label': 'PNG',
'value': 'png'
}],
value='svg',
id='img-format-1')
])
])
])
]
#width={"size": "auto", "order": 1}
),
dbc.Col([], width=100, style={"width": "15px"
}),
dbc.Card(children=[
dbc.CardHeader("Plot 2",
style={
"background-color":
"#e3e3e3",
"font-weight": "bold",
"font-size": "Large",
"text-align": "center"
}),
dbc.CardBody(
_build_control_panel(2) + [
dbc.Row(html.Hr(),
style={'height': '3%'}),
html.Div(["Tumor Information:"]),
html.Div(
[
html.Iframe(
srcDoc="",
id='msg-box-2',
style={
"width": "100%",
"border": "0",
"height": "80px"
})
],
style={
"margin": "3px",
'border-style': 'dotted',
'border-width': 'thin'
}),
dbc.Row(html.Hr(),
style={'height': '3%'}),
dcc.Loading(
id="loading-2",
type="default",
color='black',
children=html.Div([
html.Div(
id=
'dim-reduc-scatter-2',
children=[
dcc.Graph(
figure=
_build_dim_reduc(
DEFAULT_TUMOR_2,
2,
DEFAULT_ALGO,
DEFAULT_NUM_DIM,
DEFAULT_GENE,
'gene', 2,
1.0),
config=
_build_plot_config(
'svg'),
)
])
],
id=
'louad-out-2'
)),
dbc.Row([
dbc.Col(
[],
width=100,
style={"width": "15px"}),
dbc.Col(
[html.H6("Dot size: ")],
width=100,
style={"width": "40%"}),
dbc.Col([
dcc.Slider(
min=1,
max=6,
#step=None,
value=2,
id='dot-size-2')
])
]),
dbc.Row([
dbc.Col(
[],
width=100,
style={"width": "15px"}),
dbc.Col([html.H6("Opacity: ")],
width=100,
style={"width": "40%"
}),
dbc.Col([
dcc.Slider(min=0.2,
max=1,
step=0.1,
value=1.0,
id='alpha-2')
])
]),
dbc.Row([
dbc.Col(
[],
width=100,
style={"width": "15px"}),
dbc.Col([
html.H6(
"Download format: ")
],
width=100,
style={"width": "40%"
}),
dbc.Col([
dcc.Dropdown(
options=[{
'label': 'SVG',
'value': 'svg'
}, {
'label': 'PNG',
'value': 'png'
}],
value='svg',
id='img-format-2')
])
])
])
]
#width={"size": "auto", "order": 1}
)
],
#style={"width": "80%"}
)
])
])
])
return layout
