fhirsmith 0.13.3 → 0.14.0

package/tx/tx-html.js

@@ -20,6 +20,7 @@ const {ParametersXML} = require("./xml/parameters-xml");
 const {OperationOutcomeXML} = require("./xml/operationoutcome-xml");
 const {debugLog} = require("./operation-context");
 const {InvalidError} = require("./library/errors");
+const {VALID_FILTER_OPS} = require("./library/renderer");
 
 const txHtmlLog = Logger.getInstance().child({ module: 'tx-html' });
 
@@ -50,6 +51,51 @@ const SORT_OPTIONS = ['', 'id', 'url', 'version', 'date', 'name', 'vurl'];
 
 const ELEMENT_OPTIONS = ['id', 'url', 'version', 'name', 'title', 'status', 'date', 'publisher', 'description'];
 
+// Marks a value set that exists only for the request that carried it - the ones the
+// operations tab on a CodeSystem builds and posts to $expand. Nobody else ever sees it,
+// so rendering its uuid url and its status tells the user nothing; what they want is the
+// expansion, and the filters it came from. This is FHIRsmith's own extension, in
+// FHIRsmith's own namespace: it says something about how this server was asked to do
+// something, not about terminology, so it does not belong in the FHIR tools namespace.
+const SNOMED_URI = 'http://snomed.info/sct';
+
+const TRANSIENT_VALUESET = 'http://healthintersections.com.au/fhirsmith/StructureDefinition/valueset-transient';
+
+const SEVERITY_ALERT_CLASS = {
+  fatal: 'alert-danger',
+  error: 'alert-danger',
+  warning: 'alert-warning',
+  information: 'alert-info',
+  success: 'alert-info'
+};
+
+const SEVERITY_LABEL = {
+  fatal: 'Fatal',
+  error: 'Error',
+  warning: 'Warning',
+  information: 'Information',
+  success: 'Success'
+};
+
+// ValueSet.compose.include.filter.op, in R5 spec order - the operations offered
+// by the $filter form on the CodeSystem operations tab
+const FILTER_OPS = [...VALID_FILTER_OPS];
+
+// Filter/property names defined by the base specification, valid for any code system
+const BASE_FILTER_PROPERTIES = ['code', 'designation', 'concept', 'status', 'inactive', 'regex'];
+
+// Filter/property names defined by particular code systems. Any property or filter
+// declared in the CodeSystem resource itself is added to these at render time
+const SYSTEM_FILTER_PROPERTIES = {
+  'http://www.ama-assn.org/go/cpt': ['modifier', 'modified', 'kind', 'orthopox', 'telemedicine', 'code'],
+  'http://loinc.org': ['STATUS', 'COMPONENT', 'PROPERTY', 'TIME_ASPCT', 'SYSTEM', 'SCALE_TYP', 'METHOD_TYP',
+    'CLASS', 'CONSUMER_NAME', 'CLASSTYPE', 'ORDER_OBS', 'DOCUMENT_SECTION', 'copyright'],
+  'http://www.nlm.nih.gov/research/umls/rxnorm': ['STY', 'SAB', 'TTY'],
+  'http://snomed.info/sct': ['constraint', 'expressions', 'effectiveTime', 'inactive', 'moduleId',
+    'normalForm', 'normalFormTerse', 'semanticTag', 'sufficientlyDefined'],
+  'http://unitsofmeasure.org': ['property', 'canonical']
+};
+
 /**
  * Load the TX HTML template
  */
@@ -86,6 +132,14 @@ function acceptsHtml(req) {
   return _fmt.includes('text/html');
 }
 
+/** Whether this resource is one of the throwaway value sets described at TRANSIENT_VALUESET. */
+function isTransientValueSet(json) {
+  if (!json || json.resourceType !== 'ValueSet') {
+    return false;
+  }
+  return (json.extension || []).some((e) => e.url === TRANSIENT_VALUESET && e.valueBoolean !== false);
+}
+
 // Whether this server publishes its library source YAML. Off unless the operator turns
 // modules.tx.publishLibrarySource on, and it gates both the route and the nav item, so a
 // server that does not publish it has no link to a 404.
@@ -253,6 +307,10 @@ class TxHtmlRenderer {
         return `${severity.charAt(0).toUpperCase() + severity.slice(1)}`;
       }
 
+      if (isTransientValueSet(json)) {
+        return 'Expansion';
+      }
+
       if (json.id) {
         return `${pfx} ${json.id}`;
       }
