No data points to display.

`; } }; const renderConfigPanel = () => { const container = elements.editableList; if (!container) return; container.innerHTML = ''; dataPoints.forEach(p => { const card = document.createElement('div'); card.className = 'grid grid-cols-1 md:grid-cols-5 gap-2 items-center bg-white p-2 rounded-md border'; card.innerHTML = ` `; container.appendChild(card); }); }; const handleAddLog = (e) => { e.preventDefault(); try { const getNumericValue = (id) => parseFloat(document.getElementById(id).value) || 0; const newLog = { id: dataPoints.length > 0 ? Math.max(...dataPoints.map(p => p.id)) + 1 : 1, x: getNumericValue('x-value'), y: getNumericValue('y-value'), z: getNumericValue('z-value'), category: document.getElementById('category').value, }; dataPoints.push(newLog); elements.addForm.reset(); renderAll(); showToast('Data point added!'); } catch (error) { console.error("Error adding record:", error); showToast("Error: Could not add record."); } }; const handleConfigListClick = (e) => { const target = e.target.closest('button'); if (!target) return; const action = target.dataset.action; const id = parseInt(target.dataset.id, 10); if (action === 'update') { const index = dataPoints.findIndex(p => p.id === id); if (index === -1) return; const inputs = target.closest('.grid').querySelectorAll('input'); inputs.forEach(input => { const field = input.dataset.field; let value = input.value; if (input.type === 'number') value = parseFloat(value) || 0; dataPoints[index][field] = value; }); } else if (action === 'delete') { dataPoints = dataPoints.filter(p => p.id !== id); } renderAll(); showToast(`Record ${action}d successfully!`); }; const handleGeneratePDF = () => { try { const { jsPDF } = window.jspdf; const doc = new jsPDF(); const metrics = calculateMetrics(); // Render scene for capture renderer.render(scene, camera); const imgData = renderer.domElement.toDataURL('image/png'); doc.setFontSize(20); doc.text("WebGL Data Visualization Report", 105, 20, null, null, 'center'); doc.setFontSize(10); doc.text(`Generated on: ${new Date().toLocaleDateString()}`, 105, 26, null, null, 'center'); doc.autoTable({ startY: 35, head: [['Metric', 'Value']], body: [ ['Data Points', metrics.points], ['Categories', metrics.categories], ['Avg. X Value', metrics.avgX.toFixed(1)], ['Avg. Y Value', metrics.avgY.toFixed(1)] ], theme: 'grid' }); let finalY = doc.lastAutoTable.finalY || 60; doc.setFontSize(14); doc.text("3D Scatter Plot Snapshot", 14, finalY + 15); doc.addImage(imgData, 'PNG', 14, finalY + 20, 180, 100); finalY += 115; doc.setFontSize(14); doc.text("Data Log", 14, finalY); const tableBody = dataPoints.map(p => [p.category, p.x, p.y, p.z]); doc.autoTable({ head: [['Category', 'X', 'Y', 'Z']], body: tableBody, startY: finalY + 5, theme: 'striped', headStyles: { fillColor: [190, 24, 93] } }); doc.save('WebGL-Visualization-Report.pdf'); } catch (error) { console.error("Failed to generate PDF:", error); showToast("Error: Could not generate PDF."); } }; const switchTab = (tabName) => { currentTab = tabName; Object.values(elements.tabs).forEach(tab => tab.classList.add('hidden')); Object.values(elements.tabButtons).forEach(btn => btn.classList.remove('active')); elements.tabs[tabName].classList.remove('hidden'); elements.tabButtons[tabName].classList.add('active'); updateNavButtons(); }; const navigateTabs = (direction) => { const currentIndex = tabOrder.indexOf(currentTab); const newIndex = direction === 'next' ? Math.min(currentIndex + 1, tabOrder.length - 1) : Math.max(currentIndex - 1, 0); if (newIndex !== currentIndex) switchTab(tabOrder[newIndex]); }; const updateNavButtons = () => { const currentIndex = tabOrder.indexOf(currentTab); elements.navButtons.prev.disabled = currentIndex === 0; elements.navButtons.next.disabled = currentIndex === tabOrder.length - 1; }; const showToast = (message) => { if (!elements.toast) return; elements.toast.textContent = message; elements.toast.classList.add('show'); setTimeout(() => { elements.toast.classList.remove('show'); }, 3000); } // --- INITIALIZATION --- initWebGL(); elements.addForm.addEventListener('submit', handleAddLog); elements.editableList.addEventListener('click', handleConfigListClick); elements.pdfButton.addEventListener('click', handleGeneratePDF); elements.tabButtons.dashboard.addEventListener('click', () => switchTab('dashboard')); elements.tabButtons.config.addEventListener('click', () => switchTab('config')); elements.navButtons.prev.addEventListener('click', () => navigateTabs('prev')); elements.navButtons.next.addEventListener('click', () => navigateTabs('next')); renderAll(); updateNavButtons(); });