diff --git a/src/components/presentational/Timeline/DatetimeBar.js b/src/components/presentational/Timeline/DatetimeBar.js index 45e4c5b..cc3d0c4 100644 --- a/src/components/presentational/Timeline/DatetimeBar.js +++ b/src/components/presentational/Timeline/DatetimeBar.js @@ -32,7 +32,7 @@ export default ({ onClick={onSelect} className='event' x={x} - y={y - sectionHeight + (idx * sectionHeight)} + y={y - sectionHeight + (idx * sectionHeight) + (sectionHeight / 2)} style={{ ...styleProps, opacity: h ? 0.5 : 0.1 }} width={width} height={sectionHeight} diff --git a/src/components/presentational/Timeline/Events.js b/src/components/presentational/Timeline/Events.js index 2b740f4..5034942 100644 --- a/src/components/presentational/Timeline/Events.js +++ b/src/components/presentational/Timeline/Events.js @@ -92,10 +92,11 @@ const TimelineEvents = ({ } } + let defaultY = getCategoryY(event.category) let colour = event.colour ? event.colour : getCategoryColor(event.category) const styles = { fill: colour, - fillOpacity: calcOpacity(1), + fillOpacity: defaultY > 0 ? calcOpacity(1) : 0, transition: `transform ${transitionDuration / 1000}s ease` } @@ -103,8 +104,8 @@ const TimelineEvents = ({ x: getDatetimeX(event.timestamp), y: (features.GRAPH_NONLOCATED && !event.latitude && !event.longitude) ? event.projectOffset >= 0 ? dims.trackHeight - event.projectOffset : dims.marginTop - : getCategoryY ? getCategoryY(event.category) : () => null, - onSelect: () => onSelect(event), + : getCategoryY ? defaultY : () => null, + onSelect: () => onSelect([event]), dims, highlights: features.HIGHLIGHT_GROUPS ? getHighlights(event.tags[features.HIGHLIGHT_GROUPS.tagIndexIndicatingGroup]) : [], features