1071 lines
47 KiB
HTML
1071 lines
47 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.domain.StateMachineConfig</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: 480px;
|
|
min-width: 350px;
|
|
max-width: 900px;
|
|
background: var(--sidebar-bg);
|
|
border-right: 2px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 10px 0 15px rgba(0,0,0,0.02);
|
|
z-index: 10;
|
|
overflow-x: hidden;
|
|
resize: horizontal;
|
|
position: relative;
|
|
transition: width 0.3s ease, min-width 0.3s ease, padding 0.3s ease;
|
|
}
|
|
|
|
#sidebar.collapsed {
|
|
width: 0 !important;
|
|
min-width: 0 !important;
|
|
border-right: none;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
resize: none;
|
|
}
|
|
|
|
#toggle-sidebar {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
z-index: 50;
|
|
background: #fff;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 8px;
|
|
cursor: pointer;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s ease;
|
|
}
|
|
#toggle-sidebar:hover {
|
|
background: #f8fafc;
|
|
border-color: var(--primary);
|
|
}
|
|
#toggle-sidebar svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
fill: none;
|
|
stroke: var(--text-muted);
|
|
stroke-width: 2;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
#sidebar::after {
|
|
content: '⋮';
|
|
position: absolute;
|
|
right: 2px; top: 50%;
|
|
transform: translateY(-50%);
|
|
color: var(--border);
|
|
font-size: 1.2rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 30px 30px 10px;
|
|
}
|
|
|
|
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 15px 0; opacity: 0.7; }
|
|
|
|
.tabs {
|
|
display: flex;
|
|
padding: 0 30px;
|
|
border-bottom: 1px solid var(--border);
|
|
gap: 20px;
|
|
}
|
|
|
|
.tab {
|
|
padding: 10px 0;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
position: relative;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.tab:hover { color: var(--text); }
|
|
.tab.active { color: var(--primary); }
|
|
.tab.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -1px; left: 0; right: 0;
|
|
height: 2px;
|
|
background: var(--primary);
|
|
}
|
|
|
|
.tab-content {
|
|
flex-grow: 1;
|
|
padding: 25px 30px;
|
|
overflow-y: auto;
|
|
display: none;
|
|
}
|
|
|
|
.tab-content.active { display: block; }
|
|
|
|
.ep-card, .flow-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);
|
|
position: relative;
|
|
word-break: break-all;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.ep-card:hover, .flow-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; }
|
|
.type-sqs { background: #fff7ed; color: #ea580c; }
|
|
.type-sns { background: #fff1f2; color: #e11d48; }
|
|
.type-kafka { background: #fefce8; color: #854d0e; }
|
|
.type-rabbit { background: #f0fdf4; color: #166534; }
|
|
|
|
.ep-name, .flow-name { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; color: var(--text); }
|
|
.ep-fqn, .flow-desc { font-family: 'Inter', sans-serif; font-size: 0.75rem; color: var(--text-muted); opacity: 0.9; line-height: 1.4; }
|
|
|
|
#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 Interactivity Styles */
|
|
svg a { text-decoration: none !important; }
|
|
|
|
.active-path {
|
|
stroke: var(--accent) !important;
|
|
stroke-width: 2.5px !important;
|
|
filter: drop-shadow(0 0 8px 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.2 !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;
|
|
}
|
|
|
|
.payload-param {
|
|
margin-bottom: 4px;
|
|
}
|
|
.payload-param:last-child { margin-bottom: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="sidebar">
|
|
<div class="sidebar-header">
|
|
<header>
|
|
<h1>Explorer</h1>
|
|
<p>click.kamil.domain.StateMachineConfig</p>
|
|
</header>
|
|
</div>
|
|
|
|
<div class="tabs">
|
|
<div class="tab active" data-tab="explorer">Explorer</div>
|
|
<div class="tab" data-tab="flows">Business Flows</div>
|
|
</div>
|
|
|
|
<div id="tab-explorer" class="tab-content active">
|
|
<div id="ep-list"></div>
|
|
</div>
|
|
|
|
<div id="tab-flows" class="tab-content">
|
|
<div id="flow-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="main">
|
|
<button id="toggle-sidebar" aria-label="Toggle Sidebar" title="Toggle Sidebar">
|
|
<svg viewBox="0 0 24 24"><path d="M4 6h16M4 12h16M4 18h16"></path></svg>
|
|
</button>
|
|
<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" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 401 405" width="100%" zoomAndPan="magnify"><defs/><g><ellipse cx="250.9375" cy="25.2083" fill="#222222" rx="11.4583" ry="11.4583" style="stroke:#222222;stroke-width:1.1458333333333333;"/><rect fill="#FFFFFF" height="45.8333" rx="14.3229" ry="14.3229" style="stroke:#94A3B8;stroke-width:1.1458333333333333;" width="92.8125" x="204.5313" y="83.6458"/><text fill="#000000" font-family="Inter" font-size="10.3125" font-weight="bold" lengthAdjust="spacing" textLength="81.3542" x="210.2604" y="110.4599">OrderState.NEW</text><rect fill="#FFFFFF" height="45.8333" rx="14.3229" ry="14.3229" style="stroke:#94A3B8;stroke-width:1.1458333333333333;" width="135.2083" x="128.3333" y="184.4792"/><text fill="#000000" font-family="Inter" font-size="10.3125" font-weight="bold" lengthAdjust="spacing" textLength="123.75" x="134.0625" y="211.2932">OrderState.PROCESSING</text><rect fill="#FFFFFF" height="45.8333" rx="14.3229" ry="14.3229" style="stroke:#94A3B8;stroke-width:1.1458333333333333;" width="132.9167" x="6.875" y="285.3125"/><text fill="#000000" font-family="Inter" font-size="10.3125" font-weight="bold" lengthAdjust="spacing" textLength="121.4583" x="12.6042" y="312.1266">OrderState.COMPLETED</text><rect fill="#FFFFFF" height="45.8333" rx="14.3229" ry="14.3229" style="stroke:#94A3B8;stroke-width:1.1458333333333333;" width="130.625" x="160.4167" y="285.3125"/><text fill="#000000" font-family="Inter" font-size="10.3125" font-weight="bold" lengthAdjust="spacing" textLength="119.1667" x="166.1458" y="312.1266">OrderState.CANCELLED</text><ellipse cx="165" cy="386.1458" fill="none" rx="12.6042" ry="12.6042" style="stroke:#222222;stroke-width:1.1458333333333333;"/><ellipse cx="165" cy="386.1458" fill="#222222" rx="6.875" ry="6.875" style="stroke:#222222;stroke-width:1.1458333333333333;"/><polygon fill="#CBD5E1" points="250.9375,83.3979,255.5208,73.0854,250.9375,77.6688,246.3542,73.0854,250.9375,83.3979" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><path d="M250.9375,41.323 C250.9375,52.7366 250.9375,62.8874 250.9375,76.5229 " fill="none" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><polygon fill="#1E90FF" points="192.7273,184.3988,196.7317,173.848,192.4096,178.6784,187.5791,174.3563,192.7273,184.3988" style="stroke:#1E90FF;stroke-width:1.1458333333333333;"/><path d="M214.8291,129.7593 C208.1974,135.5289 202.1424,142.3448 198.2292,150.1042 C192.9576,160.5569 191.7433,166.6825 192.346,177.5344 " fill="none" style="stroke:#1E90FF;stroke-width:2.2916666666666665;"/><a href="#link_OrderState_NEW__OrderEvent_PROCESS" target="_self" title="#link_OrderState_NEW__OrderEvent_PROCESS" xlink:actuate="onRequest" xlink:href="#link_OrderState_NEW__OrderEvent_PROCESS" xlink:show="new" xlink:title="#link_OrderState_NEW__OrderEvent_PROCESS" xlink:type="simple"><text fill="#0000FF" font-family="JetBrains Mono" font-size="9.1667" lengthAdjust="spacing" text-decoration="underline" textLength="88.2292" x="199.375" y="160.1123">OrderEvent.PROCESS</text></a><polygon fill="#1E90FF" points="76.519,285.11,83.3231,276.1068,77.8192,279.5304,74.3957,274.0264,76.519,285.11" style="stroke:#1E90FF;stroke-width:1.1458333333333333;"/><path d="M128.069,226.8198 C115.0774,232.8094 102.5205,240.669 92.8125,250.9375 C84.0233,260.2342 80.7387,267.002 78.0792,278.4144 " fill="none" style="stroke:#1E90FF;stroke-width:2.2916666666666665;"/><a href="#link_OrderState_PROCESSING__OrderEvent_COMPLETE" target="_self" title="#link_OrderState_PROCESSING__OrderEvent_COMPLETE" xlink:actuate="onRequest" xlink:href="#link_OrderState_PROCESSING__OrderEvent_COMPLETE" xlink:show="new" xlink:title="#link_OrderState_PROCESSING__OrderEvent_COMPLETE" xlink:type="simple"><text fill="#0000FF" font-family="JetBrains Mono" font-size="9.1667" lengthAdjust="spacing" text-decoration="underline" textLength="96.25" x="93.9583" y="260.9456">OrderEvent.COMPLETE</text></a><polygon fill="#1E90FF" points="270.6375,285.1227,281.602,282.4515,275.1733,281.6228,276.002,275.1942,270.6375,285.1227" style="stroke:#1E90FF;stroke-width:1.1458333333333333;"/><path d="M275.9953,129.817 C281.1934,135.8266 285.9399,142.7315 288.75,150.1042 C306.8879,197.6906 312.6858,219.7372 288.75,264.6875 C284.4735,272.7185 283.367,275.3003 276.0805,280.9228 " fill="none" style="stroke:#1E90FF;stroke-width:2.2916666666666665;"/><a href="#link_OrderState_NEW__OrderEvent_CANCEL" target="_self" title="#link_OrderState_NEW__OrderEvent_CANCEL" xlink:actuate="onRequest" xlink:href="#link_OrderState_NEW__OrderEvent_CANCEL" xlink:show="new" xlink:title="#link_OrderState_NEW__OrderEvent_CANCEL" xlink:type="simple"><text fill="#0000FF" font-family="JetBrains Mono" font-size="9.1667" lengthAdjust="spacing" text-decoration="underline" textLength="87.0833" x="304.7917" y="210.529">OrderEvent.CANCEL</text></a><polygon fill="#1E90FF" points="209.2946,285.2207,207.7286,274.0447,206.2638,280.3589,199.9496,278.894,209.2946,285.2207" style="stroke:#1E90FF;stroke-width:1.1458333333333333;"/><path d="M194.8055,230.3265 C194.8705,240.9218 195.8744,253.7084 199.375,264.6875 C201.6391,271.7885 201.7193,273.0689 205.6576,279.3865 " fill="none" style="stroke:#1E90FF;stroke-width:2.2916666666666665;"/><a href="#link_OrderState_PROCESSING__OrderEvent_CANCEL" target="_self" title="#link_OrderState_PROCESSING__OrderEvent_CANCEL" xlink:actuate="onRequest" xlink:href="#link_OrderState_PROCESSING__OrderEvent_CANCEL" xlink:show="new" xlink:title="#link_OrderState_PROCESSING__OrderEvent_CANCEL" xlink:type="simple"><text fill="#0000FF" font-family="JetBrains Mono" font-size="9.1667" lengthAdjust="spacing" text-decoration="underline" textLength="87.0833" x="200.5208" y="260.9456">OrderEvent.CANCEL</text></a><polygon fill="#CBD5E1" points="152.3864,375.5819,147.4232,365.4468,147.9941,371.9034,141.5375,372.4744,152.3864,375.5819" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><path d="M99.3561,331.1691 C116.7175,345.7092 133.5042,359.7681 147.1157,371.1677 " fill="none" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><polygon fill="#CBD5E1" points="175.0665,373.4202,185.0591,368.1758,178.6209,368.927,177.8698,362.4888,175.0665,373.4202" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><path d="M208.4891,331.1691 C197.6885,344.8226 188.4099,356.5522 179.3318,368.0283 " fill="none" style="stroke:#CBD5E1;stroke-width:1.1458333333333333;"/><!--SRC=[dP9TJy8m58Rl-okEuSw8ONuaOWm9pc4q24H8l21aET3ZQDZQfQqY6l-xdGFP2FXrjpwdFUVfs-sb6gC48SQ5Uh9W4h8eaHbotvIYHgiqI2M9JGKde2Ir2-1a9bgaLYYPOsD9axABb9YP2PcTInn4I_3602vnCekqUfBSLx7hDvyAInbNcfFEMQL-WiVZioywc8h9J98nu3dMKj9sC26uaMxK4lJ5Aq5zjR2Bc62iOkx0VJvBIz9mL7EWXvmB6RbUxqN3AN8rp_WZngRetjHQpR-6tfAzr2YaWJibrRPjdofdcvNbpIPZVahUPh5umNM9fm8yhrQKV8xQGiu6g2FtAA6X-96nuVu8gjK6TBEe-bdGXvtWWJ5M1b0TLhoWNckr3h9aHkKJlVkk7_JxDvrhkBYW5nUinBZHW7CO3YkncnckDuUkMvYlWsUIDbmUXZLQzHkDsFOXtyhutRjUEnW4LxzmMVSiAQrQ59rMh2prOpH-i-C7xVQlR3QJoS-M93x9FtFvWyckN7OBiQqlaFrPxWzZMpMMnGy0]--></g></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<script id="metadata-json" type="application/json">
|
|
{
|
|
"name" : "click.kamil.domain.StateMachineConfig",
|
|
"states" : [ {
|
|
"rawName" : "OrderState.CANCELLED",
|
|
"fullIdentifier" : "OrderState.CANCELLED"
|
|
}, {
|
|
"rawName" : "OrderState.PROCESSING",
|
|
"fullIdentifier" : "OrderState.PROCESSING"
|
|
}, {
|
|
"rawName" : "OrderState.NEW",
|
|
"fullIdentifier" : "OrderState.NEW"
|
|
}, {
|
|
"rawName" : "OrderState.COMPLETED",
|
|
"fullIdentifier" : "OrderState.COMPLETED"
|
|
} ],
|
|
"transitions" : [ {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "OrderState.NEW",
|
|
"fullIdentifier" : "OrderState.NEW"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "OrderState.PROCESSING",
|
|
"fullIdentifier" : "OrderState.PROCESSING"
|
|
} ],
|
|
"event" : {
|
|
"rawName" : "OrderEvent.PROCESS",
|
|
"fullIdentifier" : "OrderEvent.PROCESS"
|
|
},
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "OrderState.PROCESSING",
|
|
"fullIdentifier" : "OrderState.PROCESSING"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "OrderState.COMPLETED",
|
|
"fullIdentifier" : "OrderState.COMPLETED"
|
|
} ],
|
|
"event" : {
|
|
"rawName" : "OrderEvent.COMPLETE",
|
|
"fullIdentifier" : "OrderEvent.COMPLETE"
|
|
},
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "OrderState.NEW",
|
|
"fullIdentifier" : "OrderState.NEW"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "OrderState.CANCELLED",
|
|
"fullIdentifier" : "OrderState.CANCELLED"
|
|
} ],
|
|
"event" : {
|
|
"rawName" : "OrderEvent.CANCEL",
|
|
"fullIdentifier" : "OrderEvent.CANCEL"
|
|
},
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
}, {
|
|
"type" : "EXTERNAL",
|
|
"sourceStates" : [ {
|
|
"rawName" : "OrderState.PROCESSING",
|
|
"fullIdentifier" : "OrderState.PROCESSING"
|
|
} ],
|
|
"targetStates" : [ {
|
|
"rawName" : "OrderState.CANCELLED",
|
|
"fullIdentifier" : "OrderState.CANCELLED"
|
|
} ],
|
|
"event" : {
|
|
"rawName" : "OrderEvent.CANCEL",
|
|
"fullIdentifier" : "OrderEvent.CANCEL"
|
|
},
|
|
"guard" : null,
|
|
"actions" : [ ],
|
|
"order" : null
|
|
} ],
|
|
"startStates" : [ "OrderState.NEW" ],
|
|
"endStates" : [ "OrderState.COMPLETED", "OrderState.CANCELLED" ],
|
|
"renderChoicesAsDiamonds" : true,
|
|
"flows" : [ ],
|
|
"metadata" : {
|
|
"triggers" : [ {
|
|
"event" : "event",
|
|
"className" : "click.kamil.service.StateMachineServiceImpl",
|
|
"methodName" : "sendMessage",
|
|
"sourceFile" : "service/src/main/java/click/kamil/service/StateMachineServiceImpl.java",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"sourceState" : null,
|
|
"lineNumber" : 25
|
|
}, {
|
|
"event" : "eventProvider",
|
|
"className" : "click.kamil.service.StateMachineServiceImpl",
|
|
"methodName" : "sendMessageWithProvider",
|
|
"sourceFile" : "service/src/main/java/click/kamil/service/StateMachineServiceImpl.java",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"sourceState" : null,
|
|
"lineNumber" : 50
|
|
}, {
|
|
"event" : "customMessage",
|
|
"className" : "click.kamil.service.StateMachineServiceImpl",
|
|
"methodName" : "sendCustomMessage",
|
|
"sourceFile" : "service/src/main/java/click/kamil/service/StateMachineServiceImpl.java",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"sourceState" : null,
|
|
"lineNumber" : 69
|
|
} ],
|
|
"entryPoints" : [ {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/process",
|
|
"className" : "click.kamil.web.OrderController",
|
|
"methodName" : "processOrder",
|
|
"sourceFile" : "web/src/main/java/click/kamil/web/OrderController.java",
|
|
"metadata" : {
|
|
"path" : "/api/orders/process",
|
|
"verb" : "POST"
|
|
},
|
|
"parameters" : [ ]
|
|
}, {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/complete",
|
|
"className" : "click.kamil.web.OrderController",
|
|
"methodName" : "completeOrder",
|
|
"sourceFile" : "web/src/main/java/click/kamil/web/OrderController.java",
|
|
"metadata" : {
|
|
"path" : "/api/orders/complete",
|
|
"verb" : "POST"
|
|
},
|
|
"parameters" : [ ]
|
|
}, {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/cancel",
|
|
"className" : "click.kamil.web.OrderController",
|
|
"methodName" : "cancelOrder",
|
|
"sourceFile" : "web/src/main/java/click/kamil/web/OrderController.java",
|
|
"metadata" : {
|
|
"path" : "/api/orders/cancel",
|
|
"verb" : "POST"
|
|
},
|
|
"parameters" : [ ]
|
|
}, {
|
|
"type" : "RABBIT",
|
|
"name" : "RABBIT: order.custom.transition.queue",
|
|
"className" : "click.kamil.web.RabbitOrderListener",
|
|
"methodName" : "handleCustomTransition",
|
|
"sourceFile" : "web/src/main/java/click/kamil/web/RabbitOrderListener.java",
|
|
"metadata" : {
|
|
"protocol" : "RABBIT",
|
|
"destination" : "order.custom.transition.queue"
|
|
},
|
|
"parameters" : [ {
|
|
"name" : "payload",
|
|
"type" : "String",
|
|
"annotations" : [ ]
|
|
} ]
|
|
}, {
|
|
"type" : "JMS",
|
|
"name" : "JMS: order.process.queue",
|
|
"className" : "click.kamil.web.JmsOrderListener",
|
|
"methodName" : "receiveProcessCommand",
|
|
"sourceFile" : "web/src/main/java/click/kamil/web/JmsOrderListener.java",
|
|
"metadata" : {
|
|
"protocol" : "JMS",
|
|
"destination" : "order.process.queue"
|
|
},
|
|
"parameters" : [ {
|
|
"name" : "message",
|
|
"type" : "String",
|
|
"annotations" : [ ]
|
|
} ]
|
|
}, {
|
|
"type" : "JMS",
|
|
"name" : "JMS: order.cancel.queue",
|
|
"className" : "click.kamil.web.JmsOrderListener",
|
|
"methodName" : "receiveCancelCommand",
|
|
"sourceFile" : "web/src/main/java/click/kamil/web/JmsOrderListener.java",
|
|
"metadata" : {
|
|
"protocol" : "JMS",
|
|
"destination" : "order.cancel.queue"
|
|
},
|
|
"parameters" : [ {
|
|
"name" : "message",
|
|
"type" : "String",
|
|
"annotations" : [ ]
|
|
} ]
|
|
} ],
|
|
"callChains" : [ {
|
|
"entryPoint" : {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/process",
|
|
"className" : "click.kamil.web.OrderController",
|
|
"methodName" : "processOrder",
|
|
"sourceFile" : "web/src/main/java/click/kamil/web/OrderController.java",
|
|
"metadata" : {
|
|
"path" : "/api/orders/process",
|
|
"verb" : "POST"
|
|
},
|
|
"parameters" : [ ]
|
|
},
|
|
"methodChain" : [ "click.kamil.web.OrderController.processOrder", "click.kamil.service.StateMachineServiceImpl.sendMessageWithOutbox", "click.kamil.service.StateMachineServiceImpl.sendMessage" ],
|
|
"triggerPoint" : {
|
|
"event" : "OrderEvent.PROCESS",
|
|
"className" : "click.kamil.service.StateMachineServiceImpl",
|
|
"methodName" : "sendMessage",
|
|
"sourceFile" : "service/src/main/java/click/kamil/service/StateMachineServiceImpl.java",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"sourceState" : null,
|
|
"lineNumber" : 25
|
|
},
|
|
"contextMachineId" : null,
|
|
"matchedTransitions" : [ {
|
|
"sourceState" : "OrderState.NEW",
|
|
"targetState" : "OrderState.PROCESSING",
|
|
"event" : "OrderEvent.PROCESS"
|
|
} ]
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/complete",
|
|
"className" : "click.kamil.web.OrderController",
|
|
"methodName" : "completeOrder",
|
|
"sourceFile" : "web/src/main/java/click/kamil/web/OrderController.java",
|
|
"metadata" : {
|
|
"path" : "/api/orders/complete",
|
|
"verb" : "POST"
|
|
},
|
|
"parameters" : [ ]
|
|
},
|
|
"methodChain" : [ "click.kamil.web.OrderController.completeOrder", "click.kamil.service.StateMachineServiceImpl.sendMessage" ],
|
|
"triggerPoint" : {
|
|
"event" : "OrderEvent.COMPLETE",
|
|
"className" : "click.kamil.service.StateMachineServiceImpl",
|
|
"methodName" : "sendMessage",
|
|
"sourceFile" : "service/src/main/java/click/kamil/service/StateMachineServiceImpl.java",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"sourceState" : null,
|
|
"lineNumber" : 25
|
|
},
|
|
"contextMachineId" : null,
|
|
"matchedTransitions" : [ {
|
|
"sourceState" : "OrderState.PROCESSING",
|
|
"targetState" : "OrderState.COMPLETED",
|
|
"event" : "OrderEvent.COMPLETE"
|
|
} ]
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "REST",
|
|
"name" : "POST /api/orders/cancel",
|
|
"className" : "click.kamil.web.OrderController",
|
|
"methodName" : "cancelOrder",
|
|
"sourceFile" : "web/src/main/java/click/kamil/web/OrderController.java",
|
|
"metadata" : {
|
|
"path" : "/api/orders/cancel",
|
|
"verb" : "POST"
|
|
},
|
|
"parameters" : [ ]
|
|
},
|
|
"methodChain" : [ "click.kamil.web.OrderController.cancelOrder", "click.kamil.service.StateMachineServiceImpl.sendMessage" ],
|
|
"triggerPoint" : {
|
|
"event" : "OrderEvent.CANCEL",
|
|
"className" : "click.kamil.service.StateMachineServiceImpl",
|
|
"methodName" : "sendMessage",
|
|
"sourceFile" : "service/src/main/java/click/kamil/service/StateMachineServiceImpl.java",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"sourceState" : null,
|
|
"lineNumber" : 25
|
|
},
|
|
"contextMachineId" : null,
|
|
"matchedTransitions" : [ {
|
|
"sourceState" : "OrderState.NEW",
|
|
"targetState" : "OrderState.CANCELLED",
|
|
"event" : "OrderEvent.CANCEL"
|
|
}, {
|
|
"sourceState" : "OrderState.PROCESSING",
|
|
"targetState" : "OrderState.CANCELLED",
|
|
"event" : "OrderEvent.CANCEL"
|
|
} ]
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "RABBIT",
|
|
"name" : "RABBIT: order.custom.transition.queue",
|
|
"className" : "click.kamil.web.RabbitOrderListener",
|
|
"methodName" : "handleCustomTransition",
|
|
"sourceFile" : "web/src/main/java/click/kamil/web/RabbitOrderListener.java",
|
|
"metadata" : {
|
|
"protocol" : "RABBIT",
|
|
"destination" : "order.custom.transition.queue"
|
|
},
|
|
"parameters" : [ {
|
|
"name" : "payload",
|
|
"type" : "String",
|
|
"annotations" : [ ]
|
|
} ]
|
|
},
|
|
"methodChain" : [ "click.kamil.web.RabbitOrderListener.handleCustomTransition", "click.kamil.service.StateMachineServiceImpl.sendCustomMessage" ],
|
|
"triggerPoint" : {
|
|
"event" : "OrderEvent.PROCESS",
|
|
"className" : "click.kamil.service.StateMachineServiceImpl",
|
|
"methodName" : "sendCustomMessage",
|
|
"sourceFile" : "service/src/main/java/click/kamil/service/StateMachineServiceImpl.java",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"sourceState" : null,
|
|
"lineNumber" : 69
|
|
},
|
|
"contextMachineId" : null,
|
|
"matchedTransitions" : [ {
|
|
"sourceState" : "OrderState.NEW",
|
|
"targetState" : "OrderState.PROCESSING",
|
|
"event" : "OrderEvent.PROCESS"
|
|
} ]
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "JMS",
|
|
"name" : "JMS: order.process.queue",
|
|
"className" : "click.kamil.web.JmsOrderListener",
|
|
"methodName" : "receiveProcessCommand",
|
|
"sourceFile" : "web/src/main/java/click/kamil/web/JmsOrderListener.java",
|
|
"metadata" : {
|
|
"protocol" : "JMS",
|
|
"destination" : "order.process.queue"
|
|
},
|
|
"parameters" : [ {
|
|
"name" : "message",
|
|
"type" : "String",
|
|
"annotations" : [ ]
|
|
} ]
|
|
},
|
|
"methodChain" : [ "click.kamil.web.JmsOrderListener.receiveProcessCommand", "click.kamil.service.StateMachineServiceImpl.sendMessageWithOutbox", "click.kamil.service.StateMachineServiceImpl.sendMessage" ],
|
|
"triggerPoint" : {
|
|
"event" : "OrderEvent.PROCESS",
|
|
"className" : "click.kamil.service.StateMachineServiceImpl",
|
|
"methodName" : "sendMessage",
|
|
"sourceFile" : "service/src/main/java/click/kamil/service/StateMachineServiceImpl.java",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"sourceState" : null,
|
|
"lineNumber" : 25
|
|
},
|
|
"contextMachineId" : null,
|
|
"matchedTransitions" : [ {
|
|
"sourceState" : "OrderState.NEW",
|
|
"targetState" : "OrderState.PROCESSING",
|
|
"event" : "OrderEvent.PROCESS"
|
|
} ]
|
|
}, {
|
|
"entryPoint" : {
|
|
"type" : "JMS",
|
|
"name" : "JMS: order.cancel.queue",
|
|
"className" : "click.kamil.web.JmsOrderListener",
|
|
"methodName" : "receiveCancelCommand",
|
|
"sourceFile" : "web/src/main/java/click/kamil/web/JmsOrderListener.java",
|
|
"metadata" : {
|
|
"protocol" : "JMS",
|
|
"destination" : "order.cancel.queue"
|
|
},
|
|
"parameters" : [ {
|
|
"name" : "message",
|
|
"type" : "String",
|
|
"annotations" : [ ]
|
|
} ]
|
|
},
|
|
"methodChain" : [ "click.kamil.web.JmsOrderListener.receiveCancelCommand", "click.kamil.service.StateMachineServiceImpl.sendMessageWithProvider" ],
|
|
"triggerPoint" : {
|
|
"event" : "OrderEvent.CANCEL",
|
|
"className" : "click.kamil.service.StateMachineServiceImpl",
|
|
"methodName" : "sendMessageWithProvider",
|
|
"sourceFile" : "service/src/main/java/click/kamil/service/StateMachineServiceImpl.java",
|
|
"sourceModule" : null,
|
|
"stateMachineId" : null,
|
|
"sourceState" : null,
|
|
"lineNumber" : 50
|
|
},
|
|
"contextMachineId" : null,
|
|
"matchedTransitions" : [ {
|
|
"sourceState" : "OrderState.NEW",
|
|
"targetState" : "OrderState.CANCELLED",
|
|
"event" : "OrderEvent.CANCEL"
|
|
}, {
|
|
"sourceState" : "OrderState.PROCESSING",
|
|
"targetState" : "OrderState.CANCELLED",
|
|
"event" : "OrderEvent.CANCEL"
|
|
} ]
|
|
} ],
|
|
"properties" : {
|
|
"default" : { }
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
const metadata = JSON.parse(document.getElementById('metadata-json').textContent);
|
|
let panZoomInstance;
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const svg = document.querySelector('#svg-container svg');
|
|
panZoomInstance = svgPanZoom(svg, { zoomEnabled: true, controlIconsEnabled: true, fit: true, center: true });
|
|
|
|
const toggleSidebar = document.getElementById('toggle-sidebar');
|
|
if (toggleSidebar) {
|
|
toggleSidebar.addEventListener('click', () => {
|
|
const sidebar = document.getElementById('sidebar');
|
|
if (sidebar) sidebar.classList.toggle('collapsed');
|
|
|
|
// Re-center SVG pan-zoom after transition
|
|
setTimeout(() => {
|
|
if (panZoomInstance) {
|
|
panZoomInstance.resize();
|
|
panZoomInstance.center();
|
|
}
|
|
}, 300);
|
|
});
|
|
}
|
|
|
|
setupTabs();
|
|
populateSidebar();
|
|
populateFlows();
|
|
attachInteractivity();
|
|
});
|
|
|
|
function setupTabs() {
|
|
const flows = metadata.flows || [];
|
|
const tabsEl = document.querySelector('.tabs');
|
|
if (!tabsEl) return;
|
|
if (flows.length === 0) {
|
|
tabsEl.style.display = 'none';
|
|
document.querySelector('.tab-content[data-tab="flows"]')?.remove();
|
|
return;
|
|
}
|
|
|
|
document.querySelectorAll('.tab').forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
document.querySelectorAll('.tab, .tab-content').forEach(el => el.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
|
|
});
|
|
});
|
|
}
|
|
|
|
function populateSidebar() {
|
|
const list = document.getElementById('ep-list');
|
|
if (!list) return;
|
|
const entryPoints = metadata.metadata.entryPoints || [];
|
|
|
|
entryPoints.forEach(ep => {
|
|
// Quality Filter: Hide if it doesn't trigger a machine event
|
|
const chains = (metadata.metadata.callChains || []).filter(c =>
|
|
c.entryPoint.className === ep.className &&
|
|
c.entryPoint.methodName === ep.methodName &&
|
|
c.matchedTransitions && c.matchedTransitions.length > 0
|
|
);
|
|
|
|
if (chains.length === 0) return;
|
|
|
|
const card = document.createElement('div');
|
|
card.className = 'ep-card';
|
|
const sourceHint = ep.sourceFile ? `<div style="font-size:0.65rem; color:var(--text-muted); margin-top:4px; font-style:italic;">${ep.sourceFile}</div>` : '';
|
|
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>
|
|
${sourceHint}
|
|
`;
|
|
|
|
// Add tags for matched events
|
|
let triggersHtml = '<div class="ep-transitions" style="margin-top: 8px;">Triggers: ';
|
|
const addedEvents = new Set();
|
|
chains.forEach(c => {
|
|
c.matchedTransitions.forEach(t => {
|
|
const evName = t.event || "";
|
|
if (!addedEvents.has(evName)) {
|
|
addedEvents.add(evName);
|
|
triggersHtml += `<span class="badge transition" style="font-size: 0.65rem; padding: 2px 6px;">${evName}</span> `;
|
|
}
|
|
});
|
|
});
|
|
triggersHtml += '</div>';
|
|
card.innerHTML += triggersHtml;
|
|
|
|
card.onmouseenter = () => highlightEntryPoint(ep);
|
|
card.onmouseleave = clearHighlights;
|
|
list.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function populateFlows() {
|
|
const list = document.getElementById('flow-list');
|
|
if (!list) return;
|
|
const flows = metadata.flows || [];
|
|
|
|
if (flows.length === 0) {
|
|
list.innerHTML = '<p style="color:var(--text-muted); font-size:0.8rem; font-style:italic;">No business flows defined.</p>';
|
|
return;
|
|
}
|
|
|
|
flows.forEach(flow => {
|
|
const card = document.createElement('div');
|
|
card.className = 'flow-card';
|
|
card.innerHTML = `
|
|
<div class="flow-name">${flow.name}</div>
|
|
<div class="flow-desc">${flow.description}</div>
|
|
`;
|
|
card.onmouseenter = () => highlightFlow(flow);
|
|
card.onmouseleave = clearHighlights;
|
|
list.appendChild(card);
|
|
});
|
|
}
|
|
|
|
function highlightEntryPoint(ep) {
|
|
clearHighlights();
|
|
const chains = metadata.metadata.callChains || [];
|
|
|
|
let steps = [];
|
|
chains.forEach(c => {
|
|
if (c.entryPoint.className === ep.className && c.entryPoint.methodName === ep.methodName) {
|
|
if (c.matchedTransitions && c.matchedTransitions.length > 0) {
|
|
c.matchedTransitions.forEach(t => {
|
|
steps.push({ event: t.event, source: t.sourceState });
|
|
});
|
|
}
|
|
}
|
|
});
|
|
|
|
if (steps.length === 0) return;
|
|
highlightEvents(steps);
|
|
}
|
|
|
|
function highlightFlow(flow) {
|
|
clearHighlights();
|
|
if (!flow.steps || flow.steps.length === 0) return;
|
|
highlightEvents(flow.steps);
|
|
}
|
|
|
|
function highlightEvents(steps) {
|
|
const svg = document.querySelector('#svg-container svg');
|
|
|
|
// Dim everything first
|
|
svg.querySelectorAll('path, rect, circle, ellipse, text, polygon').forEach(el => {
|
|
el.classList.add('dimmed');
|
|
});
|
|
|
|
steps.forEach(step => {
|
|
let targetEvent = "";
|
|
let targetSource = "";
|
|
let targetAnon = "";
|
|
|
|
if (typeof step === 'object') {
|
|
targetEvent = normalize(step.event);
|
|
targetSource = normalize(step.source);
|
|
} else if (step.includes("->")) {
|
|
const parts = step.split("->");
|
|
targetAnon = "#link_anon_" + normalize(parts[0]) + "_" + normalize(parts[1]);
|
|
} else {
|
|
targetEvent = normalize(step);
|
|
}
|
|
|
|
svg.querySelectorAll('a').forEach(link => {
|
|
const href = link.getAttribute('xlink:href') || link.getAttribute('href');
|
|
if (!href) return;
|
|
|
|
let matches = false;
|
|
if (targetAnon) {
|
|
matches = (href === targetAnon);
|
|
} else if (targetEvent) {
|
|
if (targetSource) {
|
|
// Exact match
|
|
matches = (href === "#link_" + targetSource + "__" + targetEvent);
|
|
} else {
|
|
// Match all sources for this event
|
|
matches = href.startsWith("#link_") && href.endsWith("__" + targetEvent);
|
|
}
|
|
}
|
|
|
|
if (matches) {
|
|
highlightLinkGroup(link);
|
|
}
|
|
});
|
|
});
|
|
|
|
// Un-dim all state nodes for context
|
|
svg.querySelectorAll('rect, circle, ellipse, polygon').forEach(el => {
|
|
const isChoice = el.tagName === 'polygon' && el.points?.numberOfItems === 4;
|
|
if (isChoice || ['rect', 'circle', 'ellipse'].includes(el.tagName)) {
|
|
el.classList.remove('dimmed');
|
|
let next = el.nextElementSibling;
|
|
while(next && next.tagName === 'text') {
|
|
next.classList.remove('dimmed');
|
|
next = next.nextElementSibling;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function highlightLinkGroup(link) {
|
|
link.classList.add('active-path');
|
|
link.querySelectorAll('*').forEach(child => child.classList.remove('dimmed'));
|
|
|
|
// Find path and polygon immediately before the <a> tag (interleaved)
|
|
let prev = link.previousElementSibling;
|
|
let foundPath = false;
|
|
let foundPolygon = false;
|
|
while (prev) {
|
|
if (prev.tagName === 'path' && !foundPath) {
|
|
prev.classList.remove('dimmed');
|
|
prev.classList.add('active-path');
|
|
foundPath = true;
|
|
} else if (prev.tagName === 'polygon' && !foundPolygon && prev.points?.numberOfItems !== 4) {
|
|
prev.classList.remove('dimmed');
|
|
prev.classList.add('active-path');
|
|
foundPolygon = true;
|
|
} else if (['rect', 'circle', 'ellipse'].includes(prev.tagName) ||
|
|
(prev.tagName === 'polygon' && prev.points?.numberOfItems === 4)) {
|
|
// Hit a state node, stop traversal
|
|
break;
|
|
}
|
|
if (foundPath && foundPolygon) break;
|
|
prev = prev.previousElementSibling;
|
|
}
|
|
}
|
|
|
|
function clearHighlights() {
|
|
document.querySelectorAll('.dimmed, .active-path').forEach(el => {
|
|
el.classList.remove('dimmed', 'active-path');
|
|
});
|
|
}
|
|
|
|
function attachInteractivity() {
|
|
const svg = document.querySelector('#svg-container svg');
|
|
const transitions = metadata.transitions || [];
|
|
|
|
svg.querySelectorAll('a').forEach(link => {
|
|
const href = link.getAttribute('xlink:href') || link.getAttribute('href');
|
|
if (!href || !href.startsWith('#link_')) return;
|
|
|
|
const linkId = href.replace('#link_', '');
|
|
const isAnon = linkId.startsWith('anon_');
|
|
|
|
let metaTrans = null;
|
|
let cleanEventName = linkId;
|
|
if (isAnon) {
|
|
metaTrans = transitions.find(t =>
|
|
!t.event &&
|
|
"anon_" + normalize(t.sourceStates[0].fullIdentifier) + "_" + normalize(t.targetStates[0].fullIdentifier) === linkId
|
|
);
|
|
cleanEventName = "Internal logic";
|
|
} else {
|
|
metaTrans = transitions.find(t => {
|
|
if (!t.event) return false;
|
|
const evStr = t.event.fullIdentifier || t.event.rawName || t.event;
|
|
const sourceStr = t.sourceStates && t.sourceStates.length > 0 ? (t.sourceStates[0].fullIdentifier || t.sourceStates[0].rawName) : "";
|
|
const expectedLinkId = normalize(sourceStr) + "__" + normalize(evStr);
|
|
return expectedLinkId === linkId;
|
|
});
|
|
if (metaTrans && metaTrans.event) {
|
|
cleanEventName = metaTrans.event.fullIdentifier || metaTrans.event.rawName || metaTrans.event;
|
|
}
|
|
}
|
|
|
|
if (metaTrans || isAnon) {
|
|
link.style.cursor = 'pointer';
|
|
const setupTippy = (el) => {
|
|
tippy(el, {
|
|
content: createTooltip(cleanEventName, metaTrans),
|
|
allowHTML: true,
|
|
theme: 'modern',
|
|
interactive: true,
|
|
appendTo: document.body,
|
|
placement: 'right',
|
|
offset: [0, 20]
|
|
});
|
|
};
|
|
setupTippy(link);
|
|
let path = link.previousElementSibling;
|
|
while(path && path.tagName !== 'path') path = path.previousElementSibling;
|
|
if (path) {
|
|
path.style.cursor = 'pointer';
|
|
setupTippy(path);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function normalize(s) {
|
|
if (!s) return "";
|
|
return s.replace(/[^a-zA-Z0-9]/g, '_');
|
|
}
|
|
|
|
function createTooltip(name, trans) {
|
|
const chains = (metadata.metadata.callChains || []).filter(c => {
|
|
if (!c.matchedTransitions || c.matchedTransitions.length === 0) return false;
|
|
return c.matchedTransitions.some(t => {
|
|
const cEventStr = typeof t.event === 'object' ? (t.event.fullIdentifier || t.event.rawName || t.event) : t.event;
|
|
return normalize(cEventStr) === normalize(name);
|
|
});
|
|
});
|
|
|
|
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;">
|
|
${name === 'Internal logic' ? name : 'Event: <span style="color:var(--accent)">' + name + '</span>'}
|
|
</div>`;
|
|
|
|
if (trans && trans.guard) {
|
|
const lineInfo = trans.guard.lineNumber ? ` <span style="color:#94a3b8; font-weight:400; font-size:0.6rem;">(${trans.guard.sourceFile || 'Source'}:${trans.guard.lineNumber})</span>` : '';
|
|
html += `<div style="font-size:0.7rem; font-weight:800; color:#94a3b8; text-transform:uppercase; margin-bottom:4px">Guard${lineInfo}</div>
|
|
<div style="background:#f1f5f9; padding:6px; border-radius:4px; font-family:monospace; font-size:0.8rem; margin-bottom:12px; border:1px solid #e2e8f0;">${trans.guard.expression}</div>`;
|
|
if (trans.guard.internalLogic) {
|
|
html += `<div style="font-size:0.65rem; font-weight:800; color:#cbd5e1; text-transform:uppercase; margin-bottom:4px">Internal Logic</div>
|
|
<pre style="background:#1e293b; color:#f8fafc; padding:8px; border-radius:4px; font-family:'JetBrains Mono', monospace; font-size:0.7rem; overflow-x:auto; margin-bottom:12px;"><code>${trans.guard.internalLogic.replace(/</g, '<').replace(/>/g, '>')}</code></pre>`;
|
|
}
|
|
}
|
|
|
|
if (trans && trans.actions && trans.actions.length > 0) {
|
|
html += `<div style="font-size:0.7rem; font-weight:800; color:#94a3b8; text-transform:uppercase; margin-bottom:4px">Actions</div>`;
|
|
trans.actions.forEach(action => {
|
|
const lineInfo = action.lineNumber ? ` <span style="color:#94a3b8; font-weight:400; font-size:0.6rem;">(${action.sourceFile || 'Source'}:${action.lineNumber})</span>` : '';
|
|
html += `<div style="font-size:0.7rem; font-weight:800; color:#94a3b8; text-transform:uppercase; margin-bottom:4px">Action${lineInfo}</div>
|
|
<div style="background:#f1f5f9; padding:6px; border-radius:4px; font-family:monospace; font-size:0.8rem; margin-bottom:12px; border:1px solid #e2e8f0;">${action.expression}</div>`;
|
|
if (action.internalLogic) {
|
|
html += `<div style="font-size:0.65rem; font-weight:800; color:#cbd5e1; text-transform:uppercase; margin-bottom:4px">Internal Logic</div>
|
|
<pre style="background:#1e293b; color:#f8fafc; padding:8px; border-radius:4px; font-family:'JetBrains Mono', monospace; font-size:0.7rem; overflow-x:auto; margin-bottom:12px;"><code>${action.internalLogic.replace(/</g, '<').replace(/>/g, '>')}</code></pre>`;
|
|
}
|
|
});
|
|
}
|
|
|
|
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 => {
|
|
const triggerInfo = c.triggerPoint.sourceFile ? ` <span style="color:#94a3b8; font-weight:400; font-size:0.6rem;">(${c.triggerPoint.sourceFile}:${c.triggerPoint.lineNumber})</span>` : '';
|
|
html += `<div style="margin-bottom:20px">
|
|
<div style="font-weight:700; font-size:0.85rem; color:var(--text);">${c.entryPoint.name}</div>
|
|
<div style="font-size:0.65rem; color:#64748b; font-family:monospace; margin-top:2px;">Trigger: ${c.triggerPoint.methodName}${triggerInfo}</div>
|
|
${renderParameters(c.entryPoint.parameters)}
|
|
<div style="margin-left:10px; border-left:2px solid #e2e8f0; padding-left:12px; margin-top:10px">
|
|
${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>`;
|
|
});
|
|
}
|
|
html += `</div>`;
|
|
return html;
|
|
}
|
|
|
|
function renderParameters(params) {
|
|
if (!params || params.length === 0) return "";
|
|
let html = `<div style="font-size:0.65rem; font-weight:700; color:#94a3b8; margin-top:8px; margin-bottom:4px; text-transform:uppercase;">Input Data</div>`;
|
|
html += `<div class="payload-box">`;
|
|
params.forEach(p => {
|
|
const annotation = (p.annotations || []).find(a => a.endsWith("RequestBody") || a.endsWith("PathVariable") || a.endsWith("RequestParam") || a.endsWith("Payload") || a.endsWith("Header") || a.endsWith("Headers"));
|
|
const cleanAnn = annotation ? "@" + annotation.substring(annotation.lastIndexOf('.') + 1) : "";
|
|
html += `<div class="payload-param">
|
|
<span style="color:#f43f5e; font-size:0.65rem; font-weight:bold;">${cleanAnn}</span>
|
|
<span style="color:#38bdf8;">${p.type}</span>
|
|
<span style="color:#a3e635;">${p.name}</span>
|
|
</div>`;
|
|
});
|
|
html += `</div>`;
|
|
return html;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|