Move labels and handles to presentational

src/components/presentational/TimelineHandles.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const TimelineHandles = ({ dims, onMoveTime }) => {
+
+  return (
+    <g className="time-controls-inline">
+      <g
+        transform={`translate(${dims.margin_left + 20}, 62)`}
+        onClick={() => this.props.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')}
+      >
+        <circle r="15"></circle>
+        <path d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z" transform="rotate(90)"></path>
+      </g>
+    </g>
+  )
+
+}
+
+export default TimelineHandles;

src/components/presentational/TimelineLabels.js

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import { formatterWithYear } from '../js/utilities';
+
+const TimelineLabels = ({ dims, timelabels }) => {
+
+  return (
+    <g>
+      <line
+        class="axisBoundaries"
+        x1={dims.margin_left}
+        x2={dims.margin_left}
+        y1="10"
+        y2="20"
+      >
+      </line>
+      <line
+        class="axisBoundaries"
+        x1={dims.width - dims.width_controls}
+        x2={dims.width - dims.width_controls}
+        y1="10"
+        y2="20"
+      >
+      </line>
+      <text
+        class="timeLabel0 timeLabel"
+        x="5"
+        y="15"
+      >
+        {formatterWithYear(timelabels[0])}
+      </text>
+      <text
+        class="timelabelF timeLabel"
+        x={dims.width - dims.width_controls - 5}
+        y="15"
+        style={{ textAnchor: 'end' }}
+      >
+        {formatterWithYear(timelabels[1])}
+      </text>      
+    </g>
+  )
+}
+
+export default TimelineLabels;