def update_figure(article_type):
print(article_type)
title = 'Today\'s Top News Articles in {x}'.format(
x=article_type.capitalize())
df = dfs[index_conversion[article_type]]
#info = df.iloc[0]
#hret=c['url']
# add a button
# create a pattern matched button
# give each button a id that's a dictionary
html_lines = []
modal_content = []
for i, c in enumerate(df.iloc):
#index = i+index_conversion[article_type]
index = i
#modal_type = 'modal-' + str(article_type)
button_id = {'type': 'button-preview', 'index': index}
modal_id = {'type': 'modal-popup', 'index': index}
#modal_id = {'type': modal_type, 'index': index}
close_id = {'type': 'modal-close', 'index': index}
description = c['description']
if isinstance(description, float):
description = 'No preview available'
line = html.Div([
html.A(html.P(c['title']), href=c['url'], target='_blank'),
html.Button('Preview', id=button_id, n_clicks=0)
],
id='article-container')
html_lines.append(html.A(line))
source = 'Source: ' + str(c['source_name'])
modal = dbc.Modal([
dbc.ModalHeader(html.H1(c['title'])),
dbc.ModalBody(
[html.H3(description), html.H3(source)], id='modal-content'),
dbc.ModalFooter(children=[
html.
A(html.H4('Link to article'), href=c['url'], target='_blank'),
dbc.Button(
"Close", id=close_id, className="ml-auto", n_clicks=0)
]),
],
id=modal_id,
size="lg",
is_open=False)
#modal.
modal_content.append(modal)
article_html = html.Div(html_lines)
#article_html = html.Div([html.A(html.P(c['title']), href=c['url'], target='_blank') for c in df.iloc],[])
#article_html = html.Div([html.A(html.P(children=info['title']), id="preview-link")])
return [article_html, title, modal_content]
def manager_modal_metricsdetail(app):
return html.Div([
dbc.Button(
"Result Details",
id='manager-button-openmodal-metricsdetail',
className="mb-3",
style={
"background-color": "#38160f",
"border": "none",
"border-radius": "10rem",
"font-family": "NotoSans-Regular",
"font-size": "0.6rem"
},
),
dbc.Modal([
dbc.ModalHeader([
html.H1("Result Details", style={"font-size": "0.8rem"}),
html.H2("TOTAL COST",
style={
"font-size": "0.8rem",
"color": "#1357DD"
})
], ),
dbc.ModalBody(children=table_result_dtls(df_result_details),
style={"padding": "2rem"}),
dbc.ModalFooter(
dbc.Button('Close',
style={"border-radius": "10rem"},
id='manager-button-closemodal-metricsdetail')),
],
id='manager-modal-metricsdetail',
backdrop='static'),
])
def modal_drilldown_tableview():
return html.Div(
[
dbc.Button("OPEN TABLE VIEW", id="drilldown-open-centered-kccq", color="light", block=True, style={"color":"#1357DD","border":"1.8px dotted","border-radius":"0.5rem","font-family":"NotoSans-CondensedBlack"}),
dbc.Modal(
[
dbc.ModalHeader(
html.Div(
[
html.H2("TABLE VIEW", style={"font-size":"2rem", "color":"#1357DD"})
],
style={"color":"#1357DD"}
)
),
dbc.ModalBody(
tableview()
),
dbc.ModalFooter(
dbc.Button(
"CLOSE", id="drilldown-close-centered-kccq", className="ml-auto",
style={"margin-right":"20px", "background-color":"#38160f", "border":"none", "border-radius":"10rem", "font-family":"NotoSans-Black", "font-size":"1rem"}
)
),
],
id="drilldown-modal-centered-kccq",
size='xl',
scrollable=False,
backdrop = 'static',
),
]
)
def modal(name, is_graph=False):
return dbc.Modal(
[
html.Div(html.Section(
[
html.Div(id=name + '-title'),
html.Div(
dbc.Button("×", id=name + '-close1',
className='close'))
],
style={
'display': 'flex',
'width': '100%',
'justify-content': 'space-between'
}),
className='modal-header'),
# dbc.ModalBody(dcc.Graph(figure=fig)),
dcc.Graph(id=name + '-children', config=graph_config)
if is_graph else dbc.ModalBody(html.Div(id=name + '-children')),
dbc.ModalFooter(dbc.Button("Закрыть", id=name + '-close')),
],
id=name,
size="xl",
fade=False
# className='fade'
)
def make_btn_with_modal(id, title, content):
"""
This makes a button that opens a modal for content
note: The modal callback is located in the app_galery.py
id: unique identifier
title: what appears on the button
content:
To display text, use dcc.Markdown("my text")
To display a codebox that looks better with dark themes:
html.Div(html.Pre(html.Code(" enter code here" )), className="codebox",)
"""
return html.Div([
dbc.Button(
title,
id={
"type": "modal_btn",
"index": id
},
color="primary",
size="sm",
outline=True,
className="my-2",
),
dbc.Modal(
dbc.ModalBody(content),
id={
"type": "modal",
"index": id
},
scrollable=True,
size="lg",
),
])
def __vector_calculator_modal_layout(
get_uuid: Callable,
vector_data: list,
predefined_expressions: List[ExpressionInfo],
) -> dbc.Modal:
return dbc.Modal(
style={"marginTop": "20vh", "width": "1300px"},
children=[
dbc.ModalHeader("Vector Calculator"),
dbc.ModalBody(
html.Div(
children=[
wsc.VectorCalculator(
id=get_uuid(LayoutElements.VECTOR_CALCULATOR),
vectors=vector_data,
expressions=predefined_expressions,
)
],
),
),
],
id=get_uuid(LayoutElements.VECTOR_CALCULATOR_MODAL),
size="lg",
centered=True,
)
def bundle_modal_bundles():
return html.Div([
dbc.Button(
'Edit Bundles',
id='bundle-button-openmodal',
style={
"background-color": "#38160f",
"border": "none",
"border-radius": "10rem",
"font-family": "NotoSans-Regular",
"font-size": "0.6rem",
"width": "8rem"
},
),
dbc.Modal([
dbc.ModalHeader(html.H2('Bundles', style={"font-size": "2rem"}), ),
dbc.ModalBody(bundle_modal_bundles_body()),
dbc.ModalFooter(dbc.Button('Submit',
id='bundle-button-closemodal'))
],
id='bundle-modal-bundles',
size='xl',
backdrop='static')
],
style={"padding": "1rem"})
def modal_kccq_questionaire_answer(app):
return html.Div([
html.H6("Review", style={
"font-size": "0.7rem",
"padding-top": "10px"
}),
dbc.Button(children=[
html.Img(src=app.get_asset_url("icon-inspection-100.png"),
style={
"height": "1.5rem",
"padding-top": "0px"
})
],
color="light",
style={"border-radius": "10rem"},
id='kccq-modal-answer-button-open'),
dbc.Modal([
dbc.ModalHeader(id="kccq-modal-answer-header"),
dbc.ModalBody(modal_kccq_questionaire_body_answer(),
style={
"padding": "40px",
"margin-top": "-20px"
}),
dbc.ModalFooter(dbc.Button("Close",
id="kccq-modal-answer-button-submit",
className="mr-2",
style={"width": "160px"}),
style={"padding-right": "42%"})
],
id="kccq-modal-answer",
size='xl',
backdrop="static")
],
style={"text-align": "center"})
def make_link_with_modal(title, content):
"""
This makes a link that opens a modal for content
note: The modal callback is located in the app_galery.py
content example:
To display text, use dcc.Markdown("my text")
To display a codebox:
html.Div(html.Pre(html.Code(" enter code here" )), style=codebox,)
"""
return dbc.ListGroupItem([
dbc.Button(
title,
id={
"type": "modal_btn",
"index": title
},
color="link",
className="text-left pl-0",
),
dbc.Modal(
dbc.ModalBody(content),
id={
"type": "modal",
"index": title
},
scrollable=True,
size="lg",
),
])
def make_configuration_modal(self, activity: Activity,
config: UserConfig) -> html:
config_modal = html.Div([
dbc.Button("Configuration",
id="btn_open_configuration",
color="link",
n_clicks=0),
dbc.Modal(
[
dbc.ModalTitle("Configuration"),
dbc.ModalBody(self.make_charts_selector(activity, config)),
dbc.ModalFooter([
dbc.Button("Save",
id="btn_save_configuration",
color="link",
n_clicks=0),
dbc.Button("Close",
id="btn_close_configuration",
color="link",
n_clicks=0)
])
],
id="configuration_modal_centered",
centered=True,
is_open=False,
)
])
return config_modal
def make_image_row(id, howto_image):
"""
:param id: str id for the modal
:param howto_image: image
:return: row for with a modal to enlarge the image when clicked on
"""
return html.Div([
html.Div(
[
html.Div("click on image to enlarge", className="ml-4"),
html.Img(
id={
"type": "row_modal",
"index": id
},
src=howto_image,
width=150,
height=125,
),
],
className="ml-4 mb-4",
),
dbc.Modal(
dbc.ModalBody(html.Img(src=howto_image)),
id={
"type": "modal",
"index": id
},
scrollable=True,
size="xl",
),
], )
def layout(self):
return html.Div(
[
dbc.Button(self.button_text, id=self.name+'modal-open', size=self.button_size, outline=self.button_outline),
dbc.Modal([
dbc.ModalHeader(self.title),
dcc.Graph(id=self.name+'-modal-graph', style={"max-height": "none", "height": "80%"}),
dbc.ModalFooter([
html.Div([
html.Div([
html.Div([
dbc.Button(html.Small("Description"),
id=self.name+'-show-description',
color='link', className="text-muted ml-auto"),
dbc.Fade([
html.Small(self.description, className="text-muted")],
id=self.name+'-fade',
is_in=True,
appear=True),
], style=dict(display="none" if not self.description else None))
], className="text-left"),
html.Div([
dbc.Button("Close", id=self.name+'-modal-close', className="mr-auto")
], className="text-right", style=dict(float='right')),
], style={"display":"flex"}),
], className="justify-content-between")
], id=self.name+'-modal', style={"max-width": "none", "width": "80%"})
], style={"display":"flex", "justify-content":"flex-end"})
def app_information():
return html.Div(
[
dbc.Button("About us", id="open-modal-btn-in-about-us-modal"),
dbc.Modal(
[
dbc.ModalHeader("About us"),
dbc.ModalBody([
html.P(
["Cora is an applicaiton program that can quantify the soil cover by processing/analyzing an image input from the user. The appliation can quantify the soil cover on the basis of soil,residue and canopy. ",
html.Br(),html.Br(),
"Soil residues are stems and stalks that remain on soil from previous crops. Residue cover is utilized in farming techniques such as no-till farming. This farming technique uses residue as a cover to the soil layer. It acts as a barrier to the soil by deflecting energy from the raindrops that can wash away the soil particles and the nutrients in the soil. It also reduce the soil erosion and preserve water level drying out from sun.",
html.Br(),html.Br(),
"Identify the residue cover in the soil has higher importance. There percentages of soil cover that maintain throughout farming process. Moreover it also useful research purposes.",
html.Br(),html.Br(),
"Technology improvement world has have major impact in many fields. We uses a latest computer models to analyse the image data. Our effort is to minimize and save the time and energy in calculating soil cover. "
"Hope this app will make your life easier.",
html.Br(),html.Br(),
#"References",
html.Br(),html.Br(),
]),
]
),
dbc.ModalFooter(
dbc.Button("Close", id="close-modal-btn-in-about-us-modal", className="ml-auto")
),
],
id="modal_about_us",
),
]
)
def get_input():
inputFeed = html.Div(children=[
dbc.Input(id='username',
placeholder='Enter feedback here!',
bs_size="lg",
type='text'),
html.Br(),
dbc.Button(id='submit-button',
children='Submit',
style={
'text-align': 'center',
'width': '460px'
}),
html.Div(id='output_div')
],
style={'width': '460px'})
modal = html.Div(children=[
dbc.Button("Give us feedback!", id="open"),
dbc.Modal(
[
dbc.ModalHeader("Enter your feedback down below!"),
dbc.ModalBody(inputFeed),
dbc.ModalFooter(
dbc.Button("Close", id="close", className="ml-auto")),
],
id="modal",
),
],
style={'width': '150px'})
return modal
def manager_modal_bundle_performance_details(app):
return html.Div([
dbc.Button(
"Result Details",
id = 'manager-button-openmodal-bundle-performance-details',
className="mb-3",
style={"background-color":"#38160f", "border":"none", "border-radius":"10rem", "font-family":"NotoSans-Regular", "font-size":"0.6rem"},
),
dbc.Modal([
dbc.ModalHeader(
[
html.H1("Result Details", style={"font-size":"0.8rem"}),
html.H2("TOTAL COST", style={"font-size":"1.6rem","color":"#1357DD","background-color":"#c6d9ff","padding":"0.5rem","border-radius":"0.5rem"})
],
),
dbc.ModalBody([
html.Div('Bundle Total'),
table_bundle_dtls(df_bundle_performance_details),
html.Div('Bundle Average'),
table_bundle_dtls(df_bundle_performance_details_pmpm),
], style={"padding":"2rem"}),
dbc.ModalFooter(dbc.Button('Close', style={"border-radius":"10rem"}, id = 'manager-button-closemodal-bundle-performance-details')),
], id = 'manager-modal-bundle-performance-details'),
])
def modal_self_recording_review(app):
return html.Div([
html.H6("Review", style={
"font-size": "0.7rem",
"padding-top": "10px"
}),
dbc.Button(children=[
html.Img(src=app.get_asset_url("icon-laptop-play-video-100.png"),
style={
"height": "1.5rem",
"padding-top": "0px"
})
],
color="light",
style={"border-radius": "10rem"},
id='video-modal-review-button-open'),
dbc.Modal([
dbc.ModalHeader(id="video-modal-review-header"),
dbc.ModalBody(id="video-modal-review-body"),
dbc.ModalFooter(
dbc.Button("close",
id="video-modal-review-button-submit",
className="mr-2"), )
],
id="modal-selfrecording-review",
size='xl',
backdrop="static")
],
style={"text-align": "center"})
def well_points_tab_layout(self) -> html.Div:
return html.Div([
dbc.Button("Table Settings",
id=self.ids("button-open-table-settings")),
dbc.Modal(
children=[
dbc.ModalHeader("Table Settings"),
dbc.ModalBody(children=[
html.Label(
style={
"font-weight": "bold",
"textAlign": "Left",
},
children="Select Table Columns",
),
dcc.Checklist(
id=self.ids("columns-checklist"),
options=[{
"label": name,
"value": column_name
} for name, column_name in zip(
self.df_well_target_points.get_wellpoints_df().
keys().values,
self.df_well_target_points.get_wellpoints_df(
).keys().values,
)],
value=[
"Surface",
"Well",
"TVD",
"MD",
"Outlier",
"Deleted",
"Residual",
],
persistence=True,
persistence_type="session",
),
], ),
dbc.ModalFooter(children=[
dbc.Button(
"Close",
id=self.ids("button-close-table-settings"),
className="ml-auto",
),
dbc.Button(
"Apply",
id=self.ids("button-apply-columnlist"),
className="ml-auto",
),
]),
],
id=self.ids("modal-table-settings"),
size="sm",
centered=True,
backdrop=False,
fade=False,
),
html.Div(id=self.ids("well-points-table-container")),
])
def get_layout(self):
layout = dbc.Col(
dbc.Modal(
[
dbc.ModalHeader("How to use the tool"),
dbc.ModalBody([
html.Img(
src=self.image,
style={
"width": "auto",
"height": "600px"
},
),
html.Br(),
html.P(self.text)
], ),
dbc.ModalFooter(
dbc.Button("Close",
id="info-pane__close",
className="ml-auto")),
],
id="info-pane",
centered=True,
size="xl",
))
return layout
def render():
return dbc.Modal(
[
dbc.ModalHeader([
html.H4("Deader", id=MODAL_HEADER_ID),
dbc.Button("CITY", id=OPEN_CITY_EVENT_MODAL),
dbc.Button("ROAD", id=OPEN_ROAD_EVENT_MODAL)
]),
dbc.ModalBody("This is the content of the modal",
id=MODAL_BODY_ID),
dbc.ModalFooter([
dbc.Button("Close", id=CLOSE_MODAL_ID, color="info"),
html.Div([
dbc.Button("Fail",
id=FAIL_SCENARIO_ID, color="danger"),
dbc.Button(DEFAULT_PROGRESS_TEXT % 1, id=PROGRESS_SCENARIO_ID,
color="secondary"),
dbc.Button("Complete",
id=COMPLETE_SCENARIO_ID, color="success")
])],
className="d-flex justify-content-between",
id=MODAL_FOOTER_ID
),
],
id=MODAL_ID,
size="lg",
# centered=True,
)
def edit_tags_modal(id_prefix: str):
return dbc.Modal(
[
dbc.ModalHeader("Edit tags"),
dbc.ModalBody(
[
dcc.Dropdown(
id=f"{id_prefix}-edit-tags-dropdown",
multi=True,
options=[{"label": t, "value": t} for t in get_all_tags()],
)
]
),
dbc.ModalFooter(
[
dbc.Button("Save", id=f"{id_prefix}-edit-tags-save", color="info"),
dbc.Button(
"Close",
id=f"{id_prefix}-edit-tags-modal-close",
className="ml-auto",
),
]
),
],
id=f"{id_prefix}-edit-tags-modal",
)
def generate_graph_component(name, titel=''):
"""
Generates html code for a graph, including expand button and expand modal
:param name:
:param title:
:return:
"""
graph_html = [
dcc.Graph(id=name, config={'displayModeBar': False}),
dbc.Modal(
[
dbc.ModalHeader(titel, style={'margin': '0'}),
dbc.ModalBody([
dcc.Graph(id=f'expanded_{name}',
config={'displayModeBar': False},
style={'height': '75vh'}),
html.Img(src='assets/images/config.png',
id=f'config_{name}',
className='config-graph')
]),
# dbc.ModalFooter(),
],
id=f'modal_expanded_{name}',
centered=True,
style={
"max-width": "none",
"width": "90%"
}),
]
return graph_html
def create_modal(self):
return html.Div([
dbc.Button(
"⇱ ",
id=f"{self.graph.id}open-centered",
className="border rounded-circle",
outline=True,
),
dbc.Modal([
dbc.ModalHeader(
dbc.Row([
dbc.Col(html.H2(self.title),
width="auto",
className="border",
align="center"),
dbc.Col(
dbc.Button(
"x",
id=f"{self.graph.id}close-centered",
outline=True,
className="border rounded-circle ml-auto"))
],
justify="end")),
dbc.ModalBody(self),
],
id=f"{self.graph.id}modal-centered",
centered=True),
])
def build_modal(map_type, loc_mode):
return html.Div(
[
html.Div(
html.Span(
html.Span("GeoJSON Options",
style=dict(whiteSpace="pre-line")),
className="input-group-addon d-block pt-1 pb-0 pointer",
),
className="input-group mr-3",
id="open-geojson-modal",
),
dbc.Modal(
[
dbc.ModalHeader("Custom GeoJSON Options"),
dbc.ModalBody(build_geojson_upload(loc_mode)),
dbc.ModalFooter(
dbc.Button("Close",
id="close-geojson-modal",
className="ml-auto")),
],
id="geojson-modal",
size="lg",
centered=True,
),
],
className="col-auto",
style={} if map_type == "choropleth" and loc_mode == "geojson-id" else
{"display": "none"},
id="custom-geojson-input",
)
def layer_selection_intro():
return html.Div(children=[
html.Div([
html.Div(children=[
html.P('Main Visualization Map',
className="title-with-helper"),
html.A(className="far fa-question-circle helper-icon",
id="layer-helper"),
],
className="title"),
dbc.Modal(
[
dbc.ModalHeader("Introduction to the Visualization Types"),
dbc.ModalBody(
dcc.Markdown(texts.layer_selection_helper_text)),
dbc.ModalFooter(
dbc.Button("Close",
id="layer-helper-close",
className="ml-auto")),
],
id="layer-helper-modal",
centered=True,
),
html.Div(dcc.Markdown(texts.layer_selection_intro_text)),
],
id="layer-help")
],
className="layer-selection-intro")
def build_init_modal(id_modal, slider_id, generate_id, text, min, max, step,
value):
return dbc.Modal([
dbc.ModalHeader('Initialize'),
dbc.ModalBody([
html.Div([
html.Div(text,
id=f'{slider_id}-value',
style={'padding-left': '30px'}),
dcc.Slider(
id=slider_id, min=min, max=max, step=step, value=value),
],
style={'width': '200px'})
]),
dbc.ModalFooter([
dbc.Button('Close',
id=f'modal-{id_modal}-close',
className='ml-auto',
style={'width': '10em'}),
dbc.Button('Generate',
id=generate_id,
className='ml-auto',
style={'width': '10em'})
],
style={
'margin-left': 'auto',
'margin-right': '0'
}),
],
id=f'modal-{id_modal}')
def card_key_driver_drilldown_crhr(app):
return dbc.Card(
dbc.CardBody(
[
dbc.Row(
[
dbc.Col(html.Img(src=app.get_asset_url("bullet-round-blue.png"), width="10px"), width="auto", align="start", style={"margin-top":"-4px"}),
dbc.Col(html.H4("Key Drivers", style={"font-size":"1rem", "margin-left":"10px"}), width=8),
dbc.Col([dbc.Button("See All Drivers", id = 'button-all-driver-crhr',
style={"background-color":"#38160f", "border":"none", "border-radius":"10rem", "font-family":"NotoSans-Regular", "font-size":"0.6rem"},
),
dbc.Modal([
dbc.ModalHeader("All Drivers"),
dbc.ModalBody(children = html.Div([table_driver_all(df_driver_all_crhr)], style={"padding":"1rem"})),
dbc.ModalFooter(
dbc.Button("Close", id = 'close-all-driver-crhr',
style={"background-color":"#38160f", "border":"none", "border-radius":"10rem", "font-family":"NotoSans-Regular", "font-size":"0.8rem"},
)
)
], id = 'modal-all-driver-crhr', size="lg")],
width=3,
),
],
no_gutters=True,
),
dbc.Row(
[
dbc.Col(
[
html.Div([gaugegraph(df_driver_crhr,0)], style={"padding-top":"1.5rem"}),
html.Div(html.H4("{:.1f} %".format(abs(df_driver_crhr['%'][0]*100)),style={"color":"#ff4d17"}), style={"margin-top":"-1.5rem","text-align":"center","font-size":"1rem","color":"#ffeb78"}),
],
width=6),
dbc.Col(
[
html.Div([gaugegraph(df_driver_crhr,1)], style={"padding-top":"1.5rem"}),
html.Div(html.H4("{:.1f} %".format(abs(df_driver_crhr['%'][1]*100)),style={"color":"#ff4d17"}), style={"margin-top":"-1.5rem","text-align":"center","font-size":"1rem","color":"#aeff78"}),
],
width=6),
dbc.Col(
[
html.Div([gaugegraph(df_driver_crhr,2)], style={"padding-top":"1.5rem"}),
html.Div(html.H4("{:.1f} %".format(abs(df_driver_crhr['%'][2]*100)),style={"color":"#ff4d17"}), style={"margin-top":"-1.5rem","text-align":"center","font-size":"1rem","color":"#39db44"}),
],
width=6),
dbc.Col(
[
html.Div([gaugegraph(df_driver_crhr,3)], style={"padding-top":"1.5rem"}),
html.Div(html.H4("{:.1f} %".format(abs(df_driver_crhr['%'][3]*100)),style={"color":"#18cc75"}), style={"margin-top":"-1.5rem","text-align":"center","font-size":"1rem","color":"#39db44"}),
],
width=6),
],
),
]
),
className="mb-3",
style={"box-shadow":"0 4px 8px 0 rgba(0, 0, 0, 0.05), 0 6px 20px 0 rgba(0, 0, 0, 0.05)", "border":"none", "border-radius":"0.5rem"}
)
def manager_modal_alldrivers(app):
return html.Div([
dbc.Button(
"See All Drivers",
id='manager-button-openmodal-alldriver',
style={
"background-color": "#38160f",
"border": "none",
"border-radius": "10rem",
"font-family": "NotoSans-Regular",
"font-size": "0.6rem"
},
),
dbc.Modal([
dbc.ModalHeader("All Drivers"),
dbc.ModalBody(
children=html.Div(["contents"], style={"padding": "1rem"})),
dbc.ModalFooter(
dbc.Button(
"Close",
id='manager-button-closemodal-alldriver',
style={
"background-color": "#38160f",
"border": "none",
"border-radius": "10rem",
"font-family": "NotoSans-Regular",
"font-size": "0.8rem"
},
))
],
id='manager-modal-alldriver',
size="lg",
backdrop='static')
], )
def get(id):
table_content = html.Div(
[
dt.DataTable(
id = id + '-data-table',
data = [{}],
)
],
className = 'data-table-container',
id = id + '-table-container',
)
modal = html.Div([
dbc.Modal(
[
dbc.ModalHeader(
dbc.Button("Close", id=id + "-table-close", className="ml-auto")
),
dbc.ModalBody(table_content),
],
id= id + "-table-modal",
size = 'lg',
scrollable = True,
backdrop='static',
is_open = True # This ensures that the table will render (will close modal on page loading)
),
])
return modal
def get_uninstall(product):
return dbc.FormGroup([
dbc.Col([
dbc.Button(
'Uninstall', color='danger', id=f'uninstall-image-{product}'),
html.Span('',
id=f'span-uninstall-{product}',
className='align-middle',
style={'color': 'red'}),
dbc.Modal(
[
dbc.ModalHeader('Uninstall'),
dbc.ModalBody(
'Are you sure you want to uninstall an image?'),
dbc.ModalFooter([
dbc.Button(
'OK', color='danger', id=f'ok-uninstall-{product}'),
dbc.Button('Cancel', id=f'cancel-uninstall-{product}')
]),
],
id=f'modal-uninstall-{product}',
centered=True,
),
],
width=1),
dcc.Loading(type='circle',
children=html.Div(id=f'loading-uninstall-{product}')),
dbc.Label(
'Remove the Docker image and mark the product as uninstalled.',
html_for=f'uninstall-image-{product}',
width=11),
],
row=True,
style=NONE,
id=f'uninstall-{product}')
def get_sidebar_layout():
return dbc.Container(
[
dbc.Modal(
[
dbc.ModalHeader("St Louis DSA Open Data Project"),
dbc.ModalBody([
html.P([
"On ",
html.B("March 2,"),
"""
St Louis City will have primary elections for a number of municipal offices,
including mayor, comptroller, and more than half of the Board of Alders.
""",
]),
html.P([
html.A(
"St Louis DSA",
href="https://stldsa.org",
style={
"color": "red",
"font": "Roboto",
"textDecoration": "underline",
},
),
"""
is proud to provide this tool to the voters of St Louis.
You can use the options below to view campaign contributions for candidates
in the upcoming municipal elections. We hope that in democratizing access to
this information, voters will be best able to decide who they would like to represent them.
""",
]),
html.P(
html.
I("St Louis DSA has endorsed Megan Green for 15th Ward Alderperson."
), ),
], ),
dbc.ModalFooter(
dbc.Button("Close", id="close", className="ml-auto")),
],
id="modal",
is_open=True,
size="lg",
style={
"padding": "20px",
"fontSize": "1em",
"lineHeight": "1.2em"
},
),
dbc.Row(
[
dbc.Col(get_side_panel_layout(), md=5, lg=4),
dbc.Col(mapping.get_map_panel_layout(), md=7, lg=8),
],
no_gutters=True,
),
],
fluid=True,
className="remove-padding",
)
