Update app.py

app.py

@@ -3,8 +3,9 @@ import streamlit.components.v1 as components
 import json
 
 st.set_page_config(layout="wide")
-st.title("🏗️ GenAI Claims Workflow (Horizontal + Popup)")
+st.title("🏗️ GenAI Claims Workflow (Horizontal + Tooltip)")
 
+# Tooltip content
 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.",
@@ -14,34 +15,22 @@ step_details = {
     "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)
+step_json = json.dumps(step_details)
 
-html_content = f"""
+# Safe HTML/JS with escaped braces
+html = f"""
 <div id="cy" style="width: 100%; height: 500px; border:1px solid #ccc;"></div>
-
-<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>
+<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>
 
 <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.min.js"></script>
 
 <script>
-const stepDetails = {node_data};
-
 cytoscape.use(window.cytoscapeDagre);
 
+const stepDetails = {step_json};
+
 const cy = cytoscape({{
   container: document.getElementById('cy'),
   layout: {{
@@ -49,7 +38,7 @@ const cy = cytoscape({{
     rankDir: 'LR',
     nodeSep: 50,
     edgeSep: 30,
-    rankSep: 100
+    rankSep: 120
   }},
   style: [
     {{
@@ -59,10 +48,10 @@ const cy = cytoscape({{
         'text-valign': 'center',
         'text-halign': 'center',
         'background-color': '#0077B6',
-        'color': 'white',
+        'color': '#fff',
         'font-size': '14px',
         'text-wrap': 'wrap',
-        'text-max-width': 100,
+        'text-max-width': 80,
         'shape': 'roundrectangle',
         'padding': '10px'
       }}
@@ -70,7 +59,7 @@ const cy = cytoscape({{
     {{
       selector: 'edge',
       style: {{
-        'width': 3,
+        'width': 2,
         'line-color': '#aaa',
         'target-arrow-color': '#aaa',
         'target-arrow-shape': 'triangle'
@@ -102,18 +91,19 @@ cy.on('tap', 'node', function(evt) {{
   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.left = (pos.clientX - rect.left + 20) + 'px';
+  tooltip.style.top = (pos.clientY - rect.top + 20) + 'px';
   tooltip.style.display = 'block';
 }});
 
-cy.on('tap', function(event) {{
-  if (event.target === cy) {{
+cy.on('tap', function(evt) {{
+  if (evt.target === cy) {{
     tooltip.style.display = 'none';
   }}
 }});
 </script>
 """
 
-components.html(html_content, height=550, scrolling=False)
+# Inject into Streamlit
+components.html(html, height=550, scrolling=False)