<commit_before>var React = require('react');
var OAuth = require('../helpers/OAuthHelper');
var ErrorHelper = require('../helpers/ErrorHelper');
var GitHubHelper = require('../helpers/GitHubHelper');
var CommitsGraph = require('react-commits-graph');
var localCommits = require('../local/commits.json');
var RepoForm = require('./RepoForm');
var MessageView = require('./MessageView');

var localCommits = require('../local/commits.json');

var Container = React.createClass({
	getInitialState: function () {
		return {
			commits: localCommits,
			selectedSha: null,
			selectedCommit: null,
			activeMessage: false
		};
	},
	componentDidMount: function() {
		// Toggle the search modal
		$(".searchIcon").on("click", this.onSearchClick);
		$(document).click(this.onDocumentClick);
	},
	componentWillUnmount: function() {
		$(".searchIcon").unbind("click");
		$(document).unbind("click");
	},
	onSearchClick: function (e) {
		$(".searchIcon").toggleClass("searchIcon_active");
		$(".searchModal").toggleClass("searchModal_active");
	},
	onDocumentClick: function (event) {
		/* close search modal when clicking off of the element */
        if($(event.target).parents(".searchModal").length == 0
           && !$(event.target).hasClass("searchIcon")
           && !$(event.target).hasClass("searchModal")) {

            $(".searchModal").removeClass("searchModal_active");
            $(".searchIcon").removeClass("searchIcon_active");
        }
       if($(event.target).parents(".graphModal").length == 0
            && !$(event.target).is('[class^="commits-graph-branch-"]')
            && !$(event.target).hasClass("graphModal")) {
        	this.setMessageState();
        }
	},
	toggleForm: function () {
		this.setState({
			activeForm: !this.state.activeForm
		});
	},
	setMessageState: function (sha, commit) {
		sha = sha || null;
		commit = commit || null;
		this.setState({
			selectedSha: sha,
			selectedCommit: commit,
			activeMessage: sha !== null && commit !== null
        });
	},
	showInfo: function(x, y) {
		//if we clicked a node, get the position of the clicked commit node
		var halfScreenWidth = $(window).width() / 2;
		var halfModalWidth = $(".graphModal").width() / 2;
		var halfCircleWidth = 5;
		var scrollPos = halfScreenWidth + halfModalWidth;// + halfCircleWidth;
		$(".graphModal").css("left", x - halfScreenWidth).css("marginLeft", halfScreenWidth);
		$("#graph").animate({scrollLeft: x + halfModalWidth - halfScreenWidth}, 600);
	},
	retrieveRepo: function (username, repoName) {
		var update = this.updateCommitsGraph;
		OAuth.login(function (error, authData) {
			if (error) {
				console.log("Login Failed!", error);
				update(error);
			} else {
				//console.log("Authenticated successfully with payload:", authData);
				var helper = new GitHubHelper({token: authData.github.accessToken});
				helper.getAllCommitsInRepo(username, repoName, update);
			}
		});
	},
	updateCommitsGraph: function (error, commits) {
		if (error) {
			this.setState({
				repoError: ErrorHelper.parse(error)
			});
		} else {
			this.setState({
				repoError: null,
				commits: commits,
				activeForm: false
			});
		}
	},
	/**
	 * Returns the clicked commit. Pass this method to the CommitsGraph
	 * @param  {Object} commit The commit node clicked on
	 * @param  {Number} commit.x The x position of the node
	 * @param  {Number} commit.y The y position of the node
	 * @param  {String} commit.sha The sha of the commit associated with the node
	 * @param  {Object} commit.commit The commit object associated with the node
	 */
	handleCommitsClick: function (commit) {
		this.setMessageState(commit.sha, commit.commit);
		this.setState({
			repoError: null
		});
		this.showInfo(commit.x, commit.y);
		$(".graphModal__circle").attr("cy", commit.y + 41);
	},
	render: function () {
		var graph = null;
		if (this.state.commits) {
			graph = <CommitsGraph
					commits={this.state.commits || []}
					onClick={this.handleCommitsClick}
					selected={this.state.selectedSha}
					orientation='horizontal'
					x_step={40}
					y_step={40} />;
		} else {
			graph = <svg></svg>;
		}
		return (
			<div>
				<span className={"octicon octicon-search searchIcon" + (this.state.activeForm ? " searchIcon_active" : "")} onClick={this.toggleForm}></span><commit_msg>fix circle height<commit_after>var React = require('react');
var OAuth = require('../helpers/OAuthHelper');
var ErrorHelper = require('../helpers/ErrorHelper');
var GitHubHelper = require('../helpers/GitHubHelper');
var CommitsGraph = require('react-commits-graph');
var localCommits = require('../local/commits.json');
var RepoForm = require('./RepoForm');
var MessageView = require('./MessageView');

var localCommits = require('../local/commits.json');

var Container = React.createClass({
	getInitialState: function () {
		return {
			commits: localCommits,
			selectedSha: null,
			selectedCommit: null,
			activeMessage: false
		};
	},
	componentDidMount: function() {
		// Toggle the search modal
		$(".searchIcon").on("click", this.onSearchClick);
		$(document).click(this.onDocumentClick);
	},
	componentWillUnmount: function() {
		$(".searchIcon").unbind("click");
		$(document).unbind("click");
	},
	onSearchClick: function (e) {
		$(".searchIcon").toggleClass("searchIcon_active");
		$(".searchModal").toggleClass("searchModal_active");
	},
	onDocumentClick: function (event) {
		/* close search modal when clicking off of the element */
        if($(event.target).parents(".searchModal").length == 0
           && !$(event.target).hasClass("searchIcon")
           && !$(event.target).hasClass("searchModal")) {

            $(".searchModal").removeClass("searchModal_active");
            $(".searchIcon").removeClass("searchIcon_active");
        }
       if($(event.target).parents(".graphModal").length == 0
            && !$(event.target).is('[class^="commits-graph-branch-"]')
            && !$(event.target).hasClass("graphModal")) {
        	this.setMessageState();
        }
	},
	toggleForm: function () {
		this.setState({
			activeForm: !this.state.activeForm
		});
	},
	setMessageState: function (sha, commit) {
		sha = sha || null;
		commit = commit || null;
		this.setState({
			selectedSha: sha,
			selectedCommit: commit,
			activeMessage: sha !== null && commit !== null
        });
	},
	showInfo: function(x, y) {
		//if we clicked a node, get the position of the clicked commit node
		var halfScreenWidth = $(window).width() / 2;
		var halfModalWidth = $(".graphModal").width() / 2;
		var halfCircleWidth = 5;
		var scrollPos = halfScreenWidth + halfModalWidth;// + halfCircleWidth;
		$(".graphModal").css("left", x - halfScreenWidth).css("marginLeft", halfScreenWidth);
		$("#graph").animate({scrollLeft: x + halfModalWidth - halfScreenWidth}, 600);
	},
	retrieveRepo: function (username, repoName) {
		var update = this.updateCommitsGraph;
		OAuth.login(function (error, authData) {
			if (error) {
				console.log("Login Failed!", error);
				update(error);
			} else {
				//console.log("Authenticated successfully with payload:", authData);
				var helper = new GitHubHelper({token: authData.github.accessToken});
				helper.getAllCommitsInRepo(username, repoName, update);
			}
		});
	},
	updateCommitsGraph: function (error, commits) {
		if (error) {
			this.setState({
				repoError: ErrorHelper.parse(error)
			});
		} else {
			this.setState({
				repoError: null,
				commits: commits,
				activeForm: false
			});
		}
	},
	/**
	 * Returns the clicked commit. Pass this method to the CommitsGraph
	 * @param  {Object} commit The commit node clicked on
	 * @param  {Number} commit.x The x position of the node
	 * @param  {Number} commit.y The y position of the node
	 * @param  {String} commit.sha The sha of the commit associated with the node
	 * @param  {Object} commit.commit The commit object associated with the node
	 */
	handleCommitsClick: function (commit) {
		this.setMessageState(commit.sha, commit.commit);
		this.setState({
			repoError: null
		});
		this.showInfo(commit.x, commit.y);
		$(".graphModal__circle").attr("cy", commit.y - 14);
	},
	render: function () {
		var graph = null;
		if (this.state.commits) {
			graph = <CommitsGraph
					commits={this.state.commits || []}
					onClick={this.handleCommitsClick}
					selected={this.state.selectedSha}
					orientation='horizontal'
					x_step={40}
					y_step={40} />;
		} else {
			graph = <svg></svg>;
		}
		return (
			<div>
				<span className={"octicon octicon-search searchIcon" + (this.state.activeForm ? " searchIcon_active" : "")} onClick={this.toggleForm}></span>
{'fraction_non_alphanumeric': 0.16266044340723454, 'fraction_numerical': 0.003267211201866978, 'mean_word_length': 3.7458471760797343, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, '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': '7643247', 'n_tokens_mistral': 2916, 'n_tokens_neox': 2631, 'n_words': 587}