From 21f9e9831b37028ce4b9c667551fa12b86d7ceba Mon Sep 17 00:00:00 2001
From: JohnMark Sill <johnmarksilly@gmail.com>
Date: Fri, 11 Feb 2022 18:25:25 -0600
Subject: [PATCH] feat: added color mapping by label

---
 web/src/components/Timeline/Timeline.tsx          |  2 +-
 web/src/components/Timeline/TimelineBlockView.tsx | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Timeline/Timeline.tsx b/web/src/components/Timeline/Timeline.tsx
index 890fb15aa..564467f0c 100644
--- a/web/src/components/Timeline/Timeline.tsx
+++ b/web/src/components/Timeline/Timeline.tsx
@@ -9,7 +9,7 @@ export interface TimelineEvent {
   startTime: Date;
   endTime: Date;
   id: string;
-  label: string;
+  label: 'car' | 'person' | 'dog';
 }
 
 export interface TimelineEventBlock extends TimelineEvent {
diff --git a/web/src/components/Timeline/TimelineBlockView.tsx b/web/src/components/Timeline/TimelineBlockView.tsx
index 1611d663d..18d5d6233 100644
--- a/web/src/components/Timeline/TimelineBlockView.tsx
+++ b/web/src/components/Timeline/TimelineBlockView.tsx
@@ -9,11 +9,22 @@ interface TimelineBlockViewProps {
 export const TimelineBlockView = ({ block, onClick }: TimelineBlockViewProps) => {
   const onClickHandler = () => onClick(block);
 
+  const getColor = (eventBlock: TimelineEventBlock) => {
+    if (eventBlock.label === 'car') {
+      return 'red';
+    } else if (eventBlock.label === 'person') {
+      return 'blue';
+    } else if (eventBlock.label === 'dog') {
+      return 'green';
+    }
+    return 'gray';
+  };
+
   return (
     <div
       key={block.id}
       onClick={onClickHandler}
-      className='absolute z-10 rounded-full bg-blue-300 h-2'
+      className={`absolute z-10 rounded-full bg-${getColor(block)}-400 h-2`}
       style={{
         top: `${block.yOffset}px`,
         left: `${block.positionX}px`,