fhirsmith 0.13.3 → 0.14.0

package/tx/cs/cs-snomed.js

@@ -16,6 +16,8 @@ const {ConceptMap} = require("../library/conceptmap");
 const {ECLLexer, ECLParser, ECLNodeType, ECLTokenType} = require("../sct/ecl");
 const {Issue} = require("../library/operation-outcome");
 const {debugLog} = require("../operation-context");
+const {SnomedTextIndex, rankMatches, filterTokens} = require("../sct/text-index");
+const Logger = require("../../library/logger");
 
 // Symbol key under which a resolved ECL filter analysis is memoised directly on
 // the ValueSet compose.include.filter element (`fc`). Symbol-keyed and defined
@@ -127,6 +129,9 @@ class SnomedServices {
     this.strings = new SnomedStrings(sharedData.strings);
     this.words = new SnomedWords(sharedData.words);
     this.stems = new SnomedStems(sharedData.stems);
+    // Free-text search index, built on first search (see getTextIndex)
+    this._textIndex = null;
+    this._textIndexPromise = null;
     this.refs = new SnomedReferences(sharedData.refs);
     this.descriptions = new SnomedDescriptions(sharedData.desc);
     this.descriptionIndex = new SnomedDescriptionIndex(sharedData.descRef);
@@ -1482,16 +1487,104 @@ class SnomedServices {
   };
 
 
-  searchFilter(searchText, includeInactive = false, exactMatch = false) {
-    const result = new SnomedFilterContext();
+  /**
+   * Free-text search over active descriptions.
+   *
+   * Uses the in-memory word index (see tx/sct/text-index.js), built the first
+   * time this edition is searched: every filter token (stop words aside) must
+   * match a word of the concept's active descriptions, either as a prefix or
+   * by sharing its stem. Filters with no indexable token (only 1-character
+   * tokens), or an edition whose index failed to build, fall back to
+   * scanSearch().
+   *
+   * Previously the third parameter was `exactMatch`, which the provider fed
+   * from its unrelated `sort` flag - so $expand with a filter on an
+   * include-all-codes value set matched ANY term by brute-force scan: 10k+
+   * matches for a typical multi-word filter, with the event loop blocked for
+   * the whole scan (tx.fhir.org incident 2026-09-17).
+   *
+   * @param {SearchFilterText} searchText
+   * @param {boolean} includeInactive - include inactive concepts
+   * @param {OperationContext|null} opContext - for yielding / deadline checks
+   * @returns {Promise<SnomedFilterContext>}
+   */
+  async searchFilter(searchText, includeInactive = false, opContext = null) {
+    const filterText = (searchText && searchText.filter ? searchText.filter : '').toLowerCase().trim();
+    const tokens = filterTokens(filterText);
+    if (tokens.length > 0) {
+      const index = await this.getTextIndex(opContext);
+      if (index) {
+        const result = new SnomedFilterContext();
+        const ordinals = index.search(tokens, opContext);
+        if (opContext) {
+          await opContext.checkAndYield('sct:searchFilter');
+        }
+        result.matches = rankMatches(this, index, ordinals, filterText, tokens, includeInactive);
+        return result;
+      }
+    }
+    return await this.scanSearch(filterText, includeInactive, opContext);
+  }
+
+  /**
+   * The edition's text index, building it on first use. The build is shared:
+   * concurrent searches wait on the same promise, and time spent waiting is
+   * not charged to the waiting operation's compute budget. Resolves to null
+   * if the build failed (the next search retries it).
+   * @param {OperationContext|null} opContext
+   * @returns {Promise<SnomedTextIndex|null>}
+   */
+  async getTextIndex(opContext = null) {
+    if (this._textIndex) {
+      return this._textIndex;
+    }
+    if (!this._textIndexPromise) {
+      const started = Date.now();
+      // Logger fetched lazily: importers and tests require this module too
+      const textIndexLog = Logger.getInstance().child({module: 'tx-sct'});
+      this._textIndexPromise = SnomedTextIndex.build(this).then(index => {
+        this._textIndex = index;
+        textIndexLog.info(`SNOMED text index for ${this.versionUri}: ${index.words.length} words, built in ${Date.now() - started}ms`);
+        return index;
+      }, error => {
+        this._textIndexPromise = null;
+        textIndexLog.error(`SNOMED text index build failed for ${this.versionUri}: ${error.message}`);
+        return null;
+      });
+    }
+    if (opContext && typeof opContext.waitFor === 'function') {
+      return await opContext.waitFor(this._textIndexPromise, 'sct:textIndex');
+    }
+    return await this._textIndexPromise;
+  }
 
-    // Simplified search - in full implementation would use stemming and word indexes
-    const searchTerms = searchText.filter.toLowerCase().split(/\s+/);
+  /**
+   * Brute-force scan of every concept's active descriptions: every
+   * whitespace-separated term of the filter must appear (as a substring) in
+   * the same description. Expensive (hundreds of ms on a full edition), so it
+   * yields through opContext.checkAndYield and the compute deadline applies.
+   *
+   * @param {string} filterText - lower-cased, trimmed
+   * @param {boolean} includeInactive
+   * @param {OperationContext|null} opContext
+   * @returns {Promise<SnomedFilterContext>}
+   */
+  async scanSearch(filterText, includeInactive = false, opContext = null) {
+    const result = new SnomedFilterContext();
+    const searchTerms = filterText.split(/\s+/).filter(t => t.length > 0);
     const matches = [];
+    if (searchTerms.length === 0) {
+      result.matches = matches;
+      return result;
+    }
 
-    // Search through all concepts
-    for (let i = 0; i < this.concepts.count(); i++) {
-      const conceptIndex = i * this.concepts.constructor.CONCEPT_SIZE;
+    const conceptCount = this.concepts.count();
+    const conceptSize = this.concepts.constructor.CONCEPT_SIZE;
+    for (let i = 0; i < conceptCount; i++) {
+      if (opContext && (i & 0x3FF) === 0) {
+        await opContext.checkAndYield('sct:searchFilter');
+      }
+      const conceptIndex = i * conceptSize;
 
       try {
         const concept = this.concepts.getConcept(conceptIndex);
@@ -1510,25 +1603,23 @@ class SnomedServices {
           const description = this.descriptions.getDescription(descIndex);
           if (description.active) {
             const term = this.strings.getEntry(description.iDesc).toLowerCase();
-
-            if (exactMatch) {
-              // All search terms must be present
-              matchFound = searchTerms.every(searchTerm => term.includes(searchTerm));
-            } else {
-              // Any search term can match
-              matchFound = searchTerms.some(searchTerm => term.includes(searchTerm));
-            }
-
-            if (matchFound) {
+            if (searchTerms.every(searchTerm => term.includes(searchTerm))) {
+              matchFound = true;
               // Calculate priority based on match quality
-              if (term === searchText.filter.toLowerCase()) {
-                priority = 100; // Exact match
-              } else if (term.startsWith(searchText.filter.toLowerCase())) {
-                priority = 50; // Prefix match
+              let p;
+              if (term === filterText) {
+                p = 100; // Exact match
+              } else if (term.startsWith(filterText)) {
+                p = 50; // Prefix match
               } else {
-                priority = 10; // Contains match
+                p = 10; // Contains match
+              }
+              if (p > priority) {
+                priority = p;
+              }
+              if (priority === 100) {
+                break;
               }
-              break;
             }
           }
         }
@@ -1541,6 +1632,9 @@ class SnomedServices {
           });
         }
       } catch (error) {
+        if (error instanceof Issue || (error && error.abandoned)) {
+          throw error;
+        }
         // Skip problematic concepts
         continue;
       }
@@ -1582,6 +1676,19 @@ class SnomedProvider extends BaseCSServices {
     return actualVersion && actualVersion.startsWith(checkVersion);
   }
 
+  /**
+   * The display name of the code system, as $lookup reports it.
+   *
+   * Without this, CodeSystemProvider's fallback applies, which returns the versioned uri -
+   * so a SNOMED lookup answered "http://snomed.info/sct|http://snomed.info/sct/731000124108
+   * /version/20230301" where every other code system answers something like "LOINC". The
+   * edition is named because for SNOMED that is the part worth knowing; the version
+   * parameter carries the uri.
+   */
+  name() {
+    return this.sct.getDescription();
+  }
+
   description() {
     return this.sct.getDescription();
   }
@@ -2448,8 +2555,10 @@ class SnomedProvider extends BaseCSServices {
   }
 
   // Search filter
+  // eslint-disable-next-line no-unused-vars
   async searchFilter(filterContext, filter, sort) {
-    let f = this.sct.searchFilter(filter, false, sort);
+    // `sort` is not a match-mode flag: results are always ranked.
+    let f = await this.sct.searchFilter(filter, false, this.opContext);
     filterContext.filters.push(f);
     return f;
   }
@@ -2691,7 +2800,7 @@ class SnomedServicesFactory extends CodeSystemFactoryProvider {
 
     if (url.startsWith('http://snomed.info/sct?fhir_vs') ||
         url.startsWith(`http://snomed.info/sct/${this.edition}?fhir_vs`) ||
-        url.startsWith(`http://snomed.info/sct/${this.edition}/version/${this.version}?fhir_vs`)) {
+        url.startsWith(`http://snomed.info/sct/${this.edition}/version/${this.version()}?fhir_vs`)) {
       id = url.substring(qIdx);
     } else {
       return null;
@@ -2909,8 +3018,8 @@ class SnomedServicesFactory extends CodeSystemFactoryProvider {
         description: `The concept map implicitly defined by the ${name} Association Reference Set`,
         copyright: 'This value set includes content from SNOMED CT, which is copyright © 2002+ International Health Terminology Standards Development Organisation (SNOMED International), and distributed by agreement between SNOMED International and HL7',
         status: 'active',
-        sourceUri: `${this.system}?fhir_vs`,
-        targetUri: `${this.system}?fhir_vs`,
+        sourceUri: `${this.system()}?fhir_vs`,
+        targetUri: `${this.system()}?fhir_vs`,
         group: [{
           source: 'http://snomed.info/sct',
           target: 'http://snomed.info/sct'
@@ -2931,6 +3040,9 @@ class SnomedServicesFactory extends CodeSystemFactoryProvider {
 function getEditionName(edition) {
   const editionMap = {
     '900000000000207008': 'International Edition',
+    // The terminology-ecosystem test distribution, published under xsct - see the
+    // tx-ecosystem IG, which requires a server claiming the snomed mode to load it.
+    '31000003106': 'Test Edition',
     '449081005': 'International Spanish Edition',
     '11000221109': 'Argentinian Edition',
     '32506021000036107': 'Australian Edition (with drug extension)',
@@ -2967,6 +3079,9 @@ function getEditionName(edition) {
 function getEditionCode(edition) {
   const editionMap = {
     '900000000000207008': 'Intl',
+    // The terminology-ecosystem test distribution, published under xsct - see the
+    // tx-ecosystem IG, which requires a server claiming the snomed mode to load it.
+    '31000003106': 'Test',
     '449081005': 'es',
     '11000221109': 'AR-es',
     '32506021000036107': 'AU+',

package/tx/html/codesystem-operations.liquid

@@ -1,3 +1,17 @@
+<!-- Text Search: the whole code system as an anonymous value set, expanded with the
+     text as the filter parameter. This is what a person opening a code system usually
+     wants - "is there a code for X" - so it comes first. -->
+<div class="operation-form" style="margin-bottom: 15px;">
+  <strong>Text Search</strong>
+  <form method="post" action="{{ expandUrl }}" id="{{ searchId }}_form"
+        data-system="{{ url }}" data-version="{{ systemVersion }}"
+        style="display: inline-block; margin-left: 10px;" onsubmit="return txSearchSubmit('{{ searchId }}')">
+    <input type="text" name="filter" placeholder="Text" size="30"/>
+    <button type="submit" class="btn btn-sm btn-primary">Search</button>
+  </form>
+  <div id="{{ searchId }}_preview" style="display: none; margin-left: 10px; margin-top: 8px;"></div>
+</div>
+
 <div class="operation-form" style="margin-bottom: 15px;">
   <strong>Lookup</strong>
   <form method="get" action="$lookup" style="display: inline-block; margin-left: 10px;">
@@ -16,3 +30,166 @@
     <button type="submit" class="btn btn-sm btn-primary">Subsumes</button>
   </form>
 </div>
+
+
+<!-- Filter: builds a throwaway ValueSet (uuid url, one include for this code system carrying
+     every filter row) and posts it to $expand, replacing the page with the rendered expansion. -->
+<div class="operation-form" style="margin-bottom: 15px;">
+  <strong>Filter</strong>
+  <form method="post" action="{{ expandUrl }}" id="{{ filterId }}_form"
+        data-system="{{ url }}" data-version="{{ systemVersion }}"
+        style="margin-left: 10px; margin-top: 5px;" onsubmit="return txFilterSubmit('{{ filterId }}')">
+    <datalist id="{{ filterId }}_props">{{ filterPropertyOptions }}</datalist>
+    <table class="grid" cellpadding="0" cellspacing="0">
+      <thead>
+        <tr><th>Property</th><th>Operation</th><th>Value</th><th></th></tr>
+      </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><button type="button" class="btn btn-sm" title="Remove this filter" onclick="txFilterRemoveRow(this)">&#215;</button></td>
+        </tr>
+      </tbody>
+    </table>
+    <button type="button" class="btn btn-sm" onclick="txFilterAddRow('{{ filterId }}')">Add Filter</button>
+    <button type="submit" class="btn btn-sm btn-primary">Expand</button>
+  </form>
+  <div id="{{ filterId }}_preview" style="display: none; margin-left: 10px; margin-top: 8px;"></div>
+</div>
+
+<script>
+// The two forms on this tab that expand something both do the same thing: build an
+// anonymous value set over the code system being viewed and post it to $expand, then
+// replace the page with whatever comes back. They differ only in what they put on the
+// include (nothing, for a text search) and what they put on the request (the filter).
+
+function txOpMessage(id, text) {
+  var preview = document.getElementById(id + '_preview');
+  preview.textContent = text;
+  preview.style.display = 'block';
+  return false;
+}
+
+function txOpUuid() {
+  if (window.crypto && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = Math.random() * 16 | 0;
+    return (c === 'x' ? r : ((r & 0x3) | 0x8)).toString(16);
+  });
+}
+
+// One include, so that filters are ANDed. The value set exists only for the duration of
+// the expansion - it is never stored - so its url is a uuid.
+function txOpBuildValueSet(form, filters) {
+  var include = { system: form.dataset.system };
+  if (form.dataset.version) {
+    include.version = form.dataset.version;
+  }
+  if (filters && filters.length > 0) {
+    include.filter = filters.map(function (f) {
+      return { property: f.property, op: f.op, value: f.value };
+    });
+  }
+  return {
+    resourceType: 'ValueSet',
+    // Marks the value set as one that exists only for this request, so that the server
+    // renders the expansion rather than a summary of a value set nobody can look up.
+    extension: [{ url: 'http://healthintersections.com.au/fhirsmith/StructureDefinition/valueset-transient', valueBoolean: true }],
+    url: 'urn:uuid:' + txOpUuid(),
+    status: 'active',
+    compose: { include: [include] }
+  };
+}
+
+// The value set goes in the body; anything that is an expansion parameter rather than
+// part of the value set goes on the query, which $expand reads either way.
+function txOpExpand(id, form, valueSet, params) {
+  var url = new URL(form.getAttribute('action'), window.location.href);
+  // The definition has to come back for the transient marker and the filters to survive
+  // the expansion - $expand drops both along with the rest of the definition otherwise.
+  url.searchParams.set('includeDefinition', 'true');
+  for (var name in params || {}) {
+    url.searchParams.set(name, params[name]);
+  }
+  txOpMessage(id, 'Expanding...');
+  fetch(url.toString(), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/fhir+json', 'Accept': 'text/html' },
+    body: JSON.stringify(valueSet)
+  }).then(function (response) {
+    return response.text();
+  }).then(function (html) {
+    document.open();
+    document.write(html);
+    document.close();
+  }).catch(function (err) {
+    txOpMessage(id, 'Expansion failed: ' + err.message);
+  });
+  return false;
+}
+
+function txSearchSubmit(id) {
+  var form = document.getElementById(id + '_form');
+  var text = form.querySelector('input[name="filter"]').value.trim();
+  if (text === '') {
+    return txOpMessage(id, 'Enter some text to search for.');
+  }
+  return txOpExpand(id, form, txOpBuildValueSet(form, null), { filter: text });
+}
+
+function txFilterClearRow(row) {
+  row.querySelectorAll('input').forEach(function (input) { input.value = ''; });
+  row.querySelectorAll('select').forEach(function (select) { select.selectedIndex = 0; });
+}
+
+function txFilterAddRow(id) {
+  var rows = document.getElementById(id + '_rows');
+  var row = rows.rows[0].cloneNode(true);
+  txFilterClearRow(row);
+  rows.appendChild(row);
+}
+
+function txFilterRemoveRow(btn) {
+  var row = btn.closest('tr');
+  var rows = row.parentNode;
+  if (rows.rows.length > 1) {
+    rows.removeChild(row);
+  } else {
+    txFilterClearRow(row);
+  }
+}
+
+// Every row that has anything in it. Rows left entirely blank are ignored, so an unused
+// extra row does not stop the expansion; a half-filled one is an error the user must fix.
+function txFilterCollect(id) {
+  var filters = [];
+  var rows = document.getElementById(id + '_rows').rows;
+  for (var i = 0; i < rows.length; i++) {
+    var property = rows[i].querySelector('input[name="property"]').value.trim();
+    var op = rows[i].querySelector('select[name="op"]').value;
+    var value = rows[i].querySelector('input[name="value"]').value.trim();
+    if (property !== '' || value !== '') {
+      filters.push({ row: i + 1, property: property, op: op, value: value });
+    }
+  }
+  return filters;
+}
+
+function txFilterSubmit(id) {
+  var form = document.getElementById(id + '_form');
+  var filters = txFilterCollect(id);
+  if (filters.length === 0) {
+    return txOpMessage(id, 'No filters specified.');
+  }
+  for (var i = 0; i < filters.length; i++) {
+    if (filters[i].property === '' || filters[i].value === '') {
+      return txOpMessage(id, 'Filter ' + filters[i].row + ' needs both a property and a value.');
+    }
+  }
+  return txOpExpand(id, form, txOpBuildValueSet(form, filters), null);
+}
+</script>

package/tx/html/ecl-panel.liquid

@@ -0,0 +1,93 @@
+<p>Expand a SNOMED CT expression constraint. The expression is run as a value set that
+  composes SNOMED CT with a <code>constraint</code> filter; the result appears below, and
+  the inputs stay where they are so the expression can be adjusted and run again.</p>
+
+{% if hasVersions %}
+<div class="operation-form" style="margin-bottom: 15px;">
+  <form id="{{ eclId }}_form" action="{{ expandUrl }}" data-system="{{ system }}"
+        data-transient="{{ transientExtension }}" onsubmit="return eclRun('{{ eclId }}')">
+    <table class="grid" cellpadding="0" cellspacing="0" style="width: 100%;">
+      <tr>
+        <td style="width: 100%;">ECL: <input type="text" name="ecl" id="{{ eclId }}_ecl" size="80"
+              style="width: 90%;" autocomplete="off" placeholder="&lt; 404684003 |Clinical finding|"/></td>
+      </tr>
+      <tr>
+        <td>Edition: <select name="version" id="{{ eclId }}_version">{{ versionOptions }}</select>
+          <button type="submit" class="btn btn-sm btn-primary" id="{{ eclId }}_go">Go</button>
+        </td>
+      </tr>
+    </table>
+  </form>
+</div>
+
+<div id="{{ eclId }}_results"></div>
+
+<script>
+function eclUuid() {
+  if (window.crypto && typeof crypto.randomUUID === 'function') {
+    return crypto.randomUUID();
+  }
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = Math.random() * 16 | 0;
+    return (c === 'x' ? r : ((r & 0x3) | 0x8)).toString(16);
+  });
+}
+
+function eclMessage(id, text) {
+  document.getElementById(id + '_results').innerHTML = '';
+  var p = document.createElement('p');
+  p.textContent = text;
+  document.getElementById(id + '_results').appendChild(p);
+  return false;
+}
+
+// The expansion comes back as a fragment rather than a page, so it can go straight under
+// the inputs. An error arrives the same way - as the rendered OperationOutcome - which is
+// the point: an ECL is usually wrong several times before it is right, and the message
+// belongs next to the expression that caused it.
+function eclRun(id) {
+  var form = document.getElementById(id + '_form');
+  var ecl = document.getElementById(id + '_ecl').value.trim();
+  var version = document.getElementById(id + '_version').value;
+  var go = document.getElementById(id + '_go');
+
+  if (ecl === '') {
+    return eclMessage(id, 'Enter an expression constraint.');
+  }
+
+  var valueSet = {
+    resourceType: 'ValueSet',
+    extension: [{ url: form.dataset.transient, valueBoolean: true }],
+    url: 'urn:uuid:' + eclUuid(),
+    status: 'active',
+    compose: {
+      include: [{
+        system: form.dataset.system,
+        version: version,
+        filter: [{ property: 'constraint', op: '=', value: ecl }]
+      }]
+    }
+  };
+
+  eclMessage(id, 'Expanding...');
+  go.disabled = true;
+  fetch(form.getAttribute('action'), {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/fhir+json', 'Accept': 'text/html' },
+    body: JSON.stringify(valueSet)
+  }).then(function (response) {
+    return response.text();
+  }).then(function (html) {
+    document.getElementById(id + '_results').innerHTML = html;
+  }).catch(function (err) {
+    eclMessage(id, 'Expansion failed: ' + err.message);
+  }).then(function () {
+    go.disabled = false;
+  });
+  return false;
+}
+</script>
+{% else %}
+<p><em>This endpoint has no SNOMED CT editions loaded, so there is nothing to run an
+  expression constraint against.</em></p>
+{% endif %}

package/tx/html/home-metrics.liquid

@@ -4,8 +4,8 @@
     <canvas id="memoryChart" height="200"></canvas>
   </div>
   <div style="flex: 1;">
-    <h6>Expansion Cache</h6>
-    <canvas id="cacheChart" height="200"></canvas>
+    <h6>Requests per Minute</h6>
+    <canvas id="requestChart" height="200"></canvas>
   </div>
   <div style="flex: 1;">
     <h6>Turnaround Time</h6>
@@ -13,18 +13,18 @@
   </div>
 </div>
 <div style="display: flex; gap: 20px; margin-bottom: 20px;">
-  <div style="flex: 1;">
-    <h6>Requests per Minute</h6>
-    <canvas id="requestChart" height="200"></canvas>
-  </div>
   <div style="flex: 1;">
     <h6>Client Cache</h6>
     <canvas id="clientCacheChart" height="200"></canvas>
   </div>
   <div style="flex: 1;">
-    <h6>Node Blocking</h6>
+    <h6>Node Blocking (mean)</h6>
     <canvas id="blockChart" height="200"></canvas>
   </div>
+  <div style="flex: 1;">
+    <h6>Node Blocking (max)</h6>
+    <canvas id="blockMaxChart" height="200"></canvas>
+  </div>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@@ -99,36 +99,6 @@
     }
   });
 
-  // Expansion cache chart
-  new Chart(document.getElementById('cacheChart'), {
-    type: 'line',
-    data: {
-      labels: historyData.map(d => formatTime(d.time)),
-      datasets: [{
-        data: historyData.map(d => d.expansion),
-        borderColor: '#7b7b7b',
-        backgroundColor: 'rgba(123, 123, 123, 0.1)',
-        fill: true,
-        tension: 0.3,
-        pointRadius: 2
-      }]
-    },
-    options: {
-      ...chartOptions,
-      scales: {
-        ...chartOptions.scales,
-        y: {
-          ...chartOptions.scales.y,
-          title: {
-            display: true,
-            text: 'Expansion cache # items'
-          }
-        }
-      }
-    }
-  });
-
-
   // Tat chart
   new Chart(document.getElementById('tatChart'), {
     type: 'line',
@@ -215,48 +185,41 @@
       }
     }
   });
-  // Blocking chart
-  new Chart(document.getElementById('blockChart'), {
-    type: 'line',
-    data: {
-      labels: historyData.map(d => formatTime(d.time)),
-      datasets: [{
-        label: 'mean',
-        data: historyData.map(d => d.block),
-        borderColor: '#2845a7',
-        backgroundColor: 'rgba(40, 69, 167, 0.1)',
-        fill: true,
-        tension: 0.3,
-        pointRadius: 2
-      }, {
-        // Worst single event-loop stall in the window: the mean dilutes a
-        // multi-second block into noise, so this is the line that shows
-        // request-freezing stalls.
-        label: 'max',
-        data: historyData.map(d => d.blockMax),
-        borderColor: '#a72828',
-        fill: false,
-        tension: 0.3,
-        pointRadius: 2
-      }]
-    },
-    options: {
-      ...chartOptions,
-      plugins: {
-        ...chartOptions.plugins,
-        legend: { display: true }
+  // Blocking charts. Mean and max are separate charts because they are on different
+  // scales: a multi-second stall puts max in the thousands of ms while the mean sits at
+  // a few ms, so on one chart the mean is a flat line along the bottom.
+  function blockChart(id, field, colour, fill) {
+    new Chart(document.getElementById(id), {
+      type: 'line',
+      data: {
+        labels: historyData.map(d => formatTime(d.time)),
+        datasets: [{
+          data: historyData.map(d => d[field]),
+          borderColor: colour,
+          backgroundColor: fill,
+          fill: true,
+          tension: 0.3,
+          pointRadius: 2
+        }]
       },
-      scales: {
-        ...chartOptions.scales,
-        y: {
-          ...chartOptions.scales.y,
-          title: {
-            display: true,
-            text: 'ms'
+      options: {
+        ...chartOptions,
+        scales: {
+          ...chartOptions.scales,
+          y: {
+            ...chartOptions.scales.y,
+            title: {
+              display: true,
+              text: 'ms'
+            }
           }
         }
       }
-    }
-  });
+    });
+  }
+  // the average event-loop delay over each interval
+  blockChart('blockChart', 'block', '#2845a7', 'rgba(40, 69, 167, 0.1)');
+  // the worst single stall in each interval: the one that shows request-freezing blocks
+  blockChart('blockMaxChart', 'blockMax', '#a72828', 'rgba(167, 40, 40, 0.1)');
 })();
 </script>