From 958532a59cb4e32fe03ebfa60dfc049cc352a8a9 Mon Sep 17 00:00:00 2001
From: elijahbenizzy <elijah_ben_izzy@alumni.brown.edu>
Date: Wed, 28 Aug 2024 21:54:13 -0700
Subject: [PATCH] Updates waterfall layout for edge case in steplist

---
 .../ui/src/components/routes/app/StepList.tsx | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/telemetry/ui/src/components/routes/app/StepList.tsx b/telemetry/ui/src/components/routes/app/StepList.tsx
index 7783db63..9309b544 100644
--- a/telemetry/ui/src/components/routes/app/StepList.tsx
+++ b/telemetry/ui/src/components/routes/app/StepList.tsx
@@ -761,18 +761,19 @@ const WaterfallPiece: React.FC<{
   const bgColor = props.isHighlighted ? 'bg-white' : props.bgColor;
   const [isHovered, setIsHovered] = useState(false);
   return (
-    <div ref={containerRef} className="w-full px-2 h-full relative">
+    <div ref={containerRef} className="w-full px-2 h-full">
       {(() => {
         const leftPositionPercentage =
           ((startTimeMilliseconds - earliestStartTimeMilliseconds) / earliestToLatestMilliseconds) *
           100;
-        const widthPercentage = Math.max(
-          Math.min(
-            ((endTimeMilliseconds - startTimeMilliseconds) / earliestToLatestMilliseconds) * 100,
-            100
-          ),
-          0.1
-        );
+        const widthPercentage =
+          Math.max(
+            Math.max(
+              (endTimeMilliseconds - startTimeMilliseconds) / earliestToLatestMilliseconds,
+              0.005
+            )
+            // 0.1
+          ) * 100;
         const isCloseToEnd = leftPositionPercentage + widthPercentage > 80; // Threshold for "close to the end"
         // TODO -- unhack these, we're converting back and forth cause we already have interfaces for strings and
         // don't want to change
@@ -791,18 +792,23 @@ const WaterfallPiece: React.FC<{
             />
           </div>
         );
+        if (props.step.step_start_log.sequence_id === 0) {
+          console.log('leftPositionPercentage', leftPositionPercentage, 'x', widthPercentage);
+          console.log(props.globalEllapsedTimeMillis);
+        }
 
         return (
           <>
             {!props.isEvent ? (
               <div
-                className={`${bgColor} opacity-50 h-full px-0 rounded-none`}
+                className={`${bgColor} opacity-50 h-12 px-0 rounded-sm`}
                 onMouseEnter={() => setIsHovered(true)}
                 onMouseLeave={() => setIsHovered(false)}
                 style={{
                   width: `${widthPercentage}%`,
                   position: 'absolute',
-                  height: '100%',
+                  bottom: '5%',
+                  height: '90%',
                   left: `${leftPositionPercentage}%`
                 }}
               ></div>
@@ -830,12 +836,12 @@ const WaterfallPiece: React.FC<{
 
             {
               <div
-                className={`px-4 transition-opacity duration-500 ${
+                className={`backdrop-blur-lg rounded-md px-4 transition-opacity duration-500 ${
                   isHovered ? 'opacity-100' : 'opacity-0 pointer-events-none'
                 }`}
                 style={{
                   position: 'absolute',
-                  top: 0,
+                  top: 5,
                   right: isCloseToEnd ? `calc(100% - ${leftPositionPercentage}%)` : `auto`,
                   left: isCloseToEnd
                     ? `auto`