Merge branch 'fix-overlay-matching' into 'main'

Fix overlay matching

See merge request sl5tf/control-overlays-selector!3

Author: Peter Wagstaff

index.html

@@ -23,6 +23,7 @@
             line-height: 1.4;
             color: #333;
             background-color: #f8f9fa;
+            padding-bottom: 100vh;
         }
         /* --------------------
            Header
@@ -894,6 +895,20 @@ <h2 class="toggles-title">Additional Security Assumptions</h2>
         // --------------------
         // Helper Functions
         // --------------------
+        function formatControlId(controlId) {
+            // Format control IDs with zero-padding for display
+            // e.g., "AC-1" -> "AC-01", "AC-10" -> "AC-10"
+            // Also handles enhancements: "AC-1(1)" -> "AC-01(01)"
+            return controlId.replace(/([A-Z]{2})-(\d+)(\((\d+)\))?/, (match, family, number, enhancement, enhNum) => {
+                const paddedNumber = number.padStart(2, '0');
+                if (enhancement) {
+                    const paddedEnhNum = enhNum.padStart(2, '0');
+                    return `${family}-${paddedNumber}(${paddedEnhNum})`;
+                }
+                return `${family}-${paddedNumber}`;
+            });
+        }
+
         function formatControlText(text) {
             if (!text) return '';
 
@@ -995,7 +1010,7 @@ <h2 class="toggles-title">Additional Security Assumptions</h2>
                 controlCard.innerHTML = `
                     <div class="control-header ${control.catalog === 'sl5' ? 'sl5-style' : ''}" onclick="toggleControl('${control.id}')">
                         <div style="display: flex; align-items: center; flex: 1;">
-                            ${nistUrl ? `<a href="${nistUrl}" target="_blank" class="control-id-link" onclick="event.stopPropagation()">${control.id}</a>` : `<span class="control-id">${control.id}</span>`}
+                            ${nistUrl ? `<a href="${nistUrl}" target="_blank" class="control-id-link" onclick="event.stopPropagation()">${formatControlId(control.id)}</a>` : `<span class="control-id">${formatControlId(control.id)}</span>`}
                             ${isWithdrawn ? `<span class="withdrawn-badge">Withdrawn</span>` : ''}
                             <span class="control-name">${control.name}</span>
                             ${hasEnhancements ? `<span class="enhancement-count">(${enhancements.length} enhancement${enhancements.length > 1 ? 's' : ''})</span>` : ''}
@@ -1043,7 +1058,7 @@ <h2 class="toggles-title">Additional Security Assumptions</h2>
                             <div class="related-controls">
                                 <h4>Related Controls:</h4>
                                 <div class="related-controls-list">
-                                    ${control.relatedControls.map(rc => `<span class="related-control-tag" onclick="showControlModal('${rc}')">${rc}</span>`).join(' ')}
+                                    ${control.relatedControls.map(rc => `<span class="related-control-tag" onclick="showControlModal('${rc}')">${formatControlId(rc)}</span>`).join(' ')}
                                 </div>
                             </div>
                         ` : ''}
@@ -1167,7 +1182,7 @@ <h3 class="overlays-title">Overlays</h3>
                 </div>
                 <div class="modal-body">
                     <div class="modal-control-info">
-                        <div class="modal-control-id">${targetControl.id}</div>
+                        <div class="modal-control-id">${formatControlId(targetControl.id)}</div>
                         <div class="modal-control-name">${targetControl.name}</div>
                         <div class="modal-control-text">
                             <strong>Control Text:</strong><br>
@@ -1240,24 +1255,12 @@ <h3 class="overlays-title">Overlays</h3>
             const overlays = [];
 
             // Check SL5 - direct lookup (first in order)
-            // Try both original format and zero-padded format
             if (sl5Data && sl5Data[controlId]) {
                 overlays.push({
                     type: 'sl5',
                     name: 'SL5',
                     data: sl5Data[controlId]
                 });
-            } else if (sl5Data) {
-                // Try zero-padded format for both parent controls and enhancements
-                // "SC-7" -> "SC-07" and "SC-7(1)" -> "SC-07(1)"
-                const paddedControlId = controlId.replace(/-(\d)(\(|$)/, '-0$1$2');
-                if (sl5Data[paddedControlId]) {
-                    overlays.push({
-                        type: 'sl5',
-                        name: 'SL5',
-                        data: sl5Data[paddedControlId]
-                    });
-                }
             }
 
             // Check FedRAMP High - search through all families
@@ -1634,7 +1637,7 @@ <h3 class="overlays-title">Overlays</h3>
                 <div class="enhancement-card" style="display: ${isExpanded ? 'block' : 'none'}; ${grayedOutStyle}">
                     <div class="enhancement-header ${enhancement.catalog === 'sl5' ? 'sl5-style' : ''}" onclick="toggleControl('${enhancementId}')">
                         <div style="display: flex; align-items: center; flex: 1;">
-                            <span class="enhancement-id">${enhancement.id}</span>
+                            <span class="enhancement-id">${formatControlId(enhancement.id)}</span>
                             ${isWithdrawn ? `<span class="withdrawn-badge">Withdrawn</span>` : ''}
                             <span class="enhancement-name">${enhancement.name}</span>
                         </div>
@@ -1655,7 +1658,7 @@ <h3 class="overlays-title">Overlays</h3>
                             <div class="related-controls">
                                 <h4>Related Controls:</h4>
                                 <div class="related-controls-list">
-                                    ${enhancement.relatedControls.map(rc => `<span class="related-control-tag" onclick="showControlModal('${rc}')">${rc}</span>`).join('')}
+                                    ${enhancement.relatedControls.map(rc => `<span class="related-control-tag" onclick="showControlModal('${rc}')">${formatControlId(rc)}</span>`).join('')}
                                 </div>
                             </div>
                         ` : ''}