Update app.py

app.py

@@ -16,10 +16,10 @@ 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>
 
-<!-- Tooltip -->
 <div id="tooltip" style="
     display:none;
     position:absolute;
@@ -34,10 +34,9 @@ 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 src="https://unpkg.com/[email protected]/cytoscape-dagre.min.js"></script>
 
 <script>
 const stepDetails = {node_data};
@@ -46,40 +45,4 @@ cytoscape.use(window.cytoscapeDagre);
 
 const cy = cytoscape({{
   container: document.getElementById('cy'),
-  layout: {{
-    name: 'dagre',
-    rankDir: 'LR',  // Left to Right
-    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:
+  layout: