Update app.py

app.py

@@ -16,7 +16,6 @@ step_details = {
 }
 node_data = json.dumps(step_details)
 
-# 👇 Use triple quotes carefully — this version closes correctly
 html_content = f"""
 <div id="cy" style="width: 100%; height: 500px; border:1px solid #ccc;"></div>
 
@@ -45,4 +44,76 @@ cytoscape.use(window.cytoscapeDagre);
 
 const cy = cytoscape({{
   container: document.getElementById('cy'),
-  layout:
+  layout: {{
+    name: 'dagre',
+    rankDir: 'LR',
+    nodeSep: 50,
+    edgeSep: 30,
+    rankSep: 100
+  }},
+  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,
+        'shape': 'roundrectangle',
+        'padding': '10px'
+      }}
+    }},
+    {{
+      selector: 'edge',
+      style: {{
+        'width': 3,
+        'line-color': '#aaa',
+        'target-arrow-color': '#aaa',
+        'target-arrow-shape': 'triangle'
+      }}
+    }}
+  ],
+  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');
+
+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>
+"""
+
+components.html(html_content, height=550, scrolling=False)