dbc.Row([
dbc.Col(html.H1(children='OVERVIEW BOTTEGA', style={'font-size': 20})),
dbc.Col(
html.Img(src=link_logo,
width=130,
style={
'float': 'right',
'margin-top': -15
}))
]),
dcc.Tabs([
dcc.Tab(label='Traffic',
children=[
dbc.Row([
dcc.Graph(id='click', figure=fig_clicks),
],
style={'margin-top': 50}),
dbc.Row([dcc.Graph(id='advspending', figure=fig_sessions)],
style={'margin-top': 50})
]),
dcc.Tab(label='Campaigns',
children=[
dbc.Row([
dcc.Graph(id='campaign', figure=fig_campaign),
],
style={'margin-top': 50}),
]),
dcc.Tab(label='Product Pages',
children=[
dbc.Row([
dcc.Graph(id='product', figure=fig_product),
def create_app8_ui():
# Create the UI of the Webpage here
main_layout = html.Div([
html.H1('Terrorism Analysis with Insights', id='Main_title'),
dcc.Tabs(
id="Tabs",
value="Map",
children=[
dcc.Tab(
label="Map tool",
id="Map tool",
value="Map",
children=[
dcc.Tabs(id="subtabs",
value="WorldMap",
children=[
dcc.Tab(label="World Map tool",
id="World",
value="WorldMap"),
dcc.Tab(label="India Map tool",
id="India",
value="IndiaMap")
]),
dcc.Dropdown(id='month',
options=month_list,
placeholder='Select Month',
multi=True),
dcc.Dropdown(id='date',
placeholder='Select Day',
multi=True),
dcc.Dropdown(id='region-dropdown',
options=region_list,
placeholder='Select Region',
multi=True),
dcc.Dropdown(id='country-dropdown',
options=[{
'label': 'All',
'value': 'All'
}],
placeholder='Select Country',
multi=True),
dcc.Dropdown(id='state-dropdown',
options=[{
'label': 'All',
'value': 'All'
}],
placeholder='Select State or Province',
multi=True),
dcc.Dropdown(id='city-dropdown',
options=[{
'label': 'All',
'value': 'All'
}],
placeholder='Select City',
multi=True),
dcc.Dropdown(
id='attacktype-dropdown',
options=
attack_type_list, #[{'label': 'All', 'value': 'All'}],
placeholder='Select Attack Type',
multi=True),
html.H5('Select the Year', id='year_title'),
dcc.RangeSlider(id='year-slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),
max(year_list)],
marks=year_dict,
step=None),
html.Br()
]),
dcc.Tab(label="Chart Tool",
id="chart tool",
value="Chart",
children=[
dcc.Tabs(id="subtabs2",
value="WorldChart",
children=[
dcc.Tab(label="World Chart tool",
id="WorldC",
value="WorldChart"),
dcc.Tab(label="India Chart tool",
id="IndiaC",
value="IndiaChart")
]),
dcc.Dropdown(id="Chart_Dropdown",
options=chart_dropdown_values,
placeholder="Select option",
value="region_txt"),
html.Br(),
html.Br(),
html.Hr(),
dcc.Input(id="search",
placeholder="Search Filter"),
html.Hr(),
html.Br(),
dcc.RangeSlider(
id='cyear_slider',
min=min(year_list),
max=max(year_list),
value=[min(year_list),
max(year_list)],
marks=year_dict,
step=None),
html.Br()
]),
]),
html.Div(id="graph-object", children="Graph will be shown here")
])
return main_layout
return app.callback(outputs, inputs, states)(func)
return _map_arguments
################################################################################################
# Layer / components of dashboard
app.layout = html.Div([
html.Div([
dcc.Tabs(id="tabs_1", children=[
data_selection.data_selection_tab,
data_preprocessing.data_preprocessing_tab,
data_to_array.data_to_array_tab,
data_dim_reduction.dim_reduction_tab,
dcc.Tab(label="Hide", children=[], className="custom-tab", selected_className="custom-tab--selected"),
]),
], style={"border": "grey solid", "padding": "5px"}),
html.Div([
dcc.Tabs(id="tabs_2", children=[
plotting.plotting_options_tab,
clustering.clustering_tab,
dcc.Tab(label="Hide", children=[], className="custom-tab", selected_className="custom-tab--selected"),
]),
], style={"marginTop": "10px", "padding": "5px", "border": "grey solid"}),
html.Div(id="plot_area", children=[
dcc.Tabs(id="tabs_3", children=[
plotting.plot_tab,
clustering.clusters_tab,
'vertical-align': 'middle'
}),
],
style={
'width': '90%',
'height': '100px',
'margin': '20px auto auto auto'
}),
html.Div([
html.Div(
dcc.Tabs(id='tabs-example',
value='tab-1',
children=[
dcc.Tab(
label='О нас',
value='tab-1',
className='custom-tab',
),
dcc.Tab(
label='Дашборд',
value='tab-2',
className='custom-tab',
),
dcc.Tab(
label='Форма онлайн',
value='tab-3',
className='custom-tab',
),
dcc.Tab(
label='Загрузить',
value='tab-4',
dcc.Tab(
label='Regions',
value='tab-1',
children=[
dcc.RadioItems(
id='region-select',
options=[
{
'label': 'None',
'value': 'no-states'
},
{
'label': 'All',
'value': 'all-states'
},
{
'label': 'Northeast',
'value': 'ne-states'
},
{
'label': 'Midwest',
'value': 'mw-states'
},
{
'label': 'West',
'value': 'wst-states'
},
{
'label': 'South',
'value': 'sth-states'
},
],
labelStyle={'display': 'block'},
value='no-states')
]),
html.H1(html.A(
'Sales Prediction of Walmart Stores',
href='https://github.com/yashpasar/Walmart-Sales-Prediction',
style={
'text-decoration': 'none',
'color': 'white'
}),
style={
'textAlign': 'center',
'backgroundColor': 'DarkBlue'
})
]),
dcc.Tabs(id="tabs-example",
value='tab-1-example',
children=[
dcc.Tab(label='Prediction by Best Model',
value='tab-1-example'),
dcc.Tab(label='K-Nearest Neighbors Model',
value='tab-2-example'),
dcc.Tab(label='Linear Regression Model',
value='tab-3-example'),
dcc.Tab(label='Random Forest Model', value='tab-4-example'),
dcc.Tab(label='Support Vector Machine Model',
value='tab-5-example')
]),
html.Div(id='tabs-content-example')
])
@app.callback(Output('tabs-content-example', 'children'),
[Input('tabs-example', 'value')])
def render_content(tab):
for css in external_css:
app.css.append_css({"external_url": css})
app.layout = html.Div([
dcc.Tabs(
id="tabs-with-classes",
value='tab-1',
parent_className='custom-tabs',
className='custom-tabs-container',
children=[
dcc.Tab(
label='Modelling & Performance',
value='tab-1',
className='custom-tab',
selected_className='custom-tab--selected'
),
dcc.Tab(
label='Parametric Analysis',
value='tab-2',
className='custom-tab',
selected_className='custom-tab--selected'
),
dcc.Tab(
label='Regen Modelling & Performance',
value='tab-3', className='custom-tab',
selected_className='custom-tab--selected'
),
dcc.Tab(
label='Regen Parametric Analysis',
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')
]
)
'background-color': 'rgb(250, 250, 250)',
}, className= 'four columns')
], style= {
'display':'inline-block',
'width':'100%',
}, className= 'row')
], style= {
'display':'inline-block',
'width':'100%',
'textAlign':'right'
}),
html.Hr(style={'height':'2px'}),
dcc.Tabs(
id= 'tab-select',
children= [
dcc.Tab(label= 'Country Statistics', value= 'tab-1'),
dcc.Tab(label= 'World Statistics', value= 'tab-2')
]
),
html.Br(),
html.Div(id= 'tab-content')
], style= {'width':'100%','backgroundColor':'white'})
layout_table = html.Div([
dt.DataTable(id='rg-table', columns=[{
'id': 0,
'name': 'data'
}]),
])
layout = html.Div([
html.Div(default_data, id="rg-data", style={'display': 'none'}),
html.Div([
dcc.Tabs(id="rg-tabs",
value='rg-plot',
children=[
dcc.Tab(label='Plot',
value='rg-plot',
style=tab_style,
selected_style=tab_selected_style,
children=layout_plot),
dcc.Tab(label='Summary',
value='rg-summary',
style=tab_style,
selected_style=tab_selected_style,
children=layout_summary),
dcc.Tab(label='Table',
value='rg-table',
style=tab_style,
selected_style=tab_selected_style,
children=layout_table),
]),
html.Div(id='rg-tabs-content'),
],
),
html.Div([
# html.Label("Currency",
# style={'padding-left': '2px'}),
dcc.Dropdown(
id='currency',
options=[{'label': 'EUR/USD', 'value': 'eur_usd'}, {'label': 'BTC/USD', 'value': 'btc_usd'}],
value='eur_usd',
placeholder="Currency",
style={'width': '100%', 'display': 'inline-block'}
),
], style={'width': '100%', 'display': 'inline-block'}),
html.Br(),
html.Br(),
dcc.Tabs(id="tabs", children=[
dcc.Tab(label='Recurrent Neural Network ', value='rnn', selected_style={'backgroundColor': '#21252C', 'color': 'white'}),
dcc.Tab(label='Convolutional neural network', value='cnn', selected_style={'backgroundColor': '#21252C', 'color': 'white'}),
], value="rnn", colors={'border': 'gray', 'background': '#21252C'}),
html.Div([
dcc.Graph(id='graph'),
], className='twelve columns eur-usd-graph'),
html.Div([
dcc.Dropdown(id='type', options=[
{"label": "Line", "value": "line_trace"},
{"label": "Mountain", "value": "area_trace"},
{
"label": "Colored bar",
"value": "colored_bar_trace",
},
], value="line_trace", clearable=False, style={'width': '98%'}),
], className='twelve columns', style={'display': 'inline-block', 'width': '40%'}),
def _serve_layout():
session_id = str(uuid.uuid4())
logging.info("Started new session: %s", session_id)
return dbc.Container([
html.Div(session_id, id='session-id', style={'display': 'none'}),
html.Div([
html.H1(children='RetaiL Store Generator and Management'),
html.Img(src=img, style={'width': 300, 'float': 'right'}),
], style={'columnCount': 2}),
dcc.Tabs([
dcc.Tab([
html.H3('Manage your own store and see how it performs!'),
dcc.Markdown('''
The idea behind this web application is for you to customise your own store! But will you be able to avoid wasting?
Once you've opened your brand new store, it is time to define your scoring metric - will it help you in understanding the underlying dynamics?
Will you be able to order the right amount of items, to reduce the ecological footprint of your store?
'''),
html.H3('Store creation'),
dcc.Markdown('''
The first step is to create your store. Enter below the characteristics to define your store.
This will also generate an item assortment, which can be replicated by entering a seed.
'''),
html.Table(title='Store characteristics', children=[
html.Tr([
html.Th('Store characteristics',
colSpan='4'),
html.Td('Seed'),
html.Td(dcc.Input(id="seed", type="number",
placeholder="seed", min=1, max=100000, step=1, size="6")),
html.Td('Buckets'),
html.Td(dcc.Input(id="daily_buckets",
type="number", value=4, min=1, max=12, step=1, size="6")),
]),
html.Tr([
html.Td('Customers'),
html.Td(dcc.Input(id="n_customers", type="number",
value=500, min=0, max=2000, step=1, size="6")),
html.Td('Items'),
html.Td(dcc.Input(id="n_items", type="number",
value=30, min=5, max=100, step=1, size="6")),
html.Td('Stock size'),
html.Td(dcc.Input(id="max_stock", type="number",
value=600, min=0, max=2000, step=1, size="6")),
html.Td('Horizon'),
html.Td(dcc.Input(id="horizon", type="number",
value=91, min=40, max=1000, step=1, size="6")),
]),
html.Tr([
html.Td('Bias'),
html.Td(dcc.Input(id="bias", type="number",
value=0.0, min=-1, max=1, step=.01, size="6")),
html.Td('Variance'),
html.Td(dcc.Input(id="variance", type="number",
value=0.0, min=0, max=1, step=.01, size="6")),
html.Td('ON Leadtime'),
html.Td(dcc.Input(id="leadtime_fast",
type="number", value=0, min=0, max=10, step=1, size="6")),
html.Td('ID Leadtime'),
html.Td(dcc.Input(id="leadtime_long",
type="number", value=1, min=1, max=10, step=1, size="6")),
]),
]),
html.H3('Success metric'),
dcc.Markdown('''
Now, it is time to define your success metric. You can pick one and specify weights, or select "Custom" and enter your own metric - containing the letters "a" for availability, "s" for sales, and "w" for waste.
'''),
dcc.Dropdown(id='utility_fun',
options=[
{'label': 'Cobb-Douglas utility function',
'value': 'cobbdouglas'},
{'label': 'Log Linear utility function',
'value': 'loglinear'},
{'label': 'Linear utility function',
'value': 'linear'},
{'label': 'Custom utility function',
'value': 'custom'}
],
value='cobbdouglas'),
html.Table(id='weights', children=[
html.Tr([
html.Td('Waste weight'),
html.Td(dcc.Input(id="weight_waste", type="number",
min=0, max=3, step=.01, value=0.5)),
html.Td('Sales weight'),
html.Td(dcc.Input(id="weight_sales", type="number",
min=0, max=3, step=.01, value=0.5)),
html.Td('Availability'),
html.Td(dcc.Input(id="weight_availability",
type="number", min=0, max=3, step=.01, value=0.5)),
], style={'border-style': 'hidden'}),
]),
html.Table(id='custom_utility', children=[
html.Tr([
html.Td('Custom function definition'),
html.Td(dcc.Input(id='utility', type='text',
placeholder="Contains a, w, and s")),
], style={'border-style': 'hidden'}),
]),
html.Button('Create store', id='create'),
html.H3('Items'),
dcc.Markdown('''
Below, you can see the items present in your store, with their price and cost.
The color indicates how long you can keep them for.
'''),
dcc.Graph(id='output')
], label="STORE GENERATOR"),
dcc.Tab([
html.H3('Freshness level'),
dcc.Markdown('''
Freshness represents how long your items can be stored before the expiration date. The fresher the item, the shorter the time it can be stored! Overall, you can see this as the difficulty level. Try moving the slider!
'''),
dcc.Slider('freshness', min=1, max=100, value=1, marks={
1: 'Standard',
10: 'Fresher items',
25: 'Very fresh',
50: 'Very very fresh',
75: 'Too fresh',
100: 'Bakery mode',
}),
html.H3('Order algorithm'),
dcc.Markdown('''
The main goal is to adjust the number of each item you order for your store. To do so, you can build an expression around the following:
- n_customers, the number of customers expected
- forecast, the purchase probability of each of those customers
- stock, the current stock (or inventory position) of items.
'''),
html.Table(children=[
html.Tr([
html.Td('Order input'),
html.Td(
dcc.Input(value='forecast*n_customers - stock', type='text', id='order', size="50")),
], style={'border-style': 'hidden'}),
]),
html.Br(),
html.Button('Order!', id='order_button'),
dcc.Graph(id='output2'),
], label="ORDERING SIMULATION"),
]),
], style={'padding': '50px'})
dcc.Loading(
id="loading-frequencies",
children=[dcc.Graph(id="frequency_figure")],
type="default",
)),
dbc.Col(
[
dcc.Tabs(
id="tabs",
children=[
dcc.Tab(
label="Treemap",
children=[
dcc.Loading(
id="loading-treemap",
children=[
dcc.Graph(id="themes-treemap")
],
type="default",
)
],
),
dcc.Tab(
label="Wordcloud",
children=[
dcc.Loading(
id="loading-wordcloud",
children=[
dcc.Graph(id="themes-wordcloud")
],
type="default",
)
from dash.dependencies import Output
import numpy as np
import pandas as pd
from sklearn.metrics.pairwise import pairwise_distances
import dashboard.app_misc as misc
recommendation_tab = dcc.Tab(
label="Recommendation", children=[
html.Div(id="recommendation_area", children=[
html.P("Pairwise Distance:", style={"padding": "5px"}),
dcc.Dropdown(id="recommendation_metric", options=[
{"label": name, "value": name} for name in ("cosine", "euclidean", "manhattan")
], value="cosine"),
html.P("Recommendations for:", style={"padding": "5px"}),
dcc.Dropdown(id="recommendation_picker"),
html.P("Recommendations:", style={"padding": "5px"}),
html.Div(id="recommendations")
]),
], className="custom-tab", selected_className="custom-tab--selected"
)
arguments = {
"recommendation_title": misc.HtmlElement("recommendation_picker", "value"),
"recommendation_metric": misc.HtmlElement("recommendation_metric", "value"),
}
outputs = [Output("recommendations", "children"), Output("recommendation_picker", "options")]
def get_recommendations(n, title, metric, data_df, clusters, titles):
'width': '500px'
})
]),
html.Div(
className='four columns',
children=[
dcc.Tabs(
id='tabs',
children=[
dcc.Tab(label='Tap Objects',
children=[
html.Div(
style=styles['tab'],
children=[
html.P('Node Object JSON:'),
html.Pre(id='tap-node-json-output',
style=styles['json-output']),
html.P('Edge Object JSON:'),
html.Pre(id='tap-edge-json-output',
style=styles['json-output'])
])
]),
dcc.Tab(
label='Tap Data',
children=[
html.Div(
style=styles['tab'],
children=[
html.P('Node Data JSON:'),
html.Pre(id='tap-node-data-json-output',
style=styles['json-output']),
is_open=False,
),
html.Div(
className='main-content',
children=html.Div(
className='grid',
children=[
html.Div(
className='card',
id='main-tabs',
children=[
dcc.Tabs(value='tab-1', children=[
dcc.Tab(
id='tab-a',
label=desc.about_header,
className='custom-tab',
children=html.Span(desc.about, id='about-text')
),
dcc.Tab(
id='tab-b',
label=desc.room_header,
className='custom-tab',
children=[
html.H6(html.Span(desc.room_header, id='room-header-body')),
html.Div([html.Span(desc.floor_area_text, id='floor-area-text'),
dcc.Input(id='floor-area', value=900,
type='number')]),
html.Br(),
html.Div([html.Span(desc.ceiling_height_text, id='ceiling-height-text'),
dcc.Input(id='ceiling-height', value=12,
type='number')]),
"float": "right",
"height": "100%"
})
],
className="row header"),
# tabs
html.Div([
dcc.Tabs(
id="tabs",
style={
"height": "20",
"verticalAlign": "middle"
},
children=[
dcc.Tab(label="Opportunities", value="opportunities_tab"),
dcc.Tab(label="Leads", value="leads_tab"),
dcc.Tab(id="cases_tab", label="Cases", value="cases_tab"),
],
value="leads_tab",
)
],
className="row tabs_div"),
# divs that save dataframe for each tab
html.Div(
sf_manager.get_opportunities().to_json(
orient="split"), # opportunities df
id="opportunities_df",
style={"display": "none"},
),
dcc.Tab(
label='O projekcie',
value='1',
children=html.Div([
dbc.Row([
dbc.Col([
html.H5('Projekt "Wirus na mapie"'),
html.Div(children=desc)
],
width=4),
dbc.Col([
html.H5('Aktualności'),
html.Div(children=dbc.Table.from_dataframe(
news,
striped=True,
bordered=False,
hover=True,
responsive=True,
style={'textAlign': 'left'}))
],
width=5),
dbc.Col([
html.H5('Interaktywność treści'),
html.P(' '),
html.Img(
src=
'http://www.uwm.edu.pl/geosin/wordpress/wp-content/uploads/2020/03/figPlot.gif',
width='100%'),
html.Img(
src=
'http://www.uwm.edu.pl/geosin/wordpress/wp-content/uploads/2020/03/heatmap.gif',
width='100%')
],
width=3)
],
style={
'margin': 15,
'textAlign': 'left'
})
],
style={
'margin': 15,
'textAlign': 'left'
})),
],
style={
'display': 'inline-block',
'verticalAlign': 'top',
'width': '25%',
'marginLeft': '2%'
}),
html.Div([dcc.RadioItems(id='radio-val', options=cols, value='PRCP')],
style={
'display': 'inline-block',
"width": "9%",
'marginTop': '1.5%'
}),
dcc.Tabs(id="tabs",
children=[
dcc.Tab(label='Line Chart',
children=[dcc.Graph(id='line-chart')]),
dcc.Tab(label='Bar Chart',
children=[dcc.Graph(id='heatmap')])
])
],
style={
"width": "95%",
"margin": "0 auto",
"boxShadow": "4px 4px 5px 2px rgba(0, 0, 255, .2)"
}),
style={"backgroundColor": "white"})
@app.callback(Output('line-chart', 'figure'), [
Input('cities-ddl', 'value'),
Input('date-picker', 'start_date'),
file_id = '1-4LfMPoJYxvZzK3tRHo5YJpZWhMFzYdY'
destination = 'data/cpu_data.csv'
download_file_from_google_drive(file_id, destination)
# запуск приложения
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
# app = dash.Dash(__name__)
# выгрузка данных показателя
fig = go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[4, 1, 2])])
# задание вкладок
app.layout = html.Div([
dcc.Tabs(id='tabs-example', value='tab-3', children=[
dcc.Tab(label='Ошибки у пользователей', value='tab-1',),
dcc.Tab(label='Статистика по пользователям', value='tab-2'),
dcc.Tab(label='Ошибки комутаторов', value='tab-3'),
dcc.Tab(label='Информация о комутаторе', value='tab-4'),
]),
html.Div(id='tabs-example-content')
])
# ---- #
# задание тела вкладки один
# извлечение данных
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')
countries = set(df['country'])
a = html.Div([
dcc.Store(id='memory-output'),
dcc.Dropdown(id='memory-countries', options=[
dcc.Tab(label='Explore by ARG', style=tab_style, selected_style=tab_selected_style, children=[
html.Div(
[
html.P(["Please, select the ARG:",
dcc.Dropdown(id="arg", options=col_options, value=default)])
for d in dimensions
],
className="pretty_container",
style={"width": "25%", "float": "left"},
),
html.Div(
[
html.P(["Please, select the feature:",
dcc.Dropdown(id="feat", options=col_options2,
value='Environmental_Feature')])
for d2 in dimensions2
],
className="pretty_container",
style={"width": "25%", "float": "left"},
),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
html.Div(className="pretty_container",
children=[
html.P("Description of the selected ARG:"),
html.P(id="desc"),
]),
html.Br(),
html.Div(
className="pretty_container",
children=[
dcc.Graph(id="graph", config={"displayModeBar": False}),
]),
html.Div(
className="pretty_container",
children=[
dcc.Graph(id="graph2", config={"displayModeBar": False})
]),
html.Div(
className="pretty_container",
children=[
html.H5(' Taxonomic level:'),
html.P(dcc.Slider(id="slider", min=1, max=6,
marks={1: "Phylum", 2: "Class", 3: "Order", 4: "Family",
5: "Genus", 6: "Species"}, value=4),
style={"width": "95%", "display": "inline-block", 'marginBottom': '1.0em',
'marginLeft': '1.5em'}),
dcc.Graph(id="graph3", style={'marginBottom': '1.5em'},
config={"displayModeBar": False}),
]),
html.Div(
className="pretty_container",
children=[
html.P(["Please, select the environmental parameter:",
dcc.Dropdown(id="env_var", options=col_options3, value='Latitude [degrees North]')])
for d3 in dimensions3
],
style={"width": "35%", "float": "left",'marginBottom': '1.0em'},
),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
html.Br(),
html.Div(className="pretty_container",
children=[
dcc.Graph(id="graph4", config={"displayModeBar": False}),
dash_table.DataTable(
id = 'ols',
columns = [{"name": i, "id": i, } for i in ["-","Coef.","Std.Err.","t", "P>|t|", "[0.025", "0.975]"]]
)
]),
html.Br(),
html.Div(
className="pretty_container",
children=[html.H4(
'Tara Ocean ORFs extracted from co-assembled contigs (from Oceanic regions), annotated by deepARG.'
),
dash_table.DataTable(
id='datatable-paging',
columns=[
{"name": i, "id": i} for i in deep.drop(
[" index", 'order', 'phylum', 'family', 'genus', 'species',
'class', 'description'], axis=1).columns
],
page_current=0,
page_size=PAGE_SIZE,
page_action='custom',
style_table={'overflowX': 'scroll'},
style_cell={
'height': 'auto',
'minWidth': '0px', 'maxWidth': '180px',
'whiteSpace': 'normal'
}
),
html.Br(),
dcc.Markdown("**ORF_ID**: identifier of the ORF predicted from Tara Ocean co-assembly; **contig_id**: ID of the contig; **predicted_ARG-class**: \
antibiotic class; **probability**: DeepARG probability of the ARG annotation; **plasmid**: yes when the ARG was predicted to be in a plasmid by PlasFlow tool; \
**taxon_name_kaiju**: taxonomic classification of the ARG by Kaiju tool (in the deeptest level possible); **All ARGs in contig**: all the ARGs in that contig; **# ARGs in contig**: total of ARGs in that contig."),
html.Br(),
html.A(id='download-link', children='Download Protein Fasta File',
style={'marginBottom': '1.5em'},
),
html.Br(),
html.Br(),
]),
html.Div(id='alignment-viewer-output'),
]),
dcc.Tab(value='tab1',label='Table Sample',children = [
html.Div([
html.Div([
html.H1(children="DATAFRAME TSA"),
#input writing (p = p)
html.P('Claim Site'),
#making a dropdown menu
dcc.Dropdown(value='Yes',
id='filter-Claim Site',
options=[{'label':'Checkpoint', 'value': 'Checkpoint'},
{'label':'Other','value':'Other'},
{'label':'Checked Baggage','value':'Checked Baggage'},
{'label':'Motor Vehicle','value':'Motor Vehicle'},
{'label':'Bus Station','value':'Bus Station'}
])
]),
html.Div([
#input writing (p = p)
html.P('Max Rows'),
dcc.Input(
id='max-row',
placeholder='Enter a number...',
type='number',
value=10)
]),
html.Br(),
html.Button('Search',id = 'filter'),
html.Br(),#break is an enter in between
html.Div(id='div-table',children=[
generate_table(tsa,page_size=10)]),
html.Div([
html.Div([
html.Button('Previous')
],className='col-3'),
html.Div([
html.Button('Next',id='next')
],className='col-3')
])
],
style = {
'font-family': "Arial",
'borderBottom': '1px solid #f2f2f2',
'borderLeft': '1px solid #f2f2f2',
'borderRight':'1px solid #f2f2f2',
'padding' : '33px'}
),
]),
def __init__(self, sysarr, ODcsvs, pumpcsvs, hostname):
self.external_stylesheets = [
'https://codepen.io/chriddyp/pen/bWLwgP.css'
]
self.app = dash.Dash(__name__,
external_stylesheets=self.external_stylesheets)
self.hostname = hostname
# self.allODs = []
# self.allpumps = []
self.evenames = []
self.evesel = []
self.outODs = ODcsvs
self.outpumps = pumpcsvs
# for i in range(len(self.outODs)): self.allODs.append(pd.read_csv(self.outODs[i]))
# for i in range(len(self.outpumps)): self.allpumps.append(pd.read_csv(self.outpumps[i]))
for i in sysarr:
self.evenames.append('CU' + str(i))
self.evesel.append({
'label': 'CU' + str(i),
'value': 'CU' + str(i)
})
tabs_styles = {'height': '44px'}
tab_style = {
'borderBottom': '1px solid #d6d6d6',
'padding': '6px',
'fontWeight': 'bold'
}
tab_selected_style = {
'borderTop': '1px solid #d6d6d6',
'borderBottom': '1px solid #d6d6d6',
'backgroundColor': '#119DFF',
'color': 'white',
'padding': '6px'
}
self.app.layout = html.Div(children=[
html.H1(children='The EVE Plotter', style={'textAlign': 'center'}),
dcc.Tabs(id="tabs-styled-with-inline",
value='overview',
children=[
dcc.Tab(label='Overview',
value='overview',
style=tab_style,
selected_style=tab_selected_style),
dcc.Tab(label='Pumps',
value='pumps',
style=tab_style,
selected_style=tab_selected_style),
dcc.Tab(label='Drug Concentration',
value='drug-conc',
style=tab_style,
selected_style=tab_selected_style),
dcc.Tab(label='Threads',
value='threads',
style=tab_style,
selected_style=tab_selected_style),
],
style=tabs_styles),
# html.Div(id='tabs-content-inline'),
dcc.Dropdown(options=self.evesel,
multi=True,
value=self.evenames,
id='e-select'),
dcc.Graph(id='egraph', style={'textAlign': 'center'})
])
@self.app.callback(Output('egraph', 'figure'), [
Input('tabs-styled-with-inline', 'value'),
Input('e-select', 'value')
])
def update_figure(tabs, esel):
traces = []
self.allODs = []
self.allpumps = []
for i in range(len(self.outODs)):
self.allODs.append(pd.read_csv(self.outODs[i]))
for i in range(len(self.outpumps)):
self.allpumps.append(pd.read_csv(self.outpumps[i]))
if esel == []: return None
if tabs == 'overview':
for evenum in esel:
odtemp = self.allODs[self.evenames.index(evenum)]
pumptemp = self.allpumps[self.evenames.index(evenum)]
traces.append([
go.Scatter(x=odtemp['hour'],
y=odtemp['average'],
text='OD',
mode='lines',
name='[' + evenum + '] Optical Density'),
go.Scatter(
x=odtemp['hour'],
y=pumptemp['media'],
yaxis='y2',
text='Media',
name='[' + evenum + '] Media',
mode='lines',
),
go.Scatter(
x=odtemp['hour'],
y=pumptemp['drug'],
yaxis='y2',
text='Drug',
name='[' + evenum + '] Drug',
mode='lines',
),
go.Scatter(
x=odtemp['hour'],
y=pumptemp['waste'],
yaxis='y2',
text='Waste',
name='[' + evenum + '] Waste',
mode='lines',
),
go.Scatter(
x=odtemp['hour'],
y=pumptemp['drug_mass'] / 12,
text='Concentration',
name='[' + evenum + '] Concentration',
mode='lines',
),
go.Scatter(
x=odtemp['hour'],
y=odtemp['threads'],
# yaxis='y3',
text='Threads',
name='[' + evenum + '] Threads',
mode='markers',
# marker = go.scatter.Marker(color = 'purple')
)
])
# fig = tools.make_subplots(rows=3, cols=1, specs=[[{}], [{}], [{}]],
# shared_xaxes=True, shared_yaxes=True,
# vertical_spacing=0.001)
fig = tools.make_subplots(rows=4,
cols=len(esel),
shared_xaxes=True,
shared_yaxes=True,
vertical_spacing=0.001)
for i in range(len(esel)):
fig.append_trace(traces[i][0], 1, i + 1)
fig.append_trace(traces[i][1], 2, i + 1)
fig.append_trace(traces[i][2], 2, i + 1)
fig.append_trace(traces[i][3], 2, i + 1)
fig.append_trace(traces[i][4], 3, i + 1)
fig.append_trace(traces[i][5], 4, i + 1)
fig['layout'].update(height=1200, width=800 * len(esel))
# fig['layout']['yaxis2'].update(title = 'Threads', overlaying = 'y', side = 'right'),
return fig
elif tabs == 'pumps':
for evenum in esel:
odtemp = self.allODs[self.evenames.index(evenum)]
pumptemp = self.allpumps[self.evenames.index(evenum)]
traces.append([
go.Scatter(x=odtemp['hour'],
y=odtemp['average'],
text='OD',
mode='lines',
name='[' + evenum + '] Optical Density'),
go.Scatter(
x=odtemp['hour'],
y=pumptemp['media'],
yaxis='y3',
text='Media',
name='[' + evenum + '] Media',
mode='lines',
),
go.Scatter(
x=odtemp['hour'],
y=pumptemp['drug'],
yaxis='y3',
text='Drug',
name='[' + evenum + '] Drug',
mode='lines',
),
go.Scatter(
x=odtemp['hour'],
y=pumptemp['waste'],
yaxis='y3',
text='Waste',
name='[' + evenum + '] Waste',
mode='lines',
)
])
# fig = tools.make_subplots(rows=3, cols=1, specs=[[{}], [{}], [{}]],
# shared_xaxes=True, shared_yaxes=True,
# vertical_spacing=0.001)
fig = tools.make_subplots(rows=1,
cols=len(esel),
shared_xaxes=True,
vertical_spacing=0.001)
for i in range(len(esel)):
fig.append_trace(traces[i][0], 1, i + 1)
fig.append_trace(traces[i][1], 1, i + 1)
fig.append_trace(traces[i][2], 1, i + 1)
fig.append_trace(traces[i][3], 1, i + 1)
fig['layout'].update(height=600, width=800 * len(esel))
# fig['layout']['yaxis2'].update(title = 'Media', overlaying = 'y', side = 'right'),
return fig
elif tabs == 'threads':
for evenum in esel:
odtemp = self.allODs[self.evenames.index(evenum)]
pumptemp = self.allpumps[self.evenames.index(evenum)]
traces.append([
go.Scatter(x=odtemp['hour'],
y=odtemp['average'],
text='od',
mode='lines',
name='[' + evenum + '] Optical Density'),
go.Scatter(
x=odtemp['hour'],
y=odtemp['threads'],
# yaxis='y3',
text='threads',
name='[' + evenum + '] Threads',
mode='markers',
# marker = go.scatter.marker(color = 'purple')
)
])
# fig = tools.make_subplots(rows=3, cols=1, specs=[[{}], [{}], [{}]],
# shared_xaxes=true, shared_yaxes=true,
# vertical_spacing=0.001)
fig = tools.make_subplots(rows=1,
cols=len(esel),
shared_xaxes=True,
vertical_spacing=0.001)
for i in range(len(esel)):
fig.append_trace(traces[i][0], 1, i + 1)
fig.append_trace(traces[i][1], 1, i + 1)
fig['layout'].update(height=600, width=800 * len(esel))
return fig
elif tabs == 'drug-conc':
for evenum in esel:
odtemp = self.allODs[self.evenames.index(evenum)]
pumptemp = self.allpumps[self.evenames.index(evenum)]
traces.append([
go.Scatter(x=odtemp['hour'],
y=odtemp['average'],
text='od',
mode='lines',
name='[' + evenum + '] Optical Density'),
go.Scatter(
x=odtemp['hour'],
y=pumptemp['drug_mass'] / 12,
text='Concentration',
name='[' + evenum + '] Concentration',
mode='lines',
)
])
fig = tools.make_subplots(rows=1,
cols=len(esel),
shared_xaxes=True,
vertical_spacing=0.001)
for i in range(len(esel)):
fig.append_trace(traces[i][0], 1, i + 1)
fig.append_trace(traces[i][1], 1, i + 1)
fig['layout'].update(height=600, width=800 * len(esel))
return fig
# if __name__ == '__main__':
# self.app.run_server(debug=True, host='eve.ccf.org')
self.app.run_server(host=self.hostname)
from dash.dependencies import Input, Output
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
app.layout = html.Div([
html.H1("Twitter Hashtag Sentiment Tracker",
style={'text-align': 'center'}),
html.Br(),
dcc.Tabs(id='tabs',
value='tab-1',
children=[
dcc.Tab(label='1', value='tab-1'),
dcc.Tab(label='2', value='tab-2'),
]),
html.Div(id='tabs-content')
])
@app.callback(Output('tabs-content', 'children'), [Input('tabs', 'value')])
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.H3('Sentiment Scores'),
dcc.Graph(
figure={
'data': [{
'x': ['metoo', 'blm', 'maga'],
'borderBottom': '1px solid #d6d6d6',
'padding': '6px',
'fontWeight': 'bold'
}
tab_selected_style = {
'borderTop': '1px solid #d6d6d6',
'borderBottom': '1px solid #d6d6d6',
'backgroundColor': 'cornsilk',
'color': 'black',
'padding': '6px'
}
tabs = dcc.Tabs(children=[
dcc.Tab(tab1_content,
label="Contexto",
style=tab_style,
selected_style=tab_selected_style),
dcc.Tab(tab2_content,
label="Frecuencia",
style=tab_style,
selected_style=tab_selected_style),
], )
# ___________________________________________ CONTENIDO HOJA 2 ___________________________________________________________________
# Ver hoja layout línea 387
# ___________________________________________ CONTENIDO HOJA 3 ___________________________________________________________________
content3 = html.Div([
html.H1(["RECOMENDACIONES"], style=CONTENT_STYLE),
html.P("Vet el top 10 de productos y su detalle. \
Elegir primero una categoria de edad masculina o femenina, y luego el clúster deseado."
def creatapp():
main_layout = html.Div([
html.Div([
html.H1(id="main_title",
children="Terrorism Analysis with Insights"),
html.Img(src="/assets/terrorism.png")
],
className="Top"),
html.Div([
dcc.Tabs(id="Tabs",
value="tab-1",
children=[
dcc.Tab(label="Map tool",
id="Map tool",
value="tab-1",
className="Tab1",
children=[
dcc.Tabs(
id="subtabs",
value="tab-1",
children=[
dcc.Tab(label="World Map tool",
id="World",
value="tab-1",
className="Tab1"),
dcc.Tab(label="India Map tool",
id="India",
value="tab-2",
className="Tab1")
])
]),
dcc.Tab(label="Chart Tool",
id="chart tool",
value="Chart",
className="Tab1",
children=[
dcc.Tabs(
id="subtabs2",
value="tab-2",
children=[
dcc.Tab(label="World Chart tool",
id="WorldC",
value="tab-3",
className="Tab1"),
dcc.Tab(label="India Chart tool",
id="IndiaC",
value="tab-4",
className="Tab1")
]),
html.Div()
])
])
],
className="tab"),
html.Div(id="content")
],
style={
'background-color': 'rgb(66,196,247)',
'margin': '0px -10px 10px'
})
return main_layout
# app = DjangoDash('Sunburst') # , external_stylesheets=external_stylesheets)
app = dash.Dash(__name__) # , external_stylesheets=external_stylesheets)
fig_one, title_one = create_sunburst_fig_title('ba')
fig_two, title_two = create_sunburst_fig_title('ma')
# _, fig_one_title = get_sunburst('ba')
# _, fig_two_title = get_sunburst('ma')
fig_one_title = 'a fix set tile for testing'
fig_two_title = 'a fix set tile for testing'
app.layout = html.Div([
dcc.Tabs(id="tabs",
value='tab-1',
children=[
dcc.Tab(label=title_one, value='tab-1'),
dcc.Tab(label=title_two, value='tab-2'),
]),
html.Div(id='tabs-content'),
],
style={'font-family': 'Courier'})
@app.callback(Output('tabs-content', 'children'), [Input('tabs', 'value')])
def render_content(tab):
"""Render by start and callback."""
if tab == 'tab-1':
return html.Div(
[
# html.H3(children='The ' + title_one + ' Studies'),
def makeLayout():
return html.Div(children=[
dcc.Location(id='loc'), # Check URL for Git Auth
dcc.Store(id='loginInfo', storage_type='session', data={'user': None, 'status': None, 'token': None}), # Used for Git Auth
dcc.Interval(id='queueRefreshTimer', interval=1000, n_intervals=0),
html.H1(children='Performance Explorer'),
html.Div(children=[
html.Div(children=[
dcc.Markdown(
'Interactively compare performance across commits in the [AutoPas](https://github.com/AutoPas/AutoPas) GitHub Repo\n'
'Working with data from [AutoPas-PerformanceTesting](https://github.com/AutoPas/PerformanceTesting)',
style={'whiteSpace': 'pre'}),
html.Button('Refresh Commit List', id='refreshButton', n_clicks=0),
html.Br(), ]),
], style={'float': 'left'}),
html.Div(children=[
html.Button('Login', id='loginButton', n_clicks=0),
html.P(id='loginResponse'),
html.Br(),
], style={'float': 'right'}),
html.Br(style={'clear': 'left'}),
dcc.Tabs(id='tabs', value='tab2', children=[
dcc.Tab(label='1v1 Compare', value='tab0',
children=html.Div([
html.Div([
html.H2('1) Select commits to compare:'),
html.Div(
[
html.P('Base Commit:', style={'font-weight': 'bold'}),
dcc.Dropdown('CommitList0', options=[k for k in dummyOptions],
placeholder='Select 1st Commit...',
style={
'font-family': 'monospace',
})
],
style={
'width': '50%',
'float': 'left'
}
),
html.Div(
[
html.P('Compare Commit:', style={'font-weight': 'bold'}),
dcc.Dropdown('CommitList1', options=[k for k in dummyOptions],
placeholder='Select 2nd Commit...',
style={
'font-family': 'monospace',
})
],
style={
'width': '50%',
'float': 'right'
}
),
],
style={
'width': '100%',
'float': 'left',
'background-color': '#F5F0F6'
}),
html.Br(),
html.Div(
[html.H2('2) Select setup to compare:'),
dcc.Dropdown('Setups', options=[k for k in dummyOptions],
placeholder='Select Setup...',
style={
'font-family': 'monospace',
})],
style={
'width': '100%',
'float': 'left',
'background-color': '#F5F0F6',
'padding-bottom': '1%'
}
),
html.Br(),
html.Div(
#### Dynamic Parts ####
[getDynamicOptionTemplate(i, k, 100 / (len(DYNAMIC_OPTIONS) + 1), tab=0) for i, k in
enumerate(DYNAMIC_OPTIONS)],
#### Dynamic Parts ####
),
html.Div(
[html.H2('3) Coloring:'),
dcc.RadioItems('Coloring', options=[k for k in dummyOptions],
labelStyle={'display': 'block'},
style={
'font-family': 'monospace',
})],
style={
'width': f'{100 / (len(DYNAMIC_OPTIONS) + 1)}%',
'background-color': COLORS[len(DYNAMIC_OPTIONS)],
'float': 'left',
'padding': '.3%',
'box-sizing': 'border-box'
}
),
html.Br(style={'clear': 'left'}),
html.H2(id='LoadText', children='Nothing to do'),
html.Img(id='LoadingImg', src='', width='5%'),
dcc.Interval('LoadCheck', interval=250, disabled=False),
# Continuously checking if load has succeeded
# TODO: Replace this with dcc.Store
html.Div(id='CurrentData', style={'display': 'none'}),
html.Div(
[
html.H2('4) Plot:', id='PlotTitle'),
]
),
dcc.Graph(
id='CompareGraph'
),
])),
dcc.Tab(label='Compare over time', value='tab1',
children=html.Div([
html.Div(
[
# TODO: SLIDER VIEW AND BETTER VERTICAL LAYOUT
dcc.RangeSlider(
id='CommitSlider',
min=0,
max=9,
marks={i: 'Label {}'.format(i) for i in range(10)},
value=[4, 5],
pushable=1,
vertical=True,
verticalHeight=400
),
dcc.Store(id='SliderDict', data=None),
dcc.Store(id='SliderData', data=None),
dcc.Store(id='LoadTarget', data=None),
dcc.Store(id='CurrentLoad', data=None),
dcc.Interval(id='TimelineInterval', interval=250, disabled=False)
],
style={'font-family': 'monospace',
'width': '100%',
'white-space': 'pre'}
),
html.Div(
dcc.Dropdown('BaseSetup', options=[k for k in dummyOptions],
placeholder='Select Setup...',
style={
'font-family': 'monospace',
}),
style={
'width': '100%',
'float': 'left',
'background-color': '#F5F0F6',
'padding-bottom': '1%'
}
),
html.Br(),
html.Div(
#### Dynamic Parts ####
[getDynamicOptionTemplate(i, k, 100 / (len(DYNAMIC_OPTIONS)), tab=1) for i, k in
enumerate(DYNAMIC_OPTIONS)],
#### Dynamic Parts ####
),
html.Br(style={'clear': 'left'}),
html.Div(
[
html.H2('Plot:', id='TimelinePlotDiv'),
html.Button(children='Button not active yet',
id='TimelinePlotButton',
disabled=True)
]
),
dcc.Graph(
id='TimeLine'
)])),
dcc.Tab(label='Single view', value='tab2',
children=[
html.Div([
html.H2('1) Select commits to compare:'),
html.Div(
[
dcc.Dropdown('CommitListSingle', options=[k for k in dummyOptions],
placeholder='Select Commit...',
style={
'font-family': 'monospace',
})
],
style={
'width': '100%',
'float': 'left',
}
)],
style={
'width': '100%',
'float': 'left',
'background-color': '#F5F0F6'
}),
html.Br(),
html.Div(
[html.H2('2) Select setup to compare:'),
dcc.Dropdown('SetupSingle', options=[k for k in dummyOptions],
placeholder='Select Setup...',
style={
'font-family': 'monospace',
})],
style={
'width': '100%',
'float': 'left',
'background-color': '#F5F0F6',
'padding-bottom': '1%'
}
),
html.Br(),
html.Div(
#### Dynamic Parts ####
[getDynamicOptionTemplate(i, k, 100 / (len(DYNAMIC_OPTIONS) + 1), tab=2) for i, k in
enumerate(DYNAMIC_OPTIONS)],
#### Dynamic Parts ####
),
html.Div(
[html.H2('3) Grouping:'),
dcc.RadioItems('GroupingSingle', options=[k for k in dummyOptions],
labelStyle={'display': 'block'},
style={
'font-family': 'monospace',
})],
style={
'width': f'{100 / (len(DYNAMIC_OPTIONS) + 1)}%',
'background-color': COLORS[len(DYNAMIC_OPTIONS)],
'float': 'left',
'padding': '.3%',
'box-sizing': 'border-box'
}
),
html.Br(style={'clear': 'left'}),
dcc.Store(id='SingleData', data=None),
html.Div(
[
html.H2('4) Plot, please wait:', id='PlotTitleSingle'),
]
),
dcc.Graph(
id='SingleGraph'
),
]
),
dcc.Tab(label='Submit Job', value='tab3', children=[
html.Div(children=[
html.H1('Submit Custom Jobs to the worker queue (if logged in).'),
# Hide div if not logged in
html.Div(id='submissionDiv', children=[
html.H2('1) Job Name:'),
dcc.Input(id='CustomJobName', placeholder='CUSTOM JOB NAME', required=True, debounce=False),
html.H2('2) Git SHAs to test (1 per line):'),
dcc.Textarea(id='CustomSHAList', placeholder='Custom SHAs',
required=True,
style={'width': '40em',
'height': '6em'}),
html.H2('3) Upload Yaml Config OR select from list of available:'),
dcc.RadioItems(id='YamlSelect', options=[{'label': 'Upload YAML File', 'value': 'uploaded'},
{'label': 'Existing YAML', 'value': 'existing'}],
value='existing', labelStyle={'display': 'inline-block'}),
html.Div(id='YamlUploadDiv', children=[
html.H3('Upload YAML config file to use:'),
dcc.Upload(id='YamlCustomUpload', multiple=False, children=[],
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
# 'display': 'block'
}),
]),
html.Div(id='YamlSelectDiv', children=[
html.H3('Choose from existing YAML files'),
dcc.Dropdown(id='YamlAvailable', options=[]),
]),
html.H2('4) OPTIONAL: Upload Checkpoint file OR select from list of available:'),
dcc.RadioItems(id='CheckpointSelect',
options=[{'label': 'No Checkpoint',
'value': 'noCheckPoint'},
{'label': 'Upload Checkpoint File',
'value': 'uploaded'},
{'label': 'Existing Checkpoint',
'value': 'existing'},
],
value='noCheckPoint', labelStyle={'display': 'inline-block'}),
html.Div(id='CheckpointUploadDiv', children=[
html.H3('Upload Checkpoint File to use:'),
dcc.Upload(id='CheckpointCustomUpload', multiple=False, children=[],
style={
'width': '100%',
'height': '60px',
'lineHeight': '60px',
'borderWidth': '1px',
'borderStyle': 'dashed',
'borderRadius': '5px',
'textAlign': 'center',
# 'display': 'block'
}),
]),
html.Div(id='CheckpointSelectDiv', children=[
html.H3('Choose from existing Checkpoint files'),
dcc.Dropdown(id='CheckpointAvailable', options=[]),
]),
html.Br(),
html.H1('Job Summary:'),
html.P(id='JobSummary', children=[]),
html.Button('Submit Job', id='submitJob', n_clicks=0),
html.P(id='SubmitResponse', children=[], style={'white-space': 'pre-wrap'}),
],
style={'display': 'none'}),
],
style={'text-align': 'center'}
)
]),
# TODO: Show yaml in queue
dcc.Tab(label='Current Queue', value='tab4', children=[
html.Div(children=[
html.Br(),
# html.Button('Refresh Queue', id='refreshQueue', n_clicks=0),
html.Table(id='QueueTable', children=[], style={'margin': '0 auto'}),
html.Br(),
html.H1('Cancel Job:'),
dcc.Input(id='CancelJobName', placeholder='CUSTOM JOB NAME', debounce=True),
html.Button('Cancel Job', id='cancelJob', n_clicks=0),
html.P(id='CancelResponse', children=[]),
html.H1('Failed Jobs:'),
html.Table(id='FailureTable', children=[], style={'margin': '0 auto'}),
], style={'text-align': 'center'}
)
]),
]),
],
style={
'font-family': 'sans-serif',
})
html.Button('Refresh',
style={'float': 'right'},
id='refresh',
n_clicks=0),
]),
ddk.Block(children=[
dcc.Tabs(id='selected-tab',
value='load',
children=[
dcc.Tab(label="Load",
value='load',
children=[
ddk.Card(width=100,
children=[
dcc.Loading(
id='load_loader',
children=[
ddk.Graph(
id="load_plot",
config=graph_config)
]),
])
])
]),
dcc.Tab(label="Profiles",
value='profiles',
children=[
ddk.Card(width=100,
children=[
dcc.Loading(id='profile_loader',
children=[
ddk.Graph(id="profile_plot",
html.Div('Raw Content')
])
# Start Dash
app = dash.Dash(__name__)
server = app.server # Expose the server variable for deployments
app.layout = html.Div(className='container', children=[
Header("AI Compression", app),
html.Div([
dcc.Tabs(id="menu", value='tab-1', children=[
dcc.Tab(label='Object Detection', value='tab-1'),
dcc.Tab(label='Background Retrieval', value='tab-2'),
dcc.Tab(label='NLP', value='tab-3'),
dcc.Tab(label='Performance', value='tab-4'),
dcc.Tab(label='Final Results', value='tab-5'),
dcc.Tab(label='About', value='tab-4'),
], colors={
"border": 'gold',
"primary": "blue",
"background": "#4C78A8"
}, vertical=False),
html.Div(id='menu-content')
]),
Row(html.P("Upload Image:")),
Row([
