def input_parameters(index):
Parameter = ['Pᵢₒ', 'ɑ']
Unit = {'Pᵢₒ': 'Pa', 'ɑ': ''}
DefaultValue = {'Pᵢₒ': 101325, 'ɑ': 'Alpha w'}
Par = Parameter[index]
if index == 0:
return dbc.ModalBody([
dbc.ModalBody(Par + '\t:',
style={
'width': '50px',
'display': 'inline-block'
}),
dcc.Input(id='input-' + str(index),
type='text',
value=DefaultValue[Par],
style={
'width': '80px',
'display': 'inline-block',
'text-align': 'right'
}),
dbc.ModalBody(Unit[Par],
style={
'width': '40px',
'display': 'inline-block'
})
])
elif index == 1:
return dbc.ModalBody([
dbc.ModalBody(Par + '\t:',
style={
'width': '50px',
'display': 'block'
}),
dcc.Dropdown(id='input-' + str(index),
value=DefaultValue[Par],
options=[
{
'label': 'ɑw',
'value': 'Alpha w'
},
{
'label': 'ɑc',
'value': 'Alpha c'
},
],
style={
'width': '80px',
'display': 'block',
'padding': '0px 0px 0px 20px'
})
])
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 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 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 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 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 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 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 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 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 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_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 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 info_body():
"""Params info modal body"""
message1 = dcc.Markdown("""
The **mrsimulator** library generates parameter names using the following
rules:
```sys[i].sites[j].attribute1.attribute2```
will generate the name
```sys_i_site_j_attribute1_attribute2```
where `sys` and `sites` are lists of **Spin System** and **Site** objects,
respectively.
More can be found on the [mrsimulator documentation page][1]
[1]: https://mrsimulator.readthedocs.io/en/latest/api_py/fitting.html
""")
btn_title = html.B("Button Functions")
btn_info = html.Div(
children=[get_info_row(k, v) for k, v in BUTTONS.items()],
className="modal-body-item",
)
return dbc.ModalBody([message1, btn_title, btn_info])
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 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 __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 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 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 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 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 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 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 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 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 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 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 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 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 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]
