Fix(viewer): Add missing files

Author: klieret

codeclash/viewer/static/js/analysis.js

@@ -0,0 +1,189 @@
+/**
+ * Analysis functionality for the CodeClash trajectory viewer
+ */
+
+let lineCountChart = null;
+let analysisData = null;
+
+/**
+ * Initialize the analysis functionality
+ */
+function initializeAnalysis() {
+  const analysisDataElement = document.getElementById("analysis-data");
+  if (!analysisDataElement) {
+    return; // No analysis data available
+  }
+
+  try {
+    analysisData = JSON.parse(analysisDataElement.textContent);
+
+    if (
+      analysisData &&
+      analysisData.all_files &&
+      analysisData.all_files.length > 0
+    ) {
+      setupFileDropdown();
+      createLineCountChart(analysisData.all_files[0]); // Start with first file
+    }
+  } catch (error) {
+    console.error("Error parsing analysis data:", error);
+  }
+}
+
+/**
+ * Setup the file dropdown change handler
+ */
+function setupFileDropdown() {
+  const dropdown = document.getElementById("file-dropdown");
+  if (!dropdown) return;
+
+  dropdown.addEventListener("change", function () {
+    const selectedFile = this.value;
+    if (selectedFile && lineCountChart) {
+      updateLineCountChart(selectedFile);
+    }
+  });
+}
+
+/**
+ * Create the line count chart for a specific file
+ */
+function createLineCountChart(fileName) {
+  const canvas = document.getElementById("line-count-chart");
+  if (!canvas || !analysisData) return;
+
+  const ctx = canvas.getContext("2d");
+
+  // Destroy existing chart if it exists
+  if (lineCountChart) {
+    lineCountChart.destroy();
+  }
+
+  const chartData = prepareChartData(fileName);
+
+  lineCountChart = new Chart(ctx, {
+    type: "line",
+    data: chartData,
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        title: {
+          display: true,
+          text: `Line Count Over Rounds: ${fileName}`,
+        },
+        legend: {
+          display: true,
+          position: "top",
+        },
+      },
+      scales: {
+        x: {
+          title: {
+            display: true,
+            text: "Round",
+          },
+          type: "linear",
+          position: "bottom",
+        },
+        y: {
+          title: {
+            display: true,
+            text: "Line Count",
+          },
+          beginAtZero: true,
+        },
+      },
+      interaction: {
+        intersect: false,
+        mode: "index",
+      },
+    },
+  });
+}
+
+/**
+ * Update the existing chart with data for a new file
+ */
+function updateLineCountChart(fileName) {
+  if (!lineCountChart || !analysisData) return;
+
+  const chartData = prepareChartData(fileName);
+  lineCountChart.data = chartData;
+  lineCountChart.options.plugins.title.text = `Line Count Over Rounds: ${fileName}`;
+  lineCountChart.update();
+}
+
+/**
+ * Prepare chart data for a specific file
+ */
+function prepareChartData(fileName) {
+  const datasets = [];
+  const colors = [
+    "#FF6384",
+    "#36A2EB",
+    "#FFCE56",
+    "#4BC0C0",
+    "#9966FF",
+    "#FF9F40",
+    "#FF6384",
+    "#C9CBCF",
+    "#4BC0C0",
+    "#FF6384",
+  ];
+
+  let colorIndex = 0;
+
+  // Get all rounds across all players
+  const allRounds = new Set();
+  Object.values(analysisData.line_counts_by_round).forEach((playerData) => {
+    Object.keys(playerData).forEach((round) => {
+      allRounds.add(parseInt(round));
+    });
+  });
+
+  const sortedRounds = Array.from(allRounds).sort((a, b) => a - b);
+
+  // Create dataset for each player
+  Object.entries(analysisData.line_counts_by_round).forEach(
+    ([playerName, playerData]) => {
+      const data = [];
+
+      sortedRounds.forEach((round) => {
+        const roundData = playerData[round];
+        if (roundData && roundData[fileName] !== undefined) {
+          data.push({
+            x: round,
+            y: roundData[fileName],
+          });
+        } else {
+          // If file doesn't exist in this round, use 0 or previous value
+          const prevValue = data.length > 0 ? data[data.length - 1].y : 0;
+          data.push({
+            x: round,
+            y: prevValue,
+          });
+        }
+      });
+
+      datasets.push({
+        label: playerName,
+        data: data,
+        borderColor: colors[colorIndex % colors.length],
+        backgroundColor: colors[colorIndex % colors.length] + "20", // Add transparency
+        borderWidth: 2,
+        fill: false,
+        tension: 0.1,
+      });
+
+      colorIndex++;
+    },
+  );
+
+  return { datasets };
+}
+
+// Initialize when DOM is loaded
+document.addEventListener("DOMContentLoaded", function () {
+  initializeAnalysis();
+});

codeclash/viewer/templates/includes/analysis.html

@@ -0,0 +1,34 @@
+<!-- Analysis Section -->
+<section class="analysis-section">
+    <h2>📊 Analysis</h2>
+
+    <!-- Line Counting Analysis -->
+    <details class="foldout">
+        <summary>📈 Line Counting Analysis</summary>
+        <div class="log-content">
+            {% if analysis_data and analysis_data.all_files %}
+                <div class="line-analysis-container">
+                    <!-- File Dropdown -->
+                    <div class="file-selector">
+                        <label for="file-dropdown">Select File:</label>
+                        <select id="file-dropdown" class="file-dropdown">
+                            {% for file_path in analysis_data.all_files %}
+                                <option value="{{ file_path }}">{{ file_path }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+
+                    <!-- Chart Container -->
+                    <div class="chart-container">
+                        <canvas id="line-count-chart" width="800" height="400"></canvas>
+                    </div>
+
+                    <!-- Data for JavaScript -->
+                    <script type="application/json" id="analysis-data">{{ analysis_data | tojson }}</script>
+                </div>
+            {% else %}
+                <p>No line count data available. This analysis requires games with changed files data.</p>
+            {% endif %}
+        </div>
+    </details>
+</section>