Re-designed UI

app.py

@@ -1,10 +1,38 @@
 import streamlit as st
 import logging
+import numpy as np
+import os
 
 # Configure Logging
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
+    
+# Page configuration
+sidebar_state = "expanded"
+st.set_page_config(
+    page_title="spMetaTME-Atlas",
+    page_icon=":material/hub:",
+    layout="wide",
+    initial_sidebar_state=sidebar_state,
+)
+
+
+# Import UI Components and Pages
+from src.ui.components.header import render_header, load_css
+from src.ui.components.footer import render_footer
+
+from src.ui.pages.home import show_overview
+from src.ui.pages.analyze import (
+    page_domain_statistics,
+    page_spatial_flux,
+    page_umap_analysis,
+    page_differential_analysis,
+    page_metabolic_interactions,
+    page_metabolite_balance,
+    page_reset
+)
+
 def init_session_state():
     """Initialise global session state."""
     if "adata" not in st.session_state:
@@ -34,6 +62,53 @@ def init_session_state():
     if "dev_mode" not in st.session_state:
         st.session_state.dev_mode = True
 
+def render_analyze_header():
+    """Display a centered, premium branding header with the white ASCII logo prominently featured."""
+    try:
+        brand_data = np.load("assets/spMetaTME_brand.npy", allow_pickle=True)
+        brand_text = str(brand_data)
+        
+        # We'll use the full brand text including the separators for a professional "terminal" look
+        # User requested center alignment and white font color for the logo.
+
+        subtitle = "A comprehensive atlas for spatial metabolic enrichment and interaction analysis within the Tumor Microenvironment (TME)."
+        # f'<h1 style="margin: 0; font-size: 2.0rem; font-weight: 800; color: white; letter-spacing: -1px; text-shadow: 0 2px 10px rgba(0,0,0,0.2);">'
+        #     f'spMetaTME-Atlas Explorer'
+        #     f'</h1>'
+        # We use a compact HTML string to ensure Streamlit doesn't break the rendering
+        header_html = (
+            f'<div style="'
+            f'background: linear-gradient(135deg, #d32f2f 0%, #6a1b9a 100%), radial-gradient(circle at 2px 2px, rgba(255,255,255,0.05) 1px, transparent 0);'
+            f'background-size: 100% 100%, 25px 25px;'
+            f'border-radius: 20px;'
+            f'margin-bottom: 2rem;'
+            f'color: white;'
+            f'position: relative;'
+            f'overflow: hidden;'
+            f'box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);'
+            f'border: 1px solid rgba(255, 255, 255, 0.1);'
+            f'text-align: center;'
+            f'">'
+            f'<div style="'
+            f'font-family: \'Courier New\', monospace;'
+            f'font-size: 12px;'
+            f'font-weight: 800;'
+            f'line-height: 1.1;'
+            f'white-space: pre;'
+            f'color: white;'
+            f'margin: 1rem 0;'
+            f'display: inline-block;'
+            f'text-align: left;'
+            f'filter: drop-shadow(0 0 1px white);'
+            f'">{brand_text}</div>'
+            f'<p style="font-size: 1.1rem; line-height: 1.4; opacity: 0.95; max-width: 800px; margin: 0 auto; font-weight: 400; color: #ffebee;">{subtitle}</p>'
+            f'</div>'
+        )
+        
+        st.markdown(header_html, unsafe_allow_html=True)
+    except Exception as e:
+        logger.error(f"Failed to load branding header: {e}")
+
 def render_sidebar_dev():
     """Developer shortcuts in sidebar."""
     with st.sidebar:
@@ -44,7 +119,6 @@ def render_sidebar_dev():
             st.info("Dev Shortcuts Active")
             if st.button("Load Breast Cancer Block A", use_container_width=True):
                 with st.spinner("Loading example data..."):
-                    # Clear interaction cache for new tissue
                     for key in ['interaction_scores', 'interaction_type']:
                         if key in st.session_state:
                             del st.session_state[key]
@@ -53,66 +127,55 @@ def render_sidebar_dev():
                     if adata is not None:
                         st.session_state.metabolic_adata = adata
                         st.session_state.data_type = "metabolic"
-                        # Set metadata if missing
+                        st.session_state.just_loaded = True
                         if 'domain' not in adata.obs.columns and 'domain_id' in adata.obs.columns:
                             adata.obs['domain'] = adata.obs['domain_id']
-                        st.success("Loaded Breast Cancer Block A (HF local cache)")
+                        st.success("Loaded Breast Cancer Block A")
                         st.rerun()
 
-# Import UI Components and Pages (after session state init)
-from src.ui.components.header import render_header, load_css
-from src.ui.components.footer import render_footer
-
-from src.ui.pages.overview import show_overview
-from src.ui.pages.visualization import show_visualization
-from src.ui.pages.preprocessing import show_preprocessing
-from src.ui.pages.flux_analysis import show_flux_analysis
-
 def main():
-    load_css()
+    # Initial setup
     init_session_state()
