feat: fully-updated-genome-grid-plot

src/streamlit_app.py

@@ -1,58 +1,294 @@
 # Import necessary libraries
 import streamlit as st
-
 from io import StringIO, BytesIO
 from Bio import SeqIO
-
 from kitikiplot.genomics import grid
 
+# Page configuration
+st.set_page_config(
+    page_title="Genome Grid Plot",
+    page_icon="🧬",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
 
-st.set_page_config(layout="wide")
-
-col1, _, col2 = st.columns([18, 2, 80])  # 20% : 80%
-
-# Column: 1
-# Area where user uploads '.fasta' file
-with col1:
-
-    data= "" 
+# Professional styling with blue navigation bar
+st.markdown("""
+<style>
+    /* Remove default Streamlit padding and margins */
+    .block-container {
+        padding-top: 0rem;
+        padding-bottom: 0rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
     
-    st.markdown("### Upload your Genome File")
-    uploaded_file= st.file_uploader("Upload a file (Format: .fasta)")
-
-    if uploaded_file is not None:
+    /* Hide Streamlit header and footer */
+    header[data-testid="stHeader"] {
+        display: none;
+    }
+    
+    .main > div {
+        padding-top: 0rem;
+    }
+    
+    /* Professional navigation bar */
+    .nav-bar {
+        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+        padding: 0.05rem 2rem;
+        color: white;
+        display: flex;
+        align-items: center;
+        margin: -1rem -1rem 2rem -1rem;
+        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    }
+    
+    .nav-logo {
+        height: 40px;
+        margin-right: 15px;
+        border: 1px solid #9ef2bd;
+        border-radius: 2px; /* Optional: smooth corners */
+    }
+    
+    .nav-title {
+        font-size: 28px;
+        font-weight: 600;
+        color: white;
+        margin: 0;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    
+    /* Professional card styling */
+    .upload-card {
+        background: white;
+        border-radius: 12px;
+        padding: 2rem;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+        border: 1px solid #e8eaed;
+    }
+    
+    .plot-card {
+        background: white;
+        border-radius: 12px;
+        padding: 2rem;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+        border: 1px solid #e8eaed;
+        min-height: 600px;
+    }
+    
+    /* Professional button styling */
+    .stButton > button {
+        background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 0.75rem 2rem;
+        font-weight: 600;
+        font-size: 16px;
+        transition: all 0.3s ease;
+        width: 100%;
+    }
+    
+    .stButton > button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(30,60,114,0.3);
+    }
+    
+    /* Download button styling */
+    .stDownloadButton > button {
+        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+        color: white;
+        border: none;
+        border-radius: 8px;
+        padding: 0.75rem 2rem;
+        font-weight: 600;
+        font-size: 16px;
+        transition: all 0.3s ease;
+        width: 30%;
+    }
+    
+    .stDownloadButton > button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(40,167,69,0.3);
+    }
+    
+    /* File uploader styling */
+    .stFileUploader > div > div {
+        border: 2px dashed #2a5298;
+        border-radius: 8px;
+        padding: 2rem;
+        text-align: center;
+        background: #f8f9ff;
+    }
+    
+    /* Number input styling */
+    .stNumberInput > div > div > input {
+        border-radius: 8px;
+        border: 2px solid #e8eaed;
+        padding: 0.75rem;
+        font-size: 16px;
+    }
+    
+    /* Section headers */
+    .section-header {
+        color: #1e3c72;
+        font-size: 24px;
+        font-weight: 600;
+        margin-bottom: 1rem;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    
+    /* Info text */
+    .info-text {
+        color: #6c757d;
+        font-size: 14px;
+        margin-top: 0.5rem;
+    }
+</style>
+""", unsafe_allow_html=True)
 
-        data= str(list( SeqIO.parse(StringIO(uploaded_file.getvalue().decode("utf-8")), "fasta") )[0].seq)
+import base64
+with open("logo.png", "rb") as img_file:
+    encoded = base64.b64encode(img_file.read()).decode()
 
-    window_length= st.number_input( key= "window_length", label= "Window/ Chunk Length", min_value= 0, max_value= 200, value= 50)
+# Display using HTML
+st.markdown(f"""
+<div class="nav-bar">
+    <img src="data:image/png;base64,{encoded}" class="nav-logo" alt="Logo" style="height:40px;">
+    <h2 class="nav-title">Genome Grid Plot</h2>
+</div>
+""", unsafe_allow_html=True)
 
-    submit = st.button("Submit", type="primary")
+# st.markdown("""
+# <div class="nav-bar">
+#     <h1 class="nav-title">Genome Grid Plot</h1>
+# </div>
+# """, unsafe_allow_html=True)
 
-    st.markdown("<div style='margin-top: 30px;'></div>", unsafe_allow_html=True)
+# st.image("banner.png", width=60)  
 
-    st.image("src/banner.png", use_container_width =True)
+# Initialize session state
+if 'figure' not in st.session_state:
+    st.session_state.figure = None
+if 'data' not in st.session_state:
+    st.session_state.data = ""
+if 'plot_generated' not in st.session_state:
+    st.session_state.plot_generated = False
 
-    figure= grid.plot( nucleotide_sequence= data, window_length= window_length )
+# Main layout
+col1, col2 = st.columns([30, 70])
 
-    st.markdown("</div>", unsafe_allow_html=True)
+# Column 1: Upload and Controls
+with col1:
+    st.markdown('<h3 class="section-header">📁 Upload Genome File</h3>', unsafe_allow_html=True)
+    
+    uploaded_file = st.file_uploader(
+        "Choose a FASTA file", 
+        type=['fasta', 'fa', 'fas'],
+        help="Upload your genome sequence in FASTA format"
+    )
+    
+    if uploaded_file is not None:
+        # Process file
+        try:
+            data = str(list(SeqIO.parse(StringIO(uploaded_file.getvalue().decode("utf-8")), "fasta"))[0].seq)
+            st.session_state.data = data
+            
+            # Show file info
+            st.success(f"✅ Sequence length: {len(data):,} nucleotides")
+            
+            # Window length input
+            st.markdown('<h4 class="section-header">⚙️ Parameters</h4>', unsafe_allow_html=True)
+            window_length = st.number_input(
+                label="Window/Chunk Length", 
+                min_value=1, 
+                max_value=200, 
+                value=50,
+                key="window_length",
+                help="Size of each analysis window for the grid plot"
+            )
+            st.markdown('<p class="info-text">Recommended: sequence length <1000 for detailed analysis</p>', unsafe_allow_html=True)
+            
+            # Submit button
+            submit = st.button("🔬 Generate Plot", type="primary", key="submit_btn")
+            
+            if submit:
+                with st.spinner("🧬 Generating genome grid plot..."):
+                    st.session_state.figure = grid.plot(
+                        nucleotide_sequence=data, 
+                        window_length=window_length
+                    )
+                    st.session_state.plot_generated = True
+                
+        except Exception as e:
+            st.error(f"❌ Error processing file: {str(e)}")
+    
+    else:
+        st.info("👆 Please upload a FASTA file to begin visualization")
+    
+    # Banner image at bottom with error handling
+    try:
+        st.image("src/banner.png", use_container_width=True)
+    except:
+        pass  # Silently ignore if banner not found
+        
+    st.markdown('</div>', unsafe_allow_html=True)
 
-# Column: 2
-# Output Area where the kitikiplot is displayed
+# Column 2: Plot Display
 with col2:
-    st.markdown("## Genome Grid Plot")
+    
+    if st.session_state.figure is not None and st.session_state.plot_generated:
 
-    if submit and uploaded_file is not None:
+        st.markdown('<h3 class="section-header">Visualization Results</h3>', unsafe_allow_html=True)
 
-        st.pyplot( figure )
+        # Display plot
+        st.pyplot(st.session_state.figure, use_container_width=True)
+        
+        # Download section
+        st.markdown("---")
+        
+        # Prepare download
+        img_bytes = BytesIO()
+        st.session_state.figure.savefig(img_bytes, format="png", dpi=300, bbox_inches='tight', 
+                                      facecolor='white', edgecolor='none')
+        img_bytes.seek(0)
+        
+        # Download button
+        filename = uploaded_file.name.replace('.fasta', '').replace('.fa', '').replace('.fas', '') if uploaded_file else "genome"
+        st.download_button(
+            label="📥 Download Plot as PNG",
+            data=img_bytes.getvalue(),
+            file_name=f"{filename}_GridPlot.png",
+            mime="image/png"
+        )
+        
+    else:
+        # Empty state with instructions
+        st.markdown("""
+        <div style="text-align: center; padding: 4rem 2rem; color: #343a40; font-family: 'Segoe UI', sans-serif;">
+            <h4 style="margin-bottom: 1rem;">🧬 Ready for Analysis <b>?</b></h4>
+            <p style="font-size: 1rem;">Upload a FASTA file and click <strong>"Generate Plot"</strong> to visualize your genome sequence.</p>
+            <br>
+            <div style="background: #ffffff; padding: 2rem; border-radius: 10px; border: 1px solid #e0e0e0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); max-width: 700px; margin: 0 auto;">
+                <h5 style="color: #2a5298; font-size: 1.3rem; text-align: left;">About</h5>
+                <ul style="text-align: left; padding-left: 1.2rem; margin: 0; line-height: 1.8; color: #495057; font-size: 0.95rem;">
+                    <li>Visualize nucleotide composition patterns</li>
+                    <li>Analyze sequence complexity and structure</li>
+                    <li>Identify repetitive regions and motifs</li>
+                    <li>Intuitive for genomics research and education</li>
+                    <li>Powered by <i>kitikiplot</i></li>
+                </ul>
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
 
-        if figure!= None:
-            img_bytes = BytesIO()
-            figure.savefig(img_bytes, format="png")
-            img_bytes.seek(0)
+    
+    st.markdown('</div>', unsafe_allow_html=True)
 
-            st.download_button(
-            label="Download Plot as PNG",
-            data=img_bytes,
-            file_name= uploaded_file.name+"GridPlot.png",
-            mime="image/png"
-                )
+# Footer
+st.markdown("---")
+st.markdown("""
+<div style="text-align: center; color: #2a5298; padding: 0.01rem;">
+    <p><strong>Genome Grid Plot</strong> • Intuitive genomics visualization tool • Built with Streamlit</p>
+</div>
+""", unsafe_allow_html=True)