def layout(self):
return dbc.Card([
make_hideable(dbc.CardHeader([
html.Div([
html.H3(self.title, id='decisiontrees-title-' + self.name),
make_hideable(html.H6(self.subtitle,
className='card-subtitle'),
hide=self.hide_subtitle),
dbc.Tooltip(self.description,
target='decisiontrees-title-' + self.name),
]),
]),
hide=self.hide_title),
dbc.CardBody([
dbc.Row([
make_hideable(dbc.Col([
dbc.Label(f"{self.explainer.index_name}:",
id='decisiontrees-index-label-' + self.name),
dbc.Tooltip(
f"Select {self.explainer.index_name} to display decision trees for",
target='decisiontrees-index-label-' + self.name),
dcc.Dropdown(
id='decisiontrees-index-' + self.name,
options=[{
'label':
str(idx),
'value':
idx
} for idx in self.explainer.get_index_list()],
value=self.index)
],
md=4),
hide=self.hide_index),
make_hideable(dbc.Col([
dbc.Label("Highlight tree:",
id='decisiontrees-tree-label-' + self.name),
dbc.Tooltip(
f"Select a specific tree to highlight. You can also "
"highlight by clicking on a specifc bar in the bar chart.",
target='decisiontrees-tree-label-' + self.name),
dbc.Select(
id='decisiontrees-highlight-' + self.name,
options=[{
'label': str(tree),
'value': tree
} for tree in range(self.explainer.no_of_trees)],
value=self.highlight)
],
md=2),
hide=self.hide_highlight),
make_hideable(dbc.Col([self.selector.layout()], width=2),
hide=self.hide_selector)
]),
dbc.Row([
dbc.Col([
dcc.Graph(id="decisiontrees-graph-" + self.name,
config=dict(modeBarButtons=[['toImage']],
displaylogo=False)),
])
]),
dbc.Row([
make_hideable(dbc.Col(
[self.popout.layout()], md=2, align="start"),
hide=self.hide_popout),
],
justify="end"),
])
])
def make_detail_header(filter_data, suff=""):
"""
Return a card with the date selection and buttons in the header, and a table in the body with filter selections
"""
log("make_detail_header")
if suff == "":
color = 'primary'
elif suff == "2":
color = 'success'
direction = filter_data['direction']
stations = "All" if filter_data['stations'] is None else ", ".join(
filter_data['stations'])
if (filter_data['cats'] is None) or (len(set(filter_data['cats'])) >= len(
set(memtypes))):
cats = "All"
else:
cats = ", ".join(filter_data['cats'])
date = ' ' if filter_data['date'] is None else filter_data['date']
date_button = dbc.Button(
id=f"date-update-btn{suff}",
outline=True,
className='rounded-0',
color='link',
children=[html.Span(className="fa fa-calendar text-white")])
#date_button = dcc.Link(href="#",id=f"date-update-btn{suff}",children=html.Span(className="fa fa-calendar"))
date_button_tt = dbc.Tooltip(target=f"date-update-btn{suff}",
children="Change the current date range")
close_button = dbc.Button(
id=f"close-btn{suff}",
outline=True,
className='rounded-0',
color='link',
children=[html.Span(className="fa fa-times-circle text-white")])
close_button_tt = dbc.Tooltip(target=f"close-btn{suff}", children="Close")
if suff == "":
date_button2 = dbc.Button(
id='date-button2',
outline=True,
className='rounded-0',
color='link',
children=[html.Span(className="fa fa-plus text-white")])
date_button2_tt = dbc.Tooltip(target='date-button2',
children="Compare a second date range")
close_button = dbc.Button(
id=f"close-btn{suff}",
className='d-none',
color='link',
children=[html.Span(className="fa fa-times-circle text-white")])
else:
date_button2 = ""
date_button2_tt = ""
data_button = dbc.Button(
id=f'data-button{suff}',
outline=True,
className='rounded-0',
color='link',
children=[html.Span(className="fa fa-table text-white")])
data_button_tt = dbc.Tooltip(target=f'data-button{suff}',
children="View raw data")
if len(date) == 2:
d1 = dt.datetime.strptime(date[0],
'%Y-%m-%d').strftime('%A, %B %-d %Y')
d2 = dt.datetime.strptime(date[1],
'%Y-%m-%d').strftime('%A, %B %-d %Y')
header_txt = dbc.Col(
[d1, " ",
html.Span(className="fa fa-arrow-right"), " ", d2])
else:
d1 = dt.datetime.strptime(date, '%Y-%m-%d').strftime('%A, %B %-d %Y')
header_txt = dbc.Col(children=[d1])
header = dbc.Row(className='',
children=[
header_txt, date_button, date_button_tt, data_button,
data_button_tt, date_button2, date_button2_tt,
close_button, close_button_tt
])
radio_class = 'd-none' if stations == 'All' else ''
radio = dbc.RadioItems(id=f'stations-radio{suff}',
className=radio_class,
options=[{
'label': 'Trip Start',
'value': 'start'
}, {
'label': 'Trip End',
'value': 'stop'
}, {
'label': 'Both',
'value': 'both'
}],
value=direction,
inline=True)
return_btn_class = 'd-none' if stations == 'All' else ''
return_btn_tt = dbc.Tooltip("Go back to all stations",
target=f'map-return-btn{suff}')
return_btn = dbc.Button(
size="sm",
className=return_btn_class,
id=f'map-return-btn{suff}',
color='white',
children=[html.Span(className=f"fa fa-times-circle text-{color}")])
stations_div = dbc.Row([
dbc.Col([html.Em(stations), return_btn_tt, return_btn]),
dbc.Col([radio])
])
stations_header_tt = dbc.Tooltip("Select a station by clicking on the map",
target=f'stations-header-icon{suff}')
membership_header_tt = dbc.Tooltip(
"Select membership types when choosing a date range",
target=f'membership-header-icon{suff}')
stations_header_text = html.Div([
"Stations ",
html.Span(id=f'stations-header-icon{suff}',
className=f"fa fa-question-circle text-{color}")
])
membership_header_text = html.Div([
"Membership Types ",
html.Span(id=f'membership-header-icon{suff}',
className=f"fa fa-question-circle text-{color}")
])
row3 = html.Tr([
html.Th(
html.Span(id=f'stations-header{suff}',
children=stations_header_text)),
html.Td(stations_div), stations_header_tt
])
row4 = html.Tr([
html.Th(
html.Span(id=f'membership-header{suff}',
children=membership_header_text)),
html.Td(html.Em(cats)), membership_header_tt
])
table_body = [html.Tbody([row3, row4])]
table = dbc.Table(table_body, size='sm', bordered=False)
card = dbc.Card(
className='mb-3',
children=[
dbc.CardHeader(className=f"font-weight-bold text-white bg-{color}",
children=header),
table,
])
log("make_detail_header finished")
return card
def init_components(self):
"""
Initialize components (graph, table, filter, settings, ...) and insert it inside
components containers which are created by init_skeleton
"""
self.components['settings']['input_rows'] = create_input_modal(
id='rows',
label="Number of rows for subset",
tooltip=
"Set max number of lines for subset (datatable).Filter will be apply on this subset."
)
self.components['settings']['input_points'] = create_input_modal(
id='points',
label="Number of points for plot",
tooltip="Set max number of points in feature contribution plots")
self.components['settings']['input_features'] = create_input_modal(
id='features',
label="Number of features to plot",
tooltip=
"Set max number of features to plot in features importance and local explanation plots.",
)
self.components['settings']['input_violin'] = create_input_modal(
id='violin',
label="Max number of labels for violin plot",
tooltip=
"Set max number of labels to display a violin plot for feature contribution plot (otherwise a "
"scatter plot is displayed).")
self.components['settings']['name'] = dbc.FormGroup(
[
dbc.Checklist(options=[{
"label": "Use domain name for features name.",
"value": 1
}],
value=[],
inline=True,
id="name",
style={"margin-left": "20px"}),
dbc.Tooltip(
"Replace technical feature names by domain names if exists.",
target='name',
placement='bottom'),
],
row=True,
)
self.components['settings']['modal'] = dbc.Modal([
dbc.ModalHeader("Settings"),
dbc.ModalBody(
dbc.Form([
self.components['settings']['input_rows'],
self.components['settings']['input_points'],
self.components['settings']['input_features'],
self.components['settings']['input_violin'],
self.components['settings']['name']
])),
dbc.ModalFooter(
dbc.Button("Apply", id="apply", className="ml-auto")),
],
id="modal")
self.components['menu'] = dbc.Row([
dbc.Col(
[
html.H4([
dbc.Badge("Regression",
id='regression_badge',
style={"margin-right": "5px"}),
dbc.Badge("Classification", id='classification_badge')
],
style={"margin": "0px"}),
],
width="auto",
align="center",
),
dbc.Col(dbc.Collapse(dbc.FormGroup(
[
dbc.Label("Class to analyse",
style={
'color': 'white',
'margin': '0px 5px'
}),
dcc.Dropdown(id="select_label",
options=[],
value=None,
clearable=False,
searchable=False,
style={
"verticalAlign": "middle",
"zIndex": '1010',
"min-width": '200px'
})
],
row=True,
style={
"margin": "0px 0px 0px 5px",
"align-items": "center"
}),
is_open=True,
id='select_collapse'),
width="auto",
align="center",
style={'padding': 'none'}),
dbc.Col(html.Div([
html.Img(id='settings',
title='settings',
alt='Settings',
src=self.app.get_asset_url('settings.png'),
height='40px',
style={'cursor': 'pointer'}),
self.components['settings']['modal'],
]),
align="center",
width="50px",
style={'padding': '0px 0px 0px 20px'})
],
form=True,
no_gutters=True,
justify="end")
self.adjust_menu()
self.components['table']['dataset'] = dash_table.DataTable(
id='dataset',
data=self.round_dataframe.to_dict('records'),
tooltip_data=[{
column: {
'value': str(value),
'type': 'text'
}
for column, value in row.items()
} for row in self.dataframe.to_dict('rows')],
tooltip_duration=2000,
columns=[{
"name": '_index_',
"id": '_index_'
}, {
"name": '_predict_',
"id": '_predict_'
}] + [{
"name": i,
"id": i
} for i in self.explainer.x_pred],
editable=False,
row_deletable=False,
style_as_list_view=True,
virtualization=True,
page_action='none',
fixed_rows={
'headers': True,
'data': 0
},
fixed_columns={
'headers': True,
'data': 0
},
filter_action='custom',
filter_query='',
sort_action='custom',
sort_mode='multi',
sort_by=[],
active_cell={
'row': 0,
'column': 0,
'column_id': '_index_'
},
style_table={
'overflowY': 'auto',
'overflowX': 'auto'
},
style_header={'height': '30px'},
style_cell={
'minWidth': '70px',
'width': '120px',
'maxWidth': '200px',
},
)
self.components['graph']['global_feature_importance'] = MyGraph(
figure=go.Figure(), id='global_feature_importance')
self.components['graph']['feature_selector'] = MyGraph(
figure=go.Figure(), id='feature_selector')
self.components['graph']['detail_feature'] = MyGraph(
figure=go.Figure(), id='detail_feature')
self.components['filter']['index'] = dbc.FormGroup([
dbc.Label("Index ", align="center", width=4),
dbc.Col(dbc.Input(id="index_id",
type="text",
bs_size="md",
placeholder="Id must exist",
debounce=True,
persistence=True,
style={'textAlign': 'right'}),
style={'padding': "0px"}),
dbc.Col(html.Img(
id='validation',
alt='Validate',
title='Validate index',
src=self.app.get_asset_url('reload.png'),
height='30px',
style={'cursor': 'pointer'},
),
style={'padding': "0px"},
align="center",
width="40px")
],
row=True)
self.components['filter']['threshold'] = dbc.FormGroup(
[
dbc.Label("Threshold", html_for="slider",
id='threshold_label'),
dcc.Slider(
min=0,
max=self.max_threshold,
value=0,
step=0.1,
marks={
f'{round(self.max_threshold * mark / 4)}':
f'{round(self.max_threshold * mark / 4)}'
for mark in range(5)
},
id="threshold_id",
)
],
className='filter_dashed')
self.components['filter']['max_contrib'] = dbc.FormGroup(
[
dbc.Label("Features to display : ", id='max_contrib_label'),
dcc.Slider(
min=1,
max=min(self.settings['features'],
len(self.dataframe.columns) - 2),
step=1,
value=min(self.settings['features'],
len(self.dataframe.columns) - 2),
id="max_contrib_id",
)
],
className='filter_dashed')
self.components['filter']['positive_contrib'] = dbc.FormGroup(
[
dbc.Label("Contributions to display : "),
dbc.Row([
dbc.Col(dbc.Checklist(options=[{
"label": "Positive",
"value": 1
}],
value=[1],
inline=True,
id="check_id_positive"),
width=6),
dbc.Col(dbc.Checklist(options=[{
"label": "Negative",
"value": 1
}],
value=[1],
inline=True,
id="check_id_negative"),
width=6,
style={'padding': "0px"},
align="center"),
],
no_gutters=True,
justify="center",
form=True)
],
className='filter_dashed')
self.components['filter']['masked_contrib'] = dbc.FormGroup(
[
dbc.Label("Feature(s) to mask :"),
dcc.Dropdown(options=[{
'label': key,
'value': value
} for key, value in sorted(
self.explainer.inv_features_dict.items(),
key=lambda item: item[0])],
value='',
multi=True,
searchable=True,
id="masked_contrib_id"),
],
className='filter_dashed')
width=2),
dbc.Col(dbc.Button('Modify',
color="warning",
className="mr-1",
id='modify-button',
n_clicks=0),
width=2),
dbc.Col(dbc.Button("Delete",
color="danger",
className="mr-1",
id='delete-button',
n_clicks=0),
width=2)
],
justify="center"),
dbc.Tooltip("Create a signal", target="create-button", placement='left'),
dbc.Tooltip("Read a signal", target="readit-button", placement='left'),
dbc.Tooltip("Modify a signal", target="modify-button", placement='left'),
dbc.Tooltip("Delete a signal", target="delete-button", placement='right'),
html.Br(),
dbc.Row([
dbc.Col(html.Div(id='signalid-output'), width=2),
dbc.Col(html.Div(id='description-output',
style={'whiteSpace': 'pre-line'}),
width=2),
dbc.Col(html.Div(id='s3-output', style={'whiteSpace': 'pre-line'}),
width=2),
],
justify="center"),
html.Br(),
dbc.Row([
def header(header_text=""):
update_dates = update_date()
data_processed_operational = update_dates[0]
data_updated_operational = update_dates[1]
data_process_finance = update_dates[2]
data_updated_finance = update_dates[3]
date_process_bouwportaal = update_dates[4]
date_updated_bouwportaal = update_dates[5]
data_update_text_1 = f"""
Operationele data (Fiberconnect) is binnengekomen op {data_updated_operational}
, en voor het laatst meegenomen in de analyse op {data_processed_operational}.
"""
data_update_text_2 = f"""
Financiele data (BAAN) is binnengekomen op {data_updated_finance},
en voor het laatst meegenomen in de analyse op {data_process_finance}.
"""
data_update_text_3 = f"""
Bouwportaal data is binnengekomen op {date_updated_bouwportaal},
en voor het laats meegenomen in de analyse op {date_process_bouwportaal}
"""
return html.Div(
[
html.Div(
[
html.Img(
src=app.get_asset_url("ODH_logo_original.png"),
id="DAT-logo",
style={
"height": "70px",
"width": "auto",
"margin-bottom": "15px",
"margin-left": "115px",
},
),
],
className="one-third column",
style={"textAlign": "left"},
),
html.Div(
[
html.Div(
[
html.H3(
header_text,
style={"margin-bottom": "0px", "margin-left": "75px"},
),
html.P(
id="date_update",
children=" Data updated",
style={"margin-bottom": "0px", "margin-left": "75px"},
className="fa fa-info-circle",
),
dbc.Tooltip(
children=[
html.P(data_update_text_1),
html.Br(),
html.P(data_update_text_2),
html.Br(),
html.P(data_update_text_3)
],
id="hover",
target="date_update",
placement="below",
style={"font-size": 12},
),
],
)
],
className="one-third column",
id="title",
style={"textAlign": "center"},
),
html.Div(
[
html.Img(
src=app.get_asset_url("vqd.png"),
id="vqd-image",
style={
"height": "100px",
"width": "auto",
"margin-bottom": "15px",
"margin-right": "0px",
},
)
],
className="one-third column",
style={"textAlign": "right"},
),
],
id="header",
className="row",
style={"margin-bottom": "25px"},
)
def build_cards(dff, metric, model):
metric_name = column_translator[metric]
#latest data
latest_version = dff.model_date.max()
#TODO: Maybe add cards for latest versions of LANL and IHME
dff_latest = dff[(dff.model_date == latest_version)]
proj_latest = dff_latest[metric].max()
proj_latest_model = dff_latest['model_name'].unique(
)[0] + ' - ' + dff_latest['model_version'].unique()[0]
#historical max and mins
version_max = dff.groupby(['model_name', 'model_version'])[metric].max()
proj_max = np.max(version_max)
proj_min = np.min(version_max)
#model labels
proj_max_model = ' - '.join(version_max.index[np.argmax(version_max)])
proj_min_model = ' - '.join(version_max.index[np.argmin(version_max)])
cards = [
dbc.Col([
dbc.Card(
[
dbc.CardHeader([
html.H5(f"Projected Peak - Latest",
id='projected-latest-header',
className="card-text")
]), #TODO:add dbc.Tooltip to explain what this card means
dbc.CardBody([
html.H2(f'{int(proj_latest)}', className='card-text'),
html.P(f'{proj_latest_model}', className='card-text'),
])
],
color="info",
outline=True),
dbc.Tooltip(
f"Projected peak value for {column_translator[metric]} for the most recent model included in the selection",
target="projected-latest-header",
placement='top',
offset=0,
),
]),
dbc.Col([
dbc.Card(
[
dbc.CardHeader([
html.H5(f"Projected Peak - Maximum",
id='projected-max-header',
className="card-text")
]), #TODO:add dbc.Tooltip to explain what this card means
dbc.CardBody([
html.H2(f'{int(proj_max)}', className='card-text'),
html.P(f'{proj_max_model}', className='card-text'),
])
],
color="danger",
outline=True),
dbc.Tooltip(
f"Projected peak value for {column_translator[metric]} for the model with the highest value included in the selection",
target="projected-max-header",
placement='top',
offset=0,
)
]),
dbc.Col([
dbc.Card(
[
dbc.CardHeader([
html.H5("Projected Peak - Minimum",
id='projected-min-header',
className="card-text")
]), #TODO:add dbc.Tooltip to explain what this card means
dbc.CardBody([
html.H2(f'{int(proj_min)}', className='card-text'),
html.P(f'{proj_min_model}', className='card-text'),
])
],
color="success",
outline=True),
dbc.Tooltip(
f"Projected peak value for {column_translator[metric]} for the model with the lowest value included in the selection",
target="projected-min-header",
placement='top',
offset=0,
)
]),
]
return cards
def generate_control_card():
"""
:return: A Div containing controls for graphs.
"""
return html.Div(
id="control-card",
children=[
html.Div([
dcc.Dropdown(id="location-select",
options=location_options,
placeholder="Store Location",
value='Delhi',
style={'width': '200px'}),
html.Button([
html.I(id='add-location-button',
className="fa fa-plus-square fa-3x")
],
style={
'margin': '0',
'padding': '0',
'border': '0'
}),
html.Div(id='hidden-text-location', style={'display': 'none'}),
html.Span(style={'width': '50px'}),
dcc.Dropdown(id="country-select",
options=country_options,
placeholder="Country",
value='India',
style={'width': '200px'}),
],
style=dict(display='flex')),
html.Br(),
html.B(id="select-timeframe-label", children="Select Time Frame"),
html.P(),
dcc.DatePickerRange(
id="date-picker-select",
start_date=dt(default_end_date.year, default_end_date.month,
default_end_date.day),
end_date=dt(default_start_date.year, default_start_date.month,
default_start_date.day),
min_date_allowed=dt(2008, 1, 1),
max_date_allowed=dt(default_start_date.year,
default_start_date.month,
default_start_date.day),
initial_visible_month=dt(2020, default_start_date.month, 1),
),
html.Br(),
html.Br(),
html.B(id="select-products-label", children="Select Products"),
html.P(),
dbc.Tooltip(
"Choose the products for which you want to compare sentiment-scores"
"\nTo add a new product, enter the name and press +",
target="select-products-label",
style={
'font-size': 12,
'text-align': 'justify'
}),
html.Div([
dcc.Dropdown(id="product-select",
options=sorted(product_options,
key=lambda x: x["label"]),
value=products,
multi=True,
style={'width': '300px'}),
html.Button([
html.I(id='add-product-button',
className="fa fa-plus-square fa-3x")
],
style={
'margin': '0',
'padding': '0',
'border': '0'
}),
html.Div(id='hidden-text-product', style={'display': 'none'}),
],
style=dict(display='flex')),
html.Br(),
html.Div([
html.Div([
html.B(id="max-tweets-label", children="Max_tweets"),
dbc.Tooltip(
"Set limit for max number of tweets to be mined for each product. (More tweets take more time)",
target="max-tweets-label",
style={
'font-size': 12,
'text-align': 'justify'
}),
]),
html.Span(style={'width': '50px'}),
html.Div([
dcc.Slider(
id='max-tweets-selector',
min=0,
max=5,
step=None,
marks={
0: {
'label': '100'
},
1: {
'label': '500'
},
2: {
'label': '1000'
},
3: {
'label': '2000'
},
4: {
'label': '5000'
},
5: {
'label': 'no_limit'
},
},
value=5,
)
],
style={'width': 300}),
],
style={'display': 'flex'}),
html.Br(),
html.Br(),
html.Div(id="query-btn-outer",
children=dbc.Button(children="Query",
id="query-btn",
outline=True,
color="primary",
style={'width': 100}),
style={
'display': 'flex',
'justify-content': 'center'
}),
],
)
],
width=True,
align='center',
)
navbar_views = dbc.Col(
id='navbar-views-col',
children=dbc.Navbar(
id='navbar-views',
children=[
dbc.Row([
dbc.Col([
dbc.NavLink(id='home-link', children='Home', href='/'),
dbc.Tooltip(
children='Select image for query',
target='home-link',
placement='auto-start',
style={'font-size': '150%'},
),
],
width='auto'),
],
align='stretch',
justify='between'),
],
color="light",
light=True,
),
width='auto',
align='start')
title_block = dbc.Row(
'cursor': 'help',
'width': '85px',
'padding-bottom': '1px',
'margin-bottom': '5px'
},
id='target'),
dbc.Tooltip(html.Div([
html.Li('Sum of Fitted Peaks: The overall '
'fitted function for the uploaded TGA '
'results. The area under this curve is equal to '
'the sum of the areas of ea'
'ch individual fitted peak.'),
html.Li('Fitted Peaks: Shows each fitted peak.'),
html.Li('Peak Histogram: Histogram of peak centers.'),
],
style={'width': '500px'}),
offset=100,
placement='bottom-start',
autohide=False,
target='target',
style={
'font-size': '14px',
'max-width': '1000px',
'text-align': 'left'
}),
dcc.Dropdown(id='type',
options=[
{
'label': 'Sum of Fitted Peaks',
'value': 'sumcurve'
},
align='center',
)
navbar_views = dbc.Col(
id='navbar-views-col',
children=dbc.Navbar(
id='navbar-views',
children=[
dbc.Row([
dbc.Col([
dbc.NavLink(
id='view1-link', children='View 1', href='/view1'),
dbc.Tooltip(
children=
'Detailed view of any individual (Search by human ID)',
target='view1-link',
placement='auto-start',
style={'font-size': '150%'},
),
],
width='auto'),
dbc.Col([
dbc.NavLink(
id='view2-link', children='View 2', href='/view2'),
dbc.Tooltip(
children=
'General view of all individual/identities (Search by channel and/or timestamp)',
target='view2-link',
placement='auto-start',
style={'font-size': '150%'},
),
),
],
width=12,
lg=6,
)
schema_col = dbc.Col(
[
html.H2(
"Schema",
id="schema-h2",
className="mt-3"
),
dbc.Tooltip(
"A schema allows validation of the YAML data "
"against specific requirements.",
target="schema-h2",
placement="left",
),
dbc.Textarea(
id="schema_text",
placeholder="Enter an optional validation schema here...",
value=default_schema,
rows=20,
spellCheck=False,
wrap="off",
),
dcc.Store(
id="schema",
storage_type="memory",
),
html.Div(
id="modal",
size="lg",
),
dbc.Alert([
html.H4("Данные о последнем землетрясении", className="alert-heading"),
html.Hr(),
html.Span(f"Дата и время (GMT +8, Иркутск): {l_date} {l_time}"),
html.Br(),
html.Span("Координаты: "),
html.A(f"{l_lon} {l_lat}",
href=f"https://www.google.com/maps/place/{l_lon},{l_lat}",
target='_blank',
id='map_link'),
html.Br(),
html.Span(f"Магнитуда: {l_m}"),
dbc.Tooltip(
"Открыть на Google Maps", target="map_link", placement='right')
],
color="warning",
dismissable=True),
html.Div([
dcc.Dropdown(id='dropdown',
options=[{
'label': 'Землетрясения за текущий год',
'value': 'current'
}, {
'label': 'Последнее землетрясение',
'value': 'latest'
}, {
'label': 'Исторические данные',
'value': 'history'
}],
def layout(self):
return dbc.Card([
make_hideable(dbc.CardHeader([
html.Div([
html.H3(self.title, id='decisionpath-title-' + self.name),
make_hideable(html.H6(self.subtitle,
className='card-subtitle'),
hide=self.hide_subtitle),
dbc.Tooltip(self.description,
target='decisionpath-title-' + self.name),
]),
]),
hide=self.hide_title),
dbc.CardBody([
dbc.Row([
make_hideable(dbc.Col([
dbc.Label(f"{self.explainer.index_name}:",
id='decisionpath-index-label-' + self.name),
dbc.Tooltip(
f"Select {self.explainer.index_name} to display decision tree for",
target='decisionpath-index-label-' + self.name),
dcc.Dropdown(
id='decisionpath-index-' + self.name,
options=[{
'label':
str(idx),
'value':
idx
} for idx in self.explainer.get_index_list()],
value=self.index)
],
md=4),
hide=self.hide_index),
make_hideable(dbc.Col([
dbc.Label("Show tree:",
id='decisionpath-tree-label-' + self.name),
dbc.Tooltip(
f"Select decision tree to display decision tree for",
target='decisionpath-tree-label-' + self.name),
dbc.Select(
id='decisionpath-highlight-' + self.name,
options=[{
'label': str(tree),
'value': tree
} for tree in range(self.explainer.no_of_trees)],
value=self.highlight)
],
md=2),
hide=self.hide_highlight),
make_hideable(dbc.Col([self.selector.layout()], width=2),
hide=self.hide_selector),
make_hideable(dbc.Col([
dbc.Button("Generate Tree Graph",
color="primary",
id='decisionpath-button-' + self.name),
dbc.Tooltip(
"Generate visualisation of decision tree. "
"Only works if graphviz is properly installed,"
" and may take a while for large trees.",
target='decisionpath-button-' + self.name)
],
md=2,
align="end"),
hide=self.hide_button),
]),
dbc.Row([
dbc.Col([
dcc.Loading(id="loading-decisionpath-" + self.name,
children=html.Img(id="decisionpath-svg-" +
self.name)),
]),
]),
]),
])
def layout(self):
return dbc.Card([
make_hideable(dbc.CardHeader([
html.Div([
html.H3(self.title,
id='decisionpath-table-title-' + self.name),
make_hideable(html.H6(self.subtitle,
className='card-subtitle'),
hide=self.hide_subtitle),
dbc.Tooltip(self.description,
target='decisionpath-table-title-' +
self.name),
]),
]),
hide=self.hide_title),
dbc.CardBody([
dbc.Row([
make_hideable(dbc.Col([
dbc.Label(
f"{self.explainer.index_name}:",
id='decisionpath-table-index-label-' + self.name),
dbc.Tooltip(
f"Select {self.explainer.index_name} to display decision tree for",
target='decisionpath-table-index-label-' +
self.name),
dcc.Dropdown(
id='decisionpath-table-index-' + self.name,
options=[{
'label': str(idx),
'value': idx
} for idx in self.explainer.get_index_list()],
value=self.index)
],
md=4),
hide=self.hide_index),
make_hideable(dbc.Col([
dbc.Label(
"Show tree:",
id='decisionpath-table-tree-label-' + self.name),
dbc.Tooltip(
f"Select decision tree to display decision tree path for",
target='decisionpath-table-tree-label-' +
self.name),
dbc.Select(
id='decisionpath-table-highlight-' + self.name,
options=[{
'label': str(tree),
'value': tree
} for tree in range(self.explainer.no_of_trees)],
value=self.highlight)
],
md=2),
hide=self.hide_highlight),
make_hideable(dbc.Col([self.selector.layout()], md=2),
hide=self.hide_selector)
]),
dbc.Row([
dbc.Col([
html.Div(id="decisionpath-table-" + self.name),
]),
]),
]),
])
# 'maxWidth': '150px',
"textAlign": "center",
},
style_header={
"backgroundColor": "rgb(20, 20, 20)",
"color": "white",
"fontWeight": "bold",
},
),
dbc.Row(
dbc.Button(
id="update", n_clicks=0, className="fas fa-save", size="lg"
),
justify="center",
),
dbc.Tooltip("Enregistrer", target="update", placement="down"),
html.Br(),
dbc.Row(
html.Div(
id="import_success",
className="text-success",
),
justify="center",
),
]
)
],
)
tabs = tab_content
html.Span("Ref Agent:", className="badge badge-secondary"),
html.Span("", className="badge badge-light", id="ref_ag_lbl")
],
className="reminder float-left"),
html.Div([
html.Span("Studied Agent:", className="badge badge-secondary"),
html.Span("", className="badge badge-light", id="study_ag_lbl")
],
className="reminder float-left"),
html.Div([
html.Div([
dbc.Button(id="enlarge_left",
children="-5",
color="dark",
className="float-left mr-1"),
dbc.Tooltip(
'Enlarge left', target='enlarge_left', placement='bottom'),
]),
dcc.Dropdown(
id="user_timestamps", className="", style={"width": "200px"}),
html.Div([
dbc.Button(id="enlarge_right",
children="+5",
color="dark",
className="float-left ml-1"),
dbc.Tooltip('Enlarge right',
target='enlarge_right',
placement='bottom')
])
],
id="user_timestamp_div",
className="col-xl-1"),
block=True),
dbc.Collapse(
[
dbc.FormGroup([
dbc.Checklist(
options=[{
"label": "Semi-log Plot",
"value": False
}],
value=False, #HACK: notice that this is a boolean
id="log-scale-toggle",
switch=True,
),
dbc.Tooltip(
"Plot y-axis using a logarithmic scale (Default: False)",
target="log-scale-toggle",
placement='right',
offset=0,
),
]),
dbc.FormGroup([
dbc.Checklist(
options=[{
"label": "Plot Actual Deaths and Cases",
"value": True
}],
value=[True], #HACK: Notice that this is a list
id="actual-values-toggle",
switch=True,
),
dbc.Tooltip(
"For metrics with actual historical data (e.g.deaths/confirmed cases), plot actual values as bars and projected values as lines (Default: True)",
dbc.CardFooter(
[
html.P(
[
"hoeveelheid aan ",
html.Span(
"communicatie",
id="kpi1",
style={"textDecoration": "underline", "cursor": "pointer"},
),
" in het netwerk.",
]
),
dbc.Tooltip(
"Wordt ook wel uitgedrukt in pakketjes. ",
target="kpi1",
hide_arrow=True,
placement='right',
),
]
),
],
outline=True,
#color='info',
),
dbc.Card(
[
dbc.CardBody(
[
dcc.Graph(figure =
create_KPI_2()
)
dbc.Button("Upload CSV | Connect DB",
id="open-centered",
color="success",
outline=True,
style=pill_button),
dbc.Modal(
[
dbc.ModalBody([
html.Div([
dbc.Button(
children=[
html.Span("Upload A File [CSV or XLSX]",
id="tooltip-target"),
dbc.Tooltip(
"Click to upload the table/file containing Objective data",
target="tooltip-target",
offset=1000,
placement='auto')
],
id="collapse-button1",
className="mb-3",
color="primary",
style={'width': "100%"},
),
dbc.Collapse(
dbc.Card(
dbc.CardBody(
dcc.Upload(
id='upload-data',
children=html.Div([
'Drag and Drop',
def make_tooltip(token, idx):
return dbc.Tooltip(
f"Tag: {token.PoS}, Raw: {token.raw}",
target=f"tooltip-target-tag-{idx}",
placement="top"
)
),
dbc.Row([
html.
A('Click here for the associated article',
href=
'https://towardsdatascience.com/an-interactive-visualization-of-the-covid-19-development-in-germany-2b87e50a5b3e',
target="_blank")
]),
dbc.Row([
# Select City
dbc.Label("Bundesland",
html_for="select-bundesland",
id='select-bundesland-label',
width=2),
dbc.Tooltip(
"Select the county to zoom in",
target="select-bundesland-label",
),
dbc.Col([
dcc.Dropdown(id='select-bundesland',
options=BUNDESLAENDER,
value='All'),
],
width=10)
]),
dbc.Row([
dbc.Col([
dcc.Graph(id='infected-graph', figure=fig),
], md=12)
]),
html.
A('Data taken from the RKI page',
'font-size': '10px'
}),
href="/eda")
],
dark=True,
style={
'width': '100%',
'height': '7rem',
'verticalAlign': 'middle'
})
# Breakline
breakline = html.Br()
upload_dataset_tooltip = html.Div([
dbc.Tooltip("Upload a csv file as the dataset", target="upload-data"),
], )
# Component to take dataset input
upload_dataset = dcc.Upload(
id='upload-data',
children=html.Div(
[
upload_dataset_tooltip, breakline, breakline, breakline, breakline,
breakline, breakline, breakline, breakline,
html.A('Drag and Drop a csv file or ',
style={
'font-size': '20px',
'vertical-align': 'middle',
'align': 'center'
}),
def plot(df, hue, y, should_group_by_author, should_group_by_year, is_normalized, filename):
global colors
if not y:
y = 'msg'
metric = f' {metrics_dict[y].lower()}' if not is_normalized else f"% de l{'a' if 'words' == y or 'media' == y else 'o'}s {metrics_dict[y].lower()}"
rounding = '.2f' if is_normalized else '.2s'
hovertemplate = f'%{{y:{rounding}}}{metric}<extra></extra>'
if should_group_by_author:
x = 'author'
if should_group_by_year:
hue = f'year_{hue}' if hue else 'year'
plotting_df = get_df_for_plotting(df=df, x=x, y=y, hue=hue)
else:
x = hue if hue else 'year'
if should_group_by_year:
hue = 'year'
else:
hue = None
plotting_df = get_df_for_plotting(df=df, x=x, y=y, hue=hue)
data = [go.Bar(
x=plotting_df.index,
y=plotting_df[c].values,
text=c,
textposition='auto',
hovertemplate=hovertemplate,
name=c,
marker_color=colors[index % len(colors)] if should_group_by_author else '#4481e3'
)
for index, c in enumerate(plotting_df.columns)]
layout = dict(
height=700 if not should_group_by_author else 700 + (33 * (len(set(plotting_df.columns)) // 10)),
showlegend=x == 'author',
hovermode='closest',
title=dict(
text=(' '.join(filename.split()[:3] + ['<br>'] + filename.split()[3:])
if len(filename.split()) > 3
else filename)[:-4],
x=0.5,
xanchor='center',
font=dict(
size=30,
family='Rockwell, monospace',
color='black',
)
),
xaxis=dict(
type='category',
rangeslider=dict(
visible=False
)
),
yaxis=dict(
color='#7f7f7f',
gridcolor='#eaeaea'
),
paper_bgcolor='white',
plot_bgcolor='white',
legend=dict(
x=0.5,
y=-0.15,
orientation='h',
xanchor='center',
font=dict(
size=15
)
),
hoverlabel=dict(
bgcolor='white',
font=dict(
size=16,
family='Rockwell'
)
),
barnorm='percent' if is_normalized else None
)
figure = go.Figure(data=data, layout=layout)
return html.Div(
className='mx-3',
children=[
dcc.Graph(
id='whatsapp-info',
figure=figure
),
html.Div(
children=[
'Podés filtrar por autor/a! ',
dbc.Tooltip(
children='Haciendo click en cada uno de los nombres podés agregarlos o quitarlos. Haciendo doble click en uno, podés quedarte únicamente con ese.',
target='author_filter_instructions',
),
html.Sup(id='author_filter_instructions', children='(?)')] if should_group_by_author else '',
className='text-center mx-auto',
style={'fontSize': 25}
),
html.Br(),
html.Br(),
html.Br(),
]
)
def title_nav_layout(current_page):
default_icon_color = 'rgb(220, 220, 220)'
selected = 'rgb(100, 217, 236)'
pages = [
'/', '/pages/home', '/pages/insights', '/pages/performance',
'/pages/importer', '/pages/power', '/pages/settings',
'/pages/achievements', '/pages/lifting'
]
page_colors = {}
for page in pages:
page_colors[page] = default_icon_color
page_colors[current_page] = selected
home_color = selected if page_colors[
'/pages/home'] == selected or page_colors[
'/'] == selected else default_icon_color
# Generate notifications and pass length to badge if greater than 0
notifications = get_notifications()
notification_style = {
'display': 'none'
} if len(notifications) == 0 else {
'color': orange,
'fontSize': '3rem',
'paddingLeft': '1%',
'paddingRight': '0',
'border': 0
}
return (
html.Div(
className='twelve columns',
style={'backgroundColor': "rgb(48, 48, 48)"},
children=[
dcc.Link(html.A('Fit.ly',
style={
'textAlign': 'center',
'fontSize': '6rem',
'textDecoration': 'none',
'color': default_icon_color
}),
style={'textDecoration': 'none'},
href='/'),
dcc.Link(html.I(id='home-button',
n_clicks=0,
className='fa fa-home',
style={
'color': home_color,
'fontSize': '3rem',
'paddingLeft': '1%'
}),
href='/pages/home'),
dbc.Tooltip('Home', target="home-button", className='tooltip'),
dcc.Link(html.I(id='performance-button',
n_clicks=0,
className='icon fa fa-seedling',
style={
'color': page_colors['/pages/performance'],
'fontSize': '3rem',
'paddingLeft': '1%'
}),
href='/pages/performance'),
dbc.Tooltip('Performance Management',
target="performance-button",
className='tooltip'),
dcc.Link(html.I(id='power-button',
n_clicks=0,
className='fa fa-bolt',
style={
'color': page_colors['/pages/power'],
'fontSize': '3rem',
'paddingLeft': '1%'
}),
href='/pages/power'),
dbc.Tooltip('Power Analysis',
target="power-button",
className='tooltip'),
dcc.Link(html.I(id='lifting-button',
n_clicks=0,
className='fa fa-weight-hanging',
style={
'color': page_colors['/pages/lifting'],
'fontSize': '3rem',
'paddingLeft': '1%'
}),
href='/pages/lifting'),
dbc.Tooltip('Weight Training',
target="lifting-button",
className='tooltip'),
dcc.Link(html.I(id='settings-button',
n_clicks=0,
className='fa fa-sliders-h',
style={
'color': page_colors['/pages/settings'],
'fontSize': '3rem',
'paddingLeft': '1%'
}),
href='/pages/settings'),
dbc.Tooltip('Settings',
target="settings-button",
className='tooltip'),
## Alerts
html.Button(id='notification-button',
n_clicks=0,
className='fa fa-bell',
style=notification_style,
children=[
dbc.Badge(id='notification-badge',
color="light",
className="ml-1",
style={
'fontSize': '1.5rem',
'verticalAlign': 'top'
},
children=[len(notifications)]),
]),
dbc.Tooltip('Notifications',
target="notification-button",
className='tooltip'),
]),
html.Div(
className='twelve columns',
style={'backgroundColor': "rgb(48, 48, 48)"},
children=[
# dcc.Loading(id='loading-last-refreshed-label',
# style={'backgroundColor': "rgb(48, 48, 48)"}, children=[
html.Div(id='last-refreshed-label',
style={'backgroundColor': "rgb(48, 48, 48)"},
children=[
'Last Refreshed: {}'.format(
datetime.strftime(
utc_to_local(latest_refresh()),
"%b %d, %Y %I:%M%p"))
])
# ]),
]),
dbc.Modal(id="notifications",
centered=True,
autoFocus=True,
fade=False,
backdrop=True,
size='sm',
children=[
dbc.ModalHeader("Notifications"),
dbc.ModalBody(get_notifications()),
dbc.ModalFooter(
dbc.Button("Close",
id="close-notification-button",
className="ml-auto")),
]))
def make_data_modal(df=None, filter_data=None, suff=""):
"""
Return modal with dash.datatable of current selection
"""
log("Make_data_modal")
max_records = 100000 # Only allow downloads up to limit
max_rows = 10000 # Only show first N rows in data_table
if df is None:
df = pd.DataFrame()
outfields = []
else:
outfields = [
'Departure', 'Return', 'Departure station', 'Return station',
'Membership Type', 'Covered distance (m)', 'Duration (sec.)'
]
if type(filter_data) != dict:
try:
filter_data = json.loads(filter_data)
except:
filter_data = None
if len(df) > max_records:
tooltip = dbc.Tooltip(
"Your selection is too large to download. Try a smaller date range.",
target=f"download-data-button{suff}")
else:
tooltip = dbc.Tooltip("Download the records for the selected trips",
target=f"download-data-button{suff}")
if len(df) > max_rows:
warning_txt = "Your selection produced too many results and may be truncated"
else:
warning_txt = ""
button = html.A(id=f"download-data-button{suff}",
className="btn btn-primary",
href="#",
children=[
html.Span(className="fa fa-download"),
" Download CSV",
])
if filter_data is not None:
direction = filter_data['direction']
stations = "All" if filter_data['stations'] is None else ", ".join(
filter_data['stations'])
if stations != "All":
if direction == 'start':
stations = f"Trips starting at {stations}"
elif direction == 'end':
stations = f"Trips ending at {stations}"
elif direction == 'both':
stations = f"Trips starting or ending at {stations}"
if (filter_data['cats'] is None) or (len(set(filter_data['cats'])) >=
len(set(memtypes))):
cats = "All"
else:
cats = ", ".join(filter_data['cats'])
date = ' ' if filter_data['date'] is None else filter_data['date']
if len(date) == 2:
date = f"{date[0]} to {date[1]}"
row1 = html.Tr([html.Th("Dates"), html.Td(date)])
row2 = html.Tr([html.Th("Membership Types"), html.Td(cats)])
row3 = html.Tr([html.Th("Stations"), html.Td(stations)])
table_body = [html.Tbody([row1, row2, row3])]
table = dbc.Table(table_body, bordered=True, size='sm')
else:
table = dbc.Table()
modal = dbc.Modal(
[
dbc.ModalHeader("Raw Data"),
dbc.ModalBody(children=[
html.Span(warning_txt), table,
dash_table.DataTable(
id=f'data-table{suff}',
columns=[{
"name": i,
"id": i
} for i in outfields],
data=df.head(max_rows)[outfields].to_dict('records'),
style_table={
'overflowX': 'scroll',
'maxHeight': '300px'
},
)
]),
tooltip,
dbc.ModalFooter(button),
],
id=f"data-modal{suff}",
size="xl",
)
log("make_data_modal finished")
return modal
),
html.Br(),
html.Br(),
dbc.Row(
[
dbc.Col(
[
html.Center(
[
html.H2("Yield per Variety"),
],
id="tooltip-ypv"
),
dbc.Tooltip(
"The following graph allows you to observe the total yield for the selected year(s), for each variety.",
target="tooltip-ypv",
),
html.Iframe(
sandbox='allow-scripts',
id='plot1',
height='500',
width='500',
style={'border-width': '0'},
),
],
md=6,
),
dbc.Col(
[
html.Center(
[
def make_date_modal(suff=""):
fdata = filter_data if suff == "" else filter_data2
output = dbc.Modal(
size='md',
id=f'date-modal{suff}',
children=[
#dbc.ModalHeader("Explore trip data"),
dbc.ModalBody([
html.Div(id=f"filter-meta-div{suff}",
children=fdata,
className='d-none'),
dbc.Row(
className='pb-2',
children=[
dbc.Col(width=12,
className='m-2 px-2 pt-2',
children=html.H3("Select a date range")),
dbc.Col(
width=12,
className='m-2 p-2',
children=[
dcc.DatePickerRange(
id=f'datepicker{suff}',
min_date_allowed=startdate,
max_date_allowed=enddate,
#initial_visible_month = '2018-01-01',
display_format='YYYY-MM-DD',
start_date=startdate_iso,
end_date=enddate_iso,
#end_date_placeholder_text="(Optional)",
minimum_nights=0,
clearable=True,
),
]),
dbc.Col(width=10,
className='m-2 px-2 pt-2 border-top',
children=html.H3("Filter by membership type")),
dbc.Col(width=6,
children=[
dbc.Checklist(
id=f'checklist-member-header{suff}',
options=[{
'label': 'Member',
'value': 'Member'
}],
value=['Member']),
dbc.Checklist(
id=f'checklist-member{suff}',
className="checklist-faded-custom",
options=[{
'label': memtype,
'value': memtype
} for memtype in memtypes_member],
value=memtypes_member,
labelStyle={'color': c_gray_600},
),
]),
dbc.Col(width=6,
className='border-left',
children=[
dbc.Checklist(
id=f'checklist-casual-header{suff}',
options=[{
'label': 'Casual',
'value': 'Casual'
}],
value=['Casual']),
dbc.Checklist(
id=f'checklist-casual{suff}',
className="checklist-faded-custom",
options=[{
'label': memtype,
'value': memtype
} for memtype in memtypes_casual],
value=memtypes_casual,
labelStyle={'color': c_gray_600},
),
]),
]),
dbc.Tooltip(
"Pick a date or select a range of days to see details.",
target=f"go-button{suff}"),
dbc.Button("Go ",
id=f'go-button{suff}',
color="primary",
disabled=True,
outline=False,
block=True),
])
])
return output
html.P(
"With various merged data types e.g. CSV, XLSX, JSON, from multiple trustable sources such as US Census, US government, simplemaps.com, etc."
),
html.P(dbc.Button("", color="primary"), className="lead"),
], width={"size": 5, "order": 2}, lg=5, md=5, xs=12),
dbc.Col([
html.Div(
html.Img(src="/assets/virus.jpg",
style={'height': '',
'width': '100%', }, id="the_id")),
dbc.Tooltip(
"The state is still clearing a backlog of coronavirus cases. DSHS added 550 backlogged cases to Wednesday's state total on August 19, 2020."
"",
target="the_id",
),
], width={"size": 7, "order": 1}, lg=7, md=7, xs=12,)
]
)]
),
html.Hr(),
dbc.Row(
[dbc.Col([
html.Div([
dcc.Graph(id='map',
figure=fig
className="twelve columns app-background",
),
html.Div(
[
slicer1.graph,
slicer1.slider,
html.H6(
[
html.Span(
"1 - Slide to find the occlusion and draw a path around its contour ❓",
id="tooltip-target-1",
),
]
),
dbc.Tooltip(
"Draw a rough path which encloses the occlusion at all heights",
target="tooltip-target-1",
),
*slicer1.stores,
],
className="app-background",
),
html.Div(
[
slicer2.graph,
slicer2.slider,
html.H6(
[
html.Span(
"2 - Draw a rectangle to determine the min and max height of the occlusion ❓",
id="tooltip-target-2",
),
className="config-label"),
html.Td(
html.Div([
daq.DarkThemeProvider(
daq.BooleanSwitch(
on=True,
color='#00cc96',
id='gpu-toggle',
)),
dbc.Tooltip(
"Caution: Using CPU compute for more than 50 million points is not recommended.",
target='gpu-toggle',
placement='bottom',
hide_arrow=True,
style={
"textAlign": "left",
"font-size": '15px',
"color": "white",
"width": '350px',
"padding": '15px',
"border-radius": '5px',
"background-color": "#2a2a2e"
})
])),
html.Td(html.Div("Color by"),
className="config-label"),
html.Td(dcc.Dropdown(
id='colorscale-dropdown',
options=[
{
'label':
'Total Count by Viridis Color Scale',