Customise benchmark page

Signed-off-by: Vlad Volodkin <[email protected]>
awslabs · Jan 16, 2025 · ee882fb · ee882fb
1 parent d008177
commit ee882fb
Show file tree

Hide file tree

Showing 8 changed files with 507 additions and 16 deletions.
diff --git a/.github/actions/scripts/copy-static-files.sh b/.github/actions/scripts/copy-static-files.sh
@@ -0,0 +1,80 @@
+#!/bin/bash
+
+# Source directory in the main branch
+SOURCE_DIR=".github/actions/static_files"
+# Temporary directory to store files in after switching to gh-pages branch
+TMP_DIR="/tmp/static_files"
+
+# Check if at least one destination directory is provided as argument
+if [ "$#" -lt 1 ]; then
+  echo "Usage: $0 <destination_dir1> <destination_dir2> ... <destination_dirN>"
+  exit 1
+fi
+
+# Function to copy files from source to destination dirs
+copy_files() {
+  local SOURCE_DIR=$1
+  local DEST_DIR=$2
+  local FILES=("${@:3}")  # Capture all remaining arguments as the list of files to copy
+
+  echo "Copying files from $SOURCE_DIR to $DEST_DIR..."
+
+  # Create destination directory if it doesn't exist
+  mkdir -p "$DEST_DIR"
+
+  # Iterate through each file in the list and copy it to the destination directory
+  for FILE in "${FILES[@]}"; do
+    # Check if the file exists in the source directory
+    if [[ -f "$SOURCE_DIR/$FILE" ]]; then
+      echo "Copying $FILE to $DEST_DIR"
+      cp "$SOURCE_DIR/$FILE" "$DEST_DIR/"
+    else
+      echo "File $FILE not found in $SOURCE_DIR"
+      exit 1
+    fi
+  done
+}
+
+# List of predefined filenames of static resources
+FILES=(
+  "Chart.min.css"
+  "Chart.min.js"
+  "index.html"
+  "main.js"
+  "styles.css"
+)
+
+# Copy files to the temporary directory
+copy_files "$SOURCE_DIR" "$TMP_DIR" "${FILES[@]}"
+
+# Switch to the gh-pages to provision static resources to it
+git switch gh-pages
+
+# Iterate through the destination directories and copy files from the temporary one to each of them
+for DEST_DIR in "$@"; do
+  copy_files "$TMP_DIR" "$DEST_DIR" "${FILES[@]}"
+done
+
+echo "Copied static files for all charts"
+
+for DIR in "$@"; do
+  if [ -d "$DIR" ]; then
+    echo "Adding files from $DIR..."
+    git add "$DIR"/*
+  else
+    echo "Warning: Directory $DIR does not exist. Skipping."
+    exit 1
+  fi
+done
+
+# Check if there are any files to commit
+if git diff --cached --quiet; then
+  echo "No changes to commit."
+  exit 0
+fi
+
+# Commit the changes
+git \
+  -c user.name=github-bench-workflow \
+  -c [email protected] \
+  commit -m "Stored static files"
diff --git a/.github/actions/static_files/Chart.min.css b/.github/actions/static_files/Chart.min.css
diff --git a/.github/actions/static_files/Chart.min.js b/.github/actions/static_files/Chart.min.js
diff --git a/.github/actions/static_files/index.html b/.github/actions/static_files/index.html
@@ -0,0 +1,59 @@
+<!--
+the MIT License
+
+Copyright (c) 2019 rhysd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR
+THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+-->
+<!DOCTYPE html>
+<meta
+  http-equiv="Content-Security-Policy"
+  content="upgrade-insecure-requests; default-src 'none'; object-src 'none'; frame-ancestors 'none'; base-uri 'none'; script-src 'self'; style-src 'self';"
+>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes" />
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" type="text/css" href="Chart.min.css">
+    <title>Benchmarks</title>
+  </head>
+
+  <body>
+    <header id="header">
+      <div class="header-item">
+        <strong class="header-label">Last Update:</strong>
+        <span id="last-update"></span>
+      </div>
+      <div class="header-item">
+        <strong class="header-label">Repository:</strong>
+        <a id="repository-link" rel="noopener"></a>
+      </div>
+    </header>
+    <main id="main"></main>
+    <footer>
+      <button id="dl-button">Download data as JSON</button>
+      <div class="spacer"></div>
+      <div class="small">Powered by <a rel="noopener" href="https://github.com/marketplace/actions/continuous-benchmark">github-action-benchmark</a></div>
+    </footer>
+
+    <script src="Chart.min.js"></script>
+    <script src="data.js"></script>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/.github/actions/static_files/main.js b/.github/actions/static_files/main.js
@@ -0,0 +1,192 @@
+/*
+the MIT License
+
+Copyright (c) 2019 rhysd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR
+THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+'use strict';
+(function() {
+  // Colors from https://github.com/github/linguist/blob/master/lib/linguist/languages.yml
+  const toolColors = {
+    cargo: '#dea584',
+    go: '#00add8',
+    benchmarkjs: '#f1e05a',
+    benchmarkluau: '#000080',
+    pytest: '#3572a5',
+    googlecpp: '#f34b7d',
+    catch2: '#f34b7d',
+    julia: '#a270ba',
+    jmh: '#b07219',
+    benchmarkdotnet: '#178600',
+    customBiggerIsBetter: '#38ff38',
+    customSmallerIsBetter: '#ff3838',
+    _: '#333333'
+  };
+
+  function init() {
+    function collectBenchesPerTestCase(entries) {
+      const map = new Map();
+      for (const entry of entries) {
+        const {commit, date, tool, benches} = entry;
+        for (const bench of benches) {
+          const result = { commit, date, tool, bench };
+          const arr = map.get(bench.name);
+          if (arr === undefined) {
+            map.set(bench.name, [result]);
+          } else {
+            arr.push(result);
+          }
+        }
+      }
+      return map;
+    }
+
+    const data = window.BENCHMARK_DATA;
+
+    // Render header
+    document.getElementById('last-update').textContent = new Date(data.lastUpdate).toString();
+    const repoLink = document.getElementById('repository-link');
+    repoLink.href = data.repoUrl;
+    repoLink.textContent = data.repoUrl;
+
+    // Render footer
+    document.getElementById('dl-button').onclick = () => {
+      const dataUrl = 'data:,' + JSON.stringify(data, null, 2);
+      const a = document.createElement('a');
+      a.href = dataUrl;
+      a.download = 'benchmark_data.json';
+      a.click();
+    };
+
+    // Prepare data points for charts
+    return Object.keys(data.entries).map(name => ({
+      name,
+      dataSet: collectBenchesPerTestCase(data.entries[name]),
+    }));
+  }
+
+  function renderAllChars(dataSets) {
+
+    function renderGraph(parent, name, dataset) {
+      const canvas = document.createElement('canvas');
+      canvas.className = 'benchmark-chart';
+      parent.appendChild(canvas);
+
+      const color = toolColors[dataset.length > 0 ? dataset[0].tool : '_'];
+      const data = {
+        labels: dataset.map(d => d.commit.id.slice(0, 7)),
+        datasets: [
+          {
+            label: name,
+            data: dataset.map(d => d.bench.value),
+            borderColor: color,
+            backgroundColor: color + '60', // Add alpha for #rrggbbaa
+          }
+        ],
+      };
+      const options = {
+        scales: {
+          xAxes: [
+            {
+              scaleLabel: {
+                display: true,
+                labelString: 'commit',
+              },
+            }
+          ],
+          yAxes: [
+            {
+              scaleLabel: {
+                display: true,
+                labelString: dataset.length > 0 ? dataset[0].bench.unit : '',
+              },
+              ticks: {
+                beginAtZero: true,
+              }
+            }
+          ],
+        },
+        tooltips: {
+          callbacks: {
+            afterTitle: items => {
+              const {index} = items[0];
+              const data = dataset[index];
+              return '\n' + data.commit.message + '\n\n' + data.commit.timestamp + ' committed by @' + data.commit.committer.username + '\n';
+            },
+            label: item => {
+              let label = item.value;
+              const { range, unit } = dataset[item.index].bench;
+              label += ' ' + unit;
+              if (range) {
+                label += ' (' + range + ')';
+              }
+              return label;
+            },
+            afterLabel: item => {
+              const { extra } = dataset[item.index].bench;
+              return extra ? '\n' + extra : '';
+            }
+          }
+        },
+        onClick: (_mouseEvent, activeElems) => {
+          if (activeElems.length === 0) {
+            return;
+          }
+          // XXX: Undocumented. How can we know the index?
+          const index = activeElems[0]._index;
+          const url = dataset[index].commit.url;
+          window.open(url, '_blank');
+        },
+      };
+
+      Chart.platform.disableCSSInjection = true;
+      new Chart(canvas, {
+        type: 'line',
+        data,
+        options,
+      });
+    }
+
+    function renderBenchSet(name, benchSet, main) {
+      const setElem = document.createElement('div');
+      setElem.className = 'benchmark-set';
+      main.appendChild(setElem);
+
+      const nameElem = document.createElement('h1');
+      nameElem.className = 'benchmark-title';
+      nameElem.textContent = name;
+      setElem.appendChild(nameElem);
+
+      const graphsElem = document.createElement('div');
+      graphsElem.className = 'benchmark-graphs';
+      setElem.appendChild(graphsElem);
+
+      for (const [benchName, benches] of benchSet.entries()) {
+        renderGraph(graphsElem, benchName, benches)
+      }
+    }
+
+    const main = document.getElementById('main');
+    for (const {name, dataSet} of dataSets) {
+      renderBenchSet(name, dataSet, main);
+    }
+  }
+
+  renderAllChars(init()); // Start
+})();