Element grouping with bordered containers

app/tab_certification_schemes.py

@@ -4,19 +4,8 @@
 import streamlit as st
 
 
-def content_certification_schemes(context_data: dict):
-    with st.expander("What is this?"):
-        st.markdown(
-            """
-**Get supplementary information on H2-relevant certification frameworks**
-
-This sheet provides you with an overview of current governmental regulations
-and voluntary standards for H2 products.
-            """
-        )
+def _render_scheme_info(context_data, scheme_name):
     df = context_data["certification_schemes"]
-    helptext = "Select the certification scheme you want to know more about."
-    scheme_name = st.selectbox("Select scheme:", df["name"], help=helptext)
     data = df.loc[df["name"] == scheme_name].iloc[0].to_dict()
 
     # replace na with "not specified":
@@ -75,3 +64,22 @@ def content_certification_schemes(context_data: dict):
 
     with st.expander("**Sources**"):
         st.markdown(data["sources"])
+
+
+def content_certification_schemes(context_data: dict):
+    with st.expander("What is this?"):
+        st.markdown(
+            """
+**Get supplementary information on H2-relevant certification frameworks**
+
+This sheet provides you with an overview of current governmental regulations
+and voluntary standards for H2 products.
+            """
+        )
+
+    helptext = "Select the certification scheme you want to know more about."
+    scheme_name = st.selectbox(
+        "Select scheme:", context_data["certification_schemes"]["name"], help=helptext
+    )
+    with st.container(border=True):
+        _render_scheme_info(context_data=context_data, scheme_name=scheme_name)

app/tab_country_fact_sheets.py

@@ -6,32 +6,6 @@
 def _create_fact_sheet_demand_country(context_data: dict):
     # select country:
     country_name = st.session_state["country"]
-    with st.expander("What is this?"):
-        st.markdown(
-            """
-**Country fact sheets**
-
-This sheet provides you with additional information on the production and import of
- hydrogen and derivatives in all PTX BOA supply and demand countries.
-For each selected supply and demand country pair, you will find detailed
- country profiles.
-
- For demand countries, we cover the following aspects:
- country-specific projected hydrogen demand,
- target sectors for hydrogen use,
- hydrogen-relevant policies and competent authorities,
- certification and regulatory frameworks,
- and country-specific characteristics as defined in the demand countries'
- hydrogen strategies.
-
- For the supplying countries, we cover the country-specific technical potential
- for renewables (based on various data sources),
- LNG export and import infrastructure,
- CCS potentials,
- availability of an H2 strategy
- and wholesale electricity prices.
-            """
-        )
     df = context_data["demand_countries"]
     data = df.loc[df["country_name"] == country_name].iloc[0].to_dict()
 
@@ -122,6 +96,33 @@ def _create_fact_sheet_supply_country(context_data: dict):
 
 
 def content_country_fact_sheets(context_data):
-    _create_fact_sheet_demand_country(context_data)
-    st.divider()
-    _create_fact_sheet_supply_country(context_data)
+    with st.expander("What is this?"):
+        st.markdown(
+            """
+**Country fact sheets**
+
+This sheet provides you with additional information on the production and import of
+ hydrogen and derivatives in all PTX BOA supply and demand countries.
+For each selected supply and demand country pair, you will find detailed
+ country profiles.
+
+ For demand countries, we cover the following aspects:
+ country-specific projected hydrogen demand,
+ target sectors for hydrogen use,
+ hydrogen-relevant policies and competent authorities,
+ certification and regulatory frameworks,
+ and country-specific characteristics as defined in the demand countries'
+ hydrogen strategies.
+
+ For the supplying countries, we cover the country-specific technical potential
+ for renewables (based on various data sources),
+ LNG export and import infrastructure,
+ CCS potentials,
+ availability of an H2 strategy
+ and wholesale electricity prices.
+            """
+        )
+    with st.container(border=True):
+        _create_fact_sheet_demand_country(context_data)
+    with st.container(border=True):
+        _create_fact_sheet_supply_country(context_data)

app/tab_dashboard.py

