The full GRA6546 syllabus organised as a connected concept graph. Twelve topic clusters branch out from this centre — each cluster expands into the specific concepts, models, and regulatory frameworks you'll be tested on. Cross-cluster lines mark concepts that bridge two areas of the course.
)}
{!def && node.data.kind !== 'root' && (
A {node.data.kind === 'cluster' ? 'core topic cluster' : 'concept'} in the GRA6546 syllabus.
)}
{freq >= 2 && (
{freq >= 4
? 'Heavily tested — appears across most past exam papers'
: freq === 3
? 'Frequently tested in past exams'
: 'Appeared in multiple past exam papers'}
)}
{def && (
)}
);
}
// ── Main module ───────────────────────────────────────────────
function MindmapModule({ data, onNavigate, pendingMindmapNav }) {
const containerRef = useRef(null);
const cyRef = useRef(null);
const [mindmap, setMindmap] = useState(null);
const [loadError, setLoadError] = useState(null);
const [cyReady, setCyReady] = useState(false);
const [selectedNodeId, setSelectedNodeId] = useState(null);
const [popupPos, setPopupPos] = useState(null);
const [search, setSearch] = useState('');
// Load mindmap.json
useEffect(() => {
fetch('data/mindmap.json')
.then(r => { if (!r.ok) throw new Error('mindmap.json not found'); return r.json(); })
.then(setMindmap)
.catch(err => setLoadError(err.message));
}, []);
// Wait for Cytoscape global to be available (loaded via CDN)
useEffect(() => {
if (window.cytoscape) { setCyReady(true); return; }
let cancelled = false;
const t = setInterval(() => {
if (window.cytoscape) { setCyReady(true); clearInterval(t); }
}, 80);
return () => { cancelled = true; clearInterval(t); };
}, []);
// Build the graph
useEffect(() => {
if (!mindmap || !containerRef.current || !cyReady) return;
const cy = window.cytoscape({
container: containerRef.current,
elements: buildElements(mindmap),
style: buildStyles(),
layout: {
name: 'cose',
animate: true,
animationDuration: 900,
nodeRepulsion: () => 14000,
idealEdgeLength: () => 110,
edgeElasticity: () => 110,
gravity: 60,
nestingFactor: 1.4,
numIter: 1500,
randomize: false,
fit: true,
padding: 60,
},
wheelSensitivity: 0.22,
minZoom: 0.35,
maxZoom: 2.4,
boxSelectionEnabled: false,
autoungrabify: false,
});
cyRef.current = cy;
// Hide edges initially; cose will animate node positions into place.
// Once layout settles, fade edges in with a small stagger so the network
// "draws itself" rather than appearing as a static dump.
cy.edges().style({ opacity: 0 });
cy.one('layoutstop', () => {
cy.edges().forEach((e, i) => {
setTimeout(() => {
const targetOpacity = e.hasClass('kind-trunk') ? 0.45 : (e.hasClass('kind-cross') ? 0.42 : 0.32);
e.animate({ style: { opacity: targetOpacity } }, { duration: 420, easing: 'ease-out-cubic', queue: false });
}, i * 7);
});
});
// Node tap → focus + popup
cy.on('tap', 'node', e => {
const node = e.target;
const id = node.id();
setSelectedNodeId(prev => prev === id ? null : id);
});
// Background tap → exit
cy.on('tap', e => {
if (e.target === cy) {
setSelectedNodeId(null);
}
});
// Re-compute popup position on viewport changes (pan/zoom/resize)
const recomputePopup = () => {
const sel = cy.$('.selected');
if (!sel.length) return;
const pos = sel.renderedPosition();
const sz = sel.renderedHeight();
const containerW = containerRef.current ? containerRef.current.clientWidth : 800;
const POPUP_W = 360;
const anchorRight = pos.x + sz/2 + POPUP_W + 14 > containerW;
setPopupPos({
x: anchorRight ? pos.x - sz/2 - 14 - POPUP_W : pos.x + sz/2 + 14,
y: pos.y - sz/2,
anchorRight,
});
};
cy.on('pan zoom resize', recomputePopup);
cy.on('layoutstop', recomputePopup);
return () => { cy.destroy(); cyRef.current = null; };
}, [mindmap, cyReady]);
// Deep-link from search palette: focus a specific node by id and pan/zoom
// the viewport onto it. Re-runs when pendingMindmapNav.key bumps, even for
// the same id, and waits for cy/mindmap to be ready.
useEffect(() => {
const id = pendingMindmapNav?.id;
if (!id) return;
const cy = cyRef.current;
if (!cy) return;
const node = cy.$id(id);
if (!node || !node.length) return;
setSelectedNodeId(id);
setSearch('');
cy.animate(
{ center: { eles: node }, zoom: Math.max(cy.zoom(), 1.1) },
{ duration: 500, easing: 'ease-out-cubic' }
);
}, [pendingMindmapNav, cyReady, mindmap]);
// Apply focus mode + popup position when selection changes
useEffect(() => {
const cy = cyRef.current;
if (!cy) return;
cy.elements().removeClass('selected dimmed focused-edge');
if (selectedNodeId) {
const node = cy.$id(selectedNodeId);
if (!node.length) { setPopupPos(null); return; }
const neighborhood = node.closedNeighborhood();
cy.elements().difference(neighborhood).addClass('dimmed');
node.addClass('selected');
node.connectedEdges().intersection(neighborhood.edgesWith(neighborhood)).addClass('focused-edge');
// popup position
const pos = node.renderedPosition();
const sz = node.renderedHeight();
const containerW = containerRef.current ? containerRef.current.clientWidth : 800;
const POPUP_W = 360;
const anchorRight = pos.x + sz/2 + POPUP_W + 14 > containerW;
setPopupPos({
x: anchorRight ? pos.x - sz/2 - 14 - POPUP_W : pos.x + sz/2 + 14,
y: pos.y - sz/2,
anchorRight,
});
} else {
setPopupPos(null);
}
}, [selectedNodeId]);
// Apply search dimming
useEffect(() => {
const cy = cyRef.current;
if (!cy) return;
const q = search.trim().toLowerCase();
cy.nodes().removeClass('search-match search-dim');
if (!q) {
// Only restore non-focus-mode dimming
if (!selectedNodeId) cy.elements().removeClass('dimmed');
return;
}
if (!selectedNodeId) cy.elements().removeClass('dimmed');
const matches = cy.nodes().filter(n => n.data('label').toLowerCase().includes(q));
matches.addClass('search-match');
cy.nodes().difference(matches).addClass('dimmed');
cy.edges().addClass('dimmed');
}, [search, selectedNodeId]);
const selectedNode = useMemo(() => {
if (!mindmap || !selectedNodeId) return null;
const raw = mindmap.nodes.find(n => n.id === selectedNodeId);
if (!raw) return null;
const cluster = raw.cluster ? mindmap.clusters[raw.cluster] : null;
return {
id: raw.id,
data: {
label: raw.label,
kind: raw.kind,
cluster: raw.cluster || '',
clusterLabel: cluster ? cluster.label : '',
glossary_ref: raw.glossary_ref || '',
topic_ref: raw.topic_ref || '',
exam_frequency: raw.exam_frequency || 0,
},
};
}, [mindmap, selectedNodeId]);
function handleResetView() {
const cy = cyRef.current;
if (cy) cy.animate({ fit: { padding: 60 } }, { duration: 450, easing: 'ease-out-cubic' });
}
function handleZoomIn() {
const cy = cyRef.current;
if (cy) cy.zoom({ level: cy.zoom() * 1.25, renderedPosition: { x: containerRef.current.clientWidth/2, y: containerRef.current.clientHeight/2 } });
}
function handleZoomOut() {
const cy = cyRef.current;
if (cy) cy.zoom({ level: cy.zoom() * 0.8, renderedPosition: { x: containerRef.current.clientWidth/2, y: containerRef.current.clientHeight/2 } });
}
return (