Update templates/index.html

templates/index.html

@@ -12,7 +12,6 @@
         .source-col-row.active { background-color: #cfe2ff; font-weight: bold; }
         pre { background: #212529; color: #adbac7; padding: 15px; border-radius: 6px; font-size: 0.8em; max-height: 250px; overflow: auto; }
         
-        /* Builder Styles */
         .builder-row { border: 1px solid #dee2e6; border-radius: 6px; background: #fff; padding: 10px; margin-bottom: 10px; position: relative; }
         .builder-row.mode-list { border-left: 4px solid #198754; }
         .builder-row.mode-python { border-left: 4px solid #fd7e14; }
@@ -31,7 +30,6 @@
         <div><input type="password" id="token" class="form-control form-control-sm" placeholder="HF Token" style="width: 200px;"></div>
     </div>
 
-    <!-- 1. CONFIG -->
     <div class="box">
         <div class="row g-2">
             <div class="col-md-4">
@@ -46,9 +44,7 @@
         </div>
     </div>
 
-    <!-- WORKSPACE -->
     <div class="row" id="workspace" style="display:none;">
-        <!-- LEFT: EXPLORER -->
         <div class="col-md-4">
             <div class="box h-100">
                 <h6>Source Columns</h6>
@@ -59,7 +55,6 @@
             </div>
         </div>
 
-        <!-- RIGHT: BUILDER -->
         <div class="col-md-8">
             <div class="box h-100">
                 <div class="d-flex justify-content-between mb-3">
@@ -95,32 +90,26 @@
                     </div>
                 </div>
                 
-                <!-- Status Box -->
                 <div id="job_status" class="alert mt-3" style="display:none;"></div>
                 <div id="final_preview" class="mt-3" style="display:none;"></div>
-
             </div>
         </div>
     </div>
 
-
-
 <script>
     let schemaData = {}; 
     let sampleRows = [];
-
-    // --- TEMPLATES ---
+    
     function addBuilderRow() {
         const container = document.getElementById('builder_container');
         const id = 'row_' + Date.now();
         
-        // Build Source Options
         let sourceOpts = '<option value="">Select Source...</option>';
         for(let col in schemaData) {
             let label = col + (schemaData[col].type === 'List' ? ' [List]' : '');
             sourceOpts += `<option value="${col}">${label}</option>`;
         }
-
+        
         const div = document.createElement('div');
         div.className = "builder-row mode-simple";
         div.id = id;
@@ -143,33 +132,29 @@
                 </div>
             </div>
             
-            <!-- DYNAMIC INPUT AREA -->
             <div class="inputs-area">
-                <!-- Default Simple Mode -->
                 <div class="input-group input-group-sm">
                     <span class="input-group-text">Source</span>
                     <select class="form-select source-col">${sourceOpts}</select>
-                    <input type="text" class="form-control" placeholder="Optional .dot.notation" id="${id}_simple_extra">
+                    <input type="text" class="form-control source-extra" placeholder="Optional .dot.notation">
                 </div>
             </div>
         `;
         container.appendChild(div);
     }
-
+    
     function changeMode(rowId, mode) {
         const row = document.getElementById(rowId);
         const area = row.querySelector('.inputs-area');
         const badge = row.querySelector('.mode-badge');
         
-        // Reset classes
         row.className = `builder-row mode-${mode}`;
         
-        // Build Source Options again
         let sourceOpts = '<option value="">Select Col...</option>';
         for(let col in schemaData) {
             sourceOpts += `<option value="${col}">${col}</option>`;
         }
-
+        
         if(mode === 'simple') {
             badge.innerText = "Simple Path";
             area.innerHTML = `
@@ -208,56 +193,93 @@
                 </div>`;
         }
     }
-
+    
     function getRecipe() {
         const rows = document.querySelectorAll('.builder-row');
         let columns = [];
         
         rows.forEach(r => {
-            const name = r.querySelector('.target-name').value;
+            const name = r.querySelector('.target-name').value.trim();
             const mode = r.querySelector('.mode-select').value;
             
-            if(!name) return; // skip empty names
-
+            // Skip rows with no target name
+            if(!name) {
+                console.warn('Skipping row with empty target name');
+                return;
+            }
+            
             if(mode === 'simple') {
                 let src = r.querySelector('.source-col').value;
-                let extra = r.querySelector('.source-extra').value;
-                if(extra) { src = extra.startsWith('.') ? src + extra : src + '.' + extra; }
+                let extra = r.querySelector('.source-extra').value.trim();
+                
+                // CRITICAL FIX: Validate that source is selected
+                if(!src) {
+                    console.error(`Row "${name}" has no source column selected`);
+                    alert(`Error: Column "${name}" has no source selected!`);
+                    return;
+                }
                 
+                // Append extra path if provided
+                if(extra) {
+                    // Handle both .dot.notation and dot.notation
+                    src = extra.startsWith('.') ? src + extra : src + '.' + extra;
+                }
+                
+                console.log(`Simple path: ${name} <- ${src}`);
                 columns.push({ type: 'simple', name: name, source: src });
             }
             else if(mode === 'list_search') {
+                const srcCol = r.querySelector('.source-col').value;
+                const filterKey = r.querySelector('.filter-key').value.trim();
+                const filterVal = r.querySelector('.filter-val').value.trim();
+                const targetKey = r.querySelector('.target-key').value.trim();
+                
+                if(!srcCol || !filterKey || !filterVal || !targetKey) {
+                    console.error(`List search column "${name}" is incomplete`);
+                    alert(`Error: Column "${name}" list search is incomplete!`);
+                    return;
+                }
+                
                 columns.push({
                     type: 'list_search',
                     name: name,
-                    source: r.querySelector('.source-col').value,
-                    filter_key: r.querySelector('.filter-key').value,
-                    filter_val: r.querySelector('.filter-val').value,
-                    target_key: r.querySelector('.target-key').value
+                    source: srcCol,
+                    filter_key: filterKey,
+                    filter_val: filterVal,
+                    target_key: targetKey
                 });
             }
             else if(mode === 'python') {
+                const expr = r.querySelector('.python-expr').value.trim();
+                
+                if(!expr) {
+                    console.error(`Python column "${name}" has no expression`);
+                    alert(`Error: Column "${name}" has no Python expression!`);
+                    return;
+                }
+                
                 columns.push({
                     type: 'python',
                     name: name,
-                    expression: r.querySelector('.python-expr').value
+                    expression: expr
                 });
             }
         });
-
-        return {
-            filter_rule: document.getElementById('source_filter').value,
+        
+        const recipe = {
+            filter_rule: document.getElementById('source_filter').value.trim(),
             columns: columns
         };
+        
+        console.log('Generated recipe:', JSON.stringify(recipe, null, 2));
+        return recipe;
     }
-
-  async function loadMetadata() {
+    
+    async function loadMetadata() {
         const btn = document.querySelector('button[onclick="loadMetadata()"]');
         const tokenVal = document.getElementById('token').value;
         const datasetVal = document.getElementById('dataset_id').value;
-
         if(!datasetVal) { alert("Please enter a Dataset ID"); return; }
-
         btn.disabled = true; btn.innerText = "...";
         
         try {
@@ -272,11 +294,9 @@
             const data = await res.json();
             
             if(data.status === 'success') {
-                // Populate Configs
                 const confSel = document.getElementById('config_select');
                 confSel.innerHTML = '';
                 
-                // Safe check: Ensure configs is an array
                 if (Array.isArray(data.configs) && data.configs.length > 0) {
                     data.configs.forEach(c => {
                         confSel.innerHTML += `<option value="${c}">${c}</option>`;
@@ -285,11 +305,9 @@
                      confSel.innerHTML = `<option value="default">default</option>`;
                 }
                 confSel.disabled = false;
-
-                // Populate Splits safely
+                
                 populateSplits(data.splits);
                 
-                // Set license if UI element exists and data returned it
                 const licInput = document.getElementById('license_input');
                 if(data.license_detected && licInput) {
                     licInput.value = data.license_detected;
@@ -306,26 +324,23 @@
         
         btn.disabled = false; btn.innerText = "Connect";
     }
-
+    
     function populateSplits(splits) {
         const sel = document.getElementById('split_select');
         sel.innerHTML = '';
         
-        // Safe check: Ensure splits is an array
         if (Array.isArray(splits) && splits.length > 0) {
             splits.forEach(s => sel.innerHTML += `<option value="${s}">${s}</option>`);
         } else {
-             // Fallback if array is empty or undefined
              sel.innerHTML = `<option value="train">train (fallback)</option>`;
         }
         sel.disabled = false;
     }
-
+    
     async function updateSplits() {
         const conf = document.getElementById('config_select').value;
         const ds = document.getElementById('dataset_id').value;
         const token = document.getElementById('token').value;
-
         try {
             const res = await fetch('/get_splits', {
                 method: 'POST', headers: {'Content-Type': 'application/json'},
@@ -344,38 +359,46 @@
             populateSplits(['train', 'test', 'validation']);
         }
     }
-
+    
     async function startInspection() {
         const btn = document.getElementById('inspect_btn');
         btn.innerText = "Scanning..."; btn.disabled = true;
-
-        const res = await fetch('/inspect_rows', {
-            method: 'POST', headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                token: document.getElementById('token').value,
-                dataset_id: document.getElementById('dataset_id').value,
-                config: document.getElementById('config_select').value,
-                split: document.getElementById('split_select').value
-            })
-        });
-        const data = await res.json();
         
-        if(data.status === 'success') {
-            document.getElementById('workspace').style.display = 'flex';
-            sampleRows = data.samples;
-            schemaData = data.schema;
+        try {
+            const res = await fetch('/inspect_rows', {
+                method: 'POST', headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({
+                    token: document.getElementById('token').value,
+                    dataset_id: document.getElementById('dataset_id').value,
+                    config: document.getElementById('config_select').value,
+                    split: document.getElementById('split_select').value
+                })
+            });
+            const data = await res.json();
             
-            // Render Source List
-            const list = document.getElementById('source_col_list');
-            list.innerHTML = '';
-            for(let col in schemaData) {
-                let badge = schemaData[col].type === 'List' ? '<span class="badge bg-warning text-dark float-end">List</span>' : '';
-                list.innerHTML += `<li class="list-group-item source-col-row" onclick="previewCol('${col}')">${col} ${badge}</li>`;
+            if(data.status === 'success') {
+                document.getElementById('workspace').style.display = 'flex';
+                sampleRows = data.samples;
+                schemaData = data.schema;
+                
+                const list = document.getElementById('source_col_list');
+                list.innerHTML = '';
+                for(let col in schemaData) {
+                    let badge = schemaData[col].type === 'List' ? '<span class="badge bg-warning text-dark float-end">List</span>' : '';
+                    list.innerHTML += `<li class="list-group-item source-col-row" onclick="previewCol('${col}')">${col} ${badge}</li>`;
+                }
+            } else { 
+                alert('Error: ' + data.message); 
             }
-        } else { alert(data.message); }
-        btn.innerText = "Analyze Schema"; btn.disabled = false;
+        } catch(e) {
+            console.error(e);
+            alert('Network error: ' + e);
+        }
+        
+        btn.innerText = "Analyze Schema"; 
+        btn.disabled = false;
     }
-
+    
     function previewCol(col) {
         let html = '';
         sampleRows.forEach(r => {
@@ -385,50 +408,100 @@
         });
         document.getElementById('data_preview_box').innerHTML = `<pre>${html}</pre>`;
     }
-
+    
     async function runPreview() {
         const box = document.getElementById('final_preview');
-        box.style.display='block'; box.innerHTML = "Generating...";
+        box.style.display='block'; 
+        box.innerHTML = "Generating preview...";
         
-        const res = await fetch('/preview', {
-            method: 'POST', headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({
-                token: document.getElementById('token').value,
-                dataset_id: document.getElementById('dataset_id').value,
-                config: document.getElementById('config_select').value,
-                split: document.getElementById('split_select').value,
-                recipe: getRecipe()
-            })
-        });
-        const data = await res.json();
-        if(data.status === 'success') box.innerHTML = `<pre>${JSON.stringify(data.rows, null, 2)}</pre>`;
-        else box.innerHTML = `<div class="text-danger">${data.message}</div>`;
+        const recipe = getRecipe();
+        
+        // Validate recipe has columns
+        if(!recipe.columns || recipe.columns.length === 0) {
+            box.innerHTML = '<div class="alert alert-warning">No columns defined! Please add at least one column.</div>';
+            return;
+        }
+        
+        console.log('Sending preview request with recipe:', recipe);
+        
+        try {
+            const res = await fetch('/preview', {
+                method: 'POST', 
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({
+                    token: document.getElementById('token').value,
+                    dataset_id: document.getElementById('dataset_id').value,
+                    config: document.getElementById('config_select').value,
+                    split: document.getElementById('split_select').value,
+                    recipe: recipe
+                })
+            });
+            
+            const data = await res.json();
+            console.log('Preview response:', data);
+            
+            if(data.status === 'success') {
+                box.innerHTML = `<pre>${JSON.stringify(data.rows, null, 2)}</pre>`;
+            } else {
+                box.innerHTML = `<div class="alert alert-danger">Error: ${data.message}</div>`;
+            }
+        } catch(e) {
+            console.error('Preview error:', e);
+            box.innerHTML = `<div class="alert alert-danger">Network error: ${e}</div>`;
+        }
     }
-
+    
     async function executeJob() {
+        const recipe = getRecipe();
+        
+        if(!recipe.columns || recipe.columns.length === 0) {
+            alert('No columns defined!');
+            return;
+        }
+        
+        const targetId = document.getElementById('target_id').value.trim();
+        if(!targetId) {
+            alert('Please enter a target repository name!');
+            return;
+        }
+        
         const res = await fetch('/execute', {
-            method: 'POST', headers: {'Content-Type': 'application/json'},
+            method: 'POST', 
+            headers: {'Content-Type': 'application/json'},
             body: JSON.stringify({
                 token: document.getElementById('token').value,
                 dataset_id: document.getElementById('dataset_id').value,
                 config: document.getElementById('config_select').value,
                 split: document.getElementById('split_select').value,
-                target_id: document.getElementById('target_id').value,
-                recipe: getRecipe(),
+                target_id: targetId,
+                recipe: recipe,
                 max_rows: document.getElementById('max_rows').value,
                 license: document.getElementById('license_input').value 
-
             })
         });
+        
         const data = await res.json();
+        
         if(data.status === 'started') {
-            document.getElementById('job_status').style.display = 'block';
-            document.getElementById('job_status').innerText = "Job Started...";
-            // Simple polling
-            setInterval(async () => {
+            const statusBox = document.getElementById('job_status');
+            statusBox.style.display = 'block';
+            statusBox.className = 'alert alert-info mt-3';
+            statusBox.innerText = "Job started, processing...";
+            
+            const interval = setInterval(async () => {
                 const s = await fetch(`/status/${data.job_id}`).then(r=>r.json());
-                if(s.status === 'completed') document.getElementById('job_status').innerText = `Done! Processed ${s.result.rows_processed}`;
+                if(s.status === 'completed') {
+                    clearInterval(interval);
+                    statusBox.className = 'alert alert-success mt-3';
+                    statusBox.innerText = `✅ Done! Processed ${s.result.rows_processed} rows.`;
+                } else if(s.status === 'failed') {
+                    clearInterval(interval);
+                    statusBox.className = 'alert alert-danger mt-3';
+                    statusBox.innerText = `❌ Job failed: ${s.error}`;
+                }
             }, 2000);
+        } else {
+            alert('Failed to start job: ' + (data.message || 'Unknown error'));
         }
     }
 </script>