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

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,
+    () => timelineStart - timelineEnd + 4 * segmentDuration,
-    [timelineEnd, timelineStart],
+    [timelineEnd, timelineStart, segmentDuration],
   );
 
   const { alignStartDateToTimeline, alignEndDateToTimeline } = useEventUtils(
@@ -61,8 +61,8 @@ export function MotionReviewTimeline({
   );
 
   const timelineStartAligned = useMemo(
-    () => alignStartDateToTimeline(timelineStart),
+    () => alignStartDateToTimeline(timelineStart) + 2 * segmentDuration,
-    [timelineStart, alignStartDateToTimeline],
+    [timelineStart, alignStartDateToTimeline, segmentDuration],
   );
 
   const { handleMouseDown, handleMouseUp, handleMouseMove } =

web/src/components/timeline/MotionSegment.tsx

@@ -244,21 +244,27 @@ export function MotionSegment({
         </div>
       </div>
 
-      {severity.map((severityValue: number, index: number) => (
+      {severity.map((severityValue: number, index: number) => {
-        <React.Fragment key={index}>
+        if (severityValue > 1) {
-          <div className="absolute right-0 h-2 z-10">
+          return (
-            <div
+            <React.Fragment key={index}>
-              key={`${segmentKey}_${index}_secondary_data`}
+              <div className="absolute right-0 h-2 z-10">
-              className={`
+                <div
-                  w-1 h-2 bg-gradient-to-r
+                  key={`${segmentKey}_${index}_secondary_data`}
-                  ${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
+                  className={`
-                  ${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
+              w-1 h-2 bg-gradient-to-r
-                  ${severityColors[severityValue]}
+              ${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
-                `}
+              ${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
-            ></div>
+              ${severityColors[severityValue]}
-          </div>
+            `}
-        </React.Fragment>
+                ></div>
-      ))}
+              </div>
+            </React.Fragment>
+          );
+        } else {
+          return null;
+        }
+      })}
     </div>
   );
 }

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"

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-[12px] bg-neutral-600 dark:bg-neutral-500"
-              : "w-[8px] bg-gray-600"
+              : 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 &&

web/src/hooks/use-handle-dragging.ts

@@ -195,8 +195,8 @@ function useDraggableHandler({
           segmentHeight * (timelineDuration / segmentDuration) -
             segmentHeight * 2,
           Math.max(
-            // start of timeline
+            // start of timeline - 2 segments added for handlebar visibility
-            segmentHeight + scrolled,
+            segmentHeight * 2 + scrolled,
             // current Y position
             clientYPosition -
               timelineTop +

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>