Show commit boxes in interaxctions sidebar

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;
+}

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>