+    load_css()
+
+    # Define available page objects
+    home_page = st.Page(show_overview, title="Home", icon=":material/home:", url_path="home")
+    domain_stats_page = st.Page(page_domain_statistics, title="Domain Statistics", icon=":material/pie_chart:", url_path="domain_stats")
     
-    # Determine which page will be shown
-    if st.session_state.metabolic_adata is not None:
-        current_page = "visualization"
-    elif st.session_state.adata is not None:
-        if st.session_state.preprocessing_done:
-            current_page = "flux_analysis"
-        else:
-            current_page = "preprocessing"
-    else:
-        current_page = "overview"
-    
-    # # Set page layout based on current page
-    # if current_page == "overview":
-    #     layout = "wide"  
-    # else:
-    #     layout = "centered"
-    
-    layout = "wide"  
-    # Configure page with appropriate layout
-    st.set_page_config(
-        page_title="spMetaTME Atlas",
-        page_icon=":material/hub:",
-        layout=layout,
-        initial_sidebar_state="expanded",
-    )
-    
-    # render_sidebar_dev()
+    analysis_pages = [
+        st.Page(page_reset, title="Back to Home", icon=":material/home:", url_path="reset_to_home"),
+        domain_stats_page,
+        st.Page(page_spatial_flux, title="Spatial Flux Distribution", icon=":material/image:", url_path="spatial_flux"),
+        st.Page(page_umap_analysis, title="UMAP Analysis", icon=":material/palette:", url_path="umap_analysis"),
+        st.Page(page_differential_analysis, title="Differential Reactions", icon=":material/bar_chart:", url_path="differential_analysis"),
+        st.Page(page_metabolic_interactions, title="Spatial Metabolic Interactions", icon=":material/link:", url_path="metabolic_interactions"),
+        st.Page(page_metabolite_balance, title="Metabolite Balance Analysis", icon=":material/opacity:", url_path="metabolite_balance"),
+    ]
     
-    # Render the appropriate page
-    if current_page == "visualization":
-        show_visualization()
-    elif current_page == "preprocessing":
-        show_preprocessing()
-    elif current_page == "flux_analysis":
-        show_flux_analysis()
-    else:
+    if st.session_state.metabolic_adata is None:
+        pg = st.navigation([home_page], position="hidden")
         render_header()
-        show_overview()
-    
-    render_footer()
+        render_sidebar_dev()
+        pg.run()
+    else:
+        # Setup Navigation
+        pg = st.navigation({"Metabolic Analysis": analysis_pages}, position="sidebar")
+        
+        # Render Premium Header
+        render_analyze_header()
+        
+        # Developer Shortcuts
+        render_sidebar_dev()
+        
+        # Handle first-time entry to analysis
+        if st.session_state.get('just_loaded', False):
+            st.session_state.just_loaded = False
+            st.switch_page(domain_stats_page)
+        
+        pg.run()
 
+    # Shared Footer
+    render_footer()
 
 if __name__ == "__main__":
     main()

assets/spMetaTME_brand.npy

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:34d2cc7a52615215df5d42145fbd1826908f5cfc3a9dd0d04e46b02d16184611
+size 2756

assets/style.css

@@ -21,7 +21,7 @@
 
 /* Main Header */
 .main-header {
-    font-size: 2.5rem;
+    font-size: 1.5rem;
     color: var(--primary-red);
     margin-bottom: 1.5rem;
     font-weight: 700;
@@ -135,6 +135,7 @@ section[data-testid="stSidebar"] {
     margin: 1.5rem 0;
     border: 1px solid #f0f4f8;
 }
+
 /* Fix flickering on HuggingFace Spaces with stable selector */
 /* @media (min-width: calc(736px + 8rem)) {
     section[data-testid="stMain"] {
@@ -147,4 +148,4 @@ section[data-testid="stSidebar"] {
 /* div[data-testid="stMainBlockContainer"] {
     max-width: 75% !important;
     margin: 0 auto !important;
-} */
+} */

requirements.txt

@@ -1,6 +1,5 @@
 # Core dependencies
 streamlit>=1.31.0
-streamlit-option-menu
 huggingface_hub
 datasets
 

src/backend/flux_analysis.py

@@ -1,40 +0,0 @@
-import logging
-import numpy as np
-
-logger = logging.getLogger(__name__)
-
-def run_smt_inference(adata, model_name, K, batch_size, n_clusters, clustering_method, use_pretrained=True, fine_tune=True, n_epochs=10):
-    """
-    Backend logic for running SpMetaTME inference.
-    """
-    try:
-        from spmetatme.train import SpMetaTME
-        from spmetatme.data.dataloader import MetabolicDataLoader
-        from spmetatme.data.metabolic_model import get_model_path
-    except ImportError:
-        logger.error("spMetaTME package not found")
-        raise ImportError("spMetaTME package not found. Install with: pip install spmetatme")
-
-    metabolic_path = get_model_path(model_name)
-    data_loader = MetabolicDataLoader(
-        adata,
-        metabolic_model_path=metabolic_path,
-        k=K,
-        batch_size=batch_size,
-        preprocess=False
-    )
-    
-    smt = SpMetaTME()
-    if use_pretrained:
-        smt.load_pretrained_model("Surajv/spMetaTME-human_64D_v1")
-    
-    if fine_tune:
-        smt.fine_tune(data_loader, epochs=n_epochs)
-    
-    metabolic_adata = smt.infer_flux(
-        data_loader,
-        n_clusters=n_clusters,
-        method=clustering_method
-    )
-    
-    return metabolic_adata

