Merge pull request #78 from StanFromIreland/speed.pypy.org-embedding

mattip · web-flow · commit 35f5f91bf080 · 2026-06-24T23:36:11.000+03:00
Generate a page with baseline comparison for speed.pypy.org
diff --git a/codespeed/urls.py b/codespeed/urls.py
@@ -14,6 +14,7 @@
 ]
 
 urlpatterns += [
+    re_path(r'^embed/comparison/$', views.embed_comparison, name='embed-comparison'),
     re_path(r'^historical/json/$', views.gethistoricaldata, name='gethistoricaldata'),
     re_path(r'^reports/$', views.reports, name='reports'),
     re_path(r'^changes/$', views.changes, name='changes'),
diff --git a/codespeed/views.py b/codespeed/views.py
@@ -16,6 +16,7 @@
 from django.shortcuts import get_object_or_404, render
 from django.views.decorators.http import require_GET, require_POST
 from django.views.decorators.csrf import csrf_exempt
+from django.views.decorators.clickjacking import xframe_options_exempt
 from django.views.generic.base import TemplateView
 
 from .auth import basic_auth_required
@@ -93,6 +94,24 @@ def get_context_data(self, **kwargs):
             return context
 
 
+@require_GET
+@xframe_options_exempt
+def embed_comparison(request):
+    """Frame-exempt page rendering only the baseline-comparison
+    for embedding on pypy.org"""
+    context = {}
+    try:
+        context['baseline'] = Executable.objects.get(
+            name=settings.DEF_BASELINES[0]['executable'])
+        def_name = settings.DEF_EXECUTABLES[0]['name']
+        def_project = Project.objects.get(name=settings.DEF_EXECUTABLES[0]['project'])
+        context['default_exe'] = Executable.objects.get(
+            name=def_name, project=def_project)
+    except Exception as e:
+        logger.error('embed_comparison: %s', e)
+    return render(request, 'embed_comparison.html', context)
+
+
 @require_GET
 def gethistoricaldata(request):
     data = {'results': {}, 'benchmarks': []}
diff --git a/speed_pypy/templates/embed_comparison.html b/speed_pypy/templates/embed_comparison.html
@@ -0,0 +1,88 @@
+{% load static %}
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>PyPy vs CPython benchmark comparison</title>
+  <style>
+    html, body { margin: 0; padding: 0; background: transparent; }
+    #baseline-comparison-plot {
+      position: relative;
+      width: 100%;
+      height: 480px;
+      font-family: sans-serif;
+    }
+  </style>
+</head>
+<body>
+  <div id="baseline-comparison-plot"></div>
+
+  <script type="text/javascript" src="{% static 'js/jquery-1.12.3.min.js' %}"></script>
+  <script type="text/javascript" src="{% static 'js/chart.umd.min.js' %}"></script>
+  <script type="text/javascript">
+    Chart.Tooltip.positioners.cursor = function(_items, eventPosition) {
+        return {x: eventPosition.x, y: eventPosition.y};
+    };
+
+    function renderplot(data) {
+        var wrap = document.getElementById('baseline-comparison-plot');
+        if (data === null || data.length === 0 ||
+            typeof data === 'string' || data instanceof String) {
+            wrap.innerHTML = 'Error retrieving data';
+            return;
+        }
+
+        var benchmarks = [], latestValues = [], baselineValues = [];
+        var tagged_data = [];
+        for (var i in data['tagged_revs']) { tagged_data[i] = []; }
+
+        for (var bench in data['benchmarks']) {
+            var benchname = data['benchmarks'][bench];
+            var add_to_tagged_data = true;
+            for (var i in data['tagged_revs']) {
+                var rev = data['tagged_revs'][i];
+                if (data['results'][benchname][rev] === 0) { add_to_tagged_data = false; break; }
+                tagged_data[i].push(data['results'][benchname][rev] / data['results'][benchname][data['baseline']]);
+            }
+            if (!add_to_tagged_data) { continue; }
+            benchmarks.push(benchname);
+            var rel = data['results'][benchname]['latest'] / data['results'][benchname][data['baseline']];
+            latestValues.push(rel);
+            baselineValues.push(1.0);
+        }
+
+        var canvas1 = document.createElement('canvas');
+        wrap.appendChild(canvas1);
+        new Chart(canvas1, {
+            type: 'bar',
+            data: {
+                labels: benchmarks,
+                datasets: [
+                    {label: 'latest {{ default_exe }}', data: latestValues, backgroundColor: '#4e79a7'},
+                    {label: data['baseline'], data: baselineValues, type: 'line',
+                     borderColor: '#f28e2b', backgroundColor: 'transparent',
+                     pointRadius: 0, borderWidth: 2, fill: false}
+                ]
+            },
+            options: {
+                animation: false,
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    tooltip: {position: 'cursor'}
+                },
+                scales: {
+                    x: {ticks: {maxRotation: 70, minRotation: 70, autoSkip: false, font: {size: 11}}},
+                    y: {min: 0, max: 2.0, ticks: {callback: function(v) { return v.toFixed(2); }}}
+                }
+            }
+        });
+    }
+
+    $(function() {
+        $.getJSON("{% url 'gethistoricaldata' %}", renderplot);
+    });
+  </script>
+</body>
+</html>
diff --git a/speed_pypy/templates/home.html b/speed_pypy/templates/home.html
@@ -29,7 +29,10 @@ <h2>Comparison</h2>
   {% if show_historical %}
   <div id="historical">
     <h3>How fast is {{ default_exe.project }}?</h3>
