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)