src/backend/preprocessing.py

@@ -1,43 +0,0 @@
-import scanpy as sc
-import logging
-
-logger = logging.getLogger(__name__)
-
-def run_preprocessing_pipeline(adata, 
-                             filter_cells_qc=False, min_counts=1000, min_genes=500,
-                             filter_genes_qc=False, min_cells=10,
-                             mt_filter=False,
-                             normalize=True, target_sum=1e4,
-                             log_transform=True,
-                             hvg_selection=False, n_hvg=2000):
-    """
-    Pure backend logic for preprocessing.
-    """
-    adata_processed = adata.copy()
-    
-    if filter_cells_qc:
-        sc.pp.calculate_qc_metrics(adata_processed, inplace=True)
-        adata_processed = adata_processed[
-            (adata_processed.obs['total_counts'] >= min_counts) &
-            (adata_processed.obs['n_genes_by_counts'] >= min_genes)
-        ]
-    
-    if filter_genes_qc:
-        sc.pp.filter_genes(adata_processed, min_cells=min_cells)
-    
-    if mt_filter:
-        adata_processed = adata_processed[
-            :, ~adata_processed.var_names.str.startswith(('MT-', 'mt-', 'MTRNR', 'mtrnr'))
-        ]
-    
-    if normalize:
-        sc.pp.normalize_total(adata_processed, target_sum=target_sum, inplace=True)
-    
-    if log_transform:
-        sc.pp.log1p(adata_processed)
-    
-    if hvg_selection:
-        sc.pp.highly_variable_genes(adata_processed, n_top_genes=n_hvg, inplace=True)
-        adata_processed = adata_processed[:, adata_processed.var['highly_variable']]
-        
-    return adata_processed

src/ui/components/header.py

@@ -8,66 +8,53 @@ def get_base64_of_bin_file(bin_file):
     return base64.b64encode(data).decode()
 
 def render_header():
-    """Render application header with Logo and Introduction side-by-side in a card."""
+    """Render a professional, clean application header with a modern typography-first layout."""
     logo_path = "assets/Logo.png"
     
