changes for the UI for the labels

content_quality_tool_public/static/js/attr-extraction.js

@@ -116,6 +116,15 @@ function updateSelectionInfo() {
 
 function setChecked(id, checked) { if (checked) selectedIds.add(id); else selectedIds.delete(id); updateSelectionInfo(); }
 // function setCheckedAttributes(id,attribute, checked) { if (checked) selectedAttributes.add({id: [attribute]}); else selectedIds.delete({id:[attribute]}); updateSelectionInfo(); }
+function formatString(str) {
+  return str
+    // Replace underscores with spaces
+    .replace(/_/g, ' ')
+    // Insert a space before any uppercase letter (except at the start)
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    // Capitalize the first letter
+    .replace(/^./, char => char.toUpperCase());
+}
 
 // --- Chips rendering ---
 function renderChips(container, obj, memoryMap) {
@@ -123,13 +132,13 @@ function renderChips(container, obj, memoryMap) {
     let count = 0;
     Object.entries(obj || {}).forEach(([k, v]) => {
     const chip = el('span', 'chip');
-    const kEl = el('span', 'k'); kEl.textContent = k + ':';
+    const kEl = el('span', 'k'); kEl.textContent = formatString(k) + ':';
     // console.log("v",v);
     let resVal = "";
     let sourceVal = "";
     if(v instanceof Array){
-        resVal  = String(v.map(v => v.value).join(", "));
-        sourceVal = String(v[0]?.source);
+        resVal  = String(v.map(v => formatString(v.value)).join(", "));
+        sourceVal = String(formatString(v[0]?.source));
         const vEl = el('span', 'v'); vEl.textContent = ' ' + resVal  +' (' + sourceVal + ')';
         chip.appendChild(kEl); chip.appendChild(vEl);
     }
@@ -550,6 +559,7 @@ function renderProductsTable(items = getCurrentSlice()) {
             const cb = document.createElement('input'); 
             cb.type = 'checkbox'; 
             cb.checked = isProductSelected(p.item_id);
+            // console.log("checkkkkk")
             
             // The state updater function is bound to this specific row/checkbox
             const updateProductState = getProductStateUpdater(p, cb, tr);
@@ -618,6 +628,7 @@ function renderProductsTable(items = getCurrentSlice()) {
             
             // b) Main Checkbox Change Logic
             cb.addEventListener('change', () => { 
+                // console.log("cheeeeeeeeee");
                 updateProductState(); // Update state on check/uncheck
                 attrContainer.classList.toggle('disabled', !cb.checked); // Enable/Disable chips
             });
@@ -625,6 +636,7 @@ function renderProductsTable(items = getCurrentSlice()) {
             // c) Row Click Listener (Updated to ignore button clicks)
             tr.addEventListener('click', (e) => { 
                 const tag = e.target.tagName.toLowerCase();
+                // console.log("clikk")
                 if (tag !== 'input' && tag !== 'button') { 
                     cb.checked = !cb.checked; 
                     cb.dispatchEvent(new Event('change')); 
@@ -633,6 +645,20 @@ function renderProductsTable(items = getCurrentSlice()) {
             }else{
                 const tdAttr = document.createElement('td'); 
                 tr.appendChild(tdAttr);
+                // b) Main Checkbox Change Logic
+                cb.addEventListener('change', () => { 
+                    // console.log("cheeeeeeeeee");
+                    updateProductState(); // Update state on check/uncheck
+                    attrContainer.classList.toggle('disabled', !cb.checked); // Enable/Disable chips
+                });
+                tr.addEventListener('click', (e) => { 
+                    const tag = e.target.tagName.toLowerCase();
+                    // console.log("clikk")
+                    if (tag !== 'input' && tag !== 'button') { 
+                        cb.checked = !cb.checked; 
+                        cb.dispatchEvent(new Event('change')); 
+                    } 
+                });
             }
             
             // 5. Append Rows to TBODY
@@ -892,9 +918,9 @@ function resetAll() {
     const thresholdInput = document.getElementById('thresholdRange');
     const thresholdDisplay = document.getElementById('thresholdValue');
 
-    thresholdInput.value = '0.2'; // or any default value you prefer
+    thresholdInput.value = '0.5'; // or any default value you prefer
     if (thresholdDisplay) {
-        thresholdDisplay.textContent = '0.2';
+        thresholdDisplay.textContent = '0.5';
     }
 }
 
@@ -1076,7 +1102,7 @@ function renderPagination() {
 // Function to add/remove product from the state and manage its attributes
 function toggleProductSelection(itemId, isChecked, attributes = {}) {
     const index = selectedProductsWithAttributes.findIndex(p => p.item_id === itemId);
-
+    // console.log("index",index);
     if (isChecked) {
         // If selecting, ensure the product object exists in the array
         if (index === -1) {

content_quality_tool_public/templates/attr-extraction.html

@@ -87,7 +87,7 @@
                         </div>
                         <!-- <input type="checkbox" id="extract_additional" name="extract_additional"/>
                         <input type="checkbox" id="process_image" name="process_image"/> -->
-                        <button id="btnSubmit" class="btn btn-primary">Submit</button>
+                        <button id="btnSubmit" class="btn btn-primary" title="AI Suggested">View Attributes</button>
                         <button id="btnReset" class="btn btn-secondary">Reset</button>
                         <button id="btnSelectAll" class="btn btn-primary">Select all</button>
                         <!-- Upload trigger button -->
@@ -125,10 +125,10 @@
                             
                         </div>
                         <div><p>Select multiple :<select id="mandatory-attributes" name="mandatoryAttributes[]" aria-labelledby="select a attribute for which multiple data required" multiple="multiple" style="width: 100%;"></select></p></div>
-                        <div>
+                        <div style="display: none;">
                             <label for="thresholdRange">Threshold:</label>
-                            <input type="range" id="thresholdRange" min="0" max="1" step="0.01" value="0.2">
-                            <span id="thresholdValue">0.2</span>
+                            <input type="range" id="thresholdRange" min="0" max="1" step="0.01" value="0.5">
+                            <span id="thresholdValue">0.5</span>
                         </div>
                         </div>
                         <div class="card-body">