Update app.py

app.py

@@ -3,85 +3,119 @@ import streamlit.components.v1 as components
 import json
 
 st.set_page_config(layout="wide")
-st.title("GenAI Claims Workflow - Interactive Demo")
+st.title("🏗️ GenAI Claims Workflow (Interactive & Horizontal)")
 
-# Define node data and labels (pass to JS)
+# Define step descriptions
 step_details = {
-    "lodged": "The claim is received via the customer portal.",
-    "fraud": "LLM checks for fraud patterns.",
-    "coverage": "Check if claim is covered under the policy.",
-    "builder": "Assign a builder based on location and task.",
-    "schedule": "Schedule repair with builder and customer.",
-    "payment": "Authorise payment after repair is complete.",
-    "settle": "Mark claim as settled after review."
+    "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.",
+    "coverage": "📜 Policy coverage is evaluated for eligibility using claim metadata.",
+    "builder": "👷 Based on location and damage type, a builder is assigned.",
+    "schedule": "📅 Repairs are scheduled between the customer and the builder.",
+    "payment": "💳 Payment is authorised after validation of repair progress.",
+    "settle": "✅ Final review is done and the claim is marked as settled."
 }
-
 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>
-<p id="step-details" style="font-weight:bold; font-size:16px;"></p>
+
+<!-- Tooltip box -->
+<div id="tooltip" style="
+    display:none;
+    position:absolute;
+    background-color:white;
+    color:black;
+    border:1px solid #999;
+    padding:10px;
+    border-radius:5px;
+    font-size:14px;
+    box-shadow:2px 2px 10px rgba(0,0,0,0.2);
+    max-width: 300px;
+    z-index: 10;
+"></div>
+
 <script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>
 <script>
-  const stepDetails = {node_data};
+const stepDetails = {node_data};
 
-  var cy = cytoscape({{
-    container: document.getElementById('cy'),
-    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' }} }},
-    ],
-    style: [
-      {{
-        selector: 'node',
-        style: {{
-          'label': 'data(label)',
-          'text-valign': 'center',
-          'color': '#fff',
-          'background-color': '#0077B6',
-          'text-outline-width': 2,
-          'text-outline-color': '#0077B6',
-          'width': 'label',
-          'height': 'label',
-          'padding': '10px',
-          'font-size': '12px',
-          'shape': 'roundrectangle'
-        }}
-      }},
-      {{
-        selector: 'edge',
-        style: {{
-          'width': 2,
-          'line-color': '#aaa',
-          'target-arrow-color': '#aaa',
-          'target-arrow-shape': 'triangle'
-        }}
+const cy = cytoscape({{
+  container: document.getElementById('cy'),
+  layout: {{
+    name: 'breadthfirst',
+    directed: true,
+    padding: 10,
+    orientation: 'horizontal'
+  }},
+  style: [
+    {{
+      selector: 'node',
+      style: {{
+        'label': 'data(label)',
+        'text-valign': 'center',
+        'text-halign': 'center',
+        'background-color': '#0077B6',
+        'color': 'white',
+        'font-size': '14px',
+        'text-wrap': 'wrap',
+        'text-max-width': 100,
+        'width': 'label',
+        'height': 'label',
+        'padding': '10px',
+        'shape': 'roundrectangle'
+      }}
+    }},
+    {{
+      selector: 'edge',
+      style: {{
+        'width': 3,
+        'line-color': '#aaa',
+        'target-arrow-color': '#aaa',
+        'target-arrow-shape': 'triangle'
       }}
-    ],
-    layout: {{
-      name: 'breadthfirst',
-      directed: true,
-      padding: 10
     }}
-  }});
+  ],
+  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', 'node', function(evt){{
-    const nodeId = evt.target.id();
-    const info = stepDetails[nodeId] || "No details available";
-    document.getElementById('step-details').innerText = info;
-  }});
+cy.on('tap', function(event) {{
+  if (event.target === cy) {{
+    tooltip.style.display = 'none';
+  }}
+}});
 </script>
 """
 
-components.html(html_content, height=600, scrolling=False)
+# Inject HTML into Streamlit app
+components.html(html_content, height=550, scrolling=False)