adjust config and layout files

app/Home.py

@@ -1,10 +1,15 @@
 """Home page for Streamlit app."""
 import streamlit as st
-from src.config_parameters import config
-from src.utils_layout import add_about, add_logo, toggle_menu_button
+from src.config_parameters import params
+from src.utils import (
+    add_about,
+    add_logo,
+    set_home_page_style,
+    toggle_menu_button,
+)
 
 # Page configuration
-st.set_page_config(layout="wide", page_title=config["browser_title"])
+st.set_page_config(layout="wide", page_title=params["browser_title"])
 
 # If app is deployed hide menu button
 toggle_menu_button()
@@ -13,14 +18,8 @@ toggle_menu_button()
 add_logo("app/img/MA-logo.png")
 add_about()
 
-# Set fontisize text
-st.markdown(
-    """
-    <style> p { font-size: %s; } </style>
-    """
-    % config["docs_fontsize"],
-    unsafe_allow_html=True,
-)
+# Set page style
+set_home_page_style()
 
 # Page title
 st.markdown("# Home")
@@ -49,9 +48,9 @@ st.markdown(
     only source of information for rescue response planning.
     """
     % (
-        config["url_sentinel_esa"],
-        config["url_unspider_tutorial"],
-        config["url_gee"],
+        params["url_sentinel_esa"],
+        params["url_unspider_tutorial"],
+        params["url_gee"],
     ),
     unsafe_allow_html=True,
 )

app/pages/1_🌍_Flood_extent_analysis.py

@@ -8,14 +8,19 @@ import requests
 import streamlit as st
 import streamlit_ext as ste
 from folium.plugins import Draw, Geocoder, MiniMap
-from src.config_parameters import config
+from src.config_parameters import params
+from src.utils import (
+    add_about,
+    add_logo,
+    set_tool_page_style,
+    toggle_menu_button,
+)
 from src.utils_ee import ee_initialize
 from src.utils_flood_analysis import derive_flood_extents
-from src.utils_layout import add_about, add_logo, toggle_menu_button
 from streamlit_folium import st_folium
 
 # Page configuration
-st.set_page_config(layout="wide", page_title=config["browser_title"])
+st.set_page_config(layout="wide", page_title=params["browser_title"])
 
 # If app is deployed hide menu button
 toggle_menu_button()
@@ -27,41 +32,8 @@ add_about()
 # Page title
 st.markdown("# Flood extent analysis")
 
-# Set styles for text fontsize and buttons
-st.markdown(
-    """
-        <style>
-            .streamlit-expanderHeader {
-                font-size: %s;
-                color: #000053;
-            }
-            .stDateInput > label {
-                font-size: %s;
-            }
-            .stSlider > label {
-                font-size: %s;
-            }
-            .stRadio > label {
-                font-size: %s;
-            }
-            .stButton > button {
-                font-size: %s;
-                font-weight: %s;
-                background-color: %s;
-            }
-        </style>
-    """
-    % (
-        config["expander_header_fontsize"],
-        config["widget_header_fontsize"],
-        config["widget_header_fontsize"],
-        config["widget_header_fontsize"],
-        config["button_text_fontsize"],
-        config["button_text_fontweight"],
-        config["button_background_color"],
-    ),
-    unsafe_allow_html=True,
-)
+# Set page style
+set_tool_page_style()
 
 # Initialise Google Earth Engine
 ee_initialize()

app/pages/2_📖_Documentation.py

@@ -1,11 +1,16 @@
 """Documentation page for Streamlit app."""
 import streamlit as st
 from PIL import Image
-from src.config_parameters import config
-from src.utils_layout import add_about, add_logo, toggle_menu_button
+from src.config_parameters import params
+from src.utils import (
+    add_about,
+    add_logo,
+    set_doc_page_style,
+    toggle_menu_button,
+)
 
 # Page configuration
-st.set_page_config(layout="wide", page_title=config["browser_title"])
+st.set_page_config(layout="wide", page_title=params["browser_title"])
 
 # If app is deployed hide menu button
 toggle_menu_button()
@@ -14,14 +19,8 @@ toggle_menu_button()
 add_logo("app/img/MA-logo.png")
 add_about()
 
-# Set fontisize text
-st.markdown(
-    """
-    <style> p { font-size: %s; } </style>
-    """
-    % config["docs_fontsize"],
-    unsafe_allow_html=True,
-)
+# Set page style
+set_doc_page_style()
 
 # Page title
 st.markdown("# Documentation")
@@ -51,10 +50,10 @@ st.markdown(
     </ul>
     """
     % (
-        config["url_sentinel_dataset"],
-        config["url_gee"],
-        config["url_elevation_dataset"],
-        config["url_surface_water_dataset"],
+        params["url_sentinel_dataset"],
+        params["url_gee"],
+        params["url_elevation_dataset"],
+        params["url_surface_water_dataset"],
     ),
     unsafe_allow_html=True,
 )
