refactor: Update workerStats chart creation and update logic

The code changes refactor the logic for creating and updating the workerStats chart in the dashboard. Instead of clearing the previous content and recreating the chart every time, the code now checks if the chart exists and creates it only if it doesn't. Additionally, the chart data is updated with the latest worker statistics. This improves the efficiency and performance of the chart rendering.
provos · Sep 9, 2024 · f90ed10 · f90ed10
1 parent 136bd97
commit f90ed10
Showing 1 changed file with 76 additions and 70 deletions.
diff --git a/src/planai/templates/index.html b/src/planai/templates/index.html
@@ -242,87 +242,93 @@ <h4>Input Provenance:</h4>
 
         function updateWorkerStats(workerStats) {
             const workerStatsElement = document.getElementById('worker-stats');
-            workerStatsElement.innerHTML = ''; // Clear previous content
 
-            const canvas = document.createElement('canvas');
-            canvas.id = 'workerStatsChart';
-            workerStatsElement.appendChild(canvas);
-
-            const ctx = canvas.getContext('2d');
-
-            const labels = Object.keys(workerStats);
-            const minData = labels.map(worker => workerStats[worker].min);
-            const medianData = labels.map(worker => workerStats[worker].median);
-            const maxData = labels.map(worker => workerStats[worker].max);
-            const stdDevData = labels.map(worker => workerStats[worker].stdDev);
-
-            if (workerChart) {
-                workerChart.destroy();
-            }
-
-            workerChart = new Chart(ctx, {
-                type: 'bar',
-                data: {
-                    labels: labels,
-                    datasets: [
-                        {
-                            label: 'Min',
-                            data: minData,
-                            backgroundColor: 'rgba(75, 192, 192, 0.6)',
-                        },
-                        {
-                            label: 'Median',
-                            data: medianData,
-                            backgroundColor: 'rgba(54, 162, 235, 0.6)',
-                        },
-                        {
-                            label: 'Max',
-                            data: maxData,
-                            backgroundColor: 'rgba(255, 99, 132, 0.6)',
-                        },
-                        {
-                            label: 'Std Dev',
-                            data: stdDevData,
-                            backgroundColor: 'rgba(255, 206, 86, 0.6)',
-                            type: 'line',
-                        }
-                    ]
-                },
-                options: {
-                    responsive: true,
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            title: {
-                                display: true,
-                                text: 'Execution Time (seconds)'
+            if (!workerChart) {
+                // Create the chart if it doesn't exist
+                const canvas = document.createElement('canvas');
+                canvas.id = 'workerStatsChart';
+                workerStatsElement.appendChild(canvas);
+                const ctx = canvas.getContext('2d');
+
+                workerChart = new Chart(ctx, {
+                    type: 'bar',
+                    data: {
+                        labels: [],
+                        datasets: [
+                            {
+                                label: 'Min',
+                                data: [],
+                                backgroundColor: 'rgba(75, 192, 192, 0.6)',
+                            },
+                            {
+                                label: 'Median',
+                                data: [],
+                                backgroundColor: 'rgba(54, 162, 235, 0.6)',
+                            },
+                            {
+                                label: 'Max',
+                                data: [],
+                                backgroundColor: 'rgba(255, 99, 132, 0.6)',
+                            },
+                            {
+                                label: 'Std Dev',
+                                data: [],
+                                backgroundColor: 'rgba(255, 206, 86, 0.6)',
                             }
-                        }
+                        ]
                     },
-                    plugins: {
-                        title: {
-                            display: true,
-                            text: 'Worker Execution Statistics'
+                    options: {
+                        responsive: true,
+                        scales: {
+                            y: {
+                                beginAtZero: true,
+                                title: {
+                                    display: true,
+                                    text: 'Execution Time (seconds)'
+                                }
+                            }
                         },
-                        tooltip: {
-                            callbacks: {
-                                label: function (context) {
-                                    let label = context.dataset.label || '';
-                                    if (label) {
-                                        label += ': ';
-                                    }
-                                    if (context.parsed.y !== null) {
-                                        label += context.parsed.y.toFixed(2) + ' seconds';
+                        plugins: {
+                            title: {
+                                display: true,
+                                text: 'Worker Execution Statistics'
+                            },
+                            tooltip: {
+                                callbacks: {
+                                    label: function (context) {
+                                        let label = context.dataset.label || '';
+                                        if (label) {
+                                            label += ': ';
+                                        }
+                                        if (context.parsed.y !== null) {
+                                            label += context.parsed.y.toFixed(2) + ' seconds';
+                                        }
+                                        return label;
                                     }
-                                    return label;
                                 }
                             }
                         }
                     }
-                }
-            });
+                });
+            }
+
+            // Update chart data
+            const labels = Object.keys(workerStats);
+            const minData = labels.map(worker => workerStats[worker].min);
+            const medianData = labels.map(worker => workerStats[worker].median);
+            const maxData = labels.map(worker => workerStats[worker].max);
+            const stdDevData = labels.map(worker => workerStats[worker].stdDev);
+
+            workerChart.data.labels = labels;
+            workerChart.data.datasets[0].data = minData;
+            workerChart.data.datasets[1].data = medianData;
+            workerChart.data.datasets[2].data = maxData;
+            workerChart.data.datasets[3].data = stdDevData;
+
+            workerChart.update();
         }
 
+
         // Quit button functionality
         document.getElementById('quit-button').addEventListener('click', function () {
             fetch('/quit', { method: 'POST' })