dynamic-systems-testing-framework 1.0.1__py3-none-any.whl

dstf/reporting/templates/filters.js

@@ -0,0 +1,100 @@
+// The typed column filters: one module the dashboard and (S2) the tool's
+// Suite table both load, so a filter means the same thing on each.
+//
+// DstfFilters.compile(kind, query, {regex, case}) returns null for an empty
+// query (no filter), a predicate over a cell's value, or throws
+// DstfFilters.BadFilter for a query it cannot read.
+//   text   — regex on: the query is a regex, searched. Else a * or ? makes
+//            an anchored glob with every other character literal (so
+//            `x[1]` is an array index — the rule a spec's `variables` list
+//            and the tool's Python `_glob` use); else a substring.
+//            Case-insensitive unless `case`.
+//   number — `>1e-4`, `>=`, `<`, `<=`, `=`, a bare number (equal), or an
+//            inclusive range `1..10`. The predicate is given the raw value
+//            (a row's data-sort-<key>), never its display text. A missing
+//            value (null / '') never matches.
+// A status column is not a typed filter: the count pills filter it.
+//
+// DstfFilters.known(stored, keys) is what a page keeps of a stored map of
+// filters: the entries whose key is one of its columns.
+//
+// Same semantics as the Python `_glob`, not the same cost: JS globs and
+// regexes backtrack (`_glob` exists because `*a*a*a*b` took >20 s there),
+// so a runaway pattern can freeze the browser tab it is typed in — only
+// that tab.
+//
+// dashboard.html inlines this file with a Jinja include, so it must never
+// contain a Jinja delimiter: two open braces, or an open brace followed by
+// a percent sign or a hash.
+(function() {
+  class BadFilter extends Error {}
+
+  const NUM = '[+-]?(?:\\d+\\.?\\d*|\\.\\d+)(?:[eE][+-]?\\d+)?';
+  const CMP = new RegExp('^(>=|<=|>|<|=)?\\s*(' + NUM + ')$');
+  const RANGE = new RegExp('^(' + NUM + ')\\s*\\.\\.\\s*(' + NUM + ')$');
+
+  function str(v) {
+    return v === null || v === undefined ? '' : String(v);
+  }
+
+  function compileText(q, opts) {
+    const flags = opts.case ? '' : 'i';
+    if (opts.regex) {
+      let re;
+      try { re = new RegExp(q, flags); }
+      catch (e) { throw new BadFilter(e.message); }
+      return (v) => re.test(str(v));
+    }
+    if (q.includes('*') || q.includes('?')) {
+      const body = Array.from(q).map(ch =>
+        ch === '*' ? '.*' : ch === '?' ? '.' : ch.replace(/[.*+?^$()|[\]\\{}]/g, '\\$&')
+      ).join('');
+      const re = new RegExp('^' + body + '$', flags);
+      return (v) => re.test(str(v));
+    }
+    const needle = opts.case ? q : q.toLowerCase();
+    return (v) => (opts.case ? str(v) : str(v).toLowerCase()).indexOf(needle) !== -1;
+  }
+
+  function toNumber(v) {
+    if (v === null || v === undefined || v === '') return null;
+    const n = typeof v === 'number' ? v : parseFloat(v);
+    return isNaN(n) ? null : n;
+  }
+
+  function compileNumber(q) {
+    const t = q.trim();
+    let m = RANGE.exec(t);
+    if (m) {
+      const lo = parseFloat(m[1]), hi = parseFloat(m[2]);
+      return (v) => { const n = toNumber(v); return n !== null && n >= lo && n <= hi; };
+    }
+    m = CMP.exec(t);
+    if (!m) throw new BadFilter('Not a comparison (>1e-4) or a range (1..10): ' + q);
+    const x = parseFloat(m[2]);
+    const test = {
+      '>': (n) => n > x, '>=': (n) => n >= x, '<': (n) => n < x,
+      '<=': (n) => n <= x, '=': (n) => n === x,
+    }[m[1] || '='];
+    return (v) => { const n = toNumber(v); return n !== null && test(n); };
+  }
+
+  function compile(kind, query, opts) {
+    if (!query) return null;
+    if (kind === 'number') return compileNumber(query);
+    return compileText(query, opts || {});
+  }
+
+  // A stored view is older than the page that reads it: `known(stored,
+  // keys)` is the part of a stored map (column -> query) whose key is a
+  // column the page has. A column renamed since would otherwise filter over
+  // nothing, with no input on the page to empty.
+  function known(stored, keys) {
+    const has = new Set(keys), out = {};
+    if (!stored || typeof stored !== 'object') return out;
+    for (const [k, v] of Object.entries(stored)) if (has.has(k)) out[k] = v;
+    return out;
+  }
+
+  window.DstfFilters = { compile, known, BadFilter };
+})();

dstf/reporting/templates/interactive.html

