timekeeping_analysis/trace_visualization/js/charts.js

/* 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);