Add ticks to redux state

src/actions/index.js

@@ -302,6 +302,14 @@ export function updateColoringSet(coloringSet) {
   };
 }
 
+export const UPDATE_TICKS = "UPDATE_TICKS";
+export function updateTicks(ticks) {
+  return {
+    type: UPDATE_TICKS,
+    ticks,
+  };
+}
+
 // UI
 
 export const TOGGLE_SITES = "TOGGLE_SITES";

src/components/time/Axis.js

@@ -27,21 +27,22 @@ class TimelineAxis extends React.Component {
       fstFmt = "";
     } else {
       sndFmt = "%d %b";
-      fstFmt = "%H:%M";
+      // fstFmt = "%H:%M";
+      fstFmt = "";
     }
 
     const { marginTop, contentHeight } = this.props.dims;
     if (this.props.scaleX) {
       this.x0 = d3
         .axisBottom(this.props.scaleX)
-        .ticks(15)
+        .ticks(this.props.ticks)
         .tickPadding(0)
         .tickSize(contentHeight - TEXT_HEIGHT - marginTop)
         .tickFormat(d3.timeFormat(fstFmt));
 
       this.x1 = d3
         .axisBottom(this.props.scaleX)
-        .ticks(15)
+        .ticks(this.props.ticks)
         .tickPadding(marginTop)
         .tickSize(0)
         .tickFormat(d3.timeFormat(sndFmt));

src/components/time/Timeline.js

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import * as d3 from "d3";
 import hash from "object-hash";
 
-import { setLoading, setNotLoading } from "../../actions";
+import { setLoading, setNotLoading, updateTicks } from "../../actions";
 import * as selectors from "../../selectors";
 import copy from "../../common/data/copy.json";
 
@@ -239,6 +239,7 @@ class Timeline extends React.Component {
         timerange: [newDomain0, newDomainF],
       },
       () => {
+        this.props.actions.updateTicks(15);
         this.props.methods.onUpdateTimerange(this.state.timerange);
       }
     );
@@ -347,6 +348,7 @@ class Timeline extends React.Component {
       );
       const start = d3.timeMinute.offset(event.datetime, -timeframe);
       const end = d3.timeMinute.offset(event.datetime, timeframe);
+      this.props.actions.updateTicks(1);
       this.props.methods.onUpdateTimerange([start, end]);
     }
     this.props.methods.onSelect(event);
@@ -388,6 +390,7 @@ class Timeline extends React.Component {
             <svg ref={this.svgRef} width={dims.width} style={contentHeight}>
               <Clip dims={dims} />
               <Axis
+                ticks={app.timeline.dimensions.ticks}
                 dims={dims}
                 extent={this.getTimeScaleExtent()}
                 transitionDuration={this.state.transitionDuration}
@@ -499,7 +502,10 @@ function mapStateToProps(state) {
 
 function mapDispatchToProps(dispatch) {
   return {
-    actions: bindActionCreators({ setLoading, setNotLoading }, dispatch),
+    actions: bindActionCreators(
+      { setLoading, setNotLoading, updateTicks },
+      dispatch
+    ),
   };
 }
 

src/reducers/app.js

@@ -6,6 +6,7 @@ import {
   UPDATE_HIGHLIGHTED,
   UPDATE_SELECTED,
   UPDATE_COLORING_SET,
+  UPDATE_TICKS,
   CLEAR_FILTER,
   TOGGLE_ASSOCIATIONS,
   TOGGLE_SHAPES,
@@ -37,6 +38,21 @@ function updateHighlighted(appState, action) {
   });
 }
 
+function updateTicks(appState, action) {
+  console.log(action);
+  console.log(appState);
+  return {
+    ...appState,
+    timeline: {
+      ...appState.timeline,
+      dimensions: {
+        ...appState.timeline.dimensions,
+        ticks: action.ticks,
+      },
+    },
+  };
+}
+
 function updateSelected(appState, action) {
   return Object.assign({}, appState, {
     selected: action.selected,
@@ -296,6 +312,8 @@ function app(appState = initial.app, action) {
       return updateSelected(appState, action);
     case UPDATE_COLORING_SET:
       return updateColoringSet(appState, action);
+    case UPDATE_TICKS:
+      return updateTicks(appState, action);
     case CLEAR_FILTER:
       return clearFilter(appState, action);
     case TOGGLE_ASSOCIATIONS:

src/store/initial.js

@@ -75,6 +75,7 @@ const initial = {
     },
     timeline: {
       dimensions: {
+        ticks: 15,
         height: isSmallLaptop ? 170 : 250,
         width: 0,
         marginLeft: 70,