TEMP - Restore legacy data dictionary

src/_config.yml

@@ -73,6 +73,7 @@ include:
    - assets/uswds/img/usa-icons/launch.svg
    - assets/uswds/img/usa-icons/launch--white.svg
    - assets/uswds/img/usa-icons/remove.svg
+   - assets/uswds/img/usa-icons/unfold_more.svg
    - assets/uswds/img/usa-icons/warning.svg
 
 defaults:

src/_pages/data-dictionary.md

@@ -0,0 +1,51 @@
+---
+layout: base
+page_title: "Data Dictionary"
+seo_title: "Data Dictionary"
+description: "A detailed breakdown of the claims data elements provided by the AB2D API, for both v2 (R4) and v1 (STU3)."
+permalink: /data-dictionary
+---
+
+<div
+  class="padding-x-5"
+  data-data-dictionary
+  data-base-url="{{ site.baseurl }}"
+>
+  <div class="data-dictionary__description"></div>
+
+  <div class="data-dictionary__wrapper">
+    <div class="data-dictionary__header">
+      <div class="header-meta-data">
+        <div class="definition-count"></div>
+        <div class="inputs__wrapper">
+          <label for="versions">Version:</label>
+          <select
+            class="usa-select width-auto"
+            name="versions"
+            id="versions"
+          >
+            <option value="r4-v2">R4 (v2)</option>
+            <option value="stu3-v1">STU3 (v1)</option>
+          </select>
+        </div>
+      </div>
+      <div class="column-headers">
+        <div class="field-name-desc">field name/description</div>
+        <div class="claim-type">claim type(s)</div>
+        <div class="ccw-column-name">ccw column name</div>
+        <div class="type-size">type (size)</div>
+        <div class="example">example</div>
+        <div class="legend">
+          <pre class="red-highlight margin-0">value</pre>
+          <pre class="blue-highlight margin-0">discriminator</pre>
+        </div>
+      </div>
+    </div>
+    <div id="data_dictionary"></div>
+  </div>
+</div>
+
+<script
+  src="{{ '/assets/js/data-dictionary.js' | relative_url }}"
+  defer
+></script>

src/assets/js/data-dictionary.js

@@ -0,0 +1,156 @@
+/**
+ * Data Dictionary renderer.
+ *
+ * Migrated from the legacy site's assets/js/data-dictionary-parser.js, which
+ * depended on jQuery. This site doesn't ship jQuery, so the same logic is
+ * expressed with plain DOM APIs. Markup and class names are unchanged so the
+ * styles carry over as-is.
+ *
+ * Data files live at <baseUrl>/assets/data/<version>.json and are authored in
+ * this repo. field_name, the section examples, and the description all contain
+ * intentional markup (number markers and value/discriminator highlights), so
+ * those are assigned as HTML; every other field is set as text.
+ */
+(function () {
+  'use strict';
+
+  var VERSIONS = {
+    'r4-v2': 'r4-v2.json',
+    'stu3-v1': 'stu3-v1.json',
+  };
+  var DEFAULT_VERSION = 'r4-v2';
+
+  var root = document.querySelector('[data-data-dictionary]');
+  if (!root) return;
+
+  var baseUrl = root.getAttribute('data-base-url') || '';
+  var descriptionEl = root.querySelector('.data-dictionary__description');
+  var countEl = root.querySelector('.definition-count');
+  var tableEl = root.querySelector('#data_dictionary');
+  var selectEl = root.querySelector('#versions');
+
+  function el(tag, className) {
+    var node = document.createElement(tag);
+    if (className) node.className = className;
+    return node;
+  }
+
+  function createClaimTypes(claimTypes) {
+    var wrapper = el('div', 'claim-type');
+    claimTypes.split(',').forEach(function (claimType) {
+      var p = el('p');
+      p.textContent = claimType;
+      wrapper.appendChild(p);
+    });
+    return wrapper;
+  }
+
+  function createDefinition(definitions) {
+    var wrapper = el('div', 'definition__wrapper');
+
+    definitions.forEach(function (definition) {
+      var row = el('div', 'definition');
+
+      var nameDesc = el('div', 'field-name-desc__wrapper');
+      var name = el('div', 'field-name');
+      name.innerHTML = definition.field_name;
+      var desc = el('div', 'field-desc');
+      desc.textContent = definition.field_description;
+      nameDesc.appendChild(name);
+      nameDesc.appendChild(desc);
+      row.appendChild(nameDesc);
+
+      row.appendChild(createClaimTypes(definition.claim_types));
+
+      var ccw = el('div', 'ccw-column-name');
+      ccw.textContent = definition.ccw_column_name;
+      row.appendChild(ccw);
+
+      var typeSize = el('div', 'type-size');
+      typeSize.textContent = definition.type_size;
+      row.appendChild(typeSize);
+
+      wrapper.appendChild(row);
+    });
+
+    return wrapper;
+  }
+
+  function createExample(example) {
+    var pre = el('pre', 'example');
+
+    // Repeated per section so the legend stays visible on narrow screens,
+    // where the shared header legend is hidden.
+    var legend = el('div', 'legend');
+    var value = el('pre', 'red-highlight');
+    value.textContent = 'value';
+    var discriminator = el('pre', 'blue-highlight');
+    discriminator.textContent = 'discriminator';
+    legend.appendChild(value);
+    legend.appendChild(discriminator);
+
+    var code = el('code');
+    code.innerHTML = JSON.stringify(example, null, 2);
+
+    pre.appendChild(legend);
+    pre.appendChild(code);
+    return pre;
+  }
+
+  function createSection(section) {
+    var wrapper = el('div', 'section__wrapper');
+
+    var title = el('div', 'section-title');
+    title.textContent = section.title;
+    wrapper.appendChild(title);
+
+    var body = el('div', 'definition-example__wrapper');
+    body.appendChild(createDefinition(section.definitions));
+    body.appendChild(createExample(section.example));
+    wrapper.appendChild(body);
+
+    return wrapper;
+  }
+
+  function render(version) {
+    var file = VERSIONS[version] || VERSIONS[DEFAULT_VERSION];
+
+    tableEl.replaceChildren();
+    descriptionEl.replaceChildren();
+
+    return fetch('/' + baseUrl + 'assets/data/' + file)
+      .then(function (res) {
+        if (!res.ok) throw new Error('Request failed: ' + res.status);
+        return res.json();
+      })
+      .then(function (json) {
+        descriptionEl.innerHTML = json.description;
+
+        var fragment = document.createDocumentFragment();
+        var definitionsCount = 0;
+
+        json.sections.forEach(function (section) {
+          fragment.appendChild(createSection(section));
+          definitionsCount += section.definitions.length;
+        });
+
+        tableEl.appendChild(fragment);
+        countEl.textContent = definitionsCount + ' data elements';
+      })
+      .catch(function (error) {
+        descriptionEl.textContent =
+          'Sorry, the Data Dictionary could not be loaded. Please refresh the page to try again.';
+        countEl.textContent = '';
+        console.error('Data Dictionary failed to load:', error);
+      });
+  }
+
+  if (selectEl) {
+    selectEl.value = DEFAULT_VERSION;
+    selectEl.addEventListener('change', function (event) {
+      render(event.target.value);
+    });
+  }
+
+  render(DEFAULT_VERSION);
+})();