Update app.py

app.py

@@ -3,9 +3,8 @@ import streamlit.components.v1 as components
 import json
 
 st.set_page_config(layout="wide")
-st.title("🏗️ GenAI Claims Workflow (Interactive & Horizontal)")
+st.title("🏗️ GenAI Claims Workflow (Horizontal + Popup)")
 
-# Define step descriptions
 step_details = {
     "lodged": "📩 Claim is received via the customer portal. If more info is needed, an email is sent.",
     "fraud": "🔍 LLM performs a fraud check using historical claims and language cues.",
@@ -17,11 +16,10 @@ step_details = {
 }
 node_data = json.dumps(step_details)
 
-# Cytoscape HTML + JS
 html_content = f"""
 <div id="cy" style="width: 100%; height: 500px; border:1px solid #ccc;"></div>
 
-<!-- Tooltip box -->
+<!-- Tooltip -->
 <div id="tooltip" style="
     display:none;
     position:absolute;
@@ -36,17 +34,24 @@ html_content = f"""
     z-index: 10;
 "></div>
 
+<!-- Load Cytoscape and dagre extension -->
 <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
+<script src="https://unpkg.com/[email protected]/dist/dagre.min.js"></script>
+<script src="https://unpkg.com/[email protected]/cytoscape-dagre.js"></script>
+
 <script>
 const stepDetails = {node_data};
 
+cytoscape.use(window.cytoscapeDagre);
+
 const cy = cytoscape({{
   container: document.getElementById('cy'),
   layout: {{
-    name: 'breadthfirst',
-    directed: true,
-    padding: 10,
-    orientation: 'horizontal'
+    name: 'dagre',
+    rankDir: 'LR',  // Left to Right
+    nodeSep: 50,
+    edgeSep: 30,
+    rankSep: 100
   }},
   style: [
     {{
@@ -60,10 +65,8 @@ const cy = cytoscape({{
         'font-size': '14px',
         'text-wrap': 'wrap',
         'text-max-width': 100,
-        'width': 'label',
-        'height': 'label',
-        'padding': '10px',
-        'shape': 'roundrectangle'
+        'shape': 'roundrectangle',
+        'padding': '10px'
       }}
     }},
     {{
@@ -79,43 +82,4 @@ const cy = cytoscape({{
   elements: [
     {{ data: {{ id: 'lodged', label: '1. Claim Lodged' }} }},
     {{ data: {{ id: 'fraud', label: '2. Fraud Check' }} }},
-    {{ data: {{ id: 'coverage', label: '3. Coverage Check' }} }},
-    {{ data: {{ id: 'builder', label: '4. Builder Assignment' }} }},
-    {{ data: {{ id: 'schedule', label: '5. Schedule Repairs' }} }},
-    {{ data: {{ id: 'payment', label: '6. Authorise Payment' }} }},
-    {{ data: {{ id: 'settle', label: '7. Settle Claim' }} }},
-    {{ data: {{ source: 'lodged', target: 'fraud' }} }},
-    {{ data: {{ source: 'fraud', target: 'coverage' }} }},
-    {{ data: {{ source: 'coverage', target: 'builder' }} }},
-    {{ data: {{ source: 'builder', target: 'schedule' }} }},
-    {{ data: {{ source: 'schedule', target: 'payment' }} }},
-    {{ data: {{ source: 'payment', target: 'settle' }} }},
-  ]
-}});
-
-const tooltip = document.getElementById('tooltip');
-
-// Show tooltip on node click
-cy.on('tap', 'node', function(evt){{
-  const nodeId = evt.target.id();
-  const description = stepDetails[nodeId] || "No info available.";
-
-  const rect = document.getElementById('cy').getBoundingClientRect();
-  const pos = evt.originalEvent;
-  
-  tooltip.style.left = (pos.clientX - rect.left + 10) + 'px';
-  tooltip.style.top = (pos.clientY - rect.top + 10) + 'px';
-  tooltip.innerHTML = '<strong>' + evt.target.data('label') + '</strong><br>' + description;
-  tooltip.style.display = 'block';
-}});
-
-cy.on('tap', function(event) {{
-  if (event.target === cy) {{
-    tooltip.style.display = 'none';
-  }}
-}});
-</script>
-"""
-
-# Inject HTML into Streamlit app
-components.html(html_content, height=550, scrolling=False)
+    {{ data: