significantly refactor presentational components

src/components/presentational/Timeline/ZoomControls.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
+  function renderZoom(zoom, idx) {
+    const isActive = (zoom.duration === extent)
+    return (
+      <text
+        className={`zoom-level-button ${isActive ? '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;