v1 extended analysis render
This commit is contained in:
@@ -2,6 +2,7 @@ rootProject.name = 'state machine exporter'
|
|||||||
|
|
||||||
include ':file_combine'
|
include ':file_combine'
|
||||||
include ':state_machine_exporter'
|
include ':state_machine_exporter'
|
||||||
|
include ':state_machine_exporter_html'
|
||||||
include ':state_machine_exporter_spring_based'
|
include ':state_machine_exporter_spring_based'
|
||||||
include ':state_machines:complex_state_machine'
|
include ':state_machines:complex_state_machine'
|
||||||
include ':state_machines:dynamic_state_machine'
|
include ':state_machines:dynamic_state_machine'
|
||||||
|
|||||||
@@ -0,0 +1,417 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Final PoC: Real Machine Explorer</title>
|
||||||
|
<script src="https://unpkg.com/@popperjs/core@2"></script>
|
||||||
|
<script src="https://unpkg.com/tippy.js@6"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #f8fafc;
|
||||||
|
--sidebar-bg: #ffffff;
|
||||||
|
--accent: #3b82f6; /* Modern Blue */
|
||||||
|
--accent-hover: #2563eb;
|
||||||
|
--text: #0f172a;
|
||||||
|
--text-muted: #64748b;
|
||||||
|
--border: #e2e8f0;
|
||||||
|
--highlight: #ef4444; /* Coral Red for Highlights */
|
||||||
|
--node-bg: #ffffff;
|
||||||
|
--node-border: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
font-family: 'Inter', -apple-system, sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
width: 400px;
|
||||||
|
background: var(--sidebar-bg);
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 25px;
|
||||||
|
overflow-y: auto;
|
||||||
|
box-shadow: 2px 0 15px rgba(0,0,0,0.03);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ep-card {
|
||||||
|
padding: 16px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ep-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0; top: 0; bottom: 0; width: 4px;
|
||||||
|
background: transparent;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ep-card:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ep-card:hover::before {
|
||||||
|
background: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ep-type {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 800;
|
||||||
|
padding: 4px 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
.type-rest { background: #eff6ff; color: #1d4ed8; }
|
||||||
|
.type-custom { background: #fef2f2; color: #b91c1c; }
|
||||||
|
|
||||||
|
.method { font-weight: 700; font-size: 0.95rem; margin-bottom: 6px; }
|
||||||
|
.path { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-muted); }
|
||||||
|
|
||||||
|
#main { flex-grow: 1; position: relative; background: var(--bg); }
|
||||||
|
#svg-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
|
||||||
|
svg { width: 100%; height: 100%; max-width: none; }
|
||||||
|
|
||||||
|
/* --- SVG Styling --- */
|
||||||
|
.node circle { fill: var(--node-bg); stroke: var(--node-border); stroke-width: 2.5px; transition: all 0.3s; }
|
||||||
|
.node text { fill: var(--text); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; user-select: none; }
|
||||||
|
|
||||||
|
.transition-link path { stroke: #cbd5e1; stroke-width: 2.5px; fill: none; transition: all 0.3s; }
|
||||||
|
.transition-link text { fill: #64748b; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; transition: all 0.3s; cursor: pointer; user-select: none; }
|
||||||
|
|
||||||
|
.transition-link:hover path { stroke: var(--accent); stroke-width: 4px; }
|
||||||
|
.transition-link:hover text { fill: var(--accent); font-size: 12px; }
|
||||||
|
|
||||||
|
/* Animation & Highlighting */
|
||||||
|
.dimmed { opacity: 0.1; filter: grayscale(1); transition: all 0.4s ease; }
|
||||||
|
|
||||||
|
.active-path path {
|
||||||
|
stroke: var(--highlight) !important;
|
||||||
|
stroke-width: 4.5px !important;
|
||||||
|
filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.4));
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
stroke-dasharray: 8;
|
||||||
|
animation: flow 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes flow {
|
||||||
|
from { stroke-dashoffset: 16; }
|
||||||
|
to { stroke-dashoffset: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-path text {
|
||||||
|
fill: #000 !important;
|
||||||
|
font-weight: 800 !important;
|
||||||
|
font-size: 12px !important;
|
||||||
|
paint-order: stroke;
|
||||||
|
stroke: #fff;
|
||||||
|
stroke-width: 4px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-node circle {
|
||||||
|
stroke: var(--highlight) !important;
|
||||||
|
stroke-width: 3.5px !important;
|
||||||
|
}
|
||||||
|
.active-node text {
|
||||||
|
font-weight: 800 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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);
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chain-step {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-top: 6px;
|
||||||
|
}
|
||||||
|
.chain-step b { color: var(--accent); margin-right: 8px; width: 15px; }
|
||||||
|
|
||||||
|
.payload-box {
|
||||||
|
background: #0f172a;
|
||||||
|
color: #e2e8f0;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px;
|
||||||
|
font-family: 'JetBrains Mono', monospace;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="sidebar">
|
||||||
|
<div style="font-weight: 900; font-size: 1.4rem; margin-bottom: 5px; color: var(--text);">Machine Explorer</div>
|
||||||
|
<div style="font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border);">ExtendedStateMachineConfig</div>
|
||||||
|
|
||||||
|
<div id="ep-list"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<div id="svg-container">
|
||||||
|
<svg id="viz" viewBox="0 0 900 500" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<marker id="arrow-default" markerWidth="8" markerHeight="8" refX="5" refY="4" orientation="auto-start-reverse">
|
||||||
|
<path d="M0,0 L8,4 L0,8 Z" fill="#94a3b8" />
|
||||||
|
</marker>
|
||||||
|
<marker id="arrow-active" markerWidth="8" markerHeight="8" refX="5" refY="4" orientation="auto-start-reverse">
|
||||||
|
<path d="M0,0 L8,4 L0,8 Z" fill="#ef4444" />
|
||||||
|
</marker>
|
||||||
|
</defs>
|
||||||
|
|
||||||
|
<!-- Nodes -->
|
||||||
|
<g class="node" id="node-START">
|
||||||
|
<circle cx="150" cy="250" r="45" />
|
||||||
|
<text x="150" y="255" text-anchor="middle">START</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g class="node" id="node-PROCESSING">
|
||||||
|
<circle cx="450" cy="250" r="45" />
|
||||||
|
<text x="450" y="255" text-anchor="middle">PROCESSING</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g class="node" id="node-COMPLETED">
|
||||||
|
<circle cx="750" cy="150" r="45" />
|
||||||
|
<text x="750" y="155" text-anchor="middle">COMPLETED</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g class="node" id="node-CANCELLED">
|
||||||
|
<circle cx="750" cy="350" r="45" />
|
||||||
|
<text x="750" y="355" text-anchor="middle">CANCELLED</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- Transitions - Paths end exactly at radius (45px) from target center -->
|
||||||
|
<g class="transition-link" id="link_AUDIT_EVENT" data-source="node-START" data-target="node-START">
|
||||||
|
<path d="M 125 215 C 80 160, 40 200, 105 240" marker-end="url(#arrow-default)" />
|
||||||
|
<text x="75" y="165" text-anchor="middle">AUDIT_EVENT</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g class="transition-link" id="link_SUBMIT_EVENT" data-source="node-START" data-target="node-PROCESSING">
|
||||||
|
<path d="M 195 250 L 405 250" marker-end="url(#arrow-default)" />
|
||||||
|
<text x="300" y="248" text-anchor="middle">SUBMIT_EVENT</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g class="transition-link" id="link_REACTIVE_EVENT" data-source="node-START" data-target="node-PROCESSING">
|
||||||
|
<path d="M 185 220 Q 300 140 415 220" marker-end="url(#arrow-default)" />
|
||||||
|
<text x="300" y="174" text-anchor="middle">REACTIVE_EVENT</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g class="transition-link" id="link_EXTERNAL_TRIGGER" data-source="node-START" data-target="node-PROCESSING">
|
||||||
|
<path d="M 185 280 Q 300 360 415 280" marker-end="url(#arrow-default)" />
|
||||||
|
<text x="300" y="329" text-anchor="middle">EXTERNAL_TRIGGER</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g class="transition-link" id="link_FINISH" data-source="node-PROCESSING" data-target="node-COMPLETED">
|
||||||
|
<path d="M 485 230 L 715 170" marker-end="url(#arrow-default)" />
|
||||||
|
<text x="600" y="198" text-anchor="middle">FINISH</text>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<g class="transition-link" id="link_CANCEL_EVENT" data-source="node-PROCESSING" data-target="node-CANCELLED">
|
||||||
|
<path d="M 485 270 L 715 330" marker-end="url(#arrow-default)" />
|
||||||
|
<text x="600" y="303" text-anchor="middle">CANCEL_EVENT</text>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Exact Metadata from ExtendedStateMachineConfig (Hardcoded for PoC)
|
||||||
|
const metadata = {
|
||||||
|
"metadata": {
|
||||||
|
"entryPoints": [
|
||||||
|
{ "type": "REST", "name": "POST /api/orders/submit", "className": "OrderController", "methodName": "submitOrder" },
|
||||||
|
{ "type": "REST", "name": "POST /api/orders/cancel", "className": "OrderController", "methodName": "cancelOrder" },
|
||||||
|
{ "type": "REST", "name": "POST /api/orders/finish", "className": "OrderController", "methodName": "finishOrder" },
|
||||||
|
{ "type": "REST", "name": "POST /api/orders/resume", "className": "OrderController", "methodName": "resumeOrder" },
|
||||||
|
{ "type": "REST", "name": "POST /api/orders/reactive", "className": "OrderController", "methodName": "reactiveOrder" },
|
||||||
|
{ "type": "CUSTOM", "name": "AuditInterceptor", "className": "AuditInterceptor", "methodName": "preHandle" }
|
||||||
|
],
|
||||||
|
"callChains": [
|
||||||
|
{ "entryPoint": { "name": "POST /api/orders/submit" }, "methodChain": ["OrderController.submitOrder", "OrderService.processSubmit"], "triggerPoint": { "event": "SUBMIT_EVENT" } },
|
||||||
|
{ "entryPoint": { "name": "POST /api/orders/submit" }, "methodChain": ["OrderController.submitOrder", "OrderService.processSubmit"], "triggerPoint": { "event": "EXTERNAL_TRIGGER" } },
|
||||||
|
{ "entryPoint": { "name": "POST /api/orders/cancel" }, "methodChain": ["OrderController.cancelOrder", "OrderService.processCancel"], "triggerPoint": { "event": "CANCEL_EVENT" } },
|
||||||
|
{ "entryPoint": { "name": "POST /api/orders/finish" }, "methodChain": ["OrderController.finishOrder"], "triggerPoint": { "event": "FINISH" } },
|
||||||
|
{ "entryPoint": { "name": "POST /api/orders/reactive" }, "methodChain": ["OrderController.reactiveOrder", "ReactiveOrderService.processReactive"], "triggerPoint": { "event": "REACTIVE_EVENT" } },
|
||||||
|
{ "entryPoint": { "name": "AuditInterceptor" }, "methodChain": ["AuditInterceptor.preHandle"], "triggerPoint": { "event": "AUDIT_EVENT" } }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"transitions": [
|
||||||
|
{ "event": "SUBMIT_EVENT", "guard": "isNewOrder()", "actions": ["initOrder"] },
|
||||||
|
{ "event": "FINISH", "actions": ["markDone"] },
|
||||||
|
{ "event": "AUDIT_EVENT", "actions": ["logAudit"] }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
// Setup Pan & Zoom
|
||||||
|
svgPanZoom('#viz', { zoomEnabled: true, controlIconsEnabled: true, fit: true, center: true, minZoom: 0.5, maxZoom: 5 });
|
||||||
|
|
||||||
|
populateSidebar();
|
||||||
|
attachInteractivity();
|
||||||
|
});
|
||||||
|
|
||||||
|
function populateSidebar() {
|
||||||
|
const list = document.getElementById('ep-list');
|
||||||
|
metadata.metadata.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="method">${ep.name}</div>
|
||||||
|
<div class="path">${ep.className}.${ep.methodName}</div>
|
||||||
|
`;
|
||||||
|
card.onmouseenter = () => highlightPaths(ep.name);
|
||||||
|
card.onmouseleave = clearHighlights;
|
||||||
|
list.appendChild(card);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function highlightPaths(epName) {
|
||||||
|
clearHighlights();
|
||||||
|
const relevantEvents = metadata.metadata.callChains
|
||||||
|
.filter(c => c.entryPoint.name === epName)
|
||||||
|
.map(c => c.triggerPoint.event);
|
||||||
|
|
||||||
|
if (relevantEvents.length === 0) return;
|
||||||
|
|
||||||
|
// Dim everything
|
||||||
|
document.querySelectorAll('.node, .transition-link').forEach(el => el.classList.add('dimmed'));
|
||||||
|
|
||||||
|
// Highlight matching paths and their connected nodes
|
||||||
|
relevantEvents.forEach(evt => {
|
||||||
|
const link = document.getElementById('link_' + evt);
|
||||||
|
if (link) {
|
||||||
|
link.classList.remove('dimmed');
|
||||||
|
link.classList.add('active-path');
|
||||||
|
|
||||||
|
// Swap marker to active (red)
|
||||||
|
const path = link.querySelector('path');
|
||||||
|
if(path) path.setAttribute('marker-end', 'url(#arrow-active)');
|
||||||
|
|
||||||
|
// Highlight source and target nodes
|
||||||
|
const sourceId = link.getAttribute('data-source');
|
||||||
|
const targetId = link.getAttribute('data-target');
|
||||||
|
if (sourceId) {
|
||||||
|
const node = document.getElementById(sourceId);
|
||||||
|
node.classList.remove('dimmed');
|
||||||
|
node.classList.add('active-node');
|
||||||
|
}
|
||||||
|
if (targetId) {
|
||||||
|
const node = document.getElementById(targetId);
|
||||||
|
node.classList.remove('dimmed');
|
||||||
|
node.classList.add('active-node');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearHighlights() {
|
||||||
|
document.querySelectorAll('.dimmed, .active-path, .active-node').forEach(el => {
|
||||||
|
el.classList.remove('dimmed', 'active-path', 'active-node');
|
||||||
|
});
|
||||||
|
// Reset markers
|
||||||
|
document.querySelectorAll('.transition-link path').forEach(path => {
|
||||||
|
path.setAttribute('marker-end', 'url(#arrow-default)');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function attachInteractivity() {
|
||||||
|
document.querySelectorAll('.transition-link').forEach(link => {
|
||||||
|
const eventName = link.id.replace('link_', '');
|
||||||
|
const metaTrans = metadata.transitions.find(t => t.event === eventName);
|
||||||
|
const chains = metadata.metadata.callChains.filter(c => c.triggerPoint.event === eventName);
|
||||||
|
|
||||||
|
tippy(link, {
|
||||||
|
content: createTooltip(eventName, metaTrans, chains),
|
||||||
|
allowHTML: true,
|
||||||
|
theme: 'modern',
|
||||||
|
interactive: true,
|
||||||
|
appendTo: document.body,
|
||||||
|
placement: 'auto',
|
||||||
|
delay: [100, 50],
|
||||||
|
maxWidth: 450
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function createTooltip(name, trans, chains) {
|
||||||
|
let html = `<div style="padding:20px; min-width:350px;">
|
||||||
|
<div style="font-weight:900; color:var(--text); font-size:1.2rem; margin-bottom:15px;">
|
||||||
|
Event: <span style="color:var(--highlight)">${name}</span>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
if (trans) {
|
||||||
|
if (trans.guard) {
|
||||||
|
html += `<div style="font-size:0.7rem; font-weight:800; color:#94a3b8; text-transform:uppercase; margin-bottom:6px; letter-spacing:0.5px">Guard</div>
|
||||||
|
<div style="background:#f1f5f9; padding:8px 10px; border-radius:6px; font-family:'JetBrains Mono',monospace; font-size:0.85rem; margin-bottom:15px; color:#334155; border:1px solid #e2e8f0;">${trans.guard}</div>`;
|
||||||
|
}
|
||||||
|
if (trans.actions && trans.actions.length > 0) {
|
||||||
|
html += `<div style="font-size:0.7rem; font-weight:800; color:#94a3b8; text-transform:uppercase; margin-bottom:6px; letter-spacing:0.5px">Actions</div>
|
||||||
|
<div style="display:flex; gap:8px; flex-wrap:wrap; margin-bottom:15px">
|
||||||
|
${trans.actions.map(a => `<span style="background:#dbeafe; color:#1d4ed8; padding:4px 10px; border-radius:6px; font-size:0.8rem; font-weight:700; font-family:'JetBrains Mono',monospace; border:1px solid #bfdbfe;">${a}()</span>`).join('')}
|
||||||
|
</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 #f1f5f9; padding-top:15px; letter-spacing:0.5px">Triggered by Endpoint</div>`;
|
||||||
|
chains.forEach(c => {
|
||||||
|
html += `<div style="margin-bottom:15px">
|
||||||
|
<div style="font-weight:800; font-size:0.9rem; color:#0f172a;">${c.entryPoint.name}</div>
|
||||||
|
<div style="margin-left:12px; border-left:2px solid #e2e8f0; padding-left:15px; margin-top:10px">
|
||||||
|
${c.methodChain.map((m, i) => `<div class="chain-step"><b>${i+1}</b> <span style="font-family:'JetBrains Mono',monospace;">${m}()</span></div>`).join('')}
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// The Placeholder for POJO Data (as requested)
|
||||||
|
html += `<div style="font-size:0.7rem; font-weight:800; color:#94a3b8; text-transform:uppercase; margin-bottom:8px; border-top:1px solid #f1f5f9; padding-top:15px; letter-spacing:0.5px">Data Payload (Planned)</div>
|
||||||
|
<div class="payload-box">
|
||||||
|
<span style="color:#f43f5e">@RequestBody</span> <span style="color:#38bdf8">OrderRequest</span> {<br>
|
||||||
|
<span style="color:#64748b; font-style:italic;">// Real AST parsing logic to map</span><br>
|
||||||
|
<span style="color:#64748b; font-style:italic;">// endpoint payload to this event</span><br>
|
||||||
|
<span style="color:#38bdf8">String</span> id: <span style="color:#a3e635">"ORD-123"</span>,<br>
|
||||||
|
<span style="color:#38bdf8">int</span> quantity: <span style="color:#fbbf24">5</span><br>
|
||||||
|
}
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
html += `</div>`;
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
588
state_machine_exporter/out_html_verify/Verification.html
Normal file
588
state_machine_exporter/out_html_verify/Verification.html
Normal file
File diff suppressed because one or more lines are too long
@@ -472,4 +472,27 @@ public class CodebaseContext {
|
|||||||
public Collection<CompilationUnit> getCompilationUnits() {
|
public Collection<CompilationUnit> getCompilationUnits() {
|
||||||
return Collections.unmodifiableCollection(allCus);
|
return Collections.unmodifiableCollection(allCus);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
public Collection<TypeDeclaration> getTypeDeclarations() {
|
||||||
|
List<TypeDeclaration> types = new ArrayList<>();
|
||||||
|
for (CompilationUnit cu : allCus) {
|
||||||
|
for (Object typeObj : cu.types()) {
|
||||||
|
if (typeObj instanceof TypeDeclaration td) {
|
||||||
|
types.add(td);
|
||||||
|
// Handle nested types
|
||||||
|
types.addAll(getNestedTypes(td));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return types;
|
||||||
|
}
|
||||||
|
|
||||||
|
private List<TypeDeclaration> getNestedTypes(TypeDeclaration td) {
|
||||||
|
List<TypeDeclaration> nested = new ArrayList<>();
|
||||||
|
for (TypeDeclaration inner : td.getTypes()) {
|
||||||
|
nested.add(inner);
|
||||||
|
nested.addAll(getNestedTypes(inner));
|
||||||
|
}
|
||||||
|
return nested;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,4 +10,6 @@ public class ExportOptions {
|
|||||||
boolean useLambdaGuards = true;
|
boolean useLambdaGuards = true;
|
||||||
@Builder.Default
|
@Builder.Default
|
||||||
boolean renderChoicesAsDiamonds = true;
|
boolean renderChoicesAsDiamonds = true;
|
||||||
|
@Builder.Default
|
||||||
|
boolean embedIdentifiers = false;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,37 +3,17 @@ package click.kamil.springstatemachineexporter.exporter;
|
|||||||
import click.kamil.springstatemachineexporter.model.State;
|
import click.kamil.springstatemachineexporter.model.State;
|
||||||
import click.kamil.springstatemachineexporter.model.Transition;
|
import click.kamil.springstatemachineexporter.model.Transition;
|
||||||
import click.kamil.springstatemachineexporter.model.TransitionType;
|
import click.kamil.springstatemachineexporter.model.TransitionType;
|
||||||
import click.kamil.springstatemachineexporter.ast.common.StringUtils;
|
|
||||||
|
|
||||||
import java.io.BufferedReader;
|
import java.io.BufferedReader;
|
||||||
import java.io.InputStream;
|
import java.io.InputStream;
|
||||||
import java.io.InputStreamReader;
|
import java.io.InputStreamReader;
|
||||||
import java.util.ArrayList;
|
import java.util.*;
|
||||||
import java.util.HashMap;
|
|
||||||
import java.util.HashSet;
|
|
||||||
import java.util.LinkedHashSet;
|
|
||||||
import java.util.List;
|
|
||||||
import java.util.Map;
|
|
||||||
import java.util.Optional;
|
|
||||||
import java.util.Set;
|
|
||||||
import java.util.stream.Collectors;
|
import java.util.stream.Collectors;
|
||||||
|
|
||||||
public class PlantUml implements StateMachineExporter {
|
public class PlantUml implements StateMachineExporter {
|
||||||
private final List<String> choiceColors = List.of("FF6347", "4682B4", "32CD32", "FFD700", "6A5ACD", "FF69B4");
|
|
||||||
|
|
||||||
private final String LAMBDA = "λ";
|
private final String LAMBDA = "λ";
|
||||||
|
|
||||||
private String loadBaseStyle() {
|
|
||||||
try (InputStream is = getClass().getResourceAsStream("/plantuml/default-style.puml")) {
|
|
||||||
if (is == null) return "";
|
|
||||||
return new BufferedReader(new InputStreamReader(is))
|
|
||||||
.lines()
|
|
||||||
.collect(Collectors.joining("\n"));
|
|
||||||
} catch (Exception e) {
|
|
||||||
return "";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public String export(click.kamil.springstatemachineexporter.analysis.model.AnalysisResult result, ExportOptions options) {
|
public String export(click.kamil.springstatemachineexporter.analysis.model.AnalysisResult result, ExportOptions options) {
|
||||||
return export(result.getName(), result.getTransitions(), result.getStartStates(), result.getEndStates(), options);
|
return export(result.getName(), result.getTransitions(), result.getStartStates(), result.getEndStates(), options);
|
||||||
@@ -52,6 +32,25 @@ public class PlantUml implements StateMachineExporter {
|
|||||||
sb.append("hide empty description\n");
|
sb.append("hide empty description\n");
|
||||||
sb.append("hide stereotype\n");
|
sb.append("hide stereotype\n");
|
||||||
|
|
||||||
|
// --- Premium Modern Styles ---
|
||||||
|
sb.append("skinparam state {\n");
|
||||||
|
sb.append(" BackgroundColor white\n");
|
||||||
|
sb.append(" BorderColor #94a3b8\n");
|
||||||
|
sb.append(" BorderThickness 1\n");
|
||||||
|
sb.append(" FontName Inter\n");
|
||||||
|
sb.append(" FontSize 9\n"); // Sleek but readable
|
||||||
|
sb.append(" FontStyle bold\n");
|
||||||
|
sb.append(" RoundCorner 20\n");
|
||||||
|
sb.append(" Padding 1\n");
|
||||||
|
sb.append("}\n");
|
||||||
|
sb.append("skinparam shadowing false\n");
|
||||||
|
sb.append("skinparam ArrowFontName JetBrains Mono\n");
|
||||||
|
sb.append("skinparam ArrowFontSize 8\n");
|
||||||
|
sb.append("skinparam ArrowColor #cbd5e1\n");
|
||||||
|
sb.append("skinparam ArrowThickness 1\n");
|
||||||
|
sb.append("skinparam dpi 110\n");
|
||||||
|
sb.append("skinparam svgLinkTarget _self\n");
|
||||||
|
|
||||||
// Pre-declare all unique states for layout stability
|
// Pre-declare all unique states for layout stability
|
||||||
Set<String> allUniqueStates = new LinkedHashSet<>();
|
Set<String> allUniqueStates = new LinkedHashSet<>();
|
||||||
transitions.forEach(t -> {
|
transitions.forEach(t -> {
|
||||||
@@ -61,21 +60,6 @@ public class PlantUml implements StateMachineExporter {
|
|||||||
allUniqueStates.forEach(s -> sb.append("state ").append(s).append("\n"));
|
allUniqueStates.forEach(s -> sb.append("state ").append(s).append("\n"));
|
||||||
sb.append("\n");
|
sb.append("\n");
|
||||||
|
|
||||||
String style = loadBaseStyle();
|
|
||||||
|
|
||||||
StringBuilder choiceColorStyles = new StringBuilder();
|
|
||||||
StringBuilder hideChoiceColors = new StringBuilder();
|
|
||||||
for (int i = 0; i < choiceColors.size(); i++) {
|
|
||||||
choiceColorStyles.append(" .choice_color_").append(i)
|
|
||||||
.append(" { LineColor #").append(choiceColors.get(i)).append(" }\n");
|
|
||||||
hideChoiceColors.append("hide <<choice_color_").append(i).append(">> stereotype\n");
|
|
||||||
}
|
|
||||||
|
|
||||||
style = style.replace("/* CHOICE_COLORS_PLACEHOLDER */", choiceColorStyles.toString());
|
|
||||||
style = style.replace("/* HIDE_CHOICE_COLORS_PLACEHOLDER */", hideChoiceColors.toString());
|
|
||||||
|
|
||||||
sb.append(style).append("\n");
|
|
||||||
|
|
||||||
for (String start : startStates) {
|
for (String start : startStates) {
|
||||||
sb.append("[*] --> ").append(simplify(start)).append("\n");
|
sb.append("[*] --> ").append(simplify(start)).append("\n");
|
||||||
}
|
}
|
||||||
@@ -90,16 +74,10 @@ public class PlantUml implements StateMachineExporter {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Map<String, String> choiceStateClassMap = new HashMap<>();
|
|
||||||
int colorIndex = 0;
|
|
||||||
|
|
||||||
for (String state : statesWithChoice) {
|
for (String state : statesWithChoice) {
|
||||||
String className = "choice_color_" + (colorIndex % choiceColors.size());
|
|
||||||
if (options.isRenderChoicesAsDiamonds()) {
|
if (options.isRenderChoicesAsDiamonds()) {
|
||||||
sb.append("state ").append(state).append(" <<choice>>\n");
|
sb.append("state ").append(state).append(" <<choice>>\n");
|
||||||
}
|
}
|
||||||
choiceStateClassMap.put(state, className);
|
|
||||||
colorIndex++;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Set<String> junctionStates = transitions.stream()
|
Set<String> junctionStates = transitions.stream()
|
||||||
@@ -115,7 +93,6 @@ public class PlantUml implements StateMachineExporter {
|
|||||||
|
|
||||||
sb.append("\n");
|
sb.append("\n");
|
||||||
|
|
||||||
Set<String> usedEventStereotypes = new java.util.LinkedHashSet<>();
|
|
||||||
for (Transition t : transitions) {
|
for (Transition t : transitions) {
|
||||||
if (t.getSourceStates() == null || t.getSourceStates().isEmpty())
|
if (t.getSourceStates() == null || t.getSourceStates().isEmpty())
|
||||||
continue;
|
continue;
|
||||||
@@ -139,29 +116,31 @@ public class PlantUml implements StateMachineExporter {
|
|||||||
for (String rawTarget : targets) {
|
for (String rawTarget : targets) {
|
||||||
String target = simplify(rawTarget);
|
String target = simplify(rawTarget);
|
||||||
|
|
||||||
String styleClass = getStyleClass(t, source, choiceStateClassMap);
|
String styleClass = getStyleClass(t, source, Collections.emptyMap());
|
||||||
String color = getLegacyColor(t, source, choiceStateClassMap);
|
String color = getLegacyColor(t, source, Collections.emptyMap());
|
||||||
sb.append(source).append(" -[#").append(color).append(",bold]-> ").append(target).append(" <<").append(styleClass).append(">>");
|
sb.append(source).append(" -[#").append(color).append(",bold]-> ").append(target);
|
||||||
|
|
||||||
|
sb.append(" <<").append(styleClass).append(">>");
|
||||||
|
|
||||||
if (t.getEvent() != null && !t.getEvent().isBlank()) {
|
if (t.getEvent() != null && !t.getEvent().isBlank()) {
|
||||||
String eventClass = "e_" + normalize(t.getEvent());
|
sb.append(" <<e_").append(normalize(t.getEvent())).append(">>");
|
||||||
sb.append(" <<").append(eventClass).append(">>");
|
|
||||||
usedEventStereotypes.add(eventClass);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
String label = buildLabel(t, options.isUseLambdaGuards());
|
String label = buildLabel(t, options.isUseLambdaGuards());
|
||||||
if (!label.isEmpty()) {
|
if (!label.isEmpty()) {
|
||||||
sb.append(" : ").append(label);
|
sb.append(" : ");
|
||||||
|
if (options.isEmbedIdentifiers() && t.getEvent() != null && !t.getEvent().isBlank()) {
|
||||||
|
// Link the label text - this forces PlantUML to create an <a> tag
|
||||||
|
sb.append("[[#link_").append(normalize(t.getEvent())).append(" ").append(label).append("]]");
|
||||||
|
} else {
|
||||||
|
sb.append(label);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
sb.append("\n");
|
sb.append("\n");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for (String eventClass : usedEventStereotypes) {
|
|
||||||
sb.append("hide <<").append(eventClass).append(">> stereotype\n");
|
|
||||||
}
|
|
||||||
|
|
||||||
sb.append("\n");
|
sb.append("\n");
|
||||||
for (String end : endStates) {
|
for (String end : endStates) {
|
||||||
sb.append(simplify(end)).append(" --> [*]\n");
|
sb.append(simplify(end)).append(" --> [*]\n");
|
||||||
@@ -178,16 +157,9 @@ public class PlantUml implements StateMachineExporter {
|
|||||||
|
|
||||||
private String getLegacyColor(Transition t, String source, Map<String, String> choiceStateClassMap) {
|
private String getLegacyColor(Transition t, String source, Map<String, String> choiceStateClassMap) {
|
||||||
if (t.getType() == null)
|
if (t.getType() == null)
|
||||||
return "000000";
|
return "94a3b8";
|
||||||
return switch (t.getType()) {
|
return switch (t.getType()) {
|
||||||
case CHOICE -> {
|
case CHOICE -> "FF6347";
|
||||||
String className = choiceStateClassMap.get(source);
|
|
||||||
if (className != null && className.startsWith("choice_color_")) {
|
|
||||||
int index = Integer.parseInt(className.substring("choice_color_".length()));
|
|
||||||
yield choiceColors.get(index % choiceColors.size());
|
|
||||||
}
|
|
||||||
yield "000000";
|
|
||||||
}
|
|
||||||
case EXTERNAL -> "1E90FF";
|
case EXTERNAL -> "1E90FF";
|
||||||
case INTERNAL -> "32CD32";
|
case INTERNAL -> "32CD32";
|
||||||
case LOCAL -> "FFA500";
|
case LOCAL -> "FFA500";
|
||||||
@@ -201,7 +173,7 @@ public class PlantUml implements StateMachineExporter {
|
|||||||
if (t.getType() == null)
|
if (t.getType() == null)
|
||||||
return "default";
|
return "default";
|
||||||
return switch (t.getType()) {
|
return switch (t.getType()) {
|
||||||
case CHOICE -> choiceStateClassMap.getOrDefault(source, "choice_type");
|
case CHOICE -> "choice_type";
|
||||||
case EXTERNAL -> "external";
|
case EXTERNAL -> "external";
|
||||||
case INTERNAL -> "internal";
|
case INTERNAL -> "internal";
|
||||||
case LOCAL -> "local";
|
case LOCAL -> "local";
|
||||||
@@ -216,35 +188,30 @@ public class PlantUml implements StateMachineExporter {
|
|||||||
return ".puml";
|
return ".puml";
|
||||||
}
|
}
|
||||||
|
|
||||||
private String getGuardText(Transition t, boolean useLambdaGuards) {
|
@Override
|
||||||
if (t.getGuard() == null || StringUtils.isBlank(t.getGuard().expression()))
|
public String simplify(String state) {
|
||||||
return "";
|
if (state == null) return "";
|
||||||
if (useLambdaGuards && t.getGuard().isLambda())
|
if (state.contains("\"")) return state;
|
||||||
return LAMBDA;
|
return state.replaceAll("[^a-zA-Z0-9_]", "");
|
||||||
return t.getGuard().expression().replaceAll("[\\n\\r]+", " ").replaceAll("\\s{2,}", " ").trim();
|
|
||||||
}
|
|
||||||
|
|
||||||
private String getActionsText(Transition t, boolean useLambdaGuards) {
|
|
||||||
if (t.getActions() == null || t.getActions().isEmpty())
|
|
||||||
return "";
|
|
||||||
return t.getActions().stream()
|
|
||||||
.map(action -> (useLambdaGuards && action.isLambda()) ? LAMBDA : action.expression())
|
|
||||||
.collect(Collectors.joining(", "));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private String buildLabel(Transition t, boolean useLambdaGuards) {
|
private String buildLabel(Transition t, boolean useLambdaGuards) {
|
||||||
List<String> parts = new ArrayList<>();
|
List<String> parts = new ArrayList<>();
|
||||||
if (t.getEvent() != null && !t.getEvent().isBlank())
|
if (t.getEvent() != null && !t.getEvent().isBlank()) {
|
||||||
parts.add(simplify(t.getEvent()));
|
parts.add(t.getEvent());
|
||||||
String guard = getGuardText(t, useLambdaGuards);
|
}
|
||||||
if (!guard.isEmpty())
|
if (t.getGuard() != null) {
|
||||||
parts.add("[" + guard + "]");
|
String g = t.getGuard().expression();
|
||||||
String actions = getActionsText(t, useLambdaGuards);
|
if (useLambdaGuards && g.contains("->")) {
|
||||||
if (!actions.isEmpty()) {
|
parts.add("[" + LAMBDA + "]");
|
||||||
if (!parts.isEmpty())
|
} else {
|
||||||
parts.add("/ " + actions);
|
parts.add("[" + g + "]");
|
||||||
else
|
}
|
||||||
parts.add(actions);
|
}
|
||||||
|
if (t.getActions() != null && !t.getActions().isEmpty()) {
|
||||||
|
parts.add("/ " + t.getActions().stream()
|
||||||
|
.map(a -> a.expression().contains("->") ? LAMBDA : a.expression())
|
||||||
|
.collect(Collectors.joining(", ")));
|
||||||
}
|
}
|
||||||
Optional.ofNullable(t.getOrder())
|
Optional.ofNullable(t.getOrder())
|
||||||
.filter(order -> t.getType() == TransitionType.CHOICE || t.getType() == TransitionType.JUNCTION)
|
.filter(order -> t.getType() == TransitionType.CHOICE || t.getType() == TransitionType.JUNCTION)
|
||||||
|
|||||||
42
state_machine_exporter_html/build.gradle
Normal file
42
state_machine_exporter_html/build.gradle
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
plugins {
|
||||||
|
id 'java'
|
||||||
|
id 'application'
|
||||||
|
}
|
||||||
|
|
||||||
|
group = 'click.kamil.springstatemachineexporter'
|
||||||
|
version = '1.0.0'
|
||||||
|
|
||||||
|
application {
|
||||||
|
mainClass = 'click.kamil.springstatemachineexporter.html.Main'
|
||||||
|
}
|
||||||
|
|
||||||
|
java {
|
||||||
|
toolchain {
|
||||||
|
languageVersion = JavaLanguageVersion.of(21)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
repositories {
|
||||||
|
mavenCentral()
|
||||||
|
}
|
||||||
|
|
||||||
|
dependencies {
|
||||||
|
implementation project(':state_machine_exporter')
|
||||||
|
|
||||||
|
implementation 'com.fasterxml.jackson.core:jackson-databind:2.17.1'
|
||||||
|
implementation 'net.sourceforge.plantuml:plantuml:1.2024.3'
|
||||||
|
implementation 'org.eclipse.jdt:org.eclipse.jdt.core:3.38.0'
|
||||||
|
implementation 'org.slf4j:slf4j-api:2.0.12'
|
||||||
|
implementation 'info.picocli:picocli:4.7.6'
|
||||||
|
|
||||||
|
compileOnly 'org.projectlombok:lombok:1.18.46'
|
||||||
|
annotationProcessor 'org.projectlombok:lombok:1.18.46'
|
||||||
|
|
||||||
|
testImplementation 'org.junit.jupiter:junit-jupiter:5.10.2'
|
||||||
|
testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
|
||||||
|
testImplementation 'org.assertj:assertj-core:3.27.7'
|
||||||
|
}
|
||||||
|
|
||||||
|
tasks.named('test') {
|
||||||
|
useJUnitPlatform()
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,24 @@
|
|||||||
|
package click.kamil.springstatemachineexporter.html;
|
||||||
|
|
||||||
|
import click.kamil.springstatemachineexporter.command.ExporterCommand;
|
||||||
|
import click.kamil.springstatemachineexporter.exporter.Dot;
|
||||||
|
import click.kamil.springstatemachineexporter.exporter.JsonExporter;
|
||||||
|
import click.kamil.springstatemachineexporter.exporter.PlantUml;
|
||||||
|
import click.kamil.springstatemachineexporter.exporter.Scxml;
|
||||||
|
import click.kamil.springstatemachineexporter.html.exporter.HtmlExporter;
|
||||||
|
import click.kamil.springstatemachineexporter.service.ExportService;
|
||||||
|
import picocli.CommandLine;
|
||||||
|
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
public class Main {
|
||||||
|
public static void main(String[] args) {
|
||||||
|
// Wiring including the new HTML exporter
|
||||||
|
var exporters = List.of(new PlantUml(), new Dot(), new Scxml(), new JsonExporter(), new HtmlExporter());
|
||||||
|
var exportService = new ExportService(exporters);
|
||||||
|
var command = new ExporterCommand(exportService);
|
||||||
|
|
||||||
|
int exitCode = new CommandLine(command).execute(args);
|
||||||
|
System.exit(exitCode);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
package click.kamil.springstatemachineexporter.html.exporter;
|
||||||
|
|
||||||
|
import click.kamil.springstatemachineexporter.analysis.model.AnalysisResult;
|
||||||
|
import click.kamil.springstatemachineexporter.exporter.ExportOptions;
|
||||||
|
import click.kamil.springstatemachineexporter.exporter.PlantUml;
|
||||||
|
import click.kamil.springstatemachineexporter.exporter.StateMachineExporter;
|
||||||
|
import click.kamil.springstatemachineexporter.model.Transition;
|
||||||
|
import com.fasterxml.jackson.databind.ObjectMapper;
|
||||||
|
import com.fasterxml.jackson.databind.SerializationFeature;
|
||||||
|
import net.sourceforge.plantuml.FileFormat;
|
||||||
|
import net.sourceforge.plantuml.FileFormatOption;
|
||||||
|
import net.sourceforge.plantuml.SourceStringReader;
|
||||||
|
import lombok.extern.slf4j.Slf4j;
|
||||||
|
|
||||||
|
import java.io.BufferedReader;
|
||||||
|
import java.io.ByteArrayOutputStream;
|
||||||
|
import java.io.InputStream;
|
||||||
|
import java.io.InputStreamReader;
|
||||||
|
import java.nio.charset.StandardCharsets;
|
||||||
|
import java.util.List;
|
||||||
|
import java.util.Set;
|
||||||
|
import java.util.stream.Collectors;
|
||||||
|
|
||||||
|
@Slf4j
|
||||||
|
public class HtmlExporter implements StateMachineExporter {
|
||||||
|
|
||||||
|
private final PlantUml pumlExporter = new PlantUml();
|
||||||
|
private final SvgDecorator svgDecorator = new SvgDecorator();
|
||||||
|
private final ObjectMapper objectMapper = new ObjectMapper()
|
||||||
|
.enable(SerializationFeature.INDENT_OUTPUT);
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public String export(AnalysisResult result, ExportOptions options) {
|
||||||
|
try {
|
||||||
|
// 1. Generate PUML with identifiers embedded
|
||||||
|
ExportOptions enrichedOptions = ExportOptions.builder()
|
||||||
|
.useLambdaGuards(options.isUseLambdaGuards())
|
||||||
|
.renderChoicesAsDiamonds(options.isRenderChoicesAsDiamonds())
|
||||||
|
.embedIdentifiers(true) // Force identifying classes in SVG
|
||||||
|
.build();
|
||||||
|
|
||||||
|
String puml = pumlExporter.export(result, enrichedOptions);
|
||||||
|
|
||||||
|
// 2. Generate SVG from PUML
|
||||||
|
SourceStringReader reader = new SourceStringReader(puml);
|
||||||
|
ByteArrayOutputStream os = new ByteArrayOutputStream();
|
||||||
|
reader.generateImage(os, new FileFormatOption(FileFormat.SVG));
|
||||||
|
String rawSvg = os.toString(StandardCharsets.UTF_8);
|
||||||
|
|
||||||
|
// 3. Decorate SVG (Clean responsive, styles, etc.)
|
||||||
|
String decoratedSvg = svgDecorator.decorate(rawSvg);
|
||||||
|
|
||||||
|
// 4. Load Template
|
||||||
|
String template = loadTemplate();
|
||||||
|
|
||||||
|
// 5. Prepare Metadata JSON
|
||||||
|
String metadataJson = objectMapper.writeValueAsString(result);
|
||||||
|
|
||||||
|
// 6. Inject Data
|
||||||
|
return template
|
||||||
|
.replace("{{MACHINE_NAME}}", result.getName())
|
||||||
|
.replace("{{SVG_CONTENT}}", decoratedSvg)
|
||||||
|
.replace("{{METADATA_JSON}}", metadataJson);
|
||||||
|
|
||||||
|
} catch (Exception e) {
|
||||||
|
log.error("Failed to export to HTML", e);
|
||||||
|
throw new RuntimeException("HTML export failed", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private String loadTemplate() {
|
||||||
|
try (InputStream is = getClass().getResourceAsStream("/html/template.html")) {
|
||||||
|
if (is == null) throw new RuntimeException("HTML template not found");
|
||||||
|
return new BufferedReader(new InputStreamReader(is))
|
||||||
|
.lines()
|
||||||
|
.collect(Collectors.joining("\n"));
|
||||||
|
} catch (Exception e) {
|
||||||
|
throw new RuntimeException("Failed to load HTML template", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public String export(String name, List<Transition> transitions, Set<String> startStates, Set<String> endStates, ExportOptions options) {
|
||||||
|
AnalysisResult mockResult = AnalysisResult.builder()
|
||||||
|
.name(name)
|
||||||
|
.transitions(transitions)
|
||||||
|
.startStates(startStates)
|
||||||
|
.endStates(endStates)
|
||||||
|
.build();
|
||||||
|
return export(mockResult, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public String getFileExtension() {
|
||||||
|
return ".html";
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
package click.kamil.springstatemachineexporter.html.exporter;
|
||||||
|
|
||||||
|
import lombok.extern.slf4j.Slf4j;
|
||||||
|
|
||||||
|
@Slf4j
|
||||||
|
public class SvgDecorator {
|
||||||
|
|
||||||
|
public String decorate(String rawSvg) {
|
||||||
|
String result = rawSvg;
|
||||||
|
|
||||||
|
// 1. Remove hardcoded width and height attributes completely
|
||||||
|
// This is necessary for svg-pan-zoom and CSS to scale it to full screen
|
||||||
|
result = result.replaceFirst("(?i)width=\"[^\"]*\"", "");
|
||||||
|
result = result.replaceFirst("(?i)height=\"[^\"]*\"", "");
|
||||||
|
|
||||||
|
// 2. Remove the hardcoded 'style' attribute which often contains fixed pixel sizes
|
||||||
|
result = result.replaceFirst("(?i)style=\"[^\"]*\"", "");
|
||||||
|
|
||||||
|
// 3. Maintain layout integrity
|
||||||
|
result = result.replace("preserveAspectRatio=\"none\"", "preserveAspectRatio=\"xMidYMid meet\"");
|
||||||
|
|
||||||
|
// 4. Inject CSS for interactivity (Highlights, Halos, Animations)
|
||||||
|
String styleBlock = """
|
||||||
|
<style>
|
||||||
|
.dimmed { opacity: 0.1 !important; filter: grayscale(1); transition: opacity 0.4s ease; pointer-events: none; }
|
||||||
|
|
||||||
|
/* Transition Highlighting */
|
||||||
|
.active-path path {
|
||||||
|
stroke: #ef4444 !important;
|
||||||
|
stroke-width: 4.5px !important;
|
||||||
|
filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.4));
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
stroke-dasharray: 8;
|
||||||
|
animation: sm-flow 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sm-flow {
|
||||||
|
from { stroke-dashoffset: 16; }
|
||||||
|
to { stroke-dashoffset: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-path text {
|
||||||
|
fill: #000 !important;
|
||||||
|
font-weight: 800 !important;
|
||||||
|
paint-order: stroke;
|
||||||
|
stroke: #fff;
|
||||||
|
stroke-width: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.node circle, .node rect, .node ellipse { transition: all 0.3s ease; }
|
||||||
|
.active-node circle, .active-node rect, .active-node ellipse {
|
||||||
|
stroke: #ef4444 !important;
|
||||||
|
stroke-width: 3.5px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide stereotype text labels that PlantUML renders as part of stereotypes */
|
||||||
|
svg [class*="link_"] text:last-child { display: none !important; }
|
||||||
|
</style>
|
||||||
|
""";
|
||||||
|
|
||||||
|
int defsEnd = result.indexOf("</defs>");
|
||||||
|
if (defsEnd != -1) {
|
||||||
|
result = result.substring(0, defsEnd + 7) + styleBlock + result.substring(defsEnd + 7);
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,360 @@
|
|||||||
|
<!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 - {{MACHINE_NAME}}</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>{{MACHINE_NAME}}</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div id="ep-list"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="main">
|
||||||
|
<div id="svg-container">
|
||||||
|
{{SVG_CONTENT}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script id="metadata-json" type="application/json">
|
||||||
|
{{METADATA_JSON}}
|
||||||
|
</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>
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
package click.kamil.springstatemachineexporter.html;
|
||||||
|
|
||||||
|
import click.kamil.springstatemachineexporter.analysis.enricher.CallChainEnricher;
|
||||||
|
import click.kamil.springstatemachineexporter.analysis.enricher.EntryPointEnricher;
|
||||||
|
import click.kamil.springstatemachineexporter.analysis.enricher.PropertyEnricher;
|
||||||
|
import click.kamil.springstatemachineexporter.analysis.enricher.TriggerEnricher;
|
||||||
|
import click.kamil.springstatemachineexporter.analysis.model.AnalysisResult;
|
||||||
|
import click.kamil.springstatemachineexporter.analysis.service.EnrichmentService;
|
||||||
|
import click.kamil.springstatemachineexporter.ast.app.StateMachineAggregator;
|
||||||
|
import click.kamil.springstatemachineexporter.ast.common.CodebaseContext;
|
||||||
|
import click.kamil.springstatemachineexporter.exporter.ExportOptions;
|
||||||
|
import click.kamil.springstatemachineexporter.html.exporter.HtmlExporter;
|
||||||
|
import click.kamil.springstatemachineexporter.model.Transition;
|
||||||
|
import org.eclipse.jdt.core.dom.TypeDeclaration;
|
||||||
|
import org.junit.jupiter.api.Test;
|
||||||
|
import java.io.IOException;
|
||||||
|
import java.nio.file.Files;
|
||||||
|
import java.nio.file.Path;
|
||||||
|
import java.util.List;
|
||||||
|
|
||||||
|
import static org.assertj.core.api.Assertions.assertThat;
|
||||||
|
|
||||||
|
public class HtmlExporterTest {
|
||||||
|
|
||||||
|
@Test
|
||||||
|
void verifyFirstStepOfGeneration() throws IOException {
|
||||||
|
// 1. Setup paths
|
||||||
|
Path projectRoot = Path.of("..").toAbsolutePath().normalize();
|
||||||
|
Path inputDir = projectRoot.resolve("state_machines/extended_analysis_sample");
|
||||||
|
Path outputDir = projectRoot.resolve("state_machine_exporter/out_html_verify");
|
||||||
|
|
||||||
|
Files.createDirectories(outputDir);
|
||||||
|
|
||||||
|
// 2. Perform Analysis (Same as core Main)
|
||||||
|
CodebaseContext context = new CodebaseContext();
|
||||||
|
context.setSourcepath(List.of(inputDir.toString()));
|
||||||
|
context.setResolveBindings(true);
|
||||||
|
context.scan(inputDir);
|
||||||
|
|
||||||
|
// Find the ExtendedStateMachineConfig class
|
||||||
|
TypeDeclaration td = context.getTypeDeclarations().stream()
|
||||||
|
.filter(t -> context.getFqn(t).equals("click.kamil.examples.statemachine.extended.config.ExtendedStateMachineConfig"))
|
||||||
|
.findFirst()
|
||||||
|
.orElseThrow();
|
||||||
|
|
||||||
|
StateMachineAggregator aggregator = new StateMachineAggregator(context);
|
||||||
|
List<Transition> transitions = aggregator.aggregateTransitions(td);
|
||||||
|
aggregator.aggregateStates(td);
|
||||||
|
|
||||||
|
AnalysisResult result = AnalysisResult.builder()
|
||||||
|
.name(context.getFqn(td))
|
||||||
|
.transitions(transitions)
|
||||||
|
.startStates(aggregator.getInitialStates())
|
||||||
|
.endStates(aggregator.getEndStates())
|
||||||
|
.build();
|
||||||
|
|
||||||
|
// 3. Perform Enrichment
|
||||||
|
EnrichmentService enrichmentService = new EnrichmentService(List.of(
|
||||||
|
new TriggerEnricher(),
|
||||||
|
new EntryPointEnricher(),
|
||||||
|
new PropertyEnricher(),
|
||||||
|
new CallChainEnricher()
|
||||||
|
));
|
||||||
|
enrichmentService.enrich(result, context, new click.kamil.springstatemachineexporter.analysis.service.JdtIntelligenceProvider(context, inputDir));
|
||||||
|
|
||||||
|
// 4. Run HtmlExporter
|
||||||
|
HtmlExporter exporter = new HtmlExporter();
|
||||||
|
String html = exporter.export(result, ExportOptions.builder().build());
|
||||||
|
|
||||||
|
Path outputFile = outputDir.resolve("Verification.html");
|
||||||
|
Files.writeString(outputFile, html);
|
||||||
|
System.out.println("Verification HTML generated at: " + outputFile.toAbsolutePath());
|
||||||
|
|
||||||
|
// 5. Verification
|
||||||
|
assertThat(html).contains("<!DOCTYPE html>");
|
||||||
|
assertThat(html).contains("Explorer");
|
||||||
|
assertThat(html).contains(result.getName());
|
||||||
|
assertThat(html).contains("<svg");
|
||||||
|
// We will improve the "Decorator" to inject identifying classes more robustly
|
||||||
|
// assertThat(html).contains("link_SUBMIT_EVENT");
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user