Macroscope Rendering Templates

Macroscope Rendering Templates

Owner: Francois (Framework Specialist · Methodology) Authority: TFD-0024 — Rendering layer ownership Spec: SPEC.md Status: v0.1 (MET-0008, in validation)

Rendering layer of the Macroscope framework. Each HTML template binds to a data.js file (single source of truth) and produces an interactive screen view + a print-ready PDF.

Templates available

Code(s) File Section kind Notes
LANDING (niveau 1) index.html prose · card-grid DAE home — masthead + intro + sections de cartes pointant vers les registres. Bound à LANDING dans data.js.
A100 + A280 (jumelés) A100-A280-solution-impacts.html interactive-tabs · card-grid · card-grid 3-mode toggle: Cible · Impacts · Tableau
A230 (registre) A230-orientations-architecture.html card-grid search + filtres multi-axe (cat/st/phase) + tri + compteur
A230-ORI (detail) A230-ORI-detail.html prose · impact-matrix matrice couche × option, vocabulaire NEW/MOD/OUT/NONE

How to clone for a new DAE

# 1. Copy the rendering folder into the client's DAE workspace
cp -r production-lines/digital-talent/frameworks/enterprise-architecture/macroscope/templates/rendering \
      <client-workspace>/dae-NNNN/_publish/

# 2. Replace the example data.js with the real one (exported from D1)
cp <client>/data.js <client-workspace>/dae-NNNN/_publish/data.js

# 3. Open A100-A280-solution-impacts.html locally to verify
# 4. Publish via Remy's pipeline (Cloudflare Pages / JCT portal)

The example fixtures (*-data.example.js) demonstrate the data shape and serve as the regression baseline.

Data contract (cheat sheet)

const META  = { client, dae, publishedDate };
const MAP   = [{ l1, nom, caps:[{ nm, sub, app[], cmp[], change_type?, change_desc?, change_phase?, change_chg? }]}];
const PROJ  = [{ id, nm, cap, st, stL, type, impact, change, owner, deadline }];
const CHG   = [{ id, code, nm, dir, desc, ph, phEnd, projets[] }];
const DATA  = { subjects[], rel[], flows[] };
const ORI   = [{ id, nm, cat, catL, st, stL, q, ctx, href?, phase? }]; // DAE-0007 canonical schema
const SVC   = [{ nm, dec, decL, crit, cov, cons, opex }];
const PHASES= ["Stabilisation", ...];

Full contract: SPEC.md §3.

Print / PDF

Each template includes _print.css. The A100+A280 jumelé prints all 3 modes sequentially (Cible → Impacts → Tableau), one per page-break. PDF is produced by Playwright via _shared/exporters/html-to-pdf.js (pending MET-0008 task #4).

Adding a new A### code

Until the /toolkit:framework-publish skill is extracted (MET-0008 task #5):

  1. Add an entry to _catalog.js
  2. Create the HTML template alongside the existing ones
  3. Document the new section kinds (if any) in SPEC.md §5
  4. Add an example fixture <code>-data.example.js

Downstream consumers

  • Elena (Enterprise Architect) — fills in data.js for client mandates
  • Remy (Tech Doc Engineer) — publishes the rendered HTML to JCT portals (transgesco.jacksoncreektech.ca etc.)
  • Pablo (Production Line Architect) — references this layer when assembling digital talents that produce EA outputs