Update app.py

app.py

@@ -1,5 +1,6 @@
 import streamlit as st
 import streamlit.components.v1 as components
+import urllib.parse
 
 # --------------------------
 # Mermaid Renderer Function
@@ -29,6 +30,24 @@ 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
 # --------------------------
@@ -134,10 +153,15 @@ 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.
@@ -317,6 +341,16 @@ 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"
 '''
 
 # --------------------------
@@ -325,17 +359,30 @@ graph TD
 def main():
     st.set_page_config(page_title="Densified Skill Tree", layout="wide")
     
-    # Optionally render combined outlines and submodels if desired:
+    # Get query parameters
+    query_params = st.experimental_get_query_params()
+    selected_area = query_params.get("area", [None])[0]
+    
+    # Display combined outline
     st.markdown(md_combined_outline, unsafe_allow_html=True)
-    #st.markdown(md_submodels_outline, unsafe_allow_html=True)
     
-    # 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)
+    # 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)
+                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)
     
-    # Render the combined mermaid diagram for an overview
+    # Render the Failure Analysis combined mermaid diagram
     render_mermaid(combined_mermaid, height=850)
     
     # Display additional markdown sections
@@ -346,4 +393,4 @@ def main():
     st.markdown(md_tweet, unsafe_allow_html=True)
 
 if __name__ == "__main__":
-    main()
+    main()