<commit_before>import styles from './_TweetGraph.scss';
import React from 'react';
import moment from 'moment';
import chroma from 'chroma-js';
import Sparklines from './Sparklines';
import AppActions from '../../actions/AppActions';
import _ from 'lodash';

export default class TweetGraph extends React.Component {

  static defaultProps = {
    active:       false,
    colourScheme: [],
    tweets:       [],
    tweetData:    [],
    time:         0
  }

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.container  = React.findDOMNode(this);
    this.promTime   = this.container.querySelector('.' + styles.promtime);
    this.timeMarker = this.container.querySelector('.' + styles.marker);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props.time == 0 || Math.floor(this.props.time) !== Math.floor(nextProps.time);
  }

  jumpToTime = (e) => {
    if (!this.props.active) {
      e.preventDefault();
      return;
    }

    var x          = e.pageX - this.container.getBoundingClientRect().left;
    var xPercent   = (x/this.container.offsetWidth);
    var timeToJump = 5531 * xPercent;

    AppActions.jumpVideoTo(timeToJump);
  }

  render() {
    var backgroundRGB = chroma.hex(this.props.colourScheme[5] || '#ffffff').alpha(0.25);
    var progress      = (this.props.time / 5531) * 100;

    // Round progress to 1 decimal point
    progress = _.round(progress, 1);

    // Prom time horizontal position
    if (this.promTime) {
      var promTimeWidth = 80; //this.promTime.getBoundingClientRect().width;
      var markerX       = this.timeMarker.getBoundingClientRect().left;
      var isPastLeftBoundary  = markerX - (promTimeWidth/2) <= 0;
      var isPastRightBoundary = markerX + (promTimeWidth/2) >= window.innerWidth;
    }

    var promTimePosition = progress;
    if      (progress < 4.5)  { promTimePosition = 4.5; }
    else if (progress > 95.1) { promTimePosition = 95.1; }

    var promTimeStyle = {
      left:       promTimePosition + '%',
      marginLeft: -promTimeWidth / 2
    }

    if (isPastLeftBoundary)  { promTimeStyle.left = 0; promTimeStyle.marginLeft = 0; }
    if (isPastRightBoundary) { promTimeStyle.left = window.innerWidth - promTimeWidth; promTimeStyle.marginLeft = 0; }

    var promPrettyTime = moment(this.props.promLocalTime).utcOffset(1).format('hh:mm:ssa');

    var markerStyle = {<commit_msg>Fix misaligned time marker<commit_after>import styles from './_TweetGraph.scss';
import React from 'react';
import moment from 'moment';
import chroma from 'chroma-js';
import Sparklines from './Sparklines';
import AppActions from '../../actions/AppActions';
import _ from 'lodash';

export default class TweetGraph extends React.Component {

  static defaultProps = {
    active:       false,
    colourScheme: [],
    tweets:       [],
    tweetData:    [],
    time:         0
  }

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.container  = React.findDOMNode(this);
    this.promTime   = this.container.querySelector('.' + styles.promtime);
    this.timeMarker = this.container.querySelector('.' + styles.marker);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props.time == 0 || Math.floor(this.props.time) !== Math.floor(nextProps.time);
  }

  jumpToTime = (e) => {
    if (!this.props.active) {
      e.preventDefault();
      return;
    }

    var x          = e.pageX - this.container.getBoundingClientRect().left;
    var xPercent   = (x/this.container.offsetWidth);
    var timeToJump = 5531 * xPercent;

    AppActions.jumpVideoTo(timeToJump);
  }

  render() {
    var backgroundRGB = chroma.hex(this.props.colourScheme[5] || '#ffffff').alpha(0.25);
    var progress      = (this.props.time / 5531) * 100;

    // Round progress to 1 decimal point
    progress = _.round(progress, 1);

    // Prom time horizontal position
    if (this.promTime) {
      var promTimeWidth = 80; //this.promTime.getBoundingClientRect().width;
      var markerX       = this.timeMarker.getBoundingClientRect().left;
      var isPastLeftBoundary  = markerX - (promTimeWidth/2) <= 0;
      var isPastRightBoundary = markerX + (promTimeWidth/2) >= window.innerWidth;
    }

    var promTimePosition = progress;
    if      (progress < 4.5)  { promTimePosition = 4.0; }
    else if (progress > 95.1) { promTimePosition = 95.1; }

    var promTimeStyle = {
      left:       promTimePosition + '%',
      marginLeft: -promTimeWidth / 2
    }

    if (isPastLeftBoundary)  { promTimeStyle.left = 0; promTimeStyle.marginLeft = 0; }
    if (isPastRightBoundary) { promTimeStyle.left = window.innerWidth - promTimeWidth; promTimeStyle.marginLeft = 0; }

    var promPrettyTime = moment(this.props.promLocalTime).utcOffset(1).format('hh:mm:ssa');

    var markerStyle = {
{'fraction_non_alphanumeric': 0.1305884799334581, 'fraction_numerical': 0.016219588271990017, 'mean_word_length': 2.995016611295681, 'pattern_counts': {'":': 0, '<': 7, '<?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': '3506321', 'n_tokens_mistral': 1589, 'n_tokens_neox': 1498, 'n_words': 321}