feat: enhanced the visualization of plot theme & application theme

.streamlit/config.toml

@@ -5,21 +5,23 @@ developmentMode = false
 port = 8501 # should be same as configured in deployment repo
 
 [theme]
-
-# The preset Streamlit theme that your custom theme inherits from. One of "light" or "dark".
-# base =
+# Force light mode and prevent system defaults
+base = "light"
 
 # Primary accent color for interactive elements.
 primaryColor = "#29379b"
 
 # Background color for the main content area.
-# backgroundColor =
+backgroundColor = "#FFFFFF"
 
 # Background color used for the sidebar and most interactive widgets.
-# secondaryBackgroundColor =
+secondaryBackgroundColor = "#F0F2F6"
 
 # Color used for almost all text.
-# textColor =
+textColor = "#262730"
 
 # Font family for all text in the app, except code blocks. One of "sans serif", "serif", or "monospace".
-# font =
+# font =
+
+[browser]
+gatherUsageStats = false

environment.yml

@@ -2,17 +2,20 @@
 name: streamlit-env
 channels:
    - conda-forge
+   - bioconda
 dependencies:
    - python==3.11
    - plotly==5.22.0
    - pip==24.0
    - numpy==1.26.4 # pandas and numpy are dependencies of pyopenms, however, pyopenms needs numpy<=1.26.4
-   - mono==6.12.0.90
+   - pandas==2.2.1 # Adding pandas with specific version for better compatibility
+   - pytest==8.0.0 # Adding pytest for running tests
+
    - pip:
         # dependencies only available through pip
         # streamlit dependencies
         - streamlit>=1.38.0
         - captcha==0.5.0
+        - pyopenms==3.2.0
         - pyopenms_viz==1.0.0
         - streamlit-js-eval
-        - psutil==7.0.0

requirements.txt

@@ -8,4 +8,5 @@ plotly==5.22.0
 captcha==0.5.0
 pyopenms_viz==1.0.0
 streamlit-js-eval
-psutil==7.0.0
+pandas==2.2.1
+pytest==8.0.0

src/common/common.py

@@ -8,9 +8,38 @@
 from pathlib import Path
 from streamlit.components.v1 import html
 
+# Optional plotting package imports
+try:
+    import plotly.io as pio
+
+    PLOTLY_AVAILABLE = True
+except ImportError:
+    PLOTLY_AVAILABLE = False
+
+try:
+    import matplotlib.pyplot as plt
+
+    MPL_AVAILABLE = True
+except ImportError:
+    MPL_AVAILABLE = False
+
+try:
+    from bokeh.themes import Theme
+    from bokeh.io import curdoc
+
+    BOKEH_AVAILABLE = True
+except ImportError:
+    BOKEH_AVAILABLE = False
+
 import streamlit as st
 import pandas as pd
-import psutil
+
+try:
+    import psutil
+
+    PSUTIL_AVAILABLE = True
+except ImportError:
+    PSUTIL_AVAILABLE = False
 
 try:
     from tkinter import Tk, filedialog
@@ -27,6 +56,10 @@
 
 @st.fragment(run_every=5)
 def monitor_hardware():
+    if not PSUTIL_AVAILABLE:
+        st.warning("psutil package not installed. Resource monitoring is disabled.")
+        return
+
     cpu_progress = psutil.cpu_percent(interval=None) / 100
     ram_progress = 1 - psutil.virtual_memory().available / psutil.virtual_memory().total
 
@@ -370,13 +403,30 @@ def change_workspace():
 
         # All pages have settings, workflow indicator and logo
         with st.expander("⚙️ **Settings**"):
+            # Theme settings
+            st.markdown("## Theme Settings")
+            if "plot_theme" not in st.session_state:
+                st.session_state.plot_theme = "system"
+            theme_options = ["system", "light", "dark"]
+            st.selectbox(
+                "Plot Theme",
+                theme_options,
+                index=theme_options.index(st.session_state.plot_theme),
+                key="plot_theme",
+                help="Choose plot theme: 'system' follows Streamlit's theme, 'light' or 'dark' forces that theme",
+            )
+
+            # Image format settings
+            st.markdown("## Export Settings")
             img_formats = ["svg", "png", "jpeg", "webp"]
             st.selectbox(
                 "image export format",
                 img_formats,
                 img_formats.index(params["image-format"]),
                 key="image-format",
             )
