Update app.py

app.py

@@ -1,25 +1,96 @@
 import streamlit as st
-from graphviz import Digraph
+import streamlit.components.v1 as components
 
-st.title("Claims Workflow")
+st.set_page_config(layout="wide")
+st.title("🏗️ GenAI Claims Workflow (Fake Horizontal Layout)")
 
-dot = Digraph()
-dot.attr(rankdir='LR')  # Horizontal
+components.html(
+    """
+<div id="cy" style="width: 100%; height: 500px; border:1px solid #ccc;"></div>
+<div id="tooltip" style="display:none; position:absolute; background:white; color:black; padding:10px; border-radius:5px; border:1px solid #666; box-shadow:2px 2px 8px rgba(0,0,0,0.2); z-index:10; max-width:300px;"></div>
 
-steps = [
-    ("lodged", "1. Claim Lodged"),
-    ("fraud", "2. Fraud Check"),
-    ("coverage", "3. Coverage Check"),
-    ("builder", "4. Builder Assignment"),
-    ("schedule", "5. Schedule Repairs"),
-    ("payment", "6. Authorise Payment"),
-    ("settle", "7. Settle Claim"),
-]
+<script src="https://unpkg.com/cytoscape@3.24.0/dist/cytoscape.min.js"></script>
 
-for step_id, label in steps:
-    dot.node(step_id, label)
+<script>
+const stepDetails = {
+  lodged: "📩 Claim is received via the customer portal.",
+  fraud: "🔍 Fraud check using LLM.",
+  coverage: "📜 Check if claim is covered by policy.",
+  builder: "👷 Assign a builder.",
+  schedule: "📅 Schedule the repair.",
+  payment: "💳 Authorise builder payment.",
+  settle: "✅ Mark claim as settled."
+};
 
-for i in range(len(steps) - 1):
-    dot.edge(steps[i][0], steps[i + 1][0])
+const cy = cytoscape({
+  container: document.getElementById('cy'),
+  layout: { name: 'preset' },  // Position manually
+  style: [
+    {
+      selector: 'node',
+      style: {
+        'label': 'data(label)',
+        'background-color': '#0077B6',
+        'color': '#fff',
+        'text-valign': 'center',
+        'text-halign': 'center',
+        'text-wrap': 'wrap',
+        'text-max-width': 100,
+        'font-size': '14px',
+        'shape': 'roundrectangle',
+        'width': 'label',
+        'height': 'label',
+        'padding': '10px'
+      }
+    },
+    {
+      selector: 'edge',
+      style: {
+        'width': 2,
+        'line-color': '#aaa',
+        'target-arrow-color': '#aaa',
+        'target-arrow-shape': 'triangle'
+      }
+    }
+  ],
+  elements: [
+    { data: { id: 'lodged', label: '1. Claim Lodged' }, position: { x: 100, y: 100 } },
+    { data: { id: 'fraud', label: '2. Fraud Check' }, position: { x: 300, y: 100 } },
+    { data: { id: 'coverage', label: '3. Coverage Check' }, position: { x: 500, y: 100 } },
+    { data: { id: 'builder', label: '4. Builder Assignment' }, position: { x: 700, y: 100 } },
+    { data: { id: 'schedule', label: '5. Schedule Repairs' }, position: { x: 900, y: 100 } },
+    { data: { id: 'payment', label: '6. Authorise Payment' }, position: { x: 1100, y: 100 } },
+    { data: { id: 'settle', label: '7. Settle Claim' }, position: { x: 1300, y: 100 } },
+    { 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' }}
+  ]
+});
 
-st.graphviz_chart(dot)
+const tooltip = document.getElementById('tooltip');
+
+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.innerHTML = '<strong>' + evt.target.data('label') + '</strong><br>' + description;
+  tooltip.style.left = (pos.clientX - rect.left + 20) + 'px';
+  tooltip.style.top = (pos.clientY - rect.top + 20) + 'px';
+  tooltip.style.display = 'block';
+});
+
+cy.on('tap', function(evt) {
+  if (evt.target === cy) {
+    tooltip.style.display = 'none';
+  }
+});
+</script>
+""",
+    height=550,
+    scrolling=False
+)