compose store with custom values in config.js

src/components/Dashboard.jsx

@@ -60,8 +60,8 @@ class Dashboard extends React.Component {
     }
   }
 
-  getCategoryColor(category='other') {
-    return this.props.ui.style.categories[category] || this.props.ui.style.categories['other']
+  getCategoryColor(category) {
+    return this.props.ui.style.categories[category] || this.props.ui.style.categories['default']
   }
 
   getNarrativeLinks(event) {

src/components/Timeline.jsx

@@ -20,6 +20,7 @@ class Timeline extends React.Component {
     super(props);
     this.styleDatetime = this.styleDatetime.bind(this)
     this.getDatetimeX = this.getDatetimeX.bind(this)
+    this.onApplyZoom = this.onApplyZoom.bind(this)
     this.svgRef = React.createRef()
     this.state = {
       isFolded: false,
@@ -99,6 +100,7 @@ class Timeline extends React.Component {
    * Returns the time scale (x) extent in minutes
    */
   getTimeScaleExtent() {
+    if (!this.state.scaleX) return 0
     const timeDomain = this.state.scaleX.domain();
     return (timeDomain[1].getTime() - timeDomain[0].getTime()) / 60000;
   }
@@ -153,7 +155,7 @@ class Timeline extends React.Component {
 
     this.setState({ timerange: [domain0, domainF] }, () => {
       this.props.methods.onUpdateTimerange(this.state.timerange);
-    });    
+    });
   }
 
   /**
@@ -284,9 +286,10 @@ class Timeline extends React.Component {
                 onMoveTime={(dir) => { this.onMoveTime(dir) }}
               />
               <TimelineZoomControls
+                extent={this.getTimeScaleExtent()}
                 zoomLevels={this.props.app.zoomLevels}
                 dims={dims}
-                onApplyZoom={(zoom) => { this.onApplyZoom(zoom); }}
+                onApplyZoom={this.onApplyZoom}
               />
               <TimelineLabels
                 dims={dims}

src/components/TimelineAxis.jsx

@@ -20,14 +20,14 @@ class TimelineAxis extends React.Component {
           .tickPadding(5)
           .tickSize(this.props.dims.trackHeight)
           .tickFormat(d3.timeFormat('%d %b'));
-  
+
       this.x1 =
         d3.axisBottom(this.props.scaleX)
           .ticks(10)
           .tickPadding(this.props.dims.margin_top)
           .tickSize(0)
           .tickFormat(d3.timeFormat('%H:%M'));
-      
+
       if (!this.state.isInitialized) this.setState({ isInitialized: true });
     }
 
@@ -61,9 +61,9 @@ class TimelineAxis extends React.Component {
           className={`axis axisHourText`}
         >
         </g>
-      </React.Fragment> 
+      </React.Fragment>
     );
   }
 }
 
-export default TimelineAxis;
+export default TimelineAxis;

src/components/TimelineCategories.jsx

@@ -59,4 +59,4 @@ class TimelineCategories extends React.Component {
   }
 }
 
-export default TimelineCategories;
+export default TimelineCategories;

src/components/presentational/TimelineZoomControls.js

@@ -1,11 +1,11 @@
 import React from 'react';
 
-const TimelineZoomControls = ({ zoomLevels, dims, onApplyZoom }) => {
-  
+const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
   function renderZoom(zoom, idx) {
+    const isActive = (zoom.duration === extent)
     return (
       <text
-        className={`zoom-level-button ${zoom.active ? 'active' : ''}`}
+        className={`zoom-level-button ${isActive ? 'active' : ''}`}
         x="60"
         y={(idx * 15) + 20}
         onClick={() => onApplyZoom(zoom)}
@@ -22,4 +22,4 @@ const TimelineZoomControls = ({ zoomLevels, dims, onApplyZoom }) => {
   );
 }
 
-export default TimelineZoomControls;
+export default TimelineZoomControls;