changes for the table view structure

content_quality_tool_public/static/css/attr-extraction.css

@@ -555,6 +555,12 @@ td{
     color: #dc3545; /* Darker red text */
 }
 
+/* --- MATCH STYLES (NEW) --- */
+.comparison-table .match-row {
+    background-color: #f1fff4; /* Light green background for the whole row */
+    border-left: 5px solid #28a745; /* Green border on the left */
+}
+
 .comparison-table .found-value {
     font-weight: bold;
     color: green; /* Darker red text */
@@ -785,4 +791,44 @@ td{
 
 #cardsContainer .attribute-selectors{
     display: inline-block;
+}
+
+/* Card Background and Border (for MATCH) */
+.comparison-card.match-card {
+    border: 2px solid #28a745; /* Green border */
+    background-color: #f6fff8; /* Very light green background */
+}
+
+/* Card Background and Border (for MISMATCH) */
+.comparison-card.mismatch-card {
+    border: 2px solid #dc3545; /* Red border */
+    background-color: #fff8f8; /* Very light red background */
+}
+
+/* Specific highlight for AI value box on mismatch */
+.mismatch-card .mismatch-value {
+    background-color: #fff0f0; /* Light red background for the value box */
+    color: #dc3545; /* Red text */
+    font-weight: bold;
+}
+
+.match-status-indicator {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 2px 8px;
+    border-bottom-left-radius: 8px;
+    font-size: 0.85em;
+    font-weight: bold;
+    transform: translateY(-1px);
+}
+
+.match-card .match-status-indicator {
+    background-color: #28a745; /* Dark Green */
+    color: white;
+}
+
+.mismatch-card .match-status-indicator {
+    background-color: #dc3545; /* Dark Red */
+    color: white;
 }

content_quality_tool_public/static/js/attr-extraction.js

@@ -1908,7 +1908,7 @@ function renderMandatoryComparisonCards(attributes, title) {
         content.appendChild(originalBox);
 
         // AI Value Box
-        const aiBox = el('div', `value-box ai-box ${attr.isMatch ? '' : 'mismatch-value'}`);
+        const aiBox = el('div', `value-box ai-box ${attr.isMatch ? 'found-value' : 'mismatch-value'}`);
         aiBox.innerHTML = `
             <div class="value-label">AI Generated Value <span class="value-source">(${attr.source})</span></div>
             <div class="value-text">${attr.aiValue}</div>
@@ -1965,6 +1965,87 @@ function renderMandatoryComparisonCards(attributes, title) {
  * @param {string} title - The title for the section (used for the header).
  * @returns {HTMLElement} A div containing the comparison cards.
  */
+// function renderMandatoryComparisonCards(attributes, title) {
+//     const section = el('div', 'attribute-section mandatory-comparison-section');
+    
+//     // --- 1. Flatten Mandatory Attributes ---
+//     let attributeEntries = [];
+
+//     Object.keys(attributes).forEach(key => {
+//         const valuesArray = Array.isArray(attributes[key]) ? attributes[key] : [attributes[key]]; 
+//         valuesArray.forEach(v => {
+//             const aiValue = v.value || 'N/A';
+//             const originalValue = v.original_value || 'N/A';
+            
+//             const isMatch = (String(aiValue).trim().toLowerCase() === String(originalValue).trim().toLowerCase());
+
+//             attributeEntries.push({
+//                 name: key,
+//                 aiValue: aiValue,
+//                 originalValue: originalValue,
+//                 isMatch: isMatch,
+//                 source: v.source || 'N/A'
+//             });
+//         });
+//     });
+
+//     // --- 2. Section Header ---
+//     const titleEl = el('div', 'section-title');
+//     titleEl.innerHTML = `<h3>${title} (${attributeEntries.length})</h3>`;
+//     section.appendChild(titleEl);
+    
+//     if (attributeEntries.length === 0) {
+//         const msg = el('p', 'no-attributes-message');
+//         msg.textContent = `No ${title.toLowerCase()} found.`;
+//         section.appendChild(msg);
+//         return section;
+//     }
+
+//     // --- 3. Card Container ---
+//     const cardsContainer = el('div', 'comparison-cards-container');
+
+//     attributeEntries.forEach(attr => {
+//         const card = el('div', `comparison-card ${attr.isMatch ? 'match' : 'mismatch-card'}`);
+
+//         const header = el('div', 'card-header');
+//         header.textContent = attr.name.replace(/_/g, ' ');
+//         card.appendChild(header);
+
+//         const content = el('div', 'card-content');
+
+//         // Existing Value Box
+//         const originalBox = el('div', 'value-box original-box');
+//         originalBox.innerHTML = `
+//             <div class="value-label">Manually Identified Value</div>
+//             <div class="value-text">${attr.originalValue}</div>
+//         `;
+//         content.appendChild(originalBox);
+
+//         // AI Value Box
+//         const aiBox = el('div', `value-box ai-box ${attr.isMatch ? 'found-value' : 'mismatch-value'}`);
+//         aiBox.innerHTML = `
+//             <div class="value-label">AI Generated Value <span class="value-source">(${attr.source})</span></div>
+//             <div class="value-text">${attr.aiValue}</div>
+//         `;
+//         content.appendChild(aiBox);
+
+//         card.appendChild(content);
+
+//         // Mismatch Indicator
+//         if (!attr.isMatch) {
+//             const indicator = el('div', 'mismatch-indicator');
+//             // indicator.innerHTML = '❌ MISMATCH';
+//             indicator.innerHTML = attr.isMatch ? '✅ MATCH' : '❌ MISMATCH';
+//             card.appendChild(indicator);
+//         }
+
+//         cardsContainer.appendChild(card);
+//     });
+
+//     section.appendChild(cardsContainer);
+//     return section;
+// }
+
 function renderMandatoryComparisonCards(attributes, title) {
     const section = el('div', 'attribute-section mandatory-comparison-section');
     
@@ -2005,7 +2086,9 @@ function renderMandatoryComparisonCards(attributes, title) {
     const cardsContainer = el('div', 'comparison-cards-container');
 
     attributeEntries.forEach(attr => {
-        const card = el('div', `comparison-card ${attr.isMatch ? 'match' : 'mismatch-card'}`);
+        // --- CHANGE 1: Apply 'match-card' or 'mismatch-card' explicitly ---
+        const cardClass = attr.isMatch ? 'match-card' : 'mismatch-card';
+        const card = el('div', `comparison-card ${cardClass}`);
 
         const header = el('div', 'card-header');
         header.textContent = attr.name.replace(/_/g, ' ');
@@ -2022,7 +2105,8 @@ function renderMandatoryComparisonCards(attributes, title) {
         content.appendChild(originalBox);
 
         // AI Value Box
-        const aiBox = el('div', `value-box ai-box ${attr.isMatch ? 'match' : 'mismatch-value'}`);
+        // Removed 'found-value' class here as styling should rely on the parent card class
+        const aiBox = el('div', `value-box ai-box ${attr.isMatch ? '' : 'mismatch-value'}`); 
         aiBox.innerHTML = `
             <div class="value-label">AI Generated Value <span class="value-source">(${attr.source})</span></div>
             <div class="value-text">${attr.aiValue}</div>
@@ -2031,13 +2115,10 @@ function renderMandatoryComparisonCards(attributes, title) {
 
         card.appendChild(content);
 
-        // Mismatch Indicator
-        if (!attr.isMatch) {
-            const indicator = el('div', 'mismatch-indicator');
-            // indicator.innerHTML = '❌ MISMATCH';
-            indicator.innerHTML = attr.isMatch ? '✅ MATCH' : '❌ MISMATCH';
-            card.appendChild(indicator);
-        }
+        // --- CHANGE 2: Display the indicator for ALL cards, controlling color via CSS ---
+        const indicator = el('div', 'match-status-indicator');
+        indicator.innerHTML = attr.isMatch ? '✅ MATCH' : '❌ MISMATCH';
+        card.appendChild(indicator);
 
         cardsContainer.appendChild(card);
     });