Moved all the event tracking out of app-actions.js

client/app/scripts/actions/app-actions.js

@@ -23,7 +23,6 @@ import {
 import { getCurrentTopologyUrl } from '../utils/topology-utils';
 import { storageSet } from '../utils/storage-utils';
 import { loadTheme } from '../utils/contrast-utils';
-import { trackMixpanelEvent } from '../utils/tracking-utils';
 import {
   availableMetricTypesSelector,
   selectedMetricTypeSelector,
@@ -210,13 +209,6 @@ export function changeTopologyOption(option, value, topologyId, addOrRemove) {
     // update all request workers with new options
     resetUpdateBuffer();
     const state = getState();
-    trackMixpanelEvent('scope.topology.option.click', {
-      option,
-      value,
-      layout: state.get('topologyViewMode'),
-      topologyId: state.getIn(['currentTopology', 'id']),
-      parentTopologyId: state.getIn(['currentTopology', 'parentId']),
-    });
     getTopologies(activeTopologyOptionsSelector(state), dispatch);
     getNodesDelta(
       getCurrentTopologyUrl(state),
@@ -274,11 +266,7 @@ export function clickDownloadGraph() {
 }
 
 export function clickForceRelayout() {
-  return (dispatch, getState) => {
-    const state = getState();
-    trackMixpanelEvent('scope.layout.refresh.click', {
-      layout: state.get('topologyViewMode'),
-    });
+  return (dispatch) => {
     dispatch({
       type: ActionTypes.CLICK_FORCE_RELAYOUT,
       forceRelayout: true
@@ -356,11 +344,6 @@ export function clickNode(nodeId, label, origin) {
     });
     updateRoute(getState);
     const state = getState();
-    trackMixpanelEvent('scope.node.click', {
-      layout: state.get('topologyViewMode'),
-      topologyId: state.getIn(['currentTopology', 'id']),
-      parentTopologyId: state.getIn(['currentTopology', 'parentId']),
-    });
     getNodeDetails(
       state.get('topologyUrlsById'),
       state.get('currentTopologyId'),
@@ -388,11 +371,6 @@ export function clickRelative(nodeId, topologyId, label, origin) {
     });
     updateRoute(getState);
     const state = getState();
-    trackMixpanelEvent('scope.node.relative.click', {
-      layout: state.get('topologyViewMode'),
-      topologyId: state.getIn(['currentTopology', 'id']),
-      parentTopologyId: state.getIn(['currentTopology', 'parentId']),
-    });
     getNodeDetails(
       state.get('topologyUrlsById'),
       state.get('currentTopologyId'),

client/app/scripts/charts/node.js

@@ -7,6 +7,8 @@ import { clickNode, enterNode, leaveNode } from '../actions/app-actions';
 import { getNodeColor } from '../utils/color-utils';
 import MatchedText from '../components/matched-text';
 import MatchedResults from '../components/matched-results';
+import { trackMixpanelEvent } from '../utils/tracking-utils';
+import { GRAPH_VIEW_MODE } from '../constants/naming';
 import { NODE_BASE_SIZE } from '../constants/styles';
 
 import NodeShapeStack from './node-shape-stack';
@@ -141,6 +143,11 @@ class Node extends React.Component {
 
   handleMouseClick(ev) {
     ev.stopPropagation();
+    trackMixpanelEvent('scope.node.click', {
+      layout: GRAPH_VIEW_MODE,
+      topologyId: this.props.currentTopology.get('id'),
+      parentTopologyId: this.props.currentTopology.get('parentId'),
+    });
     this.props.clickNode(this.props.id, this.props.label, this.shapeRef.getBoundingClientRect());
   }
 
@@ -159,7 +166,8 @@ function mapStateToProps(state) {
   return {
     exportingGraph: state.get('exportingGraph'),
     showingNetworks: state.get('showingNetworks'),
-    contrastMode: state.get('contrastMode')
+    currentTopology: state.get('currentTopology'),
+    contrastMode: state.get('contrastMode'),
   };
 }
 

client/app/scripts/charts/nodes-grid.js

@@ -1,11 +1,13 @@
 /* eslint react/jsx-no-bind: "off", no-multi-comp: "off" */
-
 import React from 'react';
 import { connect } from 'react-redux';
 import { List as makeList, Map as makeMap } from 'immutable';
+
 import NodeDetailsTable from '../components/node-details/node-details-table';
 import { clickNode, sortOrderChanged } from '../actions/app-actions';
 import { shownNodesSelector } from '../selectors/node-filters';
+import { trackMixpanelEvent } from '../utils/tracking-utils';
+import { TABLE_VIEW_MODE } from '../constants/naming';
 
 import { canvasMarginsSelector, canvasHeightSelector } from '../selectors/canvas';
 import { searchNodeMatchesSelector } from '../selectors/search';
@@ -89,6 +91,11 @@ class NodesGrid extends React.Component {
     if (ev.target.className === 'node-details-table-node-link') {
       return;
     }
+    trackMixpanelEvent('scope.node.click', {
+      layout: TABLE_VIEW_MODE,
+      topologyId: this.props.currentTopology.get('id'),
+      parentTopologyId: this.props.currentTopology.get('parentId'),
+    });
     this.props.clickNode(node.id, node.label, ev.target.getBoundingClientRect());
   }
 

client/app/scripts/components/footer.js

@@ -4,19 +4,39 @@ import moment from 'moment';
 
 import Plugins from './plugins';
 import { getUpdateBufferSize } from '../utils/update-buffer-utils';
-import { clickDownloadGraph, clickForceRelayout, clickPauseUpdate,
-  clickResumeUpdate, toggleHelp, toggleTroubleshootingMenu, setContrastMode } from '../actions/app-actions';
+import { trackMixpanelEvent } from '../utils/tracking-utils';
+import {
+  clickDownloadGraph,
+  clickForceRelayout,
+  clickPauseUpdate,
+  clickResumeUpdate,
+  toggleHelp,
+  toggleTroubleshootingMenu,
+  setContrastMode
+} from '../actions/app-actions';
+
 
 class Footer extends React.Component {
   constructor(props, context) {
     super(props, context);
 
     this.handleContrastClick = this.handleContrastClick.bind(this);
+    this.handleRelayoutClick = this.handleRelayoutClick.bind(this);
   }
-  handleContrastClick(e) {
-    e.preventDefault();
+
+  handleContrastClick(ev) {
+    ev.preventDefault();
     this.props.setContrastMode(!this.props.contrastMode);
   }
+
+  handleRelayoutClick(ev) {
+    ev.preventDefault();
+    trackMixpanelEvent('scope.layout.refresh.click', {
+      layout: this.props.topologyViewMode,
+    });
+    this.props.clickForceRelayout();
+  }
+
   render() {
     const { hostname, updatePausedAt, version, versionUpdate, contrastMode } = this.props;
 
@@ -75,7 +95,7 @@ class Footer extends React.Component {
           </a>
           <a
             className="footer-icon"
-            onClick={this.props.clickForceRelayout}
+            onClick={this.handleRelayoutClick}
             title={forceRelayoutTitle}>
             <span className="fa fa-refresh" />
           </a>
@@ -103,9 +123,10 @@ function mapStateToProps(state) {
   return {
     hostname: state.get('hostname'),
     updatePausedAt: state.get('updatePausedAt'),
+    topologyViewMode: state.get('topologyViewMode'),
     version: state.get('version'),
     versionUpdate: state.get('versionUpdate'),
-    contrastMode: state.get('contrastMode')
+    contrastMode: state.get('contrastMode'),
   };
 }
 

client/app/scripts/components/node-details/node-details-relatives-link.js

@@ -2,17 +2,23 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import { clickRelative } from '../../actions/app-actions';
+import { trackMixpanelEvent } from '../../utils/tracking-utils';
 import MatchedText from '../matched-text';
 
+
 class NodeDetailsRelativesLink extends React.Component {
   constructor(props, context) {
     super(props, context);
+
     this.handleClick = this.handleClick.bind(this);
     this.saveNodeRef = this.saveNodeRef.bind(this);
   }
 
   handleClick(ev) {
     ev.preventDefault();
+    trackMixpanelEvent('scope.node.relative.click', {
+      topologyId: this.props.topologyId,
+    });
     this.props.dispatch(clickRelative(
       this.props.id,
       this.props.topologyId,

client/app/scripts/components/node-details/node-details-table-node-link.js

@@ -2,16 +2,22 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import { clickRelative } from '../../actions/app-actions';
+import { trackMixpanelEvent } from '../../utils/tracking-utils';
+
 
 class NodeDetailsTableNodeLink extends React.Component {
   constructor(props, context) {
     super(props, context);
+
     this.handleClick = this.handleClick.bind(this);
     this.saveNodeRef = this.saveNodeRef.bind(this);
   }
 
   handleClick(ev) {
     ev.preventDefault();
+    trackMixpanelEvent('scope.node.relative.click', {
+      topologyId: this.props.topologyId,
+    });
     this.props.dispatch(clickRelative(
       this.props.nodeId,
       this.props.topologyId,

client/app/scripts/components/topology-options.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { Map as makeMap } from 'immutable';
 import includes from 'lodash/includes';
 
+import { trackMixpanelEvent } from '../utils/tracking-utils';
 import { getCurrentTopologyOptions } from '../utils/topology-utils';
 import { activeTopologyOptionsSelector } from '../selectors/topology';
 import TopologyOptionAction from './topology-option-action';
@@ -12,10 +13,21 @@ class TopologyOptions extends React.Component {
   constructor(props, context) {
     super(props, context);
 
+    this.trackOptionClick = this.trackOptionClick.bind(this);
     this.handleOptionClick = this.handleOptionClick.bind(this);
     this.handleNoneClick = this.handleNoneClick.bind(this);
   }
 
+  trackOptionClick(optionId, nextOptions) {
+    trackMixpanelEvent('scope.topology.option.click', {
+      optionId,
+      value: nextOptions,
+      layout: this.props.topologyViewMode,
+      topologyId: this.props.currentTopology.get('id'),
+      parentTopologyId: this.props.currentTopology.get('parentId'),
+    });
+  }
+
   handleOptionClick(optionId, value, topologyId) {
     let nextOptions = [value];
     const { activeOptions, options } = this.props;
@@ -44,15 +56,18 @@ class TopologyOptions extends React.Component {
         nextOptions = nextOptions.filter(o => o !== 'none');
       }
     }
+    this.trackOptionClick(optionId, nextOptions);
     this.props.changeTopologyOption(optionId, nextOptions, topologyId);
   }
 
   handleNoneClick(optionId, value, topologyId) {
-    this.props.changeTopologyOption(optionId, ['none'], topologyId);
+    const nextOptions = ['none'];
+    this.trackOptionClick(optionId, nextOptions);
+    this.props.changeTopologyOption(optionId, nextOptions, topologyId);
   }
 
   renderOption(option) {
-    const { activeOptions, topologyId } = this.props;
+    const { activeOptions, currentTopologyId } = this.props;
     const optionId = option.get('id');
     const activeValue = activeOptions && activeOptions.has(optionId)
       ? activeOptions.get(optionId)
@@ -68,7 +83,7 @@ class TopologyOptions extends React.Component {
             <TopologyOptionAction
               onClick={this.handleOptionClick}
               optionId={optionId}
-              topologyId={topologyId}
+              topologyId={currentTopologyId}
               key={item.get('value')}
               activeValue={activeValue}
               item={item}
@@ -79,7 +94,7 @@ class TopologyOptions extends React.Component {
               onClick={this.handleNoneClick}
               optionId={optionId}
               item={noneItem}
-              topologyId={topologyId}
+              topologyId={currentTopologyId}
               activeValue={activeValue}
             />
           }
@@ -102,7 +117,9 @@ class TopologyOptions extends React.Component {
 function mapStateToProps(state) {
   return {
     options: getCurrentTopologyOptions(state),
-    topologyId: state.get('currentTopologyId'),
+    topologyViewMode: state.get('topologyViewMode'),
+    currentTopology: state.get('currentTopology'),
+    currentTopologyId: state.get('currentTopologyId'),
     activeOptions: activeTopologyOptionsSelector(state)
   };
 }

client/app/scripts/utils/tracking-utils.js

@@ -6,7 +6,6 @@ const log = debug('service:tracking');
 export function trackMixpanelEvent(name, props) {
   if (window.mixpanel && process.env.WEAVE_CLOUD) {
     window.mixpanel.track(name, props);
-    log('trackMixpanelEvent', name, props);
   } else {
     log('trackMixpanelEvent', name, props);
   }