weave-scope/client/app/scripts/components/metric-selector-item.js

import React from 'react';
import classNames from 'classnames';
import { connect } from 'react-redux';

import { hoverMetric, pinMetric, unpinMetric } from '../actions/app-actions';
import { selectedMetricTypeSelector } from '../selectors/node-metric';
import { trackMixpanelEvent } from '../utils/tracking-utils';


class MetricSelectorItem extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.onMouseOver = this.onMouseOver.bind(this);
    this.onMouseClick = this.onMouseClick.bind(this);
  }

  trackEvent(eventName) {
    trackMixpanelEvent(eventName, {
      metricType: this.props.metric.get('label'),
      layout: this.props.topologyViewMode,
      topologyId: this.props.currentTopology.get('id'),
      parentTopologyId: this.props.currentTopology.get('parentId'),
    });
  }

  onMouseOver() {
    const metricType = this.props.metric.get('label');
    this.props.hoverMetric(metricType);
  }

  onMouseClick() {
    const metricType = this.props.metric.get('label');
    const pinnedMetricType = this.props.pinnedMetricType;

    if (metricType !== pinnedMetricType) {
      this.trackEvent('scope.metric.selector.pin.click');
      this.props.pinMetric(metricType);
    } else {
      this.trackEvent('scope.metric.selector.unpin.click');
      this.props.unpinMetric();
    }
  }

  render() {
    const { metric, selectedMetricType, pinnedMetricType } = this.props;
    const type = metric.get('label');
    const isPinned = (type === pinnedMetricType);
    const isSelected = (type === selectedMetricType);
    const className = classNames('metric-selector-action', {
      'metric-selector-action-selected': isSelected
    });

    return (
      <div
        key={type}
        className={className}
        onMouseOver={this.onMouseOver}
        onClick={this.onMouseClick}>
        {type}
        {isPinned && <span className="fa fa-thumb-tack" />}
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    topologyViewMode: state.get('topologyViewMode'),
    currentTopology: state.get('currentTopology'),
    pinnedMetricType: state.get('pinnedMetricType'),
    selectedMetricType: selectedMetricTypeSelector(state),
  };
}

export default connect(
  mapStateToProps,
  { hoverMetric, pinMetric, unpinMetric }
)(MetricSelectorItem);