Add relative % delta graph

This graph shows the % change from each commit to the next, which works well to show
the overall noise level of a given benchmark.

Author: Mark-Simulacrum

site/src/api.rs

@@ -80,14 +80,26 @@ pub mod graph {
         pub start: Bound,
         pub end: Bound,
         pub stat: String,
-        pub absolute: bool,
+        pub kind: GraphKind,
+    }
+
+    #[derive(Debug, PartialEq, Copy, Clone, Serialize, Deserialize)]
+    #[serde(rename_all = "lowercase")]
+    pub enum GraphKind {
+        // Raw data
+        Raw,
+        // Change from the first value
+        PercentFromFirst,
+        // Change from the previous value, useful for looking for noise.
+        PercentRelative,
     }
 
     #[derive(Debug, PartialEq, Clone, Serialize, Deserialize)]
     pub struct GraphData {
         pub commit: u16,
         pub absolute: f32,
-        pub percent: f32,
+        // Percent change from the first datapoint shown
+        pub percent_first: f32,
         pub y: f32,
         pub x: u64,
         pub is_interpolated: bool,

site/src/request_handlers/graph.rs

@@ -5,6 +5,7 @@ use std::convert::TryInto;
 use std::str;
 use std::sync::Arc;
 
+use crate::api::graph::GraphKind;
 use crate::api::{graph, ServerResult};
 use crate::db::{self, ArtifactId, Benchmark, Profile, Scenario};
 use crate::interpolate::Interpolated;
@@ -75,7 +76,7 @@ pub async fn handle_graph(
             start: Bound::None,
             end: Bound::None,
             stat: String::from("instructions:u"),
-            absolute: true,
+            kind: graph::GraphKind::Raw,
         };
 
     if is_default_query {
@@ -106,7 +107,7 @@ pub async fn handle_graph(
         .into_iter()
         .map(|sr| {
             sr.interpolate()
-                .map(|series| to_graph_data(&cc, body.absolute, series).collect::<Vec<_>>())
+                .map(|series| to_graph_data(&cc, body.kind, series).collect::<Vec<_>>())
         })
         .collect::<Vec<_>>();
 
@@ -176,7 +177,7 @@ pub async fn handle_graph(
                 .collect(),
         )
         .map(|((c, d), i)| ((c, Some(d.expect("interpolated") / against)), i));
-        let graph_data = to_graph_data(&cc, body.absolute, averaged).collect::<Vec<_>>();
+        let graph_data = to_graph_data(&cc, body.kind, averaged).collect::<Vec<_>>();
         series.push(selector::SeriesResponse {
             path: selector::Path::new()
                 .set(PathComponent::Benchmark("Summary".into()))
@@ -263,10 +264,11 @@ impl CommitIdxCache {
 
 fn to_graph_data<'a>(
     cc: &'a CommitIdxCache,
-    is_absolute: bool,
+    kind: GraphKind,
     points: impl Iterator<Item = ((ArtifactId, Option<f64>), Interpolated)> + 'a,
 ) -> impl Iterator<Item = graph::GraphData> + 'a {
     let mut first = None;
+    let mut prev = None;
     points.map(move |((aid, point), interpolated)| {
         let commit = if let ArtifactId::Commit(commit) = aid {
             commit
@@ -276,15 +278,18 @@ fn to_graph_data<'a>(
         let point = point.expect("interpolated");
         first = Some(first.unwrap_or(point));
         let first = first.unwrap();
-        let percent = (point - first) / first * 100.0;
+        let percent_first = (point - first) / first * 100.0;
+        let previous_point = prev.unwrap_or(point);
+        let percent_prev = (point - previous_point) / previous_point * 100.0;
+        prev = Some(point);
         graph::GraphData {
             commit: cc.lookup(commit.sha),
             absolute: point as f32,
-            percent: percent as f32,
-            y: if is_absolute {
-                point as f32
-            } else {
-                percent as f32
+            percent_first: percent_first as f32,
+            y: match kind {
+                GraphKind::Raw => point as f32,
+                GraphKind::PercentRelative => percent_prev as f32,
+                GraphKind::PercentFromFirst => percent_first as f32,
             },
             x: commit.date.0.timestamp() as u64 * 1000, // all dates are since 1970
             is_interpolated: interpolated.is_interpolated(),

site/static/index.html

@@ -62,7 +62,11 @@
     <div id="settings">
         start: <input placeholder="yyyy-mm-dd or commit" id="start-bound" />
         end: <input placeholder="yyyy-mm-dd or commit" id="end-bound" />
-        Absolute data: <input id='absolute' name="absolute" type="checkbox">
+        Graph kind: <select id='kind' name="kind">
+            <option selected="selected" value="raw">Raw</option>
+            <option value="percentfromfirst">Percent Delta from First</option>
+            <option value="percentrelative">Percent Delta from Previous</option>
+        </select>
         <select id='stats' name="stat"></select>
         <a href="#" onClick="submit_settings(); return false;">Submit</a>
     </div>
@@ -366,7 +370,7 @@ <h3>This may take a while!</h3>
                         isInterpolated(dataIdx) {
                             return cacheStates.full.is_interpolated.has(dataIdx);
                         },
-                        absoluteMode: state.absolute,
+                        absoluteMode: state.kind == "raw",
                     });
 
                     let u = new uPlot(plotOpts, plotData,
@@ -415,13 +419,11 @@ <h3>This may take a while!</h3>
         function submit_settings() {
             let start = document.getElementById("start-bound").value;
             let end = document.getElementById("end-bound").value;
-            let absolute = document.getElementById("absolute").checked;
-            let stat = getSelected("stats");
             let params = new URLSearchParams();
             params.append("start", start);
             params.append("end", end);
-            params.append("absolute", absolute);
-            params.append("stat", stat);
+            params.append("kind", getSelected("kind"));
+            params.append("stat", getSelected("stats"));
             window.location.search = params.toString();
         }
 
@@ -430,12 +432,12 @@ <h3>This may take a while!</h3>
                 start: "",
                 end: "",
                 stat: "instructions:u",
-                absolute: true,
+                kind: "raw",
             }, state);
             post_json("/graph-new", values).then(prepData).then(data =>
                 renderPlots(data, values));
         });
     </script>
 </body>
 
-</html>
+</html>

site/static/shared.js

@@ -38,7 +38,10 @@ function getSelected(name) {
 function setSelected(id, text) {
     let e = document.getElementById(id);
     for (let i = 0; i < e.options.length; i++) {
-        if (e.options[i].text === text) {
+        e.options[i].selected = false;
+    }
+    for (let i = 0; i < e.options.length; i++) {
+        if (e.options[i].text === text || e.options[i].value == text) {
             e.options[i].selected = true;
             return;
         }
@@ -192,9 +195,6 @@ function loadState(callback, skip_settings) {
     for (let param of params) {
         let key = param[0];
         let value = param[1];
-        if (key == "absolute") {
-            value = value == "true" ? true : false;
-        }
         state[key] = value;
     }
     if (state.start) {
@@ -203,20 +203,14 @@ function loadState(callback, skip_settings) {
     if (state.end) {
         document.getElementById("end-bound").value = state.end;
     }
-    if (state.absolute === true || state.absolute === false) {
-        document.getElementById("absolute").checked = state.absolute;
-    } else {
-        // check absolute by default
-        let element = document.getElementById("absolute");
-        if (element) {
-            element.checked = true;
-        }
-    }
     if (!skip_settings) {
         make_settings(() => {
             if (state.stat) {
                 setSelected("stats", state.stat);
             }
+            if (state.kind) {
+                setSelected("kind", state.kind);
+            }
             callback(state);
         });
     } else {