<commit_before>import React, { Component, PropTypes } from 'react';
import RenderingMonitor from './RenderingMonitor';
import mobservable from 'mobservable';
import mobservableReact from 'mobservable-react';
import deduplicateDependencies from './deduplicateDependencies';

import Panel from './Panel';
import Highlighter from './Highlighter';
import Graph from './Graph';

const LS_UPDATES_KEY = 'mobservable-react-devtool__updatesEnabled';
const LS_LOG_KEY = 'mobservable-react-devtool__logEnabled';

/* Start magic */
mobservableReact.trackComponents();

export default class DevTool extends Component {

  static propTypes = {
    hightlightTimeout: PropTypes.number,
  };

  static defaultProps = {
    hightlightTimeout: 1500,
  };

  state = {
    updatesEnabled: window.localStorage.getItem(LS_UPDATES_KEY) === 'YES',
    graphEnabled: false,
    logEnabled: window.localStorage.getItem(LS_LOG_KEY) === 'YES',
    hoverBoxes: [],
  };

  componentWillMount() {
    const { hightlightTimeout } = this.props;

    this.renderingMonitor = new RenderingMonitor({
      hightlightTimeout,
      shouldReport: () => this.state.updatesEnabled,
      onUpdate: () => this.forceUpdate(),
      getCoordinates: target => this.getCoordinates(target),
    });

    document.body.addEventListener('mousemove', this._handleMouseMove, true);
    document.body.addEventListener('click', this._handleClick, true);
  }

  componentWillUnmount() {
    this.renderingMonitor.dispose();
    document.body.removeEventListener('mousemove', this._handleMouseMove);
    document.body.removeEventListener('click', this._handleMouseMove);
  }

  getCoordinates(target) {
    const maxOffsetParent = (this.containerEl || {}).offsetParent;
    let node = target;
    let top = 0;
    let left = 0;
    while (node && node !== maxOffsetParent) {
      top += node.offsetTop || 0;
      left += node.offsetLeft || 0;
      node = node.offsetParent;
    }
    return { top, left };
  }<commit_msg>start trancking components only if rendered<commit_after>import React, { Component, PropTypes } from 'react';
import RenderingMonitor from './RenderingMonitor';
import mobservable from 'mobservable';
import mobservableReact from 'mobservable-react';
import deduplicateDependencies from './deduplicateDependencies';

import Panel from './Panel';
import Highlighter from './Highlighter';
import Graph from './Graph';

const LS_UPDATES_KEY = 'mobservable-react-devtool__updatesEnabled';
const LS_LOG_KEY = 'mobservable-react-devtool__logEnabled';

export default class DevTool extends Component {

  static propTypes = {
    hightlightTimeout: PropTypes.number,
  };

  static defaultProps = {
    hightlightTimeout: 1500,
  };

  state = {
    updatesEnabled: window.localStorage.getItem(LS_UPDATES_KEY) === 'YES',
    graphEnabled: false,
    logEnabled: window.localStorage.getItem(LS_LOG_KEY) === 'YES',
    hoverBoxes: [],
  };

  componentWillMount() {
    const { hightlightTimeout } = this.props;

    /* Start magic */
    mobservableReact.trackComponents();

    this.renderingMonitor = new RenderingMonitor({
      hightlightTimeout,
      shouldReport: () => this.state.updatesEnabled,
      onUpdate: () => this.forceUpdate(),
      getCoordinates: target => this.getCoordinates(target),
    });

    document.body.addEventListener('mousemove', this._handleMouseMove, true);
    document.body.addEventListener('click', this._handleClick, true);
  }

  componentWillUnmount() {
    this.renderingMonitor.dispose();
    document.body.removeEventListener('mousemove', this._handleMouseMove);
    document.body.removeEventListener('click', this._handleMouseMove);
  }

  getCoordinates(target) {
    const maxOffsetParent = (this.containerEl || {}).offsetParent;
    let node = target;
    let top = 0;
    let left = 0;
    while (node && node !== maxOffsetParent) {
      top += node.offsetTop || 0;
      left += node.offsetLeft || 0;
      node = node.offsetParent;
    }
    return { top, left };
  }
{'fraction_non_alphanumeric': 0.12248995983935743, 'fraction_numerical': 0.004016064257028112, 'mean_word_length': 4.108974358974359, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '172250', 'n_tokens_mistral': 1183, 'n_tokens_neox': 1145, 'n_words': 251}