def generate_side_bar(wikis, networks, pre_selected_wikis = [], pre_selected_network = None):
return html.Div(id='side-bar',
children=[
fold_button(),
html.Div(id='side-bar-content',
children = [
generate_tabs(wikis, networks, pre_selected_wikis, pre_selected_network),
compare_button(),
]
),
gdc.Import(src='js/side_bar.js')
]
);
def generate_side_bar(wikis, metrics, pre_selected_wikis = [], pre_selected_metrics = []):
return html.Div(id='side-bar',
children=[
fold_button(),
html.Div(id='side-bar-content',
children = [
generate_tabs(wikis, metrics, pre_selected_wikis, pre_selected_metrics),
compare_button(),
]
),
gdc.Import(src='/js/common/dash/side_bar.js')
]
);
def share_modal(share_link, download_link):
return html.Div([
sd_material_ui.Dialog(
html.Div(children=[
html.H3('Share WikiChron with others or save your work!'),
html.P([
html.Strong('Link with your current selection:'),
html.Div(className='share-modal-link-and-button-cn', children=[
dcc.Input(value=share_link, id='share-link-input', readOnly=True, className='share-modal-input-cn', type='url'),
html.Div(className='tooltip', children=[
html.Button('Copy!', id='share-link', className='share-modal-button-cn'),
])
]),
]),
html.P([
html.Strong('Link to download the data of your current selection:'),
html.Div(className='share-modal-link-and-button-cn', children=[
dcc.Input(value=download_link, id='share-download-input', readOnly=True, className='share-modal-input-cn', type='url'),
html.Div(className='tooltip', children=[
html.Button('Copy!', id='share-download', className='share-modal-button-cn'),
])
]),
html.Div([
html.Span('You can find more info about working with the data downloaded in '),
html.A('this page of our wiki.', href='https://github.com/Grasia/WikiChron/wiki/Downloading-and-working-with-the-data')
],
className='share-modal-paragraph-info-cn'
)
]),
gdc.Import(src='/js/common/dash/main.share_modal.js')
],
id='share-dialog-inner-div'
),
id='share-dialog',
modal=False,
open=False
)
])
def build(self):
self.html_sidebar = html.Div(id='controls-sidebar-wrapper',
children=[
html.Div(id='controls-side-bar',
className='side-bar-cn',
children=[
self.fold_button(),
html.Div(id='controls-side-bar-content',
children=[
self.stats_section,
self.metrics_section,
self.options_section
]),
gdc.Import(src='js/controls_side_bar.js')
])
],
style={
'display': 'flex',
'flexDirection': 'row-reverse'
}
);
return self.html_sidebar
def inflate_share_dialog(share_link):
return html.Div(children=[
html.H4('Share WikiChron with others!'),
html.P([
html.Strong('Link with your current selection:'),
html.Div(className='share-modal-link-and-button-cn',
children=[
dcc.Input(value=share_link,
id='share-link-input',
readOnly=True,
className='share-modal-input-cn',
type='url'),
html.Div(className='tooltip',
children=[
html.Button(
'Copy!',
id='share-link',
className='share-modal-button-cn'),
])
]),
]),
gdc.Import(src='/js/main.share_modal.js')
],
className='dialog-content')
def set_external_imports():
if not to_import_js:
return [gdc.Import()]
else:
return [gdc.Import(src=src) for src in to_import_js]
def generate_main_content(wikis_arg, metrics_arg, relative_time_arg,
query_string):
"""
It generates the main content
Parameters:
-wikis_arg: wikis to use
-metrics_arg: metrics to apply to those wikis
-relative_time_arg: Use relative or absolute time axis?
-query_string: query string of the current selection
Return: An HTML object with the main content
"""
# Load app config
server_config = current_app.config
mode_config = get_mode_config(current_app)
# Contructs the assets_url_path for image sources:
assets_url_path = os.path.join(mode_config['DASH_STATIC_PATHNAME'], 'assets')
def main_header():
"""
Generates the main header
Return: An HTML object with the header content
"""
href_download_button = f'{mode_config["DASH_DOWNLOAD_PATHNAME"]}{query_string}'
return (html.Div(id='header',
className='main-root-header',
children = [
html.Div(
id='header-container',
children=[
html.Div(
html.Img(src='{}/logo_monowiki_white.svg'.format(assets_url_path),
id='title-img'),
),
html.Hr(),
html.Div(
style={'display': 'flex', 'align-items': 'center', \
'justify-content': 'space-between'},
children=[
html.Div([
html.Strong(
html.A('< Go back to selection', href=selection_url)
)
]),
html.Div([
html.A(
html.Img(src='{}/share.svg'.format(assets_url_path)),
id='share-button',
className='icon',
title='Share current selection'
),
html.A(
html.Img(src='{}/cloud_download.svg'.format(assets_url_path)),
href=href_download_button,
id='download-button',
target='_blank',
className='icon',
title='Download data'
),
html.A(
html.Img(src='{}/documentation.svg'.format(assets_url_path)),
href='https://github.com/Grasia/WikiChron/wiki/',
target='_blank',
className='icon',
title='Documentation'
),
html.A(
html.Img(src='{}/ico-github.svg'.format(assets_url_path)),
href='https://github.com/Grasia/WikiChron',
target='_blank',
className='icon',
title='Github repo'
),
],
id='icons-bar')
]
)
]
)
]
)
);
def share_modal(share_link, download_link):
return html.Div([
sd_material_ui.Dialog(
html.Div(children=[
html.H3('Share WikiChron with others or save your work!'),
html.P([
html.Strong('Link with your current selection:'),
html.Div(className='share-modal-link-and-button-cn', children=[
dcc.Input(value=share_link, id='share-link-input', readOnly=True, className='share-modal-input-cn', type='url'),
html.Div(className='tooltip', children=[
html.Button('Copy!', id='share-link', className='share-modal-button-cn'),
])
]),
]),
html.P([
html.Strong('Link to download the data of your current selection:'),
html.Div(className='share-modal-link-and-button-cn', children=[
dcc.Input(value=download_link, id='share-download-input', readOnly=True, className='share-modal-input-cn', type='url'),
html.Div(className='tooltip', children=[
html.Button('Copy!', id='share-download', className='share-modal-button-cn'),
])
]),
html.Div([
html.Span('You can find more info about working with the data downloaded in '),
html.A('this page of our wiki.', href='https://github.com/Grasia/WikiChron/wiki/Downloading-and-working-with-the-data')
],
className='share-modal-paragraph-info-cn'
)
]),
gdc.Import(src='/js/common/dash/main.share_modal.js')
],
id='share-dialog-inner-div'
),
id='share-dialog',
modal=False,
open=False
)
])
def select_wikis_and_metrics_control(wikis_dropdown_options, metrics_dropdown_options):
return html.Div(
id='wikis-and-metrics-control',
className='selector',
children=[
html.Div(id='first-row',
className='row',
children=[
html.Span(
'You are comparing:',
className='two columns comparing-label'
),
html.Div(id='wikis-selection-div',
children=[
html.Strong('Wikis:',
className='one column dropdown-label',
),
dcc.Dropdown(
id='wikis-selection-dropdown',
className='four columns wikis-selection-dropdown-cls',
options=wikis_dropdown_options,
multi=True,
searchable=False,
value=[ option['value'] for option in wikis_dropdown_options ]
),
]
),
html.Div(id='metrics-selection-div',
children=[
html.Strong('Metrics:',
className='one column dropdown-label',
),
dcc.Dropdown(
id='metrics-selection-dropdown',
className='four columns',
options=metrics_dropdown_options,
multi=True,
searchable=False,
value=[ option['value'] for option in metrics_dropdown_options ]
),
]
)
],
)
]
);
def select_time_axis_control(init_relative_time):
return (html.Div(
id='time-axis-selection-div',
className='selector row',
children=[
html.Span(
'Time axis:',
className='two columns'
),
dcc.RadioItems(
options=[
{'label': 'Months from birth', 'value': 'relative'},
{'label': 'Calendar dates', 'value': 'absolute'}
],
value=init_relative_time,
id='time-axis-selection',
labelClassName='time-axis-label',
inputClassName='time-axis-input',
style={'display': 'inline-flex'}
),
],
style={'margin-top' : '15px'}
)
);
def date_slider_control():
return (html.Div(id='date-slider-div',
className='row selector',
children=[
html.Span('Time interval (months):',
className='two columns'
),
html.Div(id='date-slider-container',
className='nine columns',
style={'height': '35px', 'margin-left': 0},
children=[
dcc.RangeSlider(
id='dates-slider',
)],
),
html.Div(className='one column')
],
)
);
wikis = wikis_arg;
metrics = metrics_arg;
relative_time = relative_time_arg;
if debug:
print ('Generating main...')
wikis_dropdown_options = []
for index, wiki in enumerate(wikis):
wikis_dropdown_options.append({'label': wiki['name'], 'value': index})
metrics_dropdown_options = []
for index, metric in enumerate(metrics):
metrics_dropdown_options.append({'label': metric.text, 'value': index})
metrics_code = [metric.code for metric in metrics]
args_selection = json.dumps({"wikis": wikis, "metrics": metrics_code, "relative_time": relative_time})
share_url_path = f'{server_config["PREFERRED_URL_SCHEME"]}://{server_config["APP_HOSTNAME"]}{mode_config["DASH_BASE_PATHNAME"]}{query_string}'
download_url_path = f'{server_config["PREFERRED_URL_SCHEME"]}://{server_config["APP_HOSTNAME"]}{mode_config["DASH_DOWNLOAD_PATHNAME"]}{query_string}'
selection_url = f'{mode_config["HOME_MODE_PATHNAME"]}selection/{query_string}'
return html.Div(id='main',
className='control-text',
children=[
main_header(),
html.Div(id='selection-div',
className='container',
children=[
select_wikis_and_metrics_control(wikis_dropdown_options, metrics_dropdown_options),
select_time_axis_control('relative' if relative_time else 'absolute'),
date_slider_control(),
]
),
html.Div(id='graphs'),
share_modal(share_url_path, download_url_path),
html.Div(id='initial-selection', style={'display': 'none'}, children=args_selection),
html.Div(id='signal-data', style={'display': 'none'}),
html.Div(id='time-axis', className='time-index', style={'display': 'none'}),
html.Div(id='ready', style={'display': 'none'}),
gdc.Import(src='/js/common/dash/sliderHandlerLabels.js')
]
);
def set_external_imports():
return [gdc.Import(src=src) for src in to_import_js]
[
dbc.CardBody([
dbc.CardTitle("This card has a title"),
dbc.CardText("and some text, but no header"),
])
],
outline=True,
color="primary",
className="card",
),
],
className='card'),
],
className='ten columns offset-by-one'),
html.Link(href='/assets/stylesheet.css', rel='stylesheet'),
gdc.Import(src="https://code.jquery.com/jquery-3.3.1.min.js"),
gdc.Import(src="assets\z.js"),
html.Div([
dash_dangerously_set_inner_html.DangerouslySetInnerHTML('''
<!-- some content to allow scrolling :)-->
<div class="hero">
<div class="overlay"></div>
</div>
<div class="main-content">
<section>
<div class="container">
<h2>Your journey starts here.</h2>
def generate_main_content(wikis_arg, network_type_arg, query_string):
"""
It generates the main content
Parameters:
-wikis_arg: wikis to show, only used the first wiki
-network_type_arg: type of network to generate
-query_string: string for the download button
Return: An HTML object with the main content
"""
# Load app config
mode_config = get_mode_config(current_app)
# Contructs the assets_url_path for image sources:
assets_url_path = os.path.join(mode_config['DASH_STATIC_PATHNAME'],
'assets')
if debug:
print('Generating main...')
network_type_code = network_type_arg['code']
args_selection = json.dumps({
"wikis": wikis_arg,
"network": network_type_code
})
selected_wiki = wikis_arg[0]
selected_wiki_name = selected_wiki['name']
selected_network_name = network_type_arg['name']
selection_url = f'{mode_config["HOME_MODE_PATHNAME"]}selection{query_string}'
(time_index_beginning, time_index_end
) = data_controller.calculate_indices_all_months(selected_wiki)
time_index_beginning = json.dumps(time_index_beginning.date.tolist(),
default=str)
time_index_end = json.dumps(time_index_end.date.tolist(), default=str)
main = html.Div(
id='main',
className='control-text',
children=[
build_slider_pane(selected_wiki_name, selected_network_name,
assets_url_path),
build_dilog(),
html.Div(id='initial-selection',
style={'display': 'none'},
children=args_selection),
build_network_controls(network_type_code),
html.Div([
html.Div(
[build_legend(network_type_code),
cytoscape_component()]),
build_distribution_pane()
],
className='left-body'),
# Signal data
html.Div(id='network-ready', style={'display': 'none'}),
html.Div(id='old-state-node', style={'display': 'none'}),
html.Div(id='highlight-node', style={'display': 'none'}),
html.Div(id='dates-index',
children=time_index_beginning,
style={'display': 'none'}),
html.Div(id='dates-index-end',
children=time_index_end,
style={'display': 'none'})
])
header = main_header(selection_url, query_string, mode_config,
assets_url_path)
body = html.Div(children=[main, build_sidebar(network_type_code)],
className='body')
foot = build_foot(assets_url_path)
labels_script = gdc.Import(src='/js/sliderHandlerLabels.js')
filter_script = gdc.Import(src='/js/filterInfo.js')
return html.Div(
children=[header, body, foot, labels_script, filter_script])
)
normalized = dcc.Checklist(
id = 'NormalizedDistance',
options=[
{'label': 'Normalized', 'value': 'yes'}
],
values=[]
)
dashboard = html.Div([location, aircraftSelector, normalized, ranges],className='dashboard')
########################################
########################################
javaScripts = [gdc.Import(src='./assets/hoverCursor.js')]
bodyDivs += [header, statsBar, dashboard,
dcc.Store(id='xCfgAirlines', data={}, storage_type='memory'),
dcc.Store(id='xCfgLocations', data={}, storage_type='memory'),
dcc.Store(id='xCfgAircraft', data={}, storage_type='memory')] + \
javaScripts
app.layout = html.Article(bodyDivs)
from . import CB_memStore
# from . import figCB_airlines
from . import figCB_location
from . import figCB_ranges
slides.append(slide7)
slides.append(slide8)
slides.append(slide9)
slides.append(slide10)
slides.append(slide11)
####################################################
### DASH LAYOUT ###
####################################################
# Set the Dash layout using the slides designed above
app.layout = html.Div([
html.Main(
role='main',
children=[html.Article(slides, id="webslides", className='vertical')]),
gdc.Import(src="/static/renderWebSlides.js")
])
####################################################
### VISUALIZATION CALLBACKS ###
####################################################
################################
## Descentralized Callbacks ##
################################
@app.callback(dash.dependencies.Output('vpm_treemap', 'figure'),
[dash.dependencies.Input('date_slider', 'value')])
def update_vpm_treemap(date):
pos = bisect_left(unix_time_millis(df_val_per_month.index), date)
