Add trace_visualization/js/charts.js

2025-12-27 16:53:25 +00:00 · 2025-12-27 16:53:25 +00:00 · 5b8c338bcb
commit 5b8c338bcb
parent 24efc72aa6
1 changed files with 154 additions and 0 deletions
--- a/trace_visualization/js/charts.js
+++ b/trace_visualization/js/charts.js
@ -0,0 +1,154 @@
+/* Chart logic for WF_MIGRATED analysis visualization */
+
+(function(global) {
+  'use strict';
+
+  let migrationChartInstance = null;
+  let timelineChartInstance = null;
+
+  function destroyChart(chartInstance) {
+    if (chartInstance) {
+      chartInstance.destroy();
+    }
+  }
+
+  function renderMigrationChart(analysisData) {
+    const ctx = document.getElementById('migrationChart');
+    if (!ctx || !analysisData || !Array.isArray(analysisData.runs)) {
+      console.warn('renderMigrationChart: invalid data or missing canvas');
+      return;
+    }
+
+    const labels = analysisData.runs.map(run => run.type || 'unknown');
+    const medianShifts = analysisData.runs.map(run => run.median_shift || 0);
+    const variances = analysisData.runs.map(run => run.variance || 0);
+
+    destroyChart(migrationChartInstance);
+
+    migrationChartInstance = new Chart(ctx, {
+      type: 'bar',
+      data: {
+        labels: labels,
+        datasets: [
+          {
+            label: 'Median Shift',
+            data: medianShifts,
+            backgroundColor: 'rgba(75, 192, 192, 0.6)',
+            borderColor: 'rgba(75, 192, 192, 1)',
+            borderWidth: 1
+          },
+          {
+            label: 'Variance',
+            data: variances,
+            backgroundColor: 'rgba(255, 159, 64, 0.6)',
+            borderColor: 'rgba(255, 159, 64, 1)',
+            borderWidth: 1
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        plugins: {
+          title: {
+            display: true,
+            text: 'WF_MIGRATED Impact on Median and Variance'
+          },
+          legend: {
+            display: true,
+            position: 'bottom'
+          }
+        },
+        scales: {
+          y: {
+            beginAtZero: true,
+            title: {
+              display: true,
+              text: 'Time (ns)'
+            }
+          }
+        }
+      }
+    });
+  }
+
+  function updateTimelineChart(analysisData) {
+    const ctx = document.getElementById('timelineChart');
+    if (!ctx || !analysisData || !Array.isArray(analysisData.runs)) {
+      console.warn('updateTimelineChart: invalid data or missing canvas');
+      return;
+    }
+
+    const labels = [];
+    const values = [];
+    const migratedPoints = [];
+
+    analysisData.runs.forEach((run, index) => {
+      labels.push(`Run ${index + 1}`);
+      const offset = run.offset_constant || 0;
+      values.push(offset);
+      if (run.migrated_ratio > 0) {
+        migratedPoints.push({ x: index, y: offset, r: Math.min(run.migrated_ratio * 10, 10) });
+      }
+    });
+
+    destroyChart(timelineChartInstance);
+
+    timelineChartInstance = new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: labels,
+        datasets: [
+          {
+            label: 'Offset Constant',
+            data: values,
+            borderColor: 'rgba(54, 162, 235, 1)',
+            backgroundColor: 'rgba(54, 162, 235, 0.2)',
+            fill: false,
+            tension: 0.3
+          },
+          {
+            label: 'WF_MIGRATED markers',
+            data: migratedPoints,
+            type: 'bubble',
+            backgroundColor: 'rgba(255, 99, 132, 0.6)'
+          }
+        ]
+      },
+      options: {
+        responsive: true,
+        interaction: {
+          mode: 'nearest',
+          intersect: false
+        },
+        plugins: {
+          title: {
+            display: true,
+            text: 'Task Scheduling Timeline'
+          },
+          legend: {
+            display: true,
+            position: 'bottom'
+          }
+        },
+        scales: {
+          y: {
+            title: {
+              display: true,
+              text: 'Offset'
+            }
+          },
+          x: {
+            title: {
+              display: true,
+              text: 'Run Index'
+            }
+          }
+        }
+      }
+    });
+  }
+
+  global.renderMigrationChart = renderMigrationChart;
+  global.updateTimelineChart = updateTimelineChart;
+
+})(window);