def cards_fn(death_stat_1st,dat3_1st,herd_stat_1st,color_1st_death,color_1st_herd,color_1st_ICU):
return html.Div([
dbc.Row([
dbc.Col([
dbc.Card(
[
dbc.CardHeader(
['Reduction in deaths:']
),
dbc.CardBody([html.H1(str(round(death_stat_1st,1))+'%', className='card-title',style={'fontSize': '150%'})]),
dbc.CardFooter('compared to doing nothing'),
],color=color_1st_death, inverse=True
)
],width=4,style={'textAlign': 'center'}),
dbc.Col([
dbc.Card(
[
dbc.CardHeader(
['ICU requirement:']
),
dbc.CardBody([html.H1(str(round(dat3_1st,1)) + 'x',className='card-title',style={'fontSize': '150%'})],),
dbc.CardFooter('multiple of capacity'),
],color=color_1st_ICU, inverse=True
)
],width=4,style={'textAlign': 'center'}),
dbc.Col([
dbc.Card(
[
dbc.CardHeader(
# html.Span(
['Herd immunity:']
),
dbc.CardBody([html.H1(str(round(herd_stat_1st,1))+'%',className='card-title',style={'fontSize': '150%'})]),
dbc.CardFooter('of safe threshold'),
],color=color_1st_herd, inverse=True
)
],width=4,style={'textAlign': 'center'}),
],
no_gutters=True),
# ],
# width=True)
],style={'marginTop': '20px', 'marginBottom': '20px','fontSize':'75%'})
def downsample_counts_slider():
m = dbc.Card(children=[
dbc.CardHeader("Downsample UMI counts"),
dbc.CardBody(children=[
html.Div(children=[
html.
P("Take only a fraction of UMIs (unique mRNA molecules) for downstream analysis"
)
]),
dcc.Slider(id="downsample_counts_slider",
min=5,
max=100,
step=5,
marks={
10: "10%",
25: "25%",
50: "50%",
75: "75%",
100: "100% (default)"
},
value=100)
]),
dbc.CardFooter(children=[
html.H4([
dbc.Badge("% UMI counts = 100% ()",
id="downsample_counts_output_container")
])
])
])
return m
def get_card(collab):
return \
dbc.Col(
dbc.Card(
[
dbc.CardHeader(html.H4(collab["name"]),style={"textAlign": "center"}),
dbc.CardImg(src='assets/collaborators/photos/%s' % collab['photo'],
top=False,
style={"paddingLeft": "10px",
"paddingRight": "10px",
"paddingBottom": collab["padding"],
"paddingTop": collab["padding"],}),
dbc.CardFooter(
[
html.A(collab["text"],
href=collab["website"],
className="stretched-link collab-name"),
],
className="h-100",
)
],
style={"borderColor": "#800020"},
className="h-100 collab-card"
),
style={"margin": "0 rem"},
)
def card(card_header=None, card_body=None, card_footer=None, style=None):
card_obj = dbc.Card(children=
[dbc.CardHeader([card_header], style={"text-align": "center"}),
dbc.CardBody(card_body),
dbc.CardFooter(card_footer)],
style=style)
return card_obj
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 serve_layout():
uimgs = db.session.query(User_Image).all()
return dbc.Container([
html.H1("View Uploaded Images"),
html.Div(id=f'{APP_ID}_view_div',
children=[
dbc.CardDeck([
dbc.Card([
dbc.CardImg(src=f"data:image/jpg;base64, {b64encode(uimg.thumb).decode('utf-8')}", top=True, style={"width": "18rem"}),
dbc.CardBody([
html.H4(uimg.name),
html.P(uimg.creator),
dbc.Button('Enlarge', id=f'{APP_ID}_card_button_uimg{uimg.id}', color='primary')
]),
dbc.CardFooter(
dbc.CardLink('Web Link', href=f'{uimg.img_web_url}',
external_link=True, target="_blank")
)
],
style={"max-width": "18rem"},
) for uimg in uimgs
],
)
]
),
# todo add modal display
])
def status_layout():
m = dbc.Card(children=[
dbc.CardHeader(cc.status_progress()),
dbc.CardBody(cc.status_history()),
dbc.CardFooter(cc.status_state())
])
return m
def create_vercard(ver, comps, vername, projname):
table_body = []
projlink = ''
if ver is not None and comps is not None:
# verbutton = dbc.Button("Select Version", id="verbutton", className="mr-2", size='sm')
table_rows = [
html.Tr([html.Td("Component Count:"),
html.Td(len(comps.index))]),
html.Tr([html.Td("Phase:"),
html.Td(ver['phase'])]),
html.Tr([html.Td("Distribution:"),
html.Td(ver['distribution'])]),
html.Tr(
[html.Td("License:"),
html.Td(ver['license.licenseDisplay'])]),
html.Tr([html.Td("Owner:"),
html.Td(ver['createdBy'])]),
html.Tr([
html.Td("Create Date:"),
html.Td(
datetime.strptime(
ver['createdAt'],
'%Y-%m-%dT%H:%M:%S.%fZ').strftime("%Y-%m-%d %H:%M"))
]),
html.Tr([
html.Td("Last Update Date:"),
html.Td(
datetime.strptime(
ver['settingUpdatedAt'],
'%Y-%m-%dT%H:%M:%S.%fZ').strftime("%Y-%m-%d %H:%M"))
]),
]
table_body = [html.Tbody(table_rows)]
projlink = ver['_meta.href'] + '/components'
table_header = []
return dbc.Card(
[
dbc.CardHeader("Project: " + projname,
style={'classname': 'card-title'}),
dbc.CardBody([
html.H6("Project Version: " + vername,
style={
'display': 'flex',
'classname': 'card-title'
}),
html.Br(),
dbc.Table(table_header + table_body, bordered=True),
], ),
dbc.CardFooter(dbc.CardLink('Project Version link',
href=projlink)),
# dbc.Table(table_header + table_body, bordered=True),
# projusedbytitle, projstable,
# html.Div(verbutton),
],
id="vercard",
# style={"width": "28rem", "height": "50rem"},
# style={"width": "23rem"},
)
def get_card(collab):
return dbc.Col(
style={"margin-bottom": "32px"},
xs=12,
sm=6,
md=4,
xl=4,
children=dbc.Card(
style={"borderColor": "#800020"},
className="h-100 collab-card",
children=[
dbc.CardHeader(html.H4(collab["name"]),
style={"textAlign": "center"}),
dbc.CardImg(src='assets/collaborators/photos/%s' %
collab['photo'],
top=False,
style={
"paddingLeft": "20px",
"paddingRight": "20px",
"paddingBottom": collab["padding"],
"paddingTop": collab["padding"],
}),
dbc.CardFooter(
className="h-100",
children=[
html.A(collab["text"],
href=collab["website"],
className="stretched-link collab-name"),
],
)
],
),
)
def experiment_card(data):
name = data.pop('name', 'Unknown')
freq = data.pop('freq', [])
return html.Div(
className="col-xl-3 col-md-6 mb-4",
children=[
html.Div(
className="card border-left-info shadow h-100 mb-4",
children=[
html.Div(
className=
"card-header py-3 d-flex flex-row align-items-center justify-content-between",
children=[
html.H6(
children=name.upper(),
className='m-0 font-weight-bold text-primary'),
]),
dbc.CardBody(children=[
html.P(data.pop('description', '')),
dbc.Button(id={'sample-load-button': data.pop('dir')},
children="Load Sample",
color="primary"),
]),
dbc.CardFooter(", ".join(
[f"{k.capitalize()}: {v}" for k, v in data.items()])),
])
])
def create_anomaly_editing_image_card(algorithm_name, options):
return dbc.Card([
dbc.CardHeader([
dbc.Row(html.H2("Change Label or Mark Not Anomaly")),
html.Label([
"Select Row:",
dcc.Dropdown(id=f"df-row-{algorithm_name}",
options=[{
'label': i,
'value': i
} for i in range(PAGE_SIZE)],
value=0,
placeholder='Row'),
]),
]),
dbc.CardBody([
dbc.Row(dcc.Link(href='', id=f"filename-{algorithm_name}")),
dbc.Row(id=f"anomaly-graph-row-{algorithm_name}"),
dbc.Row(
[
dbc.Col(
"Mark not Anomaly or Use the Dropdown to Select the Correct Label:"
),
],
align="center",
),
dbc.Row(
[
dbc.Col(
dbc.Button("Not Anomaly",
id=f"anomaly-btn-cancel-{algorithm_name}",
color="danger",
className="mr-2")),
dbc.Col(class_drop(algorithm_name, options))
],
align="between",
),
]),
dbc.CardFooter([
dbc.Row(
[
dbc.Col(
dbc.Button("Next row",
id=f"anomaly-btn-confirm-{algorithm_name}",
style={
'colour': '#1D3557',
'background-color': '#1D3557',
'border': '0px'
},
className="mr-2",
block=True)),
],
align="center",
)
], ),
])
def render_graph_card(id, title):
return dbc.Card([
dbc.CardHeader(title),
dbc.CardBody([
dcc.Graph(id=id),
]),
dbc.CardFooter(),
],
color="primary",
inverse=True)
def build_figure_container(title, id, footer):
fig_containter = dbc.Card(
[
dbc.CardHeader(html.H4(title)),
dbc.CardBody([dbc.Col(dcc.Graph(id=id))]), # , style={"padding": "0px"}),
dbc.CardFooter(footer),
],
className="m-2 pretty_container",
)
return fig_containter
def build_figure_container(title, id, footer):
fig_containter = dbc.Card(
[
dbc.CardHeader(html.H4(title), style={"background-color": "#fff"}),
dbc.CardBody([dbc.Col(dcc.Graph(id=id))], style={"padding": "0px"
}),
dbc.CardFooter(footer),
],
className="pretty_container",
)
return fig_containter
def render():
img_upload = html.Div([
dbc.Card(
id="imagebox",
children=[
dbc.CardHeader(html.H5('Select Books')),
dbc.CardBody([
dcc.Graph(
id="graph",
figure=fig,
config={
"modeBarButtonsToAdd": ["drawrect", "eraseshape"]
},
)
]),
],
),
# Data section
dbc.Card(
[
dbc.CardHeader(html.H6('Books')),
dbc.CardBody([
dbc.Row(dbc.Col([html.Div(id='annotations-table')]), ),
dbc.Row(dbc.Col([], align="center")),
]),
dbc.CardFooter([
html.Div(
[
# We use this pattern because we want to be able to download the
# annotations by clicking on a button
html.A(
id="download",
download="annotations.json",
# make invisble, we just want it to click on it
style={"display": "none"},
),
dbc.Button(
"OCR Annotations",
id="ocr-button",
outline=True,
),
html.Div(id="dummy", style={"display": "none"}),
# dbc.Tooltip(
# "You can download the annotated data in a .json format by clicking this button",
# target="download-button",
# ),
], )
]),
], )
])
return img_upload
def make_layout():
"""Layout must be a function so that each page load recreates layout.
See: https://community.plotly.com/t/solved-updating-server-side-app-data-on-a-schedule/6612.""" # noqa
data = get_s3_data()
fig, week_to_week_text = make_graph(data)
return dbc.Container(
[
dbc.Row(
dbc.Col(
dbc.Card(
[
dbc.CardHeader(
html.H4(
"MSU Denver COVID Cases", className="card-title"
),
),
dbc.CardBody(
[
dcc.Graph(
figure=fig, config={"displayModeBar": False}
)
]
),
dbc.CardFooter(
[
html.P(week_to_week_text, className="float-left"),
html.P(
[
"Designed by ",
html.A(
"Dr. Andrew J. Bonham",
href="https://github.com/Paradoxdruid",
),
],
className="float-right",
),
],
),
],
className="shadow-lg border-primary mb-3",
style={"min-width": "550px"},
),
width={"size": 6, "offset": 3},
style={"min-width": "600px"},
),
style={"padding-top": "40px"},
),
],
fluid=True,
className="bg-secondary",
style={"min-height": "100vh"},
)
def card_template(i_d, header='Card header', title='Card Title', footer='Stay Home, Stay Safe'):
return \
[
dbc.CardHeader(header),
dbc.CardBody(
[
html.H5(title, className='card-title'),
dcc.Graph(figure=graph_fig(i_d), id=i_d),
]
),
dbc.CardFooter(footer),
]
def build_table_container(title, id, footer):
fig_containter = dbc.Card(
[
dbc.CardHeader(html.H4(title), style={"background-color": "#fff"}),
dbc.CardBody([
dbc.Col(
dash_table.DataTable(id=id,
style_table={"overflowX": "auto"}))
],
style={"padding": "0px"}),
dbc.CardFooter(footer),
],
className="pretty_container",
)
return fig_containter
def build_table_container(title, id, footer):
fig_containter = dbc.Card(
[
dbc.CardHeader(html.H4(title)),
dbc.CardBody(
[
dash_table.DataTable(
id=id, style_table={"overflowX": "auto"}, css=[{"selector": ".row", "rule": "margin: 0"}]
)
] # style={"padding": "0px"}
),
dbc.CardFooter(footer),
],
className="m-2 pretty_container",
)
return fig_containter
def render():
element = dbc.Card([
dbc.CardBody([
html.H4("Software Engineering", className="card-title"),
html.Small("Recommended", id="se-recommended",
className="card-subtitle"),
]),
dbc.CardFooter([
"Predicted Performance: ",
html.Span("-", id="se-performance"),
], className="border-0")
],
id="se-header",
color="secondary",
className="text-primary"
)
return element
def render():
element = dbc.Card([
dbc.CardBody([
html.H4("Third Choice", className="card-title"),
html.Small("Recommended",
id="third-recommended",
className="card-subtitle"),
]),
dbc.CardFooter([
"Predicted Success Probability: ",
html.Span("-", id="third-proba"),
],
className="border-0")
],
id="third-header",
color="secondary",
className="text-primary")
return element
def render():
element = dbc.Card([
dbc.CardBody([
html.H4("Interactive Media Design & Development",
className="card-title"),
html.Small("Recommended", id="imdd-recommended",
className="card-subtitle"),
]),
dbc.CardFooter([
"Predicted Performance: ",
html.Span("-", id="imdd-performance"),
], className="border-0"),
],
id="imdd-header",
color="primary",
className="text-white"
)
return element
def build_figure_container(title, id, footer=None):
fig_containter = dbc.Card(
[
dbc.CardHeader(html.H4(title)),
dbc.CardBody([
dbc.Col(
dcc.Graph(
id=id,
config={
"displaylogo": False,
"toImageButtonOptions": {
"filename": id,
"format": "jpeg"
},
},
))
]),
dbc.CardFooter(footer),
],
className="m-2 pretty_container",
)
return fig_containter
def count_report_cards(counts):
"""
A type of report where each attribute and its count
is presented as a card. Used for general observations.
"""
return dbc.CardDeck([
dbc.Card(
[
dbc.CardBody([
html.H5(label_translations[c[0]], className="card-title"),
html.P(f'{c[1]} defectos', className="card-text"),
]),
dbc.CardFooter(
dbc.Button("Más información",
id={
"type": "observation_card",
"index": c[0]
}))
],
className="mt-3 md-3",
) for c in counts
], )
def __init__(self,
function=lambda x: None,
button_text='Button',
button_color='primary',
button_class='mr-1',
button_id=None,
description='FunctionInputCardWithButton'):
self._defaults = dict_default_args(function)
self._function = function
self._html = dbc.Card([
dbc.CardHeader(description),
dbc.CardBody([
dbc.CardText(
html.Div(
inputs_from_dict(self._defaults, id_prefix=str(self))))
]),
dbc.CardFooter(
dbc.Button(button_text,
color=button_color,
className=button_class,
id=button_id))
])
children=[
dbc.CardHeader(html.H2("Annotation area")),
dbc.CardBody([
dcc.Graph(
id="graph",
figure=fig,
config={"modeBarButtonsToAdd": ["drawrect", "eraseshape"]},
)
]),
dbc.CardFooter([
dcc.Markdown(
"To annotate the above image, select an appropriate label on the right and then draw a "
"rectangle with your cursor around the area of the image you wish to annotate.\n\n"
"**Choose a different image to annotate**:"),
dbc.ButtonGroup(
[
dbc.Button("Previous image", id="previous", outline=True),
dbc.Button("Next image", id="next", outline=True),
],
size="lg",
style={"width": "100%"},
),
]),
],
)
annotated_data_card = dbc.Card(
[
dbc.CardHeader(html.H2("Annotated data")),
dbc.CardBody([
dbc.Row(dbc.Col(html.H3("Coordinates of annotations"))),
dbc.Row(
'yaxis': {
'title': 'Quantity'
},
}
return {'data': data, 'layout': layout}
body = dbc.Container(
[
dbc.Row([
dbc.Col(dbc.CardGroup([
dbc.Card([
dbc.CardHeader("Twitter", style={'text-align': 'center'}),
dbc.CardImg(src="/static/twitter.png", top=True),
dbc.CardFooter([
daq.BooleanSwitch(
id='switch_twitter', on=True, color="#D0E49F")
])
]),
dbc.Card([
dbc.CardHeader("Facebook", style={'text-align': 'center'}),
dbc.CardImg(src="/static/facebook.png", top=True),
dbc.CardFooter([
daq.BooleanSwitch(
id='switch_facebook', on=False, color="#D0E49F")
])
]),
dbc.Card([
dbc.CardHeader("YouTube", style={'text-align': 'center'}),
dbc.CardImg(src="/static/youtube.png", top=True),
dbc.CardFooter([
daq.BooleanSwitch(
]
),
dbc.CardFooter(
[
# Download links
html.A(id="download", download="classifier.json",),
html.Div(
children=[
dbc.ButtonGroup(
[
dbc.Button(
"Download classified image",
id="download-image-button",
outline=True,
),
dbc.Button(
"Download classifier",
id="download-button",
outline=True,
),
],
size="lg",
style={"width": "100%"},
),
],
),
html.A(id="download-image", download="classified-image.png",),
]
),
],
)
html.Div([
html.H5(children="Test",
className="card-title",
id="cardmidT"),
html.H5(children="Test2",
className="card-text",
id="cardmidM"),
], ),
],
# style={"height": "125px",},
# align="center",
),
dbc.CardFooter([
html.Div([
html.P(
children="", className="card-title", id="cardLat"),
html.P(
children="", className="card-text", id="cardLon"),
], ),
], ),
],
outline=True,
color="dark",
)
], )
############################################################################################################################################################ Comp
RSAlayout = dict(
autosize=True,
margin=go.layout.Margin(
l=0,
className='bg-danger font-weight-bold lead'
),
dbc.CardBody(
dcc.Graph(
id='motivation-graph',
config={'displayModeBar': False},
style={
'height': '120px',
'width' : '100%'
}
)
),
dbc.CardFooter(
'➡ Internal drives',
style={
'color' : 'black',
'font-size': 'x-small'
}
)
],
color='danger',
inverse=True,
outline=True,
# REMOVE THIS TO ENABLE MOTIVATION GRAPH
style={'display': 'none'}
)
modal_tab = dbc.Tab(
dcc.Graph(
id='motivation-graph-large',
# 'Animate' property is incompatible with changing images
