From 108bb4287fd179934873dfcd66aa72f997cebfc0 Mon Sep 17 00:00:00 2001
From: Sergey Sharybin <sergey.vfx@gmail.com>
Date: Tue, 29 Aug 2017 10:21:52 +0200
Subject: [PATCH] Support hiding statistics for specific scenes

This way it's possible to see side-by-side results of CPU and GPU time on "fast"
scenes, without having Victor scene making bars for bmw really tiny.
---
 benchmark/website/latest_snapshot.html |  2 +
 benchmark/website/source/utils.js      | 69 +++++++++++++++++++++++++-
 benchmark/website/style/main.css       |  9 ++++
 3 files changed, 79 insertions(+), 1 deletion(-)

diff --git a/benchmark/website/latest_snapshot.html b/benchmark/website/latest_snapshot.html
index 260b74a..8100ba2 100644
--- a/benchmark/website/latest_snapshot.html
+++ b/benchmark/website/latest_snapshot.html
@@ -23,6 +23,8 @@
         var chart_ctx = document.getElementById("canvas").getContext("2d");
         buildChart(chart_ctx, data);
 
+        buildScenesSelector(document.getElementById("container"), data);
+
         var table_ctx = document.getElementById("spreadsheet");
         buildSpreadsheet(table_ctx, data);
       };
diff --git a/benchmark/website/source/utils.js b/benchmark/website/source/utils.js
index f35c5aa..0967f77 100644
--- a/benchmark/website/source/utils.js
+++ b/benchmark/website/source/utils.js
@@ -20,6 +20,10 @@ function generateBarColor(index) {
                   color[2].toString() + ")";
 }
 
+function clone(object) {
+  return jQuery.extend(true, {}, object);
+}
+
 function padValue(value, size) {
   var s = String(value);
   while (s.length < (size || 2)) {
@@ -75,7 +79,7 @@ function findDatasetMaxValue(data) {
 }
 
 function buildChart(ctx, bare_data) {
-  var data = bare_data;
+  var data = clone(bare_data);
   setDatasetColor(data, true);
   var my_chart = new Chart(
       ctx,
@@ -116,6 +120,69 @@ function buildChart(ctx, bare_data) {
                               footerFontStyle: 'normal'},
                 }
       });
+  // TODO(sergey): How can we avoid storing chart in some obscure global variable?
+  window.my_chart = my_chart;
+}
+
+function updateEnabledScenesCallback(bare_data) {
+  /* Collect list of enabled scenes. */
+  var enabled_scenes = [];
+  var disabled_scenes = [];
+  var scene_index = 0;
+  for (scene_name of bare_data.labels) {
+    var id = "scene_" + scene_name + "_id";
+    var checkbox = document.getElementById(id);
+    if (checkbox.checked) {
+      enabled_scenes.push({"index": scene_index, "name": scene_name});
+    } else {
+      disabled_scenes.push({"index": scene_index, "name": scene_name});
+    }
+    ++scene_index;
+  }
+  /* Construct new data by making a copy of original one and removing
+   * disabeld scenes.
+   *
+   * Note: we reverse te list so indices for removal are alweays staying
+   * the same.
+   */
+  disabled_scenes.reverse();
+  var updated_data = clone(bare_data);
+  setDatasetColor(updated_data, true);
+  for (scene of disabled_scenes) {
+    // Remove label first.
+    updated_data.labels.splice(scene.index, 1);
+    updated_data.datasets.forEach(function(dataset, dataset_index) {
+      dataset.data.splice(scene.index, 1);
+    });
+  }
+  /* Update the actual chart. */
+  var my_chart = window.my_chart;
+  my_chart.data = updated_data;
+  my_chart.update();
+}
+
+function buildScenesSelector(ctx, bare_data) {
+  var div = document.createElement("div");
+  div.className = "scene_selector_container";
+  for (scene_name of data.labels) {
+    var span = document.createElement("span");
+
+    var checkbox = document.createElement('input');
+    checkbox.type = "checkbox";
+    checkbox.name = "scene_" + scene_name;
+    checkbox.checked = true;
+    checkbox.id = "scene_" + scene_name + "_id";
+    checkbox.onclick = function() { updateEnabledScenesCallback(bare_data); };
+    span.appendChild(checkbox);
+
+    var label = document.createElement('label');
+    label.htmlFor = "scene_" + scene_name + "_id";
+    label.appendChild(document.createTextNode(scene_name));
+    span.appendChild(label);
+
+    div.appendChild(span);
+  }
+  ctx.appendChild(div);
 }
 
 function historyChartGetSceneStats(bare_data, scene_name) {
diff --git a/benchmark/website/style/main.css b/benchmark/website/style/main.css
index 3c98e17..b091a31 100644
--- a/benchmark/website/style/main.css
+++ b/benchmark/website/style/main.css
@@ -6,4 +6,13 @@ canvas {
 
 #container {
   width: 75%;
+}
+
+div.scene_selector_container {
+  margin-top: 8px;
+  text-align: center;
+}
+
+div.scene_selector_container span {
+  margin-left: 16px;
 }
\ No newline at end of file