configures category size dynamically

src/components/presentational/Timeline/DatetimeBar.js

@@ -5,6 +5,8 @@ export default ({
   events,
   x,
   y,
+  width,
+  height,
   onSelect,
   styleProps,
   extraRender
@@ -15,7 +17,7 @@ export default ({
     x={x}
     y={y}
     style={styleProps}
-    width={4}
-    height={55}
+    width={width}
+    height={height}
   />
 )

src/components/presentational/Timeline/DatetimeDot.js

@@ -5,6 +5,7 @@ export default ({
   events,
   x,
   y,
+  r,
   onSelect,
   styleProps,
   extraRender
@@ -15,6 +16,6 @@ export default ({
     cx={x}
     cy={y}
     style={styleProps}
-    r={5}
+    r={r}
   />
 )

src/components/presentational/Timeline/Events.js

@@ -32,7 +32,8 @@ const TimelineEvents = ({
   getCategoryColor,
   onSelect,
   transitionDuration,
-  styleDatetime
+  styleDatetime,
+  dims
 }) => {
   function renderDatetime (datetime) {
     if (narrative) {
@@ -78,6 +79,7 @@ const TimelineEvents = ({
       }
 
       const extraRender = customStyles[1]
+      const eventWidth = 5
 
       return (
         <g className='datetime'>
@@ -87,6 +89,7 @@ const TimelineEvents = ({
             events={locatedEvents}
             x={getDatetimeX(datetime)}
             y={getCategoryY(dot.category)}
+            r={eventWidth}
             styleProps={locatedProps}
             extraRender={extraRender}
           />}
@@ -95,7 +98,9 @@ const TimelineEvents = ({
             category={dot.category}
             events={unlocatedEvents}
             x={getDatetimeX(datetime)}
-            y={40}
+            y={dims.margin_top}
+            width={eventWidth}
+            height={dims.trackHeight}
             styleProps={unlocatedProps}
           />}
           {extraRender ? extraRender() : null}

src/components/presentational/Timeline/Markers.js

@@ -1,7 +1,14 @@
 import React from 'react'
 import colors from '../../../common/global.js'
 
-const TimelineMarkers = ({ styles, getEventX, getCategoryY, transitionDuration, selected }) => {
+const TimelineMarkers = ({
+  styles,
+  getEventX,
+  getCategoryY,
+  transitionDuration,
+  selected,
+  dims
+}) => {
   function renderMarker (event) {
     const isLocated = !!event.latitude && !!event.longitude
     return isLocated ? (
@@ -27,13 +34,14 @@ const TimelineMarkers = ({ styles, getEventX, getCategoryY, transitionDuration,
       <rect
         className='timeline-marker'
         x={0}
-        y={0}
+        y={-dims.margin_top}
         width={4}
-        height={55}
+        height={dims.trackHeight}
         stroke={styles ? styles.stroke : colors.primaryHighlight}
         stroke-opacity='1'
         stroke-width={styles ? styles['stroke-width'] : 2}
         stroke-linecap=''
+        stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'}
         style={{
           'transform': `translate(${getEventX(event)}px, 40px)`,
           '-webkit-transition': `transform ${transitionDuration / 1000}s ease`,