@@ -36,51 +36,56 @@ def content_dashboard(
             """
         )
 
-    c_1, c_2 = st.columns([2, 1])
+    with st.container(border=True):
+        c_1, c_2 = st.columns([2, 1])
 
-    with c_1:
-        fig_map = plot_costs_on_map(
-            api, costs_per_region, scope="world", cost_component="Total"
-        )
-        st.plotly_chart(fig_map, use_container_width=True)
+        with c_1:
+            fig_map = plot_costs_on_map(
+                api, costs_per_region, scope="world", cost_component="Total"
+            )
+            st.plotly_chart(fig_map, use_container_width=True)
 
-    with c_2:
-        # create box plot and bar plot:
-        fig1 = create_box_plot(costs_per_region)
-        filtered_data = costs_per_region[
-            costs_per_region.index == st.session_state["region"]
-        ]
-        fig2 = create_bar_chart_costs(filtered_data)
-        doublefig = make_subplots(rows=1, cols=2, shared_yaxes=True)
+        with c_2:
+            # create box plot and bar plot:
+            fig1 = create_box_plot(costs_per_region)
+            filtered_data = costs_per_region[
+                costs_per_region.index == st.session_state["region"]
+            ]
+            fig2 = create_bar_chart_costs(filtered_data)
+            doublefig = make_subplots(rows=1, cols=2, shared_yaxes=True)
 
-        for trace in fig1.data:
-            trace.showlegend = False
-            doublefig.add_trace(trace, row=1, col=1)
-        for trace in fig2.data:
-            doublefig.add_trace(trace, row=1, col=2)
+            for trace in fig1.data:
+                trace.showlegend = False
+                doublefig.add_trace(trace, row=1, col=1)
+            for trace in fig2.data:
+                doublefig.add_trace(trace, row=1, col=2)
 
-        doublefig.update_layout(barmode="stack")
-        doublefig.update_layout(title_text="Cost distribution and details:")
-        st.plotly_chart(doublefig, use_container_width=True)
+            doublefig.update_layout(barmode="stack")
+            doublefig.update_layout(title_text="Cost distribution and details:")
+            st.plotly_chart(doublefig, use_container_width=True)
 
-    st.button(
-        "More Info on Supply Region and Demand Country",
-        on_click=move_to_tab,
-        args=("Country fact sheets",),
-    )
+        st.button(
+            "More Info on Supply Region and Demand Country",
+            on_click=move_to_tab,
+            args=("Country fact sheets",),
+        )
 
-    display_costs(
-        remove_subregions(api, costs_per_region, st.session_state["country"]),
-        "region",
-        "Costs by region:",
-    )
+    with st.container(border=True):
+        display_costs(
+            remove_subregions(api, costs_per_region, st.session_state["country"]),
+            "region",
+            "Costs by region:",
+        )
 
-    display_costs(costs_per_scenario, "scenario", "Costs by data scenario:")
+    with st.container(border=True):
+        display_costs(costs_per_scenario, "scenario", "Costs by data scenario:")
 
-    display_costs(
-        costs_per_res_gen, "res_gen", "Costs by renewable electricity source:"
-    )
+    with st.container(border=True):
+        display_costs(
+            costs_per_res_gen, "res_gen", "Costs by renewable electricity source:"
+        )
 
-    display_costs(
-        costs_per_chain, "chain", "Costs by supply chain:", output_unit="USD/MWh"
-    )
+    with st.container(border=True):
+        display_costs(
+            costs_per_chain, "chain", "Costs by supply chain:", output_unit="USD/MWh"
+        )

app/tab_deep_dive_countries.py

@@ -42,54 +42,58 @@ def content_deep_dive_countries(api: PtxboaAPI, costs_per_region: pd.DataFrame)
         "Select country:", ["Argentina", "Morocco", "South Africa"], horizontal=True
     )
 
-    fig_map = plot_costs_on_map(
-        api, costs_per_region, scope=ddc, cost_component="Total"
-    )
-    st.plotly_chart(fig_map, use_container_width=True)
-
-    display_costs(
-        select_subregions(costs_per_region, ddc),
-        key="region",
-        titlestring="Costs per subregion",
-        key_suffix=ddc,
-    )
+    with st.container(border=True):
+        fig_map = plot_costs_on_map(
+            api, costs_per_region, scope=ddc, cost_component="Total"
+        )
+        st.plotly_chart(fig_map, use_container_width=True)
 
-    st.subheader("Full load hours of renewable generation")
+        st.divider()
 
-    # in order to keep the figures horizontally aligned, we create two st.columns pairs
-    # the columns are identified by c_{row}_{column}, zero indexed
-    c_0_0, c_0_1 = st.columns([2, 1], gap="large")
-    c_1_0, c_1_1 = st.columns([2, 1], gap="large")
-    with c_0_0:
-        st.markdown("**Map**")
-        map_parameter = st.selectbox(
-            "Show Parameter on Map",
-            [
-                "Wind Onshore",
-                "Wind Offshore",
-                "PV tilted",
-                "Wind-PV-Hybrid",
-            ],
-            key="ddc_flh_map_parameter",
-        )
-    with c_1_0:
-        fig = plot_input_data_on_map(
-            api=api,
-            data_type="full load hours",
-            color_col=map_parameter,
-            scope=ddc,
-        )
-        st.plotly_chart(fig, use_container_width=True)
-    with st.expander("**Data**"):
-        df = display_and_edit_input_data(
-            api,
-            data_type="full load hours",
-            scope=ddc,
-            key="input_data_editor_full_load_hours_ddc",
+        display_costs(
+            select_subregions(costs_per_region, ddc),
+            key="region",
+            titlestring="Costs per subregion",
+            key_suffix=ddc,
         )
 
-    with c_0_1:
-        st.markdown("**Regional Distribution**")
-    with c_1_1:
-        fig = px.box(df)
-        st.plotly_chart(fig, use_container_width=True)
+    with st.container(border=True):
+        st.subheader("Full load hours of renewable generation")
+
+        # in order to keep the figures horizontally aligned, we create two st.columns
+        # pairs, the columns are identified by c_{row}_{column}, zero indexed
+        c_0_0, c_0_1 = st.columns([2, 1], gap="large")
+        c_1_0, c_1_1 = st.columns([2, 1], gap="large")
+        with c_0_0:
+            st.markdown("**Map**")
+            map_parameter = st.selectbox(
+                "Show Parameter on Map",
+                [
+                    "Wind Onshore",
+                    "Wind Offshore",
+                    "PV tilted",
+                    "Wind-PV-Hybrid",
+                ],
+                key="ddc_flh_map_parameter",
+            )
+        with c_1_0:
+            fig = plot_input_data_on_map(
+                api=api,
+                data_type="full load hours",
+                color_col=map_parameter,
+                scope=ddc,
+            )
+            st.plotly_chart(fig, use_container_width=True)
+        with st.expander("**Data**"):
+            df = display_and_edit_input_data(
+                api,
+                data_type="full load hours",
+                scope=ddc,
+                key="input_data_editor_full_load_hours_ddc",
+            )
+
+        with c_0_1:
+            st.markdown("**Regional Distribution**")
+        with c_1_1:
+            fig = px.box(df)
+            st.plotly_chart(fig, use_container_width=True)