fhirsmith 0.18.1 → 1.0.0

package/tx/html/cluster-metrics-script.liquid

@@ -0,0 +1,251 @@
+<style>
+  /* the status panel's grid (tx/html/status-panel.liquid): its six columns, two a chart */
+  .server-metrics-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin-bottom:16px; }
+  .server-metrics-chart { min-width:0; }
+  .server-metrics-chart > :first-child { font-size:12px; font-weight:600; margin:0 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+  .server-metrics-canvas { position:relative; height:200px; }
+  @media (max-width:600px) { .server-metrics-grid { grid-template-columns:minmax(0, 1fr); } }
+  .server-metrics-legend { display:flex; flex-wrap:wrap; gap:3px 14px; font:11px sans-serif; margin:10px 0 8px; }
+  .server-metrics-key { display:inline-block; width:22px; text-align:center; margin-right:4px; }
+  .server-metrics-shedding { font:11px sans-serif; margin:0 0 8px; }
+  .server-metrics-shedding::before { content:''; display:inline-block; width:14px; height:10px; margin-right:5px; vertical-align:middle;
+    border-top:2px solid #333; background:repeating-linear-gradient(135deg, #555 0 1px, transparent 1px 4px); }
+</style>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.js"></script>
+<script>
+(function() {
+  const metrics = {{ metricsJson }};
+  // Colour (by lightness, not red against green), line pattern and marker each tell the
+  // processes apart. Past eight processes only the first eight are drawn; none share a style.
+  const styles = [
+    { color:'#08306b', dash:[], point:'circle', symbol:'●' },
+    { color:'#5b9bd5', dash:[6,3], point:'rect', symbol:'■' },
+    { color:'#d98c00', dash:[2,2], point:'triangle', symbol:'▲' },
+    { color:'#6a3d9a', dash:[8,3,2,3], point:'rectRot', symbol:'◆' },
+    { color:'#9e9e9e', dash:[12,4], point:'star', symbol:'★' },
+    { color:'#8a5a00', dash:[3,5], point:'crossRot', symbol:'✕' },
+    { color:'#b4a7d6', dash:[8,2,2,2,2,2], point:'cross', symbol:'✚' },
+    { color:'#404040', dash:[4,2], point:'rectRounded', symbol:'▢' }
+  ];
+  const total = { color:'#111111', dash:[], symbol:'', width:3 };
+  // the memory guard's refusal threshold: mid grey, long dash and dot, no markers, and labelled
+  const threshold = { color:'#666666', dash:[10,3,2,3], symbol:'', width:2 };
+  const drawn = metrics.series.slice(0, styles.length);
+  const showTotal = metrics.series.length > 1;
+  // private memory (RssAnon) where the processes could read it, else (not Linux) heap change
+  const hasAnon = metrics.series.some(series => series.history.some(point => Number.isFinite(point.anon)));
+  const memoryTotal = hasAnon && metrics.total && metrics.total.history.some(point => Number.isFinite(point.anon)) ? metrics.total : null;
+  const rejectAt = hasAnon && metrics.total && Number.isFinite(metrics.total.rejectAt) && metrics.total.rejectAt > 0 ? metrics.total.rejectAt : null;
+  const memoryTitle = document.getElementById('memoryChartTitle');
+  if (memoryTitle && !hasAnon) memoryTitle.textContent = 'Heap change since start';
+
+  // the key's items: put in #serverMetricsLegend, which can be further down the page than this
+  // script (under "More" on / and /dashboard), so once the page has loaded
+  const legendItems = [];
+  function legendItem(style, text) {
+    const item = document.createElement('span');
+    const key = document.createElement('span');
+    key.className = 'server-metrics-key';
+    key.style.color = style.color;
+    key.style.borderBottom = (style.width || 2) + 'px ' + (style.dash.length ? 'dashed' : 'solid') + ' ' + style.color;
+    key.textContent = style.symbol;
+    item.appendChild(key);
+    item.appendChild(document.createTextNode(text));
+    legendItems.push(item);
+  }
+  drawn.forEach((series, i) => legendItem(styles[i], series.label + (series.status === 'ready' ? '' : ' · ' + series.status) +
+    (series.restarts ? ' · ' + series.restarts + (series.restarts === 1 ? ' restart' : ' restarts') : '')));
+  if (showTotal || memoryTotal) {
+    legendItem(total, 'Total: ' + [showTotal ? 'requests per minute' : null,
+      showTotal ? (metrics.sharedCache ? 'client concepts (one shared store, counted once)' : 'client concepts') : null,
+      memoryTotal ? (memoryTotal.group ? 'memory (the cgroup\'s private)' : 'memory (the processes\' private, summed)') : null]
+      .filter(Boolean).join(', '));
+  }
+  if (rejectAt) legendItem(threshold, 'Memory guard refuses above ' + (rejectAt / 2 ** 30).toFixed(1) + ' GB' +
+    (metrics.total.local ? (metrics.total.group ? ' (the cgroup, every process)' : ' (this process)')
+      : metrics.total.group ? ' (the cgroup)' : ' (each process)'));
+  if (metrics.series.length > drawn.length) {
+    legendItems.push(document.createTextNode((metrics.series.length - drawn.length) +
+      ' more workers are not drawn individually; the Total includes them.'));
+  }
+  function placeLegend() {
+    const legend = document.getElementById('serverMetricsLegend');
+    if (legend) legendItems.forEach(item => legend.appendChild(item));
+  }
+  // (while the page is loading, at the end, with the external requests' chart)
+  if (document.readyState !== 'loading') placeLegend();
+
+  const times = metrics.series.flatMap(series => series.history.map(point => point.time));
+  const latest = times.reduce((latest, time) => Math.max(latest, time), metrics.sampledAt);
+  const earliest = times.length ? times.reduce((earliest, time) => Math.min(earliest, time), latest) : latest - 60000;
+  // Every chart uses the same numeric time axis: each sample sits at its actual time.
+  // (at least a minute, so a new cluster's first samples don't make an axis of one instant)
+  const minTime = Math.min(earliest, latest - 60000);
+
+  // The cluster's total of a field: every process's samples summed per sample interval,
+  // counted from the earliest sample (the processes start, and so sample, seconds apart).
+  // once: the processes all report the same figure (the shared client cache), so it is taken
+  // once (the largest, the latest seen) rather than summed
+  function totalOf(field, once = false) {
+    const interval = metrics.series.map(series => series.intervalMs).find(ms => ms > 0) || 600000;
+    const points = metrics.series.flatMap(series => series.history.filter(point => Number.isFinite(point[field])));
+    const start = points.reduce((start, point) => Math.min(start, point.time), Infinity);
+    const sums = new Map();
+    const counts = new Map();
+    for (const point of points) {
+      const x = start + Math.round((point.time - start) / interval) * interval;
+      sums.set(x, once ? Math.max(sums.get(x) || 0, point[field]) : (sums.get(x) || 0) + point[field]);
+      counts.set(x, (counts.get(x) || 0) + 1);
+    }
+    const rows = [...sums].sort((a, b) => a[0] - b[0]);
+    // the newest interval, while some processes have yet to send their sample for it, would
+    // show a fall that isn't there: left off until they have
+    while (rows.length > 1 && counts.get(rows[rows.length - 1][0]) < counts.get(rows[rows.length - 2][0])) rows.pop();
+    return rows.map(([x, y]) => ({ x, y }));
+  }
+  const totalLine = data => ({ label:'Total', data, borderColor:total.color, backgroundColor:total.color,
+    borderWidth:3, pointRadius:0, pointHitRadius:5, fill:false, tension:0, spanGaps:false });
+
+  // A hatched interval means at least one memory-pressure 503 was counted in it, not that
+  // the guard refused all through it. Overlapping intervals of different processes merge.
+  const refusals = metrics.series.flatMap(series => series.history.filter(point =>
+    Number.isFinite(point.intervalStart) && point.intervalStart < point.time && point.refused > 0));
+  const windows = [];
+  refusals.map(point => [point.intervalStart, point.time]).sort((a, b) => a[0] - b[0]).forEach(window => {
+    const last = windows[windows.length - 1];
+    if (last && window[0] <= last[1]) last[1] = Math.max(last[1], window[1]);
+    else windows.push(window);
+  });
+  const notice = document.getElementById('serverMetricsShedding');
+  if (notice && refusals.length) {
+    notice.hidden = false;
+    notice.textContent = refusals.reduce((sum, point) => sum + point.refused, 0).toLocaleString() +
+      ' memory-pressure 503 refusals in view. Hatching marks the sample intervals with refusals; request lines count admitted work.';
+  }
+  const hatch = {
+    id:'memoryShedding',
+    beforeDraw(chart) {
+      if (!windows.length || !chart.chartArea) return;
+      const {ctx, chartArea:area, scales:{x}} = chart;
+      for (const [from, to] of windows) {
+        const left = Math.max(area.left, x.getPixelForValue(from)), right = Math.min(area.right, x.getPixelForValue(to));
+        if (right <= left) continue;
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(left, area.top, right - left, area.bottom - area.top);
+        ctx.clip();
+        ctx.strokeStyle = 'rgba(60,60,60,.35)';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        for (let at = left - (area.bottom - area.top); at < right; at += 6) {
+          ctx.moveTo(at, area.bottom);
+          ctx.lineTo(at + area.bottom - area.top, area.top);
+        }
+        ctx.stroke();
+        ctx.fillStyle = '#333';
+        ctx.fillRect(left, area.top, right - left, 2);
+        ctx.restore();
+      }
+    }
+  };
+
+  // until there are two samples to draw a line between, the chart says so
+  const waiting = {
+    id:'waitingForSamples',
+    afterDatasetsDraw(chart) {
+      if (!chart.chartArea || chart.data.datasets.some(d => !d.threshold && d.data.filter(p => Number.isFinite(p.y)).length > 1)) return;
+      const {ctx, chartArea:area} = chart;
+      ctx.save();
+      ctx.font = '11px sans-serif';
+      ctx.fillStyle = '#5f6368';
+      ctx.textAlign = 'center';
+      ctx.fillText('Waiting for samples', (area.left + area.right) / 2, (area.top + area.bottom) / 2);
+      ctx.restore();
+    }
+  };
+
+  // the threshold's value, written at the right end of its line
+  const thresholdLabel = {
+    id:'thresholdLabel',
+    afterDatasetsDraw(chart) {
+      const dataset = chart.data.datasets.find(d => d.threshold);
+      if (!dataset || !chart.chartArea) return;
+      const {ctx, chartArea:area, scales:{y}} = chart;
+      const at = y.getPixelForValue(dataset.data[0].y);
+      if (at < area.top || at > area.bottom) return;
+      ctx.save();
+      ctx.font = '10px sans-serif';
+      ctx.fillStyle = '#333';
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'bottom';
+      ctx.fillText('refuses above ' + (dataset.data[0].y / 1024).toFixed(1) + ' GB', area.right - 2, at - 2);
+      ctx.restore();
+    }
+  };
+
+  function formatTime(time) {
+    return new Date(time).toLocaleTimeString([], { hour:'2-digit', minute:'2-digit',
+      ...(latest - minTime < 120000 ? { second:'2-digit' } : {}) });
+  }
+  // pointRadius: bigger where the samples are few and far between (the external requests)
+  function chart(id, field, unit, divisor = 1, pointRadius = 1.5) {
+    const canvas = document.getElementById(id);
+    if (!canvas) return;
+    const datasets = drawn.map((series, i) => ({
+      label:series.label,
+      data:series.history.map(point => ({ x:point.time, y:Number.isFinite(point[field]) ? point[field] / divisor : null,
+        refused:point.refused, ext:point.ext })),
+      borderColor:styles[i].color, backgroundColor:styles[i].color + '18', borderDash:styles[i].dash,
+      pointStyle:styles[i].point, pointBackgroundColor:styles[i].color, pointRadius:pointRadius,
+      pointHitRadius:5, pointHoverRadius:4, borderWidth:1.5,
+      fill:false, tension:0, spanGaps:false
+    }));
+    if (field === 'rpm' && showTotal) datasets.push(totalLine(totalOf('rpm')));
+    if (field === 'clientConcepts' && showTotal) datasets.push(totalLine(totalOf('clientConcepts', metrics.sharedCache)));
+    if (field === 'anon' && memoryTotal) {
+      datasets.push(totalLine(memoryTotal.history.map(point => ({ x:point.time, y:Number.isFinite(point.anon) ? point.anon / divisor : null }))));
+    }
+    if (field === 'anon' && rejectAt) {
+      datasets.push({ label:'Refusal threshold', threshold:true, data:[{ x:minTime, y:rejectAt / divisor }, { x:latest, y:rejectAt / divisor }],
+        borderColor:threshold.color, backgroundColor:threshold.color, borderDash:threshold.dash, borderWidth:threshold.width,
+        pointRadius:0, pointHitRadius:5, fill:false, tension:0 });
+    }
+    new Chart(canvas, {
+      type:'line',
+      data:{ datasets },
+      options:{
+        responsive:true, maintainAspectRatio:false, animation:false,
+        scales:{
+          x:{ type:'linear', min:minTime, max:latest, ticks:{ maxTicksLimit:4, callback:formatTime, font:{ size:10 } } },
+          y:{ beginAtZero:true, ticks:{ font:{ size:10 } }, title:{ display:true, text:unit, font:{ size:10 } } }
+        },
+        plugins:{
+          legend:{ display:false },
+          tooltip:{ callbacks:{
+            title:items => items.length ? formatTime(items[0].parsed.x) : '',
+            afterLabel:item => field === 'extTat'
+              ? (item.raw.ext > 0 ? item.raw.ext.toLocaleString() + ' external ' + (item.raw.ext === 1 ? 'request' : 'requests') + ' in this sample' : '')
+              : item.raw.refused > 0
+              ? 'Memory-pressure 503s: ' + item.raw.refused.toLocaleString() + ' in this sample'
+              : ''
+          } }
+        }
+      },
+      plugins:[hatch, thresholdLabel, waiting]
+    });
+  }
+  if (hasAnon) chart('memoryChart', 'anon', 'MB private (anon)', 1024 * 1024);
+  else chart('memoryChart', 'mem', 'MB change since start', 1024 * 1024);
+  chart('tatChart', 'tat', 'ms');
+  chart('requestChart', 'rpm', 'req/min');
+  chart('clientCacheChart', 'clientConcepts', 'concepts');
+  // Separate mean and max scales keep a single long stall from flattening the mean.
+  chart('blockChart', 'block', 'ms');
+  chart('blockMaxChart', 'blockMax', 'ms');
+  // the external requests' turnaround (tx/html/external-metrics.liquid): further down the page
+  // than this script (just above Storage), so once the page has loaded
+  const drawExternal = () => chart('externalChart', 'extTat', 'seconds', 1000, 3);
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => { placeLegend(); drawExternal(); });
+  else drawExternal();
+})();
+</script>

package/tx/html/codesystem-operations.liquid

@@ -46,9 +46,9 @@
       </thead>
       <tbody id="{{ filterId }}_rows">
         <tr>
-          <td><input type="text" name="property" list="{{ filterId }}_props" size="24" autocomplete="off"/></td>
-          <td><select name="op">{{ filterOpOptions }}</select></td>
-          <td><input type="text" name="value" size="24"/></td>
+          <td><input type="text" aria-label="Property" name="property" list="{{ filterId }}_props" size="24" autocomplete="off"/></td>
+          <td><select name="op" aria-label="operator">{{ filterOpOptions }}</select></td>
+          <td><input type="text" aria-label="Value" name="value" size="24"/></td>
           <td><button type="button" class="btn btn-sm" title="Remove this filter" onclick="txFilterRemoveRow(this)">&#215;</button></td>
         </tr>
       </tbody>

package/tx/html/ecl-panel.liquid

@@ -12,7 +12,7 @@
               style="width: 90%;" autocomplete="off" placeholder="&lt; 404684003 |Clinical finding|"/></td>
       </tr>
       <tr>
-        <td>Edition: <select name="version" id="{{ eclId }}_version">{{ versionOptions }}</select>
+        <td>Edition: <select name="version" aria-label="Edition" id="{{ eclId }}_version">{{ versionOptions }}</select>
           <button type="submit" class="btn btn-sm btn-primary" id="{{ eclId }}_go">Go</button>
         </td>
       </tr>

package/tx/html/external-metrics.liquid

@@ -0,0 +1,17 @@
+{%- comment -%}
+  The external requests (server.js externalStatus): requests whose answer had to ask another
+  server (the tx module's ecosystem resolution). They take seconds, so they are kept out of the
+  turnaround time graph above and graphed here, just above Storage on / and /dashboard, when
+  there have been any in the graphs' 24 hours. The chart is drawn by the graphs' script
+  (cluster-metrics-script.liquid), from the same samples (point.ext, point.extTat), in the same
+  styles and key. `level`: the heading's level
+{%- endcomment -%}
+<section class="fs-status fs-status-external">
+  <h{{ level | default: 4 }} class="fs-status-head">External requests <span class="fs-status-meta">· {{ external.count }} in the last {{ external.span }}, average turnaround {{ external.average }}</span></h{{ level | default: 4 }}>
+  <div class="server-metrics-grid">
+    <div class="server-metrics-chart">
+      <h{{ level | plus: 1 | default: 5 }}>Turnaround Time (external)</h{{ level | plus: 1 | default: 5 }}>
+      <div class="server-metrics-canvas"><canvas id="externalChart" aria-label="Turnaround time of the requests that had to ask another server"></canvas></div>
+    </div>
+  </div>
+</section>

package/tx/html/operations-form.liquid

@@ -1,24 +1,24 @@
-<h2>Expand ValueSet</h2>
+<h3>Expand ValueSet</h3>
 <form method="get" action="ValueSet/$expand" style="margin-left: 10px; margin-top: 5px;">
   <table class="grid" cellpadding="0" cellspacing="0">
     <tr>
       <td style="position: relative;">
-        URL: <input type="text" name="url" id="vsUrlInput" size="40" autocomplete="off"/><span style="color: maroon">*</span>
+        URL: <input type="text" aria-label="URL" name="url" id="vsUrlInput" size="40" autocomplete="off"/><span style="color: maroon">*</span>
         <div id="vsUrlSuggestions" class="typeahead-suggestions" style="display:none; position:absolute; background:white; border:1px solid #ccc; max-height:200px; overflow-y:auto; z-index:1000; width:100%;"></div>
       </td>
-      <td>Version: <input type="text" name="valueSetVersion" size="10"/></td>
+      <td>Version: <input type="text" aria-label="Version" name="valueSetVersion" size="10"/></td>
     </tr>
     <tr>
-      <td>Filter: <input type="text" name="filter" size="20"/></td>
-      <td>Language: <input type="text" name="displayLanguage" size="10"/></td>
+      <td>Filter: <input type="text" aria-label="Filter" name="filter" size="20"/></td>
+      <td>Language: <input type="text" aria-label="Language" name="displayLanguage" size="10"/></td>
     </tr>
     <tr>
       <td colspan="2">
-        <input type="checkbox" name="includeDesignations" id="expand_desig" value="true"/>
+        <input type="checkbox" name="includeDesignations" aria-label="Include Designations" id="expand_desig" value="true"/>
         <label for="expand_desig">Include Designations</label>
-        <input type="checkbox" name="activeOnly" id="expand_active" value="true"/>
+        <input type="checkbox" name="activeOnly" aria-label="Active Only" id="expand_active" value="true"/>
         <label for="expand_active">Active Only</label>
-        <input type="checkbox" name="excludeNested" id="expand_excludeNested" value="true"/>
+        <input type="checkbox" name="excludeNested" aria-label="Not nested" id="expand_excludeNested" value="true"/>
         <label for="expand_excludeNested">Not nested</label>
       </td>
     </tr>
@@ -26,29 +26,29 @@
   <button type="submit" class="btn btn-sm btn-primary">Expand</button>
 </form>
 
-<h2>Validate Code</h2>
+<h3>Validate Code</h3>
 <form method="get" action="ValueSet/$validate-code" style="margin-left: 10px; margin-top: 5px;">
   <input type="hidden" name="inferSystem" id="{{ inferSystemId }}" value="true"/>
   <table class="grid" cellpadding="0" cellspacing="0">
     <tr>
       <td style="position: relative;">
-        ValueSet URL: <input type="text" name="url" id="vcVsUrlInput" size="40" autocomplete="off"/><span style="color: maroon">*</span>
+        ValueSet URL: <input type="text" aria-label="ValueSet URL" name="url" id="vcVsUrlInput" size="40" autocomplete="off"/><span style="color: maroon">*</span>
         <div id="vcVsUrlSuggestions" class="typeahead-suggestions" style="display:none; position:absolute; background:white; border:1px solid #ccc; max-height:200px; overflow-y:auto; z-index:1000; width:100%;"></div>
       </td>
-      <td>ValueSet Version: <input type="text" name="valueSetVersion" size="10"/></td>
+      <td>ValueSet Version: <input type="text" aria-label="ValueSet Version" name="valueSetVersion" size="10"/></td>
     </tr>
     <tr>
-      <td>System: <input type="text" name="system" id="{{ vcSystemId }}" size="30" onchange="updateInferSystem('{{ vcSystemId }}', '{{ inferSystemId }}')"/></td>
-      <td>Version: <input type="text" name="version" size="10"/></td>
+      <td>System: <input type="text" aria-label="System"  name="system" id="{{ vcSystemId }}" size="30" onchange="updateInferSystem('{{ vcSystemId }}', '{{ inferSystemId }}')"/></td>
+      <td>Version: <input type="text" aria-label="Version"  name="version" size="10"/></td>
     </tr>
     <tr>
-      <td>Code: <input type="text" name="code" size="20" required/><span style="color: maroon">*</span></td>
-      <td>Display: <input type="text" name="display" size="20"/></td>
+      <td>Code: <input type="text" aria-label="Code" name="code" size="20" required/><span style="color: maroon">*</span></td>
+      <td>Display: <input type="text" aria-label="Display" name="display" size="20"/></td>
     </tr>
     <tr>
-      <td>Language: <input type="text" name="displayLanguage" size="10"/></td>
+      <td>Language: <input type="text" aria-label="Language" name="displayLanguage" size="10"/></td>
       <td>
-        <input type="checkbox" name="abstract" value="true"/>
+        <input type="checkbox" aria-label="Abstract" name="abstract" value="true"/>
         <label>Abstract</label>
       </td>
     </tr>

package/tx/html/search-form.liquid

@@ -3,22 +3,22 @@
 <form method="get" id="searchForm" action="{{ baseUrl }}/CodeSystem">
 <table class="grid" cellpadding="0" cellspacing="0">
 <tr>
-<td>URL: <input type="text" name="url" size="40"/></td>
-<td>Version: <input type="text" name="version"/></td>
+<td>URL: <input type="text" aria-label="URL" name="url" size="40"/></td>
+<td>Version: <input type="text" aria-label="Version" name="version"/></td>
 </tr>
 <tr>
-<td title="Searches in name, title, description, publisher">Text: <input type="text" name="text"/></td>
-<td>Status: <select name="status" class="form-select"><option value="">(any status)</option>
+<td title="Searches in name, title, description, publisher">Text: <input type="text" aria-label="Text" name="text"/></td>
+<td>Status: <select name="status" aria-label="Status" class="form-select"><option value="">(any status)</option>
 <option value="draft">draft</option><option value="active">active</option>
 <option value="retired">retired</option><option value="unknown">unknown</option></select></td>
 </tr>
 <tr>
-<td>Language: <input type="text" name="lang" size="10"/> (ietf code)</td>
-<td>Source: <select name="source" class="form-select">{{ sourceOptions }}</select></td>
+<td>Language: <input type="text" aria-label="Language" name="lang" size="10"/> (ietf code)</td>
+<td>Source: <select name="source" aria-label="Source" class="form-select">{{ sourceOptions }}</select></td>
 </tr>
 <tr>
-<td title="CodeSystem - for supplements, value sets, and concept maps">System: <input type="text" name="system" size="40"/></td>
-<td>CS Content: <select name="content-mode" class="form-select"><option value="">(any content)</option>
+<td title="CodeSystem - for supplements, value sets, and concept maps">System: <input type="text" aria-label="System" name="system" size="40"/></td>
+<td>CS Content: <select name="content-mode" aria-label="CS Content" class="form-select"><option value="">(any content)</option>
 <option value="not-present">not-present</option><option value="example">example</option>
 <option value="fragment">fragment</option><option value="complete">complete</option>
 <option value="supplement">supplement</option></select></td>
@@ -28,9 +28,9 @@
 <input type="hidden" name="_elements" id="elementsInput" value="url,version,name,title,status,content,date" disabled/>
 
 <button type="submit" class="btn btn-primary">Search:</button>
-<input type="radio" name="mode" value="cs" checked onchange="updateSearchAction('{{ baseUrl }}')"/> CodeSystems
-<input type="radio" name="mode" value="vs" onchange="updateSearchAction('{{ baseUrl }}')"/> ValueSets
-<input type="radio" name="mode" value="cm" onchange="updateSearchAction('{{ baseUrl }}')"/> ConceptMaps
+<input type="radio" name="mode" aria-label="CodeSystems" value="cs" checked onchange="updateSearchAction('{{ baseUrl }}')"/> CodeSystems
+<input type="radio" name="mode" aria-label="ValueSets" value="vs" onchange="updateSearchAction('{{ baseUrl }}')"/> ValueSets
+<input type="radio" name="mode" aria-label="ConceptMaps" value="cm" onchange="updateSearchAction('{{ baseUrl }}')"/> ConceptMaps
 |
 <input type="checkbox" id="summaryTable" onchange="updateSummaryTable()"/> <label for="summaryTable">Summary Table</label>
 </form>

package/tx/html/status-line.liquid

@@ -0,0 +1,58 @@
+{%- comment -%}
+  The top of / and /dashboard (library/cluster-status.js, clusterSummary and processSummary):
+  one line of requests, uptime and heap, then the problems, only when there are any, each with an
+  icon and a sentence (status-tasks.liquid has the background tasks). The page's own space is what it had before the status panel: the rest is under "More".
+  Every style is under .fs-status.
+{%- endcomment -%}
+<style>
+  /* .fs-status twice: status-panel.liquid's .fs-status rules come later in the page */
+  .fs-status.fs-status-line { --fs-muted:#5f6368; --fs-rule:#e3e3e3; margin:0 0 8px; color:#202124; container-type:inline-size; }
+  .fs-status-line, .fs-status-line dt, .fs-status-line dd, .fs-status-line li, .fs-status-jobs, .fs-status-more summary {
+    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
+  /* headings that only name a section for screen readers take no space */
+  .fs-status-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); white-space:nowrap; border:0; }
+  .fs-status-strip { display:flex; flex-wrap:wrap; align-items:baseline; margin:0; padding:0; row-gap:4px; }
+  .fs-status-item { display:flex; align-items:baseline; gap:6px; padding:0 16px; border-left:1px solid #9e9e9e; line-height:24px; white-space:nowrap; }
+  .fs-status-item:first-child { padding-left:0; border-left:0; }
+  .fs-status-item dt { font-size:12px; font-weight:400; color:var(--fs-muted); margin:0; }
+  .fs-status-item dd { margin:0; font-size:13px; color:var(--fs-muted); }
+  .fs-status-item .fs-status-v { font-size:18px; font-weight:600; color:#202124; font-variant-numeric:tabular-nums; }
+  .fs-status-item .fs-status-u { margin-left:3px; }
+  .fs-status-item .fs-status-s { margin-left:6px; }
+  /* narrow, the line wraps: no rule at the start of a line */
+  @container (max-width:600px) { .fs-status-item, .fs-status-item:first-child { border-left:0; padding:0 16px 0 0; } }
+  .fs-status-problems { list-style:none; margin:6px 0 0; padding:0; }
+  .fs-status-problems li { width:fit-content; max-width:100%; box-sizing:border-box; font-size:13px; line-height:18px; padding:1px 12px 1px 8px; margin:0 0 2px;
+    border-left:4px solid #202124; background:#fff3d6; }
+  .fs-status-problems .fs-status-icon { font-weight:700; margin-right:6px; }
+  .fs-status.fs-status-jobs { --fs-muted:#5f6368; --fs-rule:#e3e3e3; margin:0 0 8px; font-size:12px; color:#202124; }
+  .fs-status-jobs-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
+  .fs-status-jobs-head > :first-child { font-size:13px; font-weight:600; margin:0; line-height:20px; }
+  .fs-status-jobs .fs-status-idle { color:var(--fs-muted); }
+  .fs-status-jobs table { border-collapse:collapse; margin:4px 0 0; }
+  .fs-status-jobs th, .fs-status-jobs td { text-align:left; padding:2px 12px 2px 0; border-bottom:1px solid var(--fs-rule); font-size:12px; line-height:1.4; vertical-align:top; }
+  .fs-status-jobs th { font-weight:600; color:var(--fs-muted); border-bottom-color:#9e9e9e; }
+  .fs-status-more { margin:0 0 8px; }
+  /* list-item: the site's CSS makes summary a block, which loses the triangle */
+  .fs-status-more > summary { display:list-item; font-size:12px; color:var(--fs-muted); cursor:pointer; line-height:20px; }
+  .fs-status-more > summary > :first-child { display:inline; font:inherit; margin:0; color:#202124; font-weight:600; }
+  .fs-status-more[open] > summary { margin-bottom:4px; }
+</style>
+<section class="fs-status fs-status-line" aria-labelledby="fs-status-line-title">
+  <h{{ level }} id="fs-status-line-title" class="fs-status-sr">Status</h{{ level }}>
+  <dl class="fs-status-strip">
+    {%- for i in line.items %}
+    <div class="fs-status-item"><dt>{{ i.label | escape }}</dt><dd><span class="fs-status-v">{{ i.value | escape }}</span>
+      {%- if i.unit %}<span class="fs-status-u">{{ i.unit | escape }}</span>{% endif %}
+      {%- if i.sub %}<span class="fs-status-s">{{ i.sub | escape }}</span>{% endif %}</dd></div>
+    {%- endfor %}
+    {%- if line.problems.size > 0 %}
+    <div class="fs-status-item"><dt>Problems</dt><dd><span class="fs-status-v"><span aria-hidden="true">⚠ </span>{{ line.problems.size }}</span></dd></div>
+    {%- endif %}
+  </dl>
+  {%- if line.problems.size > 0 %}
+  <ul class="fs-status-problems">
+    {%- for p in line.problems %}<li><span class="fs-status-icon" aria-hidden="true">⚠</span>{{ p | escape }}</li>{% endfor %}
+  </ul>
+  {%- endif %}
+</section>

package/tx/html/status-panel.liquid

@@ -0,0 +1,140 @@
+{%- comment -%}
+  The status panel under "More" on / and /dashboard (library/cluster-status.js builds `view`): a
+  header (`level`: its heading's level, 3 by default), a row of tiles, the memory meter, a row per
+  process, footnotes. Every style is under .fs-status, and
+  the graphs below share its grid (.fs-status-grid: six columns, 16 px apart).
+{%- endcomment -%}
+<style>
+  .fs-status { --fs-muted:#5f6368; --fs-rule:#e3e3e3; --fs-card:#f7f7f7; margin:24px 0 16px; color:#202124; container-type:inline-size; }
+  /* the site's body font throughout (fhir.css gives p and td their own) */
+  .fs-status, .fs-status p, .fs-status td, .fs-status th { font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
+  .fs-status .fs-status-head { font-size:18px; margin:0 0 8px; font-weight:600; }
+  /* under "More" (status-line.liquid), closer together */
+  .fs-status-more .fs-status { margin:8px 0 12px; }
+  .fs-status-more .fs-status .fs-status-head { font-size:15px; }
+  .fs-status-head .fs-status-meta { font-size:13px; font-weight:400; color:var(--fs-muted); }
+  /* six columns, or as many as there are tiles (storage), so a row is never short */
+  .fs-status-grid { display:grid; grid-template-columns:repeat(var(--fs-cols, 6), minmax(0, 1fr)); gap:16px; }
+  .fs-status-tile { background:var(--fs-card); border:1px solid var(--fs-rule); border-radius:4px; padding:8px; min-width:0; }
+  .fs-status-label { font-size:12px; color:var(--fs-muted); line-height:1.3; }
+  .fs-status-value { font-size:22px; font-weight:600; line-height:1.25; font-variant-numeric:tabular-nums; white-space:nowrap; }
+  .fs-status-unit { font-size:13px; font-weight:400; color:var(--fs-muted); margin-left:4px; }
+  .fs-status-sub { font-size:12px; color:var(--fs-muted); line-height:1.3; }
+  .fs-status-meter { margin-top:16px; }
+  .fs-status-meter-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 16px; font-size:13px; margin-bottom:4px; }
+  .fs-status-meter-head strong { font-weight:600; }
+  .fs-status-meter-head .fs-status-meter-value { font-variant-numeric:tabular-nums; }
+  .fs-status-bar { position:relative; height:16px; background:#fff; border:1px solid #9e9e9e; border-radius:2px; display:flex; }
+  .fs-status-seg { height:100%; }
+  .fs-status-striped { background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 2px, transparent 2px 5px); }
+  .fs-status-tick { position:absolute; top:-4px; bottom:-4px; width:2px; margin-left:-1px; background:#202124; }
+  /* each label on one line, ending at its tick; placeTicks() moves the refuse label left of the
+     abort label if they would overlap, and only if it can't fit there puts the abort label on a
+     second line */
+  .fs-status-ticks { position:relative; height:1.6em; margin-top:2px; font-size:11px; color:var(--fs-muted); }
+  .fs-status-ticks.fs-status-stacked { height:3em; }
+  .fs-status-ticks span { position:absolute; top:0; white-space:nowrap; }
+  .fs-status-ticks.fs-status-stacked span.fs-status-tick-2 { top:1.4em; }
+  .fs-status-notes { font-size:12px; color:var(--fs-muted); margin:0; line-height:1.4; }
+  .fs-status-scroll { max-width:100%; overflow-x:auto; margin-top:16px; }
+  .fs-status table.fs-status-table { border-collapse:collapse; font-size:12px; width:100%; }
+  .fs-status-table th { font-size:12px; font-weight:600; color:var(--fs-muted); text-align:left; padding:4px 6px;
+    border-bottom:1px solid #9e9e9e; vertical-align:bottom; white-space:nowrap; }
+  .fs-status-table td { padding:4px 6px; border-bottom:1px solid var(--fs-rule); white-space:nowrap; }
+  .fs-status-table th:first-child, .fs-status-table td:first-child { padding-left:0; }
+  .fs-status-table th:last-child, .fs-status-table td:last-child { padding-right:0; }
+  .fs-status-table .fs-num { text-align:right; font-variant-numeric:tabular-nums; }
+  .fs-status-swatch { display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-1px; border-radius:2px; }
+  .fs-status-pill { display:inline-block; font-size:11px; line-height:16px; padding:0 8px; border-radius:8px; margin-right:4px;
+    border:1px solid #202124; background:#202124; color:#fff; }
+  .fs-status-pill.fs-quiet { background:#fff; color:#202124; border-color:#9e9e9e; }
+  .fs-status-foot { font-size:12px; color:var(--fs-muted); margin:8px 0 0; line-height:1.4; }
+  /* the background tasks (stats.taskDetails), in the table's style; its State says what the
+     row colour did */
+  .fs-status-tasks table.grid { border:0; border-collapse:collapse; margin:0; font-size:12px; }
+  .fs-status-tasks table.grid th, .fs-status-tasks table.grid td { border:0; border-bottom:1px solid var(--fs-rule);
+    padding:4px 12px 4px 0; font-size:12px; line-height:1.4; background:transparent; vertical-align:top;
+    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; }
+  .fs-status-tasks table.grid th { font-weight:600; color:var(--fs-muted); text-align:left; border-bottom-color:#9e9e9e; }
+  .fs-status-tasks table.grid tr { background:transparent !important; }
+  /* by the panel's own width (the page's column, not the window): six tiles a row, then 3, 2, 1 */
+  @container (max-width:700px) { .fs-status-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
+  @container (max-width:460px) { .fs-status-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
+  @container (max-width:280px) { .fs-status-grid { grid-template-columns:minmax(0, 1fr); } }
+</style>
+<section class="fs-status">
+  <h{{ level | default: 3 }} class="fs-status-head">{{ view.heading | escape }}{% for m in view.meta %} <span class="fs-status-meta">· {{ m | escape }}</span>{% endfor %}</h{{ level | default: 3 }}>
+  {%- if view.tiles.size > 0 %}
+  <div class="fs-status-grid"{% if view.columns %} style="--fs-cols:{{ view.columns }}"{% endif %}>
+    {%- for t in view.tiles %}
+    <div class="fs-status-tile">
+      <div class="fs-status-label">{{ t.label | escape }}</div>
+      <div class="fs-status-value">{{ t.value | escape }}{% if t.unit %}<span class="fs-status-unit">{{ t.unit | escape }}</span>{% endif %}</div>
+      {%- if t.sub %}<div class="fs-status-sub">{{ t.sub | escape }}</div>{% endif %}
+    </div>
+    {%- endfor %}
+  </div>
+  {%- endif %}
+  {%- if view.memory %}
+  <div class="fs-status-meter">
+    <div class="fs-status-meter-head"><span><strong>Memory</strong> · {{ view.memory.scope | escape }}</span>
+      <span class="fs-status-meter-value">{% if view.memory.unknown %}not known{% else %}{{ view.memory.value | escape }}{% endif %}</span></div>
+    {%- unless view.memory.unknown %}
+    <div class="fs-status-bar" role="img" aria-label="Memory {{ view.memory.value | escape }}">
+      {%- for s in view.memory.segments %}<div class="fs-status-seg{% if s.striped %} fs-status-striped{% endif %}" style="width:{{ s.width }}%;background-color:{{ s.color }}" title="{{ s.title | escape }}"></div>{% endfor %}
+      {%- for t in view.memory.ticks %}<div class="fs-status-tick" style="left:{{ t.at }}%"></div>{% endfor %}
+    </div>
+    <div class="fs-status-ticks">
+      {%- for t in view.memory.ticks %}<span class="fs-status-tick-{{ forloop.index }}" style="right:{{ t.right }}%">{{ t.label | escape }}</span>{% endfor %}
+    </div>
+    {%- endunless %}
+    {%- for note in view.memory.notes %}<p class="fs-status-notes">{{ note | escape }}</p>{% endfor %}
+  </div>
+  {%- endif %}
+  {%- if view.table %}
+  <div class="fs-status-scroll">
+    <table class="fs-status-table">
+      <thead><tr>{% for c in view.table.columns %}<th{% if c.num %} class="fs-num"{% endif %}>{{ c.label | escape }}</th>{% endfor %}</tr></thead>
+      <tbody>
+      {%- for r in view.table.rows %}
+        <tr>{% for c in r.cells %}<td{% if c.num %} class="fs-num"{% endif %}>
+          {%- if forloop.first %}<span class="fs-status-swatch{% if r.swatch.striped %} fs-status-striped{% endif %}" style="background-color:{{ r.swatch.color }}"></span>{% endif -%}
+          {%- if c.pills %}{% for p in c.pills %}<span class="fs-status-pill{% if p.quiet %} fs-quiet{% endif %}">{{ p.text | escape }}</span>{% endfor %}{% else %}{{ c.text | escape }}{% endif -%}
+        </td>{% endfor %}</tr>
+      {%- endfor %}
+      </tbody>
+    </table>
+  </div>
+  {%- endif %}
+  {%- for f in view.footnotes %}<p class="fs-status-foot">{{ f | escape }}</p>{% endfor %}
+</section>
+{%- if view.memory and view.memory.ticks %}
+<script>
+  // Each threshold label ends at its own tick. When the refuse label would run into the abort
+  // label, it ends just left of it instead; if there isn't room for that, the abort label takes
+  // a second line, each under its own tick again. Done on load and whenever the panel's width changes.
+  (function() {
+    const panel = document.currentScript.previousElementSibling;
+    const line = panel && panel.querySelector('.fs-status-ticks');
+    if (!line || line.children.length !== 2) return;
+    const [refuse, abort] = line.children;
+    const atRefuse = refuse.style.right;
+    function placeTicks() {
+      line.classList.remove('fs-status-stacked');
+      refuse.style.right = atRefuse;
+      const gap = 8;
+      const overlap = refuse.getBoundingClientRect().right + gap - abort.getBoundingClientRect().left;
+      if (overlap <= 0) return;
+      const width = line.getBoundingClientRect().width;
+      const right = width - (abort.getBoundingClientRect().left - line.getBoundingClientRect().left) + gap;
+      if (right + refuse.getBoundingClientRect().width <= width) {
+        refuse.style.right = right + 'px';
+      } else {
+        line.classList.add('fs-status-stacked');
+      }
+    }
+    placeTicks();
+    if (window.ResizeObserver) new ResizeObserver(placeTicks).observe(line);
+  })();
+</script>
+{%- endif %}