-    if os.path.exists(logo_path):
-        logo_base64 = get_base64_of_bin_file(logo_path)
-        logo_html = f"data:image/png;base64,{logo_base64}"
-        
-        st.markdown(f"""
-        <div style="display: flex; align-items: center; gap: 0.5rem; padding: 2.5rem; margin-bottom: 2.5rem; border-left: 6px solid #d32f2f; background: #ffffff; border-radius: 12px; border: 1px solid #e0e0e0; border-left: 6px solid #d32f2f;">
-            <div style="flex: 1; display: flex; justify-content: center; align-items: center;">
-                <img src="{logo_html}" style="max-width: 100%; height: auto; max-height: 300px; border-radius: 8px;">
-            </div>
-            <div style="flex: 2;">
-                <h1 style='color: #d32f2f; margin: 0 0 0.5rem 0; font-size: 3rem; font-weight: 800; line-height: 1; text-align: center;'>spMetaTME-Atlas</h1>
-                <p style="font-size: 1.3rem; color: #333; font-weight: 600; margin-bottom: 1.2rem; line-height: 1.3;">
-                    A spatial atlas of tumour microenvironment metabolism and metabolic interactions inferred by a pretrained self-supervised metabolic hypergraph
-                </p>
-                <div style="color: #555; font-size: 1.1rem; line-height: 1.6; text-align: justify;">
-                    Unlike traditional flux estimation approaches, <b>spMetaTME</b> represents the metabolic network as a directed hypergraph, where metabolites are 
-                    represented as nodes and reactions as hyperedges, enabling the modelling of directional reactant-to-product flux propagation. By leveraging 
-                    self-supervised hypergraph learning, <b>spMetaTME</b> captures the intrinsic metabolic dependencies and directional flux propagation across spatially 
-                    adjacent cells or spots. Leveraging pretrained spMetaTME, we introduce spMetaTME-Atlas, a comprehensive atlas of spatial metabolic data to cover metabolic
-                    reprogramming in the tumour microenvironment and metabolic interactions.
-                </div>
-            </div>
-        </div>
-        """, unsafe_allow_html=True)
-    else:
-        # Fallback if logo is missing
+    st.markdown(f"""
+    <div style="text-align: center; margin-top: 1rem; margin-bottom: 2.5rem;">
+        <h1 style='color: #d32f2f; font-size: 3.0rem; font-weight: 700; margin-bottom: 0.3rem; letter-spacing: -1.5px;'>spMetaTME-Atlas</h1>
+        <p style="font-size: 2.0rem; color: #1a1a1a; font-weight: 600; max-width: 850px; margin: 0 auto; line-height: 1.2;">
+            A spatial atlas of tumour microenvironment metabolism and metabolic interactions inferred by a pretrained self-supervised metabolic hypergraph
+        </p>
+        <div style="height: 3px; width: 60px; background: #d32f2f; margin: 1.5rem auto; border-radius: 2px;"></div>
+    </div>
+    """, unsafe_allow_html=True)
+
+    col1, col2 = st.columns([0.7, 1.3], gap="large")
+    
+    with col1:
+        if os.path.exists(logo_path):
+            st.image(logo_path, use_container_width=True)
+        else:
+            st.info("Technical Diagram Space")
+
+    with col2:
         st.markdown("""
-        <div style="padding: 2.5rem; margin-bottom: 2.5rem; border-radius: 12px; border: 1px solid #e0e0e0; border-left: 6px solid #d32f2f; background: #ffffff;">
-            <h1 class='main-header' style='font-size: 3.5rem; margin-bottom: 0.5rem; text-align: center;'>spMetaTME-Atlas</h1>
-            <p style="font-size: 1.5rem; color: #333; font-weight: 600; line-height: 1.3;">
-                A spatial atlas of tumour microenvironment metabolism and metabolic interactions inferred by a pretrained self-supervised metabolic hypergraph
-            </p>
-            <div style="color: #444; font-size: 1.15rem; line-height: 1.8; margin-top: 1.5rem; text-align: justify;">
-                Unlike traditional flux estimation approaches, <b>spMetaTME</b> represents the metabolic network as a directed 
-                hypergraph, where metabolites are represented as nodes and reactions as hyperedges, enabling the modelling of 
-                directional reactant-to-product flux propagation. By leveraging self-supervised hypergraph learning, <b>spMetaTME</b> 
-                captures the intrinsic metabolic dependencies and directional flux propagation across spatially adjacent cells or spots.
-            </div>
+        <div style="color: #374151; font-size: 1.rem; line-height: 1.8; text-align: justify; padding-top: 0.5rem;">
+            Unlike traditional flux estimation approaches, <span style="color: #d32f2f; font-weight: 700;">spMetaTME</span> represents the metabolic network as a 
+            <b>directed hypergraph</b>, where metabolites are represented as nodes and reactions as hyperedges, enabling the modelling of directional reactant-to-product flux propagation.
+            <br><br>
+            By leveraging self-supervised hypergraph learning, <b>spMetaTME</b> captures the intrinsic metabolic dependencies and directional flux propagation across spatially adjacent cells or spots. 
+            We introduce <b>spMetaTME-Atlas</b>, a comprehensive resource of spatial metabolic data designed to uncover metabolic reprogramming and complex metabolic interactions within the TME.
         </div>
         """, unsafe_allow_html=True)
+    
+    st.markdown("<div style='margin-bottom: 4rem;'></div>", unsafe_allow_html=True)
 
 @st.cache_resource(show_spinner=False)
 def load_css():
     """Load and apply CSS - cached to prevent reloading on every rerun."""
-    # Load custom CSS file
     css_path = "assets/style.css"
     css_content = ""
     if os.path.exists(css_path):
         with open(css_path) as f:
             css_content = f.read()
     
-    # Load external assets
     st.markdown("""
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     """, unsafe_allow_html=True)
     
-    # Apply custom CSS
     if css_content:
         st.markdown(f"<style>{css_content}</style>", unsafe_allow_html=True)

src/ui/pages/{visualization.py → analyze.py}

@@ -1,5 +1,4 @@
 import streamlit as st
-from streamlit_option_menu import option_menu
 import matplotlib.pyplot as plt
 from src.ui.plots.domain_statistics import render_domain_statistics
 from src.ui.plots.spatial_flux_map import render_spatial_flux_map
@@ -23,71 +22,47 @@ def _clear_plot_cache():
                 pass
 
 
-def show_visualization():
-    """Visualization module coordinator."""
+def _check_data():
+    """Verify data is loaded before rendering."""
     if st.session_state.metabolic_adata is None:
         st.error("No flux data available. Please load data first.")
-        return
+        st.stop()
     
     metabolic_adata = st.session_state.metabolic_adata
     if not metabolic_adata.var_names.is_unique:
         metabolic_adata.var_names_make_unique()
-    
-    viz_options = [
-        "Home",
-        "Domain Statistics", 
-        "Spatial Flux Distribution", 
-        "UMAP Analysis", 
-        "Differential Analysis",
-        "Metabolic Interactions",
-        "Metabolite Balance Analysis",
-    ]
-    viz_icons = [
-        "house",
-        "pie-chart", 
-        "bi-image-fill", 
-        "bi-palette2",
-        "bi-bar-chart-steps",
-        "bi-link",
-        "bi-droplet-fill",
-    ]
-    
-    with st.sidebar:
-        selected_viz = option_menu(
-            "Metabolic Analysis",
-            viz_options,
-            icons=viz_icons,
-            menu_icon="vial",
-            default_index=1,
-            key="viz_menu"
-        )
+    return metabolic_adata
 
