Update app.py

app.py

@@ -1,185 +1,138 @@
 import streamlit as st
 import pandas as pd
-import plotly.graph_objects as go
-from io import StringIO
+from graphviz import Digraph
 import base64
+from io import StringIO
 
 # Custom CSS for professional UI
 st.markdown("""
 <style>
     /* Main container */
     .stApp {
-        background-color: #f5f5f5;
-        font-family: 'Arial', sans-serif;
+        background-color: #f9f9f9;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+    
+    /* Titles */
+    h1 {
+        color: #2c3e50;
+        border-bottom: 3px solid #4CAF50;
+        padding-bottom: 10px;
     }
     
     /* Sidebar */
     .stSidebar {
         background-color: #2c3e50;
-        color: white;
-        padding: 20px;
+        color: white !important;
     }
     
     /* Buttons */
     .stButton>button {
         background-color: #4CAF50;
         color: white;
-        border-radius: 8px;
-        padding: 10px 24px;
+        border-radius: 25px;
+        padding: 12px 28px;
         border: none;
         font-size: 16px;
-        transition: background-color 0.3s;
+        transition: all 0.3s;
     }
     .stButton>button:hover {
         background-color: #45a049;
+        transform: scale(1.05);
     }
     
     /* File uploader */
     .stFileUploader>div>div>div>div {
-        background-color: #f0f2f6;
-        border-radius: 8px;
-        padding: 12px;
+        background-color: #ffffff;
+        border-radius: 10px;
+        padding: 15px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    /* Data editor */
+    .stDataEditor {
+        background-color: white;
+        border-radius: 10px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
     
     /* Tabs */
     .stTabs [data-baseweb="tab-list"] {
-        background-color: #2c3e50;
-        border-radius: 8px;
+        gap: 10px;
     }
     .stTabs [data-baseweb="tab"] {
-        color: white;
-        padding: 10px 20px;
+        background-color: #e8f5e9;
+        border-radius: 8px;
+        padding: 12px 24px;
+        transition: all 0.3s;
     }
     .stTabs [aria-selected="true"] {
         background-color: #4CAF50;
-        border-radius: 8px;
-    }
-    
-    /* Organization chart container */
-    .org-chart-container {
-        background-color: white;
-        border-radius: 12px;
-        padding: 20px;
-        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        color: white !important;
     }
 </style>
 """, unsafe_allow_html=True)
 
-# Function to create organization chart
 def create_org_chart(df, title):
-    positions = {}
-    edge_x = []
-    edge_y = []
-    node_x = []
-    node_y = []
-    node_text = []
-    
-    # Create hierarchical positions
-    levels = {}
-    for _, row in df.iterrows():
-        parent = row['Parent']
-        child = row['Child']
-        if parent not in levels:
-            levels[parent] = 0
-        if child not in levels:
-            levels[child] = levels[parent] + 1
-    
-    # Assign coordinates
-    max_level = max(levels.values())
-    level_positions = {level: [] for level in range(max_level + 1)}
-    
-    for node, level in levels.items():
-        level_positions[level].append(node)
-    
-    for level, nodes in level_positions.items():
-        y_pos = max_level - level
-        x_positions = [i - (len(nodes)-1)/2 for i in range(len(nodes))]
-        for node, x_pos in zip(nodes, x_positions):
-            positions[node] = (x_pos, y_pos)
-    
-    # Create edges
+    """Create professional organization chart with Graphviz"""
+    dot = Digraph(comment=title)
+    dot.attr(rankdir='TB', labelloc='t', label=title, fontsize='24', fontname='Arial')
+    dot.attr('node', shape='box', style='filled', 
+            fillcolor='linear-gradient(#4CAF50, #45a049)', fontname='Arial',
+            fontcolor='white', margin='0.3', width='2', height='0.8',
+            fixedsize='false', color='#2c3e50', fontsize='14')
+    dot.attr('edge', color='#666666', arrowsize='0.8')
+
+    # Track all nodes and relationships
+    nodes = set()
+    edges = set()
+
     for _, row in df.iterrows():
