<commit_before>import React, { PropTypes } from 'react';
import debounce from 'lodash.debounce';

import '../styles/components/pinned-overlay.scss';

class PinnedOverlay extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      computedLeft: props.left,
      computedTop: props.top
    };
    this.updatePinnedLocation = debounce(this.updatePinnedLocation.bind(this), 100);
  }

  getImage() {
    var image = new Image();
    image.src = window.getComputedStyle(this.props.overlaid)['background-image'].replace(/"/g,"").replace(/url\(|\)$/ig, "");
    return image;
  }

  updatePinnedLocation() {
    this.setState(function (prevState, props) {
      const windowWidth = document.body.clientWidth;
      let imageWidth = prevState.imageWidth;
      let imageHeight = prevState.imageHeight;
      let aspectRatio = prevState.aspectRatio;

      if (!imageWidth || !imageHeight) {
        const image = this.getImage();
        imageWidth = image.width;
        imageHeight = image.height;
        aspectRatio = image.width / image.height;
      }
      const imageScaledHeight = windowWidth / aspectRatio;
      return {
        computedLeft: props.left * (windowWidth / imageWidth),
        computedTop: props.top * (imageScaledHeight / imageHeight),
        imageWidth: imageWidth,
        imageHeight: imageHeight,
        aspectRatio: aspectRatio
      };
    });
  }

  componentDidMount() {
    this.updatePinnedLocation();
    window.addEventListener("resize", this.updatePinnedLocation);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updatePinnedLocation);
  }

  render() {
    return (
      <div className="pinned-overlay" style={{
        position: 'absolute',<commit_msg>Only set top/left after loading background image<commit_after>import React, { PropTypes } from 'react';
import debounce from 'lodash.debounce';

import '../styles/components/pinned-overlay.scss';

class PinnedOverlay extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      computedLeft: props.left,
      computedTop: props.top
    };
    this.updatePinnedLocation = debounce(this.updatePinnedLocation.bind(this), 100);
  }

  getImage(callback) {
    var image = new Image();
    image.onload = () => {
      callback(image);
    }
    image.src = window.getComputedStyle(this.props.overlaid)['background-image'].replace(/"/g,"").replace(/url\(|\)$/ig, "");
    return image;
  }

  updatePinnedLocation(image) {
    this.setState(function (prevState, props) {
      const windowWidth = document.body.clientWidth;

      // Try to get image details from previous state
      let imageWidth = prevState.imageWidth;
      let imageHeight = prevState.imageHeight;
      let aspectRatio = prevState.aspectRatio;

      if (image && (!imageWidth || !imageHeight)) {
        // Else if we have the image, get image details from it
        imageWidth = image.width;
        imageHeight = image.height;
        aspectRatio = image.width / image.height;
      }
      else {
        // Finally, get the image with this function as a callback
        this.getImage(this.updatePinnedLocation.bind(this));
        return {};
      }

      const imageScaledHeight = windowWidth / aspectRatio;
      return {
        computedLeft: props.left * (windowWidth / imageWidth),
        computedTop: props.top * (imageScaledHeight / imageHeight),
        imageWidth: imageWidth,
        imageHeight: imageHeight,
        aspectRatio: aspectRatio
      };
    });
  }

  componentDidMount() {
    this.updatePinnedLocation();
    window.addEventListener("resize", this.updatePinnedLocation);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updatePinnedLocation);
  }

  render() {
    return (
      <div className="pinned-overlay" style={{
        position: 'absolute',
{'fraction_non_alphanumeric': 0.11995863495346432, 'fraction_numerical': 0.0015511892450879006, 'mean_word_length': 3.005175983436853, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 4, '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': '2333548', 'n_tokens_mistral': 1105, 'n_tokens_neox': 1097, 'n_words': 229}