-    # Initialize last selected visualization tracking
-    if "last_selected_viz" not in st.session_state:
-        st.session_state.last_selected_viz = selected_viz
-    
-    # Detect visualization change and clear cache
-    if selected_viz != st.session_state.last_selected_viz:
-        st.session_state.last_selected_viz = selected_viz
-        _clear_plot_cache()
+def page_domain_statistics():
+    adata = _check_data()
+    render_domain_statistics(adata)
+
+def page_spatial_flux():
+    adata = _check_data()
+    render_spatial_flux_map(adata)
+
+def page_metabolite_balance():
+    adata = _check_data()
+    render_metabolite_balance_analysis(adata)
+
+def page_umap_analysis():
+    adata = _check_data()
+    render_umap_embedding(adata)
+
+def page_differential_analysis():
+    adata = _check_data()
+    render_differential_reactions(adata)
 
-    # Handle Home navigation
-    if selected_viz == "Home":
-        st.session_state.metabolic_adata = None
-        st.session_state.data_type = None
-        st.rerun()
+def page_metabolic_interactions():
+    adata = _check_data()
+    render_metabolic_interactions(adata)
 
-    # Main content rendering
-    if selected_viz == "Domain Statistics":
-        render_domain_statistics(metabolic_adata)
-    elif selected_viz == "Spatial Flux Distribution":
-        render_spatial_flux_map(metabolic_adata)
-    elif selected_viz == "Metabolite Balance Analysis":
-        render_metabolite_balance_analysis(metabolic_adata)
-    elif selected_viz == "UMAP Analysis":
-        render_umap_embedding(metabolic_adata)
-    elif selected_viz == "Differential Analysis":
-        render_differential_reactions(metabolic_adata)
-    elif selected_viz == "Metabolic Interactions":
-        render_metabolic_interactions(metabolic_adata)
+def page_reset():
+    """Reset session state and return to overview."""
+    st.session_state.metabolic_adata = None
+    st.session_state.adata = None
+    st.session_state.data_type = None
+    st.session_state.preprocessing_done = False
+    st.session_state.flux_analysis_done = False
+    st.rerun()
 

src/ui/pages/flux_analysis.py

@@ -1,31 +0,0 @@
-import streamlit as st
-from src.backend.flux_analysis import run_smt_inference
-
-def show_flux_analysis():
-    """Render flux analysis UI."""
-    st.markdown("## <i class='fas fa-flask-vial' style='color:#d32f2f'></i> Metabolic Flux Analysis", unsafe_allow_html=True)
-    
-    if st.session_state.adata is None:
-        st.error("Please preprocess data first.")
-        return
-
-    col1, col2 = st.columns(2)
-    with col1:
-        model = st.selectbox("<i class='fas fa-microscope'></i> Model:", ["breast_cancer", "pan_cancer"], help="Select the pre-trained spMetaTME model type.")
-        K = st.number_input("K neighbors", value=150, help="Number of neighbors for spatial graph construction.")
-    with col2:
-        n_clusters = st.number_input("Domains", value=5, help="Number of clusters (metabolic domains) to identify.")
-        clustering = st.selectbox("Method", ["kmeans", "leiden"], help="Clustering algorithm for domain identification.")
-
-    if st.button("Run Analysis", key="run_flux", icon=":material/rocket_launch:"):
-        with st.spinner("Running spMetaTME (this may take 5-30 mins)..."):
-            try:
-                metabolic_adata = run_smt_inference(
-                    st.session_state.adata, model, K, 80, n_clusters, clustering
-                )
-                st.session_state.metabolic_adata = metabolic_adata
-                st.session_state.flux_analysis_done = True
-                st.success("Analysis completed!")
-                st.rerun()
-            except Exception as e:
-                st.error(f"Error: {e}")

src/ui/pages/{overview.py → home.py}

@@ -79,14 +79,34 @@ def render_available_datasets():
     meta_df = get_metadata()
     if meta_df.empty: return
 
-    # Filter sidebar style layout inside page
-    # with st.expander("Filter Results", expanded=False, icon=":material/filter_list:"):
-    c1, c2, c3 = st.columns(3)
-    selected_species = c1.multiselect("Species", options=sorted(meta_df['species'].unique()), help="Filter datasets by species.")
-    selected_organ = c2.multiselect("Organ", options=sorted(meta_df['organ'].unique()), help="Filter datasets by organ.")
-    datasets_per_page = c3.selectbox("Show", options=[10, 20, 50], index=0, help="Number of datasets to show per page.")
+    # Filter layout - Compact single line
+    c1, c2, c3, c4 = st.columns([1.5, 1, 1, 0.5], gap="small")
+    
+    with c1:
+        search_query = st.text_input("Search Atlas", placeholder="Search by Dataset, ID...", help="Enter text to search across atlas.")
+    with c2:
+        selected_species = st.multiselect("Species", options=sorted(meta_df['species'].unique()))
+    with c3:
+        selected_organ = st.multiselect("Organ", options=sorted(meta_df['organ'].unique()))
+    with c4:
+        datasets_per_page = st.selectbox("Show", options=[10, 20, 50], index=0)
+    
     st.markdown("---")