@@ -80,8 +79,8 @@ with col2:
         </p>
         """
         % (
-            config["docs_caption_fontsize"],
-            config["url_unspider_tutorial_detail"],
+            params["docs_caption_fontsize"],
+            params["url_unspider_tutorial_detail"],
         ),
         unsafe_allow_html=True,
     )
@@ -128,7 +127,7 @@ st.markdown(
 
 # Add image satellite overview
 st.image(
-    "%s" % config["url_sentinel_img"],
+    "%s" % params["url_sentinel_img"],
     width=1000,
 )
 st.markdown(
@@ -138,7 +137,7 @@ st.markdown(
             '%s'>source</a>).
         </p>
         """
-    % (config["docs_caption_fontsize"], config["url_sentinel_img_location"]),
+    % (params["docs_caption_fontsize"], params["url_sentinel_img_location"]),
     unsafe_allow_html=True,
 )
 
@@ -171,10 +170,10 @@ st.markdown(
     <a href='%s'>1</a>, <a href='%s'>2</a><br>
     """
     % (
-        config["url_unspider_tutorial"],
-        config["url_sentinel_esa"],
-        config["url_publication_1"],
-        config["url_publication_2"],
+        params["url_unspider_tutorial"],
+        params["url_sentinel_esa"],
+        params["url_publication_1"],
+        params["url_publication_2"],
     ),
     unsafe_allow_html=True,
 )

app/src/config_parameters.py

@@ -1,23 +1,7 @@
 """Configuration file."""
-config = {
+params = {
     # Title browser tab
     "browser_title": "Flood mapping tool - MapAction",
-    # Sidebar
-    "MA_logo_width": "60%",
-    "MA_logo_background_position": "35% 10%",
-    "sidebar_header": "Flood Mapping Tool",
-    "sidebar_header_fontsize": "30px",
-    "sidebar_header_fontweight": "bold",
-    "about_box_background_color": "#dae7f4",
-    # Introduction and Documentation
-    "docs_fontsize": "1.2rem",
-    "docs_caption_fontsize": "1rem",
-    # Tool
-    "expander_header_fontsize": "23px",
-    "widget_header_fontsize": "18px",
-    "button_text_fontsize": "24px",
-    "button_text_fontweight": "bold",
-    "button_background_color": "#dae7f4",
     # Data scientists involved
     "data_scientists": {
         "Piet": "pgerrits@mapaction.org",
@@ -72,4 +56,21 @@ config = {
         "https://www.sciencedirect.com/science/article/abs/pii/"
         "S0924271620301702"
     ),
+    # Layout and styles
+    ## Sidebar
+    "MA_logo_width": "60%",
+    "MA_logo_background_position": "35% 10%",
+    "sidebar_header": "Flood Mapping Tool",
+    "sidebar_header_fontsize": "30px",
+    "sidebar_header_fontweight": "bold",
+    "about_box_background_color": "#dae7f4",
+    ## Introduction and Documentation pages
+    "docs_fontsize": "1.2rem",
+    "docs_caption_fontsize": "1rem",
+    ## Tool page
+    "expander_header_fontsize": "23px",
+    "widget_header_fontsize": "18px",
+    "button_text_fontsize": "24px",
+    "button_text_fontweight": "bold",
+    "button_background_color": "#dae7f4",
 }

app/src/{utils_layout.py → utils.py}

@@ -4,7 +4,7 @@ import os
 from datetime import date
 
 import streamlit as st
-from src.config_parameters import config
+from src.config_parameters import params
 
 
 # Check if app is deployed
@@ -28,6 +28,69 @@ def toggle_menu_button():
         )
 
 
+# Home page
+def set_home_page_style():
+    """Set style home page."""
+    st.markdown(
+        """
+    <style> p { font-size: %s; } </style>
+    """
+        % params["docs_fontsize"],
+        unsafe_allow_html=True,
+    )
+
+
+# Documentation page
+def set_doc_page_style():
+    """Set style documentation page."""
+    st.markdown(
+        """
+    <style> p { font-size: %s; } </style>
+    """
+        % params["docs_fontsize"],
+        unsafe_allow_html=True,
+    )
+
+
+# Tool page
+def set_tool_page_style():
+    """Set style tool page."""
+    st.markdown(
+        """
+            <style>
+                .streamlit-expanderHeader {
+                    font-size: %s;
+                    color: #000053;
+                }
+                .stDateInput > label {
+                    font-size: %s;
+                }
+                .stSlider > label {
+                    font-size: %s;
+                }
+                .stRadio > label {
+                    font-size: %s;
+                }
+                .stButton > button {
+                    font-size: %s;
+                    font-weight: %s;
+                    background-color: %s;
+                }
+            </style>
+        """
+        % (
+            params["expander_header_fontsize"],
+            params["widget_header_fontsize"],
+            params["widget_header_fontsize"],
+            params["widget_header_fontsize"],
+            params["button_text_fontsize"],
+            params["button_text_fontweight"],
+            params["button_background_color"],
+        ),
+        unsafe_allow_html=True,
+    )
+
+
 # Sidebar
 @st.cache(allow_output_mutation=True)
 def get_base64_of_bin_file(png_file):
@@ -85,12 +148,12 @@ def build_markup_for_logo(
             </style>
             """ % (
         binary_string,
-        config["MA_logo_background_position"],
-        config["MA_logo_width"],
+        params["MA_logo_background_position"],
+        params["MA_logo_width"],
         "",
-        config["sidebar_header"],
-        config["sidebar_header_fontsize"],
-        config["sidebar_header_fontweight"],
+        params["sidebar_header"],
+        params["sidebar_header_fontsize"],
+        params["sidebar_header_fontweight"],
     )
 
 
@@ -154,11 +217,11 @@ def add_about():
         </div>
         """
         % (
-            config["about_box_background_color"],
+            params["about_box_background_color"],
             today,
-            config["url_project_wiki"],
-            config["url_github_repo"],
-            config["url_data_science_wiki"],
+            params["url_project_wiki"],
+            params["url_github_repo"],
+            params["url_data_science_wiki"],
         ),
         unsafe_allow_html=True,
     )
@@ -169,7 +232,7 @@ def add_about():
 
     # Add data scientists and emails
     contacts_text = ""
-    for ds, email in config["data_scientists"].items():
+    for ds, email in params["data_scientists"].items():
         contacts_text += ds + (
             "<span style='float:right; margin-right: 3px;'>"
             "<a href='mailto:%s'>%s</a></span><br>" % (email, email)
@@ -192,6 +255,6 @@ def add_about():
             </p>
         </div>
         """
-        % (config["about_box_background_color"], contacts_text),
+        % (params["about_box_background_color"], contacts_text),
         unsafe_allow_html=True,
     )

app/src/utils_ee.py

@@ -3,7 +3,7 @@ import ee
 import streamlit as st
 from ee import oauth
 from google.oauth2 import service_account
-from src.utils_layout import is_app_on_streamlit
+from src.utils import is_app_on_streamlit
 
 
 @st.experimental_memo

setup.cfg

@@ -2,5 +2,6 @@
 extend-ignore =
     SFS301 # Allow f-strings
     T001 # Allow print statements
-    ISC001 # Allow for implictly concatenated string literals in one line
+    ISC001 # Allow implictly concatenated string literals in one line
     SFS101 # Allow percent operator in string
+    E266 # Allow more than one # for comments