Add short descriptions for each mode
2 changed files+25−0
index.htmlmodified+8−0View file
@@ -57,6 +57,13 @@
5757 border-bottom: 1px solid var(--line);
5858 }
5959 .modes .chip { font-size: 13px; padding: 4px 12px; }
60+ .mode-desc {
61+ color: var(--ink); margin: 0 0 12px; font-size: 13.5px;
62+ padding: 10px 14px; border-radius: 6px;
63+ border-left: 3px solid var(--accent);
64+ background: color-mix(in srgb, var(--accent) 10%, var(--bg));
65+ }
66+ .mode-desc:empty { display: none; }
6067 .controls label { color: var(--ink-2); font-size: 13px; white-space: nowrap; }
6168 select, input[type="number"], button {
6269 font: inherit; font-size: 13px;
@@ -251,6 +258,7 @@
251258 Compare against uploaded data</button>
252259 <input type="file" id="cmp-file" accept=".h5" hidden>
253260 </div>
261+ <p class="mode-desc" id="mode-desc"></p>
254262 <div class="controls ctrl-group" data-group="surface">
255263 <label>reaction-diffusion model
256264 <select id="model"></select>
src/main.tsmodified+17−0View file
@@ -67,6 +67,7 @@ const elMovie = $<HTMLButtonElement>('movie');
6767 const elModeSimulate = $<HTMLButtonElement>('mode-simulate');
6868 const elModeEffort = $<HTMLButtonElement>('mode-effort');
6969 const elModeVsUpload = $<HTMLButtonElement>('mode-vs-upload');
70+const elModeDesc = $('mode-desc');
7071 const elCompareBar = $('comparebar');
7172 const elCmpNiter = $('cmp-niter');
7273 const elCmpLmax = $('cmp-lmax');
@@ -1424,10 +1425,26 @@ const MODE_GROUPS: Record<Mode, readonly GroupName[]> = {
14241425 'vs-upload': ['display', 'playback'],
14251426 };
14261427
1428+const MODE_DESCRIPTIONS: Record<Mode, string> = {
1429+ simulate:
1430+ 'This mode runs one standalone reaction-diffusion solver.',
1431+ 'compute-effort':
1432+ 'When we change the computational effort of the solver by varying solve iterations, lmax, or timestep, ' +
1433+ 'how does the solution change? Find out by running several ' +
1434+ 'so you can see how each setting trades accuracy for speed.',
1435+ 'vs-sphere': '',
1436+ 'vs-upload':
1437+ 'Load a saved reference run (an .h5 file) and run this solver to the ' +
1438+ 'same physical end time from the same initial condition, to check how ' +
1439+ 'closely it reproduces the reference. You can adjust the solver settings ' +
1440+ 'to see how they affect the outcome.',
1441+};
1442+
14271443 function setModeButtons(mode: Mode): void {
14281444 elModeSimulate.setAttribute('aria-pressed', String(mode === 'simulate'));
14291445 elModeEffort.setAttribute('aria-pressed', String(mode === 'compute-effort'));
14301446 elModeVsUpload.setAttribute('aria-pressed', String(mode === 'vs-upload'));
1447+ elModeDesc.textContent = MODE_DESCRIPTIONS[mode];
14311448 }
14321449
14331450 /** Show exactly the groups `mode` declares; hide the rest. */