From 3719757cedb5018398192be11c0b7849b43c1b64 Mon Sep 17 00:00:00 2001
From: Oliver N <olvrng@gmail.com>
Date: Thu, 29 Jul 2021 17:05:10 +0700
Subject: [PATCH] add diff legend

---
 .../components/FlameGraphRenderer.jsx         | 19 +++++++++++++-
 webapp/sass/profile.scss                      | 26 +++++++++++++++++--
 2 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/webapp/javascript/components/FlameGraphRenderer.jsx b/webapp/javascript/components/FlameGraphRenderer.jsx
index 3eb9182ba3..0e1b99e6fd 100644
--- a/webapp/javascript/components/FlameGraphRenderer.jsx
+++ b/webapp/javascript/components/FlameGraphRenderer.jsx
@@ -55,6 +55,8 @@ const unitsToFlamegraphTitle = {
   "samples": "CPU time per function",
 }
 
+const diffLegend = [20, 10, 5, 3, 2, 1, 0, -1, -2, -3, -5, -10, -20];
+
 class FlameGraphRenderer extends React.Component {
   constructor(props) {
     super();
@@ -541,7 +543,22 @@ class FlameGraphRenderer extends React.Component {
       >
         <div className='flamegraph-header'>
           <span></span>
-          <span>Frame width represents {unitsToFlamegraphTitle[this.state.units]}</span>
+          <div>
+            <div className="row">
+              Frame width represents {unitsToFlamegraphTitle[this.state.units]}
+            </div>
+            { !this.state.viewDiff ? null :
+              <div className="row flamegraph-legend">
+                <div className="flamegraph-legend-list">
+                  {diffLegend.map((v) => (
+                    <div className="flamegraph-legend-item" style={{ backgroundColor: colorBasedOnDiff(v, 100, 0.8) }}>
+                      {v > 0 ? '+' : ''}{v}%
+                    </div>
+                  ))}
+                </div>
+              </div>
+            }
+          </div>
           <ExportData flameCanvas={this.canvasRef}/>
         </div>
         <canvas
diff --git a/webapp/sass/profile.scss b/webapp/sass/profile.scss
index ccbaf1eabb..0f502cae39 100644
--- a/webapp/sass/profile.scss
+++ b/webapp/sass/profile.scss
@@ -226,10 +226,32 @@ $pane-width: 6px;
     width: 50%;
 
     .flamegraph-header {
+      padding-bottom: 5px;
       display: flex;
       justify-content: space-between;
-      align-items: center;
-      padding-bottom: 5px;
+
+      .row {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .flamegraph-legend {
+        display: flex;
+        align-items: center;
+        font-size: 11px;
+        justify-content: center;
+        margin-bottom: 10px;
+      }
+
+      .flamegraph-legend-list {
+        display: flex;
+        justify-content: center;
+      }
+
+      .flamegraph-legend-item {
+        width: 35px;
+        text-align: center;
+      }
     }
 
     &.vertical-orientation {