@@ -0,0 +1,420 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>{{ model_id }} — Interactive</title>
+{# Plotly ships with the report (report_suite.write_report_assets), not
+   from a CDN: an air-gapped lab rendered a plot-less report with no error
+   at all. Pinned to the version the CDN tag used to name — plotly.js
+   v2.35.0. ONE copy per suite, at the reports root — hence ``../``; a
+   copy per test dir cost 1.25 MB × N. Moving a single test's report dir
+   elsewhere means bringing ``plotly.min.js`` along beside it. #}
+<script src="../plotly.min.js" charset="utf-8"></script>
+<style>
+{{ dstf_css|safe }}
+* { box-sizing: border-box; }
+body { font-family: var(--dstf-font); margin: 0; padding: 1.5em; background: var(--dstf-page); color: var(--dstf-text); }
+h1 { margin-bottom: 0.2em; }
+h2 { color: var(--dstf-text-secondary); border-bottom: 1px solid var(--dstf-border); padding-bottom: 0.3em; }
+
+.summary { font-size: 1.1em; margin-bottom: 0.5em; }
+.pass { color: var(--dstf-pass-fill); } .fail { color: var(--dstf-fail-fill); } .info { color: var(--dstf-pending-fill); }
+/* Neutral headline for a root with no verdict to show — matches its pill,
+   which reads "—". */
+.summary .pending { color: var(--dstf-pending-fill); }
+
+/* Key stats */
+.key-stats { display: flex; flex-wrap: wrap; gap: 0.8em; margin-bottom: 1.5em; }
+.key-stat { background: var(--dstf-surface); border: 1px solid var(--dstf-border); border-radius: 4px; padding: 0.5em 1em; min-width: 120px; }
+.key-stat.changed { border-color: var(--dstf-warn-border); background: var(--dstf-warn-tint); }
+.key-stat .label { font-size: 0.75em; color: var(--dstf-text-muted); text-transform: uppercase; }
+.key-stat .value { font-size: 1.1em; font-weight: 600; }
+.key-stat .ref { font-size: 0.75em; color: var(--dstf-text-disabled); }
+
+/* Tables */
+table { border-collapse: collapse; width: 100%; background: var(--dstf-surface); margin-bottom: 1.5em; }
+th, td { border: 1px solid var(--dstf-border); padding: 5px 8px; text-align: left; font-size: 0.85em; }
+th { background: var(--dstf-surface-hover); font-weight: 600; }
+tr:hover { background: var(--dstf-surface-hover); }
+
+/* Plots */
+.plot-section { margin-bottom: 1.5em; background: var(--dstf-surface); padding: 1em; border: 1px solid var(--dstf-border-hairline); border-radius: 4px; }
+.plot-section h3 { margin-top: 0; }
+.plotly-chart { height: 350px; --toolbar-gutter: 34px; margin-right: var(--toolbar-gutter); }
+/* The plot's vertical toolbar stands in a gutter of its own, right of the
+   figure, instead of over the error axes' tick labels and titles: a margin
+   reserved inside the figure could not know how wide those labels grow (an
+   error around 1e-5 outgrew every reserve measured). The chart is
+   narrower than its section's content box by the gutter: its width is the
+   block's own `auto`, which the margin narrows (a `width: 100%` beside the
+   margin hung the toolbar 15 px past the section). Plotly pins
+   the toolbar's container with an inline `right: 0px`, hence the
+   `!important`. The authoring tool's plots carry the same gutter
+   (shell/style.py). The width is not a `--dstf-` token: those are the
+   theme's table (theme.py). */
+.plotly-chart .modebar-container { right: calc(-1 * var(--toolbar-gutter)) !important; }
+
+/* Collapsible */
+details { margin-bottom: 1.5em; }
+details summary { cursor: pointer; color: var(--dstf-text-secondary); font-weight: 500; padding: 0.3em 0; }
+details summary:hover { color: var(--dstf-text); }
+
+/* Artifacts */
+.artifacts { margin-bottom: 1.5em; }
+.artifacts summary { cursor: pointer; color: var(--dstf-text-secondary); font-weight: 500; }
+.artifacts p { margin: 0.5em 0 0 1em; }
+.artifacts a { margin-right: 0.3em; }
+.artifacts-prominent { margin-bottom: 1.5em; padding: 1em; background: var(--dstf-warn-tint); border: 1px solid var(--dstf-warn-border); border-radius: 4px; }
+.artifacts-prominent h2 { margin-top: 0; border: none; padding: 0; }
+.warnings-prominent { margin-bottom: 1.5em; padding: 1em; background: var(--dstf-warn-tint); border: 1px solid var(--dstf-warn-border); border-radius: 4px; }
+.warnings-prominent h2 { margin-top: 0; border: none; padding: 0 0 0.4em 0; }
+.warnings-prominent table { margin: 0; }
+.warnings-prominent .warning-statement { margin: 0 0 0.6em 0; }
+.meta-table { width: auto; min-width: 400px; }
+.meta-table td:first-child { font-weight: 500; white-space: nowrap; }
+/* Advisory (warn-wrapped) failure marker — C-v item (c). A leaf under a
+   warn wrapper cannot fail the root, so it must not paint the summary or
+   the variable pill red; it gets this amber chip instead. */
+.advisory-chip { display: inline-block; margin-left: 0.5em; padding: 0.05em 0.45em; border-radius: 3px; background: var(--dstf-warn-tint); border: 1px solid var(--dstf-warn-border); color: var(--dstf-warn-dark); font-size: 0.75em; font-weight: 600; vertical-align: middle; }
+/* A2 / idea #50 — per-plot overlay picker (companions + soft_checks) */
+.overlay-picker { display: flex; flex-wrap: wrap; gap: 0.5em 1em; align-items: center; font-size: 0.8em; margin: 0.2em 0 0.5em 0; padding: 0.3em 0.6em; background: var(--dstf-surface-hover); border: 1px dashed var(--dstf-border-hairline); border-radius: 4px; }
+.overlay-picker .ov-label { color: var(--dstf-text-secondary); font-weight: 500; }
+.overlay-picker .ov-item { display: inline-flex; align-items: center; gap: 0.25em; cursor: pointer; }
+.overlay-picker .ov-role { display: inline-block; padding: 0 0.3em; border-radius: 3px; font-size: 0.72em; text-transform: uppercase; }
+.overlay-picker .ov-soft_check { background: var(--dstf-role-soft_check-bg); color: var(--dstf-role-soft_check-fg); border: 1px solid var(--dstf-role-soft_check-border); }
+.overlay-picker .ov-companion { background: var(--dstf-role-companion-bg); color: var(--dstf-role-companion-fg); border: 1px solid var(--dstf-role-companion-border); }
+/* A spelling that could stand for two of an overlay's variables: nothing
+   is drawn for it, and this row says which mapping would settle it. */
+.ov-warning { margin-top: 0.2em; }
+/* Stage 2 — recursive SpecNodeView */
+.variable-section { margin-bottom: 2em; padding: 1em; background: var(--dstf-surface); border: 1px solid var(--dstf-border); border-radius: 4px; }
+.variable-section h2 { margin-top: 0; border-bottom: 1px solid var(--dstf-border-hairline); padding-bottom: 0.3em; }
+.variable-section .var-status { display: inline-block; padding: 0.1em 0.5em; border-radius: 3px; font-size: 0.7em; font-weight: 600; letter-spacing: 0.05em; margin-right: 0.5em; vertical-align: middle; }
+.variable-section .var-status.pass { background: var(--dstf-pass-pill); color: var(--dstf-pass-dark); border: 1px solid var(--dstf-pass-border); }
+.variable-section .var-status.fail { background: var(--dstf-fail-pill); color: var(--dstf-fail-dark); border: 1px solid var(--dstf-fail-border); }
+.node-tree { margin-top: 0.8em; }
+.node { margin: 0.3em 0; padding: 0.4em 0.6em; border-left: 3px solid var(--dstf-border); background: var(--dstf-page); border-radius: 0 3px 3px 0; }
+.node-leaf { border-left-color: var(--dstf-accent); }
+.node-combinator { border-left-color: var(--dstf-text-secondary); background: var(--dstf-surface-hover); }
+.node-children { margin-left: 1.2em; margin-top: 0.3em; }
+.node-header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; font-size: 0.9em; }
+.node-label { font-weight: 500; color: var(--dstf-text); }
+.node-score { font-size: 0.85em; color: var(--dstf-text-secondary); font-family: var(--dstf-mono); }
+/* One width, its text centred: PASS, FAIL and the pending dash, so a plot
+   section's leaf names start in one column (D140; the tool's `.dstf-pill`
+   keeps the same). */
+.node-status { display: inline-block; padding: 0.05em 0.4em; border-radius: 3px; font-size: 0.7em; font-weight: 600; letter-spacing: 0.05em; min-width: 4em; text-align: center; }
+.node-status.pass { background: var(--dstf-pass-pill); color: var(--dstf-pass-dark); }
+.node-status.fail { background: var(--dstf-fail-pill); color: var(--dstf-fail-dark); }
+.node-status.pending { background: var(--dstf-pending-pill); color: var(--dstf-pending-fill); }
+.node-child-count { font-size: 0.8em; color: var(--dstf-text-muted); font-family: var(--dstf-mono); }
+.node-criterion { font-size: 0.82em; color: var(--dstf-text-secondary); margin-top: 0.15em; padding-left: 0.2em; }
+.node-details { display: grid; grid-template-columns: auto 1fr; gap: 0.05em 0.6em; margin: 0.3em 0 0 0.2em; font-size: 0.8em; }
+.node-details dt { color: var(--dstf-text-muted); }
+.node-details dd { margin: 0; color: var(--dstf-text); font-family: var(--dstf-mono); }
+.node-combinator-params { display: inline-flex; gap: 0.4em; align-items: center; margin-left: 0.3em; padding-left: 0.4em; border-left: 1px dashed var(--dstf-text-muted); font-size: 0.82em; }
+.metric-tree-section { margin-bottom: 1.5em; padding: 1em; background: var(--dstf-surface); border: 1px solid var(--dstf-border); border-radius: 4px; }
+.metric-tree-section summary { font-weight: 600; cursor: pointer; }
+.node-tree-hint { font-weight: 400; color: var(--dstf-text-muted); font-size: 0.85em; }
+/* Reason a sentinel leaf could not be scored (misconfigured metric, empty window) */
+.node-error { margin-top: 0.3em; padding-left: 1.4em; color: var(--dstf-sim-fail-dark); font-size: 0.8em; }
+/* Per-plot controls row */
+.plot-controls { display: flex; gap: 1em; align-items: center; margin-bottom: 0.5em; font-size: 0.85em; color: var(--dstf-text-secondary); }
+.plot-controls label { display: inline-flex; align-items: center; gap: 0.4em; }
+.error-overlay-select { padding: 0.15em 0.3em; border: 1px solid var(--dstf-border); border-radius: 3px; font-family: inherit; font-size: 0.85em; }
+/* A line the plot itself cannot say: a missing series, or a watch plot
+   no criterion scores yet. */
+.plot-note { font-size: 0.85em; color: var(--dstf-text-secondary); margin-bottom: 0.5em; }
+/* A plot's context series — drawn grey beside its subject, never scored on
+   this plot — listed muted above the plot. */
+.plot-context { font-size: 0.85em; color: var(--dstf-text-muted); margin-bottom: 0.5em; }
+/* A plot's criteria, in tree order: each row led by its ancestors' kinds
+   (`and › k-of-n ›`), muted — where in the tree the leaf sits. Each crumb's
+   minimum width is its plot's longest crumb, in ch (the section's
+   `crumb_ch`), so a section's leaf names start in one column whatever its
+   rows' depths — a fixed width was outgrown by a fourth level (the tool's
+   `.dstf-crumb` keeps the same). */
+.criteria-row { display: flex; align-items: baseline; gap: 0.5em; }
+.criteria-row > .node { flex: 1; min-width: 0; }
+.node-crumbs { color: var(--dstf-text-muted); font-size: 0.8em; white-space: nowrap; }
+/* A variable reads as the expression its model wrote (`pipe.T[1]`); its
+   result-file name — what a criterion, an override or a --filter is written
+   against — rides beside the title, muted. Absent when the two agree. */
+.dstf-varname { color: var(--dstf-text-muted); font-weight: 400; font-size: 0.8em; font-family: var(--dstf-mono); margin-left: 0.4em; }
+/* Decimation disclosure — which traces the page draws at reduced
+   resolution, and where the full-resolution data lives. */
+#decimation-banner { background: var(--dstf-warn-tint); border: 1px solid var(--dstf-warn-border); border-radius: 4px; color: var(--dstf-warn-dark); padding: 8px 12px; margin: 0 0 12px 0; font-size: 0.85em; }
+#decimation-banner .dec-trace { font-family: var(--dstf-mono); white-space: nowrap; }
+</style>
+</head>
+<body>
+
+{# === SERVER-RENDERED METRIC TREE ==========================================
+   The tree is a read-only view of what the CLI already decided: every pill,
+   score, criterion and detail pair below comes from the evaluated tree view.
+   No form controls — editing a spec is the authoring tool's job, not the
+   report's. #}
+{% macro status_pill(passed) %}{% if passed is sameas true %}<span class="node-status pass">PASS</span>{% elif passed is sameas false %}<span class="node-status fail">FAIL</span>{% else %}<span class="node-status pending">—</span>{% endif %}{% endmacro %}
+{% macro advisory_chip(count, vidx=None) %}<span class="advisory-chip"{% if vidx is not none %} data-vidx="{{ vidx }}"{% endif %} title="{% if count == 1 %}One failing leaf sits under a warn wrapper — advisory only; it does not fail the test.{% else %}{{ count }} failing leaves sit under a warn wrapper — advisory only; they do not fail the test.{% endif %}">{% if count == 1 %}1 advisory{% else %}{{ count }} advisory{% endif %}</span>{% endmacro %}
+{% macro node(n) %}
+{%- set combinator_help = {
+      'and': 'All children must pass.',
+      'or': 'At least one child must pass.',
+      'warn': 'Single-child wrapper; never fails its parent (advisory-only scoring).',
+      'k-of-n': 'At least k of N children must pass.',
+      'weighted': 'Weighted sum of child scores passes a threshold.'} -%}
+{%- if n.kind == 'leaf' -%}
+<div class="node node-leaf" data-path="{{ n.path }}">
+<div class="node-header">{{ status_pill(n.passed) }}<span class="node-label">{{ n.metric }} · {{ n.label or n.variable }}{% if n.against and n.against != 'primary' %} [against={{ n.against }}]{% endif %}{% if n.window and (n.window.get('start') is not none or n.window.get('end') is not none) %} [window{% if n.window.get('start') is not none %} start={{ n.window.get('start') }}{% endif %}{% if n.window.get('end') is not none %} end={{ n.window.get('end') }}{% endif %}]{% endif %}</span>{% if n.score_display %}<span class="node-score"{% if n.error %} title="{{ n.error }}"{% endif %}>{{ n.score_display }}</span>{% endif %}</div>
+{%- if n.criterion %}<div class="node-criterion">{{ n.criterion }}</div>{% endif %}
+{%- if n.error %}<div class="node-error">{{ n.error }}</div>{% endif %}
+{%- if n.details %}<dl class="node-details">{% for pair in n.details %}<dt>{{ pair[0] }}</dt><dd>{{ pair[1] }}</dd>{% endfor %}</dl>{% endif %}
+</div>
+{%- else -%}
+<div class="node node-combinator" data-path="{{ n.path }}">
+<div class="node-header">{{ status_pill(n.passed) }}<span class="node-label" title="{{ combinator_help.get(n.combinator, '') }}">{{ n.combinator }}</span><span class="node-child-count">[{{ (n.children or []) | length }}]</span>{% if n.get('k') is not none or n.get('threshold') is not none or n.get('weights') %}<span class="node-combinator-params">{% if n.get('k') is not none %}k={{ n.get('k') }}{% endif %}{% if n.get('weights') %} weights={{ n.get('weights') | join(', ') }}{% endif %}{% if n.get('threshold') is not none %} threshold={{ n.get('threshold') }}{% endif %}</span>{% endif %}</div>
+<div class="node-children">{% for child in n.children or [] %}{{ node(child) }}{% endfor %}</div>
+</div>
+{%- endif -%}
+{% endmacro %}
+
+{# === DECIMATION DISCLOSURE ===
+   Server-rendered from the figures' ``full_samples`` stamps: a trace whose
+   stamp exceeds the samples it carries was thinned to fit the page. The
+   sidecar holds the full-resolution INPUT trajectories (actual, reference,
+   overlays) — derived traces such as bands, error series and spectra are
+   not in it, so the banner promises only the inputs. #}
+{% if decimated %}
+<div id="decimation-banner">
+  <strong>{{ decimated | length }}</strong> trace{{ '' if decimated | length == 1 else 's' }} decimated to fit this page — the full-resolution input trajectories are in <code>comparison_data.json</code>:
+  {% for d in decimated %}<span class="dec-trace">{{ d.variable }} {{ d.trace }} {{ d.full }}&rarr;{{ d.embedded }}</span>{% if not loop.last %}, {% endif %}{% endfor %}
+</div>
+{% endif %}
+
+<h1>{{ model_id }}</h1>
+{% if run_metadata %}<div class="run-meta" style="font-size:0.85em; color: var(--dstf-text-muted); margin-bottom:0.25em;"><strong>{{ run_metadata.label }}</strong>{% if run_metadata.tool_version and run_metadata.tool_version != run_metadata.label %} <span title="version reported by the backend">({{ run_metadata.tool_version }})</span>{% endif %}{% if run_metadata.msl %} · MSL {{ run_metadata.msl }}{% endif %}{% if run_metadata.os %} · {{ run_metadata.os }}{% endif %}{% if run_metadata.dstf_version %} · DSTF {{ run_metadata.dstf_version }}{% endif %}{% if run_metadata.generated_str %} · {{ run_metadata.generated_str }}{% endif %}</div>{% endif %}
+{% if last_run_str %}<div style="font-size:0.85em; color: var(--dstf-text-muted); margin-bottom:0.5em;">Last run: {{ last_run_str }}</div>{% endif %}
+
+{# === SUMMARY === #}
+<div class="summary" id="summary">
+{# A refused test FIRST: it has no scored variable, so the branches below
+   read it as a test with no baseline — whether or not it has one. -#}
+{% if refused %}
+  <span class="fail"><strong>Not scored:</strong> {{ refused }}</span>
+{% elif is_simulate_only %}
+  <span class="pass"><strong>Simulate-only:</strong> simulation succeeded</span>
+{% elif nobaseline_trajectories %}
+  <strong>{{ nobaseline_trajectories | length }}</strong> variables (no baseline)
+{% elif sim_failed %}
+  <span class="fail"><strong>Simulation failed</strong></span>
+{% else %}
+  {% if tree_summary %}<span id="summary-text" class="{{ 'pending' if tree_summary.root_passed is not sameas true and tree_summary.root_passed is not sameas false else ('pass' if tree_summary.root_passed else 'fail') }}"><strong>{{ tree_summary.n_pass }}</strong> / <strong>{{ tree_summary.n_total }}</strong> leaves passed{% if tree_summary.root_passed is not sameas true and tree_summary.root_passed is not sameas false %} · root verdict pending — run dstf run to evaluate{% endif %}{% if tree_summary.n_advisory_failed %}{{ advisory_chip(tree_summary.n_advisory_failed) }}{% endif %}</span>{% else %}<span id="summary-text"></span>{% endif %}
+{% endif %}
+</div>
+
+{# === KEY STATS === #}
+{% if key_stats %}
+<div class="key-stats">
+{% for s in key_stats %}
+  <div class="key-stat{{ ' changed' if s.changed | default(false) else '' }}" {% if s.label == 'Worst NRMSE' %}id="key-stat-nrmse"{% endif %}>
+    <div class="label">{{ s.label }}</div>
+    <div class="value">{{ s.current or "\u2014" }}</div>
+    {% if s.reference %}<div class="ref">ref: {{ s.reference }}</div>{% endif %}
+  </div>
+{% endfor %}
+</div>
+{% endif %}
+
+{# === STRUCTURAL WARNINGS === #}
+{% if warnings %}
+<div class="warnings-prominent">
+  <h2>Structural Warnings ({{ warnings | length }})</h2>
+  {# A statement about this run is a sentence; only a change from the
+     baseline has a Reference and a Current to put in columns. #}
+  {% for w in warnings if not w.is_change %}
+  <p class="warning-statement">{{ w.text }}</p>
+  {% endfor %}
+  {% set changes = warnings | selectattr('is_change') | list %}
+  {% if changes %}
+  <table>
+    <tr><th>Field</th><th>Reference</th><th>Current</th></tr>
+    {% for w in changes %}
+    <tr><td>{{ w.field }}</td><td>{{ w.reference }}</td><td>{{ w.current }}</td></tr>
+    {% endfor %}
+  </table>
+  {% endif %}
+</div>
+{% endif %}
+
+{# === REFERENCE INFO (moved up, after summary) === #}
+{% if ref_info %}
+<details class="artifacts">
+  <summary>Reference Info</summary>
+  <table class="meta-table">
+  <tr><th>Field</th><th>Value</th></tr>
+  {% for row in ref_info %}<tr><td>{{ row.label }}</td><td>{% if row.link %}<a href="{{ row.link }}">{{ row.value }}</a>{% else %}{{ row.value }}{% endif %}</td></tr>{% endfor %}
+  </table>
+</details>
+{% endif %}
+
+{# === ARTIFACT LINKS === #}
+{% if artifacts %}
+  {% if sim_failed %}
+  <div class="artifacts-prominent">
+    <h2>Simulation Artifacts</h2>
+    <p>{% for a in artifacts %}<a href="{{ a.uri }}">{{ a.label }}</a>{% if not loop.last %} &middot; {% endif %}{% endfor %}</p>
+  </div>
+  {% else %}
+  <details class="artifacts">
+    <summary>Simulation Artifacts</summary>
+    <p>{% for a in artifacts %}<a href="{{ a.uri }}">{{ a.label }}</a>{% if not loop.last %} &middot; {% endif %}{% endfor %}</p>
+  </details>
+  {% endif %}
+{% endif %}
+
+{# === SIM PARAMS (collapsible, moved up) === #}
+{% if sim_params %}
+<details>
+  <summary>Simulation Parameters</summary>
+  <table class="meta-table"><tr><th>Parameter</th><th>Current</th><th>Reference</th></tr>
+  {% for row in sim_params %}
+  <tr{% if row.changed %} style="background: var(--dstf-warn-tint)"{% endif %}><td>{{ row.label }}</td><td>{{ row.current }}</td><td>{{ row.reference }}</td></tr>
+  {% endfor %}
+  </table>
+</details>
+{% endif %}
+
+{# === OVERLAYS SUMMARY — A2 / idea #50 === #}
+{% if overlay_rows %}
+<details class="artifacts">
+  <summary>Overlays ({{ overlay_rows | length }}) — companion + soft_check</summary>
+  <table class="meta-table">
+  <tr><th>Name</th><th>Role</th><th>Status</th><th>Variables</th><th>Note</th></tr>
+  {% for ov in overlay_rows %}
+  <tr{% if ov.status != 'loaded' or ov.warnings %} style="background: var(--dstf-warn-tint)"{% endif %}>
+    <td>{{ ov.name }}</td>
+    <td>{{ ov.role }}{% if ov.kind %} ({{ ov.kind }}){% endif %}</td>
+    <td>{{ ov.status }}</td>
+    <td>{% if ov.variables %}{{ ov.variables | join(", ") }}{% else %}&mdash;{% endif %}</td>
+    <td style="font-size:0.8em; color: var(--dstf-text-secondary)">{{ ov.note }}{% for warning in ov.warnings %}<div class="ov-warning">{{ warning }}</div>{% endfor %}</td>
+  </tr>
+  {% endfor %}
+  </table>
+  <p style="font-size:0.8em; color: var(--dstf-text-muted); margin-top:0.5em;">
+    Toggle per-variable visibility with the <code>Overlays:</code> checkboxes above each plot.
+    Companions are visual-only; soft_checks are warn-wrapped scorable baselines.
+  </p>
+</details>
+{% endif %}
+
+{# === STATISTICS (collapsible, moved up) === #}
+{% if statistics_sections %}
+<details>
+  <summary>Statistics ({{ statistics_sections | length }} sections)</summary>
+  {% for section in statistics_sections %}
+  <h3>{{ section.title }}</h3>
+  <table>
+  <tr><th>Metric</th><th>Current</th><th>Reference</th></tr>
+  {% for row in section.rows %}
+  <tr{% if row.changed %} style="background: var(--dstf-warn-tint)"{% endif %}><td>{{ row.label }}</td><td>{{ row.current }}</td><td>{{ row.reference }}</td></tr>
+  {% endfor %}
+  </table>
+  {% endfor %}
+</details>
+{% endif %}
+
+{# === DIAGNOSTIC PLOTS (moved up, above variables) === #}
+{% if diag_trajectories %}
+<details>
+  <summary>Diagnostics ({{ diag_trajectories | length }} variables)</summary>
+  {% for traj in diag_trajectories %}
+  <div class="plot-section">
+    <h3><span class="info">INFO</span> {{ traj.name }}</h3>
+    <div class="plotly-chart" id="diag-plot-{{ loop.index0 }}"></div>
+  </div>
+  {% endfor %}
+</details>
+{% endif %}
+
+{# === METRIC TREE (Stage 3 — full unfiltered SpecNodeView mount) === #}
+{% if tree_view %}
+<details class="metric-tree-section" open>
+  <summary>Metric Tree <span class="node-tree-hint">— every leaf + combinator, as the CLI scored it</span></summary>
+  <div class="node-tree" id="nodes-full">{{ node(tree_view) }}</div>
+</details>
+{% endif %}
+
+{# === PLOT SECTIONS — one per plot, derived from the criteria tree ===
+   One per scored variable or array family, in the order the tree first
+   names it, then the watch plots; nothing scored is one per tracked
+   variable. Each lists the criteria on its subject in tree order, each led
+   by its ancestors' kinds, and its context series (drawn grey; a
+   context series may be scored on a plot of its own). A family's badges
+   name their members, as the tool's pills do. The error select shows when
+   the subject is ONE scored variable the result carries, the overlay
+   picker when that one variable has overlays. #}
+{% if plot_sections %}
+{% for plot in plot_sections %}
+<div class="variable-section plot-section-block" data-plot="{{ plot.index }}" id="variable-section-{{ plot.index }}">
+  <h2>
+    {%- for v in plot.variables -%}
+    <span class="var-status {{ 'pass' if v.passed else 'fail' }}" data-vidx="{{ v.vidx }}">{% if not plot.single %}{{ v.text or v.name }} {% endif %}{{ 'PASS' if v.passed else 'FAIL' }}</span>{% if v.n_advisory_failed %}{{ advisory_chip(v.n_advisory_failed, v.vidx) }}{% endif %}
+    {%- endfor %}
+    {{ plot.title }}{% if plot.names %}<span class="dstf-varname">{{ plot.names }}</span>{% endif %}
+  </h2>
+  {% if plot.errors %}
+  <div class="plot-controls">
+    <label class="error-overlay-control" title="Overlay an error trace on the secondary y-axis">
+      Error overlay
+      <select class="error-overlay-select" data-plot="{{ plot.index }}">
+        <option value="none">none</option>
+        <option value="signed">signed error (act - ref)</option>
+        <option value="abs">abs error</option>
+        <option value="nrmse">NRMSE</option>
+      </select>
+    </label>
+  </div>
+  {% endif %}
+  {% if plot.overlays %}
+  <div class="overlay-picker" data-plot-id="plot-{{ plot.index }}" title="Companion + soft_check overlays (view-only; never scored unless declared in a warn-wrapped leaf)">
+    <span class="ov-label">Overlays:</span>
+    {% for ov in plot.overlays %}
+    <label class="ov-item"><input type="checkbox" class="overlay-toggle" data-ov-name="{{ ov.name }}" data-ov-role="{{ ov.role }}"> <span class="ov-role ov-{{ ov.role }}">{{ ov.role }}</span> {{ ov.name }}</label>
+    {% endfor %}
+  </div>
+  {% endif %}
+  {% if plot.context %}<div class="plot-context">Context: {{ plot.context | join(", ") }}</div>{% endif %}
+  {% if plot.missing %}<div class="plot-note">Not in this result: {{ plot.missing | join(", ") }}</div>{% endif %}
+  {#- A subject the result lacks entirely draws no chart: an empty one
+      said nothing the note does not. #}
+  {% if plot.subject %}<div class="plotly-chart plot-main" id="plot-{{ plot.index }}" style="height:300px"></div>{% endif %}
+  {% if plot.criteria %}
+  <div class="node-tree plot-criteria" id="nodes-{{ plot.index }}">
+    {%- for row in plot.criteria %}
+    <div class="criteria-row" data-variable="{{ row.variable }}">{% if row.crumbs %}<span class="node-crumbs" style="min-width: {{ plot.crumb_ch }}ch">{{ row.crumbs }}</span>{% endif %}{{ node(row.leaf) }}</div>
+    {%- endfor %}
+  </div>
+  {% elif plot.watch %}
+  <div class="plot-note">No criteria yet.</div>
+  {% endif %}
+</div>
+{% endfor %}
+{% endif %}
+
+<script>
+// Data marshalling only — the figure dicts and the order the plot elements
+// were numbered in. Everything else on this page is server-rendered markup.
+window.MT_REPORT = {
+  {# review 2026-07-06 finding 76h: a LIST, one entry per plot section, in
+     the template's own order — JS Object.keys() reorders integer-like keys
+     numerically, which desynced plot element IDs from that order. #}
+  PLOT_SERIES: {{ plot_series | tojson }},
+  {# Figure dicts from dstf.figures — one per plot section, verbatim. #}
+  PLOT_FIGURES: {{ (plot_figures or []) | tojson }},
+  DIAG_FIGURES: {{ (diag_figures or []) | tojson }},
+};
+</script>
+<script src="interactive.js"></script>
+
+</body>
+</html>

dstf/reporting/templates/report.js

@@ -0,0 +1,116 @@
+// ---- interactive.js (report.js) ----
+// The report page's ONE script. It paints the figure dicts Python built
+// and wires the two view controls that need JavaScript at all — the
+// overlay picker and the error-overlay dropdown, both of which only
+// toggle the visibility of traces that are already in the figure.
+//
+// It computes nothing. No verdict, no bound, no box, no spectrum, no
+// event: every number on the page is either inside a figure dict or was
+// rendered into the markup by Jinja. Anything that needs to be computed
+// belongs in `dstf.figures` (drawing) or the authoring tool (editing).
+
+// ---- Embedded data ----
+// interactive.html inlines the figure dicts into window.MT_REPORT (one
+// <script> block), then loads this file via <script src>. Keeps the JS
+// pure-static and the template responsible for data marshalling.
+const MT_REPORT = (typeof window !== 'undefined' && window.MT_REPORT) || {};
+// One figure per PLOT SECTION, in the template's own order — the page is
+// laid out per plot, not per variable, and a plot may draw several series.
+const PLOT_FIGURES = MT_REPORT.PLOT_FIGURES || [];
+// Each plot's series names, in order (the browser tests read it).
+const PLOT_SERIES = MT_REPORT.PLOT_SERIES || [];
+const DIAG_FIGURES = MT_REPORT.DIAG_FIGURES || [];
+
+// ---- Plotly rendering ----
+const PLOT_CFG = {
+  responsive: true,
+  displaylogo: false,
+  scrollZoom: true,
+};
+
+function paintFigure(el, fig) {
+  if (!el || !fig) return;
+  Plotly.newPlot(el, fig.data, fig.layout, PLOT_CFG);
+  // The marker the browser tests read: this plot is the Python figure
+  // dict, verbatim, and nothing rebuilt it.
+  el._mt_python = true;
+  dstfWireSecondaryAxes(el);
+}
+
+function renderAllPlots() {
+  PLOT_FIGURES.forEach((fig, idx) => {
+    paintFigure(document.getElementById(`plot-${idx}`), fig);
+  });
+  DIAG_FIGURES.forEach((fig, idx) => {
+    paintFigure(document.getElementById(`diag-plot-${idx}`), fig);
+  });
+}
+
+// ---- Overlay picker ----
+// Each .overlay-picker div declares which Plotly chart it drives via its
+// data-plot-id attribute (plot-N), so one handler serves every plot.
+function overlayTraceName(role, name) {
+  return `Overlay: ${role}/${name}`;
+}
+
+function wireOverlayPickers() {
+  document.querySelectorAll('.overlay-picker .overlay-toggle').forEach(cb => {
+    cb.addEventListener('change', (e) => {
+      const picker = e.target.closest('.overlay-picker');
+      if (!picker) return;
+      const plotId = picker.dataset.plotId;
+      if (!plotId) return;
+      const name = e.target.dataset.ovName;
+      const role = e.target.dataset.ovRole;
+      setOverlayVisible(plotId, role, name, e.target.checked);
+    });
+  });
+}
+
+function setOverlayVisible(plotId, role, name, visible) {
+  const el = document.getElementById(plotId);
+  if (!el || !el.data) return;
+  const traceName = overlayTraceName(role, name);
+  for (let i = 0; i < el.data.length; i++) {
+    if (el.data[i].name === traceName) {
+      Plotly.restyle(el, { visible: visible ? true : 'legendonly' }, [i]);
+      return;
+    }
+  }
+}
+
+// ---- Error overlays (signed / abs on the error axis, NRMSE on its own; axes.js shows the axis) ----
+// The three error series ride into the figure as legend-only traces on
+// yaxis3 / yaxis4; the dropdown only decides which one is visible.
+function wireErrorOverlays() {
+  document.querySelectorAll('.error-overlay-select').forEach(sel => {
+    sel.addEventListener('change', (e) => {
+      // `data-plot`, not `data-vidx`: the select belongs to a PLOT. On this
+      // page `data-vidx` means a variable's index (var-status), and on a
+      // plot of one subject the two only happen to coincide.
+      const plotIdx = parseInt(e.target.dataset.plot);
+      if (isNaN(plotIdx)) return;
+      setErrorOverlay(plotIdx, e.target.value);
+    });
+  });
+}
+
+function setErrorOverlay(plotIdx, mode) {
+  const el = document.getElementById(`plot-${plotIdx}`);
+  if (!el || !el.data) return;
+  const idx = [];
+  const vis = [];
+  el.data.forEach((tr, i) => {
+    if (!tr.meta || tr.meta.kind !== 'error') return;
+    idx.push(i);
+    vis.push(mode !== 'none' && tr.meta.id === `error/${mode}` ? true : 'legendonly');
+  });
+  if (idx.length) Plotly.restyle(el, { visible: vis }, idx);
+}
+
+// ---- Init ----
+document.addEventListener('DOMContentLoaded', () => {
+  renderAllPlots();
+  wireOverlayPickers();
+  wireErrorOverlays();
+});