VisualizationServer.cpp

Go to the documentation of this file.

 
 
#include "VisualizationServer.h"
#include "Server.h"           // TreeState, SequenceReport
#include <httplib.h>
#include <json.hpp>
#include <thread>
#include <mpi.h>
using namespace std;
 
using json = nlohmann::json;
 
// ---- PIMPL ----
 
struct VisualizationServer::Impl {
    httplib::Server svr;
    std::shared_ptr<TreeState> state;
    int port;
    std::thread thread;
 
    void setupRoutes();
    static std::string buildIndexHtml();
    static std::string buildPEHtml();
};
 
VisualizationServer::VisualizationServer(std::shared_ptr<TreeState> state, int port)
    : impl_(std::make_unique<Impl>())
{
    impl_->state = std::move(state);
    impl_->port = port;
    impl_->setupRoutes();
}
 
VisualizationServer::~VisualizationServer() { stop(); }
 
void VisualizationServer::start() {
    impl_->thread = std::thread([this]() {
        impl_->svr.listen("0.0.0.0", impl_->port);
    });
}
 
void VisualizationServer::stop() {
    if (impl_->svr.is_running()) impl_->svr.stop();
    if (impl_->thread.joinable()) impl_->thread.join();
}
 
// ---- Routes ----
 
void VisualizationServer::Impl::setupRoutes() {
    // Serve the self-contained HTML page
    svr.Get("/", [this](const httplib::Request&, httplib::Response& res) {
        res.set_content(buildIndexHtml(), "text/html");
    });
 
    // Serve the PE graph visualization page
    svr.Get("/pe", [this](const httplib::Request&, httplib::Response& res) {
        res.set_content(buildPEHtml(), "text/html");
    });
 
    // JSON API: tree structure + live stats
    svr.Get("/api/tree", [this](const httplib::Request&, httplib::Response& res) {
        json j;
        {
            std::lock_guard<std::mutex> lock(state->mu);
            j["sequences"] = json::array();
            for (auto& r : state->completed) {
                j["sequences"].push_back({
                    {"id", r.sequence_id},
                    {"parent_id", r.parent_sequence_id},
                    {"branch_time", r.branch_time},
                    {"end_time", r.end_time},
                    {"num_children", r.num_branches_generated},
                    {"worker", r.worker_rank}
                });
            }
            j["stats"] = {
                {"completed", state->sequences_completed},
                {"queue_depth", state->queue_depth},
                {"free_clients", state->num_free_clients},
                {"total_clients", state->total_clients},
                {"memory_mb", state->memory_mb},
                {"elapsed_s", MPI_Wtime() - state->start_time}
            };
        }
        res.set_content(j.dump(), "application/json");
    });
 
    // JSON API: PE events per sequence (requires --viz-outputs=events)
    svr.Get("/api/events", [this](const httplib::Request&, httplib::Response& res) {
        json j = json::array();
        {
            std::lock_guard<std::mutex> lock(state->mu);
            for (auto& [seq_id, data] : state->output_data) {
                json entry = json::object();
                entry["sequence_id"] = seq_id;
                entry["events"] = json::array();
                for (auto& ev : data.events) {
                    entry["events"].push_back({
                        {"time", ev.time},
                        {"statement", ev.statement},
                        {"pe_id", ev.pe_id}
                    });
                }
                j.push_back(entry);
            }
        }
        res.set_content(j.dump(), "application/json");
    });
 
    // JSON API: end states per sequence (requires --viz-outputs=es)
    svr.Get("/api/end-states", [this](const httplib::Request&, httplib::Response& res) {
        json j = json::array();
        {
            std::lock_guard<std::mutex> lock(state->mu);
            for (auto& [seq_id, data] : state->output_data) {
                j.push_back({
                    {"sequence_id", data.end_state.sequence_id},
                    {"type_of_consequence", data.end_state.type_of_consequence},
                    {"mother_branch_id", data.end_state.mother_branch_id},
                    {"consequence_description", data.end_state.consequence_description},
                    {"time", data.end_state.time},
                    {"probability", data.end_state.probability}
                });
            }
        }
        res.set_content(j.dump(), "application/json");
    });
}
 
// ---- Embedded HTML page (vanilla JS + SVG, zero external dependencies) ----
 