-        parent = row['Parent']
-        child = row['Child']
-        x0, y0 = positions[parent]
-        x1, y1 = positions[child]
-        edge_x.extend([x0, x1, None])
-        edge_y.extend([y0, y1, None])
-    
-    # Create nodes
-    for node, (x, y) in positions.items():
-        node_x.append(x)
-        node_y.append(y)
-        node_text.append(node)
-    
-    # Create 3D effect with rounded rectangles
-    edge_trace = go.Scatter(
-        x=edge_x, y=edge_y,
-        line=dict(width=2, color='#888'),
-        hoverinfo='none',
-        mode='lines'
-    )
-    
-    node_trace = go.Scatter(
-        x=node_x, y=node_y,
-        mode='markers+text',
-        text=node_text,
-        textposition="middle center",
-        marker=dict(
-            symbol='square',
-            size=[120] * len(node_x),  # Scalable size
-            color='#4CAF50',
-            line=dict(width=2, color='DarkSlateGrey'),
-            opacity=0.8
-        ),
-        hoverinfo='text',
-        textfont=dict(size=14, color='white'),
-        texttemplate='<b>%{text}</b>',  # Bold and wrapped text
-    )
-    
-    fig = go.Figure(data=[edge_trace, node_trace],
-                 layout=go.Layout(
-                    title=f'<b>{title}</b><br>',
-                    titlefont_size=20,
-                    showlegend=False,
-                    hovermode='closest',
-                    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),
-                    plot_bgcolor='white',
-                    paper_bgcolor='white'
-                    )
-                    )
-    
-    return fig
+        parent = row['Parent'].strip()
+        child = row['Child'].strip()
+        
+        if parent and child:
+            nodes.add(parent)
+            nodes.add(child)
+            edges.add((parent, child))
+
+    # Add nodes first to maintain order
+    for node in nodes:
+        dot.node(node, node)
+        
+    # Add edges
+    for edge in edges:
+        dot.edge(edge[0], edge[1])
+
+    return dot
 
-# Function to download CSV template
 def download_csv_template():
+    """Generate CSV template download link"""
     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>'
+    href = f'<a href="data:file/csv;base64,{b64}" download="org_chart_template.csv" style="\
+        background-color: #4CAF50; color: white; padding: 12px 24px; \
+        border-radius: 25px; text-decoration: none;">Download CSV Template</a>'
     st.markdown(href, unsafe_allow_html=True)
 
-# Main function
 def main():
-    st.title("Professional Organization Chart Generator")
-    
-    # Tabs for better organization
-    tab1, tab2 = st.tabs(["Data Input", "Organization Chart"])
+    st.title("🏢 Professional Organization Chart Generator")
     
+    with st.sidebar:
+        st.header("Configuration")
+        chart_title = st.text_input("Chart Title", "Company Organization Chart")
+        orientation = st.selectbox("PDF Orientation", ["Portrait", "Landscape"])
+        paper_size = st.select_slider("Paper Size", options=["A3", "A4", "Letter", "Legal"])
+
+    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.")
+        st.subheader("1. Prepare 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"])
+        uploaded_file = st.file_uploader("Upload CSV File", type=["csv"], 
+                                        help="Upload your organizational data in CSV format")
         
-        # Input data
         if uploaded_file:
             df = pd.read_csv(uploaded_file)
         else:
@@ -190,49 +143,30 @@ CTO,Engineering Manager
 CFO,Accounting Manager"""
             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!")
-    
+        edited_df = st.data_editor(df, num_rows="dynamic", use_container_width=True)
+
     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 st.button("Generate Organization Chart", type="primary"):
             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"
-                    )
+                with st.spinner("Generating professional chart..."):
+                    try:
+                        # Create and display chart
+                        chart = create_org_chart(edited_df, chart_title)
+                        st.graphviz_chart(chart, use_container_width=True)
+                        
+                        # PDF Generation
+                        pdf_bytes = chart.pipe(format='pdf')
+                        st.download_button(
+                            label="📥 Download PDF",
+                            data=pdf_bytes,
+                            file_name=f"{chart_title.replace(' ', '_')}.pdf",
+                            mime="application/pdf",
+                            help=f"Download {orientation} PDF ({paper_size} size)"
+                        )
+                    except Exception as e:
+                        st.error(f"Error generating chart: {str(e)}")
             else:
-                st.warning("Please enter some organizational data first.")
+                st.warning("Please input organizational data first!")
 
 if __name__ == "__main__":
-    main() 
+    main()