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", )