Merge pull request #465 from cidgoh/improved_mapping_msg

Replace wide mapping warning msg with long msg

Author: ddooley

lib/DataHarmonizer.js

@@ -163,6 +163,7 @@ class DataHarmonizer {
 
     // Reset specify header modal values when the modal is closed
     $('#specify-headers-modal').on('hidden.bs.modal', () => {
+      $('.mapping-row').remove();
       $('#specify-headers-err-msg').hide();
       $('#specify-headers-confirm-btn').unbind();
     });
@@ -1407,23 +1408,20 @@ class DataHarmonizer {
     let flatHeaders = this.getFlatHeaders();
     const self = this;
     if (flatHeaders) {
-      $('#field-mapping').prepend(
-        '<col></col>'.repeat(flatHeaders[1].length + 1)
-      );
-      $('#expected-headers-tr').html(
-        '<td><b>Expected second row</b></td> <td>' +
-          flatHeaders[1].join('</td><td>') +
-          '</td>'
-      );
-      $('#actual-headers-tr').html(
-        '<td><b>Imported second row</b></td> <td>' +
-          matrix[1].join('</td><td>') +
-          '</td>'
-      );
-      flatHeaders[1].forEach(function (item, i) {
-        if (item != matrix[1][i]) {
-          $('#field-mapping col').get(i + 1).style.backgroundColor = 'orange';
+      const $fieldMappingBody = $('#field-mapping-body');
+      flatHeaders[1].forEach(function (expectedHeader, i) {
+        const expectedHeaderCell =
+          `<td class="field-mapping-cell">${expectedHeader}</td>`
+        const actualHeaderCell =
+          `<td class="field-mapping-cell">${matrix[1][i]}</td>`;
+        const rowCells = expectedHeaderCell + actualHeaderCell;
+        let row;
+        if (expectedHeader !== matrix[1][i]) {
+          row = $(`<tr class="table-warning mapping-row">${rowCells}</tr>`);
+        } else {
+          row = $(`<tr class="mapping-row">${rowCells}</tr>`);
         }
+        $fieldMappingBody.append(row);
       });
 
       $('#specify-headers-modal').modal('show');
@@ -1552,8 +1550,16 @@ class DataHarmonizer {
     // Map current column indices to their indices in matrix to map
     const headerMap = {};
     const unmappedHeaders = [];
-    for (const [i, expectedVal] of expectedSecondaryHeaders.entries()) {
+    for (let [i, expectedVal] of expectedSecondaryHeaders.entries()) {
       headerMap[i] = actualSecondaryHeaders.findIndex((actualVal) => {
+        // Case insensitivity
+        if (typeof actualVal === 'string' || actualVal instanceof String) {
+          actualVal = actualVal.toLowerCase()
+        }
+        if (typeof expectedVal === 'string' || expectedVal instanceof String) {
+          expectedVal = expectedVal.toLowerCase()
+        }
+
         return actualVal === expectedVal;
       });
       if (headerMap[i] === -1) {

lib/data-harmonizer.css

@@ -5,17 +5,16 @@
 }
 
 #specify-headers-comparison-row {
-  overflow-x: auto;
+  overflow-y: auto;
 }
 
 #specify-headers-err-msg {
   display: none;
 }
 
 #field-mapping-container {
-  overflow-x: scroll;
-  padding-bottom: 1rem;
-  scrollbar-width: 1rem;
+  height: 25vh;
+  width: 100%;
 }
 
 .handsontable.listbox th,
@@ -24,20 +23,9 @@
 }
 
 #field-mapping {
-  white-space: nowrap;
+  width: 100%;
 }
 
-#field-mapping col {
-  border-left: 2px solid black;
-}
-#field-mapping col:first-child {
-  background: #ff0;
-}
-#field-mapping col:nth-child(2n + 3) {
-  background: #ccc;
-}
-
-#field-mapping tr td,
-#field-mapping tr th {
-  padding: 3px;
+.field-mapping-cell {
+  width: 50%;
 }

lib/specifyHeadersModal.html

@@ -9,12 +9,17 @@
               column specification. Mismatched column(s) are shown in orange.
             </div>
           </div>
-          <div class="row my-3 border" id="specify-headers-comparison-row">
-            <div class="col">
-              <div class="row" id="field-mapping-container">
-                <table id="field-mapping">
-                  <tr id="expected-headers-tr"></tr>
-                  <tr id="actual-headers-tr"></tr>
+          <div class="row my-2" id="specify-headers-comparison-row">
+            <div class="col px-0 py-1">
+              <div id="field-mapping-container" class="container-fluid">
+                <table id="field-mapping" class="table-bordered">
+                  <thead>
+                    <tr>
+                      <th class="field-mapping-cell">Expected header</th>
+                      <th class="field-mapping-cell">Actual header</th>
+                    </tr>
+                  </thead>
+                  <tbody id="field-mapping-body"></tbody>
                 </table>
               </div>
             </div>