+    
     filtered_df = meta_df.copy()
+    
+    # Text Search Filtering
+    if search_query:
+        q = search_query.lower()
+        search_mask = (
+            filtered_df['dataset_title'].str.lower().str.contains(q, na=False) |
+            filtered_df['id'].str.lower().str.contains(q, na=False) |
+            filtered_df['organ'].str.lower().str.contains(q, na=False) |
+            filtered_df['species'].str.lower().str.contains(q, na=False)
+        )
+        filtered_df = filtered_df[search_mask]
+
+    # Dropdown Filtering
     if selected_species: filtered_df = filtered_df[filtered_df['species'].isin(selected_species)]
     if selected_organ: filtered_df = filtered_df[filtered_df['organ'].isin(selected_organ)]
 
@@ -169,6 +189,7 @@ def render_available_datasets():
                             if adata:
                                 st.session_state.metabolic_adata = adata
                                 st.session_state.data_type = "flux"
+                                st.session_state.just_loaded = True
                                 # Clear interaction cache for new tissue
                                 for key in ['interaction_scores', 'interaction_type']:
                                     if key in st.session_state:
@@ -197,6 +218,7 @@ def render_upload_fluxes():
         if adata:
             st.session_state.metabolic_adata = adata
             st.session_state.data_type = "flux"
+            st.session_state.just_loaded = True
             for key in ['interaction_scores', 'interaction_type']:
                 if key in st.session_state:
                     del st.session_state[key]

src/ui/pages/preprocessing.py

@@ -1,41 +0,0 @@
-import streamlit as st
-from src.backend.preprocessing import run_preprocessing_pipeline
-
-def show_preprocessing():
-    """Render preprocessing UI."""
-    st.markdown("## <i class='fas fa-screwdriver-wrench' style='color:#d32f2f'></i> Data Preprocessing", unsafe_allow_html=True)
-    
-    if st.session_state.adata is None:
-        st.error("Please upload data first.")
-        return
-
-    adata = st.session_state.adata
-    
-    col1, col2 = st.columns(2)
-    with col1:
-        st.markdown("#### <i class='fas fa-filter'></i> Filtering Options", unsafe_allow_html=True)
-        filter_cells = st.checkbox("Filter cells by quality", value=False)
-        min_counts = st.number_input("Min counts", value=1000, help="Minimum library size (total counts) per cell.") if filter_cells else 1000
-        min_genes = st.number_input("Min genes", value=500, help="Minimum number of genes detected per cell.") if filter_cells else 500
-        
-    with col2:
-        st.markdown("#### <i class='fas fa-wand-magic-sparkles'></i> Normalization", unsafe_allow_html=True)
-        normalize = st.checkbox("Normalize library size", value=True)
-        log_transform = st.checkbox("Log transform", value=True)
-
-    if st.button("Run Preprocessing", key="run_pre", icon=":material/play_arrow:"):
-        with st.spinner("Processing..."):
-            processed = run_preprocessing_pipeline(
-                adata, 
-                filter_cells_qc=filter_cells, min_counts=min_counts, min_genes=min_genes,
-                normalize=normalize, log_transform=log_transform
-            )
-            st.session_state.adata = processed
-            st.session_state.preprocessing_done = True
-            st.success("Preprocessing completed!")
-            st.rerun()
-
-    if st.session_state.preprocessing_done:
-        if st.button("Proceed to Analysis", icon=":material/arrow_forward:"):
-            # Redirect logic
-            st.rerun()

src/ui/plots/domain_statistics.py

@@ -12,7 +12,6 @@ from src.backend.flux_distribution import adata_to_long_df, p_to_star
 
 def render_domain_statistics(metabolic_adata):
     """Render domain-level statistics and flux distribution."""