std::string VisualizationServer::Impl::buildIndexHtml() {
    return R"html(<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ADS-IDAC Dynamic Event Tree</title>
<style>
:root {
    --bg: #0c0e14; --sf: #13151e; --bd: #1e2130;
    --tx: #e4e4e8; --dim: #a0a0a8; --mut: #6a6a75; --acc: #3b82f6;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--tx); font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace; font-size: 13px; overflow: hidden; height: 100vh; }
#header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: var(--sf); border-bottom: 1px solid var(--bd); }
#header h1 { font-size: 15px; font-weight: 600; letter-spacing: 0.5px; }
#header h1 span { color: var(--acc); }
#stats { display: flex; gap: 24px; font-size: 12px; }
.stat-label { color: var(--mut); margin-right: 4px; }
.stat-value { color: var(--tx); font-weight: 600; }
.stat-value.active { color: #22c55e; }
#controls-btn { background: var(--bd); border: 1px solid #2a2d42; color: var(--dim); padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 11px; font-family: inherit; margin-left: 16px; }
#controls-btn:hover { background: #252840; color: var(--tx); }
#controls-panel { display: none; position: absolute; top: 42px; right: 230px; background: var(--sf); border: 1px solid var(--bd); border-radius: 6px; padding: 12px 16px; z-index: 20; min-width: 220px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
#controls-panel.open { display: block; }
#controls-panel h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--mut); margin-bottom: 8px; }
.ctrl-row { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.ctrl-btn { background: var(--bd); border: 1px solid #2a2d42; color: var(--dim); padding: 3px 10px; border-radius: 3px; cursor: pointer; font-size: 11px; font-family: inherit; }
.ctrl-btn:hover { background: #252840; color: var(--tx); }
.ctrl-btn.active { background: var(--acc); color: white; border-color: var(--acc); }
.collapse-indicator { fill: var(--dim); font-size: 9px; cursor: pointer; user-select: none; }
.collapse-indicator:hover { fill: var(--tx); }
.expand-icon { fill: #22c55e; font-size: 11px; cursor: pointer; user-select: none; }
.expand-icon:hover { fill: #4ade80; }
.seq-bar { cursor: pointer; }
.branch-dot { cursor: pointer; stroke: white; stroke-width: 2; transition: r 0.15s; }
.branch-dot:hover { r: 8; stroke-width: 2.5; filter: drop-shadow(0 0 3px white); }
.branch-hit { fill: none; stroke: transparent; stroke-width: 20; cursor: pointer; }
.branch-line:hover { opacity: 0.9 !important; stroke-width: 3; }
#tooltip { display: none; position: fixed; background: var(--sf); border: 1px solid var(--bd); border-radius: 4px; padding: 8px 10px; font-size: 11px; color: var(--tx); z-index: 30; pointer-events: none; line-height: 1.6; box-shadow: 0 4px 12px rgba(0,0,0,0.5); max-width: 280px; }
#tooltip b { color: var(--acc); }
#search-box { display: flex; gap: 4px; margin-bottom: 12px; }
#search-input { background: var(--bg); border: 1px solid var(--bd); color: var(--tx); padding: 4px 8px; border-radius: 3px; font-size: 11px; font-family: inherit; width: 100%; }
#search-input::placeholder { color: var(--mut); }
#search-input:focus { outline: none; border-color: var(--acc); }
#tree-svg { }
#select-box { display: none; position: absolute; border: 1.5px dashed var(--acc); background: rgba(59,130,246,0.08); pointer-events: none; z-index: 5; }
#select-toolbar { display: none; position: absolute; z-index: 15; background: var(--sf); border: 1px solid var(--bd); border-radius: 5px; padding: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.5); }
#select-toolbar button { background: var(--bd); border: 1px solid #2a2d42; color: var(--dim); padding: 4px 10px; border-radius: 3px; cursor: pointer; font-size: 11px; font-family: inherit; margin: 0 2px; }
#select-toolbar button:hover { background: #252840; color: var(--tx); }
.zoom-controls { position: absolute; bottom: 32px; right: 230px; display: flex; gap: 2px; z-index: 10; }
.zoom-btn { background: var(--sf); border: 1px solid var(--bd); color: var(--dim); width: 28px; height: 28px; border-radius: 3px; cursor: pointer; font-size: 14px; font-family: inherit; display: flex; align-items: center; justify-content: center; }
.zoom-btn:hover { background: #252840; color: var(--tx); }
#seq-filter { max-height: 180px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 3px; }
#seq-filter::-webkit-scrollbar { width: 4px; }
#seq-filter::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 2px; }
.seq-toggle { background: var(--bd); border: 1px solid #2a2d42; color: var(--dim); padding: 2px 4px; border-radius: 3px; cursor: pointer; font-size: 10px; font-family: inherit; text-align: center; }
.seq-toggle:hover { background: #252840; color: var(--tx); }
.seq-toggle.active { background: var(--acc); color: white; border-color: var(--acc); }
.ctrl-row-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ctrl-row-between h3 { margin: 0; }
#main { display: flex; height: calc(100vh - 42px); }
#tree-container { flex: 1; overflow: auto; position: relative; }
svg { display: block; }
#sidebar { width: 220px; background: var(--sf); border-left: 1px solid var(--bd); padding: 14px; overflow-y: auto; flex-shrink: 0; }
#sidebar h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--mut); margin-bottom: 10px; }
.worker-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--bd); font-size: 12px; }
.worker-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.worker-dot.busy { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.worker-label { color: var(--dim); }
.worker-seq { color: var(--tx); font-weight: 600; margin-left: auto; }
#status-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 24px; background: var(--sf); border-top: 1px solid var(--bd); display: flex; align-items: center; padding: 0 16px; font-size: 11px; color: var(--mut); gap: 16px; z-index: 10; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.status-dot.done { background: var(--mut); }
.branch-line { fill: none; stroke-width: 1.5; opacity: 0.5; pointer-events: none; }
.seq-bar { rx: 3; ry: 3; }
.seq-label { font-size: 10px; fill: white; font-weight: 600; pointer-events: none; }
.axis-line { stroke: var(--bd); stroke-width: 1; }
.axis-label { fill: var(--mut); font-size: 10px; font-family: inherit; }
.grid-line { stroke: var(--bd); stroke-width: 0.5; stroke-dasharray: 2,4; }
.time-marker { fill: var(--mut); font-size: 9px; font-family: inherit; }
</style>
</head>
<body>
<div id="header">
    <h1><span>ADS-IDAC</span> Dynamic Event Tree</h1>
    <div id="stats">
        <div><span class="stat-label">Sequences</span><span class="stat-value" id="st-seq">0</span></div>
        <div><span class="stat-label">Queue</span><span class="stat-value" id="st-queue">0</span><span id="st-queue-arrow" style="display:inline-block;width:1.2em;text-align:center"></span></div>
        <div><span class="stat-label">Workers</span><span class="stat-value" id="st-workers">0/0</span></div>
        <div><span class="stat-label">Memory</span><span class="stat-value" id="st-mem">0 MB</span></div>
        <div><span class="stat-label">Elapsed</span><span class="stat-value" id="st-time">0.0s</span></div>
        <button id="controls-btn" onclick="toggleControls()">Controls</button>
    </div>
</div>
<div id="controls-panel" onclick="event.stopPropagation()">
    <h3>Collapse</h3>
    <div class="ctrl-row">
        <button class="ctrl-btn" onclick="expandAll()">Expand All</button>
        <button class="ctrl-btn" onclick="collapseAll()">Collapse All</button>
        <button class="ctrl-btn" onclick="rootOnly()">Root Only</button>
        <button class="ctrl-btn" onclick="fitToScreen()">Fit to Screen</button>
    </div>
    <h3>Collapse to Depth</h3>
    <div class="ctrl-row" id="depth-btns"></div>
    <h3>Dead Branches</h3>
    <div class="ctrl-row">
        <button class="ctrl-btn" id="dead-all-btn" onclick="setDeadFilter('all')" style="opacity:1">All</button>
        <button class="ctrl-btn" id="dead-hide-btn" onclick="setDeadFilter('hide')">Hide Dead</button>
        <button class="ctrl-btn" id="dead-only-btn" onclick="setDeadFilter('only')">Only Dead</button>
    </div>
    <h3>Filter Workers</h3>
    <div class="ctrl-row" id="worker-filter"></div>
    <div class="ctrl-row-between">
        <h3>Filter Sequences</h3>
        <div style="display:flex;gap:4px">
            <button class="ctrl-btn" onclick="showAllSeqs()" style="padding:1px 6px;font-size:10px">All</button>
            <button class="ctrl-btn" onclick="hideAllSeqs()" style="padding:1px 6px;font-size:10px">None</button>
        </div>
    </div>
    <div id="seq-filter"></div>
</div>
<div id="main">
    <div id="tree-container">
        <svg id="tree-svg"></svg>
        <div id="select-box"></div>
        <div id="select-toolbar">
            <button onclick="selectionZoom()">Zoom</button>
            <button onclick="selectionCollapse()">Collapse</button>
            <button onclick="selectionHide()">Hide</button>
            <button onclick="clearSelection()">Cancel</button>
        </div>
        <div class="zoom-controls">
            <button class="zoom-btn" onclick="setZoom(zoomLevel * 1.2)">+</button>
            <button class="zoom-btn" onclick="setZoom(1.0)">1:1</button>
            <button class="zoom-btn" onclick="setZoom(zoomLevel / 1.2)">&minus;</button>
        </div>
    </div>
    <div id="sidebar">
        <div id="search-box">
            <input id="search-input" type="text" placeholder="Go to S..." onkeydown="if(event.key==='Enter')searchSequence()">
        </div>
        <h2>Workers</h2>
        <div id="worker-list"></div>
    </div>
</div>
<div id="status-bar">
    <div class="status-dot" id="status-dot"></div>
    <span id="status-text">Connecting...</span>
</div>
<div id="tooltip"></div>
 
<script>
const COLORS = [
    '#3b82f6','#ef4444','#22c55e','#f59e0b','#a855f7',
    '#ec4899','#06b6d4','#f97316','#84cc16','#6366f1',
    '#14b8a6','#e11d48','#0ea5e9','#d946ef'
];
const BASE_ROW_H = 32, BASE_BAR_H = 20;
const PAD_TOP = 40, PAD_LEFT = 60, PAD_RIGHT = 30, PAD_BOT = 30;
let cachedData = null;
let prevQueueDepth = null;
const collapsedSet = new Set();
const hiddenWorkers = new Set();
const hiddenSequences = new Set();
const foldedBranches = new Set();
let highlightedId = null;
let deadBranchFilter = 'all'; // 'all', 'hide', 'only'
const DEAD_THRESHOLD = 1.0; // seconds — branches shorter than this are "dead"
let zoomLevel = 1.0;
let maxDepth = 0;
 
function color(rank) { return COLORS[(rank - 1) % COLORS.length]; }
 
function buildTree(sequences) {
    const byParent = {};
    const byId = {};
    for (const s of sequences) {
        byId[s.id] = s;
        const pid = s.parent_id;
        if (!byParent[pid]) byParent[pid] = [];
        byParent[pid].push(s);
    }
    for (const k in byParent) byParent[k].sort((a, b) => a.branch_time - b.branch_time);
    return { byParent, byId };
}
 
function computeDepths(sequences) {
    const { byParent, byId } = buildTree(sequences);
    const depths = {};
    function walk(id, d) {
        depths[id] = d;
        if (byParent[id]) for (const c of byParent[id]) walk(c.id, d + 1);
    }
    const roots = sequences.filter(s => s.parent_id === -1 || !byId[s.parent_id]);
    for (const r of roots) walk(r.id, 0);
    return depths;
}
 
function hasChildren(id, byParent) {
    return byParent[id] && byParent[id].length > 0;
}
 
function countDescendants(id, byParent) {
    let count = 0;
    if (byParent[id]) {
        for (const c of byParent[id]) count += 1 + countDescendants(c.id, byParent);
    }
    return count;
}
 
function isDead(s) {
    return (s.end_time - s.branch_time) < DEAD_THRESHOLD;
}
 
function isFilteredNode(s) {
    if (hiddenWorkers.has(s.worker) || hiddenSequences.has(s.id)) return true;
    if (deadBranchFilter === 'hide' && isDead(s)) return true;
    if (deadBranchFilter === 'only' && !isDead(s)) return true;
    return false;
}
 
function dfsOrder(sequences) {
    const { byParent, byId } = buildTree(sequences);
    const order = [];
    function dfs(id) {
        // Folded branches: skip node AND all descendants
        if (foldedBranches.has(id)) return;
        const node = byId[id];
        if (node && !isFilteredNode(node)) order.push(node);
        if (collapsedSet.has(id)) return;
        if (byParent[id]) for (const c of byParent[id]) dfs(c.id);
    }
    const roots = sequences.filter(s => s.parent_id === -1 || !byId[s.parent_id]);
    roots.sort((a, b) => a.id - b.id);
    for (const r of roots) dfs(r.id);
    return order;
}
 
// --- Ancestry highlight ---
function getAncestryPath(id, byId) {
    const path = new Set();
    let cur = id;
    while (cur >= 0 && byId[cur]) {
        path.add(cur);
        cur = byId[cur].parent_id;
    }
    return path;
}
 
function highlightAncestry(id, e) {
    if (e) e.stopPropagation();
    highlightedId = (highlightedId === id) ? null : id;
    if (cachedData) render(cachedData);
}
 
// --- Fold branch (hide node + entire subtree from branch dot) ---
function toggleFold(id, e) {
    if (e) e.stopPropagation();
    if (foldedBranches.has(id)) foldedBranches.delete(id);
    else foldedBranches.add(id);
    if (cachedData) render(cachedData);
}
 
// --- Collapse/expand ---
function toggleCollapse(id, e) {
    if (e) e.stopPropagation();
    if (collapsedSet.has(id)) collapsedSet.delete(id);
    else collapsedSet.add(id);
    if (cachedData) render(cachedData);
}
 
function expandSubtree(id, e) {
    if (e) e.stopPropagation();
    if (!cachedData) return;
    const { byParent } = buildTree(cachedData.sequences || []);
    function recurse(nid) {
        collapsedSet.delete(nid);
        if (byParent[nid]) for (const c of byParent[nid]) recurse(c.id);
    }
    recurse(id);
    render(cachedData);
}
 
function expandAll() { collapsedSet.clear(); if (cachedData) render(cachedData); }
 
function collapseAll() {
    if (!cachedData) return;
    const { byParent } = buildTree(cachedData.sequences || []);
    for (const s of cachedData.sequences || []) {
        if (hasChildren(s.id, byParent)) collapsedSet.add(s.id);
    }
    render(cachedData);
}
 
function rootOnly() {
    if (!cachedData) return;
    collapsedSet.clear();
    for (const r of (cachedData.sequences || []).filter(s => s.parent_id === -1)) collapsedSet.add(r.id);
    render(cachedData);
}
 
function collapseToDepth(d) {
    if (!cachedData) return;
    const depths = computeDepths(cachedData.sequences || []);
    const { byParent } = buildTree(cachedData.sequences || []);
    collapsedSet.clear();
    for (const s of cachedData.sequences || []) {
        if (depths[s.id] >= d && hasChildren(s.id, byParent)) collapsedSet.add(s.id);
    }
    render(cachedData);
}
 
function fitToScreen() {
    if (!cachedData) return;
    const container = document.getElementById('tree-container');
    const maxRows = Math.floor((container.clientHeight - PAD_TOP - PAD_BOT - 24) / ROW_H);
    const seqs = cachedData.sequences || [];
    if (seqs.length === 0) return;
    const depths = computeDepths(seqs);
    const { byParent } = buildTree(seqs);
    for (let d = maxDepth; d >= 0; d--) {
        collapsedSet.clear();
        for (const s of seqs) {
            if (depths[s.id] >= d && hasChildren(s.id, byParent)) collapsedSet.add(s.id);
        }
        if (dfsOrder(seqs).length <= maxRows) break;
    }
    render(cachedData);
}
 
// --- Filters ---
function toggleWorker(rank) {
    if (hiddenWorkers.has(rank)) hiddenWorkers.delete(rank);
    else hiddenWorkers.add(rank);
    if (cachedData) render(cachedData);
}
 
function toggleSeq(id) {
    if (hiddenSequences.has(id)) hiddenSequences.delete(id);
    else hiddenSequences.add(id);
    if (cachedData) render(cachedData);
}
 
function showAllSeqs() { hiddenSequences.clear(); if (cachedData) render(cachedData); }
 
function hideAllSeqs() {
    if (!cachedData) return;
    for (const s of cachedData.sequences || []) hiddenSequences.add(s.id);
    render(cachedData);
}
 
function setDeadFilter(val) {
    deadBranchFilter = val;
    document.getElementById('dead-all-btn').style.opacity = val === 'all' ? '1' : '0.5';
    document.getElementById('dead-hide-btn').style.opacity = val === 'hide' ? '1' : '0.5';
    document.getElementById('dead-only-btn').style.opacity = val === 'only' ? '1' : '0.5';
    if (cachedData) render(cachedData);
}
 
function toggleControls() {
    document.getElementById('controls-panel').classList.toggle('open');
}
 
// --- Tooltip ---
function showTooltip(e, id) {
    const tt = document.getElementById('tooltip');
    if (!cachedData) return;
    const { byParent, byId } = buildTree(cachedData.sequences);
    const s = byId[id];
    if (!s) return;
    const depths = computeDepths(cachedData.sequences);
    const nch = byParent[id] ? byParent[id].length : 0;
    const dur = (s.end_time - s.branch_time).toFixed(1);
    tt.innerHTML = '<b>S' + s.id + '</b> \u2014 Rank ' + s.worker + '<br>' +
        'Time: ' + s.branch_time.toFixed(1) + 's \u2192 ' + s.end_time.toFixed(1) + 's (' + dur + 's)<br>' +
        'Parent: ' + (s.parent_id >= 0 ? 'S' + s.parent_id : 'root') + '<br>' +
        'Children: ' + nch + ' | Depth: ' + (depths[s.id] || 0);
    tt.style.display = 'block';
    positionTooltip(e);
}
 
function positionTooltip(e) {
    const tt = document.getElementById('tooltip');
    const x = Math.min(e.clientX + 12, window.innerWidth - 290);
    const y = Math.min(e.clientY - 10, window.innerHeight - 100);
    tt.style.left = x + 'px';
    tt.style.top = y + 'px';
}
 
function hideTooltip() {
    document.getElementById('tooltip').style.display = 'none';
}
 
// --- Zoom ---
function setZoom(level) {
    zoomLevel = Math.max(0.3, Math.min(4, level));
    if (cachedData) render(cachedData);
}
 
// --- Search ---
function searchSequence() {
    const input = document.getElementById('search-input');
    const val = parseInt(input.value);
    if (isNaN(val) || !cachedData) return;
    const { byId } = buildTree(cachedData.sequences || []);
    if (!byId[val]) return;
    // Expand ancestors so it's visible
    let cur = val;
    while (cur >= 0 && byId[cur]) {
        collapsedSet.delete(cur);
        cur = byId[cur].parent_id;
        if (cur >= 0) collapsedSet.delete(cur);
    }
    highlightedId = val;
    render(cachedData);
    setTimeout(() => {
        const bar = document.querySelector('[data-seq="' + val + '"]');
        if (bar) bar.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }, 50);
}
 
// --- Render ---
function render(data) {
    cachedData = data;
    const svg = document.getElementById('tree-svg');
    const container = document.getElementById('tree-container');
    const seqs = data.sequences || [];
    const stats = data.stats || {};
 
    // Stats
    document.getElementById('st-seq').textContent = stats.completed || 0;
    const qd = stats.queue_depth || 0;
    document.getElementById('st-queue').textContent = qd;
    const qArr = document.getElementById('st-queue-arrow');
    if (prevQueueDepth !== null && qd !== prevQueueDepth) {
        qArr.textContent = qd > prevQueueDepth ? '\u25B2' : '\u25BC';
        qArr.style.color = qd > prevQueueDepth ? '#e74c3c' : '#2ecc71';
    }
    prevQueueDepth = qd;
    const busy = (stats.total_clients || 0) - (stats.free_clients || 0);
    document.getElementById('st-workers').textContent = busy + '/' + (stats.total_clients || 0);
    document.getElementById('st-workers').className = 'stat-value' + (busy > 0 ? ' active' : '');
    document.getElementById('st-mem').textContent = (stats.memory_mb || 0) + ' MB';
    document.getElementById('st-time').textContent = (stats.elapsed_s || 0).toFixed(1) + 's';
 
    // Status bar
    const dot = document.getElementById('status-dot');
    const stxt = document.getElementById('status-text');
    if (stats.queue_depth > 0 || busy > 0) {
        dot.className = 'status-dot';
        stxt.textContent = 'Simulation running \u2014 ' + seqs.length + ' sequences completed';
    } else if (seqs.length > 0) {
        dot.className = 'status-dot done';
        stxt.textContent = 'Simulation complete \u2014 ' + seqs.length + ' sequences, ' + (stats.elapsed_s || 0).toFixed(1) + 's';
    } else {
        dot.className = 'status-dot';
        stxt.textContent = 'Waiting for sequences...';
    }
 
    if (seqs.length === 0) {
        svg.innerHTML = '<text x="50%" y="50%" text-anchor="middle" fill="#6a6a75" font-size="14" font-family="inherit">Waiting for first sequence to complete...</text>';
        svg.setAttribute('width', container.clientWidth);
        svg.setAttribute('height', container.clientHeight - 24);
        return;
    }
 
    const { byParent, byId } = buildTree(seqs);
    const depths = computeDepths(seqs);
    maxDepth = Math.max(...Object.values(depths));
    const ancestryPath = highlightedId !== null ? getAncestryPath(highlightedId, byId) : null;
 
    // Controls panel updates
    const depthDiv = document.getElementById('depth-btns');
    let dhtml = '';
    for (let d = 0; d <= Math.min(maxDepth, 8); d++) {
        dhtml += '<button class="ctrl-btn" onclick="collapseToDepth(' + d + ')">' + d + '</button>';
    }
    depthDiv.innerHTML = dhtml;
 
    const usedRanks = [...new Set(seqs.map(s => s.worker))].sort((a, b) => a - b);
    const wfDiv = document.getElementById('worker-filter');
    let wfhtml = '';
    for (const r of usedRanks) {
        const checked = !hiddenWorkers.has(r);
        wfhtml += '<button class="ctrl-btn' + (checked ? ' active' : '') + '" onclick="toggleWorker(' + r + ')" style="border-left: 3px solid ' + color(r) + '">R' + r + '</button>';
    }
    wfDiv.innerHTML = wfhtml;
 
    const sfDiv = document.getElementById('seq-filter');
    const allIds = seqs.map(s => s.id).sort((a, b) => a - b);
    let sfhtml = '';
    for (const id of allIds) {
        const shown = !hiddenSequences.has(id);
        const c = byId[id] ? color(byId[id].worker) : '#666';
        sfhtml += '<button class="seq-toggle' + (shown ? ' active' : '') + '" onclick="toggleSeq(' + id + ')" style="border-left: 2px solid ' + c + '">S' + id + '</button>';
    }
    sfDiv.innerHTML = sfhtml;
 
    // Layout
    const ordered = dfsOrder(seqs);
    const yMap = {};
    ordered.forEach((s, i) => { yMap[s.id] = i; });
 
    const ROW_H = BASE_ROW_H * zoomLevel;
    const BAR_H = BASE_BAR_H * zoomLevel;
    const maxTime = Math.max(...seqs.map(s => s.end_time), 1);
    const W = Math.max(container.clientWidth - 10, 600);
    const H = PAD_TOP + ordered.length * ROW_H + PAD_BOT;
    const xScale = (t) => PAD_LEFT + (t / maxTime) * (W - PAD_LEFT - PAD_RIGHT);
    const yScale = (i) => PAD_TOP + i * ROW_H + (ROW_H - BAR_H) / 2;
 
    svg.setAttribute('width', W);
    svg.setAttribute('height', H);
 
    let html = '';
 
    // Grid
    const nTicks = Math.min(Math.floor((W - PAD_LEFT - PAD_RIGHT) / 80), 12);
    const niceStep = niceNum(maxTime / nTicks);
    for (let t = 0; t <= maxTime + niceStep * 0.01; t += niceStep) {
        const x = xScale(t);
        if (x < PAD_LEFT - 1 || x > W - PAD_RIGHT + 1) continue;
        html += '<line class="grid-line" x1="' + x + '" y1="' + PAD_TOP + '" x2="' + x + '" y2="' + (H - PAD_BOT) + '"/>';
        html += '<text class="time-marker" x="' + x + '" y="' + (PAD_TOP - 8) + '" text-anchor="middle">' + t.toFixed(1) + 's</text>';
    }
    html += '<line class="axis-line" x1="' + PAD_LEFT + '" y1="' + (H - PAD_BOT) + '" x2="' + (W - PAD_RIGHT) + '" y2="' + (H - PAD_BOT) + '"/>';
    html += '<text class="axis-label" x="' + ((PAD_LEFT + W - PAD_RIGHT) / 2) + '" y="' + (H - 8) + '" text-anchor="middle">Simulation Time (s)</text>';
 
    // Branch curves (behind bars)
    const branchData = [];
    for (const s of ordered) {
        if (s.parent_id < 0) continue;
        let ancestorId = s.parent_id;
        while (ancestorId >= 0 && yMap[ancestorId] === undefined) {
            const a = byId[ancestorId];
            if (!a) break;
            ancestorId = a.parent_id;
        }
        if (ancestorId < 0 || yMap[ancestorId] === undefined) continue;
        const ancestor = byId[ancestorId];
        if (!ancestor) continue;
 
        const inPath = ancestryPath && (ancestryPath.has(s.id) && ancestryPath.has(ancestorId));
        const dimmed = ancestryPath && !inPath;
 
        const px = xScale(s.branch_time);
        const py = yScale(yMap[ancestorId]) + BAR_H / 2;
        const cx = xScale(s.branch_time);
        const cy = yScale(yMap[s.id]) + BAR_H / 2;
        const midY = (py + cy) / 2;
        const curve = 'M' + px + ',' + py + ' C' + px + ',' + midY + ' ' + cx + ',' + midY + ' ' + cx + ',' + cy;
 
        // Visible curve
        html += '<path class="branch-line" stroke="' + color(s.worker) + '" d="' + curve + '" opacity="' + (dimmed ? 0.08 : 0.5) + '"/>';
        // Save data for dots + hit areas (rendered after bars)
        branchData.push({ s, ancestor, px, py, cx, cy, curve, dimmed });
    }
 
    // Sequence bars
    for (const s of ordered) {
        const yi = yMap[s.id];
        const x1 = xScale(s.branch_time);
        const x2 = xScale(s.end_time);
        const y = yScale(yi);
        const w = Math.max(x2 - x1, 2);
        const c = color(s.worker);
        const isCollapsed = collapsedSet.has(s.id);
        const hasCh = hasChildren(s.id, byParent);
 
        const inPath = ancestryPath && ancestryPath.has(s.id);
        const dimmed = ancestryPath && !inPath;
        const barOpacity = dimmed ? 0.08 : 0.7;
 
        // Bar — click for ancestry highlight
        html += '<rect data-seq="' + s.id + '" class="seq-bar" x="' + x1 + '" y="' + y + '" width="' + w + '" height="' + BAR_H + '" fill="' + c + '" opacity="' + barOpacity + '" onclick="highlightAncestry(' + s.id + ', event)" onmouseover="showTooltip(event,' + s.id + ')" onmousemove="positionTooltip(event)" onmouseout="hideTooltip()"/>';
 
        // Left edge accent
        html += '<rect x="' + x1 + '" y="' + y + '" width="3" height="' + BAR_H + '" fill="' + c + '" opacity="' + (dimmed ? 0.08 : 1) + '" rx="3" ry="3" pointer-events="none"/>';
 
        // Ancestry highlight outline
        if (inPath) {
            html += '<rect x="' + x1 + '" y="' + y + '" width="' + w + '" height="' + BAR_H + '" fill="none" stroke="white" stroke-width="2" rx="3" ry="3" pointer-events="none"/>';
        }
 
        // Label
        if (w > 30 && !dimmed) {
            html += '<text class="seq-label" x="' + (x1 + 6) + '" y="' + (y + BAR_H / 2 + 4) + '">S' + s.id + '</text>';
        }
 
        // Collapse/expand icons (separate from bar click)
        if (hasCh && !dimmed) {
            if (isCollapsed) {
                const nHidden = countDescendants(s.id, byParent);
                html += '<text class="collapse-indicator" x="' + (x2 + 6) + '" y="' + (y + BAR_H / 2 + 4) + '" onclick="toggleCollapse(' + s.id + ', event)">\u25B6 (+' + nHidden + ')</text>';
                html += '<text class="expand-icon" x="' + (x2 + 60 + String(nHidden).length * 5) + '" y="' + (y + BAR_H / 2 + 4) + '" onclick="expandSubtree(' + s.id + ', event)">\u229E</text>';
            } else {
                html += '<text class="collapse-indicator" x="' + (x2 + 6) + '" y="' + (y + BAR_H / 2 + 4) + '" onclick="toggleCollapse(' + s.id + ', event)">\u25BC</text>';
            }
        }
 
        // Row label
        html += '<text class="axis-label" x="' + (PAD_LEFT - 8) + '" y="' + (y + BAR_H / 2 + 4) + '" text-anchor="end" opacity="' + (dimmed ? 0.12 : 1) + '">S' + s.id + '</text>';
    }
 
    // Branch dots + hit areas (ON TOP of bars so they're clickable)
    for (const b of branchData) {
        html += '<path class="branch-hit" d="' + b.curve + '" onclick="toggleFold(' + b.s.id + ', event)"/>';
        html += '<circle class="branch-dot" cx="' + b.px + '" cy="' + b.py + '" r="5" fill="' + color(b.ancestor.worker) + '" opacity="' + (b.dimmed ? 0.1 : 0.9) + '" onclick="toggleFold(' + b.s.id + ', event)"/>';
    }
 
    // Folded branch indicators (dots for children that are folded — not in ordered)
    for (const s of seqs) {
        if (!foldedBranches.has(s.id)) continue;
        if (s.parent_id < 0) continue;
        // Find visible ancestor
        let ancestorId = s.parent_id;
        while (ancestorId >= 0 && yMap[ancestorId] === undefined) {
            const a = byId[ancestorId];
            if (!a) break;
            ancestorId = a.parent_id;
        }
        if (ancestorId < 0 || yMap[ancestorId] === undefined) continue;
        const ancestor = byId[ancestorId];
        if (!ancestor) continue;
        const px = xScale(s.branch_time);
        const py = yScale(yMap[ancestorId]) + BAR_H / 2;
        const nHidden = 1 + countDescendants(s.id, byParent);
        // Outer circle with inner dot = folded indicator
        html += '<circle class="branch-dot" cx="' + px + '" cy="' + py + '" r="6" fill="' + color(ancestor.worker) + '" opacity="0.9" onclick="toggleFold(' + s.id + ', event)"/>';
        html += '<circle cx="' + px + '" cy="' + py + '" r="2" fill="white" pointer-events="none"/>';
        html += '<text class="collapse-indicator" x="' + (px + 10) + '" y="' + (py + 4) + '" onclick="toggleFold(' + s.id + ', event)" style="cursor:pointer">(+' + nHidden + ')</text>';
    }
 
    svg.innerHTML = html;
    updateWorkers(data);
}
 
function updateWorkers(data) {
    const stats = data.stats || {};
    const seqs = data.sequences || [];
    const total = stats.total_clients || 0;
    const free = stats.free_clients || 0;
 
    const list = document.getElementById('worker-list');
    let html = '';
    for (let r = 1; r <= total; r++) {
        const c = color(r);
        const isBusy = r <= (total - free);
        html += '<div class="worker-row">';
        html += '<div class="worker-dot' + (isBusy ? ' busy' : '') + '" style="background:' + c + '"></div>';
        html += '<span class="worker-label">Rank ' + r + '</span>';
        html += '<span class="worker-seq">' + (isBusy ? 'busy' : 'idle') + '</span>';
        html += '</div>';
    }
    list.innerHTML = html;
 
}
 
function niceNum(x) {
    if (x <= 0) return 1;
    const exp = Math.floor(Math.log10(x));
    const frac = x / Math.pow(10, exp);
    let nice;
    if (frac <= 1.5) nice = 1;
    else if (frac <= 3.5) nice = 2;
    else if (frac <= 7.5) nice = 5;
    else nice = 10;
    return nice * Math.pow(10, exp);
}
 
// --- Box selection (Shift+drag) ---
let selecting = false;
let selStart = { x: 0, y: 0 };
let selectedIds = [];
 
const treeContainer = document.getElementById('tree-container');
 
treeContainer.addEventListener('mousedown', (e) => {
    if (!e.shiftKey || e.button !== 0) return;
    e.preventDefault();
    selecting = true;
    const rect = treeContainer.getBoundingClientRect();
    selStart = { x: e.clientX - rect.left + treeContainer.scrollLeft, y: e.clientY - rect.top + treeContainer.scrollTop };
    const box = document.getElementById('select-box');
    box.style.left = selStart.x + 'px';
    box.style.top = selStart.y + 'px';
    box.style.width = '0';
    box.style.height = '0';
    box.style.display = 'block';
    document.getElementById('select-toolbar').style.display = 'none';
});
 
document.addEventListener('mousemove', (e) => {
    if (!selecting) return;
    const rect = treeContainer.getBoundingClientRect();
    const curX = e.clientX - rect.left + treeContainer.scrollLeft;
    const curY = e.clientY - rect.top + treeContainer.scrollTop;
    const box = document.getElementById('select-box');
    const x = Math.min(selStart.x, curX);
    const y = Math.min(selStart.y, curY);
    const w = Math.abs(curX - selStart.x);
    const h = Math.abs(curY - selStart.y);
    box.style.left = x + 'px';
    box.style.top = y + 'px';
    box.style.width = w + 'px';
    box.style.height = h + 'px';
});
 
document.addEventListener('mouseup', (e) => {
    if (!selecting) return;
    selecting = false;
    const box = document.getElementById('select-box');
    const bx = parseFloat(box.style.left);
    const by = parseFloat(box.style.top);
    const bw = parseFloat(box.style.width);
    const bh = parseFloat(box.style.height);
    if (bw < 5 || bh < 5) { box.style.display = 'none'; return; }
 
    // Find sequences whose bars intersect the selection box
    if (!cachedData) return;
    const { byParent, byId } = buildTree(cachedData.sequences || []);
    const ordered = dfsOrder(cachedData.sequences || []);
    const ROW_H = BASE_ROW_H * zoomLevel;
    const BAR_H = BASE_BAR_H * zoomLevel;
    const maxTime = Math.max(...(cachedData.sequences || []).map(s => s.end_time), 1);
    const W = Math.max(treeContainer.clientWidth - 10, 600);
    const xScale = (t) => PAD_LEFT + (t / maxTime) * (W - PAD_LEFT - PAD_RIGHT);
    const yMap = {};
    ordered.forEach((s, i) => { yMap[s.id] = i; });
 
    selectedIds = [];
    const selSet = new Set();
    // Check bars
    for (const s of ordered) {
        const yi = yMap[s.id];
        const x1 = xScale(s.branch_time);
        const x2 = xScale(s.end_time);
        const y = PAD_TOP + yi * ROW_H + (ROW_H - BAR_H) / 2;
        if (x2 >= bx && x1 <= bx + bw && y + BAR_H >= by && y <= by + bh) {
            selSet.add(s.id);
        }
    }
    // Check branch curves (vertical lines from parent to child)
    for (const s of ordered) {
        if (s.parent_id < 0 || selSet.has(s.id)) continue;
        let ancestorId = s.parent_id;
        while (ancestorId >= 0 && yMap[ancestorId] === undefined) {
            const a = byId[ancestorId];
            if (!a) break;
            ancestorId = a.parent_id;
        }
        if (ancestorId < 0 || yMap[ancestorId] === undefined) continue;
        const cx = xScale(s.branch_time);
        const py = PAD_TOP + yMap[ancestorId] * ROW_H + ROW_H / 2;
        const cy = PAD_TOP + yMap[s.id] * ROW_H + ROW_H / 2;
        const minY = Math.min(py, cy);
        const maxY = Math.max(py, cy);
        // Curve is vertical at x=cx; check if it passes through selection box
        if (cx >= bx && cx <= bx + bw && maxY >= by && minY <= by + bh) {
            selSet.add(s.id);
        }
    }
    selectedIds = [...selSet];
 
    if (selectedIds.length === 0) { box.style.display = 'none'; return; }
 
    // Show toolbar near selection
    const tb = document.getElementById('select-toolbar');
    const containerRect = treeContainer.getBoundingClientRect();
    tb.style.left = Math.min(bx + bw + 4, treeContainer.clientWidth - 200) + 'px';
    tb.style.top = Math.max(by - 4, 0) + 'px';
    tb.style.display = 'flex';
});
 
function selectionZoom() {
    if (selectedIds.length === 0) return;
    // Collapse everything that's not an ancestor or descendant of selected
    if (!cachedData) return;
    const { byParent, byId } = buildTree(cachedData.sequences || []);
    // Keep selected + all their ancestors expanded
    const keep = new Set();
    for (const id of selectedIds) {
        let cur = id;
        while (cur >= 0 && byId[cur]) { keep.add(cur); cur = byId[cur].parent_id; }
    }
    // Collapse everything with children that isn't in keep
    collapsedSet.clear();
    for (const s of cachedData.sequences || []) {
        if (hasChildren(s.id, byParent) && !keep.has(s.id)) {
            collapsedSet.add(s.id);
        }
    }
    clearSelection();
    render(cachedData);
}
 
function selectionCollapse() {
    if (selectedIds.length === 0) return;
    if (!cachedData) return;
    const { byParent } = buildTree(cachedData.sequences || []);
    for (const id of selectedIds) {
        if (hasChildren(id, byParent)) collapsedSet.add(id);
    }
    clearSelection();
    render(cachedData);
}
 
function selectionHide() {
    if (selectedIds.length === 0) return;
    for (const id of selectedIds) hiddenSequences.add(id);
    clearSelection();
    if (cachedData) render(cachedData);
}
 
function clearSelection() {
    document.getElementById('select-box').style.display = 'none';
    document.getElementById('select-toolbar').style.display = 'none';
    selectedIds = [];
}
 
// --- Event handlers ---
 
// Close controls on outside click
document.addEventListener('click', (e) => {
    const panel = document.getElementById('controls-panel');
    const btn = document.getElementById('controls-btn');
    if (panel.classList.contains('open') && !panel.contains(e.target) && e.target !== btn) {
        panel.classList.remove('open');
    }
});
 
// Click empty SVG space to clear ancestry highlight
document.getElementById('tree-svg').addEventListener('click', (e) => {
    if (e.target.tagName === 'svg') {
        highlightedId = null;
        if (cachedData) render(cachedData);
    }
});
 
// Zoom with Ctrl/Cmd + wheel
document.getElementById('tree-container').addEventListener('wheel', (e) => {
    if (e.ctrlKey || e.metaKey) {
        e.preventDefault();
        setZoom(zoomLevel * (e.deltaY > 0 ? 0.9 : 1.1));
    }
}, { passive: false });
 
// Polling
let polling = true;
async function poll() {
    while (polling) {
        try {
            const resp = await fetch('/api/tree');
            if (resp.ok) render(await resp.json());
        } catch (e) {
            document.getElementById('status-text').textContent = 'Connection lost \u2014 retrying...';
        }
        await new Promise(r => setTimeout(r, 500));
    }
}
poll();
 
window.addEventListener('resize', () => { if (cachedData) render(cachedData); });
</script>
</body>
</html>
)html";
}
 
// ---- Embedded PE Graph page (vanilla JS + SVG, zero external dependencies) ----
 
std::string VisualizationServer::Impl::buildPEHtml() {
    return R"html(<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ADS-IDAC Pivotal Event Graph</title>
<style>
:root {
    --bg: #0c0e14; --sf: #13151e; --bd: #1e2130;
    --tx: #e4e4e8; --dim: #a0a0a8; --mut: #6a6a75; --acc: #3b82f6;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--tx); font-family: 'SF Mono','Fira Code','Consolas',monospace; font-size: 13px; overflow: hidden; height: 100vh; }
#header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background: var(--sf); border-bottom: 1px solid var(--bd); }
#header h1 { font-size: 15px; font-weight: 600; letter-spacing: 0.5px; }
#header h1 span { color: var(--acc); }
#stats { display: flex; gap: 24px; font-size: 12px; }
.stat-label { color: var(--mut); margin-right: 4px; }
.stat-value { color: var(--tx); font-weight: 600; }
#controls { display: flex; gap: 8px; align-items: center; }
#controls button { background: var(--bd); border: 1px solid #2a2d42; color: var(--dim); padding: 4px 12px; border-radius: 4px; cursor: pointer; font-size: 11px; font-family: inherit; }
#controls button:hover { background: #252840; color: var(--tx); }
#controls button.active { background: var(--acc); color: white; border-color: var(--acc); }
#search-box { background: var(--bd); border: 1px solid #2a2d42; color: var(--tx); padding: 4px 8px; border-radius: 4px; font-size: 11px; font-family: inherit; width: 140px; }
#search-box::placeholder { color: var(--mut); }
#canvas-wrap { position: relative; width: 100%; height: calc(100vh - 42px); overflow: hidden; cursor: grab; }
#canvas-wrap.dragging { cursor: grabbing; }
svg { position: absolute; top: 0; left: 0; }
#detail-panel { position: fixed; top: 42px; right: 0; width: 320px; height: calc(100vh - 42px); background: var(--sf); border-left: 1px solid var(--bd); overflow-y: auto; padding: 16px; display: none; z-index: 10; }
#detail-panel.open { display: block; }
#detail-panel h2 { font-size: 14px; margin-bottom: 12px; }
#detail-close { position: absolute; top: 8px; right: 12px; background: none; border: none; color: var(--dim); cursor: pointer; font-size: 16px; }
.detail-section { margin-bottom: 12px; }
.detail-section h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--mut); margin-bottom: 6px; }
.detail-item { font-size: 11px; color: var(--dim); padding: 3px 0; border-bottom: 1px solid #1a1c28; }
.badge { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 600; margin-right: 4px; }
.badge-hw { background: #92400e; color: #fbbf24; }
.badge-cog { background: #4c1d95; color: #a78bfa; }
.badge-other { background: #1e2130; color: var(--dim); }
#time-axis { position: absolute; bottom: 0; left: 0; right: 0; height: 24px; background: rgba(19,21,30,0.9); border-top: 1px solid var(--bd); pointer-events: none; z-index: 5; }
#nav-link { position: absolute; bottom: 30px; left: 12px; font-size: 11px; z-index: 5; }
#nav-link a { color: var(--acc); text-decoration: none; }
#nav-link a:hover { text-decoration: underline; }
#sel-rect { position: absolute; border: 1.5px dashed #3b82f6; background: rgba(59,130,246,0.08); pointer-events: none; display: none; z-index: 6; }
#zoom-label { position: absolute; bottom: 30px; right: 12px; font-size: 10px; color: var(--mut); z-index: 5; }
</style>
</head>
<body>
<div id="header">
    <h1><span>PE</span> Pivotal Event Graph</h1>
    <div id="stats">
        <div><span class="stat-label">nodes</span><span class="stat-value" id="st-nodes">0</span></div>
        <div><span class="stat-label">edges</span><span class="stat-value" id="st-edges">0</span></div>
        <div><span class="stat-label">sequences</span><span class="stat-value" id="st-seqs">0</span></div>
    </div>
    <div id="controls">
        <input id="search-box" type="text" placeholder="Search PE_...">
        <button id="btn-zin" title="Zoom in">+</button>
        <button id="btn-zout" title="Zoom out">&minus;</button>
        <button id="btn-fit" title="Fit to screen">Fit</button>
        <button id="btn-reset" title="Reset selection">Reset</button>
        <span style="color:var(--mut);font-size:10px;margin-left:4px">shift+drag to zoom region</span>
    </div>
</div>
<div id="canvas-wrap">
    <svg id="graph"></svg>
    <div id="sel-rect"></div>
    <div id="time-axis"></div>
    <div id="nav-link"><a href="/">&#8592; DET Tree</a></div>
    <div id="zoom-label"></div>
</div>
<div id="detail-panel">
    <button id="detail-close">&times;</button>
    <h2 id="detail-title"></h2>
    <div id="detail-body"></div>
</div>
 
<script>
'use strict';
 
// ---- State ----
let nodes = [];       // {id, label, x, y, time, isTerminal, outDegree, traversals, details}
let edges = [];       // {source, target, count}
let selectedId = null;
let ancestorIds = new Set();
let descendantIds = new Set();
let highlightedEdges = new Set();
let searchMatch = new Set();
let sequences = {};   // seq_id -> [PE_N, PE_N, ...]
 
// View transform
let vx = 0, vy = 0, scale = 1;
const CANVAS_W = 16000, NODE_Y_SPACING = 46;
 
// ---- Data processing (mirrors pe-plotter parser.ts + layout.ts) ----
 
function processEvents(apiData) {
    // apiData: [{sequence_id, events: [{time, statement, pe_id}]}]
    const eventSequences = {};  // seq_id -> [PE_N, PE_N, ...]
    const eventTimes = {};      // PE_N -> first occurrence time
    const eventDetails = {};    // PE_N -> [description, ...]
 
    for (const seq of apiData) {
        const peList = [];
        for (const ev of seq.events) {
            const pe = 'PE_' + ev.pe_id;
            const desc = ev.statement || '';
 
            // Record details
            if (!eventDetails[pe]) eventDetails[pe] = [];
            if (desc) eventDetails[pe].push(desc);
 
            // Deduplicate consecutive same-PE
            if (peList.length === 0 || peList[peList.length - 1] !== pe) {
                peList.push(pe);
                if (!(pe in eventTimes)) eventTimes[pe] = ev.time;
            }
        }
        if (peList.length > 0) eventSequences[seq.sequence_id] = peList;
    }
 
    // Build edges (consecutive PE pairs), tally
    const counter = new Map();
    for (const peList of Object.values(eventSequences)) {
        for (let i = 0; i < peList.length - 1; i++) {
            const key = peList[i] + '|||' + peList[i + 1];
            counter.set(key, (counter.get(key) || 0) + 1);
        }
    }
 
    const edgeList = [];
    const sourceSet = new Set(), targetSet = new Set();
    for (const [key, count] of counter) {
        const [source, target] = key.split('|||');
        edgeList.push({ source, target, count });
        sourceSet.add(source);
        targetSet.add(target);
    }
 
    // Terminal nodes: appear as target but never as source
    const terminalNodes = new Set();
    for (const t of targetSet) {
        if (!sourceSet.has(t)) terminalNodes.add(t);
    }
 
    // Count traversals per node
    const traversals = {};
    for (const peList of Object.values(eventSequences)) {
        const seen = new Set();
        for (const pe of peList) {
            if (!seen.has(pe)) { traversals[pe] = (traversals[pe] || 0) + 1; seen.add(pe); }
        }
    }
 
    // Compute out-degree
    const outDeg = {};
    for (const e of edgeList) outDeg[e.source] = (outDeg[e.source] || 0) + 1;
 
    // Layout: x = time-proportional, y = stacking within same time bucket
    const allPEs = new Set([...Object.keys(eventTimes), ...sourceSet, ...targetSet]);
    const peList = Array.from(allPEs);
    if (peList.length === 0) return { nodes: [], edges: [], seqCount: 0 };
 
    const times = peList.map(pe => eventTimes[pe] || 0);
    const minTime = Math.min(...times), maxTime = Math.max(...times);
    const timeRange = maxTime - minTime || 1;
    const NUM_BUCKETS = 200;
 
    const buckets = new Map();
    for (const pe of peList) {
        const t = eventTimes[pe] || 0;
        const b = Math.min(Math.floor(((t - minTime) / timeRange) * NUM_BUCKETS), NUM_BUCKETS - 1);
        if (!buckets.has(b)) buckets.set(b, []);
        buckets.get(b).push(pe);
    }
 
    // Sort each bucket by PE index
    const peIdx = pe => parseInt(pe.replace('PE_', ''), 10);
    for (const arr of buckets.values()) arr.sort((a, b) => peIdx(a) - peIdx(b));
 
    const maxTrav = Math.max(...Object.values(traversals), 1);
    const nodeList = [];
    for (const [bucket, pes] of buckets) {
        const count = pes.length;
        const yStart = -((count - 1) * NODE_Y_SPACING) / 2;
        const x = 80 + (bucket / NUM_BUCKETS) * (CANVAS_W - 160);
        pes.forEach((pe, i) => {
            nodeList.push({
                id: pe,
                label: pe.replace('PE_', ''),
                x, y: yStart + i * NODE_Y_SPACING,
                time: eventTimes[pe] || 0,
                isTerminal: terminalNodes.has(pe),
                outDegree: outDeg[pe] || 0,
                traversals: traversals[pe] || 1,
                maxTraversals: maxTrav,
                details: eventDetails[pe] || []
            });
        });
    }
 
    return { nodes: nodeList, edges: edgeList, seqCount: Object.keys(eventSequences).length, sequences: eventSequences };
}
 
// ---- Graph helpers ----
 
function buildAdjacency() {
    const children = {}, parents = {};
    for (const e of edges) {
        if (!children[e.source]) children[e.source] = [];
        children[e.source].push(e.target);
        if (!parents[e.target]) parents[e.target] = [];
        parents[e.target].push(e.source);
    }
    return { children, parents };
}
 
function walkGraph(startId, adjMap) {
    const visited = new Set();
    const queue = [startId];
    while (queue.length) {
        const id = queue.shift();
        if (visited.has(id)) continue;
        visited.add(id);
        for (const next of (adjMap[id] || [])) queue.push(next);
    }
    visited.delete(startId);
    return visited;
}
 
function selectNode(id) {
    if (selectedId === id) { clearSelection(); return; }
    selectedId = id;
    // Find all sequences that contain this PE, highlight their full paths
    ancestorIds = new Set();
    descendantIds = new Set();
    highlightedEdges = new Set();
    for (const peList of Object.values(sequences)) {
        if (!peList.includes(id)) continue;
        // All PEs in this sequence are highlighted
        const idx = peList.indexOf(id);
        for (let i = 0; i < peList.length; i++) {
            if (peList[i] === id) continue;
            if (i < idx) ancestorIds.add(peList[i]);
            else descendantIds.add(peList[i]);
        }
        // All edges in this sequence are highlighted
        for (let i = 0; i < peList.length - 1; i++) {
            highlightedEdges.add(peList[i] + '|||' + peList[i + 1]);
        }
    }
    renderGraph();
    showDetail(id);
}
 
function clearSelection() {
    selectedId = null;
    ancestorIds.clear();
    descendantIds.clear();
    highlightedEdges.clear();
    renderGraph();
    document.getElementById('detail-panel').classList.remove('open');
}
 
function showDetail(id) {
    const node = nodes.find(n => n.id === id);
    if (!node) return;
    const panel = document.getElementById('detail-panel');
    document.getElementById('detail-title').textContent = node.id;
    const body = document.getElementById('detail-body');
 
    // Classify events
    const hw = [], cog = [], other = [];
    for (const d of node.details) {
        if (d.startsWith('New Alarm:') || d.includes('alarm') || d.includes('Alarm'))
            hw.push(d);
        else if (d.startsWith('Mental Belief:') || d.startsWith('Procedure:') || d.startsWith('Info_gather_mode:') || d.includes('crew') || d.includes('Crew') || d.includes('ODM') || d.includes('OAT'))
            cog.push(d);
        else
            other.push(d);
    }
 
    let html = `<div class="detail-section"><h3>Info</h3>
        <div class="detail-item">Time: ${node.time.toFixed(2)} s</div>
        <div class="detail-item">Type: ${node.isTerminal ? 'Terminal' : node.outDegree > 1 ? 'Branch' : 'Transit'}</div>
        <div class="detail-item">Traversals: ${node.traversals}</div>
        <div class="detail-item">In ${Object.values(sequences).filter(s => s.includes(id)).length} sequences</div>
    </div>`;
 
    const renderSection = (title, items, badgeClass) => {
        if (items.length === 0) return '';
        let s = `<div class="detail-section"><h3>${title} (${items.length})</h3>`;
        for (const d of items) s += `<div class="detail-item"><span class="badge ${badgeClass}">${title}</span>${escHtml(d)}</div>`;
        s += '</div>';
        return s;
    };
    html += renderSection('HW', hw, 'badge-hw');
    html += renderSection('COG', cog, 'badge-cog');
    html += renderSection('Other', other, 'badge-other');
 
    body.innerHTML = html;
    panel.classList.add('open');
}
 
function escHtml(s) { return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
 
// ---- Rendering ----
 
function renderGraph() {
    const svg = document.getElementById('graph');
    const wrap = document.getElementById('canvas-wrap');
    const W = wrap.clientWidth, H = wrap.clientHeight;
    svg.setAttribute('width', W);
    svg.setAttribute('height', H);
 
    const maxCount = Math.max(...edges.map(e => e.count), 1);
    const nodeMap = {};
    for (const n of nodes) nodeMap[n.id] = n;
 
    // Build SVG content
    let svgContent = `<defs>
        <filter id="glow-amber" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="4" result="blur"/><feFlood flood-color="#f59e0b" flood-opacity="0.4"/><feComposite in2="blur" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>
        <filter id="glow-cyan" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="4" result="blur"/><feFlood flood-color="#22d3ee" flood-opacity="0.4"/><feComposite in2="blur" operator="in"/><feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge></filter>
    </defs><g transform="translate(${vx},${vy}) scale(${scale})">`;
 
    // Edges
    for (const e of edges) {
        const src = nodeMap[e.source], tgt = nodeMap[e.target];
        if (!src || !tgt) continue;
 
        const key = e.source + '|||' + e.target;
        const w = 1 + (e.count / maxCount) * 7;
        let stroke, opacity;
 
        if (selectedId) {
            if (highlightedEdges.has(key)) {
                const isAnc = ancestorIds.has(e.source) || e.source === selectedId;
                stroke = isAnc && (ancestorIds.has(e.target) || e.target === selectedId) ? '#f59e0b' : '#34d399';
                opacity = 0.8;
            } else {
                stroke = '#ffffff';
                opacity = 0.03;
            }
        } else if (searchMatch.size > 0) {
            opacity = (searchMatch.has(e.source) || searchMatch.has(e.target)) ? 0.5 : 0.03;
            stroke = '#6366f1';
        } else {
            stroke = '#4f46e5';
            opacity = 0.15;
        }
 
        // Bezier curve
        const dx = tgt.x - src.x;
        const cx1 = src.x + dx * 0.4, cy1 = src.y;
        const cx2 = tgt.x - dx * 0.4, cy2 = tgt.y;
        svgContent += `<path d="M${src.x},${src.y} C${cx1},${cy1} ${cx2},${cy2} ${tgt.x},${tgt.y}" fill="none" stroke="${stroke}" stroke-width="${w}" opacity="${opacity}" stroke-linecap="round"/>`;
    }
 
    // Nodes — compact pills scaled by traversal count
    for (const n of nodes) {
        const t = Math.sqrt(n.traversals / n.maxTraversals);
        let bg, fg, strokeC, nodeOpacity, shadow = '';
        const isSelected = selectedId === n.id;
        const isAnc = ancestorIds.has(n.id);
        const isDesc = descendantIds.has(n.id);
        const isDimmed = (selectedId && !isSelected && !isAnc && !isDesc) ||
                         (searchMatch.size > 0 && !searchMatch.has(n.id) && !selectedId);
 
        if (isDimmed) {
            bg = '#1e1e2e'; fg = '#45475a'; strokeC = '#252740'; nodeOpacity = 0.2;
        } else if (searchMatch.size > 0 && searchMatch.has(n.id) && !isSelected && !isAnc && !isDesc) {
            bg = '#0891b2'; fg = '#fff'; strokeC = '#22d3ee'; nodeOpacity = 1; shadow = 'filter="url(#glow-cyan)"';
        } else if (isSelected) {
            bg = '#f8fafc'; fg = '#1e1e2e'; strokeC = '#f59e0b'; nodeOpacity = 1; shadow = 'filter="url(#glow-amber)"';
        } else if (isAnc) {
            bg = '#f59e0b'; fg = '#1c1917'; strokeC = '#d97706'; nodeOpacity = 1;
        } else if (isDesc) {
            bg = '#34d399'; fg = '#064e3b'; strokeC = '#059669'; nodeOpacity = 1;
        } else if (n.outDegree > 1) {
            bg = '#7c3aed'; fg = '#e8e0ff'; strokeC = '#6d28d9'; nodeOpacity = 1;
        } else if (n.isTerminal) {
            bg = '#f43f5e'; fg = '#fff'; strokeC = '#e11d48'; nodeOpacity = 1;
        } else {
            bg = '#0ea5e9'; fg = '#f0f9ff'; strokeC = '#0284c7'; nodeOpacity = 1;
        }
 
        // Compact pill: size scales with traversal count
        const r = isSelected ? 18 : 12 + Math.round(t * 8);
        const fSize = isSelected ? 12 : 9 + Math.round(t * 2);
 
        svgContent += `<g class="pe-node" data-id="${n.id}" opacity="${nodeOpacity}" style="cursor:pointer">`;
        svgContent += `<circle cx="${n.x}" cy="${n.y}" r="${r}" fill="${bg}" stroke="${strokeC}" stroke-width="${isSelected ? 2.5 : 1}" ${shadow}/>`;
        svgContent += `<text x="${n.x}" y="${n.y + 1}" text-anchor="middle" dominant-baseline="central" fill="${fg}" font-size="${fSize}" font-weight="600" font-family="'SF Mono','Fira Code','Consolas',monospace">${n.label}</text>`;
        if (n.traversals > 1 && !isDimmed) {
            svgContent += `<text x="${n.x}" y="${n.y + r + 10}" text-anchor="middle" fill="${isDimmed ? fg : '#8888aa'}" font-size="8" font-family="inherit">${n.traversals}x</text>`;
        }
        if (isSelected || isAnc || isDesc) {
            svgContent += `<text x="${n.x}" y="${n.y - r - 4}" text-anchor="middle" fill="#a0a0b0" font-size="8" font-family="inherit">${n.time.toFixed(1)}s</text>`;
        }
        svgContent += '</g>';
    }
 
    svgContent += '</g>';
 
    // Time axis
    renderTimeAxis();
 
    svg.innerHTML = svgContent;
 
    // Attach click handlers
    for (const g of svg.querySelectorAll('.pe-node')) {
        g.addEventListener('click', (e) => {
            e.stopPropagation();
            selectNode(g.dataset.id);
        });
    }
}
 
function renderTimeAxis() {
    const wrap = document.getElementById('canvas-wrap');
    const W = wrap.clientWidth;
    const axDiv = document.getElementById('time-axis');
    if (nodes.length === 0) { axDiv.innerHTML = ''; return; }
 
    const times = nodes.map(n => n.time);
    const minT = Math.min(...times), maxT = Math.max(...times);
 
    let html = '<svg width="' + W + '" height="24">';
    const numTicks = Math.min(12, Math.floor(W / 100));
    for (let i = 0; i <= numTicks; i++) {
        const t = minT + (maxT - minT) * (i / numTicks);
        const nodeX = 80 + ((t - minT) / (maxT - minT || 1)) * (CANVAS_W - 160);
        const screenX = nodeX * scale + vx;
        if (screenX < 0 || screenX > W) continue;
        html += `<text x="${screenX}" y="16" text-anchor="middle" fill="#6a6a75" font-size="10" font-family="inherit">${t.toFixed(1)}s</text>`;
    }
    html += '</svg>';
    axDiv.innerHTML = html;
}
 
// ---- Pan, zoom & shift+drag selection ----
 
const wrap = document.getElementById('canvas-wrap');
const selRect = document.getElementById('sel-rect');
const zoomLabel = document.getElementById('zoom-label');
let dragging = false, dragX = 0, dragY = 0;
let selecting = false, selX0 = 0, selY0 = 0;
 
function updateZoomLabel() { zoomLabel.textContent = Math.round(scale * 100) + '%'; }
 
function zoomAt(cx, cy, factor) {
    const oldScale = scale;
    scale = Math.max(0.01, Math.min(20, scale * factor));
    vx = cx - (cx - vx) * (scale / oldScale);
    vy = cy - (cy - vy) * (scale / oldScale);
    updateZoomLabel();
    renderGraph();
}
 
wrap.addEventListener('mousedown', (e) => {
    if (e.target.closest('.pe-node')) return;
    if (e.shiftKey) {
        // Shift+drag: box selection for zoom
        selecting = true;
        const rect = wrap.getBoundingClientRect();
        selX0 = e.clientX - rect.left;
        selY0 = e.clientY - rect.top;
        selRect.style.left = selX0 + 'px';
        selRect.style.top = selY0 + 'px';
        selRect.style.width = '0'; selRect.style.height = '0';
        selRect.style.display = 'block';
        wrap.style.cursor = 'crosshair';
    } else {
        dragging = true;
        dragX = e.clientX; dragY = e.clientY;
        wrap.classList.add('dragging');
    }
});
 
window.addEventListener('mousemove', (e) => {
    if (selecting) {
        const rect = wrap.getBoundingClientRect();
        const mx = e.clientX - rect.left, my = e.clientY - rect.top;
        selRect.style.left = Math.min(selX0, mx) + 'px';
        selRect.style.top = Math.min(selY0, my) + 'px';
        selRect.style.width = Math.abs(mx - selX0) + 'px';
        selRect.style.height = Math.abs(my - selY0) + 'px';
        return;
    }
    if (!dragging) return;
    vx += e.clientX - dragX; vy += e.clientY - dragY;
    dragX = e.clientX; dragY = e.clientY;
    renderGraph();
});
 
window.addEventListener('mouseup', (e) => {
    if (selecting) {
        selecting = false;
        selRect.style.display = 'none';
        wrap.style.cursor = '';
        const rect = wrap.getBoundingClientRect();
        const mx = e.clientX - rect.left, my = e.clientY - rect.top;
        const sx0 = Math.min(selX0, mx), sy0 = Math.min(selY0, my);
        const sw = Math.abs(mx - selX0), sh = Math.abs(my - selY0);
        if (sw > 10 && sh > 10) {
            // Convert screen rect to world coords, zoom to fit
            const W = wrap.clientWidth, H = wrap.clientHeight;
            const wx0 = (sx0 - vx) / scale, wy0 = (sy0 - vy) / scale;
            const wx1 = (sx0 + sw - vx) / scale, wy1 = (sy0 + sh - vy) / scale;
            const ww = wx1 - wx0, wh = wy1 - wy0;
            scale = Math.min(W / ww, H / wh) * 0.95;
            scale = Math.max(0.01, Math.min(20, scale));
            vx = W / 2 - (wx0 + ww / 2) * scale;
            vy = H / 2 - (wy0 + wh / 2) * scale;
            updateZoomLabel();
            renderGraph();
        }
        return;
    }
    dragging = false;
    wrap.classList.remove('dragging');
});
 
wrap.addEventListener('wheel', (e) => {
    e.preventDefault();
    const rect = wrap.getBoundingClientRect();
    const mx = e.clientX - rect.left, my = e.clientY - rect.top;
    zoomAt(mx, my, e.deltaY > 0 ? 0.9 : 1.1);
}, { passive: false });
 
// Click on background clears selection
wrap.addEventListener('click', (e) => {
    if (!e.target.closest('.pe-node') && !e.shiftKey) clearSelection();
});
 
// ---- Controls ----
 
document.getElementById('btn-zin').addEventListener('click', () => {
    const W = wrap.clientWidth, H = wrap.clientHeight;
    zoomAt(W / 2, H / 2, 1.4);
});
document.getElementById('btn-zout').addEventListener('click', () => {
    const W = wrap.clientWidth, H = wrap.clientHeight;
    zoomAt(W / 2, H / 2, 1 / 1.4);
});
 
document.getElementById('btn-fit').addEventListener('click', () => {
    if (nodes.length === 0) return;
    const W = wrap.clientWidth, H = wrap.clientHeight;
    const xs = nodes.map(n => n.x), ys = nodes.map(n => n.y);
    const minX = Math.min(...xs) - 60, maxX = Math.max(...xs) + 60;
    const minY = Math.min(...ys) - 60, maxY = Math.max(...ys) + 60;
    const sw = maxX - minX || 1, sh = maxY - minY || 1;
    scale = Math.min(W / sw, H / sh, 3) * 0.9;
    vx = (W - sw * scale) / 2 - minX * scale;
    vy = (H - sh * scale) / 2 - minY * scale;
    updateZoomLabel();
    renderGraph();
});
 
document.getElementById('btn-reset').addEventListener('click', clearSelection);
 
document.getElementById('detail-close').addEventListener('click', () => {
    document.getElementById('detail-panel').classList.remove('open');
});
 
// Search
const searchBox = document.getElementById('search-box');
searchBox.addEventListener('input', () => {
    const q = searchBox.value.trim().toUpperCase();
    searchMatch.clear();
    if (q) {
        for (const n of nodes) {
            if (n.id.toUpperCase().includes(q) || ('PE_' + n.label).toUpperCase().includes(q)) searchMatch.add(n.id);
        }
    }
    if (!selectedId) renderGraph();
});
 
// ---- Polling ----
 
async function poll() {
    while (true) {
        try {
            const resp = await fetch('/api/events');
            if (resp.ok) {
                const data = await resp.json();
                const result = processEvents(data);
                nodes = result.nodes;
                edges = result.edges;
                sequences = result.sequences;
                document.getElementById('st-nodes').textContent = nodes.length;
                document.getElementById('st-edges').textContent = edges.length;
                document.getElementById('st-seqs').textContent = result.seqCount;
                renderGraph();
            }
        } catch (e) {}
        await new Promise(r => setTimeout(r, 1000));
    }
}
 
// Initial fit after first data
let firstRender = true;
const origRender = renderGraph;
renderGraph = function() {
    origRender();
    if (firstRender && nodes.length > 0) {
        firstRender = false;
        document.getElementById('btn-fit').click();
    }
};
 
poll();
window.addEventListener('resize', renderGraph);
</script>
</body>
</html>
)html";
}