// Forge — Dossier hero schematics + data loader.
// Case data is fetched at runtime from forge-portfolio-cases.json.
// The `id` field in the JSON matches the URL hash slug:
// dossier.html#tile-pipeline-rebuild
// ---------- shared frame ----------
const HeroFrame = ({ children, label, rightLabel }) => (
);
// ---------- hero · boreal canopy ----------
const HeroCanopy = () => (
{Array.from({length: 9}).map((_, i) => (
))}
{[[80,250],[180,236],[280,224],[380,214],[490,206],[600,200],[720,196],[850,190],[980,184]].map(([x,y], i) => (
))}
0 — 10 KM
);
// ---------- hero · tile pipeline ----------
const HeroTiles = () => (
{(() => {
const out = [];
for (let lvl = 0; lvl < 6; lvl++) {
const count = lvl + 1, size = 26, gap = 5;
const totalW = count * size + (count - 1) * gap;
const startX = 540 - totalW / 2;
const y = 48 + lvl * 32;
for (let i = 0; i < count; i++) {
const isHot = lvl === 2 && i === 1;
out.push(
);
}
}
return out;
})()}
{[0,1,2,3,4,5].map((lvl, i) => (
Z = {4 + lvl}
))}
CACHED TILE
{[
[60, 'POSTGIS'],
[310, 'ST_AsMVT'],
[560, 'BLOB CACHE'],
[820, 'MAPLIBRE'],
].map(([x, label], i, arr) => (
{label}
{i < arr.length - 1 && (
)}
))}
);
// ---------- hero · DL road extraction benchmark ----------
const HeroBench = () => {
let s = 7;
const r = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
const drawNetwork = (cx, ox, oy, color, noise, strokeW) => {
const segs = [
[10, 30, 200, 50], [40, 80, 210, 70], [10, 120, 180, 130],
[60, 30, 90, 130], [130, 50, 160, 140], [180, 60, 200, 150],
];
return segs.map(([x1,y1,x2,y2], i) => {
if (noise > 0.6 && i === 2) return null;
if (noise > 0.4 && i === 5) return null;
const dx1 = (r() - 0.5) * noise * 8, dy1 = (r() - 0.5) * noise * 8;
const dx2 = (r() - 0.5) * noise * 8, dy2 = (r() - 0.5) * noise * 8;
return ;
}).filter(Boolean);
};
const Method = ({ x, title, code, accent, noise, f1, apls }) => (
{Array.from({length: 12}).map((_, i) => (
))}
{drawNetwork(x, x + 10, 70, accent, noise, 1.3)}
{title}
{code}
F1
{f1}
APLS
{apls}
);
return (
SAME 50-CM IMAGERY · ~12,684 KM² · ~28,060 KM ROADS
);
};
// ---------- hero · rangers patrol ----------
const HeroField = () => (
{[[200,130],[360,178],[560,188],[760,174],[700,252],[460,224],[280,196]].map(([x,y], i) => (
{String(i+1).padStart(2,'0')}
))}
N
PATROL CYCLE · 3–10 DAYS
);
// ---------- hero · wastewater hydrography ----------
const HeroHydro = () => (
{[[120,178],[228,200],[290,206],[378,196],[460,202],[540,210],[620,212],[730,222],[830,226],[930,222]].map(([x,y], i) => (
))}
DISCHARGE EVENT
HYDRO SEGMENT
);
// ---------- hero · discharge dashboards (k-032) ----------
const HeroDashboards = () => {
const p1 = { x: 36, y: 44, w: 318, h: 198 };
const p2 = { x: 368, y: 44, w: 318, h: 198 };
const p3 = { x: 700, y: 44, w: 344, h: 198 };
const barBaseline = p1.y + p1.h - 24;
const barHeights = [54, 72, 94, 136, 88, 62];
const barW = 32, barSpacing = 46, barStart = p1.x + 32;
const pts = [
[p2.x + 28, p2.y + 158],
[p2.x + 74, p2.y + 144],
[p2.x + 120, p2.y + 120],
[p2.x + 166, p2.y + 112],
[p2.x + 212, p2.y + 98 ],
[p2.x + 258, p2.y + 108],
[p2.x + 290, p2.y + 118],
];
const baseLine = p2.y + p2.h - 32;
const sevs = [
['ST-LAURENT', 'MODERATE', false],
['RICHELIEU', 'SEVERE', true ],
['CHAUDIÈRE', 'MINOR', false],
['YAMASKA', 'MODERATE', false],
['OUTAOUAIS', 'SEVERE', true ],
];
const sevRowH = (p3.h - 32) / sevs.length;
const pipeY = 278;
const nodes = [
[100, 'POSTGIS', false],
[370, 'POWER QUERY', false],
[650, 'POWER BI SERVICE', true ],
[920, 'PARTNERS', false],
];
return (
{/* Panel 1 – BY MUNICIPALITY */}
BY MUNICIPALITY
{barHeights.map((h, i) => (
))}
{/* Panel 2 – BY WATERWAY */}
BY WATERWAY
`${x},${y}`).join(' ')}
fill="none" stroke="#e8623a" strokeWidth="1.4"/>
{pts.map(([x, y], i) => (
))}
{/* Panel 3 – BY SEVERITY CLASS */}
BY SEVERITY CLASS
{sevs.map(([name, level, ember], i) => {
const ry = p3.y + 28 + i * sevRowH;
const sqCol = ember ? '#e8623a' : '#4a5260';
const nameCol = ember ? '#e8623a' : '#a4abb5';
const lvlCol = level === 'SEVERE' ? '#e8623a' : level === 'MINOR' ? '#4a5260' : '#a4abb5';
return (
{name}
{level}
);
})}
{/* Pipeline strip */}
{nodes.map(([x, label, hot], i, arr) => (
{label}
{i < arr.length - 1 && (
)}
))}
);
};
// ---------- hero · WISP network ----------
const HeroNetwork = () => (
{[[180,120,80],[420,160,100],[680,110,70],[340,240,84],[620,250,76],[860,200,86]].map(([x,y,r], i) => (
))}
{[[180,120,'AP-01'],[420,160,'AP-HUB'],[680,110,'AP-03'],[340,240,'AP-04'],[620,250,'AP-05'],[860,200,'AP-06']].map(([x,y,label], i) => (
{label === 'AP-HUB' && }
{label}
))}
2016 → 2019 · REGIONAL COVERAGE
);
// =====================================================================
// DATA LOADER
// Reads directly from window.FORGE.projects (content.js).
// All dossier content lives in the `dossier` sub-object on each project.
// =====================================================================
const HERO_MAP = {
'boreal-canopy-structure-model': HeroCanopy,
'tile-pipeline-rebuild': HeroTiles,
'deep-learning-road-extraction-benchmark': HeroBench,
'rangers-operational-capabilities': HeroField,
'wastewater-discharge-monitoring-quebec': HeroHydro,
'wastewater-discharge-dashboards': HeroDashboards,
'wisp-asset-management-network': HeroNetwork,
};
window.DOSSIER_CASES_PROMISE = Promise.resolve(
(window.FORGE.projects || []).map((p) => {
const d = p.dossier || {};
return {
slug: p.slug,
code: p.code,
year: p.year,
lab: p.lab,
title: p.title,
sector: d.sector || '',
client_type: p.client || '',
offers: p.scope ? p.scope.split(' · ') : [],
Hero: HERO_MAP[p.slug] || HeroCanopy,
problem: d.problem || '',
approach: d.approach || '',
stack: d.stack || [],
deliverables: d.deliverables || [],
data_volume: d.data_volume || '',
duration: d.duration || '',
key_metric: d.key_metric || { value: '', label: '' },
outcome: d.outcome || '',
published: d.published || null,
};
})
);