Debounced zoom tracking/

weaveworks · Jul 31, 2017 · 006f81f · 006f81f
1 parent e0beb1e
commit 006f81f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/client/app/scripts/components/time-travel-timeline.js b/client/app/scripts/components/time-travel-timeline.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import classNames from 'classnames';
-import { map, clamp, find, last } from 'lodash';
+import { map, clamp, find, last, debounce } from 'lodash';
 import { connect } from 'react-redux';
 import { drag } from 'd3-drag';
 import { scaleUtc } from 'd3-scale';
@@ -17,7 +17,7 @@ import {
 } from '../utils/time-utils';
 
 import { NODES_SPRING_FAST_ANIMATION_CONFIG } from '../constants/animation';
-import { TIMELINE_TICK_INTERVAL } from '../constants/timer';
+import { TIMELINE_TICK_INTERVAL, ZOOM_TRACK_DEBOUNCE_INTERVAL } from '../constants/timer';
 
 
 const TICK_SETTINGS_PER_PERIOD = {
@@ -107,6 +107,7 @@ class TimeTravelTimeline extends React.Component {
     this.handlePan = this.handlePan.bind(this);
 
     this.saveSvgRef = this.saveSvgRef.bind(this);
+    this.debouncedTrackZoom = debounce(this.trackZoom.bind(this), ZOOM_TRACK_DEBOUNCE_INTERVAL);
   }
 
   componentDidMount() {
@@ -140,6 +141,12 @@ class TimeTravelTimeline extends React.Component {
     this.svgRef = ref;
   }
 
+  trackZoom() {
+    trackMixpanelEvent('scope.time.timeline.zoom', {
+      durationPerPixelInMilliseconds: this.state.durationPerPixel.asMilliseconds()
+    });
+  }
+
   handlePanStart() {
     this.setState({ isPanning: true });
   }
@@ -163,8 +170,8 @@ class TimeTravelTimeline extends React.Component {
     if (durationPerPixel > MAX_DURATION_PER_PX) durationPerPixel = MAX_DURATION_PER_PX;
     if (durationPerPixel < MIN_DURATION_PER_PX) durationPerPixel = MIN_DURATION_PER_PX;
 
-    trackMixpanelEvent('scope.time.timeline.zoom', { scale });
     this.setState({ durationPerPixel });
+    this.debouncedTrackZoom();
     ev.preventDefault();
   }
 

diff --git a/client/app/scripts/constants/timer.js b/client/app/scripts/constants/timer.js
@@ -6,7 +6,9 @@ export const TOPOLOGY_LOADER_DELAY = 100;
 
 export const TABLE_ROW_FOCUS_DEBOUNCE_INTERVAL = 10;
 export const VIEWPORT_RESIZE_DEBOUNCE_INTERVAL = 200;
+
 export const ZOOM_CACHE_DEBOUNCE_INTERVAL = 500;
-export const TIMELINE_DEBOUNCE_INTERVAL = 500;
+export const ZOOM_TRACK_DEBOUNCE_INTERVAL = 1000;
 
+export const TIMELINE_DEBOUNCE_INTERVAL = 500;
 export const TIMELINE_TICK_INTERVAL = 1000;