Upload static/js/main.js with huggingface_hub

static/js/main.js

@@ -0,0 +1,1216 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // --- Exports by Country Tab Logic ---
+    // --- Imports by Country Tab Logic ---
+    // --- Exports by Product Tab Logic ---
+    // --- Imports by Product Tab Logic ---
+    // --- Rankings Tab Logic ---
+    // --- Bilateral Trade Tab Logic ---
+    // --- Data Download Tab Logic ---
+    const dataDownloadForm = document.getElementById('dataDownloadForm');
+    const dataDownloadStatus = document.getElementById('dataDownloadStatus');
+    const dataDownloadChartDiv = document.createElement('div');
+    dataDownloadChartDiv.id = 'dataDownloadChart';
+    dataDownloadChartDiv.style.marginTop = '2em';
+    dataDownloadStatus && dataDownloadStatus.parentNode.insertBefore(dataDownloadChartDiv, dataDownloadStatus.nextSibling);
+    let dataDownloadChartData = null;
+    if (dataDownloadForm) {
+      dataDownloadForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        dataDownloadStatus.innerHTML = '';
+        dataDownloadChartDiv.innerHTML = '';
+        // ...existing fetch logic...
+        // After successful data fetch:
+        // dataDownloadChartData = fetchedData;
+        // renderDataDownloadChart(fetchedData);
+      });
+    }
+    // Render chart for Data Download tab (all rows)
+    // Generalized chart rendering for any tab
+    function renderModernChart(rows, chartDivId) {
+      const chartDiv = document.getElementById(chartDivId);
+      if (!chartDiv || !Array.isArray(rows) || rows.length === 0) return;
+      chartDiv.innerHTML = '';
+      const canvas = document.createElement('canvas');
+      canvas.width = Math.min(900, window.innerWidth * 0.96);
+      canvas.height = 340;
+      canvas.style.background = '#fff';
+      canvas.style.borderRadius = '10px';
+      canvas.style.boxShadow = '0 2px 10px rgba(25,118,210,0.07)';
+      chartDiv.appendChild(canvas);
+      const ctx = canvas.getContext('2d');
+      // Try to find year and value columns
+      let years = [], values = [];
+      if (rows[0].year !== undefined && rows[0].value !== undefined) {
+        years = rows.map(r => +r.year);
+        values = rows.map(r => +r.value);
+      } else if (rows[0].hasOwnProperty('country') && rows[0].hasOwnProperty('value')) {
+        // For country rankings
+        years = rows.map((_, i) => i+1); // Rank as x-axis
+        values = rows.map(r => +r.value);
+      } else if (rows[0].hasOwnProperty('cmdCode') && rows[0].hasOwnProperty('value')) {
+        // For product by code
+        years = rows.map((_, i) => i+1);
+        values = rows.map(r => +r.value);
+      } else {
+        return;
+      }
+      const minYear = Math.min(...years), maxYear = Math.max(...years);
+      const minVal = Math.min(...values), maxVal = Math.max(...values);
+      // Draw grid
+      ctx.strokeStyle = '#e3e9f6';
+      ctx.lineWidth = 1;
+      for (let i = 0; i <= 5; ++i) {
+        let y = 40 + i * (260 / 5);
+        ctx.beginPath();
+        ctx.moveTo(60, y);
+        ctx.lineTo(canvas.width - 30, y);
+        ctx.stroke();
+      }
+      // Axes
+      ctx.strokeStyle = '#1976d2';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      ctx.moveTo(60, 40);
+      ctx.lineTo(60, 300);
+      ctx.lineTo(canvas.width - 30, 300);
+      ctx.stroke();
+      // Y labels
+      ctx.fillStyle = '#34495e';
+      ctx.font = '13px Segoe UI, Arial, sans-serif';
+      for (let i = 0; i <= 5; ++i) {
+        let v = minVal + (maxVal - minVal) * i / 5;
+        let y = 300 - (v - minVal) / (maxVal - minVal) * 260;
+        ctx.fillText(v.toFixed(0), 10, y + 4);
+      }
+      // X labels
+      for (let i = 0; i < years.length; ++i) {
+        let x = 60 + (years[i] - minYear) / (maxYear - minYear || 1) * (canvas.width - 90);
+        let label = (rows[0].country && rows[i].country) ? rows[i].country : (rows[0].cmdCode && rows[i].cmdCode ? rows[i].cmdCode : years[i]);
+        ctx.fillText(label, x - 12, 320);
+      }
+      // Draw line
+      ctx.strokeStyle = '#42a5f5';
+      ctx.lineWidth = 3;
+      ctx.beginPath();
+      for (let i = 0; i < years.length; ++i) {
+        let x = 60 + (years[i] - minYear) / (maxYear - minYear || 1) * (canvas.width - 90);
+        let y = 300 - (values[i] - minVal) / (maxVal - minVal || 1) * 260;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      }
+      ctx.stroke();
+      // Draw points
+      for (let i = 0; i < years.length; ++i) {
+        let x = 60 + (years[i] - minYear) / (maxYear - minYear || 1) * (canvas.width - 90);
+        let y = 300 - (values[i] - minVal) / (maxVal - minVal || 1) * 260;
+        ctx.beginPath();
+        ctx.arc(x, y, 5, 0, 2 * Math.PI);
+        ctx.fillStyle = '#1976d2';
+        ctx.fill();
+      }
+      // Tooltip (simple hover)
+      canvas.onmousemove = function(ev) {
+        const rect = canvas.getBoundingClientRect();
+        const mx = ev.clientX - rect.left, my = ev.clientY - rect.top;
+        let found = -1;
+        for (let i = 0; i < years.length; ++i) {
+          let x = 60 + (years[i] - minYear) / (maxYear - minYear || 1) * (canvas.width - 90);
+          let y = 300 - (values[i] - minVal) / (maxVal - minVal || 1) * 260;
+          if (Math.abs(mx - x) < 8 && Math.abs(my - y) < 8) { found = i; break; }
+        }
+        chartDiv.querySelectorAll('.chart-tooltip').forEach(e => e.remove());
+        if (found !== -1) {
+          const tip = document.createElement('div');
+          tip.className = 'chart-tooltip';
+          tip.style.position = 'absolute';
+          tip.style.left = (mx + 10) + 'px';
+          tip.style.top = (my + 10) + 'px';
+          tip.style.background = '#fff';
+          tip.style.border = '1px solid #1976d2';
+          tip.style.borderRadius = '6px';
+          tip.style.padding = '6px 12px';
+          tip.style.boxShadow = '0 2px 8px rgba(25,118,210,0.15)';
+          tip.style.pointerEvents = 'none';
+          tip.style.fontSize = '13px';
+          tip.style.zIndex = 1000;
+          tip.innerHTML = `<b>${(rows[found].country || rows[found].cmdCode || 'Year')}:</b> ${years[found]}<br><b>Value:</b> ${values[found]}`;
+          chartDiv.appendChild(tip);
+        }
+      };
+      canvas.onmouseleave = function() {
+        chartDiv.querySelectorAll('.chart-tooltip').forEach(e => e.remove());
+      };
+    }
+    // Backward compat: keep for Data Download tab
+    function renderDataDownloadChart(rows) {
+      renderModernChart(rows, 'dataDownloadChart');
+    }
+
+    const predictionForm = document.getElementById('predictionForm');
+    const predictionReporter = document.getElementById('predictionReporter');
+    const predictionPartner = document.getElementById('predictionPartner');
+    const predictionResults = document.getElementById('predictionResults');
+    const predictionChart = document.getElementById('predictionChart');
+    const predictionDownloadBtn = document.getElementById('predictionDownloadBtn');
+    let predictionTableData = null;
+    // Populate country dropdowns
+    if (predictionReporter && predictionPartner && typeof COUNTRY_CODES !== 'undefined') {
+      predictionReporter.innerHTML = '';
+      predictionPartner.innerHTML = '';
+      COUNTRY_CODES.forEach(c => {
+        const opt1 = document.createElement('option');
+        opt1.value = c.code;
+        opt1.textContent = c.name + ' (' + c.code + ')';
+        predictionReporter.appendChild(opt1);
+        const opt2 = document.createElement('option');
+        opt2.value = c.code;
+        opt2.textContent = c.name + ' (' + c.code + ')';
+        predictionPartner.appendChild(opt2);
+      });
+    }
+    if (predictionForm) {
+      predictionForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        predictionResults.innerHTML = '';
+        predictionDownloadBtn.style.display = 'none';
+        if (predictionChart) predictionChart.style.display = 'none';
+        const reporterCode = predictionReporter.value;
+        const partnerCode = predictionPartner.value;
+        const year = document.getElementById('predictionYear').value;
+        const cmdCode = document.getElementById('predictionCommodity').value;
+        const modelType = document.getElementById('predictionModel').value;
+        const payload = {
+          reporterCode: reporterCode,
+          partnerCode: partnerCode,
+          period: year,
+          cmdCode: cmdCode,
+          flowCode: '',
+          modelType: modelType
+        };
+        predictionResults.innerHTML = '<div>Predicting...</div>';
+        showSpinner();
+        try {
+          const resp = await fetch('/api/predict', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+          });
+          const data = await resp.json();
+          if (data && data.historical && data.prediction) {
+            // Prepare table data
+            let rows = [];
+            data.historical.forEach(row => {
+              rows.push({ year: row.year, value: row.value, type: 'historical' });
+            });
+            rows.push({ year: data.prediction.year, value: data.prediction.value, type: 'predicted' });
+            predictionTableData = rows;
+            // Render table
+            let html = '<div style="overflow-x:auto;"><table><thead><tr><th>Year</th><th>Value</th><th>Type</th></tr></thead><tbody>';
+            rows.forEach(row => {
+              html += `<tr><td>${row.year}</td><td>${row.value}</td><td>${row.type}</td></tr>`;
+            });
+            html += '</tbody></table></div>';
+            predictionResults.innerHTML = html;
+            predictionDownloadBtn.style.display = 'inline-block';
+            // Plot chart (vanilla JS, use Canvas API)
+            plotPredictionChart(rows);
+          } else {
+            predictionResults.innerHTML = '<div>No prediction data returned.</div>';
+          }
+        } catch (err) {
+          predictionResults.innerHTML = '<div>Error fetching prediction.</div>';
+        } finally {
+          hideSpinner();
+        }
+      });
+      predictionDownloadBtn.addEventListener('click', function() {
+        if (!predictionTableData) return;
+        let csv = 'Year,Value,Type\n';
+        predictionTableData.forEach(row => {
+          csv += `${row.year},${row.value},${row.type}\n`;
+        });
+        const blob = new Blob([csv], {type: 'text/csv'});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'trade_prediction.csv';
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100);
+      });
+    }
+    // Simple chart plotting function (vanilla JS, Canvas API)
+    function plotPredictionChart(rows) {
+      if (!predictionChart) return;
+      const width = 600, height = 320, pad = 50;
+      predictionChart.width = width;
+      predictionChart.height = height;
+      const ctx = predictionChart.getContext('2d');
+      ctx.clearRect(0, 0, width, height);
+      // Prepare data
+      const years = rows.map(r => +r.year);
+      const values = rows.map(r => +r.value);
+      const minYear = Math.min(...years), maxYear = Math.max(...years);
+      const minVal = Math.min(...values), maxVal = Math.max(...values);
+      // Axes
+      ctx.strokeStyle = '#888';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(pad, pad);
+      ctx.lineTo(pad, height-pad);
+      ctx.lineTo(width-pad, height-pad);
+      ctx.stroke();
+      // Y labels
+      ctx.fillStyle = '#444';
+      ctx.font = '13px sans-serif';
+      for (let i=0; i<=4; ++i) {
+        let v = minVal + (maxVal-minVal)*i/4;
+        let y = height-pad - (v-minVal)/(maxVal-minVal)*(height-2*pad);
+        ctx.fillText(v.toFixed(0), 6, y+4);
+      }
+      // X labels
+      for (let i=0; i<years.length; ++i) {
+        let x = pad + (years[i]-minYear)/(maxYear-minYear)*(width-2*pad);
+        ctx.fillText(years[i], x-10, height-pad+18);
+      }
+      // Plot historical
+      ctx.strokeStyle = '#1976d2';
+      ctx.lineWidth = 2;
+      ctx.beginPath();
+      for (let i=0; i<rows.length; ++i) {
+        if (rows[i].type !== 'historical') continue;
+        let x = pad + (rows[i].year-minYear)/(maxYear-minYear)*(width-2*pad);
+        let y = height-pad - (rows[i].value-minVal)/(maxVal-minVal)*(height-2*pad);
+        if (i===0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      }
+      ctx.stroke();
+      // Plot predicted
+      let pred = rows.find(r => r.type==='predicted');
+      if (pred) {
+        let x = pad + (pred.year-minYear)/(maxYear-minYear)*(width-2*pad);
+        let y = height-pad - (pred.value-minVal)/(maxVal-minVal)*(height-2*pad);
+        ctx.fillStyle = '#e53935';
+        ctx.beginPath();
+        ctx.arc(x, y, 7, 0, 2*Math.PI);
+        ctx.fill();
+        ctx.font = 'bold 14px sans-serif';
+        ctx.fillText('Prediction', x+10, y-10);
+      }
+      predictionChart.style.display = 'block';
+    }
+
+    // Already declared at the top:
+    // const dataDownloadForm = document.getElementById('dataDownloadForm');
+    const dataDownloadReporter = document.getElementById('dataDownloadReporter');
+    const dataDownloadPartner = document.getElementById('dataDownloadPartner');
+    // const dataDownloadStatus = document.getElementById('dataDownloadStatus');
+    if (dataDownloadReporter && typeof COUNTRY_CODES !== 'undefined') {
+      dataDownloadReporter.innerHTML = '<option value="">All</option>';
+      COUNTRY_CODES.forEach(c => {
+        const opt = document.createElement('option');
+        opt.value = c.code;
+        opt.textContent = c.name + ' (' + c.code + ')';
+        dataDownloadReporter.appendChild(opt);
+      });
+    }
+    if (dataDownloadPartner && typeof COUNTRY_CODES !== 'undefined') {
+      dataDownloadPartner.innerHTML = '<option value="">All</option>';
+      COUNTRY_CODES.forEach(c => {
+        const opt = document.createElement('option');
+        opt.value = c.code;
+        opt.textContent = c.name + ' (' + c.code + ')';
+        dataDownloadPartner.appendChild(opt);
+      });
+    }
+    if (dataDownloadForm) {
+      dataDownloadForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        dataDownloadStatus.innerHTML = '';
+        const reporterCode = dataDownloadReporter.value;
+        const partnerCode = dataDownloadPartner.value;
+        const year = document.getElementById('dataDownloadYear').value;
+        const cmdCode = document.getElementById('dataDownloadCommodity').value;
+        const flowCode = document.getElementById('dataDownloadFlow').value;
+        // Determine all reporter/partner combos
+        let reporterList = reporterCode ? [reporterCode] : COUNTRY_CODES.map(c => c.code);
+        let partnerList = partnerCode ? [partnerCode] : COUNTRY_CODES.map(c => c.code);
+        // Prevent massive downloads (limit combos)
+        if (reporterList.length * partnerList.length > 200) {
+          dataDownloadStatus.innerHTML = '<div style="color:red;">Too many combinations selected! Please narrow your selection.</div>';
+          return;
+        }
+        dataDownloadStatus.innerHTML = '<div>Fetching data...</div>';
+        let allRows = [];
+        let columnsSet = new Set();
+        for (let r of reporterList) {
+          for (let p of partnerList) {
+            if (r === p) continue; // skip self-pairs
+            const payload = {
+              reporterCode: r,
+              partnerCode: p,
+              period: year,
+              cmdCode: cmdCode,
+              flowCode: flowCode
+            };
+            try {
+              const resp = await fetch('/api/trade', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload)
+              });
+              const data = await resp.json();
+              if (data && data.rows && data.rows.length > 0) {
+                data.rows.forEach(row => {
+                  allRows.push(row);
+                });
+                data.columns.forEach(col => columnsSet.add(col));
+              }
+            } catch (err) {
+              // skip errors
+            }
+          }
+        }
+        if (allRows.length === 0) {
+          dataDownloadStatus.innerHTML = '<div>No data found for your selection.</div>';
+          return;
+        }
+        // Build CSV
+        const columns = Array.from(columnsSet);
+        let csv = columns.join(',') + '\n';
+        allRows.forEach(row => {
+          csv += columns.map(col => row[col] !== undefined ? row[col] : '').join(',') + '\n';
+        });
+        const blob = new Blob([csv], {type: 'text/csv'});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'custom_trade_data.csv';
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100);
+        dataDownloadStatus.innerHTML = '<div>Download started.</div>';
+      });
+    }
+
+    const bilateralForm = document.getElementById('bilateralForm');
+    const bilateralReporter = document.getElementById('bilateralReporter');
+    const bilateralPartner = document.getElementById('bilateralPartner');
+    const bilateralResults = document.getElementById('bilateralResults');
+    const bilateralDownloadBtn = document.getElementById('bilateralDownloadBtn');
+    let bilateralTableData = null;
+    // Populate both country dropdowns
+    if (bilateralReporter && bilateralPartner && typeof COUNTRY_CODES !== 'undefined') {
+      bilateralReporter.innerHTML = '';
+      bilateralPartner.innerHTML = '';
+      COUNTRY_CODES.forEach(c => {
+        const opt1 = document.createElement('option');
+        opt1.value = c.code;
+        opt1.textContent = c.name + ' (' + c.code + ')';
+        bilateralReporter.appendChild(opt1);
+        const opt2 = document.createElement('option');
+        opt2.value = c.code;
+        opt2.textContent = c.name + ' (' + c.code + ')';
+        bilateralPartner.appendChild(opt2);
+      });
+    }
+    if (bilateralForm) {
+      bilateralForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        bilateralResults.innerHTML = '';
+        bilateralDownloadBtn.style.display = 'none';
+        const reporterCode = bilateralReporter.value;
+        const partnerCode = bilateralPartner.value;
+        const year = document.getElementById('bilateralYear').value;
+        const cmdCode = document.getElementById('bilateralCommodity').value;
+        const payload = {
+          reporterCode: reporterCode,
+          partnerCode: partnerCode,
+          period: year,
+          cmdCode: cmdCode,
+          flowCode: '' // Show all flows
+        };
+        bilateralResults.innerHTML = '<div>Loading bilateral trade data...</div>';
+        try {
+          const resp = await fetch('/api/trade', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+          });
+          const data = await resp.json();
+          if (data && data.rows && data.rows.length > 0) {
+            // Find value and flow columns
+            const valueCol = data.columns.includes('primaryValue') ? 'primaryValue' : (data.columns.includes('TradeValue') ? 'TradeValue' : (data.columns.includes('Value') ? 'Value' : null));
+            const flowCol = data.columns.includes('flowCode') ? 'flowCode' : (data.columns.includes('TradeFlow') ? 'TradeFlow' : null);
+            if (!valueCol) {
+              bilateralResults.innerHTML = '<div>No value column found.</div>';
+              return;
+            }
+            bilateralTableData = data.rows;
+            // Render table
+            let html = '<div style="overflow-x:auto;"><table><thead><tr>';
+            if (flowCol) html += '<th>Flow</th>';
+            html += '<th>Value</th></tr></thead><tbody>';
+            data.rows.forEach(row => {
+              html += '<tr>';
+              if (flowCol) html += `<td>${row[flowCol]}</td>`;
+              html += `<td>${row[valueCol]}</td></tr>`;
+            });
+            html += '</tbody></table></div>';
+            bilateralResults.innerHTML = html;
+            if (data.rows.length > 0) bilateralDownloadBtn.style.display = 'inline-block';
+            else bilateralDownloadBtn.style.display = 'none';
+            // Modern chart for Bilateral
+            renderModernChart(data.rows, 'bilateralChart');
+          } else {
+            bilateralResults.innerHTML = '<div>No data found for this country pair/year.</div>';
+            bilateralDownloadBtn.style.display = 'none';
+          }
+        } catch (err) {
+          bilateralResults.innerHTML = '<div>Error fetching data.</div>';
+        } finally {
+          hideSpinner();
+        }
+      });
+      bilateralDownloadBtn.addEventListener('click', function() {
+        if (!bilateralTableData) return;
+        let csv = 'Flow,Value\n';
+        bilateralTableData.forEach(row => {
+          csv += `${row.flowCode || row.TradeFlow || ''},${row.primaryValue || row.TradeValue || row.Value || ''}\n`;
+        });
+        const blob = new Blob([csv], {type: 'text/csv'});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'bilateral_trade.csv';
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100);
+      });
+    }
+
+    const rankingsForm = document.getElementById('rankingsForm');
+    const rankingsResults = document.getElementById('rankingsResults');
+    const rankingsDownloadBtn = document.getElementById('rankingsDownloadBtn');
+    let rankingsTableData = null;
+    if (rankingsForm) {
+      rankingsForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        rankingsResults.innerHTML = '';
+        rankingsDownloadBtn.style.display = 'none';
+        const year = document.getElementById('rankingsYear').value;
+        const cmdCode = document.getElementById('rankingsCommodity').value;
+        const flowCode = document.getElementById('rankingsFlow').value;
+        // Fetch for all countries: iterate COUNTRY_CODES
+        const allPromises = COUNTRY_CODES.map(async country => {
+          const payload = {
+            reporterCode: country.code,
+            partnerCode: '0', // World
+            period: year,
+            cmdCode: cmdCode,
+            flowCode: flowCode
+          };
+          try {
+            const resp = await fetch('/api/trade', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(payload)
+            });
+            const data = await resp.json();
+            if (data && data.rows && data.rows.length > 0) {
+              // Find the value column (primaryValue or TradeValue or Value)
+              const valueCol = data.columns.includes('primaryValue') ? 'primaryValue' : (data.columns.includes('TradeValue') ? 'TradeValue' : (data.columns.includes('Value') ? 'Value' : null));
+              const val = valueCol ? data.rows[0][valueCol] : null;
+              return {
+                country: country.name,
+                code: country.code,
+                value: val
+              };
+            } else {
+              return {
+                country: country.name,
+                code: country.code,
+                value: null
+              };
+            }
+          } catch (err) {
+            return {
+              country: country.name,
+              code: country.code,
+              value: null
+            };
+          }
+        });
+        rankingsResults.innerHTML = '<div>Loading data for all countries...</div>';
+        showSpinner();
+        const allResults = await Promise.all(allPromises);
+        hideSpinner();
+        // Filter for non-null values and sort descending
+        const filtered = allResults.filter(r => r.value !== null && r.value !== undefined).sort((a, b) => b.value - a.value);
+        rankingsTableData = filtered;
+        // Render table
+        let html = '<div style="overflow-x:auto;"><table><thead><tr><th>Country</th><th>Code</th><th>Value</th></tr></thead><tbody>';
+        filtered.forEach(row => {
+          html += `<tr><td>${row.country}</td><td>${row.code}</td><td>${row.value}</td></tr>`;
+        });
+        html += '</tbody></table></div>';
+        rankingsResults.innerHTML = html;
+        if (filtered.length > 0) rankingsDownloadBtn.style.display = 'inline-block';
+        else rankingsDownloadBtn.style.display = 'none';
+        // Modern chart for Rankings
+        renderModernChart(filtered, 'rankingsChart');
+      });
+      rankingsDownloadBtn.addEventListener('click', function() {
+        if (!rankingsTableData) return;
+        let csv = 'Country,Code,Value\n';
+        rankingsTableData.forEach(row => {
+          csv += `${row.country},${row.code},${row.value}\n`;
+        });
+        const blob = new Blob([csv], {type: 'text/csv'});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'rankings.csv';
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100);
+      });
+    }
+
+    const importsProductForm = document.getElementById('importsProductForm');
+    const importsProductCountry = document.getElementById('importsProductCountry');
+    const importsProductResults = document.getElementById('importsProductResults');
+    const importsProductDownloadBtn = document.getElementById('importsProductDownloadBtn');
+    let importsProductTableData = null;
+    // Populate country dropdown
+    if (importsProductCountry && typeof COUNTRY_CODES !== 'undefined') {
+      importsProductCountry.innerHTML = '';
+      COUNTRY_CODES.forEach(c => {
+        const opt = document.createElement('option');
+        opt.value = c.code;
+        opt.textContent = c.name + ' (' + c.code + ')';
+        importsProductCountry.appendChild(opt);
+      });
+    }
+    if (importsProductForm) {
+      importsProductForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        importsProductResults.innerHTML = '';
+        importsProductDownloadBtn.style.display = 'none';
+        const reporterCode = importsProductCountry.value;
+        const year = document.getElementById('importsProductYear').value;
+        // Fetch for all products (HS codes) for this country/year
+        const payload = {
+          reporterCode: reporterCode,
+          partnerCode: '0', // World
+          period: year,
+          cmdCode: 'ALL', // Get all products
+          flowCode: 'M'
+        };
+        importsProductResults.innerHTML = '<div>Loading data for all products...</div>';
+        showSpinner();
+        try {
+          const resp = await fetch('/api/trade', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+          });
+          const data = await resp.json();
+          if (data && data.rows && data.rows.length > 0) {
+            // Find the product/HS code column
+            const hsCol = data.columns.includes('cmdCode') ? 'cmdCode' : (data.columns.includes('productCode') ? 'productCode' : null);
+            const descCol = data.columns.includes('cmdDescE') ? 'cmdDescE' : (data.columns.includes('productDesc') ? 'productDesc' : null);
+            const valueCol = data.columns.includes('primaryValue') ? 'primaryValue' : (data.columns.includes('TradeValue') ? 'TradeValue' : (data.columns.includes('Value') ? 'Value' : null));
+            if (!hsCol || !valueCol) {
+              importsProductResults.innerHTML = '<div>No product/value columns found.</div>';
+              return;
+            }
+            // Sort by value descending
+            const sorted = data.rows.slice().sort((a, b) => b[valueCol] - a[valueCol]);
+            importsProductTableData = sorted;
+            // Render table
+            let html = '<div style="overflow-x:auto;"><table><thead><tr><th>HS Code</th>';
+            if (descCol) html += '<th>Description</th>';
+            html += '<th>Value</th></tr></thead><tbody>';
+            sorted.forEach(row => {
+              html += `<tr><td>${row[hsCol]}</td>`;
+              if (descCol) html += `<td>${row[descCol]}</td>`;
+              html += `<td>${row[valueCol]}</td></tr>`;
+            });
+            html += '</tbody></table></div>';
+            importsProductResults.innerHTML = html;
+        // Modern chart for Imports by Product
+        renderModernChart(sorted, 'importsProductChart');
+            if (sorted.length > 0) importsProductDownloadBtn.style.display = 'inline-block';
+            else importsProductDownloadBtn.style.display = 'none';
+          } else {
+            importsProductResults.innerHTML = '<div>No data found for this country/year.</div>';
+            importsProductDownloadBtn.style.display = 'none';
+          }
+        } catch (err) {
+          importsProductResults.innerHTML = '<div>Error fetching data.</div>';
+        } finally {
+          hideSpinner();
+        }
+      });
+      importsProductDownloadBtn.addEventListener('click', function() {
+        if (!importsProductTableData) return;
+        let csv = 'HS Code,Description,Value\n';
+        importsProductTableData.forEach(row => {
+          csv += `${row.cmdCode || row.productCode || ''},${row.cmdDescE || row.productDesc || ''},${row.primaryValue || row.TradeValue || row.Value || ''}\n`;
+        });
+        const blob = new Blob([csv], {type: 'text/csv'});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'imports_by_product.csv';
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100);
+      });
+    }
+
+    const exportsProductForm = document.getElementById('exportsProductForm');
+    const exportsProductCountry = document.getElementById('exportsProductCountry');
+    const exportsProductResults = document.getElementById('exportsProductResults');
+    const exportsProductDownloadBtn = document.getElementById('exportsProductDownloadBtn');
+    let exportsProductTableData = null;
+    // Populate country dropdown
+    if (exportsProductCountry && typeof COUNTRY_CODES !== 'undefined') {
+      exportsProductCountry.innerHTML = '';
+      COUNTRY_CODES.forEach(c => {
+        const opt = document.createElement('option');
+        opt.value = c.code;
+        opt.textContent = c.name + ' (' + c.code + ')';
+        exportsProductCountry.appendChild(opt);
+      });
+    }
+    if (exportsProductForm) {
+      exportsProductForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        exportsProductResults.innerHTML = '';
+        exportsProductDownloadBtn.style.display = 'none';
+        const reporterCode = exportsProductCountry.value;
+        const year = document.getElementById('exportsProductYear').value;
+        // Fetch for all products (HS codes) for this country/year
+        const payload = {
+          reporterCode: reporterCode,
+          partnerCode: '0', // World
+          period: year,
+          cmdCode: 'ALL', // Get all products
+          flowCode: 'X'
+        };
+        exportsProductResults.innerHTML = '<div>Loading data for all products...</div>';
+        showSpinner();
+        try {
+          const resp = await fetch('/api/trade', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(payload)
+          });
+          const data = await resp.json();
+          if (data && data.rows && data.rows.length > 0) {
+            // Find the product/HS code column
+            const hsCol = data.columns.includes('cmdCode') ? 'cmdCode' : (data.columns.includes('productCode') ? 'productCode' : null);
+            const descCol = data.columns.includes('cmdDescE') ? 'cmdDescE' : (data.columns.includes('productDesc') ? 'productDesc' : null);
+            const valueCol = data.columns.includes('primaryValue') ? 'primaryValue' : (data.columns.includes('TradeValue') ? 'TradeValue' : (data.columns.includes('Value') ? 'Value' : null));
+            if (!hsCol || !valueCol) {
+              exportsProductResults.innerHTML = '<div>No product/value columns found.</div>';
+              return;
+            }
+            // Sort by value descending
+            const sorted = data.rows.slice().sort((a, b) => b[valueCol] - a[valueCol]);
+            exportsProductTableData = sorted;
+            // Render table
+            let html = '<div style="overflow-x:auto;"><table><thead><tr><th>HS Code</th>';
+            if (descCol) html += '<th>Description</th>';
+            html += '<th>Value</th></tr></thead><tbody>';
+            sorted.forEach(row => {
+              html += `<tr><td>${row[hsCol]}</td>`;
+              if (descCol) html += `<td>${row[descCol]}</td>`;
+              html += `<td>${row[valueCol]}</td></tr>`;
+            });
+            html += '</tbody></table></div>';
+            exportsProductResults.innerHTML = html;
+        // Modern chart for Exports by Product
+        renderModernChart(sorted, 'exportsProductChart');
+            if (sorted.length > 0) exportsProductDownloadBtn.style.display = 'inline-block';
+            else exportsProductDownloadBtn.style.display = 'none';
+          } else {
+            exportsProductResults.innerHTML = '<div>No data found for this country/year.</div>';
+            exportsProductDownloadBtn.style.display = 'none';
+          }
+        } catch (err) {
+          exportsProductResults.innerHTML = '<div>Error fetching data.</div>';
+        } finally {
+          hideSpinner();
+        }
+      });
+      exportsProductDownloadBtn.addEventListener('click', function() {
+        if (!exportsProductTableData) return;
+        let csv = 'HS Code,Description,Value\n';
+        exportsProductTableData.forEach(row => {
+          csv += `${row.cmdCode || row.productCode || ''},${row.cmdDescE || row.productDesc || ''},${row.primaryValue || row.TradeValue || row.Value || ''}\n`;
+        });
+        const blob = new Blob([csv], {type: 'text/csv'});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'exports_by_product.csv';
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100);
+      });
+    }
+
+    const importsCountryForm = document.getElementById('importsCountryForm');
+    const importsCountryResults = document.getElementById('importsCountryResults');
+    const importsCountryDownloadBtn = document.getElementById('importsCountryDownloadBtn');
+    let importsCountryTableData = null;
+    if (importsCountryForm) {
+      importsCountryForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        importsCountryResults.innerHTML = '';
+        importsCountryDownloadBtn.style.display = 'none';
+        const year = document.getElementById('importsCountryYear').value;
+        const cmdCode = document.getElementById('importsCountryCommodity').value;
+        const flowCode = document.getElementById('importsCountryFlow').value;
+        // Fetch for all countries: iterate COUNTRY_CODES
+        const allPromises = COUNTRY_CODES.map(async country => {
+          const payload = {
+            reporterCode: country.code,
+            partnerCode: '0', // World
+            period: year,
+            cmdCode: cmdCode,
+            flowCode: flowCode
+          };
+          try {
+            const resp = await fetch('/api/trade', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(payload)
+            });
+            const data = await resp.json();
+            if (data && data.rows && data.rows.length > 0) {
+              // Find the value column (primaryValue or TradeValue or Value)
+              const valueCol = data.columns.includes('primaryValue') ? 'primaryValue' : (data.columns.includes('TradeValue') ? 'TradeValue' : (data.columns.includes('Value') ? 'Value' : null));
+              const val = valueCol ? data.rows[0][valueCol] : null;
+              return {
+                country: country.name,
+                code: country.code,
+                value: val
+              };
+            } else {
+              return {
+                country: country.name,
+                code: country.code,
+                value: null
+              };
+            }
+          } catch (err) {
+            return {
+              country: country.name,
+              code: country.code,
+              value: null
+            };
+          }
+        });
+        importsCountryResults.innerHTML = '<div>Loading data for all countries...</div>';
+        const allResults = await Promise.all(allPromises);
+        // Filter for non-null values and sort descending
+        const filtered = allResults.filter(r => r.value !== null && r.value !== undefined).sort((a, b) => b.value - a.value);
+        importsCountryTableData = filtered;
+        // Render table
+        let html = '<div style="overflow-x:auto;"><table><thead><tr><th>Country</th><th>Code</th><th>Value</th></tr></thead><tbody>';
+        filtered.forEach(row => {
+          html += `<tr><td>${row.country}</td><td>${row.code}</td><td>${row.value}</td></tr>`;
+        });
+        html += '</tbody></table></div>';
+        importsCountryResults.innerHTML = html;
+        if (filtered.length > 0) importsCountryDownloadBtn.style.display = 'inline-block';
+        else importsCountryDownloadBtn.style.display = 'none';
+        // Modern chart for Imports by Country
+        renderModernChart(filtered, 'importsCountryChart');
+      });
+      importsCountryDownloadBtn.addEventListener('click', function() {
+        if (!importsCountryTableData) return;
+        let csv = 'Country,Code,Value\n';
+        importsCountryTableData.forEach(row => {
+          csv += `${row.country},${row.code},${row.value}\n`;
+        });
+        const blob = new Blob([csv], {type: 'text/csv'});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'imports_by_country.csv';
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100);
+      });
+    }
+
+    const exportsCountryForm = document.getElementById('exportsCountryForm');
+    const exportsCountryResults = document.getElementById('exportsCountryResults');
+    const exportsCountryDownloadBtn = document.getElementById('exportsCountryDownloadBtn');
+    let exportsCountryTableData = null;
+    if (exportsCountryForm) {
+      exportsCountryForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        exportsCountryResults.innerHTML = '';
+        exportsCountryDownloadBtn.style.display = 'none';
+        const year = document.getElementById('exportsCountryYear').value;
+        const cmdCode = document.getElementById('exportsCountryCommodity').value;
+        const flowCode = document.getElementById('exportsCountryFlow').value;
+        // Fetch for all countries: iterate COUNTRY_CODES
+        const allPromises = COUNTRY_CODES.map(async country => {
+          const payload = {
+            reporterCode: country.code,
+            partnerCode: '0', // World
+            period: year,
+            cmdCode: cmdCode,
+            flowCode: flowCode
+          };
+          try {
+            const resp = await fetch('/api/trade', {
+              method: 'POST',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify(payload)
+            });
+            const data = await resp.json();
+            if (data && data.rows && data.rows.length > 0) {
+              // Find the value column (primaryValue or TradeValue or Value)
+              const valueCol = data.columns.includes('primaryValue') ? 'primaryValue' : (data.columns.includes('TradeValue') ? 'TradeValue' : (data.columns.includes('Value') ? 'Value' : null));
+              const val = valueCol ? data.rows[0][valueCol] : null;
+              return {
+                country: country.name,
+                code: country.code,
+                value: val
+              };
+            } else {
+              return {
+                country: country.name,
+                code: country.code,
+                value: null
+              };
+            }
+          } catch (err) {
+            return {
+              country: country.name,
+              code: country.code,
+              value: null
+            };
+          }
+        });
+        exportsCountryResults.innerHTML = '<div>Loading data for all countries...</div>';
+        const allResults = await Promise.all(allPromises);
+        // Filter for non-null values and sort descending
+        const filtered = allResults.filter(r => r.value !== null && r.value !== undefined).sort((a, b) => b.value - a.value);
+        exportsCountryTableData = filtered;
+        // Render table
+        let html = '<div style="overflow-x:auto;"><table><thead><tr><th>Country</th><th>Code</th><th>Value</th></tr></thead><tbody>';
+        filtered.forEach(row => {
+          html += `<tr><td>${row.country}</td><td>${row.code}</td><td>${row.value}</td></tr>`;
+        });
+        html += '</tbody></table></div>';
+        exportsCountryResults.innerHTML = html;
+        if (filtered.length > 0) exportsCountryDownloadBtn.style.display = 'inline-block';
+        else exportsCountryDownloadBtn.style.display = 'none';
+        // Modern chart for Exports by Country
+        renderModernChart(filtered, 'exportsCountryChart');
+      });
+      exportsCountryDownloadBtn.addEventListener('click', function() {
+        if (!exportsCountryTableData) return;
+        let csv = 'Country,Code,Value\n';
+        exportsCountryTableData.forEach(row => {
+          csv += `${row.country},${row.code},${row.value}\n`;
+        });
+        const blob = new Blob([csv], {type: 'text/csv'});
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'exports_by_country.csv';
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100);
+      });
+    }
+
+
+    const form = document.getElementById('tradeForm');
+    const resultsDiv = document.getElementById('results');
+    const predictForm = document.getElementById('predictForm');
+    const predictionResult = document.getElementById('predictionResult');
+    const alertDiv = document.getElementById('alert');
+    const spinner = document.getElementById('spinner');
+    const tradeChart = document.getElementById('tradeChart');
+    let chartInstance = null;
+
+    function showAlert(msg, type='danger') {
+        alertDiv.style.display = 'block';
+        alertDiv.className = 'alert ' + (type === 'success' ? 'alert-success' : 'alert-danger');
+        alertDiv.textContent = msg;
+    }
+    function clearAlert() {
+        alertDiv.style.display = 'none';
+        alertDiv.textContent = '';
+    }
+    function showSpinner() { spinner.style.display = 'block'; }
+    function hideSpinner() { spinner.style.display = 'none'; }
+    function renderTable(columns, rows) {
+        let html = '<div style="overflow-x:auto;"><table><thead><tr>';
+        columns.forEach(col => html += `<th>${col}</th>`);
+        html += '</tr></thead><tbody>';
+        rows.forEach(row => {
+            html += '<tr>';
+            columns.forEach(col => html += `<td>${row[col]}</td>`);
+            html += '</tr>';
+        });
+        html += '</tbody></table></div>';
+        return html;
+    }
+    function renderChart(columns, rows) {
+        if (!tradeChart) return;
+        // Try to plot year vs primaryValue
+        const yearCol = columns.includes('year') ? 'year' : (columns.includes('refYear') ? 'refYear' : null);
+        const valueCol = columns.includes('primaryValue') ? 'primaryValue' : null;
+        if (!yearCol || !valueCol) { tradeChart.style.display = 'none'; return; }
+        const dataByYear = {};
+        rows.forEach(row => {
+            const y = row[yearCol] || row['refYear'];
+            const v = row[valueCol];
+            if (y && v) dataByYear[y] = v;
+        });
+        const years = Object.keys(dataByYear).sort();
+        const values = years.map(y => dataByYear[y]);
+        if (chartInstance) chartInstance.destroy();
+        chartInstance = new window.Chart(tradeChart.getContext('2d'), {
+            type: 'line',
+            data: {
+                labels: years,
+                datasets: [{
+                    label: 'Trade Value',
+                    data: values,
+                    borderColor: '#3498db',
+                    backgroundColor: 'rgba(52,152,219,0.2)',
+                    fill: true
+                }]
+            },
+            options: { responsive: true, plugins: { legend: { display: false } } }
+        });
+        tradeChart.style.display = 'block';
+    }
+
+    // Initialize select2 on country dropdowns (after country list loads)
+
+    // --- World map visualization ---
+    let map = null;
+    let reporterMarker = null;
+    let partnerMarker = null;
+    let countryLatLng = {
+        '842': [38.0, -97.0], // USA
+        '156': [35.0, 103.0], // China
+        '392': [36.2, 138.2], // Japan
+        '826': [54.0, -2.0], // UK
+        '124': [56.1, -106.3], // Canada
+        '250': [46.6, 2.2], // France
+        '276': [51.2, 10.4], // Germany
+        '380': [41.9, 12.5], // Italy
+        '484': [23.6, -102.5], // Mexico
+        '356': [20.6, 78.9], // India
+        '643': [61.5, 105.3], // Russia
+        '710': [-30.6, 22.9], // South Africa
+        '036': [-25.3, 133.8], // Australia
+        '410': [36.5, 127.9], // South Korea
+        '704': [14.1, 108.3], // Vietnam
+        '458': [4.2, 101.9], // Malaysia
+        '554': [-40.9, 174.9], // New Zealand
+        '764': [15.8, 100.9], // Thailand
+        '344': [22.3, 114.2], // Hong Kong
+    };
+    function updateMap() {
+        if (!window.L || !document.getElementById('worldMap')) return;
+        if (!map) {
+            map = L.map('worldMap').setView([20, 0], 2);
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: 'OpenStreetMap contributors'
+            }).addTo(map);
+        }
+        // Remove old markers
+        if (reporterMarker) { map.removeLayer(reporterMarker); reporterMarker = null; }
+        if (partnerMarker) { map.removeLayer(partnerMarker); partnerMarker = null; }
+        // Add new markers
+        const reporterCode = document.getElementById('reporterCode').value;
+        const partnerCode = document.getElementById('partnerCode').value;
+        if (countryLatLng[reporterCode]) {
+            reporterMarker = L.marker(countryLatLng[reporterCode], {icon: L.icon({iconUrl:'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/marker-icon.png',iconSize:[25,41],iconAnchor:[12,41],popupAnchor:[1,-34],shadowUrl:'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/marker-shadow.png',shadowSize:[41,41]})}).addTo(map).bindPopup('Reporter Country');
+        }
+        if (countryLatLng[partnerCode]) {
+            partnerMarker = L.marker(countryLatLng[partnerCode], {icon: L.icon({iconUrl:'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/marker-icon-red.png',iconSize:[25,41],iconAnchor:[12,41],popupAnchor:[1,-34],shadowUrl:'https://cdn.jsdelivr.net/npm/[email protected]/dist/images/marker-shadow.png',shadowSize:[41,41]})}).addTo(map).bindPopup('Partner Country');
+        }
+    }
+    document.getElementById('reporterCode').addEventListener('change', updateMap);
+    document.getElementById('partnerCode').addEventListener('change', updateMap);
+    setTimeout(updateMap, 1000); // Initial update after map loads
+
+    // Placeholder for extra visualizations
+    function showExtraVisualizations(data) {
+        const div = document.getElementById('extraVisualizations');
+        div.innerHTML = '<h3>Additional Visualizations (coming soon)</h3>';
+    }
+
+    clearAlert();
+    form.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        clearAlert();
+        resultsDiv.innerHTML = '';
+        tradeChart.style.display = 'none';
+        showSpinner();
+        const formData = new FormData(form);
+        const data = {};
+        formData.forEach((value, key) => {
+            if (value !== '') data[key] = value;
+        });
+        try {
+            const response = await fetch('/api/trade', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify(data)
+            });
+            const json = await response.json();
+            hideSpinner();
+            if (json.error) {
+                showAlert('Error: ' + json.error, 'danger');
+                resultsDiv.innerHTML = '';
+            } else if (!json.rows || json.rows.length === 0) {
+                showAlert('No data returned for these parameters.', 'danger');
+                resultsDiv.innerHTML = '';
+            } else {
+                showAlert('Data loaded successfully!', 'success');
+                resultsDiv.innerHTML = renderTable(json.columns, json.rows);
+                renderChart(json.columns, json.rows);
+            }
+        } catch (err) {
+            showAlert('Request failed: ' + err, 'danger');
+            resultsDiv.innerHTML = '';
+        } finally {
+            hideSpinner();
+        }
+    });
+
+    predictForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        clearAlert();
+        predictionResult.innerHTML = '<p>Predicting...</p>';
+        // Gather parameters from both forms
+        const formData = new FormData(form);
+        const predictData = new FormData(predictForm);
+        const data = {};
+        formData.forEach((value, key) => { if (value !== '') data[key] = value; });
+        predictData.forEach((value, key) => { if (value !== '') data[key] = value; });
+        showSpinner();
+        try {
+            const response = await fetch('/api/predict', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify(data)
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            
+            const json = await response.json();
+            
+            if (json.error) {
+                showAlert('Prediction error: ' + json.error, 'danger');
+                predictionResult.innerHTML = '';
+            } else if (json.prediction !== undefined) {
+                showAlert('Prediction successful! Model: ' + (json.model_type || 'N/A'), 'success');
+                
+                // Format the prediction result
+                let predictionValue = typeof json.prediction === 'number' ? 
+                    json.prediction.toLocaleString(undefined, {maximumFractionDigits:2}) : 
+                    json.prediction;
+                    
+                // Get MSE value safely
+                let mseValue = json.mse !== undefined ? 
+                    (typeof json.mse === 'number' ? json.mse.toLocaleString(undefined, {maximumFractionDigits:2}) : json.mse) : 
+                    'N/A';
+                    
+                predictionResult.innerHTML = `<p><strong>Predicted Trade Value:</strong> ${predictionValue}<br><small>(Model: ${json.model_type || ''} | MSE: ${mseValue})</small></p>`;
+                
+                // If we have historical data, plot a chart
+                if (json.historical && Array.isArray(json.historical)) {
+                    // Prepare table data for chart
+                    let rows = [];
+                    json.historical.forEach(row => {
+                        rows.push({ year: row.year, value: row.value, type: 'historical' });
+                    });
+                    rows.push({ year: json.prediction_year || predict_year, value: json.prediction, type: 'predicted' });
+                    
+                    // Save for export
+                    predictionTableData = rows;
+                    
+                    // Display the download button
+                    predictionDownloadBtn.style.display = 'inline-block';
+                    
+                    // Plot the chart
+                    plotPredictionChart(rows);
+                }
+            } else {
+                showAlert('No prediction data returned', 'danger');
+                predictionResult.innerHTML = '<div>No prediction data returned.</div>';
+            }
+        } catch (err) {
+            showAlert('Prediction failed: ' + err, 'danger');
+            predictionResult.innerHTML = '';
+        } finally {
+            hideSpinner();
+        }
+      });
+
+    // Load Chart.js dynamically if not present
+    if (!window.Chart) {
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
+        document.body.appendChild(script);
+    }
+
+    // ---- Tab Navigation Logic ----
+    const tabs = document.querySelectorAll('#main-tabs .tab');
+    const tabContents = document.querySelectorAll('.tab-content');
+    tabs.forEach((tab, idx) => {
+      tab.addEventListener('click', function() {
+        // Hide all spinners in all tab panels
+        document.querySelectorAll('.spinner').forEach(spinner => spinner.style.display = 'none');
+        hideSpinner(); // Also hide main spinner for good measure
+        tabs.forEach((t, i) => {
+          t.classList.remove('active');
+          t.setAttribute('aria-selected', 'false');
+        });
+        tab.classList.add('active');
+        tab.setAttribute('aria-selected', 'true');
+        const tabName = tab.getAttribute('data-tab');
+        tabContents.forEach(panel => {
+          if (panel.id === 'tab-content-' + tabName) {
+            panel.style.display = 'block';
+          } else {
+            panel.style.display = 'none';
+          }
+        });
+        tab.focus();
+      });
+      tab.addEventListener('keydown', function(e) {
+        if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          tabs[(idx + 1) % tabs.length].focus();
+        } else if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          tabs[(idx - 1 + tabs.length) % tabs.length].focus();
+        } else if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          tab.click();
+        }
+      });
+    });
+  });