Pages Medium
Science — Review / Survey Layout
A long-form scientific review and survey layout for the web, styled like an open-access journal article on neural operators for PDE surrogate modeling. It pairs a sticky section navigator and reading-progress bar with a lead abstract, an interactive taxonomy figure that scrolls you to the family it represents, several themed sections each carrying a sortable comparison table with check, partial, and cross capability glyphs, pull-quote callouts, boxed key-takeaways summaries, LaTeX-flavored display equations with right-aligned numbers, and a collapsible reference list with linkable DOIs.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #ffffff;
--bg-alt: #f6f8fb;
--ink: #0f1b2d;
--ink-2: #33445c;
--muted: #697892;
--accent: #1a4f8a;
--accent-d: #123a66;
--accent-50: #e9f0f9;
--teal: #0f7d78;
--teal-50: #e4f3f1;
--line: rgba(15, 27, 45, 0.12);
--line-2: rgba(15, 27, 45, 0.2);
--ok: #2f9e6f;
--warn: #c9821f;
--danger: #cf4538;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow-1: 0 1px 2px rgba(15, 27, 45, 0.05);
--shadow-2: 0 6px 24px rgba(15, 27, 45, 0.08);
--serif: "Source Serif 4", Georgia, serif;
--ui: "Inter", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.skip-link {
position: absolute;
left: -999px;
top: 8px;
background: var(--accent);
color: #fff;
padding: 8px 14px;
border-radius: var(--r-sm);
font-family: var(--ui);
z-index: 50;
}
.skip-link:focus { left: 12px; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--r-sm);
}
/* Masthead */
.masthead {
border-bottom: 1px solid var(--line);
background: var(--bg-alt);
}
.masthead-inner {
max-width: 1180px;
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.venue { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-family: var(--ui); }
.venue-mark {
font-weight: 700;
letter-spacing: 0.12em;
color: var(--accent);
font-size: 15px;
}
.venue-meta { color: var(--muted); font-size: 13px; }
.badge {
font-family: var(--ui);
font-size: 12px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
white-space: nowrap;
}
.badge-oa { background: var(--teal-50); color: var(--teal); border: 1px solid rgba(15, 125, 120, 0.25); }
/* Shell grid */
.shell {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 40px;
align-items: start;
}
/* TOC */
.toc {
position: sticky;
top: 20px;
font-family: var(--ui);
padding: 20px 0;
border-right: 1px solid var(--line);
padding-right: 20px;
}
.toc-title {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin: 0 0 12px;
font-weight: 600;
}
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li { margin: 2px 0; }
.toc-list a {
display: block;
padding: 6px 10px;
border-radius: var(--r-sm);
color: var(--ink-2);
text-decoration: none;
font-size: 14px;
border-left: 2px solid transparent;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.toc-list a:hover { background: var(--accent-50); color: var(--accent-d); }
.toc-list a.active {
background: var(--accent-50);
color: var(--accent-d);
border-left-color: var(--accent);
font-weight: 600;
}
.reading-progress {
margin-top: 16px;
height: 4px;
border-radius: 999px;
background: var(--line);
overflow: hidden;
}
.reading-progress span {
display: block;
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent), var(--teal));
transition: width 0.1s linear;
}
/* Article */
.article { padding: 28px 0 64px; min-width: 0; }
.article-kicker {
font-family: var(--ui);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 12px;
font-weight: 600;
color: var(--teal);
margin: 0 0 10px;
}
.article-title {
font-weight: 700;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.15;
margin: 0 0 18px;
letter-spacing: -0.01em;
}
.authors {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin: 0 0 10px;
padding: 0;
font-family: var(--ui);
}
.a-name { font-weight: 600; font-size: 15px; }
.authors sup { color: var(--accent); font-size: 11px; }
.affiliations {
list-style: none;
margin: 0 0 16px;
padding: 0;
font-family: var(--ui);
font-size: 13px;
color: var(--muted);
}
.affiliations sup { color: var(--accent); }
.article-doi {
font-family: var(--ui);
font-size: 13px;
color: var(--muted);
border-top: 1px solid var(--line);
padding-top: 14px;
}
.article-doi .sep { margin: 0 6px; }
.mono { font-family: var(--mono); }
/* Abstract */
.abstract {
background: var(--bg-alt);
border: 1px solid var(--line);
border-left: 3px solid var(--accent);
border-radius: var(--r-md);
padding: 22px 26px;
margin: 26px 0 8px;
}
.abstract-h {
font-family: var(--ui);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--accent-d);
margin: 0 0 10px;
}
.abstract p { margin: 0 0 12px; }
.abstract-keywords { font-family: var(--ui); font-size: 13px; color: var(--ink-2); }
.kw {
display: inline-block;
background: var(--accent-50);
color: var(--accent-d);
padding: 2px 9px;
border-radius: 999px;
font-size: 12px;
margin: 2px 3px 0 0;
}
/* Sections */
.section { padding-top: 32px; scroll-margin-top: 16px; }
.section p { color: var(--ink-2); margin: 0 0 16px; }
.section-h {
font-weight: 700;
font-size: clamp(21px, 2.6vw, 27px);
margin: 0 0 14px;
display: flex;
align-items: baseline;
gap: 12px;
letter-spacing: -0.01em;
border-bottom: 1px solid var(--line);
padding-bottom: 8px;
}
.sec-num {
font-family: var(--mono);
color: var(--accent);
font-size: 0.7em;
}
/* Inline equation variables */
.ieq { font-family: var(--serif); font-style: italic; }
.op { font-family: var(--mono); font-style: normal; }
/* Display equations */
.equation {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 16px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 18px 20px;
margin: 6px 0 20px;
}
.eq-body {
text-align: center;
font-size: 18px;
line-height: 1.8;
overflow-x: auto;
}
.eq-num { font-family: var(--mono); color: var(--muted); font-size: 14px; }
/* Figures */
.figure { margin: 8px 0 8px; }
figcaption {
font-family: var(--ui);
font-size: 13px;
color: var(--muted);
margin-top: 12px;
line-height: 1.55;
}
.fig-label { font-weight: 700; color: var(--ink); }
.fig-actions { margin: 4px 0 16px; }
/* Taxonomy diagram */
.taxonomy {
border: 1px solid var(--line);
border-radius: var(--r-lg);
background:
radial-gradient(circle at 50% 0%, var(--accent-50), transparent 60%),
var(--bg);
padding: 28px 22px 30px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.tax-root {
font-family: var(--ui);
font-weight: 700;
text-align: center;
background: var(--accent);
color: #fff;
padding: 14px 22px;
border-radius: var(--r-md);
line-height: 1.2;
box-shadow: var(--shadow-2);
position: relative;
}
.tax-root::after {
content: "";
position: absolute;
bottom: -22px;
left: 50%;
width: 2px;
height: 22px;
background: var(--line-2);
transform: translateX(-50%);
}
.tax-branches {
margin-top: 36px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
width: 100%;
}
.tax-col {
border: 1px solid var(--line);
border-top: 3px solid var(--muted);
border-radius: var(--r-md);
background: var(--bg);
padding: 14px 16px;
font-family: var(--ui);
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
position: relative;
}
.tax-col::before {
content: "";
position: absolute;
top: -19px;
left: 50%;
width: 2px;
height: 16px;
background: var(--line-2);
transform: translateX(-50%);
}
.tax-col[data-fam="spectral"] { border-top-color: var(--accent); }
.tax-col[data-fam="graph"] { border-top-color: var(--teal); }
.tax-col[data-fam="attn"] { border-top-color: var(--warn); }
.tax-col:hover, .tax-col.lit {
transform: translateY(-3px);
box-shadow: var(--shadow-2);
border-color: var(--line-2);
}
.tax-head { font-weight: 700; margin-bottom: 8px; font-size: 15px; }
.tax-col ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; }
.tax-col li { margin: 3px 0; }
.section.lit-target .section-h {
background: linear-gradient(transparent 60%, var(--accent-50) 60%);
}
/* Comparison tables */
.table-wrap {
overflow-x: auto;
border: 1px solid var(--line);
border-radius: var(--r-md);
margin: 8px 0 22px;
-webkit-overflow-scrolling: touch;
}
.cmp {
width: 100%;
border-collapse: collapse;
font-family: var(--ui);
font-size: 14px;
min-width: 540px;
}
.cmp caption {
caption-side: top;
text-align: left;
padding: 12px 14px;
font-size: 13px;
color: var(--muted);
background: var(--bg-alt);
border-bottom: 1px solid var(--line);
}
.cmp .fig-label { color: var(--ink); }
.cmp thead th {
background: var(--bg-alt);
text-align: center;
font-weight: 600;
color: var(--ink);
padding: 10px 12px;
border-bottom: 1px solid var(--line-2);
vertical-align: bottom;
font-size: 13px;
}
.cmp thead th:first-child { text-align: left; }
.cmp .unit { font-family: var(--mono); font-weight: 400; color: var(--muted); font-size: 11px; }
.cmp tbody th[scope="row"] {
text-align: left;
font-weight: 600;
padding: 11px 12px;
white-space: nowrap;
}
.cmp td {
text-align: center;
padding: 11px 12px;
border-top: 1px solid var(--line);
}
.cmp tbody tr:hover { background: var(--accent-50); }
.cmp tbody th { border-top: 1px solid var(--line); }
.num { color: var(--ink); }
.sortable { cursor: pointer; user-select: none; position: relative; }
.sortable:hover { color: var(--accent); }
.sortable.sorted-asc::after { content: " \25B4"; color: var(--accent); }
.sortable.sorted-desc::after { content: " \25BE"; color: var(--accent); }
/* Glyphs */
.g {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.g-yes { background: rgba(47, 158, 111, 0.14); color: var(--ok); }
.g-part { background: rgba(201, 130, 31, 0.16); color: var(--warn); }
.g-no { background: rgba(207, 69, 56, 0.12); color: var(--danger); }
/* Pull quote */
.pullquote {
margin: 8px 0 22px;
padding: 4px 0 4px 22px;
border-left: 4px solid var(--teal);
}
.pullquote p {
font-style: italic;
font-size: clamp(19px, 2.4vw, 24px);
line-height: 1.4;
color: var(--ink);
margin: 0;
}
/* Takeaways box */
.takeaways {
background: var(--teal-50);
border: 1px solid rgba(15, 125, 120, 0.25);
border-radius: var(--r-md);
padding: 18px 22px;
margin: 6px 0 8px;
}
.takeaways h3 {
font-family: var(--ui);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--teal);
margin: 0 0 10px;
}
.takeaways ul { margin: 0; padding-left: 20px; }
.takeaways li { color: var(--ink-2); margin: 6px 0; font-size: 15px; }
/* References */
.references { padding-top: 36px; }
.ref-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ref-head .section-h { border: 0; margin: 0; padding: 0; }
.ref-list {
font-family: var(--ui);
font-size: 14px;
color: var(--ink-2);
line-height: 1.55;
margin: 18px 0 0;
padding-left: 24px;
}
.ref-list li {
margin: 12px 0;
padding-left: 6px;
scroll-margin-top: 16px;
}
.ref-list li:target {
background: var(--accent-50);
border-radius: var(--r-sm);
outline: 2px solid var(--accent);
outline-offset: 4px;
}
.ref-authors { font-weight: 600; color: var(--ink); }
/* Buttons */
.btn, .btn-link {
font-family: var(--ui);
cursor: pointer;
border: 1px solid var(--line-2);
background: var(--bg);
color: var(--ink);
padding: 8px 14px;
border-radius: var(--r-sm);
font-size: 13px;
font-weight: 600;
transition: background 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--accent-50); border-color: var(--accent); color: var(--accent-d); }
.btn.ghost { background: transparent; }
.btn .caret { display: inline-block; transition: transform 0.2s; }
.btn[aria-expanded="true"] .caret { transform: rotate(90deg); }
.btn-link {
border: 0;
background: none;
color: var(--accent);
padding: 0;
text-decoration: underline;
font-size: 13px;
}
.btn-link:hover { color: var(--accent-d); }
.article-foot {
margin-top: 48px;
border-top: 1px solid var(--line);
padding-top: 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-family: var(--ui);
font-size: 13px;
color: var(--muted);
}
/* Toast */
.toast {
position: fixed;
bottom: 24px;
left: 50%;
transform: translate(-50%, 20px);
background: var(--ink);
color: #fff;
font-family: var(--ui);
font-size: 14px;
padding: 11px 18px;
border-radius: var(--r-md);
box-shadow: var(--shadow-2);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
z-index: 60;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* Responsive */
@media (max-width: 920px) {
.shell { grid-template-columns: 1fr; gap: 0; }
.toc {
position: static;
border-right: 0;
border-bottom: 1px solid var(--line);
padding-right: 0;
padding-bottom: 16px;
}
.toc-list { display: flex; flex-wrap: wrap; gap: 4px; }
.toc-list a { border-left: 0; border-bottom: 2px solid transparent; }
.toc-list a.active { border-left: 0; border-bottom-color: var(--accent); }
.reading-progress { display: none; }
}
@media (max-width: 640px) {
body { font-size: 16px; }
.shell, .masthead-inner { padding-left: 16px; padding-right: 16px; }
.tax-branches { grid-template-columns: 1fr; gap: 22px; }
.tax-col::before { display: none; }
.abstract { padding: 18px; }
.equation { grid-template-columns: 1fr; gap: 4px; }
.eq-num { text-align: right; }
.eq-body { font-size: 16px; }
.pullquote p { font-size: 19px; }
.article-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; }
}(function () {
"use strict";
/* ---------- Toast helper ---------- */
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
clearTimeout(toastTimer);
toastTimer = setTimeout(function () {
toastEl.classList.remove("show");
}, 2200);
}
/* ---------- Scroll spy: highlight active TOC link + reading progress ---------- */
var tocLinks = Array.prototype.slice.call(
document.querySelectorAll("#tocList a")
);
var sections = tocLinks
.map(function (a) {
return document.getElementById(a.getAttribute("data-target"));
})
.filter(Boolean);
var progressFill = document.getElementById("progressFill");
function onScroll() {
var scrollPos = window.scrollY + 120;
var current = sections[0];
for (var i = 0; i < sections.length; i++) {
if (sections[i].offsetTop <= scrollPos) current = sections[i];
}
tocLinks.forEach(function (a) {
a.classList.toggle(
"active",
current && a.getAttribute("data-target") === current.id
);
});
if (progressFill) {
var docH =
document.documentElement.scrollHeight - window.innerHeight;
var pct = docH > 0 ? (window.scrollY / docH) * 100 : 0;
progressFill.style.width = Math.min(100, Math.max(0, pct)) + "%";
}
}
var rafPending = false;
window.addEventListener(
"scroll",
function () {
if (rafPending) return;
rafPending = true;
requestAnimationFrame(function () {
onScroll();
rafPending = false;
});
},
{ passive: true }
);
onScroll();
/* ---------- Taxonomy figure -> section linking ---------- */
var famToSection = {
spectral: "spectral",
graph: "graph",
attn: "transformer",
};
var taxCols = Array.prototype.slice.call(
document.querySelectorAll(".tax-col")
);
function clearLit() {
taxCols.forEach(function (c) {
c.classList.remove("lit");
});
document.querySelectorAll(".section.lit-target").forEach(function (s) {
s.classList.remove("lit-target");
});
}
taxCols.forEach(function (col) {
col.setAttribute("tabindex", "0");
col.setAttribute("role", "button");
var fam = col.getAttribute("data-fam");
var label = col.querySelector(".tax-head").textContent;
col.setAttribute("aria-label", "Jump to " + label + " section");
function activate() {
clearLit();
col.classList.add("lit");
var sec = document.getElementById(famToSection[fam]);
if (sec) {
sec.classList.add("lit-target");
sec.scrollIntoView({ behavior: "smooth", block: "start" });
toast("Jumped to " + label + " operators");
}
}
col.addEventListener("click", activate);
col.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
activate();
}
});
});
var resetTax = document.getElementById("resetTax");
if (resetTax) {
resetTax.addEventListener("click", function () {
clearLit();
toast("Figure highlight cleared");
});
}
/* ---------- Sortable overview table ---------- */
var table = document.getElementById("overviewTable");
if (table) {
var tbody = table.tBodies[0];
var headers = Array.prototype.slice.call(
table.querySelectorAll("th.sortable")
);
var sortState = {};
headers.forEach(function (th) {
th.setAttribute("tabindex", "0");
th.setAttribute("role", "button");
function doSort() {
var key = th.getAttribute("data-key");
var asc = sortState[key] !== "asc";
sortState = {};
sortState[key] = asc ? "asc" : "desc";
headers.forEach(function (h) {
h.classList.remove("sorted-asc", "sorted-desc");
});
th.classList.add(asc ? "sorted-asc" : "sorted-desc");
var rows = Array.prototype.slice.call(tbody.rows);
rows.sort(function (a, b) {
var av = a.getAttribute("data-" + key);
var bv = b.getAttribute("data-" + key);
var an = parseFloat(av);
var bn = parseFloat(bv);
var cmp;
if (!isNaN(an) && !isNaN(bn)) cmp = an - bn;
else cmp = String(av).localeCompare(String(bv));
return asc ? cmp : -cmp;
});
rows.forEach(function (r) {
tbody.appendChild(r);
});
toast(
"Sorted by " +
th.textContent.replace(/\s+/g, " ").trim() +
(asc ? " (asc)" : " (desc)")
);
}
th.addEventListener("click", doSort);
th.addEventListener("keydown", function (e) {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
doSort();
}
});
});
}
/* ---------- Collapsible references ---------- */
var toggleRefs = document.getElementById("toggleRefs");
var refList = document.getElementById("refList");
if (toggleRefs && refList) {
toggleRefs.addEventListener("click", function () {
var open = refList.hasAttribute("hidden");
if (open) {
refList.removeAttribute("hidden");
toggleRefs.setAttribute("aria-expanded", "true");
toggleRefs.firstChild.textContent = "Hide references ";
} else {
refList.setAttribute("hidden", "");
toggleRefs.setAttribute("aria-expanded", "false");
toggleRefs.firstChild.textContent = "Show references ";
}
});
}
/* ---------- Back to top ---------- */
var toTop = document.getElementById("toTop");
if (toTop) {
toTop.addEventListener("click", function () {
window.scrollTo({ top: 0, behavior: "smooth" });
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>A Survey of Neural Operators for PDE Surrogate Modeling</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#abstract">Skip to content</a>
<header class="masthead" role="banner">
<div class="masthead-inner">
<div class="venue">
<span class="venue-mark">JCSM</span>
<span class="venue-meta">Journal of Computational Surrogate Modeling · Vol. 14, No. 3 · pp. 412–478</span>
</div>
<span class="badge badge-oa" aria-label="Open access">Open Access</span>
</div>
</header>
<div class="shell">
<!-- Sticky section nav -->
<nav class="toc" id="toc" aria-label="Section navigation">
<p class="toc-title">On this page</p>
<ol class="toc-list" id="tocList">
<li><a href="#abstract" data-target="abstract">Abstract</a></li>
<li><a href="#intro" data-target="intro">1. Introduction</a></li>
<li><a href="#taxonomy" data-target="taxonomy">2. Taxonomy of Methods</a></li>
<li><a href="#spectral" data-target="spectral">3. Spectral Operators</a></li>
<li><a href="#graph" data-target="graph">4. Graph & Mesh Methods</a></li>
<li><a href="#transformer" data-target="transformer">5. Attention Operators</a></li>
<li><a href="#discussion" data-target="discussion">6. Open Challenges</a></li>
<li><a href="#references" data-target="references">References</a></li>
</ol>
<div class="reading-progress" aria-hidden="true"><span id="progressFill"></span></div>
</nav>
<main class="article" id="top">
<!-- Lead -->
<header class="article-head">
<p class="article-kicker">Review Article · Machine Learning for Physics</p>
<h1 class="article-title">Neural Operators for PDE Surrogate Modeling: A Comparative Survey</h1>
<ul class="authors" aria-label="Authors">
<li><span class="a-name">Mira K. Holloway</span><sup>1</sup></li>
<li><span class="a-name">Tomás Renouf</span><sup>1,2</sup></li>
<li><span class="a-name">Aiko Vendel</span><sup>2</sup></li>
<li><span class="a-name">D. R. Castellano</span><sup>3</sup></li>
</ul>
<ol class="affiliations">
<li><sup>1</sup> Institute for Continuum Computation, Verlund University</li>
<li><sup>2</sup> Centre for Scientific Machine Learning, ETH Aldemar</li>
<li><sup>3</sup> Marrow National Laboratory, Applied Mathematics Division</li>
</ol>
<p class="article-doi">
<span class="mono">DOI: 10.48211/jcsm.2026.0143</span>
<span class="sep">·</span>
Received 14 Jan 2026 <span class="sep">·</span> Accepted 02 May 2026 <span class="sep">·</span> Published 15 Jun 2026
</p>
</header>
<section id="abstract" class="abstract" aria-labelledby="abstract-h">
<h2 id="abstract-h" class="abstract-h">Abstract</h2>
<p>Neural operators learn mappings between function spaces and have emerged as fast surrogates for partial differential equation (PDE) solvers across fluid dynamics, electromagnetics, and climate modeling. This survey organizes the field into three families — <em>spectral</em>, <em>graph/mesh</em>, and <em>attention-based</em> operators — and compares them along discretization invariance, resolution generalization, training cost, and uncertainty quantification. We synthesize results from 84 fictional benchmark studies, identify recurring failure modes on multiscale problems, and outline open challenges in long-horizon rollout stability.</p>
<p class="abstract-keywords"><strong>Keywords:</strong> <span class="kw">neural operators</span> <span class="kw">surrogate modeling</span> <span class="kw">spectral methods</span> <span class="kw">PDE</span> <span class="kw">resolution invariance</span></p>
</section>
<!-- Section 1 -->
<section id="intro" class="section" aria-labelledby="intro-h">
<h2 id="intro-h" class="section-h"><span class="sec-num">1</span> Introduction</h2>
<p>Classical numerical solvers discretize a domain and march a fixed mesh forward in time, paying a steep cost when the same family of equations must be solved thousands of times during design optimization or data assimilation. <em>Neural operators</em> instead learn the solution operator <span class="ieq">G</span> directly, so that a single forward pass approximates the map from input fields (initial conditions, coefficients, boundary data) to the solution field.</p>
<p>The defining promise is <em>discretization invariance</em>: a model trained at one resolution should evaluate consistently at another. Formally, given an input function <span class="ieq">a</span> and target <span class="ieq">u</span>, the operator is approximated as</p>
<div class="equation" role="figure" aria-label="Operator learning objective">
<div class="eq-body"><span class="ieq">u</span>(<span class="ieq">x</span>) ≈ <span class="ieq">G</span><sub>θ</sub>(<span class="ieq">a</span>)(<span class="ieq">x</span>) = ∫<sub>D</sub> <span class="op">κ</span><sub>θ</sub>(<span class="ieq">x</span>, <span class="ieq">y</span>) <span class="ieq">a</span>(<span class="ieq">y</span>) d<span class="ieq">y</span>,</div>
<div class="eq-num">(1)</div>
</div>
<p>where <span class="ieq">κ</span><sub>θ</sub> is a learned kernel and <span class="ieq">D</span> the spatial domain. Families of methods differ chiefly in how this integral kernel is parameterized — in the Fourier domain, on a graph, or through attention. Figure 1 organizes the landscape we survey.</p>
<figure class="figure" id="fig-taxonomy">
<div class="taxonomy" role="img" aria-label="Taxonomy diagram of neural operator families branching from a root node into spectral, graph/mesh, and attention families, each with representative methods.">
<div class="tax-root">Neural<br>Operators</div>
<div class="tax-branches">
<div class="tax-col" data-fam="spectral">
<div class="tax-head">Spectral</div>
<ul><li>FNO</li><li>F-FNO</li><li>SpecBoost</li></ul>
</div>
<div class="tax-col" data-fam="graph">
<div class="tax-head">Graph / Mesh</div>
<ul><li>GNO</li><li>MeshGraphNet</li><li>U-Mesh</li></ul>
</div>
<div class="tax-col" data-fam="attn">
<div class="tax-head">Attention</div>
<ul><li>Galerkin-T</li><li>OFormer</li><li>LatentTok</li></ul>
</div>
</div>
</div>
<figcaption><span class="fig-label">Figure 1.</span> Taxonomy of neural operator families surveyed in this work. Hover a family to highlight the sections that discuss it; selecting a family scrolls to the corresponding analysis.</figcaption>
</figure>
<p class="fig-actions"><button class="btn-link" id="resetTax" type="button">Clear figure highlight</button></p>
</section>
<!-- Section 2 taxonomy / overview comparison -->
<section id="taxonomy" class="section" aria-labelledby="tax-h">
<h2 id="tax-h" class="section-h"><span class="sec-num">2</span> Taxonomy of Methods</h2>
<p>Table 1 gives a high-level comparison across the three families on the properties that most affect deployment. A filled glyph (<span class="g g-yes" aria-label="yes">✓</span>) denotes strong support, a partial glyph (<span class="g g-part" aria-label="partial">▫</span>) a method-dependent or limited capability, and a cross (<span class="g g-no" aria-label="no">✗</span>) denotes weak or absent support, as reported across the surveyed studies.</p>
<div class="table-wrap" tabindex="0" role="region" aria-label="Table 1, scrollable">
<table class="cmp" id="overviewTable">
<caption><span class="fig-label">Table 1.</span> Family-level capability matrix. Click a column header to sort by that property.</caption>
<thead>
<tr>
<th scope="col" class="sortable" data-key="name">Family</th>
<th scope="col" class="sortable" data-key="disc">Discretization<br>invariant</th>
<th scope="col" class="sortable" data-key="res">Zero-shot<br>super-res</th>
<th scope="col" class="sortable" data-key="irreg">Irregular<br>geometry</th>
<th scope="col" class="sortable" data-key="uq">Built-in<br>UQ</th>
<th scope="col" class="sortable" data-key="cost">Train cost<br><span class="unit">(GPU·h)</span></th>
</tr>
</thead>
<tbody>
<tr data-name="Spectral" data-disc="2" data-res="2" data-irreg="0" data-uq="0" data-cost="38">
<th scope="row">Spectral</th>
<td><span class="g g-yes">✓</span></td>
<td><span class="g g-yes">✓</span></td>
<td><span class="g g-no">✗</span></td>
<td><span class="g g-no">✗</span></td>
<td class="mono num">38</td>
</tr>
<tr data-name="Graph / Mesh" data-disc="1" data-res="1" data-irreg="2" data-uq="1" data-cost="71">
<th scope="row">Graph / Mesh</th>
<td><span class="g g-part">▫</span></td>
<td><span class="g g-part">▫</span></td>
<td><span class="g g-yes">✓</span></td>
<td><span class="g g-part">▫</span></td>
<td class="mono num">71</td>
</tr>
<tr data-name="Attention" data-disc="1" data-res="2" data-irreg="1" data-uq="2" data-cost="124">
<th scope="row">Attention</th>
<td><span class="g g-part">▫</span></td>
<td><span class="g g-yes">✓</span></td>
<td><span class="g g-part">▫</span></td>
<td><span class="g g-yes">✓</span></td>
<td class="mono num">124</td>
</tr>
</tbody>
</table>
</div>
<aside class="takeaways" aria-label="Key takeaways for section 2">
<h3>Key takeaways</h3>
<ul>
<li>No single family dominates; the right choice is governed by geometry and uncertainty needs.</li>
<li>Spectral methods are cheapest to train but assume regular grids.</li>
<li>Attention operators offer the best uncertainty quantification at the highest compute cost.</li>
</ul>
</aside>
</section>
<!-- Section 3 spectral -->
<section id="spectral" class="section" aria-labelledby="spec-h">
<h2 id="spec-h" class="section-h"><span class="sec-num">3</span> Spectral Operators</h2>
<p>Spectral operators parameterize the kernel in the frequency domain, applying a learned multiplication after a fast transform. The Fourier Neural Operator (FNO) computes each layer as</p>
<div class="equation" role="figure" aria-label="Fourier layer update">
<div class="eq-body"><span class="ieq">v</span><sub>t+1</sub>(<span class="ieq">x</span>) = σ (<span class="ieq">W</span><span class="ieq">v</span><sub>t</sub>(<span class="ieq">x</span>) + <span class="op">ℱ</span><sup>−1</sup>(<span class="ieq">R</span><sub>θ</sub> · <span class="op">ℱ</span>(<span class="ieq">v</span><sub>t</sub>))(<span class="ieq">x</span>))</div>
<div class="eq-num">(2)</div>
</div>
<p>where <span class="op">ℱ</span> is the discrete Fourier transform and <span class="ieq">R</span><sub>θ</sub> retains only the lowest <span class="ieq">k</span><sub>max</sub> modes. This truncation yields resolution-invariant inference but limits accuracy on sharp, localized features.</p>
<blockquote class="pullquote">
<p>“Mode truncation is both the source of the spectral operator’s efficiency and the origin of its multiscale blind spot.”</p>
</blockquote>
<div class="table-wrap" tabindex="0" role="region" aria-label="Table 2, scrollable">
<table class="cmp">
<caption><span class="fig-label">Table 2.</span> Spectral methods on the fictional <span class="mono">Burgers-2D</span> benchmark (relative L<sup>2</sup> error, lower is better).</caption>
<thead>
<tr>
<th scope="col">Method</th>
<th scope="col">Res. invariant</th>
<th scope="col">Non-periodic BC</th>
<th scope="col">Rel. L<sup>2</sup> error</th>
<th scope="col">Params <span class="unit">(M)</span></th>
</tr>
</thead>
<tbody>
<tr><th scope="row">FNO</th><td><span class="g g-yes">✓</span></td><td><span class="g g-no">✗</span></td><td class="mono num">0.0182</td><td class="mono num">2.4</td></tr>
<tr><th scope="row">F-FNO</th><td><span class="g g-yes">✓</span></td><td><span class="g g-part">▫</span></td><td class="mono num">0.0114</td><td class="mono num">3.1</td></tr>
<tr><th scope="row">SpecBoost</th><td><span class="g g-yes">✓</span></td><td><span class="g g-yes">✓</span></td><td class="mono num">0.0079</td><td class="mono num">5.8</td></tr>
</tbody>
</table>
</div>
<aside class="takeaways" aria-label="Key takeaways for section 3">
<h3>Key takeaways</h3>
<ul>
<li>Spectral models excel on periodic, structured-grid problems.</li>
<li>Boundary-aware variants (SpecBoost) recover most of the error gap on non-periodic domains.</li>
<li>Parameter counts stay modest relative to other families.</li>
</ul>
</aside>
</section>
<!-- Section 4 graph -->
<section id="graph" class="section" aria-labelledby="graph-h">
<h2 id="graph-h" class="section-h"><span class="sec-num">4</span> Graph & Mesh Methods</h2>
<p>Graph neural operators discretize the kernel integral as message passing over a mesh, making them the natural choice for irregular geometries and adaptive refinement. The trade-off is a quadratic-leaning cost in neighborhood size and sensitivity to mesh quality.</p>
<blockquote class="pullquote">
<p>“When the geometry is the problem — airfoils, vasculature, fractured media — mesh-native operators are not optional, they are the baseline.”</p>
</blockquote>
<div class="table-wrap" tabindex="0" role="region" aria-label="Table 3, scrollable">
<table class="cmp">
<caption><span class="fig-label">Table 3.</span> Graph/mesh operators on the fictional <span class="mono">Aero-Mesh</span> drag-prediction suite.</caption>
<thead>
<tr>
<th scope="col">Method</th>
<th scope="col">Adaptive mesh</th>
<th scope="col">Long rollout</th>
<th scope="col">Drag MAE <span class="unit">(cts)</span></th>
<th scope="col">Inference <span class="unit">(ms)</span></th>
</tr>
</thead>
<tbody>
<tr><th scope="row">GNO</th><td><span class="g g-part">▫</span></td><td><span class="g g-no">✗</span></td><td class="mono num">7.4</td><td class="mono num">61</td></tr>
<tr><th scope="row">MeshGraphNet</th><td><span class="g g-yes">✓</span></td><td><span class="g g-part">▫</span></td><td class="mono num">4.1</td><td class="mono num">88</td></tr>
<tr><th scope="row">U-Mesh</th><td><span class="g g-yes">✓</span></td><td><span class="g g-yes">✓</span></td><td class="mono num">3.3</td><td class="mono num">52</td></tr>
</tbody>
</table>
</div>
<aside class="takeaways" aria-label="Key takeaways for section 4">
<h3>Key takeaways</h3>
<ul>
<li>Mesh-native operators handle complex geometry where spectral methods cannot.</li>
<li>Hierarchical pooling (U-Mesh) stabilizes long rollouts and cuts inference time.</li>
<li>Accuracy is tightly coupled to mesh quality and connectivity.</li>
</ul>
</aside>
</section>
<!-- Section 5 attention -->
<section id="transformer" class="section" aria-labelledby="attn-h">
<h2 id="attn-h" class="section-h"><span class="sec-num">5</span> Attention Operators</h2>
<p>Attention-based operators treat sampled points as tokens and learn the kernel through softmax or linear attention. They generalize across resolutions and naturally express probabilistic outputs, but their compute and memory budgets are the largest in the survey.</p>
<div class="equation" role="figure" aria-label="Linear attention kernel">
<div class="eq-body"><span class="ieq">G</span>(<span class="ieq">a</span>)(<span class="ieq">x</span>) = ∑<sub>j</sub> <span class="op">softmax</span><sub>j</sub> (<span class="ieq">q</span>(<span class="ieq">x</span>) · <span class="ieq">k</span>(<span class="ieq">y</span><sub>j</sub>) / √<span class="ieq">d</span>) <span class="ieq">v</span>(<span class="ieq">y</span><sub>j</sub>)</div>
<div class="eq-num">(3)</div>
</div>
<div class="table-wrap" tabindex="0" role="region" aria-label="Table 4, scrollable">
<table class="cmp">
<caption><span class="fig-label">Table 4.</span> Attention operators on the fictional <span class="mono">Climate-72</span> rollout benchmark.</caption>
<thead>
<tr>
<th scope="col">Method</th>
<th scope="col">Linear attn.</th>
<th scope="col">Calibrated UQ</th>
<th scope="col">72h CRPS</th>
<th scope="col">Mem <span class="unit">(GB)</span></th>
</tr>
</thead>
<tbody>
<tr><th scope="row">Galerkin-T</th><td><span class="g g-yes">✓</span></td><td><span class="g g-no">✗</span></td><td class="mono num">0.214</td><td class="mono num">18</td></tr>
<tr><th scope="row">OFormer</th><td><span class="g g-part">▫</span></td><td><span class="g g-part">▫</span></td><td class="mono num">0.188</td><td class="mono num">31</td></tr>
<tr><th scope="row">LatentTok</th><td><span class="g g-yes">✓</span></td><td><span class="g g-yes">✓</span></td><td class="mono num">0.161</td><td class="mono num">24</td></tr>
</tbody>
</table>
</div>
<aside class="takeaways" aria-label="Key takeaways for section 5">
<h3>Key takeaways</h3>
<ul>
<li>Attention operators lead on calibrated uncertainty and long-horizon forecasts.</li>
<li>Latent tokenization (LatentTok) tames memory while keeping calibration.</li>
<li>Compute cost remains the principal barrier to adoption.</li>
</ul>
</aside>
</section>
<!-- Section 6 discussion -->
<section id="discussion" class="section" aria-labelledby="disc-h">
<h2 id="disc-h" class="section-h"><span class="sec-num">6</span> Open Challenges</h2>
<p>Across all three families, three problems recur: long-horizon rollout drift, distribution shift between training and deployment regimes, and the absence of standardized, geometry-rich benchmarks. We argue that progress hinges on physics-consistent training objectives and shared evaluation protocols rather than on architectural novelty alone.</p>
<blockquote class="pullquote">
<p>“The field does not need a fourth family of operators so much as it needs benchmarks honest enough to tell the three apart.”</p>
</blockquote>
<aside class="takeaways" aria-label="Key takeaways for section 6">
<h3>Key takeaways</h3>
<ul>
<li>Rollout stability, not single-step accuracy, is the binding constraint.</li>
<li>Standardized geometry-rich benchmarks are the most urgent community need.</li>
<li>Physics-consistent losses outperform purely data-driven objectives under shift.</li>
</ul>
</aside>
</section>
<!-- References collapsible -->
<section id="references" class="section references" aria-labelledby="ref-h">
<div class="ref-head">
<h2 id="ref-h" class="section-h"><span class="sec-num"></span>References</h2>
<button class="btn ghost" id="toggleRefs" type="button" aria-expanded="false" aria-controls="refList">Show references <span class="caret" aria-hidden="true">▸</span></button>
</div>
<ol class="ref-list" id="refList" hidden>
<li id="r1"><span class="ref-authors">Holloway, M. K., & Renouf, T.</span> (2024). Fourier neural operators revisited. <em>J. Comput. Surrog. Model.</em>, 12(2), 88–121. <span class="mono">doi:10.48211/jcsm.2024.0088</span></li>
<li id="r2"><span class="ref-authors">Vendel, A., et al.</span> (2025). Mesh-native message passing for aerodynamic surrogates. <em>Proc. SciML</em>, 4, 311–340. <span class="mono">doi:10.5066/sciml.2025.0311</span></li>
<li id="r3"><span class="ref-authors">Castellano, D. R.</span> (2023). Attention as an integral kernel. <em>Trans. Operator Learn.</em>, 7(1), 1–29. <span class="mono">doi:10.31021/tol.2023.0001</span></li>
<li id="r4"><span class="ref-authors">Aldemar SciML Group.</span> (2026). The Climate-72 rollout benchmark. <em>Datasets in Computational Science</em>, 9, 44–67. <span class="mono">doi:10.7910/dcs.2026.0044</span></li>
<li id="r5"><span class="ref-authors">Renouf, T., & Vendel, A.</span> (2025). On calibration of probabilistic neural operators. <em>J. Comput. Surrog. Model.</em>, 13(4), 502–536. <span class="mono">doi:10.48211/jcsm.2025.0502</span></li>
<li id="r6"><span class="ref-authors">Marrow Lab Applied Math.</span> (2024). Boundary-aware spectral surrogates. <em>SIAM J. Sci. Approx.</em>, 46(3), A1100–A1132. <span class="mono">doi:10.1137/24sja1100</span></li>
</ol>
</section>
<footer class="article-foot">
<p>© 2026 Journal of Computational Surrogate Modeling. Distributed under CC BY 4.0. Article ID <span class="mono">jcsm.2026.0143</span>.</p>
<button class="btn ghost" id="toTop" type="button">Back to top ↑</button>
</footer>
</main>
</div>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Review / Survey Layout
A complete academic review-article page built for the reading patterns of a survey: a fixed left rail tracks the section you are in and fills a thin progress bar as you scroll, while the main column carries the full apparatus of a journal piece — masthead with volume and DOI, multi-author byline with affiliations, a bordered abstract with keyword chips, and numbered display equations whose variables render in italic serif and operators in mono, each tagged with a right-aligned equation number.
The article is organized as a taxonomy of three method families. Figure 1 is a CSS-drawn taxonomy tree you can click or keyboard-activate: choosing a branch highlights it, scrolls you to the matching section, and flags that section’s heading. Each themed section then presents a summary comparison table where rows are methods and columns are properties, scored with green check, amber partial, and red cross glyphs; the overview table is fully sortable by clicking any column header. Pull-quote callouts and a teal “key takeaways” box close out every section.
Interactions are vanilla JS only: a scroll-spy active-link system, accessible sortable tables, a collapsible reference list with DOI targets, smooth back-to-top, and a small toast helper that confirms each action. The layout reflows to a horizontal nav and single-column figures down to 360px, and tables scroll horizontally on narrow screens.
Illustrative UI only — fictional authors, data, and figures; not real scientific results.