Update app.py

app.py

@@ -1,6 +1,5 @@
 import streamlit as st
 import streamlit.components.v1 as components
-import urllib.parse
 
 # --------------------------
 # Mermaid Renderer Function
@@ -30,54 +29,36 @@ def render_mermaid(mermaid_code, height=300):
     """
     components.html(html_code, height=height)
 
-# --------------------------
-# Function to Add Clickable Links to Mermaid Diagrams
-# --------------------------
-def add_mermaid_links(mermaid_code, area_code, base_url):
-    """Add clickable links to Mermaid diagram nodes."""
-    lines = mermaid_code.split('\n')
-    new_lines = []
-    for line in lines:
-        new_lines.append(line)
-        # Check if the line defines a node (e.g., LeCo["..."])
-        if '[' in line and ']' in line and not line.strip().startswith('click'):
-            node_id = line.split('[')[0].strip()
-            if node_id:
-                # Self-referential link with query parameter
-                safe_url = f"/?area={area_code}#{node_id}"
-                new_lines.append(f'  click {node_id} "{safe_url}" "View {node_id}"')
-    return '\n'.join(new_lines)
-
 # --------------------------
 # Markdown Outlines for Each Area
 # --------------------------
 markdown_areas = {
     "1. 👥 Leadership Management Collaboration LeCo": r'''
-<a href="/?area=LeCo">1. 👥 Leadership Management Collaboration LeCo</a>  
+1. 👥 Leadership Management Collaboration LeCo  
 ''',
     "2. 🔒 Security Compliance Reliability SeCo": r'''
-<a href="/?area=SeCo">2. 🔒 Security Compliance Reliability SeCo</a>  
+2. 🔒 Security Compliance Reliability SeCo  
 ''',
     "3. 📊 Data Engineering Analytics Data Governance DaEn": r'''
-<a href="/?area=DaEn">3. 📊 Data Engineering Analytics Data Governance DaEn</a>  
+3. 📊 Data Engineering Analytics Data Governance DaEn  
 ''',
     "4. 📢 Community OpenSource Communication CoOS": r'''
-<a href="/?area=CoOS">4. 📢 Community OpenSource Communication CoOS</a>  
+4. 📢 Community OpenSource Communication CoOS  
 ''',
     "5. 📱 FullStack UI Mobile Product Development FuMo": r'''
-<a href="/?area=FuMo">5. 📱 FullStack UI Mobile Product Development FuMo</a>  
+5. 📱 FullStack UI Mobile Product Development FuMo  
 ''',
     "6. 💻 Software Cloud MLOps Infrastructure SCMI": r'''
-<a href="/?area=SoCM">6. 💻 Software Cloud MLOps Infrastructure SCMI</a>  
+6. 💻 Software Cloud MLOps Infrastructure SCMI  
 ''',
     "7. 🤖 Machine Learning AI Model Development MLAI": r'''
-<a href="/?area=AIML">7. 🤖 Machine Learning AI Model Development MLAI</a>  
+7. 🤖 Machine Learning AI Model Development MLAI  
 ''',
     "8. 🔧 Systems Infrastructure LowLevel Engineering SyIn": r'''
-<a href="/?area=SyIn">8. 🔧 Systems Infrastructure LowLevel Engineering SyIn</a>  
+8. 🔧 Systems Infrastructure LowLevel Engineering SyIn  
 ''',
     "9. 🎯 Specialized Domains Emerging Technologies SpDo": r'''
-<a href="/?area=SpDo">9. 🎯 Specialized Domains Emerging Technologies SpDo</a>  
+9. 🎯 Specialized Domains Emerging Technologies SpDo  
 '''
 }
 
@@ -153,26 +134,21 @@ graph LR
     '''
 }
 
-# Update mermaid_areas with clickable links
-base_url = "http://localhost:8501"  # Replace with your app's base URL when deployed (e.g., Streamlit Cloud URL)
-for key in mermaid_areas:
-    area_code = key.split(' ')[-1]  # Extract area code (e.g., LeCo)
-    mermaid_areas[key] = add_mermaid_links(mermaid_areas[key], area_code, base_url)
-
 # --------------------------
 # Markdown Sections
 # --------------------------
+
 md_combined_outline = r'''
 # 📚 Hands On ML App. Dev. with Mixture of Experts and Multiagent Skills and State of Art ML Architecture
-1. <a href="/?area=LeCo">🗼LeCo👥 Leadership and Collaboration</a> : Strategic leadership and team management.
-2. <a href="/?area=SeCo">👓SeCo🔒 Security and Compliance</a> : Security operations, compliance, and system hardening.
-3. <a href="/?area=DaEn">🪑DaEn📊 Data Engineering</a> : Data processing, analytics, and governance.
-4. <a href="/?area=CoOS">🪟CoOS📢 Community OpenSource</a> : Community engagement, documentation, and collaboration.
-5. <a href="/?area=FuMo">✋FuMo📱 FullStack UI Mobile</a> : Mobile and web app development with ML integration.
-6. <a href="/?area=SoCM">🎲SoCM💻 Software Cloud MLOps</a> : Cloud infrastructure, ML frameworks, and automation.
-7. <a href="/?area=AIML">☁️AIML🤖 AI Machine Learning</a> : Large–scale architectures, distributed training, and inference.
-8. <a href="/?area=SyIn">🚪SyIn🔧 Systems Infrastructure</a> : Hardware, OS, and distributed HPC deployments.
-9. <a href="/?area=SpDo">🐱SpDo🎯 Specialized Domains</a> : Advanced CV, robotics, HPC, and AI quantization.
+1. 🗼LeCo👥 Leadership and Collaboration :  Strategic leadership and team management.
+2. 👓SeCo🔒 Security and Compliance :  Security operations, compliance, and system hardening.
+3. 🪑DaEn📊 Data Engineering :  Data processing, analytics, and governance.
+4. 🪟CoOS📢 Community OpenSource :  Community engagement, documentation, and collaboration.
+5. ✋FuMo📱 FullStack UI Mobile :  Mobile and web app development with ML integration.
+6. 🎲SoCM💻 Software Cloud MLOps :  Cloud infrastructure, ML frameworks, and automation.
+7. ☁️AIML🤖 AI Machine Learning :  Large–scale architectures, distributed training, and inference.
+8. 🚪SyIn🔧 Systems Infrastructure :  Hardware, OS, and distributed HPC deployments.
+9. 🐱SpDo🎯 Specialized Domains :  Advanced CV, robotics, HPC, and AI quantization.
 '''
 
 md_submodels_outline = r'''
@@ -341,16 +317,6 @@ graph TD
   CoOS ---|🤝 collaborates with| LeCo
   CoOS ---|🗣️ informs| DaEn
   SpDo ---|🔄 shares with| CoOS
-
-  click LeCo "/?area=LeCo" "View Leadership and Collaboration"
-  click SeCo "/?area=SeCo" "View Security and Compliance"
-  click DaEn "/?area=DaEn" "View Data Engineering"
-  click CoOS "/?area=CoOS" "View Community Open Source"
-  click FuMo "/?area=FuMo" "View FullStack UI Mobile"
-  click SoCM "/?area=SoCM" "View Software Cloud MLOps"
-  click AIML "/?area=AIML" "View AI Machine Learning"
-  click SyIn "/?area=SyIn" "View Systems Infrastructure"
-  click SpDo "/?area=SpDo" "View Specialized Domains"
 '''
 
 # --------------------------
@@ -359,37 +325,17 @@ graph TD
 def main():
     st.set_page_config(page_title="Densified Skill Tree", layout="wide")
     
-    # Get query parameters
-    area_params = st.query_params.get_all("area")  # Handle repeated keys
-    selected_area = area_params[0] if area_params else None  # Take the first area or None
-    
-    # Display combined outline with clickable links
+    # Optionally render combined outlines and submodels if desired:
     st.markdown(md_combined_outline, unsafe_allow_html=True)
+    #st.markdown(md_submodels_outline, unsafe_allow_html=True)
     
-    # If an area is selected, show only that area's content
-    if selected_area:
-        found = False
-        for key in sorted(markdown_areas.keys(), key=lambda k: int(k.split('.')[0])):
-            area_code = key.split(' ')[-1]  # Extract area code (e.g., LeCo, SeCo)
-            if area_code == selected_area:
-                st.markdown(markdown_areas[key], unsafe_allow_html=True)
-                if key in mermaid_areas:
-                    render_mermaid(mermaid_areas[key], height=350)
-                # Add a "Back to Overview" button
-                if st.button("Back to Overview"):
-                    st.query_params.clear()  # Clear query parameters to show all areas
-                found = True
-                break
-        if not found:
-            st.warning(f"Invalid area: {selected_area}")
-    else:
-        # Show all areas if no specific area is selected
-        for key in sorted(markdown_areas.keys(), key=lambda k: int(k.split('.')[0])):
-            st.markdown(markdown_areas[key], unsafe_allow_html=True)
-            if key in mermaid_areas:
-                render_mermaid(mermaid_areas[key], height=350)
+    # For each numbered area, display its markdown outline first, then its mermaid diagram.
+    for key in sorted(markdown_areas.keys(), key=lambda k: int(k.split('.')[0])):
+        st.markdown(markdown_areas[key], unsafe_allow_html=True)
+        if key in mermaid_areas:
+            render_mermaid(mermaid_areas[key], height=350)
     
-    # Render the combined mermaid diagram
+    # Render the combined mermaid diagram for an overview
     render_mermaid(combined_mermaid, height=850)
     
     # Display additional markdown sections
@@ -400,4 +346,4 @@ def main():
     st.markdown(md_tweet, unsafe_allow_html=True)
 
 if __name__ == "__main__":
-    main()
+    main()