// shared.jsx — shared data + small components used across variations
// Globals exported at bottom of file so Babel-transpiled siblings can use them.
const CATS = ["USG", "ASG", "OOS-NSE", "OOS-BC", "OOS-BI"];
// Verbatim from /methods (the rubric section).
const CAT_META = {
ASG: {
short: "ASG",
full: "Attributed Specification Gaming",
blurb:
"The model achieves metric success through undesirable means, using identifiable features of the environment, training data, or evaluation framework that made that exploit a foreseeable outcome, enough to make the gaming plausibly explainable from the experimental setup and is inconclusive about model capabilities or general behavioural predilection.",
slug: "asg",
},
USG: {
short: "USG",
full: "Unattributed Specification Gaming",
blurb:
"The model achieves metric success through undesirable means, but no identifiable feature of the setup points overtly toward the exploit, so the behaviour can be posited to trace back to the model's capabilities or unknown background properties of the data.",
slug: "usg",
},
"OOS-NSE": {
short: "NSE",
full: "Negative Side Effects",
blurb:
"The model achieves metric success without exploiting the specification and in a way unsurprising from the set up, but its pursuit causes harms or disruptions in areas the specification does not address.",
slug: "oos-nse",
isOOS: true,
},
"OOS-BC": {
short: "BC",
full: "Benign Competence",
blurb:
"The model achieves metric success through means the developers do not consider undesirable and the behaviour is relatively innocuous.",
slug: "oos-bc",
isOOS: true,
},
"OOS-BI": {
short: "BI",
full: "Benign Incompetence",
blurb:
"The model does not achieve metric success, the system is simply failing the task with mundane effects.",
slug: "oos-bi",
isOOS: true,
},
OOS: {
short: "OOS",
full: "Out of Scope (other)",
blurb:
"This category is mostly for cases that rubric cannot be applied to the reported incident, which covers several cases: the source does not involve an AI or ML system with a learning or optimisation process (a hand-built rule system, a researcher-authored stimulus, or a dataset statistic about humans); the source is theoretical or describes an experiment cited from another paper rather than one actually run in the target paper; or the source describes the experimental apparatus or data in a way that produces no model behaviour to assess, for a few examples.",
slug: "oos",
isOOS: true,
},
};
// Convenience: turn a raw row category into its CSS slug ("asg", "oos-nse", ...).
function catSlug(c) {
return (CAT_META[c] && CAT_META[c].slug) || String(c).toLowerCase();
}
// Map short codes (NSE, BC, BI, …) back to their full CAT_META key.
const CAT_BY_SHORT = {};
for (const [key, m] of Object.entries(CAT_META)) {
if (!(m.short in CAT_BY_SHORT)) CAT_BY_SHORT[m.short] = key;
}
// Resolve any acronym string ("ASG", "NSE", "OOS-NSE", "OOS", …) to its meta,
// adding `key` (the canonical CAT_META key, e.g. "OOS-NSE").
function resolveCatMeta(code) {
if (code == null) return null;
const c = String(code).trim();
const key = CAT_META[c] ? c : CAT_BY_SHORT[c];
if (!key) return null;
return { ...CAT_META[key], key };
}
// The floating definition bubble — rendered through a portal to with
// position:fixed so it escapes every overflow:auto clip and stacking context
// (the tree's scrolling panes, table rows, etc.). It measures itself and
// flips/clamps to stay on-screen.
function AcronymTipBubble({ meta, anchorRef, visible }) {
const bubbleRef = React.useRef(null);
const [pos, setPos] = React.useState({ left: -9999, top: -9999, ready: false });
React.useLayoutEffect(() => {
if (!visible) { setPos((p) => ({ ...p, ready: false })); return; }
const a = anchorRef.current;
const b = bubbleRef.current;
if (!a || !b) return;
const ar = a.getBoundingClientRect();
const bw = b.offsetWidth;
const bh = b.offsetHeight;
const m = 8;
let left = ar.left;
if (left + bw > window.innerWidth - m) left = window.innerWidth - m - bw;
if (left < m) left = m;
let top = ar.bottom + 8; // prefer below
if (top + bh > window.innerHeight - m) { // doesn't fit below → try above
const above = ar.top - 8 - bh;
top = above >= m ? above : Math.max(m, window.innerHeight - m - bh);
}
setPos({ left, top, ready: true });
}, [visible, meta, anchorRef]);
if (!visible || typeof ReactDOM === "undefined" || !ReactDOM.createPortal) return null;
return ReactDOM.createPortal(
{meta.key}{meta.full}{meta.blurb},
document.body
);
}
// Shared open/close wiring for an acronym trigger.
function useAcroTip() {
const ref = React.useRef(null);
const [visible, setVisible] = React.useState(false);
const handlers = {
onMouseEnter: () => setVisible(true),
onMouseLeave: () => setVisible(false),
onFocus: () => setVisible(true),
onBlur: () => setVisible(false),
};
return { ref, visible, handlers };
}
// Generic hover tooltip: portals arbitrary `children` to with
// position:fixed (so it sits above the nav and escapes overflow clips),
// auto-flips above/below the anchor, and clamps to the viewport edges.
function FixedTipPortal({ anchorRef, visible, children, className = "", prefer = "below", gap = 8 }) {
const ref = React.useRef(null);
const [pos, setPos] = React.useState({ left: -9999, top: -9999, ready: false });
React.useLayoutEffect(() => {
if (!visible) { setPos((p) => ({ ...p, ready: false })); return; }
const a = anchorRef.current;
const b = ref.current;
if (!a || !b) return;
const ar = a.getBoundingClientRect();
const bw = b.offsetWidth;
const bh = b.offsetHeight;
const m = 8;
let left = ar.left + ar.width / 2 - bw / 2; // centre on the anchor
if (left + bw > window.innerWidth - m) left = window.innerWidth - m - bw;
if (left < m) left = m;
const below = ar.bottom + gap;
const above = ar.top - gap - bh;
let top;
if (prefer === "above") {
top = above >= m ? above : (below + bh <= window.innerHeight - m ? below : Math.max(m, window.innerHeight - m - bh));
} else {
top = below + bh <= window.innerHeight - m ? below : (above >= m ? above : Math.max(m, window.innerHeight - m - bh));
}
setPos({ left, top, ready: true });
}, [visible, prefer, gap]);
if (!visible || typeof ReactDOM === "undefined" || !ReactDOM.createPortal) return null;
return ReactDOM.createPortal(
{children}
,
document.body
);
}
function AcronymTip({ code, children, underline = true, className = "", style }) {
const meta = resolveCatMeta(code);
const { ref, visible, handlers } = useAcroTip();
if (!meta) return {children != null ? children : code};
const cls = "cs-acro" + (underline ? " cs-acro--text" : "") + (className ? " " + className : "");
return (
{children != null ? children : meta.short}
);
}
// A category badge that carries its own definition tooltip. Drop-in replacement
// for `{cat}`.
function CatBadge({ cat, label, className = "", style }) {
const meta = resolveCatMeta(cat);
const { ref, visible, handlers } = useAcroTip();
const slug = meta ? meta.slug : String(cat).toLowerCase();
const text = label != null ? label : cat;
const cls = "cat-badge cs-acro " + slug + (className ? " " + className : "");
return (
{text}
{meta && }
);
}
// Build an href that carries ?forceMobile=1 across pages when it's active, so
// the mobile preview stays in mobile mode while navigating between pages.
function withMobileParam(href) {
try {
if (new URLSearchParams(window.location.search).get("forceMobile") === "1") {
return href + (href.includes("?") ? "&" : "?") + "forceMobile=1";
}
} catch (e) {}
return href;
}
// Paths between pages in the built Astro site.
const CS_LANDING_HREF = "/";
// Permanent, shareable per-incident URL — keyed on incident_id ONLY (ids are
// stable across renames and data updates, so shared links never break).
function csPermalink(id) { return "/e/" + encodeURIComponent(id); }
function TopNav({ active, view, onViewChange }) {
// active: one of incidents / results / methods / glossary / about
// view: optional "tree" / "dashboard" — when set, the INCIDENTS slot is
// replaced by two view-switcher items.
const link = (name, key, href, sep) => (
{name}
{sep && |}
);
const viewLink = (label, key) => (
{
e.preventDefault();
if (onViewChange) onViewChange(key);
}}
>
{label}
);
return (
);
}
// Responsive hook: true on phones (≤bp) or when ?forceMobile=1 is set (so the
// mobile layout can be previewed at any width). Drives an `is-narrow` class.
function useIsNarrow(bp = 760) {
const get = () => {
try {
if (new URLSearchParams(window.location.search).get("forceMobile") === "1") return true;
} catch (e) {}
return typeof window !== "undefined" && window.innerWidth <= bp;
};
const [narrow, setNarrow] = React.useState(get);
React.useEffect(() => {
const on = () => setNarrow(get());
window.addEventListener("resize", on);
return () => window.removeEventListener("resize", on);
}, []);
return narrow;
}
// Tiny hook: load + cache incidents.json.
// Returns the data (null while loading). On failure it sets useIncidentsError
// and stops loading; retryIncidents() starts a fresh attempt.
function useIncidents() {
const [data, setData] = React.useState(window.__INCIDENTS__ || null);
const [error, setError] = React.useState(null);
const [attempt, setAttempt] = React.useState(0);
React.useEffect(() => {
if (window.__INCIDENTS__) {
setData(window.__INCIDENTS__);
return;
}
let cancelled = false;
setError(null);
fetch("/incidents.json")
.then((r) => {
if (!r.ok) throw new Error("HTTP " + r.status);
return r.json();
})
.then((d) => {
if (!d || !Array.isArray(d.lm) || !Array.isArray(d.non_lm)) {
throw new Error("unexpected data shape");
}
if (cancelled) return;
window.__INCIDENTS__ = d;
setData(d);
})
.catch((e) => {
if (!cancelled) setError(e);
});
return () => { cancelled = true; };
}, [attempt]);
const retry = React.useCallback(() => setAttempt((n) => n + 1), []);
return { data, error, retry };
}
// Filter + sort helpers (shared logic)
function filterRows(rows, { cat, query, sort }) {
let out = rows;
if (cat && cat !== "all") out = out.filter((r) => r.category === cat);
if (query) {
const q = query.toLowerCase().trim();
out = out.filter((r) => {
const blob = [r.year, r.models, r.category, r.task, r.intended, r.actual, r.source_title]
.join(" ")
.toLowerCase();
return blob.includes(q);
});
}
if (sort) {
const dir = sort.asc ? 1 : -1;
out = [...out].sort((a, b) => {
const va = a[sort.col];
const vb = b[sort.col];
if (typeof va === "number") return (va - vb) * dir;
return String(va).localeCompare(String(vb)) * dir;
});
}
return out;
}
// Small reusable Toolbar shell — variations can drop in their own children
function Toolbar({ children }) {
return (
{children}
);
}
// Filter pills (All / ASG · USG | NSE BC BI OOS). Hovering an abbreviation
// pill reveals the rubric's verbatim definition.
function CategoryFilter({ value, onChange, counts }) {
const sgCats = CATS.filter((c) => !CAT_META[c].isOOS);
const oosCats = CATS.filter((c) => CAT_META[c].isOOS);
const Pill = ({ c }) => {
const m = CAT_META[c];
const { ref, visible, handlers } = useAcroTip();
return (
);
};
return (
{sgCats.map((c) => )}
OOS
{oosCats.map((c) => )}
);
}
function TabGroup({ value, onChange }) {
return (
);
}
function LoadError({ retry, label = "The incident data could not be loaded." }) {
return (
{label}
{retry && (
)}
);
}
function Loading({ label = "Loading the catalogue…" }) {
return (