confidenceexact โ read straight off the codeinferred โ derived through a wrapper or a constantguess โ went through a re-export, the screen may be wrongUnresolved is not part of the three levels above โ apiflow could not read the path.
screens call it & the API declares itdeclared, no screen calls itFE calls it, API does not declare itnot reconciled yetinner ring = no auth gate foundclick a cell to see its impact ring
showingโhover a row to isolate that branch
screenendpoint the API declaresendpoint the API does not declareโโ exactโโ inferredโโ guess
screen
#endpoints
confidence
These are calls apiflow saw but could not resolve to a path.
They are part of no endpoint count โ they are the denominator of confidence.
An alert is something apiflow understood and finds dangerous โ unlike
Unresolved, which is something it could not understand at all. Severity follows the confidence of the
calls: a mismatch at guess level may be an artefact of the tool's own path inference.
`;
// cm:guard No template literals and no backticks below โ this block is embedded inside a String.raw
// literal, so one backtick closes it early and the page ships a syntax error.
export const PANES_SCRIPT = String.raw`
const el0 = (id) => (document.getElementById(id) || { textContent: 'null' }).textContent;
const MAP = JSON.parse(document.getElementById('apimap').textContent);
const ALERTS = JSON.parse(document.getElementById('alerts').textContent);
const RELIABILITY = new Map(JSON.parse(document.getElementById('reliability').textContent)
.map((r) => [r[0], { exact: r[1], inferred: r[2], guess: r[3] }]));
const DIFF = JSON.parse(document.getElementById('diff').textContent);
const SERIES = JSON.parse(el0('series'));
const EPHIST = JSON.parse(el0('ephist'));
// cm:why "scan 3/5" plus a date, not just a date: history holds only the scans that CHANGED
// something, so "2d ago" alone hides that there were three scans in between that saw the same.
function seenText(endpointId) {
if (!EPHIST) return null;
const total = EPHIST.scans.length;
const index = EPHIST.first[endpointId];
if (index === undefined) return 'present in all ' + total + ' stored scans';
const at = EPHIST.scans[index] && EPHIST.scans[index].at;
return 'first seen in scan ' + (index + 1) + '/' + total
+ (at ? ' (' + new Date(at).toLocaleString('en-US') + ')' : '');
}
// cm:guard Kept for the panes that still cap instead of paginate โ unresolved groups by reason, and
// a page boundary through a group would split one reason across two pages.
const ROW_CAP = 400;
const SCREEN_CAP = 20;
const byId = (list) => new Map(list.map((x) => [x.id, x]));
const endpoints = byId(MAP.endpoints);
const screens = byId(MAP.screens);
const callsByEndpoint = new Map();
const callsByScreen = new Map();
for (const c of MAP.calls) {
if (!callsByEndpoint.has(c.endpointId)) callsByEndpoint.set(c.endpointId, []);
callsByEndpoint.get(c.endpointId).push(c);
if (!callsByScreen.has(c.screenId)) callsByScreen.set(c.screenId, []);
callsByScreen.get(c.screenId).push(c);
}
// cm:guard Must stay BELOW callsByEndpoint: this block is inside a browser script, so tsc and eslint
// see a string, not code โ reading the map above its own initialiser throws a TDZ ReferenceError at
// the top of the script and takes every pane on the page down with it.
const DECLARED = MAP.endpoints.filter((e) => e.source !== undefined).length;
const UNDECLARED_CALLED = MAP.endpoints.filter((e) => e.source === undefined && (callsByEndpoint.get(e.id) || []).length > 0).length;
const BE_PARTIAL = DECLARED > 0 && UNDECLARED_CALLED > DECLARED;
const HAS_BE = DECLARED > 0 && !BE_PARTIAL;
const HAS_FE = MAP.calls.length > 0;
const fieldsByEndpoint = new Map();
for (const f of MAP.fields) {
if (!fieldsByEndpoint.has(f.endpointId)) fieldsByEndpoint.set(f.endpointId, []);
fieldsByEndpoint.get(f.endpointId).push(f);
}
const alertsByEndpoint = new Map();
for (const a of ALERTS) {
if (!alertsByEndpoint.has(a.endpointId)) alertsByEndpoint.set(a.endpointId, []);
alertsByEndpoint.get(a.endpointId).push(a);
}
// cm:edge contract -> packages/cli/src/workspace/summary.ts โ same four states as endpointState there. A one-sided
// scan makes every endpoint look feOnly; painting that red invents a defect out of a missing half.
function reconOf(e) {
if (e.source === undefined) return HAS_BE ? 'feonly' : 'unpaired';
if ((callsByEndpoint.get(e.id) || []).length > 0) return 'both';
return HAS_FE ? 'uncalled' : 'unpaired';
}
const RECON_LABEL = {
both: 'both sides',
uncalled: 'no screen calls it',
feonly: 'API does not declare it',
unpaired: 'not reconciled',
};
const RECON_CLS = { both: 'd-both', uncalled: 'd-uncalled', feonly: 'd-feonly', unpaired: 'd-unpaired' };
// cm:why Each state gets a sentence, not just a colour: "feonly" is a finding a reader has to act on,
// and the action depends on WHY apiflow says it โ which the colour cannot carry.
const RECON_WHY = {
both: 'The API declares this route and screens call it. Changing it changes both sides.',
uncalled: 'The API declares this route but no screen in the scanned FE calls it. A dead-route candidate โ another client may still be calling it.',
feonly: 'The FE calls this path but the BE does not declare it. Either the path is wrong, or the route lives in another service.',
unpaired: 'Not reconciled because one side is missing. Scan the other side before concluding anything.',
};
const screensFor = (endpointId) =>
[...new Set((callsByEndpoint.get(endpointId) || []).map((c) => c.screenId))];
const state = {
section: 'overview', q: '', method: '', auth: '', recon: '', conf: '',
endpoint: null, insp: 'overview', screen: null, impQ: '',
alertKind: '', alertSev: '', unQ: '', scQ: '', cvQ: '', cvRecon: '', group: null, gEndpoint: null, page: 1, scPage: 1, alPage: 1,
};
const el = (id) => document.getElementById(id);
function h(tag, cls, text) {
const n = document.createElement(tag);
if (cls) n.className = cls;
if (text !== undefined) n.textContent = text;
return n;
}
const bestConf = (calls) => {
const rank = { exact: 0, inferred: 1, guess: 2 };
return calls.reduce((acc, c) => (rank[c.confidence] < rank[acc] ? c.confidence : acc), calls.length ? 'guess' : undefined);
};
function microBar(id) {
const r = RELIABILITY.get(id);
const wrap = h('div', 'micro');
if (!r) { wrap.title = 'no call traced yet'; return wrap; }
const total = r.exact + r.inferred + r.guess;
for (const k of ['exact', 'inferred', 'guess']) {
if (!r[k]) continue;
const seg = h('i', 'c-bg-' + k);
seg.style.width = ((r[k] / total) * 100).toFixed(2) + '%';
wrap.appendChild(seg);
}
// cm:why Title carries the COUNT, not just the split: one call at exact is not stronger evidence
// than twenty calls at 90% exact, and a bare percentage hides exactly that.
wrap.title = total + ' calls ยท exact ' + r.exact + ' ยท inferred ' + r.inferred + ' ยท guess ' + r.guess;
return wrap;
}
function fillFacet(id, label, options, value, onchange) {
const sel = el(id);
if (!sel) return;
sel.textContent = '';
const all = document.createElement('option');
all.value = '';
all.textContent = label;
sel.appendChild(all);
for (const [v, text] of options) {
const o = document.createElement('option');
o.value = v;
o.textContent = text;
sel.appendChild(o);
}
sel.value = value;
sel.onchange = () => onchange(sel.value);
}
function visibleEndpoints() {
const q = state.q.toLowerCase();
return MAP.endpoints.filter((e) => {
if (q && !(e.method + ' ' + e.path + ' ' + (e.handler || '')).toLowerCase().includes(q)) return false;
if (state.method && e.method !== state.method) return false;
if (state.auth === 'yes' && e.auth !== true) return false;
if (state.auth === 'no' && e.auth !== false) return false;
if (state.auth === 'murky' && e.auth !== undefined) return false;
if (state.recon && reconOf(e) !== state.recon) return false;
if (state.conf) {
const b = bestConf(callsByEndpoint.get(e.id) || []);
if (b !== state.conf) return false;
}
return true;
});
}
const PAGE = 50;
function kpiStrip(id) {
const box = el(id);
if (!box) return;
box.textContent = '';
const d = DIFF;
const rows = [
['endpoint', MAP.endpoints.length, d && (d.endpoints.added.length - d.endpoints.removed.length), ''],
['screens', MAP.screens.length, d && (d.screens.after - d.screens.before), ''],
['calls', MAP.calls.length, d && (d.calls.after - d.calls.before), ''],
['field', MAP.fields.length, null, ''],
['unresolved', MAP.unresolved.length, d && (d.unresolved.after - d.unresolved.before), MAP.unresolved.length ? 'alarm' : ''],
['both sides', MAP.endpoints.filter((e) => reconOf(e) === 'both').length, null, ''],
];
const SERIES_KEY = { endpoint: 'endpoints', screens: 'screens', calls: 'calls', unresolved: 'unresolved' };
for (const [lab, val, delta, cls] of rows) {
const card = h('div', 'k1 ' + cls);
card.appendChild(h('div', 'lab', lab));
card.appendChild(h('div', 'val', val.toLocaleString('en-US')));
// cm:why A delta is shown only when two scans exist โ an unchanged "โฒ 0" on a first scan reads
// as "measured, no movement" when the truth is that nothing has been measured against yet.
if (delta === null || delta === undefined || delta === 0) {
card.appendChild(h('div', 'dlt', d ? 'โ' : 'no earlier scan to compare with'));
} else {
const up = lab === 'unresolved' ? delta < 0 : delta > 0;
card.appendChild(h('div', 'dlt ' + (up ? 'up' : 'down'),
(delta > 0 ? 'โฒ ' : 'โผ ') + Math.abs(delta).toLocaleString('en-US') + ' vs last scan'));
}
const line = SERIES && SERIES[SERIES_KEY[lab]];
if (line && line.length >= 3) card.appendChild(spark(line, cls === 'alarm'));
box.appendChild(card);
}
}
// cm:why Draws the series as-is with no y-axis and no baseline at zero: this is a shape, not a
// measurement โ the number above it is the measurement, and a fake axis would invite reading values
// off 40 pixels of svg.
function spark(values, inverse) {
const w = 78;
const hgt = 16;
const min = Math.min(...values);
const max = Math.max(...values);
const span = max - min || 1;
const pts = values.map((v, i) => {
const x = (i / (values.length - 1)) * (w - 2) + 1;
const y = hgt - 1 - ((v - min) / span) * (hgt - 2);
return x.toFixed(1) + ',' + y.toFixed(1);
}).join(' ');
const rising = values[values.length - 1] > values[0];
const good = inverse ? !rising : rising;
const svg = svgEl('svg', { class: 'spark', width: w, height: hgt, viewBox: '0 0 ' + w + ' ' + hgt });
svg.appendChild(svgEl('polyline', {
points: pts, fill: 'none', 'stroke-width': '1.4', 'stroke-linejoin': 'round',
stroke: 'var(--' + (values[0] === values[values.length - 1] ? 'muted' : good ? 'exact' : 'dead') + ')',
}));
svg.setAttribute('aria-label', values.length + ' scans: ' + values.join(' โ '));
const titleEl = svgEl('title', {});
titleEl.textContent = 'last ' + values.length + ' scans: ' + values.join(' โ ');
svg.appendChild(titleEl);
return svg;
}
const FACET_GROUPS = [
{ key: 'method', title: 'method', values: () => [...new Set(MAP.endpoints.map((e) => e.method))].sort()
.map((m) => ({ v: m, label: m, test: (e) => e.method === m })) },
{ key: 'auth', title: 'auth', values: () => [
{ v: 'yes', label: 'has auth', test: (e) => e.auth === true },
{ v: 'no', label: 'no auth', test: (e) => e.auth === false },
{ v: 'murky', label: 'murky', test: (e) => e.auth === undefined },
] },
{ key: 'recon', title: 'reconciliation', values: () => Object.keys(RECON_LABEL)
.map((k) => ({ v: k, label: RECON_LABEL[k], cls: RECON_CLS[k], test: (e) => reconOf(e) === k })) },
{ key: 'conf', title: 'confidence of the calls', values: () => ['exact', 'inferred', 'guess']
.map((k) => ({ v: k, label: k, cls: 'c-bg-' + k, test: (e) => bestConf(callsByEndpoint.get(e.id) || []) === k })) },
];
// cm:why Every value carries its own count, and the count is over the WHOLE map, not the filtered
// rows: a facet whose number moves as you filter cannot tell you whether it is worth clicking.
function renderFacets() {
const box = el('f-groups');
box.textContent = '';
for (const group of FACET_GROUPS) {
const wrap = h('div', 'fg');
const head = h('h5', null, group.title);
wrap.appendChild(head);
const all = h('label', state[group.key] === '' ? 'on' : null);
const allInput = document.createElement('input');
allInput.type = 'radio';
allInput.name = 'f-' + group.key;
allInput.checked = state[group.key] === '';
allInput.onchange = () => { state[group.key] = ''; state.page = 1; render(); };
all.append(allInput, h('span', null, 'all'), h('span', 'fn', String(MAP.endpoints.length)));
wrap.appendChild(all);
for (const value of group.values()) {
const n = MAP.endpoints.filter(value.test).length;
const row = h('label', state[group.key] === value.v ? 'on' : null);
const input = document.createElement('input');
input.type = 'radio';
input.name = 'f-' + group.key;
input.checked = state[group.key] === value.v;
input.onchange = () => { state[group.key] = value.v; state.page = 1; render(); };
row.appendChild(input);
if (value.cls) row.appendChild(h('span', 'sw ' + value.cls));
row.appendChild(h('span', null, value.label));
row.appendChild(h('span', 'fn', String(n)));
wrap.appendChild(row);
}
box.appendChild(wrap);
}
el('f-reset').onclick = () => {
state.method = ''; state.auth = ''; state.recon = ''; state.conf = ''; state.q = '';
const q = el('q');
if (q) q.value = '';
state.page = 1;
render();
};
}
// cm:why One pager for every long list: three panes each dumping 600+ rows was the reason the page
// scrolled for 23 000 pixels, and three hand-rolled pagers would drift apart within a week.
function renderPager(hostId, total, key, anchorId) {
const box = el(hostId);
if (!box) return;
box.textContent = '';
const pages = Math.max(1, Math.ceil(total / PAGE));
if (state[key] > pages) state[key] = pages;
const current = state[key];
const go = (n) => {
state[key] = n;
render();
const anchor = el(anchorId);
if (anchor) anchor.scrollIntoView({ block: 'nearest' });
};
const btn = (label, n, on, disabled) => {
const b = document.createElement('button');
b.textContent = label;
if (on) b.className = 'on';
if (disabled) b.disabled = true;
else b.onclick = () => go(n);
return b;
};
box.appendChild(btn('โน', current - 1, false, current === 1));
// cm:why Shows first, last and a window around the current page โ 22 numbered buttons is not
// navigation, and dropping the last page hides how much is left.
const want = new Set([1, pages, current, current - 1, current + 1]);
let previous = 0;
for (const n of [...want].filter((n) => n >= 1 && n <= pages).sort((a, b) => a - b)) {
if (n - previous > 1) box.appendChild(h('span', 'gap', 'โฆ'));
box.appendChild(btn(String(n), n, n === current, false));
previous = n;
}
box.appendChild(btn('โบ', current + 1, false, current === pages));
box.appendChild(h('span', 'of', pages > 1 ? current + ' / ' + pages + ' trang' : ''));
}
function renderEndpoints() {
kpiStrip('ep-kpis');
renderFacets();
const rows = visibleEndpoints();
el('ep-count').textContent = rows.length.toLocaleString('en-US') + ' / '
+ MAP.endpoints.length.toLocaleString('en-US') + ' endpoint';
const from = (state.page - 1) * PAGE;
const page = rows.slice(from, from + PAGE);
// cm:why Selects the first visible row when the current selection is filtered away: an inspector
// that says "click a row" next to a full table is a third of the pane spent on an instruction.
if (state.endpoint === null || !rows.some((e) => e.id === state.endpoint)) {
state.endpoint = page.length > 0 ? page[0].id : null;
}
el('ep-range').textContent = rows.length === 0 ? 'no row matches'
: 'showing ' + (from + 1) + 'โ' + (from + page.length) + ' of ' + rows.length.toLocaleString('en-US');
const body = el('ep-rows');
body.textContent = '';
for (const e of page) {
const tr = document.createElement('tr');
if (state.endpoint === e.id) tr.className = 'on';
const verb = h('td');
verb.appendChild(h('span', 'verb ' + e.method, e.method));
tr.appendChild(verb);
// cm:why Path and handler share ONE cell on two lines: seven columns of real Laravel paths do not
// fit 740px, and a path clipped to 20 characters is a row you cannot identify at all.
// cm:guard title carries the full value on both lines, because both are clipped.
const path = h('td');
const pathText = h('div', 'mono clip', e.path);
pathText.title = e.path;
path.appendChild(pathText);
const where = e.handler
? e.handler + (e.source ? ' ยท ' + e.source.file + ':' + e.source.line : '')
: e.source ? e.source.file + ':' + e.source.line : 'the BE does not declare this route';
const sub = h('div', 'sub2 clip', where);
sub.title = where;
path.appendChild(sub);
tr.appendChild(path);
tr.appendChild(h('td', 'nowrap', e.auth === true ? 'yes' : e.auth === false ? 'NO' : '?'));
const st = h('td', 'nowrap');
st.appendChild(h('span', 'dot ' + RECON_CLS[reconOf(e)]));
st.appendChild(document.createTextNode(' ' + RECON_LABEL[reconOf(e)]));
tr.appendChild(st);
tr.appendChild(h('td', 'num', String((callsByEndpoint.get(e.id) || []).length)));
const rel = h('td');
rel.appendChild(microBar(e.id));
tr.appendChild(rel);
tr.onclick = () => { state.endpoint = e.id; render(); };
body.appendChild(tr);
}
renderPager('ep-pager', rows.length, 'page', 'ep-rows');
renderInspector();
}
const INSP_TABS = [['overview', 'Overview'], ['calls', 'Calls'], ['fields', 'Fields'], ['chain', 'Chain'], ['alerts', 'Alerts']];
function renderInspector() {
const tabs = el('insp-tabs');
const body = el('insp-body');
tabs.textContent = '';
body.textContent = '';
const e = state.endpoint ? endpoints.get(state.endpoint) : null;
if (!e) {
body.appendChild(h('p', 'empty2', 'Click a row to see the detail.'));
return;
}
for (const [id, label] of INSP_TABS) {
const t = h('span', state.insp === id ? 'on' : '', label);
t.onclick = () => { state.insp = id; renderInspector(); };
tabs.appendChild(t);
}
const calls = callsByEndpoint.get(e.id) || [];
const title = h('div', 'ihead');
title.appendChild(h('span', 'verb ' + e.method, e.method));
const titlePath = h('h4', null, e.path);
titlePath.title = e.path;
title.appendChild(titlePath);
body.appendChild(title);
if (state.insp === 'overview') {
const st = reconOf(e);
const callout = h('div', 'callout ' + RECON_CLS[st]);
callout.appendChild(h('div', 'ct', RECON_LABEL[st]));
callout.appendChild(h('div', 'cw', RECON_WHY[st]));
body.appendChild(callout);
const kv = h('div', 'kv');
const add = (k, v) => { kv.appendChild(h('span', null, k)); kv.appendChild(h('span', 'mono', v)); };
add('reconciliation', RECON_LABEL[reconOf(e)]);
add('auth', e.auth === true ? 'gated' : e.auth === false ? 'NO gate found' : 'gated but could not be classified');
add('handler', e.handler || 'โ');
add('declared at', e.source ? e.source.file + ':' + e.source.line : 'not found in the BE');
const seen = seenText(e.id);
if (seen) add('history', seen);
add('calls', String(calls.length));
add('confidence', calls.length ? bestConf(calls) + ' (best)' : 'โ');
body.appendChild(kv);
const r = RELIABILITY.get(e.id);
if (r) {
body.appendChild(h('p', 'sub2', 'evidence spread: exact ' + r.exact + ' ยท inferred ' + r.inferred + ' ยท guess ' + r.guess));
body.appendChild(microBar(e.id));
}
const mine = alertsByEndpoint.get(e.id) || [];
for (const a of mine) {
const p = h('p', 'sub2');
p.appendChild(h('span', 'badge ' + a.severity, a.kind));
p.appendChild(document.createTextNode(' ' + a.detail));
body.appendChild(p);
}
const go = h('button', 'btn primary wide2', calls.length
? 'See ' + calls.length + ' calls reaching ' + (screensFor(e.id).length) + ' screens โ'
: 'Open the impact pane โ');
go.onclick = () => {
state.section = 'impact';
location.hash = 'impact';
render();
};
body.appendChild(go);
return;
}
if (state.insp === 'calls') {
if (!calls.length) {
body.appendChild(h('p', 'empty2', 'No call could be traced. That is not evidence nobody calls it โ see Unresolved.'));
return;
}
for (const c of calls) {
const row = h('div', 'gb');
const line = h('div');
line.appendChild(h('span', 'badge ' + c.confidence, c.confidence));
const s = screens.get(c.screenId);
line.appendChild(document.createTextNode(' ' + (s && s.route ? s.route : (s ? s.label + ' (no route attached)' : '?'))));
row.appendChild(line);
row.appendChild(h('div', 'sub2', c.source.file + ':' + c.source.line + ' ยท qua ' + c.via));
body.appendChild(row);
}
return;
}
if (state.insp === 'fields') {
const fs = fieldsByEndpoint.get(e.id) || [];
if (!fs.length) {
body.appendChild(h('p', 'empty2', 'No field seen yet. The code may use a TS type instead of reading fields at the call site, or apiflow probe has not been run.'));
return;
}
for (const f of fs) {
const row = h('div', 'gb');
row.appendChild(h('div', 'mono', f.path + (f.type ? ' : ' + f.type : '')));
const tag = [];
if (f.declared) tag.push('code khai');
if (f.observed) tag.push('seen live by probe');
row.appendChild(h('div', 'sub2', f.kind + (tag.length ? ' ยท ' + tag.join(' ยท ') : ' ยท unclear')));
body.appendChild(row);
}
return;
}
if (state.insp === 'chain') {
const withChain = calls.filter((c) => c.chain && c.chain.length);
if (!withChain.length) {
body.appendChild(h('p', 'empty2', 'No call has a chain that reaches a screen.'));
return;
}
for (const c of withChain.slice(0, 8)) {
const s = screens.get(c.screenId);
body.appendChild(h('p', 'sub2', (s && s.route ? s.route : '?') + ' โ ' + c.confidence));
const box = h('div', 'chain');
for (const step of c.chain) {
const st = h('div', 'step' + (step.precise ? '' : ' loose'));
st.appendChild(h('span', 'role', step.role));
const t = h('div');
t.appendChild(h('div', 'mono', step.symbol));
t.appendChild(h('div', 'sub2', step.file + ':' + step.line));
st.appendChild(t);
box.appendChild(st);
}
body.appendChild(box);
}
if (withChain.length > 8) body.appendChild(h('p', 'cut', (withChain.length - 8) + ' more chains โ open the Impact tab to see them all.'));
return;
}
const mine = alertsByEndpoint.get(e.id) || [];
if (!mine.length) { body.appendChild(h('p', 'empty2', 'No alert for this endpoint.')); return; }
for (const a of mine) {
const row = h('div', 'gb');
const t = h('div');
t.appendChild(h('span', 'badge ' + a.severity, a.severity));
t.appendChild(document.createTextNode(' ' + a.kind));
row.appendChild(t);
row.appendChild(h('div', 'sub2', a.detail));
if (a.screens.length) row.appendChild(h('div', 'sub2', 'screens: ' + a.screens.join(' ยท ')));
body.appendChild(row);
}
}
`;
export const PANES_SCRIPT_2 = String.raw`
const ROLE_COLS = [['client', 'api client'], ['hook', 'hook / util'], ['component', 'component'], ['screen', 'screen']];
const COL_CAP = 14;
// cm:why Draws the edges, not four independent lists: the columns alone tell you WHICH components
// exist, never which screen each one leads to โ and that mapping is the whole answer this pane owes.
function chainGraph(chains) {
const byRole = new Map(ROLE_COLS.map(([role]) => [role, new Map()]));
const key = (step) => step.role + '|' + step.file + '|' + step.symbol;
for (const c of chains) {
for (const step of c.chain) {
const bucket = byRole.get(step.role);
if (!bucket) continue;
const k = key(step);
if (!bucket.has(k) || (!bucket.get(k).precise && step.precise)) bucket.set(k, step);
}
}
const shown = new Map();
const cut = new Map();
ROLE_COLS.forEach(([role]) => {
const all = [...byRole.get(role).values()];
cut.set(role, Math.max(0, all.length - COL_CAP));
all.slice(0, COL_CAP).forEach((step) => shown.set(key(step), step));
});
const edges = new Map();
const rank = { exact: 0, inferred: 1, guess: 2 };
for (const c of chains) {
const path = c.chain.filter((step) => shown.has(key(step)));
for (let i = 0; i + 1 < path.length; i++) {
const a = key(path[i]);
const b = key(path[i + 1]);
const id = a + '>' + b;
const loose = path[i + 1].precise === false;
const previous = edges.get(id);
if (!previous || rank[c.confidence] < rank[previous.confidence]) {
edges.set(id, { a, b, confidence: c.confidence, loose });
}
}
}
const W = 1080;
const colW = 236;
const gap = (W - colW * 4) / 3;
const xOf = (index) => index * (colW + gap);
const top = 26;
const rowH = 34;
const tallest = Math.max(...ROLE_COLS.map(([role]) => Math.min(byRole.get(role).size, COL_CAP)), 1);
const span = tallest * rowH;
const height = top + span + 12;
const pos = new Map();
ROLE_COLS.forEach(([role], index) => {
const list = [...byRole.get(role).values()].slice(0, COL_CAP);
list.forEach((step, i) => {
pos.set(key(step), { x: xOf(index), y: top + ((i + 0.5) * span) / list.length, col: index });
});
});
const svg = svgEl('svg', { class: 'chaing', viewBox: '0 0 ' + W + ' ' + height, role: 'img' });
ROLE_COLS.forEach(([role, label], index) => {
const t = svgEl('text', { x: xOf(index), y: 12, class: 'head' });
t.textContent = label + ' (' + byRole.get(role).size + ')';
svg.appendChild(t);
});
const edgeEls = [];
for (const edge of edges.values()) {
const from = pos.get(edge.a);
const to = pos.get(edge.b);
if (!from || !to) continue;
const x1 = from.x + colW;
const x2 = to.x;
const mid = (x1 + x2) / 2;
const path = svgEl('path', {
class: 'cedge c-' + edge.confidence + (edge.loose ? ' loose' : ''),
d: 'M ' + x1 + ' ' + from.y + ' C ' + mid + ' ' + from.y + ', ' + mid + ' ' + to.y + ', ' + (x2 - 5) + ' ' + to.y,
'marker-end': 'url(#arrow)',
});
path.dataset.a = edge.a;
path.dataset.b = edge.b;
svg.appendChild(path);
edgeEls.push(path);
}
const groups = new Map();
for (const [k, step] of shown) {
const at = pos.get(k);
const g = svgEl('g', { class: 'cnode' + (step.precise ? '' : ' loose') });
g.appendChild(svgEl('rect', { x: at.x, y: at.y - 13, width: colW, height: 26, rx: 7 }));
const name = svgEl('text', { x: at.x + 9, y: at.y - 1 });
name.textContent = clip(step.symbol, 26);
const where = svgEl('text', { x: at.x + 9, y: at.y + 9, class: 'sub' });
where.textContent = clip(step.file.split('/').slice(-2).join('/') + ':' + step.line, 32);
g.appendChild(name);
g.appendChild(where);
const tip = svgEl('title', {});
tip.textContent = step.symbol + '\n' + step.file + ':' + step.line
+ (step.precise ? '' : '\nthis step lost precision');
g.appendChild(tip);
g.onmouseenter = () => {
svg.classList.add('dim');
const lit = new Set([k]);
// cm:why Lights the whole reachable branch in BOTH directions, not just adjacent nodes: the
// question at a component is "which screen breaks", and that answer is two hops away.
for (let pass = 0; pass < 4; pass++) {
for (const e of edgeEls) {
if (lit.has(e.dataset.a)) lit.add(e.dataset.b);
if (lit.has(e.dataset.b)) lit.add(e.dataset.a);
}
}
for (const e of edgeEls) e.classList.toggle('lit', lit.has(e.dataset.a) && lit.has(e.dataset.b));
for (const [nk, ng] of groups) ng.classList.toggle('lit', lit.has(nk));
};
g.onmouseleave = () => {
svg.classList.remove('dim');
for (const e of edgeEls) e.classList.remove('lit');
for (const ng of groups.values()) ng.classList.remove('lit');
};
groups.set(k, g);
svg.appendChild(g);
}
const defs = svgEl('defs', {});
const marker = svgEl('marker', {
id: 'arrow', viewBox: '0 0 8 8', refX: '7', refY: '4',
markerWidth: '5', markerHeight: '5', orient: 'auto-start-reverse',
});
marker.appendChild(svgEl('path', { d: 'M 0 1 L 7 4 L 0 7 z', class: 'arrowhead' }));
defs.appendChild(marker);
svg.insertBefore(defs, svg.firstChild);
const wrap = h('div', 'chainwrap');
wrap.appendChild(svg);
const dropped = ROLE_COLS.filter(([role]) => cut.get(role) > 0)
.map(([role, label]) => cut.get(role) + ' ' + label);
if (dropped.length) {
wrap.appendChild(h('p', 'cut', 'Not drawn: ' + dropped.join(' ยท ')
+ ' โ each column draws only its first ' + COL_CAP + ' boxes.'));
}
return wrap;
}
function renderImpact() {
const pick = el('imp-pick');
const q = state.impQ.toLowerCase();
// cm:guard The selected endpoint is always in the list: capping the options silently at 300 left
// the