v1 extended analysis render
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user