-    <div id="baseline-comparison-plot" style="position:relative;height:400px;"></div>
+    <iframe src="{% url 'embed-comparison' %}"
+            title="{{ default_exe.project }} ({{ default_exe }}) vs {{ baseline }} benchmark comparison"
+            style="border:0;width:100%;height:400px"
+            loading="lazy"></iframe>
     <p class="plot-caption">Plot 1: The above plot represents {{ default_exe.project }} ({{ default_exe }}) benchmark times normalized to {{ baseline }}. Smaller is better.</p>
     <p>It depends greatly on the type of task being performed. The geometric average of all benchmarks is <span id="geomean"></span> or <strong id="geofaster"></strong> times <em>faster</em> than {{ baseline }}</p>
 
@@ -68,15 +71,15 @@ <h3>How has PyPy performance evolved over time?</h3>
 
     function renderplot(data) {
         if (data === null || data.length === 0) {
-            $("#baseline-comparison-plot").html(getLoadText('Error retrieving data', 0));
+            $("#historical-plot").html(getLoadText('Error retrieving data', 0));
             return;
         }
         if (typeof data === 'string' || data instanceof String) {
-            $("#baseline-comparison-plot").html(getLoadText('Error retrieving data ' + data, 0));
+            $("#historical-plot").html(getLoadText('Error retrieving data ' + data, 0));
             return;
         }
 
-        var benchmarks = [], latestValues = [], baselineValues = [];
+        var latestValues = [];
         var trunk_geomean = 1;
         var tagged_data = [];
         for (var i in data['tagged_revs']) { tagged_data[i] = []; }
@@ -90,45 +93,17 @@ <h3>How has PyPy performance evolved over time?</h3>
                 tagged_data[i].push(data['results'][benchname][rev] / data['results'][benchname][data['baseline']]);
             }
             if (!add_to_tagged_data) { continue; }
-            benchmarks.push(benchname);
             var rel = data['results'][benchname]['latest'] / data['results'][benchname][data['baseline']];
             latestValues.push(rel);
-            baselineValues.push(1.0);
             if (rel > 0 && !isNaN(rel)) { trunk_geomean *= rel; }
         }
 
         trunk_geomean = Math.pow(trunk_geomean, 1 / latestValues.length);
         $('#geomean').html(trunk_geomean.toFixed(2));
         $('#geofaster').html((1 / trunk_geomean).toFixed(1));
 
-        // Plot 1: per-benchmark normalized comparison
-        var wrap1 = document.getElementById('baseline-comparison-plot');
-        var canvas1 = document.createElement('canvas');
-        wrap1.appendChild(canvas1);
-        new Chart(canvas1, {
-            type: 'bar',
-            data: {
-                labels: benchmarks,
-                datasets: [
-                    {label: 'latest {{ default_exe }}', data: latestValues, backgroundColor: '#4e79a7'},
-                    {label: data['baseline'], data: baselineValues, type: 'line',
-                     borderColor: '#f28e2b', backgroundColor: 'transparent',
-                     pointRadius: 0, borderWidth: 2, fill: false}
-                ]
-            },
-            options: {
-                animation: false,
-                responsive: true,
-                maintainAspectRatio: false,
-                plugins: {
-                    tooltip: {position: 'cursor'}
-                },
-                scales: {
-                    x: {ticks: {maxRotation: 70, minRotation: 70, autoSkip: false, font: {size: 11}}},
-                    y: {min: 0, max: 2.0, ticks: {callback: function(v) { return v.toFixed(2); }}}
-                }
-            }
-        });
+        // Plot 1 (per-benchmark normalized comparison) is rendered by the
+        // embed_comparison page shown in the iframe above.
 
         // Plot 2: geomean speedup over tagged revisions
         var geomeans = [1.0];

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@`
`14`	`14`	`]`
`15`	`15`
`16`	`16`	`urlpatterns += [`
	`17`	`+ re_path(r'^embed/comparison/$', views.embed_comparison, name='embed-comparison'),`
`17`	`18`	`re_path(r'^historical/json/$', views.gethistoricaldata, name='gethistoricaldata'),`
`18`	`19`	`re_path(r'^reports/$', views.reports, name='reports'),`
`19`	`20`	`re_path(r'^changes/$', views.changes, name='changes'),`