From 83e433e85721ca583559b0796ee55311be956661 Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Mon, 31 Jul 2017 17:39:13 +0200
Subject: [PATCH] Debounced zoom tracking.

---
 .../app/scripts/components/time-travel-timeline.js  | 13 ++++++++++---
 client/app/scripts/constants/timer.js               |  4 +++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/client/app/scripts/components/time-travel-timeline.js b/client/app/scripts/components/time-travel-timeline.js
index 2e3ebac1bc..33731c1b2b 100644
--- 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
index 3b14691a85..c2ede75ae7 100644
--- 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;