-    # Clear matplotlib figures to prevent flickering on page transitions
     plt.close('all')
     
     st.markdown(
@@ -28,7 +27,6 @@ def render_domain_statistics(metabolic_adata):
     _render_metabolic_metadata(metabolic_adata)
     st.markdown("---")
 
-    # Three-column layout for Domain-level overview
     c1, c2, c3 = st.columns(3, gap="small")
 
     with c1:
@@ -107,7 +105,7 @@ def render_domain_statistics(metabolic_adata):
                 display_plot_with_download(
                     fig, 
                     "moranI_kde",
-                    help_text="Moran's I measures the degree of spatial clustering in flux values. A positive value indicates that similar flux levels are geographically clustered, while values near zero suggest a random distribution. This helps confirm that metabolic patterns are spatially organized."
+                    help_text="Moran's I measures the degree of spatial clustering in flux values. A positive value indicates that similar flux levels are spatially clustered, while values near zero suggest a random distribution. This helps confirm that metabolic patterns are spatially organized."
                 )
 
                 plt.close(fig)
@@ -119,7 +117,6 @@ def render_domain_statistics(metabolic_adata):
     st.markdown("---")
 
     st.markdown("<div style='font-size: 1.2rem; font-weight: 600; color: #d32f2f; margin-bottom: 1rem;'><i class='fas fa-box-open'></i> Flux Distribution Across Domains</div>", unsafe_allow_html=True)
-    # Horizontal controls for Flux Distribution
     col_ctrl1, col_ctrl2 = st.columns([1, 2])
     
     with col_ctrl1:
@@ -134,7 +131,6 @@ def render_domain_statistics(metabolic_adata):
     with col_ctrl2:
         if view_mode == "Reactions":
             if 'rxn_full_names' in metabolic_adata.var.columns:
-                # Map full name to ID for user selection
                 unique_names = {}
                 for idx, row in metabolic_adata.var.iterrows():
                     f_name = str(row['rxn_full_names'])
@@ -188,7 +184,6 @@ def _render_metabolic_metadata(adata):
     domain_counts = adata.obs['domain'].value_counts()
     domains = sorted(domain_counts.index.tolist())
 
-    # Row 1: Global Stats
     c1, c2, c3 = st.columns(3)
     with c1:
         st.markdown(f"""
@@ -243,7 +238,7 @@ def _render_domain_overall(adata):
             display_plot_with_download(
                 fig, 
                 "domain_overall_flux",
-                help_text="This boxen plot shows the distribution of per-spot mean metabolic flux across all reactions for each domain. It highlights the overall metabolic activity levels and identifies which domains are significantly more or less active."
+                help_text="This boxen plot shows the distribution of per-spot mean metabolic flux across all reactions for each domain. It highlights the overall metabolic activity levels and identifies the domains that are significantly more or less active."
             )
 
             plt.close(fig)
@@ -276,7 +271,6 @@ def _render_reactions_mode(adata, selected):
                 )
                 add_significance_brackets(ax, sub, domain_order, y_col="flux")
                 
-                # Use friendly name if available
                 title_text = rxn
                 if 'rxn_full_names' in adata.var.columns and rxn in adata.var_names:
                     title_text = adata.var.loc[rxn, 'rxn_full_names']
@@ -286,7 +280,6 @@ def _render_reactions_mode(adata, selected):
                 ax.set_ylabel("Flux")
 
             plt.tight_layout()
-            # Generate specific reactions help
             rxn_names = []
             for rxn in selected:
                 if 'rxn_full_names' in adata.var.columns and rxn in adata.var_names:
@@ -341,7 +334,6 @@ def _render_pathway_mode(adata, selected_pathways):
                 ax.set_ylabel("Flux")
 
             plt.tight_layout()
-            # Generate specific pathway help
             pathway_str = ", ".join(selected_pathways)
             display_plot_with_download(
                 fig, 

src/ui/plots/metabolic_interactions.py

@@ -20,7 +20,37 @@ def render_metabolic_interactions(metabolic_adata):
     Investigate metabolic interaction types in the TME using Plotly.
     """
     st.markdown("<h2 style='color: #d32f2f;'><i class='fas fa-project-diagram'></i> Metabolic Interaction Analysis</h2>", unsafe_allow_html=True)
-    
+    st.markdown("""
+    Metabolic interactions represent the dynamic exchange of metabolites between spatially adjacent spots (cells). 
+    **spMetaTME** identifies five distinct metabolic interaction types:
+    """)
+    # Interaction Types Demonstration - Direct Layout
+    col_img, col_txt = st.columns([1, 1], gap="large")
+    with col_img:
+        logo_path = "assets/interactions.svg"
+        if os.path.exists(logo_path):
+            st.image(logo_path, caption="Spatially resolved metabolic interaction types in the tumor microenvironment", use_container_width=True)
+        else:
+            st.info("Interaction schema image (interactions.svg) not found in assets.")
+
+    with col_txt:
+        # st.markdown("""
+        # Metabolic interactions represent the dynamic exchange of metabolites between spatially adjacent spots (cells). 
+        # spMetaTME identifies **five distinct metabolic interaction types**:
+        
+        # *   **Competition**: Spatially adjacent spots (cells) compete for the same limited nutrients.
+        # *   **Cooperation**: Spatially adjacent spots (cells) exchange metabolites in a mutually beneficial manner.
+        # *   **Release**: Spatially adjacent spots (cells) release metabolites to the environment.
+        # *   **Amensalism**: One cell's metabolic byproducts adversely affect neighbors without direct benefit to the producer.
+        # *   **Neutralism**: Cells co-exist in the same region without significant metabolic cross-talk or resource interference.
+        # """)
+        st.markdown("""
+        *   **Competition**: Spatially adjacent spots (cells) compete for the metabolites available in the microenvironment.
+        *   **Cooperation**: Spatially adjacent cells engage in metabolite exchange that benefits both, typically where a metabolite secreted by one cell is taken up and utilized by another.
+        *   **Release**: Cells secrete metabolites into the microenvironment without evidence of uptake by neighboring cells, contributing to the shared metabolite pool.
+        *   **Amensalism**: One cell either secrets or consumes the metabolite, while spatially adjacent cell do not utilize it.
+        *   **Neutralism**: Spatially adjacent cells coexist without detectable metabolic interaction, showing no significant exchange or competition for metabolites.
+        """)
     if 'interaction_type' not in st.session_state:
         st.session_state.interaction_type = None
     if 'interaction_scores' not in st.session_state:
@@ -43,7 +73,7 @@ def render_metabolic_interactions(metabolic_adata):
     DENSITY_VALS = [99.5, 99, 95, 90, 80, 60, 40, 20, 10, 0]
     DENSITY_MAP = dict(zip(DENSITY_LABELS, DENSITY_VALS))
 
-    tab1, tab2, tab3 = st.tabs(["Global Distribution", "Interaction Type Investigation", "Communication Score"])
+    tab1, tab2, tab3 = st.tabs(["Metabolic Interaction Distribution", "Interaction Type Investigation", "Communication Score"])
 
     with tab1:
         st.markdown("#### Distribution of Interaction Types")

src/ui/plots/spatial_flux_map.py

@@ -9,7 +9,6 @@ from .utils import display_plot_with_download, display_interactive_spatial_plot,
 
 logger = logging.getLogger(__name__)
 
-# Initialize session state for plot caching
 def init_plot_state():
     """Initialize plot caching state variables."""
     if "plot_cache" not in st.session_state:
@@ -27,7 +26,6 @@ def _detect_viz_change_and_clear():
     
     last_params = st.session_state.get('sp_last_params', {})
     
-    # Check if any visualization parameter changed
     if current_params != last_params:
         st.session_state.sp_last_params = current_params
         plt.close('all')  # Close all matplotlib figures
@@ -37,15 +35,11 @@ def _detect_viz_change_and_clear():
 
 def render_spatial_flux_map(metabolic_adata):
     """Render spatial flux maps with Red theme."""
-    # Initialize plot caching state
     init_plot_state()
-    
-    # Detect visualization changes and clear cache to prevent flickering
     _detect_viz_change_and_clear()
     
     st.markdown("<h2 style='color: #d32f2f;'><i class='fas fa-map-location-dot'></i> Spatial Metabolic flux</h2>", unsafe_allow_html=True)
     
-    # 1. Determine layout and render primary filters
     viz_choice = st.session_state.get("sp_viz_choice", "Domains")
     
     if viz_choice == "Domains":
@@ -56,7 +50,6 @@ def render_spatial_flux_map(metabolic_adata):
     with c1:
         viz_choice = st.selectbox("Analysis Type:", options=["Domains", "Reactions", "Pathways"], key="sp_viz_choice")
     
-    # Plot mode and spot size are always present, but column varies
     with (c3 if viz_choice == "Domains" else c4):
         plot_mode = st.radio("Plot Mode:", ["Static", "Interactive"], horizontal=True, key="sp_mode")
     
@@ -65,7 +58,6 @@ def render_spatial_flux_map(metabolic_adata):
 
     selected_items = []
     
-    # 2. Render selective filters (only for non-domain modes in col2)
     if viz_choice != "Domains":
         with c2:
             if viz_choice == "Reactions":
@@ -101,7 +93,6 @@ def render_spatial_flux_map(metabolic_adata):
                 else:
                     st.warning("No pathway data.")
 
-    # 3. Visualization logic
     try:
         library_id = next(iter(metabolic_adata.uns["spatial"]))
         img_key = "hires" if "hires" in metabolic_adata.uns["spatial"][library_id]["images"] else "downscaled_fullres"
@@ -153,7 +144,6 @@ def render_spatial_flux_map(metabolic_adata):
 
                 del metabolic_adata.obs[f'temp_{target}']
             else:
-                # Static grid for pathways
                 per_page = 4
                 total = len(selected_items)
                 pages = (total + per_page - 1) // per_page
@@ -182,7 +172,6 @@ def render_spatial_flux_map(metabolic_adata):
                 
                 for j in range(len(curr_items), n_rows*n_cols): axes[j//n_cols, j%n_cols].axis('off')
                 plt.tight_layout()
-                # Generate names for help text
                 target_names = ", ".join([str(t) for t in curr_items])
                 display_plot_with_download(
                     fig, 
@@ -246,7 +235,6 @@ def render_spatial_flux_map(metabolic_adata):
                 
                 for j in range(len(curr_rx), n_rows*n_cols): axes[j//n_cols, j%n_cols].axis('off')
                 plt.tight_layout()
-                # Generate names for help text
                 rx_names_list = []
                 for rx in curr_rx:
                     if 'rxn_full_names' in metabolic_adata.var.columns and rx in metabolic_adata.var_names: