<commit_before>import React from 'react';
import Modal, {closeStyle} from 'simple-react-modal';
import connectToStores from 'alt-utils/lib/connectToStores';
import {Link} from 'react-router';
import Tooltip from 'rc-tooltip';
import classnames from 'classnames';
import { findItemById } from 'utils/store-utils';

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import Configurator from './configurator';
import Uploader from './uploader';
import ProjectForm from './shared/forms/project-form';

import StatusStore from 'stores/status-store';
import BrowsersStore from 'stores/browsers-store';
import ProjectsStore from 'stores/projects-store';

import LoginActions from 'actions/login-actions';
import StatusActions from 'actions/status-actions';
import BrowserActions from 'actions/browsers-actions';
import ProjectActions from 'actions/projects-actions';

@connectToStores
export default class Navbar extends React.Component {
	constructor(props) {
		super();
		this.state = { showModal: false };
	}
	static contextTypes = {
		router: React.PropTypes.func
	}
	static getStores() {
		return [
			StatusStore,
			ProjectsStore,
			BrowsersStore,
		];
	}
	static getPropsFromStores() {
		return {
			status: StatusStore.getState(),
			browserScope: BrowsersStore.getState().currentScope,
			browserscopes: BrowsersStore.getState().browserscopes,
			agents: BrowsersStore.getState().agents,
			projects: ProjectsStore.getState().projects,
			currentProjectId: ProjectsStore.getState().currentProjectId
		}
	}
	componentDidMount() {
		ProjectActions.fetch();
		ProjectActions.get('576922ea9fbb95093996d29b');
	}
	retry() {
		StatusActions.retry();
	}
	logout() {
		LoginActions.logout();
	}
	selectBrowserScope(scope) {
		BrowserActions.selectScope(scope);
	}
	showModal(){
		BrowserActions.fetchConfig();
		this.setState({showModal: true})
	}
	closeModal(){
		this.setState({showModal: false})
	}
	closeProjectModal(){
		this.setState({showProjectModal: false})
	}
	handleTabSelect(index) {
		this.setState({tabIndex: index})
	}
	render() {
		let errorComponent;
		let retryComponent;
		let busyComponent;
		if (this.props.error) {
			if (this.props.retryData) {
				retryComponent = <li className="nav-list-item"><button onClick={this.retry} className="">Retry</button></li>;
			}
			errorComponent = (
				<p><strong>Network Error!</strong>{retryComponent}</p>);
		}
		// Prerender busy on server as not to lose markup state on client
		if (this.props.busy || !process.env.BROWSER) {
			busyComponent = <div className=""><i className="fa fa-refresh fa-spin"></i></div>;
		}
		return (
			<header className="header">
				<div className="header-content content-container">
					<nav className="navigation">
						<ul className="nav-list">
							<li className="nav-list-item">
								<Link to='app' className="link">Dashboard</Link>
							</li>
							<li className="nav-list-item">
								<button className="button button--yellow" onClick={() => this.setState({showProjectModal: true})}><span className="icon-add"></span>Add project</button>
								<Modal 
									transitionSpeed={250}
									className="modal"
									containerClassName={classnames('animate', 'modal-container', 'checked')}
									closeOnOuterClick={true}
									show={this.state.showProjectModal}
									onClose={this.closeProjectModal.bind(this)} >
									<div className="modal-head">
										<span>Add new project</span>
										<button className="icon-close button button--close" onClick={this.closeProjectModal.bind(this)}></button>
									</div>
									<ProjectForm onSend={this.closeProjectModal.bind(this)} />
								</Modal>
							</li>
							<li className="nav-list-item">
								<div className="toggle">
								{this.props.browserscopes && Object.keys(this.props.browserscopes).map(
									(item, key) => 
									<div key={key}
										className={classnames('toggle-button', this.props.browserScope == item ? 'active' : '')}
										onClick={this.selectBrowserScope.bind(this, item)}><span className={"icon-" + item}></span> {item}</div>
									)
								}
								</div>
							</li>
							<Tooltip 
								overlayClassName="tooltip--local"
								visible={this.state.showModal}
								placement="bottom"
								mouseEnterDelay={0}
								mouseLeaveDelay={0}
								destroyTooltipOnHide={true}
								overlay={
									<div className="modal-container modal-container--wide">
<commit_msg>added overlay for browser list<commit_after>import React from 'react';
import Modal, {closeStyle} from 'simple-react-modal';
import connectToStores from 'alt-utils/lib/connectToStores';
import {Link} from 'react-router';
import Tooltip from 'rc-tooltip';
import classnames from 'classnames';
import { findItemById } from 'utils/store-utils';

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import Configurator from './configurator';
import Uploader from './uploader';
import ProjectForm from './shared/forms/project-form';

import StatusStore from 'stores/status-store';
import BrowsersStore from 'stores/browsers-store';
import ProjectsStore from 'stores/projects-store';

import LoginActions from 'actions/login-actions';
import StatusActions from 'actions/status-actions';
import BrowserActions from 'actions/browsers-actions';
import ProjectActions from 'actions/projects-actions';

@connectToStores
export default class Navbar extends React.Component {
	constructor(props) {
		super();
		this.state = { showModal: false };
	}
	static contextTypes = {
		router: React.PropTypes.func
	}
	static getStores() {
		return [
			StatusStore,
			ProjectsStore,
			BrowsersStore,
		];
	}
	static getPropsFromStores() {
		return {
			status: StatusStore.getState(),
			browserScope: BrowsersStore.getState().currentScope,
			browserscopes: BrowsersStore.getState().browserscopes,
			agents: BrowsersStore.getState().agents,
			projects: ProjectsStore.getState().projects,
			currentProjectId: ProjectsStore.getState().currentProjectId
		}
	}
	componentDidMount() {
		ProjectActions.fetch();
		ProjectActions.get('576922ea9fbb95093996d29b');
	}
	retry() {
		StatusActions.retry();
	}
	logout() {
		LoginActions.logout();
	}
	selectBrowserScope(scope) {
		BrowserActions.selectScope(scope);
	}
	showModal(){
		BrowserActions.fetchConfig();
		this.setState({showModal: true})
	}
	showBrowserModal(){
		this.setState({showBrowserModal: true})
	}
	closeModal(){
		this.setState({showModal: false})
	}
	closeProjectModal(){
		this.setState({showProjectModal: false})
	}
	closeBrowserModal(){
		this.setState({showBrowserModal: false})
	}
	handleTabSelect(index) {
		this.setState({tabIndex: index})
	}
	render() {
		console.log(this.props.browserscopes);
		console.log(this.props.browserScope);
		let errorComponent;
		let retryComponent;
		let busyComponent;
		if (this.props.error) {
			if (this.props.retryData) {
				retryComponent = <li className="nav-list-item"><button onClick={this.retry} className="">Retry</button></li>;
			}
			errorComponent = (
				<p><strong>Network Error!</strong>{retryComponent}</p>);
		}
		// Prerender busy on server as not to lose markup state on client
		if (this.props.busy || !process.env.BROWSER) {
			busyComponent = <div className=""><i className="fa fa-refresh fa-spin"></i></div>;
		}
		return (
			<header className="header">
				<div className="header-content content-container">
					<nav className="navigation">
						<ul className="nav-list">
							<li className="nav-list-item">
								<Link to='app' className="link">Dashboard</Link>
							</li>
							<li className="nav-list-item">
								<button className="button button--yellow" onClick={() => this.setState({showProjectModal: true})}><span className="icon-add"></span>Add project</button>
								<Modal 
									transitionSpeed={250}
									className="modal"
									containerClassName={classnames('animate', 'modal-container', 'checked')}
									closeOnOuterClick={true}
									show={this.state.showProjectModal}
									onClose={this.closeProjectModal.bind(this)} >
									<div className="modal-head">
										<span>Add new project</span>
										<button className="icon-close button button--close" onClick={this.closeProjectModal.bind(this)}></button>
									</div>
									<ProjectForm onSend={this.closeProjectModal.bind(this)} />
								</Modal>
							</li>
							<Tooltip 
								overlayClassName="tooltip--local"
								visible={this.state.showBrowserModal}
								placement="bottom"
								mouseEnterDelay={0}
								mouseLeaveDelay={0}
								destroyTooltipOnHide={true}
								overlay={
									<div className="modal-container">


										<div className="modal-head">
											<span>Browser set</span>
											<button className="icon-close button button--close" onClick={this.closeBrowserModal.bind(this)}></button>
										</div>
										<div className="">
											{this.props.browserscopes[this.props.browserScope] && this.props.browserscopes[this.props.browserScope].browsers.map(
												(item, key) => 
												<div key={key}>
													{item.name} | {item.version} | {item.share}
												</div>
												)
											}
										</div>
									</div>
								}
							>
								<li 
									className={classnames('nav-list-item withOverlay', this.state.showBrowserModal ? 'active' : '')} 
									onClick={this.showBrowserModal.bind(this)}
								>
									Browsers
								</li>
					        </Tooltip>
							<li className="nav-list-item">
								<div className="toggle">
								{this.props.browserscopes && Object.keys(this.props.browserscopes).map(
									(item, key) => 
									<div key={key}
										className={classnames('toggle-button', this.props.browserScope == item ? 'active' : '')}
										onClick={this.selectBrowserScope.bind(this, item)}><span className={"icon-" + item}></span> {item}</div>
									)
								}
								</div>
							</li>
							<Tooltip 
								overlayClassName="tooltip--local"
								visible={this.state.showModal}
								placement="bottom"
								mouseEnterDelay={0}
								mouseLeaveDelay={0}
								destroyTooltipOnHide={true}
								overlay={
									<div className="modal-container modal-container--wide">

{'fraction_non_alphanumeric': 0.1431936402002159, 'fraction_numerical': 0.004514672686230248, 'mean_word_length': 3.428509343763581, 'pattern_counts': {'":': 0, '<': 109, '<?xml version=': 0, '>': 112, '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': '5798694', 'n_tokens_mistral': 4064, 'n_tokens_neox': 3061, 'n_words': 569}