From 920f76c97c36928a3a3fcdde4188410bd61b8977 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 19 Feb 2024 23:34:07 -0600
Subject: [PATCH] clean up and comments

---
 web/src/components/timeline/EventSegment.tsx  | 12 ++++------
 .../components/timeline/ReviewTimeline.tsx    |  3 ---
 web/src/pages/UIPlayground.tsx                | 24 +++++++++----------
 3 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/web/src/components/timeline/EventSegment.tsx b/web/src/components/timeline/EventSegment.tsx
index a4c700f8e..88d92e5e4 100644
--- a/web/src/components/timeline/EventSegment.tsx
+++ b/web/src/components/timeline/EventSegment.tsx
@@ -155,14 +155,12 @@ export function EventSegment({
             className={`
           w-full h-2 bg-gradient-to-r
           ${
-            showRoundedCorners &&
-            isStartOfEvent(segmentTime, events, segmentDuration)
+            showRoundedCorners && isStartOfEvent(segmentTime)
               ? "rounded-bl-full rounded-br-full"
               : ""
           }
           ${
-            showRoundedCorners &&
-            isEndOfEvent(segmentTime, events, segmentDuration)
+            showRoundedCorners && isEndOfEvent(segmentTime)
               ? "rounded-tl-full rounded-tr-full"
               : ""
           }
@@ -196,14 +194,12 @@ export function EventSegment({
             className={`
             w-1 h-2 bg-gradient-to-r
             ${
-              showRoundedCorners &&
-              isStartOfEvent(segmentTime, events, segmentDuration)
+              showRoundedCorners && isStartOfEvent(segmentTime)
                 ? "rounded-bl-full rounded-br-full"
                 : ""
             }
             ${
-              showRoundedCorners &&
-              isEndOfEvent(segmentTime, events, segmentDuration)
+              showRoundedCorners && isEndOfEvent(segmentTime)
                 ? "rounded-tl-full rounded-tr-full"
                 : ""
             }
diff --git a/web/src/components/timeline/ReviewTimeline.tsx b/web/src/components/timeline/ReviewTimeline.tsx
index bfd682fd5..f7b4b911f 100644
--- a/web/src/components/timeline/ReviewTimeline.tsx
+++ b/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
diff --git a/web/src/pages/UIPlayground.tsx b/web/src/pages/UIPlayground.tsx
index 413911f12..4d9f69223 100644
--- a/web/src/pages/UIPlayground.tsx
+++ b/web/src/pages/UIPlayground.tsx
@@ -159,18 +159,18 @@ function UIPlayground() {
         </div>
         <div className="flex-none">
           <ReviewTimeline
-            segmentDuration={60}
-            timestampSpread={15}
-            timelineStart={Date.now()}
-            timelineDuration={24 * 60 * 60}
-            showHandlebar
-            handlebarTime={Date.now() - 27 * 60 * 1000}
-            showMinimap
-            minimapStartTime={Date.now() - 35 * 60 * 1000}
-            minimapEndTime={Date.now() - 21 * 60 * 1000}
-            events={mockEvents}
-            severityType={"alert"}
-            contentRef={contentRef}
+            segmentDuration={60} // seconds per segment
+            timestampSpread={15} // minutes between each major timestamp
+            timelineStart={Date.now()} // start of the timeline - all times are numeric, not Date objects
+            timelineDuration={24 * 60 * 60} // in minutes, defaults to 24 hours
+            showHandlebar // show / hide the handlebar
+            handlebarTime={Date.now() - 27 * 60 * 1000} // set the time of the handlebar
+            showMinimap // show / hide the minimap
+            minimapStartTime={Date.now() - 35 * 60 * 1000} // start time of the minimap - the earlier time (eg 1:00pm)
+            minimapEndTime={Date.now() - 21 * 60 * 1000} // end of the minimap - the later time (eg 3:00pm)
+            events={mockEvents} // events, including new has_been_reviewed and severity properties
+            severityType={"alert"} // choose the severity type for the middle line - all other severity types are to the right
+            contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
           />
         </div>
       </div>