Modify and add new plots
Prerequisite
We have used the Plotly Dash (opens in a new tab) framework for building this dashboard. Before modifying any contents of this dashboard, thus, please review the respective documentation:
- Quickstart Installation part (opens in a new tab)
- A Minimal Dash App (opens in a new tab)
- Dash in 20 Minutes (opens in a new tab)
Adding a new plot
In order to add a new plot in HMC FAIR Data Dashboard, it is recommended to consider our defined workflow, which will result in consistency throughout the code. The defined workflow comprises the following steps:
- Define the chart in the HTML
- Manage the data in db.py
- Include the chart Id in the callback
- Define the chart layout function
- Return the layout result from the callback
Define the chart in the HTML
It is essential to ascertain the precise location within the HTML section of the web page at which the chart is to be displayed. The following example illustrates this process.
html.Div(
[
dcc.Graph(
id="graph_repository_usage",
config={"displayModeBar": True},
),
html.Div(
dcc.Markdown(i18n.t("data.graphRepositoryUsageDes")),
className="p-3 text-justify small",
),
],
className="card",
),
Manage the data in db.py
The processes of data query and database connection are described in the data model and storage section.
Additionally, queries and functions have been defined in db.py that will return dataframes, which can be processed and utilized as needed for new charts and plots.
It is possible that a new SQL query may not be required for a new chart. For instance:
data_is_supplemented_by_df = get_dataframe(
SELECT_DATASET_PUBLICATION_IS_SUPPLEMENTED_BY_QUERY,
success_message="IS_SUPPLEMENTED_BY Data Publications queried successfully",
)The data frame, data_is_supplemented_by_df, was utilized in nearly seven charts within our dashboard, thereby providing the requisite data.
Include the chart Id in the callback
It is imperative that the chart ID be included in the callback, as illustrated in the subsequent example.
@callback(
Output("graph_repository_usage", "figure"),
Output("graph_repository_usage_over_time", "figure"),
Output("graph_average_FAIR_score_sunburst", "figure"),
Output("filter_msg_data_in_helmholtz_page", component_property="style"),
Input("center_filter", "value"),
Input("research_field_filter", "value"),
Input("viewport_container", "data"),
)
def update_graph_research_data_helmholtz_figures(center, research_field, viewport_size):
...Define the chart layout function
For each chart layout and logic, separate functions were defined in the pages/partials directory, specifically in the charts.py files.
def graph_repository_usage(filtered_df):
...
return figReturn the layout result from the callback
The final process is the return of the chart, which has been laid out and processed as a result of the callback. This is demonstrated in the following example:
@callback(
Output("graph_repository_usage", "figure"),
Output("graph_repository_usage_over_time", "figure"),
Output("graph_average_FAIR_score_sunburst", "figure"),
Output("filter_msg_data_in_helmholtz_page", component_property="style"),
Input("center_filter", "value"),
Input("research_field_filter", "value"),
Input("viewport_container", "data"),
)
def update_graph_research_data_helmholtz_figures(center, research_field, viewport_size):
...
graph_repository_usage_chart = graph_repository_usage(filtered_df)
...
return (
change_legend_according_viewport_size(
graph_repository_usage_chart, viewport_size_width
),
change_legend_according_viewport_size(
graph_repository_usage_over_time_chart, viewport_size_width
),
change_legend_according_viewport_size(
graph_average_fair_score_sunburst_chart, viewport_size_width
),
{"display": "block"} if is_filtered else {"display": "none"},
)Directories and files
In regard to the aforementioned matter, all relevant directories and files can be found in the following locations:
- charts.py
- html_template.py
- charts.py
- html_template.py
- charts.py
- charts.py
- assess_my_data.py
- data_in_helmholtz.py
- fair_by_repository.py
- home.py
- data.de.yml
- data.en.yml
- home.de.yml
- home.en.yml
- my_data.de.yml
- my_data.en.yml
- repo.de.yml
- repo.en.yml