def layout_shift_view():
"""
Entire layout for shift view section
"""
return html.Div(
children=[
# Button to show/hide change view section
html.Button('Shift View',
id='shift_view_collapse_button',
style={
'fontSize': '8',
'background': '#50C878',
'width': '28%'
}),
# Shift view section
dbc.Collapse(shift_view_div(),
id='shift_view_collapse',
style={
'borderRadius': '25px',
'backgroundColor': '#FFFDD0',
'border': '1px solid'
})
],
className='row',
style={'marginBottom': '5%'})
def get_comment_collapse(system):
return html.Div(children=[
button(
'Opmerking toevoegen',
'toggle_comment_' + system,
backgroundcolor=site_colors['indigo'],
),
html.Br(),
dbc.Collapse(dbc.Card([
dbc.Textarea(
id='textarea_comment_' + system,
className='mb-3',
placeholder="Vul je opmerking in",
),
button('Opmerking opslaan',
'commit_comment_' + system,
backgroundcolor=site_colors['indigo'])
],
body=True,
style={
'backgroundColor': site_colors['grey20'],
}),
id='collapse_comment_' + system)
],
style={
"textAlign": "left",
})
def layout_metadata():
"""
Entire layout for metadata section
"""
return html.Div(
children=[
# Button to show/hide metadata section
html.Button('Metadata',
id='metadata_collapse_button',
style={
'fontSize': '8',
'background': '#50C878'
}),
# Metadata section
dbc.Collapse(
children=[
layout_datatable(), # Datatable
layout_metabuttons(), # confirm and add row buttons
],
id='metadata_collapse',
className='row',
style={
'borderRadius': '25px',
'backgroundColor': '#FFFDD0',
'border': '1px solid'
})
],
className='col-sm-6')
def create_collapse(algo, measure, min, disabled):
return dbc.Card([
dbc.CardHeader(
html.H2(
dbc.Button(algo + " Options",
color="link",
id=algo.lower() + "-options",
disabled=disabled))),
dbc.Collapse(dbc.CardBody([
dbc.FormGroup([
dbc.Label("Runnung time in " + measure, width=5),
dbc.Col([
dbc.InputGroup([
dbc.Input(id=algo.lower() + "-timelife",
type="number",
value=min,
placeholder=measure,
min=min,
max=100000),
dbc.InputGroupAddon("at least " + str(min),
addon_type="prepend")
]),
],
width=5),
],
row=True),
]),
id="collapse-" + algo.lower()),
])
def create_navbar():
navbar = dbc.Navbar(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col([
html.Img(src=app.get_asset_url('logo.png'),
height='35px'),
dbc.NavbarBrand([html.P(html.H5('atomm'))],
className='ml-1')
]),
],
align='center',
no_gutters=True,
),
href='#',
),
dbc.Collapse(search_bar, id="navbar-collapse", navbar=True),
html.A(dbc.NavLink('Overview', href="#")),
html.A(dbc.NavLink('Machine Learning', href="#")),
dbc.NavbarToggler(id='navbar-toggler'),
],
color="dark",
dark=True,
className='navbar-dark ml-auto mr-auto shadow')
return navbar
def Navbar(dropdown=False):
"""
This function allows to instantiate the navigation bar at the top of the web-app.
It takes 'dropdown' as an input, a boolean set by default to False, which indicates
whether to include or not in the navigation bar a Dropdown menu. For now, such a
menu is not used but it could be reactivated for other purposes such as the log in.
The returned 'navbar' object is an instantiation of the class dbc.Navbar.
"""
# Dropdown menu
if dropdown is True:
dropdown = dbc.DropdownMenu(
children=[
dbc.DropdownMenuItem("Page d'Accueil", href='home'),
dbc.DropdownMenuItem('Alertes et Infrastructures',
href='alerts'),
dbc.DropdownMenuItem('Niveaux de Risque', href='risks'),
],
label="Tableaux de bord",
className="ml-auto flex-nowrap mt-3 mt-md-0 btn-group dropleft",
color="warning",
direction="left",
)
else:
dropdown = ""
# Navbar Title
user_item = html.H5("Surveillez les départs de feux",
id="user-div",
className="mx-auto order-0",
style={
'color': 'white',
'align': 'center',
'justify': 'center'
})
# Navbar
navbar = dbc.Navbar(
[
html.A(
dbc.Row(
[
dbc.Col(html.Img(src=pyro_logo, width="120px")),
],
align="center",
no_gutters=True,
),
href="#",
),
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(
[user_item, dropdown], id="navbar-collapse", navbar=True),
],
color="black",
dark=True,
)
return navbar
def generate_option_card(option):
"""
Generates card for answer options.
Returns
dbc.Collapse - collapsable html object
"""
src_no = 'https://media.giphy.com/media/1zSz5MVw4zKg0/source.gif'
src_yes = 'https://media.giphy.com/media/Ld0P4AdeSDjoY/source.gif'
return dbc.Collapse(
[
html.Div(
[
html.Img(src=src_yes if option == 'yes' else src_no,
className="cards_image"),
dbc.Button(
option.upper(),
id='{}_button'.format(option),
color='success' if option == 'yes' else 'danger',
block=True,
size='large',
className='button')
],
className="cards_gif",
)
],
className="cards_single",
id='{}_collapse'.format(option),
)
def makeCollapse(i, course, style_val=None):
# course_id = course.id.split(' ')
# collapseList.append(f"{course_id[0]}-{course_id[1]}-collapse-toggle")
collapseList.getList().append(f"{i}")
return dbc.Card(
[
# COURSE CARD TITLE
dbc.CardHeader(
html.H2(
dbc.Button(
f"{course.id}",
color="link",
id=f"group-{i}-toggle",
)
)
),
# CARD CONTENT
dbc.Collapse(
dbc.CardBody([
html.H5(f"{course.name}", className="card-title"),
html.H6(f"{course.credit} Credits", className="card-subtitle", style={'margin-bottom': '10px'}),
html.P(f"{course.desc}", className="card-text"),
dbc.CardFooter(f"{str(course.prereq)}"),
]),
id=f"collapse-{i}",
),
],
style=style_val if style_val is not None else style_val,
id=f"collapse-card-{i}",
)
def _build_content(self) -> html.Div:
form_header = button_header(self._header, id_=self._header_id)
self.form = dbc.Form(self._controls)
collapsable_form = dbc.Collapse(id=self._form_id,
children=[self.form],
is_open=self._start_open)
return html.Div([form_header, collapsable_form])
def card(id: str, *, header: str, childs: list, app=None):
@app.callback(Output(f'collapse-{id}',
'is_open'), [Input(f'toggle-{id}', 'n_clicks')],
[State(f'collapse-{id}', 'is_open')])
def toggleButtonCallback(n_click, is_open):
return not is_open if n_click else is_open
return dbc.Card(id=id,
children=[
dbc.CardHeader(
html.H6(
dbc.Button(header,
color="link",
id=f'toggle-{id}',
className='text-body'))),
dbc.Collapse(id=f'collapse-{id}',
children=childs,
style={
'padding': '15px',
}),
],
className='shadow',
style={
'margin': '10px 0',
})
def layout(self):
layout = html.Div(
id=self.navbar_id,
children=dbc.Navbar([
dbc.Col(
dbc.Row(
[
dbc.Col(
html.H3("Investig8",
style={
"height": "30px",
"margin-left": "-20px",
"color": "#d9e3f2"
})),
],
align="center",
no_gutters=True,
), ),
dbc.Col([
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(
[
html.Div(SearchBar(self.app).layout(), ),
],
id="navbar-collapse",
navbar=True,
)
],
width="auto")
],
color="dark",
style={"color": "#142339"}))
return layout
class HeaderPage():
search_bar = dbc.Row(
[dbc.Col(html.H2("Team 78", className='k2-search-bar'))],
no_gutters=True,
className="ml-auto flex-nowrap mt-3 mt-md-0",
align="center",
)
content = dbc.Navbar(
[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Div(className='logo')),
],
align="center",
no_gutters=True,
)),
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(search_bar, id="navbar-collapse", navbar=True),
],
color="#4b73d4ff",
dark=True,
)
def make_item(button, cardbody, i):
# This function makes the accordion items
return dbc.Card([
dbc.CardHeader(
html.H2(dbc.Button(button, color="link", id=f"group-{i}-toggle"))),
dbc.Collapse(dbc.CardBody(cardbody), id=f"collapse-{i}")
])
def collapse_domain_selection_measures(n):
return html.Div([
dbc.Row([
dbc.Col(html.Div(
[Triple_Aim_set[n]],
className="mr-1",
style={
"font-family": "NotoSans-Condensed",
"font-size": "0.8rem",
"color": "#fff",
"padding-right": "0.4rem",
"padding-left": "0.4rem",
"margin-top": "0.2rem",
"border": "none",
"border-radius": "5rem",
"background-color": Triple_Aim_color[n]
}),
width="auto"),
dbc.Col(html.Div(domain_set[n]),
style={
"font-family": "NotoSans-SemiBold",
"font-size": "1rem"
}),
html.Div(id=u"optimizer-card-selected-domain-{}".format(n + 1),
className="mb-3",
style={
"font-family": "NotoSans-Condensed",
"font-size": "1rem",
"padding-right": "1rem"
}),
dbc.Button(children="Select",
id=u"optimizer-collapse-button-{}".format(n + 1),
color="primary",
className="mr-1",
style={
"margin-right": "20px",
"border": "none",
"border-radius": "10rem",
"font-family": "NotoSans-Regular",
"font-size": "0.6rem",
"height": "1.6rem"
}),
]),
dbc.Collapse(
dbc.Card(
dbc.CardBody([
html.H2("Choose Measures",
className="card-title",
style={
"font-family": "NotoSans-Condensed",
"font-size": "1rem",
"color": "#a1a1a1"
}),
checklist_domain_measures_lv1(n)
])),
id=u"optimizer-collapse-{}".format(n + 1),
),
])
def get_navbar():
PLOTLY_LOGO = "/assets/cepel-logo.png"
#nav_item_home = dbc.NavItem(dbc.NavLink("Home", href="#"))
#nav_item_about = dbc.NavItem(dbc.NavLink("About", href="#"))
nav_item_github = dbc.NavItem([
dbc.NavLink([
html.A(
[
html.Img(src="/assets/GitHub-Mark-Light-64px.png",
className="github-logo"),
html.P("GitHub",
style={
'display': 'inline',
'color': '#EBEBEB'
})
],
href="https://github.com/tolgahancepel/telco-customer-churn")
])
# dbc.NavLink("GitHub", href="https://github.com/tolgahancepel/telco-customer-churn", style={'display':'inline'})
])
logo = dbc.Navbar(
dbc.Container([
html.A(
dbc.Row(
[
dbc.Col(
html.Img(src=PLOTLY_LOGO,
height="30px",
style={'margin': '8px 0px'})),
],
align="center",
no_gutters=True,
),
href="https://plot.ly",
),
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(
dbc.Nav(
[
#nav_item_home,
#nav_item_about,
nav_item_github
],
className="ml-auto",
navbar=True),
id="navbar-collapse",
navbar=True,
),
]),
color="primary",
dark=True,
className="mb-5",
)
return logo
def checklist_domain_measures_lv1(d):
domain_focus = list(Domain_options.keys())
measures_lv1 = Domain_options[domain_focus[d]]
key = list(measures_lv1.keys())
n = len(key)
button_group = []
for i in range(n):
if len(measures_lv1[key[i]]) == 0:
hidden_status = True
else:
hidden_status = False
default = []
for v in measures_lv1[key[i]]:
if v in default_measure:
default.append(v)
button_measure_lv1 = html.Div([dbc.FormGroup(
[
dbc.Row([
dbc.Button(
u"{}".format(key[i]),
id=u"optimizer-measures-lv1-{}-{}".format(d+1,i+1),
color = "light",
style={"background-color":"#ebebeb","border":"none", "border-radius":"10rem", "font-family":"NotoSans-Regular", "font-size":"0.8rem", "height":"2rem"}
),
html.Div(
[
dbc.Badge(id = u"optimizer-card-selected-{}-{}".format(d+1,i+1),
color="primary",
className="ml-1",
#style={"padding":"0.8rem"}
),
],
#style={"margin-top":"0.8rem","margin-bottom":"0.8rem"}
)
]),
dbc.Collapse(
dbc.FormGroup([
dbc.Checklist(
options = [{"label" : k, "value": k, "disabled" : False} if k in undisabled_list else {"label" : k, "value": k, "disabled" : True} for k in measures_lv1[key[i]]],
value=default,
id=u"optimizer-checklist-domain-measures-lv2-{}-{}".format(d+1,i+1),
inline=True,
# persistence = True,
# persistence_type = 'session',
),
html.Hr(className="my-2")
]),
id=u"optimizer-checklist-domain-measures-lv2-container-{}-{}".format(d+1,i+1),
style={"margin-top":"1rem", "font-family":"NotoSans-Regular", "font-size":"0.8rem"}
)
]
)],
hidden = hidden_status,
style={"padding-left":"2rem", "padding-right":"2rem"})
button_group.append(button_measure_lv1)
return html.Div(button_group)
def project_tab(self):
return dbc.Card(
dbc.CardBody(
[
dbc.InputGroup([
dbc.InputGroupAddon(
dbc.DropdownMenu(
label="Project",
bs_size='sm',
addon_type='prepend',
children=[
dbc.DropdownMenuItem("New",
id='project-new'),
dbc.DropdownMenuItem(dcc.Upload(
"Open", id='upload-project'),
id='project-open'),
dbc.DropdownMenuItem("Save",
id='project-save',
disabled=True),
dbc.DropdownMenuItem("Close",
id='project-close',
disabled=True),
])),
dbc.Input(id='project-name',
placeholder='',
disabled=True,
size='sm')
]),
dbc.Collapse(
id='show-project',
children=[
self.upload_form(),
dbc.Collapse(
id='show-project-data',
children=generic_card(
key='current-data',
title='Uploaded data',
markdown=''
# children filled from a callback
))
],
)
],
style={'min-height': '200px'}),
className='control-tab')
def InvalidNewUserCollapse():
return dbc.Collapse(dbc.Card(dbc.CardBody(
"Invalid username or email address! Either your username or the provided email address are "
"already used on ConPlot.",
style={'text-align': "center"}),
color="danger",
outline=True),
id='invalid-create-user-collapse',
is_open=False)
def get_layout():
""" Creates the dash layout """
navbar_right = dbc.Row(
[
dbc.DropdownMenu(
label="Pages",
children=[
dbc.DropdownMenuItem(
x[1:], href=x, id="section_{}".format(x[1:]))
for x in c.dash.LINKS_ALL
],
direction="left",
className="mr-1",
),
dbc.Button("Filters",
id="filters-button",
className="mr-1",
color="danger"),
],
no_gutters=True,
className="ml-auto",
align="center",
)
navbar = dbc.Navbar(
[
dbc.Row(
[
dbc.Col(html.Img(src="assets/logo.png", height="30px")),
dbc.Col(dbc.NavbarBrand("Expensor", className="ml-2")),
],
align="center",
no_gutters=True,
),
navbar_right,
],
sticky="top",
className="w3-light-grey w3-card",
)
filters = dbc.Collapse(dbc.CardDeck(id="filters"),
id="filters-container",
style=padding(2 * DEFAULT_PADDING))
content = [
# Body
html.Div(id="body", style=padding()),
# Others
html.Div(id="sync_count", style={"display": "none"}),
dcc.Location(id="url", refresh=False),
# Hidden div with data
html.Div(df_to_b64(DF), id="global_df", style=c.styles.STYLE_HIDDEN),
]
return html.Div([navbar, filters] + content)
def InvalidFileCollapse(dataset):
return [
dbc.Collapse(InvalidFormatCard(),
id={
'type': "invalid-collapse",
'index': dataset
},
is_open=True),
html.Br()
]
def create_item(id_button, id_collapse, name, body, is_open):
return dbc.Card([
dbc.CardHeader(
html.H2(html.Button(name,
id=id_button,
className='btn btn-link btn-block text-left'),
className='mb-0')),
dbc.Collapse(dbc.CardBody(dcc.Markdown(body)),
id_collapse,
is_open=is_open)
])
def getTopNav(self):
SIDEBAR_STYLE = {
"top": 0,
"left": 0,
"bottom": 0,
"height": "5rem",
"line-height": "2.5rem",
"font-weight": "400",
"font-size": "1.5rem",
"padding": ".5rem 1rem"
}
# the styles for the main content position it to the right of the sidebar and
# add some padding.
CONTENT_STYLE = {
"margin-left": "2rem",
"margin-right": "2rem",
}
PLOTLY_LOGO = "https://images.plot.ly/logo/new-branding/plotly-logomark.png"
navbar = dbc.Navbar(
children=[
html.A(
# Use row and col to control vertical alignment of logo / brand
dbc.Row(
[
dbc.Col(html.Img(src=PLOTLY_LOGO, height="30px")),
dbc.Col(dbc.NavbarBrand("Navbar",
className="ml-2")),
],
align="center",
no_gutters=True,
),
href="https://plot.ly",
),
dbc.NavLink("Active", active=True, href="#"),
dbc.NavLink("A link", href="#"),
dbc.NavLink("Another link", href="#"),
dbc.NavLink("Disabled", disabled=True, href="#"),
# dbc.DropdownMenu(
# [dbc.DropdownMenuItem("Item 1"), dbc.DropdownMenuItem("Item 2")],
# label="Dropdown",
# nav=True,
# ),
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(id="navbar-collapse", navbar=True),
],
style=SIDEBAR_STYLE,
color="dark",
dark=True)
content = html.Div(id="page-content",
children=[self.initVisForModels(self.models)],
style=CONTENT_STYLE)
return html.Div([dcc.Location(id="url"), navbar, content])
def InvalidLoginCollapse(id='invalid-login-collapse'):
return dbc.Collapse(dbc.Card(dbc.CardBody([
html.P("Invalid username or password, please try again."),
html.U(
dbc.NavLink('If you forgot your password, get in touch with us',
href=UrlIndex.CONTACT.value))
],
style={'text-align': "center"}),
color="danger",
outline=True),
id=id,
is_open=False)
def get_side_panel_form():
return html.Div(
children=[
sidebar_graph_component(),
dbc.Collapse(children=[], id="candidate_info_collapse"),
],
id="side-panel-form",
style={
"width": "90%",
"flexGrow": 4,
},
)
def init_dashboard(server):
dash_app = Dash(server=server, url_base_pathname='/dash/',
external_stylesheets=[dbc.themes.BOOTSTRAP])
dash_app.scripts.config.serve_locally = True
search_bar = dbc.Row(
[
html.Ul([
html.Li(html.A(dbc.Row(
dbc.Col(dbc.NavItem('Home', className='ml-2')), no_gutters=True),
href='/home', className='nav-link'), className='nav-item active' ),
html.Li(html.A(dbc.Row(
dbc.Col(dbc.NavItem('Dash', className='ml-2')), no_gutters=True),
href='/dash', className='nav-link'), className='nav-item'),
html.Li(html.A(
dbc.Row(
dbc.Col(dbc.NavItem('Log In', className='ml-2')), no_gutters=True),
href='/login', className='nav-link'), className='nav-item'),
html.Li(html.A(
dbc.Row(
dbc.Col(dbc.NavItem('Log Out', className='ml-2')), no_gutters=True),
href='/logout', className='nav-link'), className='nav-item'),
], className='navbar-nav'),
]
)
dash_app.layout = html.Div([
dbc.Navbar(
[
html.A(
dbc.Row(dbc.Col(dbc.NavbarBrand("App name", className="ml-2")),
no_gutters=True,
),
href="/home",
),
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(search_bar, id="navbar-collapse", navbar=True),
],
color="dark",
dark=True
)
])
init_callbacks(dash_app)
return dash_app.server
def get_header():
logo_img_url = 'http://neomorph.salk.edu/omb_static/dissection_region_img/navbar_icon.gif'
nav = dbc.Row(
[
dbc.Nav([
dbc.NavItem(dbc.NavLink('Home', href=f"/{APP_ROOT_NAME}home")),
dbc.NavItem(
dbc.NavLink('Gene',
href=f"/{APP_ROOT_NAME}gene?gene=Cux2")),
dbc.DropdownMenu([
dbc.DropdownMenuItem('Region Table',
href=f"/{APP_ROOT_NAME}br_table"),
dbc.DropdownMenuItem(
'Region Viewer',
href=f"/{APP_ROOT_NAME}brain_region?br=MOp")
],
label='Brain Region',
nav=True,
in_navbar=True),
dbc.DropdownMenu([
dbc.DropdownMenuItem('Cell Type Table',
href=f'/{APP_ROOT_NAME}ct_table'),
dbc.DropdownMenuItem(
'Cell Type Viewer',
href=f'/{APP_ROOT_NAME}cell_type?ct=Exc')
],
label='Cell Type',
nav=True,
in_navbar=True),
dbc.NavItem(
dbc.NavLink('Paired Scatter',
href=f"/{APP_ROOT_NAME}scatter")),
],
className='mr-5',
navbar=True,
style={'font-size': '1.4em'})
],
className="ml-2 flex-nowrap mt-3 mt-md-0",
align="center",
)
navbar = dbc.Navbar([
html.A(dbc.Row([dbc.Col(html.Img(src=logo_img_url, height='50px'))],
align='left',
no_gutters=True),
href=f"/{APP_ROOT_NAME}",
className='mx-3'),
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(nav, id="navbar-collapse", navbar=True),
],
color='light',
className='fixed-top mb-2 p-2')
return navbar
def Navbar(dropdown=False):
# Not used right now but can be reactivated later for other purposes such as log out
# Dropdown menu
if dropdown is True:
dropdown = dbc.DropdownMenu(
children=[
dbc.DropdownMenuItem("Page d'Accueil", href='home'),
dbc.DropdownMenuItem('Alertes et Infrastructures',
href='alerts'),
dbc.DropdownMenuItem('Niveaux de Risque', href='risks'),
],
label="Tableaux de bord",
className="ml-auto flex-nowrap mt-3 mt-md-0 btn-group dropleft",
color="warning",
direction="left",
)
else:
dropdown = ""
# Navbar Title
user_item = html.H5("Surveillez les départs de feux",
id="user-div",
className="mx-auto order-0",
style={
'color': 'white',
'align': 'center',
'justify': 'center'
})
# Navbar
navbar = dbc.Navbar(
[
html.A(
dbc.Row(
[
dbc.Col(html.Img(src=pyro_logo, width="120px")),
],
align="center",
no_gutters=True,
),
href="#",
),
dbc.NavbarToggler(id="navbar-toggler"),
dbc.Collapse(
[user_item, dropdown], id="navbar-collapse", navbar=True),
],
color="black",
dark=True,
)
return navbar
def create_accordion_card(title, text, id, is_open=True):
"""Given a title (header) and a text (which can be either text, a dcc/html object),
it will return a dbc.Card object which is one input for an accordion.
"""
card_header = dbc.CardHeader(html.H2(
dbc.Button(title, color='link', id=f"group-{id}-toggle",
className='')),
className='accordion-header')
card_body = dbc.Collapse(dbc.CardBody(text),
id=f"collapse-{id}",
is_open=is_open,
className='accordion-collapse')
return dbc.Card([card_header, card_body], className='accordion-card')
def collapsible_item(i):
# we use this function to make the collapsible items to avoid code duplication
return dbc.Card([
dbc.CardHeader(dbc.Button(
f"{i}",
color="link",
id=f"{i}_toggle",
)),
dbc.Collapse(
dbc.CardBody(f"{i} goes here..."),
id=f"collapse_{i}",
),
])
def CollapseBar(active):
Vnav = dbc.Collapse(
dbc.Nav(
[
dbc.NavLink("Graphe jeune"),
],
vertical = True,
),
id = "collapse",
)
