backup incomplete, but working new version

static/js/benchmark.js

@@ -1,3 +1,26 @@
+document.addEventListener('DOMContentLoaded', function () {
+    var converter = new showdown.Converter();
+    var aiSummaryHTMLElement = document.getElementById('aiSummaryMarkdown');
+
+    // Create an Intersection Observer
+    var observer = new IntersectionObserver(function (entries, observer) {
+        entries.forEach(function (entry) {
+            if (entry.isIntersecting) {
+                // Element is visible, render the Markdown
+                var htmlContents = converter.makeHtml(aiSummaryHTMLElement.innerText);
+                aiSummaryHTMLElement.innerHTML = htmlContents;
+                // Stop observing after rendering
+                observer.unobserve(aiSummaryHTMLElement);
+            }
+        });
+    }, { threshold: 1.0 });
+
+    // Start observing the element
+    observer.observe(aiSummaryHTMLElement);
+});
+
+// ===========================================================================================
+
 // Common chart options
 const commonChartOptions = {
     chart: {backgroundColor: null, style: {color: '#FFFFFF'}, animation: false},
@@ -16,6 +39,8 @@ Highcharts.setOptions({chart: {animation: false}, plotOptions: {series: {animati
 
 const colors = Highcharts.getOptions().colors;
 
+// ===========================================================================================
+
 function getLineChartOptions(title, description, unit, maxY = null) {
     return {
         ...commonChartOptions,
@@ -32,6 +57,42 @@ function getLineChartOptions(title, description, unit, maxY = null) {
     };
 }
 
+function createChart(chartId, title, description, unit, dataArrays, maxY = null) {
+    const options = getLineChartOptions(title, description, unit, maxY);
+    options.series = dataArrays.map((dataArray, index) => ({name: dataArray.label, data: dataArray.data, color: colors[index % colors.length]}));
+    Highcharts.chart(chartId, options);
+}
+
+// Create line charts
+createChart('fpsChart', 'FPS', 'More is better', 'fps', fpsDataArrays);
+createChart('fpsChart2', 'FPS', 'More is better', 'fps', fpsDataArrays);
+createChart('frameTimeChart', 'Frametime', 'Less is better', 'ms', frameTimeDataArrays);
+createChart('frameTimeChart2', 'Frametime', 'Less is better', 'ms', frameTimeDataArrays);
+createChart('cpuLoadChart', 'CPU Load', '', '%', cpuLoadDataArrays, 100);
+createChart('gpuLoadChart', 'GPU Load', '', '%', gpuLoadDataArrays, 100);
+createChart('cpuTempChart', 'CPU Temperature', '', '°C', cpuTempDataArrays);
+createChart('gpuTempChart', 'GPU Temperature', '', '°C', gpuTempDataArrays);
+createChart('gpuCoreClockChart', 'GPU Core Clock', '', 'MHz', gpuCoreClockDataArrays);
+createChart('gpuMemClockChart', 'GPU Memory Clock', '', 'MHz', gpuMemClockDataArrays);
+createChart('gpuVRAMUsedChart', 'GPU VRAM Usage', '', 'GB', gpuVRAMUsedDataArrays);
+createChart('gpuPowerChart', 'GPU Power', '', 'W', gpuPowerDataArrays);
+createChart('ramUsedChart', 'RAM Usage', '', 'GB', ramUsedDataArrays);
+createChart('swapUsedChart', 'SWAP Usage', '', 'GB', swapUsedDataArrays);
+
+// ===========================================================================================
+
+function calculateAverage(data) {
+    return data.reduce((acc, value) => acc + value, 0) / data.length;
+}
+
+// Calculate average CPU, GPU, GPU Core clock and GPU memory clock load
+const fpsAverages = fpsDataArrays.map(dataArray => calculateAverage(dataArray.data));
+const frametimeAverages = frameTimeDataArrays.map(dataArray => calculateAverage(dataArray.data));
+const cpuLoadAverages = cpuLoadDataArrays.map(dataArray => calculateAverage(dataArray.data));
+const gpuLoadAverages = gpuLoadDataArrays.map(dataArray => calculateAverage(dataArray.data));
+const gpuCoreClockAverages = gpuCoreClockDataArrays.map(dataArray => calculateAverage(dataArray.data));
+const gpuMemClockAverages = gpuMemClockDataArrays.map(dataArray => calculateAverage(dataArray.data));
+
 function getBarChartOptions(title, unit, maxY = null) {
     return {
         ...commonChartOptions,
@@ -46,12 +107,6 @@ function getBarChartOptions(title, unit, maxY = null) {
     };
 }
 
-function createChart(chartId, title, description, unit, dataArrays, maxY = null) {
-    const options = getLineChartOptions(title, description, unit, maxY);
-    options.series = dataArrays.map((dataArray, index) => ({name: dataArray.label, data: dataArray.data, color: colors[index % colors.length]}));
-    Highcharts.chart(chartId, options);
-}
-
 function createBarChart(chartId, title, unit, categories, data, colors, maxY = null) {
     const options = getBarChartOptions(title, unit, maxY);
     options.xAxis.categories = categories;
@@ -59,37 +114,21 @@ function createBarChart(chartId, title, unit, categories, data, colors, maxY = n
     Highcharts.chart(chartId, options);
 }
 
-function calculateAverage(data) {
+// Create bar charts for average CPU, GPU, GPU Core clock and GPU memory clock load
-    return data.reduce((acc, value) => acc + value, 0) / data.length;
+createBarChart('fpsSummaryChart', 'Average FPS', 'fps', fpsDataArrays.map(dataArray => dataArray.label), fpsAverages, colors, 100);
-}
+createBarChart('frametimeSummaryChart', 'Average Frametime', 'ms', frameTimeDataArrays.map(dataArray => dataArray.label), frametimeAverages, colors, 100);
+createBarChart('cpuLoadSummaryChart', 'Average CPU Load', '%', cpuLoadDataArrays.map(dataArray => dataArray.label), cpuLoadAverages, colors, 100);
+createBarChart('gpuLoadSummaryChart', 'Average GPU Load', '%', gpuLoadDataArrays.map(dataArray => dataArray.label), gpuLoadAverages, colors, 100);
+createBarChart('gpuCoreClockSummaryChart', 'Average GPU Core Clock', 'Hz', gpuCoreClockDataArrays.map(dataArray => dataArray.label), gpuCoreClockAverages, colors);
+createBarChart('gpuMemClockSummaryChart', 'Average GPU Memory Clock', 'Hz', gpuMemClockDataArrays.map(dataArray => dataArray.label), gpuMemClockAverages, colors);
+
+// ===========================================================================================
 
 function calculatePercentile(data, percentile) {
     data.sort((a, b) => a - b);
     return data[Math.ceil(percentile / 100 * data.length) - 1];
 }
 
-// Create line charts
-createChart('fpsChart', 'FPS', 'More is better', 'fps', fpsDataArrays);
-createChart('frameTimeChart', 'Frametime', 'Less is better', 'ms', frameTimeDataArrays);
-createChart('cpuLoadChart', 'CPU Load', '', '%', cpuLoadDataArrays, 100);
-createChart('gpuLoadChart', 'GPU Load', '', '%', gpuLoadDataArrays, 100);
-createChart('cpuTempChart', 'CPU Temperature', '', '°C', cpuTempDataArrays);
-createChart('gpuTempChart', 'GPU Temperature', '', '°C', gpuTempDataArrays);
-createChart('gpuCoreClockChart', 'GPU Core Clock', '', 'MHz', gpuCoreClockDataArrays);
-createChart('gpuMemClockChart', 'GPU Memory Clock', '', 'MHz', gpuMemClockDataArrays);
-createChart('gpuVRAMUsedChart', 'GPU VRAM Usage', '', 'GB', gpuVRAMUsedDataArrays);
-createChart('gpuPowerChart', 'GPU Power', '', 'W', gpuPowerDataArrays);
-createChart('ramUsedChart', 'RAM Usage', '', 'GB', ramUsedDataArrays);
-createChart('swapUsedChart', 'SWAP Usage', '', 'GB', swapUsedDataArrays);
-
-// Calculate average CPU and GPU load
-const cpuLoadAverages = cpuLoadDataArrays.map(dataArray => calculateAverage(dataArray.data));
-const gpuLoadAverages = gpuLoadDataArrays.map(dataArray => calculateAverage(dataArray.data));
-
-// Create bar charts for average CPU and GPU load
-createBarChart('cpuLoadSummaryChart', 'Average CPU Load', '%', cpuLoadDataArrays.map(dataArray => dataArray.label), cpuLoadAverages, colors, 100);
-createBarChart('gpuLoadSummaryChart', 'Average GPU Load', '%', gpuLoadDataArrays.map(dataArray => dataArray.label), gpuLoadAverages, colors, 100);
-
 // Calculate and render min, max, and average FPS
 const categories = [];
 const minFPSData = [];
@@ -103,7 +142,7 @@ fpsDataArrays.forEach(dataArray => {
     maxFPSData.push(calculatePercentile(dataArray.data, 97));
 });
 
-Highcharts.chart('minMaxAvgChart', {
+Highcharts.chart('fpsMinMaxAvgChart', {
     ...commonChartOptions,
     chart: {...commonChartOptions.chart, type: 'bar'},
     title: {...commonChartOptions.title, text: 'Min/Avg/Max FPS'},
@@ -141,7 +180,7 @@ const sortedCategories = sortedData.map(item => item.label);
 const sortedPercentageFPSData = sortedData.map(item => item.percentage);
 
 // Create bar chart for FPS percentage
-Highcharts.chart('avgChart', {
+Highcharts.chart('fpsAvgChart', {
     ...commonChartOptions,
     chart: {...commonChartOptions.chart, type: 'bar'},
     title: {...commonChartOptions.title, text: 'Avg FPS comparison in %'},
@@ -194,7 +233,7 @@ function countFPS(data) {
 const densityData = fpsDataArrays.map(dataArray => ({name: dataArray.label, data: countFPS(filterOutliers(dataArray.data))}));
 
 // Create the chart
-Highcharts.chart('densityChart', {
+Highcharts.chart('fpsDensityChart', {
     ...commonChartOptions,
     chart: {...commonChartOptions.chart, type: 'areaspline'},
     title: {...commonChartOptions.title, text: 'FPS Density'},
@@ -222,7 +261,7 @@ const sdvCategories = fpsDataArrays.map(dataArray => dataArray.label);
 const standardDeviations = fpsDataArrays.map(dataArray => calculateStandardDeviation(dataArray.data));
 const variances = fpsDataArrays.map(dataArray => calculateVariance(dataArray.data));
 
-Highcharts.chart('sdvChart', {
+Highcharts.chart('fpsStddevVarianceChart', {
     ...commonChartOptions,
     chart: {...commonChartOptions.chart, type: 'bar'},
     title: {...commonChartOptions.title, text: 'FPS Stability'},

templates/benchmark.tmpl

@@ -50,18 +50,76 @@
     </div>
 </div>
 
-<div id="fpsChart" style="height:250pt;"></div>
+<ul class="nav nav-tabs" id="myTab" role="tablist">
-<div id="frameTimeChart" style="height:250pt;"></div>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link active" id="fps-tab" data-bs-toggle="tab" data-bs-target="#fps" type="button" role="tab" aria-controls="fps" aria-selected="false"><i class="fas fa-tachometer-alt"></i> FPS</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="frametime-tab" data-bs-toggle="tab" data-bs-target="#frametime" type="button" role="tab" aria-controls="frametime" aria-selected="false"><i class="fas fa-clock"></i> Frametime</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="summary-tab" data-bs-toggle="tab" data-bs-target="#summary" type="button" role="tab" aria-controls="summary" aria-selected="true"><i class="fas fa-chart-bar"></i> Summary</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="more-metrics-tab" data-bs-toggle="tab" data-bs-target="#more-metrics" type="button" role="tab" aria-controls="more-metrics" aria-selected="true"><i class="fas fa-chart-line"></i> All data</button>
+  </li>
+</ul>
+<div class="tab-content" id="myTabContent">
 
-<div class="accordion" id="accordionFlushExample">
+  <!-- FPS tab -->
-  <div class="accordion-item">
+  <div class="tab-pane fade show active" id="fps" role="tabpanel" aria-labelledby="fps-tab">
-    <h2 class="accordion-header" id="flush-headingTwo">
+    <div id="fpsChart2" style="height:250pt;"></div>
-      <button id="hideAdditionalMetricsBtn" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
+    <div id="fpsMinMaxAvgChart" style="height:500pt;"></div>
-        Additional metrics
+    <div id="fpsDensityChart" style="height:250pt;"></div>
-      </button>
+    <div id="fpsAvgChart" style="height:250pt;"></div>
-    </h2>
+    <div id="fpsStddevVarianceChart" style="height:400pt;"></div>
-    <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
+  </div>
 
+  <!-- Frametime tab -->
+  <div class="tab-pane fade" id="frametime" role="tabpanel" aria-labelledby="frametime-tab">
+    <div id="frameTimeChart2" style="height:250pt;"></div>
+  </div>
+
+  <!-- Summary tab -->
+  <div class="tab-pane" id="summary" role="tabpanel" aria-labelledby="summary-tab">
+        <div class="row">
+            <div class="col-md-12 text-center" id="aiSummaryMarkdown">
+                <!-- TODO: markdown placeholder for AI summary -->
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-6">
+                <div id="fpsSummaryChart" style="height:250pt;"></div>
+            </div>
+            <div class="col-md-6">
+                <div id="frametimeSummaryChart" style="height:250pt;"></div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-6">
+                <div id="cpuLoadSummaryChart" style="height:250pt;"></div>
+            </div>
+            <div class="col-md-6">
+                <div id="gpuLoadSummaryChart" style="height:250pt;"></div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-6">
+                <div id="gpuCoreClockSummaryChart" style="height:250pt;"></div>
+            </div>
+            <div class="col-md-6">
+                <div id="gpuMemClockSummaryChart" style="height:250pt;"></div>
+            </div>
+        </div>
+  </div>
+
+  <!-- More metrics tab -->
+  <div class="tab-pane" id="more-metrics" role="tabpanel" aria-labelledby="more-metrics-tab">
+        <div id="fpsChart" style="height:250pt;"></div>
+        <div id="frameTimeChart" style="height:250pt;"></div>
         <div id="cpuLoadChart" style="height:250pt;"></div>
         <div id="gpuLoadChart" style="height:250pt;"></div>
         <div id="cpuTempChart" style="height:250pt;"></div>
@@ -72,33 +130,16 @@
         <div id="gpuPowerChart" style="height:250pt;"></div>
         <div id="ramUsedChart" style="height:250pt;"></div>
         <div id="swapUsedChart" style="height:250pt;"></div>
+  </div>
 
-    </div>
-  </div>
 </div>
 
-<div class="row">
-    <div class="col-md-6">
-        <div id="cpuLoadSummaryChart" style="height:250pt;"></div>
-    </div>
-    <div class="col-md-6">
-        <div id="gpuLoadSummaryChart" style="height:250pt;"></div>
-    </div>
-</div>
-
-<div id="minMaxAvgChart" style="height:500pt;"></div>
-
-<div id="avgChart" style="height:250pt;"></div>
-
-<div id="densityChart" style="height:250pt;"></div>
-
-<div id="sdvChart" style="height:400pt;"></div>
-
 <script src="https://code.highcharts.com/highcharts.js"></script>
 <script src="https://code.highcharts.com/modules/exporting.js"></script>
 <script src="https://code.highcharts.com/modules/export-data.js"></script>
 <script src="https://code.highcharts.com/modules/full-screen.js"></script>
 <script src="https://code.highcharts.com/modules/boost.js"></script>
+<script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
 
 <script>
     var fpsDataArrays = [