@@ -403,7 +461,7 @@ class TxHtmlRenderer {
 
     for (const factory of uniqueFactories) {
       html += '<tr>';
-      html += `<td>${escape(factory.name())}</td>`;
+      html += `<td>${this.factoryLink(factory)}</td>`;
       html += `<td>${escape(factory.system())}</td>`;
       html += `<td>${escape(factory.version() || '-')}</td>`;
       html += `<td>${factory.useCount ? factory.useCount() : '-'}</td>`;
@@ -416,6 +474,80 @@ class TxHtmlRenderer {
     return html;
   }
 
+  /**
+   * The name of a special code system, linked to its page where there is one.
+   *
+   * These are the code systems the server implements natively rather than loading as a
+   * resource, so they have no id of their own in the resource space. They are still
+   * readable: read.js serves them under the factory's id with an "x-" prefix, which is
+   * also the id search.js puts on the placeholder it synthesises. A factory whose id() is
+   * null - SNOMED, when its version is not one of the recognised edition URIs - has no
+   * page to link to, so the name is left as text rather than pointing at a 404.
+   *
+   * @param {Object} factory a CodeSystemFactoryProvider
+   * @returns {string} the cell content
+   */
+  factoryLink(factory) {
+    const name = escape(factory.name());
+    let id;
+    try {
+      id = factory.id();
+    } catch {
+      id = null;
+    }
+    if (!id) {
+      return name;
+    }
+    return `<a href="${escape(this.path)}/CodeSystem/x-${encodeURIComponent(id)}">${name}</a>`;
+  }
+
+  /**
+   * The SNOMED CT editions this endpoint has loaded: the default one first, because it is
+   * what the rest of the server uses when no version is given, then the others by name.
+   * The factory map is keyed several ways for the same factory - by system, by
+   * system|version and by system|major.minor - so it has to be deduplicated.
+   *
+   * @param {Object} provider the endpoint's provider
+   * @returns {{value: string, label: string, isDefault: boolean}[]}
+   */
+  snomedVersions(provider) {
+    const byVersion = new Map();
+    const dflt = provider.codeSystemFactories.get(SNOMED_URI);
+    for (const factory of provider.codeSystemFactories.values()) {
+      if (factory.system() !== SNOMED_URI) {
+        continue;
+      }
+      const version = factory.version();
+      if (!version || byVersion.has(version)) {
+        continue;
+      }
+      byVersion.set(version, {
+        value: version,
+        label: factory.describeVersion(version),
+        isDefault: factory === dflt
+      });
+    }
+    const versions = [...byVersion.values()];
+    versions.sort((a, b) => (a.isDefault === b.isDefault ? a.label.localeCompare(b.label) : (a.isDefault ? -1 : 1)));
+    return versions;
+  }
+
+  /**
+   * The ECL panel at <endpoint>/ecl.
+   */
+  async buildEclPage(req) {
+    const versions = this.snomedVersions(req.txProvider);
+    return await this.liquid.renderFile('ecl-panel', {
+      eclId: this.generateResourceId(),
+      system: escape(SNOMED_URI),
+      transientExtension: escape(TRANSIENT_VALUESET),
+      expandUrl: escape(this.path + '/ValueSet/$expand?_format=html/fragment&includeDefinition=true'),
+      versionOptions: versions.map((v) =>
+        `<option value="${escape(v.value)}">${escape(v.label)}${v.isDefault ? ' (default)' : ''}</option>`).join(''),
+      hasVersions: versions.length > 0
+    });
+  }
+
   /**
    * Main render - determines what to render based on resource type
    */
@@ -478,55 +610,127 @@ class TxHtmlRenderer {
    * Render Parameters resource
    */
   async renderParameters(json) {
+    const codes = await this.parametersCodeContext(json);
     let html = '<table class="table grid">';
     html += '<thead><tr><th>Name</th><th>Value</th></tr></thead>';
     html += '<tbody>';
 
     if (json.parameter && Array.isArray(json.parameter)) {
       for (const param of json.parameter) {
-        html += await this.renderParameter(param);
+        html += await this.renderParameter(param, codes);
       }
     }
 
     html += '</tbody></table>';
+    html += this.renderJsonSource(json);
 
-    // Collapsible JSON source
+    return html;
+  }
+
+  /**
+   * The "Show JSON Source" disclosure: the resource as it went on the wire, for
+   * anything the HTML rendering summarises or leaves out.
+   */
+  renderJsonSource(json) {
     const resourceId = this.generateResourceId();
-    html += '<div class="json-source">';
+    let html = '<div class="json-source">';
     html += `<button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleJsonSource('${resourceId}')">`;
     html += 'Show JSON Source</button>';
     html += `<div id="${resourceId}" class="json-content" style="display: none; margin-top: 10px;">`;
     html += `<pre>${escape(JSON.stringify(json, null, 2))}</pre>`;
     html += '</div>';
     html += '</div>';
-
     return html;
   }
 
   /**
    * Render a single parameter row
    */
-  async renderParameter(param) {
+  async renderParameter(param, codes) {
     let html = '<tr>';
     html += `<td>${escape(param.name || '')}</td>`;
     html += '<td>';
-    html += await this.renderParameterValue(param);
+    html += await this.renderParameterValue(param, codes, null);
     html += '</td>';
     html += '</tr>';
     return html;
   }
 
+  /**
+   * What a Parameters resource says about the code system its codes belong to.
+   *
+   * $lookup answers about one concept, and names the code system it is in - the system
+   * and version parameters - so a property that came back as a code can be linked back
+   * into it. Building a checker here means the code system is built once for the page
+   * rather than once per property.
+   *
+   * @param {Object} json a Parameters resource
+   * @returns {Promise<{system: string, version: string|null, exists: function}|null>}
+   */
+  async parametersCodeContext(json) {
+    const value = (name) => (json.parameter || []).find((p) => p.name === name);
+    const system = value('system')?.valueUri || value('system')?.valueString;
+    if (!system || !this.renderer?.linkResolver?.codeChecker || !this.renderer.opContext) {
+      return null;
+    }
+    const version = value('version')?.valueString || null;
+    try {
+      const exists = await this.renderer.linkResolver.codeChecker(this.renderer.opContext, system, version);
+      return exists ? { system, version, exists } : null;
+    } catch (e) {
+      // A link is a courtesy; failing to work out whether to offer one is not a reason
+      // to fail the page.
+      debugLog(e);
+      return null;
+    }
+  }
+
+  /**
+   * A code in a $lookup response, linked to $lookup on it where that will work.
+   *
+   * Which values are links follows from the output alone. A Coding says which code system
+   * it is in. A code does not - but CodeSystem.property.type of 'code' is defined as a
+   * concept in the same code system, so a property's value part that came back as a code
+   * belongs to the system this response is about. Nothing else does: the code part of a
+   * property is the property's name, and a designation's language and status are codes
+   * from elsewhere entirely.
+   *
+   * Even then the code is checked before it is linked, because a provider can declare a
+   * property as a code and put something else in it.
+   */
+  async renderPropertyCode(code, codes) {
+    const plain = `<code>${escape(code)}</code>`;
+    if (!codes) {
+      return plain;
+    }
+    let display;
+    try {
+      display = await codes.exists(code);
+    } catch (e) {
+      debugLog(e);
+      return plain;
+    }
+    if (display === null || display === undefined) {
+      return plain;
+    }
+    const link = this.renderer.linkResolver.lookupLink(codes.system, codes.version, code);
+    if (!link) {
+      return plain;
+    }
+    return `<a href="${escape(link)}"${display ? ` title="${escape(display)}"` : ''}>${plain}</a>`;
+  }
+
   /**
    * Render the value portion of a parameter
    */
-  async renderParameterValue(param) {
+  async renderParameterValue(param, codes, parentName) {
     // Check for parts (nested parameters)
     if (param.part && Array.isArray(param.part)) {
       let html = '<ul>';
       for (const part of param.part) {
         html += '<li>';
         html += `<strong>${escape(part.name || '')}:</strong> `;
-        html += await this.renderParameterValue(part);
+        html += await this.renderParameterValue(part, codes, param.name);
         html += '</li>';
       }
       html += '</ul>';
@@ -540,10 +744,10 @@ class TxHtmlRenderer {
 
     // Check for complex datatypes
     if (param.valueCoding) {
-      return this.renderCoding(param.valueCoding);
+      return await this.renderCoding(param.valueCoding, codes);
     }
     if (param.valueCodeableConcept) {
-      return this.renderCodeableConcept(param.valueCodeableConcept);
+      return await this.renderCodeableConcept(param.valueCodeableConcept, codes);
     }
     if (param.valueQuantity) {
       return this.renderQuantity(param.valueQuantity);
@@ -581,6 +785,9 @@ class TxHtmlRenderer {
       return escape(param.valueCanonical);
     }
     if (param.valueCode !== undefined) {
+      if (param.name === 'value' && ['property', 'subproperty'].includes(parentName)) {
+        return await this.renderPropertyCode(param.valueCode, codes);
+      }
       return `<code>${escape(param.valueCode)}</code>`;
     }
     if (param.valueId !== undefined) {
@@ -629,7 +836,7 @@ class TxHtmlRenderer {
   /**
    * Render Coding datatype
    */
-  async renderCoding(coding) {
+  async renderCoding(coding, codes) {
     if (!coding) return '';
 
     let parts = [];
@@ -637,7 +844,14 @@ class TxHtmlRenderer {
       parts.push(escape(coding.system));
     }
     if (coding.code) {
-      parts.push(`<code>${escape(coding.code)}</code>`);
+      // A Coding says which code system it is in, so it can be linked - but only when
+      // that is the code system this page already built a checker for. Building one per
+      // coding would mean building a code system per row.
+      const sameSystem = codes && coding.system === codes.system
+        && (!coding.version || !codes.version || coding.version === codes.version);
+      parts.push(sameSystem
+        ? await this.renderPropertyCode(coding.code, codes)
+        : `<code>${escape(coding.code)}</code>`);
     }
     if (coding.display) {
       parts.push(`"${escape(coding.display)}"`);
@@ -652,7 +866,7 @@ class TxHtmlRenderer {
   /**
    * Render CodeableConcept datatype
    */
-  async renderCodeableConcept(cc) {
+  async renderCodeableConcept(cc, codes) {
     if (!cc) return '';
 
     let html = '';
@@ -665,7 +879,7 @@ class TxHtmlRenderer {
       if (cc.text) html += '<br/>';
       html += '<ul style="margin: 0; padding-left: 20px;">';
       for (const coding of cc.coding) {
-        html += `<li>${this.renderCoding(coding)}</li>`;
+        html += `<li>${await this.renderCoding(coding, codes)}</li>`;
       }
       html += '</ul>';
     }
@@ -787,7 +1001,7 @@ class TxHtmlRenderer {
       html += this.tab(_fmt && _fmt == 'html/json', 'JSON', json.resourceType, 'html/json', json.id);
       html += this.tab(_fmt && _fmt == 'html/xml', 'XML', json.resourceType, 'html/xml', json.id);
       html += this.tab(_fmt && _fmt == 'html/narrative', 'Original Narrative', json.resourceType, 'html/narrative', json.id);
-      html += this.tab(_fmt && _fmt == 'html/ops', 'LookUp / Subsumes', json.resourceType, 'html/ops', json.id);
+      html += this.tab(_fmt && _fmt == 'html/ops', 'Operations', json.resourceType, 'html/ops', json.id);
       html += `</ul>`;
 
       if (!_fmt || _fmt == 'html') {
@@ -803,7 +1017,13 @@ class TxHtmlRenderer {
           opsId: this.generateResourceId(),
           vcSystemId: this.generateResourceId(),
           inferSystemId: this.generateResourceId(),
-          url: escape(json.url || '')
+          searchId: this.generateResourceId(),
+          filterId: this.generateResourceId(),
+          url: escape(json.url || ''),
+          systemVersion: escape(json.version || ''),
+          expandUrl: escape(this.path + '/ValueSet/$expand?_format=html'),
+          filterOpOptions: FILTER_OPS.map((op) => `<option value="${escape(op)}">${escape(op)}</option>`).join(''),
+          filterPropertyOptions: this.buildFilterPropertyNames(json).map((n) => `<option value="${escape(n)}"></option>`).join('')
         });
       }
 
@@ -823,6 +1043,9 @@ class TxHtmlRenderer {
    * Render ValueSet resource
    */
   async renderValueSet(json, inBundle, _fmt, op, exp) {
+    if (isTransientValueSet(json) && json.expansion) {
+      return await this.renderTransientExpansion(json, _fmt === 'html/fragment');
+    }
     if (inBundle || op) {
       return await this.renderResourceWithNarrative(json, await this.renderer.renderValueSet(json));
     } else {
@@ -862,6 +1085,113 @@ class TxHtmlRenderer {
     }
   }
 
+  /**
+   * Render the expansion of a value set that only ever existed for this request.
+   *
+   * The usual value set summary is all metadata - defining url, status, expansion
+   * identifier - and every one of those is a uuid this server minted a moment ago and
+   * will never use again, so it says nothing to anyone. What is worth saying is what was
+   * expanded and how, so that is what leads: the code system, the text searched for if
+   * there was one, and, when the expansion came from a filter, the compose that produced
+   * it - as JSON, because a filter is read by people who work in JSON.
+   *
+   * None of that when the rendering is a fragment, though. A fragment goes inside a page
+   * that has just been used to ask the question - the ECL panel still has the expression
+   * and the edition on screen - so restating them, and warning that a SNOMED expansion is
+   * not closed, is telling the user what they are looking at. There the expansion alone
+   * is the answer.
+   *
+   * @param {Object} json the expanded value set
+   * @param {boolean} embedded whether this is going inside a page that already has the context
+   */
+  async renderTransientExpansion(json, embedded) {
+    const include = json.compose?.include?.[0] || {};
+    const filter = (json.expansion.parameter || []).find((p) => p.name === 'filter')?.valueString;
+
+    let html = '<div class="narrative">';
+
+    if (!embedded) {
+      html += '<p>An expansion of a value set built for this request alone - this server does '
+        + 'not hold it, and it has no URL of its own.</p>';
+
+      html += '<table class="grid">';
+      if (include.system) {
+        html += `<tr><td><b>Code System</b></td><td>${escape(include.system)}</td></tr>`;
+      }
+      if (include.version) {
+        html += `<tr><td><b>Version</b></td><td>${escape(include.version)}</td></tr>`;
+      }
+      if (filter) {
+        html += `<tr><td><b>Text Search</b></td><td>${escape(filter)}</td></tr>`;
+      }
+      html += '</table>';
+
+      if ((include.filter || []).length > 0) {
+        html += '<h3>Filters</h3>';
+        html += `<pre>${escape(JSON.stringify(json.compose, null, 2))}</pre>`;
+      }
+    }
+
+    // The expansion, without the two identifiers that are noise here: the value set's own
+    // url and the expansion identifier. Everything else - timestamp, total, the
+    // parameters the server echoed back - is real information about this request.
+    // compose stays: renderVSExpansion never renders it, but it is where the version each
+    // code system was expanded at can be read from, for the $lookup links on the codes.
+    const shown = structuredClone(json);
+    delete shown.url;
+    delete shown.expansion.identifier;
+
+    if (embedded) {
+      // The unclosed warning and the list of code systems the expansion drew on say the
+      // same thing the page already said. A too-costly warning is not in that class - it
+      // means the answer on screen is not the whole answer - so it stays.
+      shown.expansion.extension = (shown.expansion.extension || [])
+        .filter((e) => !e.url.startsWith('http://hl7.org/fhir/StructureDefinition/valueset-unclosed'));
+      shown.expansion.parameter = (shown.expansion.parameter || [])
+        .filter((p) => !['used-codesystem', 'used-valueset', 'used-supplement'].includes(p.name));
+    }
+
+    if (embedded) {
+      html += this.expansionCount(json.expansion);
+    }
+
+    html += await this.renderer.renderVSExpansion(shown, !embedded);
+    html += '</div>';
+    html += this.renderJsonSource(json);
+    return html;
+  }
+
+  /**
+   * How many concepts an expansion found, as one line.
+   *
+   * On a page of its own this is in the expansion properties table; in a fragment that
+   * table is gone, and the count is the one thing there that the reader cannot work out by
+   * looking - it is usually the answer they were after. total is the size of the whole
+   * expansion, which is not what is on screen when a page was asked for, and some paths
+   * report no total at all, so both are said when they differ.
+   *
+   * @param {Object} expansion the ValueSet.expansion
+   * @returns {string} a paragraph, or nothing when the expansion is empty (the renderer
+   *   says so itself in that case)
+   */
+  expansionCount(expansion) {
+    const concepts = (list) => (list || []).reduce((n, c) => n + 1 + concepts(c.contains), 0);
+    const plural = (n) => `${n} concept${n === 1 ? '' : 's'}`;
+
+    const shown = concepts(expansion.contains);
+    const total = typeof expansion.total === 'number' ? expansion.total : null;
+    if (total === null && shown === 0) {
+      return '';
+    }
+    if (total === null) {
+      return `<p><b>${plural(shown)}</b></p>`;
+    }
+    if (total === 0) {
+      return '';
+    }
+    return `<p><b>${plural(total)}</b>${total === shown ? '' : ` (${shown} shown)`}</p>`;
+  }
+
   /**
    * Render ConceptMap resource
    */
@@ -927,41 +1257,68 @@ class TxHtmlRenderer {
   }
 
   /**
-   * Render OperationOutcome resource
+   * Render OperationOutcome resource.
+   *
+   * details.text is the human account of the problem; diagnostics is server-specific
+   * detail, most often the operation's timing trace. So the text leads, and the
+   * diagnostics are kept but folded away - rendering diagnostics first (as this did)
+   * turns a perfectly good error message into a row of milliseconds.
    */
   async renderOperationOutcome(json) {
     let html = '<div class="operation-outcome">';
-    html += `<h4>OperationOutcome</h4>`;
-
-    if (json.issue && Array.isArray(json.issue)) {
-      for (const issue of json.issue) {
-        html += '<div class="alert ';
-
-        // Determine alert style based on this issue's severity
-        const severity = issue.severity || 'information';
-        switch (severity) {
-          case 'error':
-          case 'fatal':
-            html += 'alert-danger';
-            break;
-          case 'warning':
-            html += 'alert-warning';
-            break;
-          case 'information':
-            html += 'alert-info';
-            break;
-          default:
-            html += 'alert-secondary';
-        }
 
-        html += '">';
-        html += `<strong>${escape(issue.severity || 'unknown')}:</strong> `;
-        html += `[${escape(issue.code || 'unknown')}] `;
-        html += escape(issue.diagnostics || issue.details?.text || 'No details');
+    for (const issue of json.issue || []) {
+      const severity = issue.severity || 'information';
+      html += `<div class="alert ${SEVERITY_ALERT_CLASS[severity] || 'alert-secondary'}">`;
+      html += `<strong>${escape(SEVERITY_LABEL[severity] || severity)}</strong>: `;
+
+      const text = issue.details?.text || issue.diagnostics;
+      html += text ? escape(text) : '<em>(this issue carries no message)</em>';
+
+      // The issue-type and the tx-issue-type, which are usually - but not always - the
+      // same word, plus the message id if the issue names one. Shown because they are
+      // what a client actually branches on.
+      const codes = [];
+      if (issue.code) {
+        codes.push(issue.code);
+      }
+      for (const coding of issue.details?.coding || []) {
+        if (coding.code && !codes.includes(coding.code)) {
+          codes.push(coding.code);
+        }
+      }
+      const msgId = (issue.extension || []).find((e) =>
+        e.url === 'http://hl7.org/fhir/StructureDefinition/operationoutcome-message-id')?.valueString;
+      if (msgId) {
+        codes.push(msgId);
+      }
+      const where = [...(issue.expression || []), ...(issue.location || [])];
+      if (codes.length > 0 || where.length > 0) {
+        html += '<div style="margin-top: 6px; font-size: 90%;">';
+        html += codes.map((c) => `<code>${escape(c)}</code>`).join(' ');
+        if (where.length > 0) {
+          html += (codes.length > 0 ? ' at ' : 'at ') + where.map((w) => `<code>${escape(w)}</code>`).join(', ');
+        }
         html += '</div>';
       }
+
+      // Not when it is already the message - an issue with nothing but diagnostics
+      // should not say the same sentence twice.
+      if (issue.diagnostics && issue.diagnostics !== text) {
+        html += '<details style="margin-top: 6px; font-size: 90%;">';
+        html += '<summary>Server diagnostics</summary>';
+        html += `<pre style="margin-top: 6px;">${escape(issue.diagnostics)}</pre>`;
+        html += '</details>';
+      }
+
+      html += '</div>';
     }
 
+    if (!json.issue || json.issue.length === 0) {
+      html += '<div class="alert alert-secondary"><em>(no issues)</em></div>';
+    }
+
+    html += this.renderJsonSource(json);
     html += '</div>';
     return html;
   }
@@ -1391,6 +1748,31 @@ class TxHtmlRenderer {
   let
   resourceIdCounter = 0;
 
+  /**
+   * The property/filter names offered by the $filter form for a code system: the names
+   * the base specification defines for any code system, then any names known for this
+   * particular code system, then anything the CodeSystem resource declares itself.
+   * @param {Object} json the CodeSystem resource
+   * @returns {string[]} names, in that order, without duplicates
+   */
+  buildFilterPropertyNames(json) {
+    const names = new Set(BASE_FILTER_PROPERTIES);
+    for (const name of SYSTEM_FILTER_PROPERTIES[json.url] || []) {
+      names.add(name);
+    }
+    for (const prop of json.property || []) {
+      if (prop.code) {
+        names.add(prop.code);
+      }
+    }
+    for (const filter of json.filter || []) {
+      if (filter.code) {
+        names.add(filter.code);
+      }
+    }
+    return [...names];
+  }
+
   generateResourceId() {
     return 'resource_' + (++this.resourceIdCounter);
   }