From a2b0ca07cc3881153ac5d5924cd4c10ec3980d36 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 12 Mar 2024 10:23:54 -0500
Subject: [PATCH] UI tweaks (#10402)

* add minor ticks to timeline

* don't display motion events on veritcal bars on motion timeline

* color tweaks and spacing on config editor

* pad start and end of timeline to ensure handlebar is always visible
---
 .../timeline/MotionReviewTimeline.tsx         |  8 ++---
 web/src/components/timeline/MotionSegment.tsx | 36 +++++++++++--------
 .../components/timeline/ReviewTimeline.tsx    |  6 +++-
 .../components/timeline/segment-metadata.tsx  | 11 +++---
 web/src/hooks/use-handle-dragging.ts          |  4 +--
 web/src/pages/ConfigEditor.tsx                |  2 +-
 6 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/web/src/components/timeline/MotionReviewTimeline.tsx b/web/src/components/timeline/MotionReviewTimeline.tsx
index fd07b166b..7ef4b1d73 100644
--- a/web/src/components/timeline/MotionReviewTimeline.tsx
+++ b/web/src/components/timeline/MotionReviewTimeline.tsx
@@ -51,8 +51,8 @@ export function MotionReviewTimeline({
   const timelineRef = useRef<HTMLDivElement>(null);
   const handlebarTimeRef = useRef<HTMLDivElement>(null);
   const timelineDuration = useMemo(
-    () => timelineStart - timelineEnd,
-    [timelineEnd, timelineStart],
+    () => timelineStart - timelineEnd + 4 * segmentDuration,
+    [timelineEnd, timelineStart, segmentDuration],
   );
 
   const { alignStartDateToTimeline, alignEndDateToTimeline } = useEventUtils(
@@ -61,8 +61,8 @@ export function MotionReviewTimeline({
   );
 
   const timelineStartAligned = useMemo(
-    () => alignStartDateToTimeline(timelineStart),
-    [timelineStart, alignStartDateToTimeline],
+    () => alignStartDateToTimeline(timelineStart) + 2 * segmentDuration,
+    [timelineStart, alignStartDateToTimeline, segmentDuration],
   );
 
   const { handleMouseDown, handleMouseUp, handleMouseMove } =
diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index c66bbfc0b..19bf7a543 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -244,21 +244,27 @@ export function MotionSegment({
         </div>
       </div>
 
-      {severity.map((severityValue: number, index: number) => (
-        <React.Fragment key={index}>
-          <div className="absolute right-0 h-2 z-10">
-            <div
-              key={`${segmentKey}_${index}_secondary_data`}
-              className={`
-                  w-1 h-2 bg-gradient-to-r
-                  ${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
-                  ${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
-                  ${severityColors[severityValue]}
-                `}
-            ></div>
-          </div>
-        </React.Fragment>
-      ))}
+      {severity.map((severityValue: number, index: number) => {
+        if (severityValue > 1) {
+          return (
+            <React.Fragment key={index}>
+              <div className="absolute right-0 h-2 z-10">
+                <div
+                  key={`${segmentKey}_${index}_secondary_data`}
+                  className={`
+              w-1 h-2 bg-gradient-to-r
+              ${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
+              ${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
+              ${severityColors[severityValue]}
+            `}
+                ></div>
+              </div>
+            </React.Fragment>
+          );
+        } else {
+          return null;
+        }
+      })}
     </div>
   );
 }
diff --git a/web/src/components/timeline/ReviewTimeline.tsx b/web/src/components/timeline/ReviewTimeline.tsx
index 100903445..ccd77216e 100644
--- a/web/src/components/timeline/ReviewTimeline.tsx
+++ b/web/src/components/timeline/ReviewTimeline.tsx
@@ -48,7 +48,11 @@ export function ReviewTimeline({
         isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
       }`}
     >
-      <div className="flex flex-col">{children}</div>
+      <div className="flex flex-col relative">
+        <div className="absolute top-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-b from-secondary to-transparent pointer-events-none"></div>
+        <div className="absolute bottom-0 inset-x-0 z-20 w-full h-[30px] bg-gradient-to-t from-secondary to-transparent pointer-events-none"></div>
+        {children}
+      </div>
       {showHandlebar && (
         <div
           className="absolute left-0 top-0 z-20 w-full"
diff --git a/web/src/components/timeline/segment-metadata.tsx b/web/src/components/timeline/segment-metadata.tsx
index e7015b9e8..7aaf3525b 100644
--- a/web/src/components/timeline/segment-metadata.tsx
+++ b/web/src/components/timeline/segment-metadata.tsx
@@ -64,8 +64,11 @@ export function Tick({ timestamp, timestampSpread }: TickSegmentProps) {
           className={`h-0.5 ${
             timestamp.getMinutes() % timestampSpread === 0 &&
             timestamp.getSeconds() === 0
-              ? "w-[12px] bg-gray-400"
-              : "w-[8px] bg-gray-600"
+              ? "w-[12px] bg-neutral-600 dark:bg-neutral-500"
+              : timestamp.getMinutes() % (timestampSpread == 15 ? 5 : 1) ===
+                    0 && timestamp.getSeconds() === 0
+                ? "w-[8px] bg-neutral-500 dark:bg-neutral-600" // Minor tick mark
+                : "w-[5px] bg-neutral-400 dark:bg-neutral-700"
           }`}
         ></div>
       </div>
@@ -81,11 +84,11 @@ export function Timestamp({
   segmentKey,
 }: TimestampSegmentProps) {
   return (
-    <div className="absolute left-[15px] top-[1px] h-2 z-10">
+    <div className="absolute left-[15px] h-2 z-10">
       {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
         <div
           key={`${segmentKey}_timestamp`}
-          className="text-[8px] text-gray-400"
+          className="text-[8px] text-neutral-600 dark:text-neutral-500"
         >
           {timestamp.getMinutes() % timestampSpread === 0 &&
             timestamp.getSeconds() === 0 &&
diff --git a/web/src/hooks/use-handle-dragging.ts b/web/src/hooks/use-handle-dragging.ts
index c4f0b1a11..293802996 100644
--- a/web/src/hooks/use-handle-dragging.ts
+++ b/web/src/hooks/use-handle-dragging.ts
@@ -195,8 +195,8 @@ function useDraggableHandler({
           segmentHeight * (timelineDuration / segmentDuration) -
             segmentHeight * 2,
           Math.max(
-            // start of timeline
-            segmentHeight + scrolled,
+            // start of timeline - 2 segments added for handlebar visibility
+            segmentHeight * 2 + scrolled,
             // current Y position
             clientYPosition -
               timelineTop +
diff --git a/web/src/pages/ConfigEditor.tsx b/web/src/pages/ConfigEditor.tsx
index 8537c6aff..cbfa17a74 100644
--- a/web/src/pages/ConfigEditor.tsx
+++ b/web/src/pages/ConfigEditor.tsx
@@ -123,7 +123,7 @@ function ConfigEditor() {
   }
 
   return (
-    <div className="absolute top-2 bottom-16 right-0 left-0 md:left-12">
+    <div className="absolute top-2 bottom-16 right-0 left-0 md:left-2">
       <div className="lg:flex justify-between mr-1">
         <Heading as="h2">Config</Heading>
         <div>