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,24 +29,6 @@ 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:
-            node_id = line.split('[')[0].strip()
-            if node_id:
-                # Self-referential link with query parameter
-                safe_url = f"{base_url}/?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
 # --------------------------
@@ -153,15 +134,10 @@ graph LR
     '''
 }
 
-# Update mermaid_areas with clickable links
-base_url = "http://localhost:8501"  # Replace with your app's base URL when deployed
-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. 🗼LeCo👥 Leadership and Collaboration :  Strategic leadership and team management.
@@ -191,7 +167,7 @@ md_submodels_outline = r'''
 2. **📊 Analytics, Forecasting and Visualization - BI, dashboards and forecasting**  
 3. **📝 Data Governance and Quality - Modeling, warehousing and stakeholder comms**
 
-## 4. �    **📢 Community OpenSource Communication CoOS
+## 4. 📢 Community OpenSource Communication CoOS
 1. **📚 Technical Documentation and Demos - Code examples, demos and notebooks**  
 2. **💬 Community Engagement and Collaboration - Public speaking, social media and collabs**
 
@@ -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,32 +325,17 @@ graph TD
 def main():
     st.set_page_config(page_title="Densified Skill Tree", layout="wide")
     
-    # Get query parameters
-    selected_area = st.query_params.get("area", None)  # Get the 'area' parameter, default to None
-    
-    # Display combined outline
+    # 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:
-        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
-                break
-    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
@@ -395,4 +346,4 @@ def main():
     st.markdown(md_tweet, unsafe_allow_html=True)
 
 if __name__ == "__main__":
-    main()
+    main()