Update app.py

app.py

@@ -1,17 +1,25 @@
 import streamlit as st
 import pandas as pd
 import plotly.graph_objects as go
-import base64
 from io import StringIO
+import base64
+from streamlit_tabs import st_tabs
 
-# Custom CSS for modern UI
+# Custom CSS for professional UI
 st.markdown("""
 <style>
-    .stTextInput>div>div>input, .stTextArea>div>div>textarea {
-        background-color: #f0f2f6;
-        border-radius: 8px;
-        padding: 12px;
+    /* Main container */
+    .stApp {
+        background-color: #f5f5f5;
+    }
+    
+    /* Sidebar */
+    .stSidebar {
+        background-color: #2c3e50;
+        color: white;
     }
+    
+    /* Buttons */
     .stButton>button {
         background-color: #4CAF50;
         color: white;
@@ -19,24 +27,37 @@ st.markdown("""
         padding: 10px 24px;
         border: none;
         font-size: 16px;
+        transition: background-color 0.3s;
     }
-    .stDownloadButton>button {
-        background-color: #008CBA;
-        color: white;
-        border-radius: 8px;
-        padding: 10px 24px;
-        border: none;
-        font-size: 16px;
+    .stButton>button:hover {
+        background-color: #45a049;
     }
-    .stSelectbox>div>div>select {
+    
+    /* File uploader */
+    .stFileUploader>div>div>div>div {
         background-color: #f0f2f6;
         border-radius: 8px;
-        padding: 8px;
+        padding: 12px;
+    }
+    
+    /* Tabs */
+    .stTabs [data-baseweb="tab-list"] {
+        background-color: #2c3e50;
+        border-radius: 8px;
+    }
+    .stTabs [data-baseweb="tab"] {
+        color: white;
+        padding: 10px 20px;
+    }
+    .stTabs [aria-selected="true"] {
+        background-color: #4CAF50;
+        border-radius: 8px;
     }
 </style>
 """, unsafe_allow_html=True)
 
-def create_org_chart(df, title, direction='TB'):
+# Function to create organization chart
+def create_org_chart(df, title):
     positions = {}
     edge_x = []
     edge_y = []
@@ -94,91 +115,110 @@ def create_org_chart(df, title, direction='TB'):
         x=node_x, y=node_y,
         mode='markers+text',
         text=node_text,
-        textposition="top center",
+        textposition="middle center",
         marker=dict(
             symbol='square',
-            size=[100]*len(node_x),
+            size=[50] * len(node_x),  # Reduced size for better fit
             color='#4CAF50',
             line=dict(width=2, color='DarkSlateGrey')
         ),
         hoverinfo='text',
-        textfont=dict(size=14, color='white')
+        textfont=dict(size=12, color='white')
     )
     
     fig = go.Figure(data=[edge_trace, node_trace],
                  layout=go.Layout(
                     title=f'<b>{title}</b><br>',
-                    titlefont_size=24,
+                    titlefont_size=20,
                     showlegend=False,
                     hovermode='closest',
-                    margin=dict(b=20,l=5,r=5,t=40),
+                    margin=dict(b=20, l=5, r=5, t=40),
                     xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
                     yaxis=dict(showgrid=False, zeroline=False, showticklabels=False))
                     )
     
     return fig
 
+# Function to download CSV template
+def download_csv_template():
+    csv_template = "Parent,Child\nCEO,CTO\nCEO,CFO\nCTO,Engineering Manager\nCFO,Accounting Manager"
+    b64 = base64.b64encode(csv_template.encode()).decode()
+    href = f'<a href="data:file/csv;base64,{b64}" download="org_chart_template.csv">Download CSV Template</a>'
+    st.markdown(href, unsafe_allow_html=True)
+
+# Main function
 def main():
     st.title("Professional Organization Chart Generator")
     
-    # Title input
-    chart_title = st.text_input("Enter Chart Title", "Organization Chart")
-    
-    # File upload
-    uploaded_file = st.file_uploader("Upload CSV File", type=["csv"])
-    
-    # Input format
-    with st.expander("CSV Format Instructions"):
-        st.markdown("""
-        **CSV Format:**  
-        Parent,Child  
-        CEO,CTO  
-        CEO,CFO  
-        CTO,Engineering Manager  
-        CFO,Accounting Manager  
-        """)
-    
-    # Input data
-    if uploaded_file:
-        df = pd.read_csv(uploaded_file)
-    else:
-        default_data = """Parent,Child
+    # Tabs for better organization
+    tab1, tab2 = st_tabs(["Data Input", "Organization Chart"])
+    
+    with tab1:
+        st.header("Data Input")
+        st.markdown("### Upload or Edit Your Organizational Data")
+        
+        # Download CSV template
+        st.markdown("**Step 1:** Download the CSV template to input your data.")
+        download_csv_template()
+        
+        # File upload
+        st.markdown("**Step 2:** Upload your CSV file or edit the default data below.")
+        uploaded_file = st.file_uploader("Upload CSV File", type=["csv"])
+        
+        # Input data
+        if uploaded_file:
+            df = pd.read_csv(uploaded_file)
+        else:
+            default_data = """Parent,Child
 CEO,CTO
 CEO,CFO
 CTO,Engineering Manager
 CFO,Accounting Manager"""
-        df = pd.read_csv(StringIO(default_data))
-    
-    # Show editable dataframe
-    edited_df = st.data_editor(df, num_rows="dynamic")
-    
-    # Generate chart
-    if st.button('Generate Organization Chart'):
-        if not edited_df.empty:
-            fig = create_org_chart(edited_df, chart_title)
-            st.plotly_chart(fig, use_container_width=True)
-            
-            # PDF download options
-            st.subheader("Download Options")
-            col1, col2 = st.columns(2)
-            with col1:
-                orientation = st.selectbox("PDF Orientation", ["Portrait", "Landscape"])
-            with col2:
-                paper_size = st.selectbox("Paper Size", ["A4", "Letter", "Legal"])
-            
-            # Convert to PDF
-            if st.button("Download as PDF"):
-                img_bytes = fig.to_image(format="pdf", 
-                                       width=800 if orientation == "Portrait" else 1200,
-                                       height=1200 if orientation == "Portrait" else 800)
-                st.download_button(
-                    label="Download PDF",
-                    data=img_bytes,
-                    file_name="org_chart.pdf",
-                    mime="application/pdf"
-                )
-        else:
-            st.warning("Please enter some organizational data first")
+            df = pd.read_csv(StringIO(default_data))
+        
+        # Editable data table
+        st.markdown("**Step 3:** Edit your data below if needed.")
+        edited_df = st.data_editor(df, num_rows="dynamic")
+        
+        # Save edited data
+        if st.button("Save Data"):
+            edited_df.to_csv("edited_data.csv", index=False)
+            st.success("Data saved successfully!")
+    
+    with tab2:
+        st.header("Organization Chart")
+        st.markdown("### Visualize Your Organizational Structure")
+        
+        # Chart title
+        chart_title = st.text_input("Enter Chart Title", "Organization Chart")
+        
+        # Generate chart
+        if st.button("Generate Organization Chart"):
+            if not edited_df.empty:
+                fig = create_org_chart(edited_df, chart_title)
+                st.plotly_chart(fig, use_container_width=True)
+                
+                # PDF download options
+                st.markdown("### Download Options")
+                col1, col2 = st.columns(2)
+                with col1:
+                    orientation = st.selectbox("PDF Orientation", ["Portrait", "Landscape"])
+                with col2:
+                    paper_size = st.selectbox("Paper Size", ["A4", "Letter", "Legal"])
+                
+                # Convert to PDF
+                if st.button("Download as PDF"):
+                    img_bytes = fig.to_image(format="pdf", 
+                                           width=800 if orientation == "Portrait" else 1200,
+                                           height=1200 if orientation == "Portrait" else 800)
+                    st.download_button(
+                        label="Download PDF",
+                        data=img_bytes,
+                        file_name="org_chart.pdf",
+                        mime="application/pdf"
+                    )
+            else:
+                st.warning("Please enter some organizational data first.")
 
 if __name__ == "__main__":
     main()