tiny/spring-state-machine-renderer
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2 extended analysis render

Browse Source
This commit is contained in:
Kamil Patryk Kozakowski
2026-06-14 21:15:04 +02:00
parent 744439c99d
commit 2b6b727de6
18 changed files with 1540 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
state_machine_exporter_html/src/main/resources/html/template.html
View File

@@ -79,6 +79,10 @@
.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 { 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; }
@@ -98,13 +102,13 @@
display: block;
}
/* SVG Highlighting - Sleek Technical Tracers */
svg .stereotype { display: none !important; }
.active-path path {
/* SVG Interactivity Styles */
svg a { text-decoration: none !important; }
.active-path {
stroke: var(--accent) !important;
stroke-width: 2.0px !important;
filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.3));
stroke-width: 2.5px !important;
filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.3));
transition: all 0.3s;
}
@@ -117,7 +121,7 @@
}
.dimmed {
opacity: 0.25 !important;
opacity: 0.2 !important;
filter: grayscale(1);
transition: opacity 0.4s ease;
pointer-events: none;
@@ -151,6 +155,11 @@
line-height: 1.5;
margin-top: 10px;
}
.payload-param {
margin-bottom: 4px;
}
.payload-param:last-child { margin-bottom: 0; }
</style>
</head>
<body>
@@ -217,7 +226,7 @@
const svg = document.querySelector('svg');
// Dim all shapes and texts
// Dim everything first
svg.querySelectorAll('path, rect, circle, ellipse, text, polygon').forEach(el => {
el.classList.add('dimmed');
});
@@ -230,7 +239,7 @@
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;
@@ -335,24 +344,40 @@
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">
html += `<div style="margin-bottom:20px">
<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">
${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>`;
});
}
// 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>
&nbsp;&nbsp;<span style="color:#64748b">// Full AST field mapping to be implemented</span><br>
&nbsp;&nbsp;id: "ORD-123",<br>
&nbsp;&nbsp;quantity: 5<br>
}
</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"));
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>