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

from ai two

Browse Source
This commit is contained in:
Kamil Patryk Kozakowski
2026-07-06 21:41:26 +02:00
parent 56588a835d
commit 2caaec5419
3 changed files with 146 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -217,6 +217,22 @@
stroke-width: 3.5px;
}
.active-path-ambiguous {
stroke: #f97316 !important;
stroke-width: 2.5px !important;
stroke-dasharray: 6, 4;
filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.4));
transition: all 0.3s;
}
.active-path-ambiguous text, a.active-path-ambiguous 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);
@@ -418,7 +434,7 @@
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 });
steps.push({ event: t.event, source: t.sourceState, ambiguous: c.triggerPoint && c.triggerPoint.ambiguous });
});
}
}
@@ -446,10 +462,12 @@
let targetEvent = "";
let targetSource = "";
let targetAnon = "";
let isAmbiguous = false;
if (typeof step === 'object') {
targetEvent = normalize(step.event);
targetSource = normalize(step.source);
isAmbiguous = step.ambiguous;
} else if (step.includes("->")) {
const parts = step.split("->");
targetAnon = "#link_anon_" + normalize(parts[0]) + "_" + normalize(parts[1]);
@@ -475,7 +493,7 @@
}
if (matches) {
highlightLinkGroup(link);
highlightLinkGroup(link, isAmbiguous);
}
});
});
@@ -494,8 +512,9 @@
});
}
function highlightLinkGroup(link) {
link.classList.add('active-path');
function highlightLinkGroup(link, isAmbiguous) {
const activeClass = isAmbiguous ? 'active-path-ambiguous' : 'active-path';
link.classList.add(activeClass);
link.querySelectorAll('*').forEach(child => child.classList.remove('dimmed'));
// Find path and polygon immediately before the <a> tag (interleaved)
@@ -505,11 +524,11 @@
while (prev) {
if (prev.tagName === 'path' && !foundPath) {
prev.classList.remove('dimmed');
prev.classList.add('active-path');
prev.classList.add(activeClass);
foundPath = true;
} else if (prev.tagName === 'polygon' && !foundPolygon && prev.points?.numberOfItems !== 4) {
prev.classList.remove('dimmed');
prev.classList.add('active-path');
prev.classList.add(activeClass);
foundPolygon = true;
} else if (['rect', 'circle', 'ellipse'].includes(prev.tagName) ||
(prev.tagName === 'polygon' && prev.points?.numberOfItems === 4)) {
@@ -522,8 +541,8 @@
}
function clearHighlights() {
document.querySelectorAll('.dimmed, .active-path').forEach(el => {
el.classList.remove('dimmed', 'active-path');
document.querySelectorAll('.dimmed, .active-path, .active-path-ambiguous').forEach(el => {
el.classList.remove('dimmed', 'active-path', 'active-path-ambiguous');
});
}
@@ -629,9 +648,11 @@
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>` : '';
const ambiguousLabel = c.triggerPoint.ambiguous ? `<div style="display:inline-block; margin-top:4px; padding:2px 6px; background:#fff7ed; color:#ea580c; border:1px solid #fed7aa; border-radius:4px; font-size:0.6rem; font-weight:700;">⚠️ Ambiguous Resolution (Over-approximated)</div>` : '';
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>
${ambiguousLabel}
${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('')}