clean up and comments

web/src/components/timeline/EventSegment.tsx

@@ -155,14 +155,12 @@ export function EventSegment({
             className={`
           w-full h-2 bg-gradient-to-r
           ${
-            showRoundedCorners &&
+            showRoundedCorners && isStartOfEvent(segmentTime)
-            isStartOfEvent(segmentTime, events, segmentDuration)
               ? "rounded-bl-full rounded-br-full"
               : ""
           }
           ${
-            showRoundedCorners &&
+            showRoundedCorners && isEndOfEvent(segmentTime)
-            isEndOfEvent(segmentTime, events, segmentDuration)
               ? "rounded-tl-full rounded-tr-full"
               : ""
           }
@@ -196,14 +194,12 @@ export function EventSegment({
             className={`
             w-1 h-2 bg-gradient-to-r
             ${
-              showRoundedCorners &&
+              showRoundedCorners && isStartOfEvent(segmentTime)
-              isStartOfEvent(segmentTime, events, segmentDuration)
                 ? "rounded-bl-full rounded-br-full"
                 : ""
             }
             ${
-              showRoundedCorners &&
+              showRoundedCorners && isEndOfEvent(segmentTime)
-              isEndOfEvent(segmentTime, events, segmentDuration)
                 ? "rounded-tl-full rounded-tr-full"
                 : ""
             }

web/src/components/timeline/ReviewTimeline.tsx

@@ -238,6 +238,3 @@ export function ReviewTimeline({
 }
 
 export default ReviewTimeline;
-
-// TODO: more minor tick marks for segmentDuration < 60
-// theme colors

web/src/pages/UIPlayground.tsx

@@ -159,18 +159,18 @@ function UIPlayground() {
         </div>
         <div className="flex-none">
           <ReviewTimeline
-            segmentDuration={60}
+            segmentDuration={60} // seconds per segment
-            timestampSpread={15}
+            timestampSpread={15} // minutes between each major timestamp
-            timelineStart={Date.now()}
+            timelineStart={Date.now()} // start of the timeline - all times are numeric, not Date objects
-            timelineDuration={24 * 60 * 60}
+            timelineDuration={24 * 60 * 60} // in minutes, defaults to 24 hours
-            showHandlebar
+            showHandlebar // show / hide the handlebar
-            handlebarTime={Date.now() - 27 * 60 * 1000}
+            handlebarTime={Date.now() - 27 * 60 * 1000} // set the time of the handlebar
-            showMinimap
+            showMinimap // show / hide the minimap
-            minimapStartTime={Date.now() - 35 * 60 * 1000}
+            minimapStartTime={Date.now() - 35 * 60 * 1000} // start time of the minimap - the earlier time (eg 1:00pm)
-            minimapEndTime={Date.now() - 21 * 60 * 1000}
+            minimapEndTime={Date.now() - 21 * 60 * 1000} // end of the minimap - the later time (eg 3:00pm)
-            events={mockEvents}
+            events={mockEvents} // events, including new has_been_reviewed and severity properties
-            severityType={"alert"}
+            severityType={"alert"} // choose the severity type for the middle line - all other severity types are to the right
-            contentRef={contentRef}
+            contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
           />
         </div>
       </div>