Fix marker position

src/components/Timeline.jsx

@@ -46,10 +46,14 @@ class Timeline extends React.Component {
 
   componentWillReceiveProps(nextProps) {
     if (hash(nextProps) !== hash(this.props)) {
-      console.log(nextProps.domain.categories)
       this.setState({
         timerange: nextProps.app.timerange,
-        scaleX: this.makeScaleX(),
+        scaleX: this.makeScaleX()
+      });
+    }
+
+    if (hash(nextProps.domain.categories) !== hash(this.props.domain.categories)) {
+      this.setState({
         scaleY: this.makeScaleY(nextProps.domain.categories)
       });
     }
@@ -91,7 +95,6 @@ class Timeline extends React.Component {
    * @param {object} eventPoint: regular eventPoint data
    */
   getEventY(eventPoint) {
-    console.log(eventPoint.category, this.state.scaleY(eventPoint.category))
     return this.state.scaleY(eventPoint.category);
   }
 
@@ -145,9 +148,9 @@ class Timeline extends React.Component {
   }
 
   /**
-   * Shift time range by moving forward or backwards
-   * WITHOUT updating the store
-   * @param {String} direction: 'forward' / 'backwards'
+   * Change display of time range
+   * WITHOUT updating the store, or data shown.
+   * Used for updates in the middle of a transition, for performance purposes
    */
   onSoftTimeRangeUpdate(timerange) {
     this.setState({ timerange });

src/components/TimelineCategories.jsx

@@ -33,7 +33,7 @@ class TimelineCategories extends React.Component {
     return (
       <g class="tick" opacity="1" transform={`translate(0,${this.getY(idx)})`}>
         <line x1={dims.margin_left} x2={dims.width - dims.width_controls}></line>
-        <text x={dims.margin_left} dy="0.32em">{category.category}</text>
+        <text x={dims.margin_left - 5} dy="0.32em">{category.category}</text>
       </g>
     )
   }

src/components/TimelineMarkers.jsx

@@ -10,7 +10,7 @@ class TimelineMarkers extends React.Component {
         cy={0}
         style={{
           'transform': `translate(${this.props.getEventX(event)}px, ${this.props.getEventY(event)}px)`,
-          'transition': `transform ${this.props.transitionDuration}s ease`,
+          'transition': `transform ${this.props.transitionDuration / 1000}s ease`,
           'opacity': 0.9
         }}        
         r="10"

src/store/initial.js

@@ -55,27 +55,27 @@ const initial = {
     language: 'en-US',
     mapAnchor: process.env.MAP_ANCHOR,
     zoomLevels: [{
-      label: '3 años',
+      label: '3 years',
       duration: 1576800,
       active: false
     },
       {
-        label: '3 meses',
+        label: '3 months',
         duration: 129600,
         active: false
       },
       {
-        label: '3 días',
+        label: '3 days',
         duration: 4320,
         active: false
       },
       {
-        label: '12 horas',
+        label: '12 hours',
         duration: 720,
         active: false
       },
       {
-        label: '2 horas',
+        label: '2 hours',
         duration: 120,
         active: false
       },