Make some timeline into presentational comps

src/components/presentational/TimelineEvents.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+const TimelineEvents = ({ events, getEventX, getEventY,
+  getCategoryColor, onSelect, transitionDuration }) => {
+
+  function getAllEventsAtOnce(eventPoint) {
+    const timestamp = eventPoint.timestamp;
+    const category = eventPoint.category;
+    return events
+      .filter(event => (event.timestamp === timestamp && category === event.category))
+  }
+
+  function renderEvent(event) {
+    return (
+      <circle
+        className="event"
+        cx={0}
+        cy={0}
+        style={{
+          'transform': `translate(${getEventX(event)}px, ${getEventY(event)}px)`,
+          'transition': `transform ${transitionDuration / 1000}s ease`
+        }}
+        r={5}        
+        fill={getCategoryColor(event.category)}
+        onClick={() => {onSelect(getAllEventsAtOnce(event))}}
+      >
+      </circle>
+    )
+  }
+
+  return (
+    <g
+      clipPath={"url(#clip)"}
+    >
+      {events.map(event => renderEvent(event))}
+    </g>
+  );
+}
+
+export default TimelineEvents;

src/components/presentational/TimelineHandles.js

@@ -6,14 +6,14 @@ const TimelineHandles = ({ dims, onMoveTime }) => {
     <g className="time-controls-inline">
       <g
         transform={`translate(${dims.margin_left + 20}, 62)`}
-        onClick={() => this.props.onMoveTime('backwards')}
+        onClick={() => onMoveTime('backwards')}
       >
         <circle r="15"></circle>
         <path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(270)"></path>
       </g>
       <g
         transform={`translate(${dims.width - dims.width_controls - 20}, 62)`}
-        onClick={() => this.props.onMoveTime('forward')}
+        onClick={() => onMoveTime('forward')}
       >
         <circle r="15"></circle>
         <path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(90)"></path>

src/components/presentational/TimelineLabels.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { formatterWithYear } from '../js/utilities';
+import { formatterWithYear } from '../../js/utilities.js';
 
 const TimelineLabels = ({ dims, timelabels }) => {
 

src/components/presentational/TimelineMarkers.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+const TimelineMarkers = ({ getEventX, getEventY, transitionDuration, selected }) => {
+  function renderMarker(event) {
+    return (
+      <circle
+        className="timeline-marker"
+        cx={0}
+        cy={0}
+        style={{
+          'transform': `translate(${getEventX(event)}px, ${getEventY(event)}px)`,
+          '-webkit-transition': `transform ${transitionDuration / 1000}s ease`,
+          '-moz-transition': 'none',
+          'opacity': 0.9
+        }}        
+        r="10"
+      >
+      </circle>
+    )
+  }
+
+  return (
+    <g
+      clipPath={"url(#clip)"}
+    >
+      {selected.map(event => renderMarker(event))}
+    </g>
+  );
+}
+
+export default TimelineMarkers;

src/components/presentational/TimelineZoomControls.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const TimelineZoomControls = ({ zoomLevels, dims, onApplyZoom }) => {
+  
+  function renderZoom(zoom, idx) {
+    return (
+      <text
+        className={`zoom-level-button ${zoom.active ? 'active' : ''}`}
+        x="60"
+        y={(idx * 15) + 20}
+        onClick={() => onApplyZoom(zoom)}
+      >
+        {zoom.label}
+      </text>
+    )
+  }
+
+  return (
+    <g transform={`translate(${dims.width - dims.width_controls}, 0)`}>
+      {zoomLevels.map((z, idx) => renderZoom(z, idx))}
+    </g>
+  );
+}
+
+export default TimelineZoomControls;