update dimensions of track according to number of categories

src/components/presentational/Timeline/Events.js

@@ -2,6 +2,7 @@ import React from 'react'
 import DatetimeDot from './DatetimeDot'
 import DatetimeBar from './DatetimeBar'
 import { getEventOpacity } from '../../../common/utilities'
+import { sizes } from '../../../common/global'
 
 // return a list of lists, where each list corresponds to a single category
 function getDotsToRender (events) {
@@ -79,7 +80,6 @@ const TimelineEvents = ({
       }
 
       const extraRender = customStyles[1]
-      const eventWidth = 5
 
       return (
         <g className='datetime'>
@@ -89,7 +89,7 @@ const TimelineEvents = ({
             events={locatedEvents}
             x={getDatetimeX(datetime)}
             y={getCategoryY(dot.category)}
-            r={eventWidth}
+            r={sizes.eventDotR}
             styleProps={locatedProps}
             extraRender={extraRender}
           />}
@@ -99,7 +99,7 @@ const TimelineEvents = ({
             events={unlocatedEvents}
             x={getDatetimeX(datetime)}
             y={dims.margin_top}
-            width={eventWidth}
+            width={(2 * sizes.eventDotR) * 0.9}
             height={dims.trackHeight}
             styleProps={unlocatedProps}
           />}

src/components/presentational/Timeline/Markers.js

@@ -1,13 +1,15 @@
 import React from 'react'
-import colors from '../../../common/global.js'
+import colors, { sizes } from '../../../common/global'
 
+const MARKER_DISPLACED = sizes.eventDotR * 2
 const TimelineMarkers = ({
   styles,
   getEventX,
   getCategoryY,
   transitionDuration,
   selected,
-  dims
+  dims,
+  noCategories
 }) => {
   function renderMarker (event) {
     const isLocated = !!event.latitude && !!event.longitude
@@ -18,8 +20,7 @@ const TimelineMarkers = ({
         cy={0}
         stroke={styles ? styles.stroke : colors.primaryHighlight}
         stroke-opacity='1'
-        stroke-width={styles ? styles['stroke-width'] : 2}
-        stroke-linecap=''
+        stroke-width={styles ? styles['stroke-width'] : 1}
         stroke-linejoin='round'
         stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'}
         style={{
@@ -28,19 +29,18 @@ const TimelineMarkers = ({
           '-moz-transition': 'none',
           'opacity': 0.9
         }}
-        r='10'
+        r={sizes.eventDotR * 2}
       />
     ) : (
       <rect
         className='timeline-marker'
         x={0}
-        y={-dims.margin_top}
-        width={4}
+        y={-dims.margin_top - (noCategories > 2 ? noCategories * MARKER_DISPLACED : MARKER_DISPLACED)}
+        width={(2 * sizes.eventDotR) * 0.9}
         height={dims.trackHeight}
         stroke={styles ? styles.stroke : colors.primaryHighlight}
         stroke-opacity='1'
-        stroke-width={styles ? styles['stroke-width'] : 2}
-        stroke-linecap=''
+        stroke-width={styles ? styles['stroke-width'] : 1}
         stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'}
         style={{
           'transform': `translate(${getEventX(event)}px, 40px)`,
@@ -48,7 +48,6 @@ const TimelineMarkers = ({
           '-moz-transition': 'none',
           'opacity': 0.9
         }}
-        r='10'
       />
 
     )