app.py

import streamlit as st
import streamlit.components.v1 as components

st.set_page_config(layout="wide")
st.title("🏗️ GenAI Claims Workflow (Fake Horizontal Layout)")

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>

<script src="https://unpkg.com/[email protected]/dist/cytoscape.min.js"></script>

<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."
};

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' }}
  ]
});

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
)