<commit_before>import React, { Component, PropTypes } from 'react';
import ItemTypes from '../constants/ItemTypes';
import { DropTarget } from 'react-dnd';
import _ from 'lodash';
import Scene from './Scene';
import SceneHeader from './SceneHeader';

class DraggableScene extends Component {
  static propTypes = {
    connectionLocation: PropTypes.object,
    draggedScene: PropTypes.object.isRequired,
    onDragConnectionStart: PropTypes.func.isRequired,
    onDragConnectionEnd: PropTypes.func.isRequired,
    updateConnectionStart: PropTypes.func.isRequired,
    updateConnectionEnd: PropTypes.func.isRequired,
    onSceneDragChange: PropTypes.func.isRequired,
    onSceneHeaderRef: PropTypes.func.isRequired,
    onTargetlessConnectionDrop: PropTypes.func.isRequired,
    renderScene: PropTypes.func.isRequired,
    renderSceneHeader: PropTypes.func.isRequired,
    scene: PropTypes.object.isRequired,
  };

  handleSceneMouseDown = (event) => {
    const { onDragConnectionStart, scene } = this.props;
    const {pageX: x, pageY: y} = event;
    onDragConnectionStart(scene, {x, y});
  }

  render() {
    const {
      connectDropTarget,
      connectionLocation,
      draggedScene,
      onSceneDragChange,
      onSceneHeaderRef,
      onTargetlessConnectionDrop,
      renderScene,
      renderSceneHeader,
      scene,
    } = this.props;

    if(draggedScene.id === scene.id) {
      return null;
    }

    const transform = `translate3d(${scene.x}px, ${scene.y}px, 0)`;
    const styles = {
      position: 'absolute',
      transform: transform,
      WebkitTransform: transform,
    };

    return connectDropTarget(
      <div
        ref={(node) => {
          if(node) {
            onSceneHeaderRef(node.getBoundingClientRect().height - scene.height);
          }
        }}
        style={styles}>
        <SceneHeader
          key={`${scene.id}header`}
          renderSceneHeader={renderSceneHeader}
          scene={scene}
          onSceneDragChange={onSceneDragChange}
        />
        <div onMouseDown={this.handleSceneMouseDown}>
          <Scene
            canDrag={!_.isEmpty(connectionLocation)}
            key={scene.id}
            renderScene={renderScene}
            scene={scene}
            onTargetlessConnectionDrop={onTargetlessConnectionDrop}
          />
        </div>
      </div>
    );
  }
}

const connectionTarget = {<commit_msg>just fire new ref once<commit_after>import React, { Component, PropTypes } from 'react';
import ItemTypes from '../constants/ItemTypes';
import { DropTarget } from 'react-dnd';
import _ from 'lodash';
import Scene from './Scene';
import SceneHeader from './SceneHeader';

class DraggableScene extends Component {
  static propTypes = {
    connectionLocation: PropTypes.object,
    draggedScene: PropTypes.object.isRequired,
    onDragConnectionStart: PropTypes.func.isRequired,
    onDragConnectionEnd: PropTypes.func.isRequired,
    updateConnectionStart: PropTypes.func.isRequired,
    updateConnectionEnd: PropTypes.func.isRequired,
    onSceneDragChange: PropTypes.func.isRequired,
    onSceneHeaderRef: PropTypes.func.isRequired,
    onTargetlessConnectionDrop: PropTypes.func.isRequired,
    renderScene: PropTypes.func.isRequired,
    renderSceneHeader: PropTypes.func.isRequired,
    scene: PropTypes.object.isRequired,
  };

  componentWillMount() {
    this.firedHeaderRef = false;
  }

  handleSceneMouseDown = (event) => {
    const { onDragConnectionStart, scene } = this.props;
    const {pageX: x, pageY: y} = event;
    onDragConnectionStart(scene, {x, y});
  }

  render() {
    const {
      connectDropTarget,
      connectionLocation,
      draggedScene,
      onSceneDragChange,
      onSceneHeaderRef,
      onTargetlessConnectionDrop,
      renderScene,
      renderSceneHeader,
      scene,
    } = this.props;

    if(draggedScene.id === scene.id) {
      return null;
    }

    const transform = `translate3d(${scene.x}px, ${scene.y}px, 0)`;
    const styles = {
      position: 'absolute',
      transform: transform,
      WebkitTransform: transform,
    };

    return connectDropTarget(
      <div
        ref={(node) => {
          if(node && !this.firedHeaderRef) {
            this.firedHeaderRef = true;
            onSceneHeaderRef(node.getBoundingClientRect().height - scene.height);
          }
        }}
        style={styles}>
        <SceneHeader
          key={`${scene.id}header`}
          renderSceneHeader={renderSceneHeader}
          scene={scene}
          onSceneDragChange={onSceneDragChange}
        />
        <div onMouseDown={this.handleSceneMouseDown}>
          <Scene
            canDrag={!_.isEmpty(connectionLocation)}
            key={scene.id}
            renderScene={renderScene}
            scene={scene}
            onTargetlessConnectionDrop={onTargetlessConnectionDrop}
          />
        </div>
      </div>
    );
  }
}

const connectionTarget = {
{'fraction_non_alphanumeric': 0.10884631064003261, 'fraction_numerical': 0.0008153281695882593, 'mean_word_length': 2.7921174652241114, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 19, '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': '4638319', 'n_tokens_mistral': 1382, 'n_tokens_neox': 1391, 'n_words': 258}