+
+            # Spectrum plotting settings
             st.markdown("## Spectrum Plotting")
             st.selectbox("Bin Peaks", ["auto", True, False], key="spectrum_bin_peaks")
             if st.session_state["spectrum_bin_peaks"] == True:
@@ -514,6 +564,149 @@ def show_table(df: pd.DataFrame, download_name: str = "") -> None:
     return df
 
 
+def configure_plot_theme():
+    """Configure plot themes based on Streamlit's theme."""
+    # Get the current theme based on user preference or system setting
+    if st.session_state.plot_theme == "system":
+        theme_mode = "light" if st.get_option("theme.base") == "light" else "dark"
+    else:
+        theme_mode = st.session_state.plot_theme
+
+    if MPL_AVAILABLE:
+        if theme_mode == "light":
+            plt.style.use("default")  # Reset to default style
+            plt.rcParams.update(
+                {
+                    # Figure
+                    "figure.facecolor": "white",
+                    "figure.edgecolor": "white",
+                    # Axes
+                    "axes.facecolor": "white",
+                    "axes.edgecolor": "black",
+                    "axes.labelcolor": "black",
+                    "axes.prop_cycle": plt.cycler(
+                        "color",
+                        [
+                            "#1f77b4",
+                            "#ff7f0e",
+                            "#2ca02c",
+                            "#d62728",
+                            "#9467bd",
+                            "#8c564b",
+                            "#e377c2",
+                            "#7f7f7f",
+                            "#bcbd22",
+                            "#17becf",
+                        ],
+                    ),
+                    # Grid
+                    "grid.color": "lightgray",
+                    "grid.linestyle": "--",
+                    "grid.alpha": 0.5,
+                    # Ticks
+                    "xtick.color": "black",
+                    "ytick.color": "black",
+                    # Text
+                    "text.color": "black",
+                }
+            )
+        else:
+            plt.style.use("dark_background")
+            plt.rcParams.update(
+                {
+                    # Figure
+                    "figure.facecolor": "#0E1117",
+                    "figure.edgecolor": "#0E1117",
+                    # Axes
+                    "axes.facecolor": "#0E1117",
+                    "axes.edgecolor": "#FFFFFF",  # Brighter white for better contrast
+                    "axes.labelcolor": "#FFFFFF",  # Brighter white for better contrast
+                    "axes.prop_cycle": plt.cycler(
+                        "color",
+                        [
+                            "#00B5F7",  # Brighter blue
+                            "#FF9E44",  # Brighter orange
+                            "#4DFA6F",  # Brighter green
+                            "#FF4B4B",  # Brighter red
+                            "#C78FFF",  # Brighter purple
+                            "#FF8F8F",  # Brighter brown
+                            "#FF70D2",  # Brighter pink
+                            "#E0E0E0",  # Brighter gray
+                            "#EBEF53",  # Brighter yellow
+                            "#24E7E7",  # Brighter cyan
+                        ],
+                    ),
+                    # Grid
+                    "grid.color": "#555555",  # Slightly brighter grid for better visibility
+                    "grid.linestyle": "--",
+                    "grid.alpha": 0.6,  # Increased alpha for better visibility
+                    # Ticks
+                    "xtick.color": "#FFFFFF",  # Brighter white for better contrast
+                    "ytick.color": "#FFFFFF",  # Brighter white for better contrast
+                    # Text
+                    "text.color": "#FFFFFF",  # Brighter white for better contrast
+                }
+            )
+
+    if PLOTLY_AVAILABLE:
+        # Configure plotly with theme
+        pio.templates.default = (
+            "plotly_white" if theme_mode == "light" else "plotly_dark"
+        )
+
+    if BOKEH_AVAILABLE:
+        # Configure bokeh with theme
+        if theme_mode == "light":
+            bokeh_theme = {
+                "attrs": {
+                    "figure": {
+                        "background_fill_color": "#ffffff",
+                        "border_fill_color": "#ffffff",
+                        "outline_line_color": "#000000",
+                    },
+                    "Axis": {
+                        "axis_line_color": "#000000",
+                        "axis_label_text_color": "#000000",
+                        "major_label_text_color": "#000000",
+                        "major_tick_line_color": "#000000",
+                        "minor_tick_line_color": "#000000",
+                    },
+                    "Grid": {
+                        "grid_line_color": "#e0e0e0",
+                        "grid_line_dash": [6, 4],
+                        "grid_line_alpha": 0.3,
+                    },
+                    "Title": {"text_color": "#000000"},
+                }
+            }
+        else:
+            bokeh_theme = {
+                "attrs": {
+                    "figure": {
+                        "background_fill_color": "#0E1117",
+                        "border_fill_color": "#0E1117",
+                        "outline_line_color": "#FFFFFF",  # Brighter white for better contrast
+                    },
+                    "Axis": {
+                        "axis_line_color": "#FFFFFF",  # Brighter white for better contrast
+                        "axis_label_text_color": "#FFFFFF",  # Brighter white for better contrast
+                        "major_label_text_color": "#FFFFFF",  # Brighter white for better contrast
+                        "major_tick_line_color": "#FFFFFF",  # Brighter white for better contrast
+                        "minor_tick_line_color": "#FFFFFF",  # Brighter white for better contrast
+                    },
+                    "Grid": {
+                        "grid_line_color": "#555555",  # Slightly brighter grid
+                        "grid_line_dash": [6, 4],
+                        "grid_line_alpha": 0.4,  # Increased alpha for better visibility
+                    },
+                    "Title": {
+                        "text_color": "#FFFFFF"  # Brighter white for better contrast
+                    },
+                }
+            }
+        curdoc().theme = Theme(json=bokeh_theme)
+
+
 def show_fig(
     fig,
     download_name: str,
@@ -532,6 +725,70 @@ def show_fig(
     Returns:
         None
     """
+    # Configure plot theme before displaying
+    configure_plot_theme()
+
+    # Get current theme based on user preference or system setting
+    if st.session_state.plot_theme == "system":
+        theme_mode = "light" if st.get_option("theme.base") == "light" else "dark"
+    else:
+        theme_mode = st.session_state.plot_theme
+
+    # Update Plotly figure layout based on theme
+    if hasattr(fig, "update_layout"):
+        if theme_mode == "light":
+            fig.update_layout(
+                paper_bgcolor="white",
+                plot_bgcolor="white",
+                font_color="black",
+                xaxis=dict(
+                    gridcolor="lightgray",
+                    gridwidth=1,
+                    griddash="dash",
+                    linecolor="black",
+                    linewidth=1,
+                    ticks="outside",
+                    tickfont=dict(color="black"),
+                ),
+                yaxis=dict(
+                    gridcolor="lightgray",
+                    gridwidth=1,
+                    griddash="dash",
+                    linecolor="black",
+                    linewidth=1,
+                    ticks="outside",
+                    tickfont=dict(color="black"),
+                ),
+            )
+        else:
+            fig.update_layout(
+                paper_bgcolor="#0E1117",
+                plot_bgcolor="#0E1117",
+                font_color="#FFFFFF",  # Brighter white for better contrast
+                xaxis=dict(
+                    gridcolor="#555555",  # Slightly brighter grid
+                    gridwidth=1,
+                    griddash="dash",
+                    linecolor="#FFFFFF",  # Brighter white for better contrast
+                    linewidth=1,
+                    ticks="outside",
+                    tickfont=dict(
+                        color="#FFFFFF"
+                    ),  # Brighter white for better contrast
+                ),
+                yaxis=dict(
+                    gridcolor="#555555",  # Slightly brighter grid
+                    gridwidth=1,
+                    griddash="dash",
+                    linecolor="#FFFFFF",  # Brighter white for better contrast
+                    linewidth=1,
+                    ticks="outside",
+                    tickfont=dict(
+                        color="#FFFFFF"
+                    ),  # Brighter white for better contrast
+                ),
+            )
+
     if not selection_session_state_key:
         st.plotly_chart(
             fig,