Remove unnecessary renders in map / timeline and style narrative mode

src/components/NarrativeCard.js

@@ -26,6 +26,7 @@ class NarrativeCard extends React.Component {
   componentDidUpdate() {
     if (this.props.narrative !== null) {
       const step = this.props.narrative.steps[this.state.step];
+      console.log(step)
       this.props.onSelect([step]);
     }
   }
@@ -34,7 +35,7 @@ class NarrativeCard extends React.Component {
     return (
       <button
         className="side-menu-burg is-active"
-        onClick={() => { this.props.actions.updateNarrative(null); }}
+        onClick={() => { this.props.onSelectNarrative(null); }}
       >
         <span></span>
       </button>

src/components/Timeline.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import * as selectors from '../selectors';
+import hash from 'object-hash';
 
 import copy from '../js/data/copy.json';
-import { formatterWithYear } from '../js/utilities';
+import { formatterWithYear, isNotNullNorUndefined } from '../js/utilities';
 import TimelineHeader from './presentational/TimelineHeader';
 import TimelineLogic from '../js/timeline/timeline.js';
 
@@ -21,7 +22,9 @@ class Timeline extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.timeline.update(nextProps.domain, nextProps.app);
+    if (hash(nextProps) !== hash(this.props)) {
+      this.timeline.update(nextProps.domain, nextProps.app);
+    }
   }
 
   onClickArrow() {
@@ -32,7 +35,7 @@ class Timeline extends React.Component {
 
   render() {
     let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`;
-
+    classes += (this.props.app.narrative !== null) ? ' narrative-mode' : '';
     return (
       <div className={classes}>
         <TimelineHeader
@@ -60,7 +63,8 @@ function mapStateToProps(state) {
       timerange: selectors.getTimeRange(state),
       selected: state.app.selected,
       language: state.app.language,
-      zoomLevels: state.app.zoomLevels
+      zoomLevels: state.app.zoomLevels,
+      narrative: state.app.narrative
     },
     ui: {
       dom: state.ui.dom,

src/components/Toolbar.jsx

@@ -7,6 +7,7 @@ import Search from './Search.jsx';
 import TagListPanel from './TagListPanel.jsx';
 import ToolbarBottomActions from './ToolbarBottomActions.jsx';
 import copy from '../js/data/copy.json';
+import { isNotNullNorUndefined } from '../js/utilities.js';
 
 class Toolbar extends React.Component {
 
@@ -174,8 +175,9 @@ class Toolbar extends React.Component {
   }
 
   render() {
+    const isNarrative = isNotNullNorUndefined(this.props.narrative);
     return (
-      <div id="toolbar-wrapper" className={`toolbar-wrapper ${this.props.narrative ? 'narrative-mode' : ''}`}>
+      <div id="toolbar-wrapper" className={`toolbar-wrapper ${(isNarrative) ? 'narrative-mode' : ''}`}>
         {this.renderToolbarTabs()}
         {this.renderToolbarPanels()}
       </div>

src/components/Viewport.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import * as selectors from '../selectors'
+import hash from 'object-hash';
+
 import Map from '../js/map/map.js'
 import { areEqual } from '../js/utilities.js'
 
@@ -15,7 +17,9 @@ class Viewport extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.map.update(nextProps.domain, nextProps.app)
+    if (hash(nextProps) !== hash(this.props)) {
+      this.map.update(nextProps.domain, nextProps.app)
+    }
   }
 
   render() {