From 9d942b486a2562b7498cebdd9e76b404d9605534 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 24 Mar 2019 09:58:56 -0700
Subject: [PATCH] Show commit boxes in interaxctions sidebar

---
 .../views/Profiler/SidebarInteractions.css    | 13 ++++++
 .../views/Profiler/SidebarInteractions.js     | 43 +++++++++++++++----
 2 files changed, 47 insertions(+), 9 deletions(-)

diff --git a/src/devtools/views/Profiler/SidebarInteractions.css b/src/devtools/views/Profiler/SidebarInteractions.css
index e0dbd3b4f5..f2a8432c7b 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.css
+++ b/src/devtools/views/Profiler/SidebarInteractions.css
@@ -29,6 +29,10 @@
   color: var(--color-dim);
 }
 
+.Commits {
+  font-weight: bold;
+}
+
 .List {
   list-style: none;
   margin: 0;
@@ -36,8 +40,17 @@
 }
 
 .ListItem {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   padding: 0.25rem 0.5rem;
 }
 .ListItem:hover {
   background-color: var(--color-hover-background);
 }
+
+.CommitBox {
+  width: 20px;
+  height: 20px;
+  margin-right: 0.5rem;
+}
diff --git a/src/devtools/views/Profiler/SidebarInteractions.js b/src/devtools/views/Profiler/SidebarInteractions.js
index c5e788dba7..9159cc8d29 100644
--- a/src/devtools/views/Profiler/SidebarInteractions.js
+++ b/src/devtools/views/Profiler/SidebarInteractions.js
@@ -4,6 +4,7 @@ import React, { Fragment, useContext } from 'react';
 import { ProfilerContext } from './ProfilerContext';
 import { formatDuration, formatTime } from './utils';
 import { StoreContext } from '../context';
+import { getGradientColor } from './utils';
 
 import styles from './SidebarInteractions.css';
 
@@ -30,12 +31,19 @@ export default function SidebarInteractions(_: Props) {
     rendererID: ((rendererID: any): number),
     rootID: ((rootID: any): number),
   });
-  const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
-    {
-      rendererID: ((rendererID: any): number),
-      rootID: ((rootID: any): number),
-    }
-  );
+
+  const profilingSummary = profilingCache.ProfilingSummary.read({
+    rendererID: ((rendererID: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  const { maxCommitDuration } = profilingCache.getInteractionsChartData({
+    interactions,
+    profilingSummary,
+    rootID: ((rootID: any): number),
+  });
+
+  const { commitDurations, commitTimes } = profilingSummary;
 
   const interaction = ((interactions.find(
     interaction => interaction.id === selectedInteractionID
@@ -52,6 +60,7 @@ export default function SidebarInteractions(_: Props) {
         <div className={styles.Name}>{interaction.name}</div>
       </div>
       <div className={styles.Content}>
+        <div className={styles.Commits}>Commits:</div>
         <ul className={styles.List}>
           {interaction.commits.map(commitIndex => (
             <li
@@ -59,9 +68,25 @@ export default function SidebarInteractions(_: Props) {
               className={styles.ListItem}
               onClick={() => viewCommit(commitIndex)}
             >
-              timestamp: {formatTime(commitTimes[commitIndex])}s
-              <br />
-              duration: {formatDuration(commitDurations[commitIndex])}ms
+              <div
+                className={styles.CommitBox}
+                style={{
+                  backgroundColor: getGradientColor(
+                    Math.min(
+                      1,
+                      Math.max(
+                        0,
+                        commitDurations[commitIndex] / maxCommitDuration
+                      )
+                    ) || 0
+                  ),
+                }}
+              />
+              <div>
+                timestamp: {formatTime(commitTimes[commitIndex])}s
+                <br />
+                duration: {formatDuration(commitDurations[commitIndex])}ms
+              </div>
             </li>
           ))}
         </ul>