644 lines
33 KiB
HTML
644 lines
33 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>State Machine Explorer - click.kamil.examples.enterprise.config.EnterpriseStateMachineConfig</title>
|
|
<!-- Popper and Tippy for tooltips -->
|
|
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
|
<script src="https://unpkg.com/tippy.js@6"></script>
|
|
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/animations/scale.css"/>
|
|
<!-- SVG Pan & Zoom -->
|
|
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
|
|
<!-- Google Fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;900&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--sidebar-bg: #ffffff;
|
|
--main-bg: #f8fafc;
|
|
--accent: #ef4444;
|
|
--primary: #3b82f6;
|
|
--text: #0f172a;
|
|
--text-muted: #64748b;
|
|
--border: #e2e8f0;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
display: flex;
|
|
height: 100vh;
|
|
font-family: 'Inter', -apple-system, sans-serif;
|
|
background: var(--main-bg);
|
|
color: var(--text);
|
|
overflow: hidden;
|
|
}
|
|
|
|
#sidebar {
|
|
width: 420px;
|
|
background: var(--sidebar-bg);
|
|
border-right: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 30px;
|
|
overflow-y: auto;
|
|
box-shadow: 10px 0 15px rgba(0,0,0,0.02);
|
|
z-index: 10;
|
|
}
|
|
|
|
header h1 { font-weight: 900; font-size: 1.6rem; color: var(--text); margin: 0 0 5px 0; letter-spacing: -0.5px; }
|
|
header p { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-muted); margin: 0 0 35px 0; opacity: 0.7; }
|
|
|
|
.ep-card {
|
|
padding: 18px;
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
margin-bottom: 15px;
|
|
cursor: pointer;
|
|
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
|
|
}
|
|
|
|
.ep-card:hover {
|
|
border-color: var(--primary);
|
|
transform: translateX(5px);
|
|
box-shadow: 0 15px 30px -10px rgba(59, 130, 246, 0.15);
|
|
}
|
|
|
|
.ep-type {
|
|
font-size: 0.6rem;
|
|
font-weight: 900;
|
|
padding: 3px 8px; border-radius: 6px;
|
|
display: inline-block;
|
|
margin-bottom: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.8px;
|
|
}
|
|
.type-rest { background: #eff6ff; color: #1d4ed8; }
|
|
.type-custom { background: #fef2f2; color: #b91c1c; }
|
|
.type-jms { background: #f5f3ff; color: #7c3aed; }
|
|
|
|
.ep-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; color: var(--text); }
|
|
.ep-fqn { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: var(--text-muted); opacity: 0.8; }
|
|
|
|
#main { flex-grow: 1; position: relative; background: var(--main-bg); overflow: hidden; }
|
|
#svg-container {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
/* SVG Highlighting - Sleek Technical Tracers */
|
|
svg .stereotype { display: none !important; }
|
|
|
|
.active-path path {
|
|
stroke: var(--accent) !important;
|
|
stroke-width: 2.0px !important;
|
|
filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.3));
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.active-path text, a.active-path text {
|
|
fill: #000 !important;
|
|
font-weight: 900 !important;
|
|
paint-order: stroke;
|
|
stroke: #fff;
|
|
stroke-width: 3.5px;
|
|
}
|
|
|
|
.dimmed {
|
|
opacity: 0.25 !important;
|
|
filter: grayscale(1);
|
|
transition: opacity 0.4s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Tippy Styling */
|
|
.tippy-box[data-theme~='modern'] {
|
|
background-color: #fff;
|
|
color: var(--text);
|
|
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
|
|
border: 1px solid var(--border);
|
|
border-radius: 16px;
|
|
padding: 0;
|
|
max-width: 550px !important;
|
|
}
|
|
|
|
.tooltip-content {
|
|
padding: 20px;
|
|
max-width: 500px;
|
|
word-break: break-word;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.payload-box {
|
|
background: #0f172a;
|
|
color: #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.75rem;
|
|
line-height: 1.5;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="sidebar">
|
|
<header>
|
|
<h1>Explorer</h1>
|
|
<p>click.kamil.examples.enterprise.config.EnterpriseStateMachineConfig</p>
|
|
</header>
|
|
|
|
<div id="ep-list"></div>
|
|
</div>
|
|
|
|
<div id="main">
|
|
<div id="svg-container">
|
|
<?xml version="1.0" encoding="us-ascii" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" contentStyleType="text/css" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 284 808" zoomAndPan="magnify"><defs/><g><rect fill="#FFFFFF" height="45.8333" rx="14.3229" ry="14.3229" style="stroke:#94A3B8;stroke-width:1.1458333333333333;" width="57.2917" x="155.2604" y="83.6458"/><text fill="#000000" font-family="Inter" font-size="10.3125" font-weight="bold" lengthAdjust="spacing" textLength="22.9167" x="172.4479" y="110.4599">NEW</text><rect fill="#FFFFFF" height="45.8333" rx="14.3229" ry="14.3229" style="stroke:#94A3B8;stroke-width:1.1458333333333333;" width="124.8958" x="121.4583" y="184.4792"/><text fill="#000000" font-family="Inter" font-size="10.3125" font-weight="bold" lengthAdjust="spacing" textLength="113.4375" x="127.1875" y="211.2932">CHECK_AVAILABILITY</text><rect fill="#FFFFFF" height="45.8333" rx="14.3229" ry="14.3229" style="stroke:#94A3B8;stroke-width:1.1458333333333333;" width="116.875" x="75.0521" y="285.3125"/><text fill="#000000" font-family="Inter" font-size="10.3125" font-weight="bold" lengthAdjust="spacing" textLength="105.4167" x="80.7813" y="312.1266">PENDING_PAYMENT</text><rect fill="#FFFFFF" height="45.8333" rx="14.3229" ry="14.3229" style="stroke:#94A3B8;stroke-width:1.1458333333333333;" width="72.1875" x="126.0417" y="486.9792"/><text fill="#000000" font-family="Inter" font-size="10.3125" font-weight="bold" lengthAdjust="spacing" textLength="60.7292" x="131.7708" y="513.7932">CANCELLED</text><rect fill="#FFFFFF" height="45.8333" rx="14.3229" ry="14.3229" style="stroke:#94A3B8;stroke-width:1.1458333333333333;" width="57.2917" x="104.8438" y="386.1458"/><text fill="#000000" font-family="Inter" font-size="10.3125" font-weight="bold" lengthAdjust="spacing" textLength="26.3542" x="120.3125" y="412.9599">PAID</text><rect fill="#FFFFFF" height="45.8333" rx="14.3229" ry="14.3229" style="stroke:#94A3B8;stroke-width:1.1458333333333333;" width="57.2917" x="23.4896" y="486.9792"/><text fill="#000000" font-family="Inter" font-size="10.3125" font-weight="bold" lengthAdjust="spacing" textLength="44.6875" x="29.7917" y="513.7932">SHIPPED</text><rect fill="#FFFFFF" height="45.8333" rx="14.3229" ry="14.3229" style="stroke:#94A3B8;stroke-width:1.1458333333333333;" width="67.6042" x="18.3333" y="587.8125"/><text fill="#000000" font-family="Inter" font-size="10.3125" font-weight="bold" lengthAdjust="spacing" textLength="56.1458" x="24.0625" y="614.6266">DELIVERED</text><rect fill="#FFFFFF" height="45.8333" rx="14.3229" ry="14.3229" style="stroke:#94A3B8;stroke-width:1.1458333333333333;" width="67.6042" x="6.875" y="688.6458"/><text fill="#000000" font-family="Inter" font-size="10.3125" font-weight="bold" lengthAdjust="spacing" textLength="56.1458" x="12.6042" y="715.4599">RETURNED</text><ellipse cx="183.9063" cy="25.2083" fill="#222222" rx="11.4583" ry="11.4583" style="stroke:#222222;stroke-width:1.1458333333333333;"/><ellipse cx="118.5937" cy="789.4792" fill="none" rx="12.6042" ry="12.6042" style="stroke:#222222;stroke-width:1.1458333333333333;"/><ellipse cx="118.5937" cy="789.4792" fill="#222222" rx="6.875" ry="6.875" style="stroke:#222222;stroke-width:1.1458333333333333;"/><polygon fill="#CBD5E1" points="183.9063,83.3979,188.4896,73.0854,183.9063,77.6688,179.3229,73.0854,183.9063,83.3979" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><path d="M183.9063,41.323 C183.9063,52.7366 183.9063,62.8874 183.9063,76.5229 " fill="none" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><polygon fill="#1E90FF" points="183.9063,184.4415,188.4896,174.129,183.9063,178.7124,179.3229,174.129,183.9063,184.4415" style="stroke:#1E90FF;stroke-width:1.1458333333333333;"/><path d="M183.9063,129.5779 C183.9063,145.908 183.9063,161.2512 183.9063,177.5665 " fill="none" style="stroke:#1E90FF;stroke-width:2.2916666666666665;"/><a href="#link_PLACE_ORDER" target="_self" title="#link_PLACE_ORDER" xlink:actuate="onRequest" xlink:href="#link_PLACE_ORDER" xlink:show="new" xlink:title="#link_PLACE_ORDER" xlink:type="simple"><text fill="#0000FF" font-family="JetBrains Mono" font-size="9.1667" lengthAdjust="spacing" text-decoration="underline" textLength="61.875" x="185.0521" y="160.1123">PLACE_ORDER</text></a><polygon fill="#FF6347" points="136.4325,284.9002,142.8581,275.623,137.5006,279.2715,133.8521,273.914,136.4325,284.9002" style="stroke:#FF6347;stroke-width:1.1458333333333333;"/><path d="M161.5708,230.403 C156.2266,236.6129 150.9897,243.6742 147.2396,250.9375 C141.8068,261.4597 139.7427,267.4563 137.7142,278.1458 " fill="none" style="stroke:#FF6347;stroke-width:2.2916666666666665;"/><text fill="#000000" font-family="JetBrains Mono" font-size="9.1667" lengthAdjust="spacing" textLength="58.4375" x="148.3854" y="260.9456">[λ] (order=0)</text><polygon fill="#FF6347" points="193.3541,486.5401,203.9209,482.578,197.4393,482.5233,197.494,476.0418,193.3541,486.5401" style="stroke:#FF6347;stroke-width:1.1458333333333333;"/><path d="M199.1888,230.4886 C202.7857,236.8065 206.1109,243.9002 207.9688,250.9375 C232.4074,343.5066 246.3223,378.6314 207.9688,466.3542 C204.6687,473.9022 204.1907,475.885 198.2563,481.72 " fill="none" style="stroke:#FF6347;stroke-width:2.2916666666666665;"/><text fill="#000000" font-family="JetBrains Mono" font-size="9.1667" lengthAdjust="spacing" textLength="42.3958" x="233.1771" y="361.779">(order=1)</text><polygon fill="#1E90FF" points="133.4896,386.1082,138.0729,375.7957,133.4896,380.379,128.9063,375.7957,133.4896,386.1082" style="stroke:#1E90FF;stroke-width:1.1458333333333333;"/><path d="M133.4896,331.2446 C133.4896,347.5746 133.4896,362.9179 133.4896,379.2332 " fill="none" style="stroke:#1E90FF;stroke-width:2.2916666666666665;"/><a href="#link_PAY_ORDER" target="_self" title="#link_PAY_ORDER" xlink:actuate="onRequest" xlink:href="#link_PAY_ORDER" xlink:show="new" xlink:title="#link_PAY_ORDER" xlink:type="simple"><text fill="#0000FF" font-family="JetBrains Mono" font-size="9.1667" lengthAdjust="spacing" text-decoration="underline" textLength="51.5625" x="134.6354" y="361.779">PAY_ORDER</text></a><polygon fill="#1E90FF" points="56.8151,486.9522,64.0515,478.2926,58.3867,481.4429,55.2365,475.7781,56.8151,486.9522" style="stroke:#1E90FF;stroke-width:1.1458333333333333;"/><path d="M104.567,425.3058 C93.3716,432.3414 81.2384,441.6055 72.7604,452.6042 C65.026,462.6382 61.8652,469.2487 58.701,480.341 " fill="none" style="stroke:#1E90FF;stroke-width:2.2916666666666665;"/><a href="#link_SHIP_ORDER" target="_self" title="#link_SHIP_ORDER" xlink:actuate="onRequest" xlink:href="#link_SHIP_ORDER" xlink:show="new" xlink:title="#link_SHIP_ORDER" xlink:type="simple"><text fill="#0000FF" font-family="JetBrains Mono" font-size="9.1667" lengthAdjust="spacing" text-decoration="underline" textLength="52.7083" x="73.9063" y="462.6123">SHIP_ORDER</text></a><polygon fill="#1E90FF" points="52.1354,587.7749,56.7187,577.4624,52.1354,582.0457,47.5521,577.4624,52.1354,587.7749" style="stroke:#1E90FF;stroke-width:1.1458333333333333;"/><path d="M52.1354,532.9113 C52.1354,549.2413 52.1354,564.5846 52.1354,580.8999 " fill="none" style="stroke:#1E90FF;stroke-width:2.2916666666666665;"/><a href="#link_FINALIZE" target="_self" title="#link_FINALIZE" xlink:actuate="onRequest" xlink:href="#link_FINALIZE" xlink:show="new" xlink:title="#link_FINALIZE" xlink:type="simple"><text fill="#0000FF" font-family="JetBrains Mono" font-size="9.1667" lengthAdjust="spacing" text-decoration="underline" textLength="37.8125" x="53.2813" y="563.4456">FINALIZE</text></a><polygon fill="#1E90FF" points="144.5043,486.5929,142.7695,475.4419,141.4003,481.7775,135.0648,480.4082,144.5043,486.5929" style="stroke:#1E90FF;stroke-width:1.1458333333333333;"/><path d="M131.1644,432.5173 C130.7693,443.0013 131.3158,455.5428 134.6354,466.3542 C136.7986,473.399 136.7782,474.6067 140.7795,480.8144 " fill="none" style="stroke:#1E90FF;stroke-width:2.2916666666666665;"/><a href="#link_CANCEL_ORDER" target="_self" title="#link_CANCEL_ORDER" xlink:actuate="onRequest" xlink:href="#link_CANCEL_ORDER" xlink:show="new" xlink:title="#link_CANCEL_ORDER" xlink:type="simple"><text fill="#0000FF" font-family="JetBrains Mono" font-size="9.1667" lengthAdjust="spacing" text-decoration="underline" textLength="71.0417" x="135.7813" y="462.6123">CANCEL_ORDER</text></a><polygon fill="#1E90FF" points="32.3741,688.4334,34.0755,677.2773,30.8632,682.9071,25.2334,679.6947,32.3741,688.4334" style="stroke:#1E90FF;stroke-width:1.1458333333333333;"/><path d="M38.2967,633.9817 C35.0422,640.3003 32.0367,647.3543 30.3646,654.2708 C27.6632,665.4452 27.7142,671.3892 30.561,681.8018 " fill="none" style="stroke:#1E90FF;stroke-width:2.2916666666666665;"/><a href="#link_RETURN_ORDER" target="_self" title="#link_RETURN_ORDER" xlink:actuate="onRequest" xlink:href="#link_RETURN_ORDER" xlink:show="new" xlink:title="#link_RETURN_ORDER" xlink:type="simple"><text fill="#0000FF" font-family="JetBrains Mono" font-size="9.1667" lengthAdjust="spacing" text-decoration="underline" textLength="69.8958" x="31.5104" y="664.279">RETURN_ORDER</text></a><polygon fill="#CBD5E1" points="127.7514,776.8421,137.1948,770.6634,130.8584,772.0286,129.4932,765.6922,127.7514,776.8421" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><path d="M163.0859,532.9967 C164.3101,576.6856 163.7713,677.1202 138.0729,756.25 C135.7182,763.5005 135.3263,765.1068 131.4798,771.0659 " fill="none" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><polygon fill="#CBD5E1" points="120.0589,776.6301,125.5441,766.7677,120.5701,770.9238,116.414,765.9498,120.0589,776.6301" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><path d="M85.7381,633.9352 C92.3042,639.778 98.4245,646.6219 102.5521,654.2708 C124.3301,694.628 122.9267,744.6187 120.6723,769.7826 " fill="none" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><polygon fill="#CBD5E1" points="105.6782,776.7536,101.5492,766.2509,101.5972,772.7326,95.1156,772.7806,105.6782,776.7536" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><path d="M62.7965,734.5024 C76.6538,748.156 89.1336,760.4522 100.781,771.9284 " fill="none" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><!--SRC=[ZLFjRjCm5FsVfxYeVnYYKiC6h6XKIbk7PMGXoifGgQh8JRpMQcf7ZaSfY2VZ7NWcdERBD9d4ltlFiSyvlhQVfGAlTnWIVE2F4h8TaPXXOqDZ0cINoWF498i4JINbh80pIGJXyf0I8zjIbcA1Tmh4ai1F0s2Ce-rQy4SMJtZ21UmtL98Svo8cei1wmmjylhgiqTc6Hbj6iWnCXTcSIG_l23XCMPN07Vr1O5Wryf0GMF4aLa1GU0b61BmQAC37SKpPMcdzqXDkSCptEVw0aqpFRWd1zxNf3P5ZWIdBu9OpthNi6ENob2bF5gtYryGy9VK3DbISKZ3DWHxoszgbR3l3OaqaX1b97enYj1xwKbQJQpJv65htbkDQOyTrPlEIy94tTRmFeM_DRv4tgvPRtWIvBffMgoodAk-k7T-lYIbodNiKr7s0Pfy3JxN6uiKI-ltHCSEJ8U3gAjfm6f7Ho33KIkWlUYOQ3cpxPNvHIxM_SnFvhYwPuMGqoflGTwq92Zy5KnGev1qi5hr4JKJ7GQkNIwD3LLdRzflpYxUrzSbiwh1X_euBep-_b_3y-1pV3yx-JxMUROTUAMMU6QVUxS7aTz8n2clUDOWAXRfIGpWgj8NB6svhvqI7U0D3KohvIgVjKB-QjeVjU9RhV4N_E5GWLCNJuVNfdaWNLCS1T0BqHjaqKTjUrMDlMnLCXvLEWDueAwF9ddySzO5qznAfFKlWBm00]--></g></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<script id="metadata-json" type="application/json">
|
|
{
|
|
"name" : "click.kamil.examples.enterprise.config.EnterpriseStateMachineConfig",
|
|
"transitions" : [ {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"NEW\"",
|
|
"fullIdentifier" : "NEW"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"CHECK_AVAILABILITY\"",
|
|
"fullIdentifier" : "CHECK_AVAILABILITY"
|
|
} ],
|
|
"event" : "PLACE_ORDER",
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "CHOICE",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"CHECK_AVAILABILITY\"",
|
|
"fullIdentifier" : "CHECK_AVAILABILITY"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"PENDING_PAYMENT\"",
|
|
"fullIdentifier" : "PENDING_PAYMENT"
|
|
} ],
|
|
"event" : null,
|
|
"guard" : {
|
|
"expression" : "(c) -> true",
|
|
"isLambda" : true
|
|
},
|
|
"actions" : [ ],
|
|
"order" : 0
|
|
}, {
|
|
"type" : "CHOICE",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"CHECK_AVAILABILITY\"",
|
|
"fullIdentifier" : "CHECK_AVAILABILITY"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"CANCELLED\"",
|
|
"fullIdentifier" : "CANCELLED"
|
|
} ],
|
|
"event" : null,
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : 1
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"PENDING_PAYMENT\"",
|
|
"fullIdentifier" : "PENDING_PAYMENT"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"PAID\"",
|
|
"fullIdentifier" : "PAID"
|
|
} ],
|
|
"event" : "PAY_ORDER",
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"PAID\"",
|
|
"fullIdentifier" : "PAID"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"SHIPPED\"",
|
|
"fullIdentifier" : "SHIPPED"
|
|
} ],
|
|
"event" : "SHIP_ORDER",
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"SHIPPED\"",
|
|
"fullIdentifier" : "SHIPPED"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"DELIVERED\"",
|
|
"fullIdentifier" : "DELIVERED"
|
|
} ],
|
|
"event" : "FINALIZE",
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"PAID\"",
|
|
"fullIdentifier" : "PAID"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"CANCELLED\"",
|
|
"fullIdentifier" : "CANCELLED"
|
|
} ],
|
|
"event" : "CANCEL_ORDER",
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "\"DELIVERED\"",
|
|
"fullIdentifier" : "DELIVERED"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "\"RETURNED\"",
|
|
"fullIdentifier" : "RETURNED"
|
|
} ],
|
|
"event" : "RETURN_ORDER",
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
} ],
|
|
"startStates" : [ "NEW" ],
|
|
"endStates" : [ "CANCELLED", "DELIVERED", "RETURNED" ],
|
|
"renderChoicesAsDiamonds" : true,
|
|
"metadata" : {
|
|
"triggers" : [ {
|
|
"event" : "AUDIT_EVENT",
|
|
"className" : "click.kamil.examples.enterprise.api.SecurityInterceptor",
|
|
"methodName" : "preHandle",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 17
|
|
}, {
|
|
"event" : "PLACE_ORDER",
|
|
"className" : "click.kamil.examples.enterprise.service.OrderServiceImpl",
|
|
"methodName" : "place",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 16
|
|
}, {
|
|
"event" : "CANCEL_ORDER",
|
|
"className" : "click.kamil.examples.enterprise.service.OrderServiceImpl",
|
|
"methodName" : "cancel",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 21
|
|
}, {
|
|
"event" : "PAY_ORDER",
|
|
"className" : "click.kamil.examples.enterprise.service.ReactivePaymentService",
|
|
"methodName" : "processPayment",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 18
|
|
}, {
|
|
"event" : "SHIP_ORDER",
|
|
"className" : "click.kamil.examples.enterprise.messaging.ShippingJmsListener",
|
|
"methodName" : "onShippingReady",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 17
|
|
}, {
|
|
"event" : "RETURN_ORDER",
|
|
"className" : "click.kamil.examples.enterprise.messaging.ReturnsRabbitListener",
|
|
"methodName" : "onReturn",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 17
|
|
} ],
|
|
"entryPoints" : [ {
|
|
"type" : "REST",
|
|
"name" : "POST /api/enterprise/orders/place",
|
|
"className" : "click.kamil.examples.enterprise.api.OrderController",
|
|
"methodName" : "placeOrder",
|
|
"metadata" : {
|
|
"path" : "/api/enterprise/orders/place",
|
|
"verb" : "POST"
|
|
}
|
|
}, {
|
|
"type" : "REST",
|
|
"name" : "POST /api/enterprise/orders/{id}/cancel",
|
|
"className" : "click.kamil.examples.enterprise.api.OrderController",
|
|
"methodName" : "cancelOrder",
|
|
"metadata" : {
|
|
"path" : "/api/enterprise/orders/{id}/cancel",
|
|
"verb" : "POST"
|
|
}
|
|
}, {
|
|
"type" : "CUSTOM",
|
|
"name" : "INTERCEPTOR: SecurityInterceptor.preHandle",
|
|
"className" : "click.kamil.examples.enterprise.api.SecurityInterceptor",
|
|
"methodName" : "preHandle",
|
|
"metadata" : {
|
|
"interceptorType" : "Spring MVC Interceptor"
|
|
}
|
|
}, {
|
|
"type" : "REST",
|
|
"name" : "POST /api/enterprise/payments",
|
|
"className" : "click.kamil.examples.enterprise.api.ReactivePaymentController",
|
|
"methodName" : "pay",
|
|
"metadata" : {
|
|
"path" : "/api/enterprise/payments",
|
|
"verb" : "POST"
|
|
}
|
|
} ],
|
|
"callChains" : [ {
|
|
"entryPoint" : {
|
|
"type" : "REST",
|
|
"name" : "POST /api/enterprise/orders/place",
|
|
"className" : "click.kamil.examples.enterprise.api.OrderController",
|
|
"methodName" : "placeOrder",
|
|
"metadata" : {
|
|
"path" : "/api/enterprise/orders/place",
|
|
"verb" : "POST"
|
|
}
|
|
},
|
|
"methodChain" : [ "click.kamil.examples.enterprise.api.OrderController.placeOrder", "click.kamil.examples.enterprise.service.OrderServiceImpl.place" ],
|
|
"triggerPoint" : {
|
|
"event" : "PLACE_ORDER",
|
|
"className" : "click.kamil.examples.enterprise.service.OrderServiceImpl",
|
|
"methodName" : "place",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 16
|
|
}
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "REST",
|
|
"name" : "POST /api/enterprise/orders/{id}/cancel",
|
|
"className" : "click.kamil.examples.enterprise.api.OrderController",
|
|
"methodName" : "cancelOrder",
|
|
"metadata" : {
|
|
"path" : "/api/enterprise/orders/{id}/cancel",
|
|
"verb" : "POST"
|
|
}
|
|
},
|
|
"methodChain" : [ "click.kamil.examples.enterprise.api.OrderController.cancelOrder", "click.kamil.examples.enterprise.service.OrderServiceImpl.cancel" ],
|
|
"triggerPoint" : {
|
|
"event" : "CANCEL_ORDER",
|
|
"className" : "click.kamil.examples.enterprise.service.OrderServiceImpl",
|
|
"methodName" : "cancel",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 21
|
|
}
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "CUSTOM",
|
|
"name" : "INTERCEPTOR: SecurityInterceptor.preHandle",
|
|
"className" : "click.kamil.examples.enterprise.api.SecurityInterceptor",
|
|
"methodName" : "preHandle",
|
|
"metadata" : {
|
|
"interceptorType" : "Spring MVC Interceptor"
|
|
}
|
|
},
|
|
"methodChain" : [ "click.kamil.examples.enterprise.api.SecurityInterceptor.preHandle" ],
|
|
"triggerPoint" : {
|
|
"event" : "AUDIT_EVENT",
|
|
"className" : "click.kamil.examples.enterprise.api.SecurityInterceptor",
|
|
"methodName" : "preHandle",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 17
|
|
}
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "REST",
|
|
"name" : "POST /api/enterprise/payments",
|
|
"className" : "click.kamil.examples.enterprise.api.ReactivePaymentController",
|
|
"methodName" : "pay",
|
|
"metadata" : {
|
|
"path" : "/api/enterprise/payments",
|
|
"verb" : "POST"
|
|
}
|
|
},
|
|
"methodChain" : [ "click.kamil.examples.enterprise.api.ReactivePaymentController.pay", "click.kamil.examples.enterprise.service.ReactivePaymentService.processPayment" ],
|
|
"triggerPoint" : {
|
|
"event" : "PAY_ORDER",
|
|
"className" : "click.kamil.examples.enterprise.service.ReactivePaymentService",
|
|
"methodName" : "processPayment",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"lineNumber" : 18
|
|
}
|
|
} ],
|
|
"properties" : { }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
const metadata = JSON.parse(document.getElementById('metadata-json').textContent);
|
|
let panZoomInstance;
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const svg = document.querySelector('svg');
|
|
panZoomInstance = svgPanZoom(svg, { zoomEnabled: true, controlIconsEnabled: true, fit: true, center: true });
|
|
|
|
populateSidebar();
|
|
attachInteractivity();
|
|
});
|
|
|
|
function populateSidebar() {
|
|
const list = document.getElementById('ep-list');
|
|
const entryPoints = metadata.metadata.entryPoints || [];
|
|
|
|
entryPoints.forEach(ep => {
|
|
const card = document.createElement('div');
|
|
card.className = 'ep-card';
|
|
card.innerHTML = `
|
|
<div class="ep-type type-${ep.type.toLowerCase()}">${ep.type}</div>
|
|
<div class="ep-name">${ep.name}</div>
|
|
<div class="ep-fqn">${ep.className}.${ep.methodName}</div>
|
|
`;
|
|
card.onmouseenter = () => highlightPaths(ep);
|
|
card.onmouseleave = clearHighlights;
|
|
list.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function highlightPaths(ep) {
|
|
clearHighlights();
|
|
const chains = metadata.metadata.callChains || [];
|
|
|
|
// Surgical Filter: Match by full class and method name
|
|
const relevantEvents = chains
|
|
.filter(c => c.entryPoint.className === ep.className && c.entryPoint.methodName === ep.methodName)
|
|
.map(c => c.triggerPoint.event);
|
|
|
|
if (relevantEvents.length === 0) return;
|
|
|
|
const svg = document.querySelector('svg');
|
|
|
|
// Dim all shapes and texts
|
|
svg.querySelectorAll('path, rect, circle, ellipse, text, polygon').forEach(el => {
|
|
el.classList.add('dimmed');
|
|
});
|
|
|
|
relevantEvents.forEach(evt => {
|
|
const normalized = normalize(evt);
|
|
const linkId = "#link_" + normalized;
|
|
|
|
// Find <a> tags via hyperlinks
|
|
svg.querySelectorAll(`a[*|href="${linkId}"], a[href="${linkId}"]`).forEach(link => {
|
|
link.classList.add('active-path');
|
|
link.querySelectorAll('*').forEach(child => child.classList.remove('dimmed'));
|
|
|
|
// Surgical Selection: Grab ONLY the immediate path and polygon
|
|
let prev = link.previousElementSibling;
|
|
let foundPath = false;
|
|
let foundPolygon = false;
|
|
while (prev) {
|
|
if (!foundPath && prev.tagName === 'path') {
|
|
prev.classList.remove('dimmed');
|
|
prev.classList.add('active-path');
|
|
foundPath = true;
|
|
} else if (!foundPolygon && prev.tagName === 'polygon') {
|
|
prev.classList.remove('dimmed');
|
|
prev.classList.add('active-path');
|
|
foundPolygon = true;
|
|
} else if (['rect', 'circle', 'ellipse', 'text'].includes(prev.tagName)) {
|
|
break;
|
|
}
|
|
if (foundPath && foundPolygon) break;
|
|
prev = prev.previousElementSibling;
|
|
}
|
|
});
|
|
});
|
|
|
|
// Keep all nodes visible for context
|
|
svg.querySelectorAll('rect, circle, ellipse').forEach(el => {
|
|
el.classList.remove('dimmed');
|
|
let next = el.nextElementSibling;
|
|
if (next && next.tagName === 'text') next.classList.remove('dimmed');
|
|
});
|
|
}
|
|
|
|
function clearHighlights() {
|
|
document.querySelectorAll('.dimmed, .active-path').forEach(el => {
|
|
el.classList.remove('dimmed', 'active-path');
|
|
});
|
|
}
|
|
|
|
function attachInteractivity() {
|
|
const svg = document.querySelector('svg');
|
|
const transitions = metadata.transitions || [];
|
|
|
|
// Attach tooltips to hyperlink groups
|
|
svg.querySelectorAll('a').forEach(link => {
|
|
const href = link.getAttribute('xlink:href') || link.getAttribute('href');
|
|
if (!href || !href.startsWith('#link_')) return;
|
|
|
|
const eventName = href.replace('#link_', '');
|
|
const metaTrans = transitions.find(t => normalize(t.event) === eventName);
|
|
const chains = (metadata.metadata.callChains || []).filter(c => normalize(c.triggerPoint.event) === eventName);
|
|
|
|
if (metaTrans || chains.length > 0) {
|
|
link.style.cursor = 'pointer';
|
|
|
|
// Map to the associated path
|
|
let pathToTrigger = null;
|
|
let prev = link.previousElementSibling;
|
|
while (prev) {
|
|
if (prev.tagName === 'path') {
|
|
pathToTrigger = prev;
|
|
break;
|
|
}
|
|
if (['rect', 'circle'].includes(prev.tagName)) break;
|
|
prev = prev.previousElementSibling;
|
|
}
|
|
|
|
const setupTippy = (el) => {
|
|
tippy(el, {
|
|
content: createTooltip(eventName, metaTrans, chains),
|
|
allowHTML: true,
|
|
theme: 'modern',
|
|
interactive: true,
|
|
appendTo: document.body,
|
|
placement: 'right',
|
|
offset: [0, 20]
|
|
});
|
|
};
|
|
|
|
setupTippy(link);
|
|
if (pathToTrigger) {
|
|
pathToTrigger.style.cursor = 'pointer';
|
|
setupTippy(pathToTrigger);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function normalize(s) {
|
|
if (!s) return "";
|
|
return s.replace(/[^a-zA-Z0-9]/g, '_');
|
|
}
|
|
|
|
function createTooltip(name, trans, chains) {
|
|
let html = `<div class="tooltip-content">
|
|
<div style="font-weight:900; font-size:1.1rem; margin-bottom:12px; border-bottom:1px solid #eee; padding-bottom:8px; line-height:1.3;">
|
|
Event: <span style="color:var(--accent)">${name}</span>
|
|
</div>`;
|
|
|
|
if (trans && trans.guard) {
|
|
html += `<div style="font-size:0.7rem; font-weight:800; color:#94a3b8; text-transform:uppercase; margin-bottom:4px">Guard</div>
|
|
<div style="background:#f1f5f9; padding:8px; border-radius:6px; font-family:'JetBrains Mono', monospace; font-size:0.8rem; margin-bottom:12px; border:1px solid #e2e8f0;">${trans.guard.expression}</div>`;
|
|
}
|
|
|
|
if (chains && chains.length > 0) {
|
|
html += `<div style="font-size:0.7rem; font-weight:800; color:#94a3b8; text-transform:uppercase; margin-bottom:10px; border-top:1px solid #eee; padding-top:10px">Triggered by</div>`;
|
|
chains.forEach(c => {
|
|
html += `<div style="margin-bottom:15px">
|
|
<div style="font-weight:700; font-size:0.85rem; color:var(--text);">${c.entryPoint.name}</div>
|
|
<div style="margin-left:10px; border-left:2px solid #e2e8f0; padding-left:12px; margin-top:8px">
|
|
${c.methodChain.map((m, i) => `<div style="font-size:0.7rem; color:#475569; margin-top:4px; font-family:'JetBrains Mono', monospace;"><b>${i+1}</b> ${m}</div>`).join('')}
|
|
</div>
|
|
</div>`;
|
|
});
|
|
}
|
|
|
|
// Placeholder for Data Object
|
|
html += `<div style="font-size:0.7rem; font-weight:800; color:#94a3b8; text-transform:uppercase; margin-bottom:8px; border-top:1px solid #eee; padding-top:10px">Data Payload (Planned)</div>
|
|
<div class="payload-box">
|
|
<span style="color:#ef4444">OrderRequest</span> {<br>
|
|
<span style="color:#64748b">// Full AST field mapping to be implemented</span><br>
|
|
id: "ORD-123",<br>
|
|
quantity: 5<br>
|
|
}
|
|
</div></div>`;
|
|
return html;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|