Clean up Timeline component

src/components/Timeline.jsx

@@ -4,6 +4,7 @@ import * as selectors from '../selectors';
 
 import copy from '../js/data/copy.json';
 import { formatterWithYear } from '../js/utilities';
+import TimelineHeader from './presentational/TimelineHeader';
 import TimelineLogic from '../js/timeline/timeline.js';
 
 class Timeline extends React.Component {
@@ -15,18 +16,12 @@ class Timeline extends React.Component {
   }
 
   componentDidMount() {
-    const ui = {
-      dom: this.props.dom
-    }
-
-    this.timeline = new TimelineLogic(this.props.app, ui, this.props.methods);
+    this.timeline = new TimelineLogic(this.props.app, this.props.ui, this.props.methods);
     this.timeline.update(this.props.domain, this.props.app);
-    this.timeline.render(this.props.domain);
   }
 
   componentWillReceiveProps(nextProps) {
     this.timeline.update(nextProps.domain, nextProps.app);
-    this.timeline.render(nextProps.domain);
   }
 
   onClickArrow() {
@@ -35,34 +30,19 @@ class Timeline extends React.Component {
     });
   }
 
-  renderLabels() {
-    const labels = copy[this.props.language].timeline.labels;
-    return this.props.categories.map((label) => {
-      const groupLen = this.props.categories.length
-      return (<div className="timeline-label">{label}</div>);
-    });
-  }
-
   render() {
-    const labels_title_lang = copy[this.props.app.language].timeline.labels_title;
-    const info_lang = copy[this.props.app.language].timeline.info;
     let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`;
-    const date0 = formatterWithYear(this.props.app.timerange[0]);
-    const date1 = formatterWithYear(this.props.app.timerange[1]);
 
     return (
       <div className={classes}>
-        <div className="timeline-header">
-          <div className="timeline-toggle" onClick={() => this.onClickArrow()}>
-            <p><i className="arrow-down"></i></p>
-          </div>
-          <div className="timeline-info">
-            <p>{info_lang}</p>
-            <p>{date0} - {date1}</p>
-          </div>
-        </div>
+        <TimelineHeader
+          title={copy[this.props.app.language].timeline.info}
+          date0={formatterWithYear(this.props.app.timerange[0])}
+          date1={formatterWithYear(this.props.app.timerange[1])}
+          onClick={() => { this.onClickArrow(); }}
+        />
         <div className="timeline-content">
-          <div id="timeline" className="timeline" />
+          <div id={this.props.ui.dom.timeline} className="timeline" />
         </div>
       </div>
     );
@@ -82,7 +62,9 @@ function mapStateToProps(state) {
       language: state.app.language,
       zoomLevels: state.app.zoomLevels
     },
-    dom: state.ui.dom,
+    ui: {
+      dom: state.ui.dom,
+    }
   }
 }
 

src/components/presentational/TimelineHeader.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const TimelineHeader = ({ title, date0, date1, onClick }) => (
+  <div className="timeline-header">
+    <div className="timeline-toggle" onClick={() => onClick()}>
+      <p><i className="arrow-down"></i></p>
+    </div>
+    <div className="timeline-info">
+      <p>{title}</p>
+      <p>{date0} - {date1}</p>
+    </div>
+  </div>
+);
+
+export default TimelineHeader;

src/js/map/map.js

@@ -129,11 +129,8 @@ Stop and start the development process in terminal after you have added your tok
   }
 
   function updateSVG() {
-    const boundaries = getSVGBoundaries();
-    const {
-      topLeft,
-      bottomRight
-    } = boundaries;
+    const { topLeft, bottomRight } = getSVGBoundaries();
+
     svg.attr('width', bottomRight.x - topLeft.x + 200)
       .attr('height', bottomRight.y - topLeft.y + 200)
       .style('left', `${topLeft.x - 100}px`)
@@ -155,7 +152,7 @@ Stop and start the development process in terminal after you have added your tok
       .curve(d3.curveMonotoneX);
   }
 
-  lMap.on("zoom viewreset move", updateSVG);
+  lMap.on("zoomend viewreset moveend", updateSVG);
 
   /**
    * Returns latitud / longitude
@@ -224,9 +221,7 @@ Stop and start the development process in terminal after you have added your tok
   function getLocationEventsDistribution(location) {
     const eventCount = {};
     const categories = domain.categories;
-    // categories.sort((a, b) => {
-    //   return (+a.slice(-2) > +b.slice(-2));
-    // });
+
     categories.forEach(cat => {
       eventCount[cat.category] = 0
     });

src/js/timeline/timeline.js

@@ -316,7 +316,7 @@ export default function(newApp, ui, methods) {
       const newDomain0 = d3.timeSecond.offset(app.timerange[0], timeShift);
       const newDomainF = d3.timeSecond.offset(app.timerange[1], timeShift);
 
-      scale.x.domain([newDomain0, newDomainF])
+      scale.x.domain([newDomain0, newDomainF]);
       render();
     })
     .on('end', () => {
@@ -554,6 +554,7 @@ export default function(newApp, ui, methods) {
       app.timerange = newApp.timerange;
       app.selected = newApp.selected.slice(0);
       updateTimeRange();
+      renderTimeLabels();
       renderEventsAndHighlight();
     }
   }