From c3f9871e23a807c2fa0c8c4a3b553dcd62cd3859 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 16 Nov 2022 13:35:11 +0100
Subject: [PATCH] fix(ui) - network timeline

---
 .../shared/DevTools/TimeTable/BarRow.tsx      | 74 +++++++++----------
 1 file changed, 36 insertions(+), 38 deletions(-)

diff --git a/frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx b/frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx
index 2b151cf14..f283eb7ac 100644
--- a/frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx
+++ b/frontend/app/components/shared/DevTools/TimeTable/BarRow.tsx
@@ -27,6 +27,40 @@ const BarRow = ({
 }: Props) => {
   const timeOffset = time - timestart;
   ttfb = ttfb || 0;
+  // TODO fix the tooltip
+
+  const content = (
+    <React.Fragment>
+      {ttfb != null && (
+        <div className={styles.popupRow}>
+          <div className={styles.title}>{'Waiting (TTFB)'}</div>
+          <div className={styles.popupBarWrapper}>
+            <div
+              className={styles.ttfbBar}
+              style={{
+                left: 0,
+                width: `${percentOf(ttfb, duration)}%`,
+              }}
+            />
+          </div>
+          <div className={styles.time}>{formatTime(ttfb)}</div>
+        </div>
+      )}
+      <div className={styles.popupRow}>
+        <div className={styles.title}>{'Content Download'}</div>
+        <div className={styles.popupBarWrapper}>
+          <div
+            className={styles.downloadBar}
+            style={{
+              left: `${percentOf(ttfb, duration)}%`,
+              width: `${percentOf(duration - ttfb, duration)}%`,
+            }}
+          />
+        </div>
+        <div className={styles.time}>{formatTime(duration - ttfb)}</div>
+      </div>
+    </React.Fragment>
+  );
   const trigger = (
     <div
       className={styles.barWrapper}
@@ -60,44 +94,8 @@ const BarRow = ({
     );
 
   return (
-    <div key={key} className={tableStyles.row}>
-      <Tooltip
-        title={
-          <React.Fragment>
-            {ttfb != null && (
-              <div className={styles.popupRow}>
-                <div className={styles.title}>{'Waiting (TTFB)'}</div>
-                <div className={styles.popupBarWrapper}>
-                  <div
-                    className={styles.ttfbBar}
-                    style={{
-                      left: 0,
-                      width: `${percentOf(ttfb, duration)}%`,
-                    }}
-                  />
-                </div>
-                <div className={styles.time}>{formatTime(ttfb)}</div>
-              </div>
-            )}
-            <div className={styles.popupRow}>
-              <div className={styles.title}>{'Content Download'}</div>
-              <div className={styles.popupBarWrapper}>
-                <div
-                  className={styles.downloadBar}
-                  style={{
-                    left: `${percentOf(ttfb, duration)}%`,
-                    width: `${percentOf(duration - ttfb, duration)}%`,
-                  }}
-                />
-              </div>
-              <div className={styles.time}>{formatTime(duration - ttfb)}</div>
-            </div>
-          </React.Fragment>
-        }
-        placement="top"
-      >
-        {trigger}
-      </Tooltip>
+    <div key={key} className={tableStyles.row} style={{ height: '15px' }}>
+      {trigger}
     </div>
   );
 };