Added option to view sample data in the web app.

- Fixed an issue with the CDN link for d3-flamegraph
- Added option for verbose logging to help with debugging

host/web/static/js/app.js

@@ -4,7 +4,7 @@
 let socket = null;
 let isConnected = false;
 let isProfiling = false;
-let flamegraph = null;
+let flamegraphChart = null;
 
 // Initialize on page load
 document.addEventListener('DOMContentLoaded', function() {
@@ -208,38 +208,53 @@ function showTab(tabName) {
 function initializeFlameGraph() {
     const width = document.getElementById('flamegraph').offsetWidth;
 
-    flamegraph = d3.flamegraph()
+    flamegraph = flamegraph()
         .width(width)
         .cellHeight(18)
         .transitionDuration(750)
         .minFrameSize(5)
         .transitionEase(d3.easeCubic)
-        .sort(true)
-        .title("")
-        .differential(false)
-        .selfValue(false);
+        .sort(true);
 
     // Color scheme
-    flamegraph.setColorMapper((d, originalColor) => {
+    flamegraphChart.setColorMapper((d, originalColor) => {
         // Color by depth for better visualization
-        const hue = (d.data.depth * 30) % 360;
+        const depth = d.depth || 0;
+        const hue = (depth * 30) % 360;
         return d3.hsl(hue, 0.6, 0.5);
     });
 
     d3.select("#flamegraph")
         .datum({name: "root", value: 0, children: []})
-        .call(flamegraph);
+        .call(flamegraphChart);
 }
 
 function updateFlameGraph(data) {
-    if (!flamegraph) {
-        initializeFlameGraph();
+    // Initialize if not already created
+    if (!flamegraphChart) {
+        const width = document.getElementById('flamegraph').offsetWidth;
+
+        flamegraphChart = flamegraph()
+            .width(width)
+            .cellHeight(18)
+            .transitionDuration(750)
+            .minFrameSize(5)
+            .transitionEase(d3.easeCubic)
+            .sort(true);
+
+        // Color scheme
+        flamegraphChart.setColorMapper((d, originalColor) => {
+            // Color by depth for better visualization
+            const depth = d.depth || 0;
+            const hue = (depth * 30) % 360;
+            return d3.hsl(hue, 0.6, 0.5);
+        });
     }
 
     // Update flame graph with new data
     d3.select("#flamegraph")
         .datum(data)
-        .call(flamegraph);
+        .call(flamegraphChart);
 }
 
 // Timeline Visualization
@@ -330,11 +345,54 @@ function updateStatistics(data) {
     tbody.innerHTML = html;
 }
 
+// Load Sample Data
+async function loadSampleData() {
+    try {
+        updateStatus('Generating sample data...', false);
+
+        // Generate and fetch sample data in one call
+        const response = await fetch('/api/sample/generate');
+
+        if (!response.ok) {
+            throw new Error('Failed to generate sample data');
+        }
+
+        const data = await response.json();
+        const { flamegraph: flamegraphData, statistics: statsData, timeline: timelineData } = data;
+
+        // Update all visualizations
+        updateFlameGraph(flamegraphData);
+        updateStatistics(statsData);
+        updateTimeline(timelineData);
+
+        // Update summary
+        const totalRecords = timelineData.length;
+        const totalFunctions = statsData.length;
+        const totalTime = statsData.reduce((sum, s) => sum + s.total_us, 0);
+        const hottest = statsData[0]; // Already sorted by total_us
+
+        updateSummary({
+            total_records: totalRecords,
+            total_functions: totalFunctions,
+            total_time_us: totalTime,
+            hottest_function: hottest ? hottest.name : null,
+            hottest_time_us: hottest ? hottest.total_us : 0
+        });
+
+        updateStatus('Sample data loaded', false);
+        console.log('Sample data loaded successfully');
+    } catch (error) {
+        console.error('Error loading sample data:', error);
+        alert(`Error loading sample data: ${error.message}`);
+        updateStatus('Error loading sample data', false);
+    }
+}
+
 // Handle window resize for flame graph
 window.addEventListener('resize', function() {
     if (flamegraph) {
         const width = document.getElementById('flamegraph').offsetWidth;
-        flamegraph.width(width);
-        flamegraph.update();
+        flamegraphChart.width(width);
+        flamegraphChart.update();
     }
 });