<commit_before>import * as React from 'react'
import * as ReactDOM from 'react-dom'
import * as Bootstrap from 'react-bootstrap'

type paDict = { [id:string]:string };

interface DictViewerProps {
	dict: paDict
	onUpdate: (key:string, value:string) => any
	onDelete: (key:string) => any
	onAdd: (key:string, value:string) => any
}

export class DictViewer extends React.Component<DictViewerProps,{currentSearch:string}> {
	state = { currentSearch: '' };

	public get filteredData() {
		return Object.keys(this.props.dict)
			.map(key => ({ key, value: this.props.dict[key] }))
			.filter(entry => entry.key.includes(this.state.currentSearch) || entry.value.includes(this.state.currentSearch))
	}
	public render() {
		return (
			<div>
				<DictAdd onAdd={this.props.onAdd} />
				<Search onChange={(value) => this.setState({currentSearch:value})} />
				<Bootstrap.Table condensed>
				<colgroup>
					<col style={{ width: '50%', textAlign: 'center' }}></col>
					<col style={{ width: '50%', textAlign: 'center' }}></col>
					<col style={{ width: '62px'}}></col>
					<col style={{ width: '60px'}}></col>
				</colgroup>
				<thead>
				<tr>
					<th>Japanese</th>
					<th>English</th>
					<th></th>
					<th></th>
				</tr>
				</thead>
				<tbody>
				{this.filteredData.map(entry => 
					<DictEntry 
						key={entry.key}
						japanese={entry.key} 
						translation={entry.value}
						onUpdate={this.props.onUpdate}
						onDelete={this.props.onDelete}
					/>
				)}
				</tbody>
				</Bootstrap.Table>
			</div>
		);
	}
}

let FormControl: React.ComponentClass<any> = (Bootstrap as any).FormControl;
let FormGroup: React.ComponentClass<any> = (Bootstrap as any).FormGroup;
let Form: React.ComponentClass<any> = (Bootstrap as any).Form;

export class Search extends React.Component<{ onChange: (search: string) => any }, { current: string }> {
	state = { current: '' };

	public handleChange(event:React.FormEvent) {
		let newValue = (event.target as any).value;
		this.setState({ current: newValue });
		this.props.onChange(newValue);
	}
	public render() {
		return <Bootstrap.Well>
				<FormControl type="text"
					placeholder="search" 
					value={this.state.current} 
					onChange={this.handleChange.bind(this)} 
				/>
			</Bootstrap.Well>
	}
}

export class DictAdd extends React.Component<{onAdd:(key:string,value:string)=>any},void> {
	public handleAdd(){
		let japaneseInput: any = ReactDOM.findDOMNode(this.refs['japanese']);
		let translationInput: any = ReactDOM.findDOMNode(this.refs['translation']);
		this.props.onAdd(japaneseInput.value, translationInput.value)
	}
	public render() {
		return <Bootstrap.Panel header="Add Translation">
			<Form inline>
					<FormControl type="text" placeholder="japanese" ref="japanese" />
					<FormControl type="text" placeholder="translation" ref="translation" />
					<Bootstrap.Button onClick={this.handleAdd.bind(this)}>add</Bootstrap.Button>
			</Form>
		</Bootstrap.Panel>
	}
}

interface DictEntryProps {
	japanese:string
	translation:string
	onUpdate:(key:string, value:string) => any
	onDelete:(key:string) => any
}

export class DictEntry extends React.Component<DictEntryProps,{editOpen:boolean}> {
	state = { editOpen: false };<commit_msg>These aren't actually useful on their own yet and shouldn't be exported from this module<commit_after>import * as React from 'react'
import * as ReactDOM from 'react-dom'
import * as Bootstrap from 'react-bootstrap'

type paDict = { [id:string]:string };

interface DictViewerProps {
	dict: paDict
	onUpdate: (key:string, value:string) => any
	onDelete: (key:string) => any
	onAdd: (key:string, value:string) => any
}

export class DictViewer extends React.Component<DictViewerProps,{currentSearch:string}> {
	state = { currentSearch: '' };

	public get filteredData() {
		return Object.keys(this.props.dict)
			.map(key => ({ key, value: this.props.dict[key] }))
			.filter(entry => entry.key.includes(this.state.currentSearch) || entry.value.includes(this.state.currentSearch))
	}
	public render() {
		return (
			<div>
				<DictAdd onAdd={this.props.onAdd} />
				<Search onChange={(value) => this.setState({currentSearch:value})} />
				<Bootstrap.Table condensed>
				<colgroup>
					<col style={{ width: '50%', textAlign: 'center' }}></col>
					<col style={{ width: '50%', textAlign: 'center' }}></col>
					<col style={{ width: '62px'}}></col>
					<col style={{ width: '60px'}}></col>
				</colgroup>
				<thead>
				<tr>
					<th>Japanese</th>
					<th>English</th>
					<th></th>
					<th></th>
				</tr>
				</thead>
				<tbody>
				{this.filteredData.map(entry => 
					<DictEntry 
						key={entry.key}
						japanese={entry.key} 
						translation={entry.value}
						onUpdate={this.props.onUpdate}
						onDelete={this.props.onDelete}
					/>
				)}
				</tbody>
				</Bootstrap.Table>
			</div>
		);
	}
}

let FormControl: React.ComponentClass<any> = (Bootstrap as any).FormControl;
let FormGroup: React.ComponentClass<any> = (Bootstrap as any).FormGroup;
let Form: React.ComponentClass<any> = (Bootstrap as any).Form;

class Search extends React.Component<{ onChange: (search: string) => any }, { current: string }> {
	state = { current: '' };

	public handleChange(event:React.FormEvent) {
		let newValue = (event.target as any).value;
		this.setState({ current: newValue });
		this.props.onChange(newValue);
	}
	public render() {
		return <Bootstrap.Well>
				<FormControl type="text"
					placeholder="search" 
					value={this.state.current} 
					onChange={this.handleChange.bind(this)} 
				/>
			</Bootstrap.Well>
	}
}

class DictAdd extends React.Component<{onAdd:(key:string,value:string)=>any},void> {
	public handleAdd(){
		let japaneseInput: any = ReactDOM.findDOMNode(this.refs['japanese']);
		let translationInput: any = ReactDOM.findDOMNode(this.refs['translation']);
		this.props.onAdd(japaneseInput.value, translationInput.value)
	}
	public render() {
		return <Bootstrap.Panel header="Add Translation">
			<Form inline>
					<FormControl type="text" placeholder="japanese" ref="japanese" />
					<FormControl type="text" placeholder="translation" ref="translation" />
					<Bootstrap.Button onClick={this.handleAdd.bind(this)}>add</Bootstrap.Button>
			</Form>
		</Bootstrap.Panel>
	}
}

interface DictEntryProps {
	japanese:string
	translation:string
	onUpdate:(key:string, value:string) => any
	onDelete:(key:string) => any
}

class DictEntry extends React.Component<DictEntryProps,{editOpen:boolean}> {
	state = { editOpen: false };
{'fraction_non_alphanumeric': 0.16307028360049322, 'fraction_numerical': 0.002466091245376079, 'mean_word_length': 4.093406593406593, 'pattern_counts': {'":': 0, '<': 101, '<?xml version=': 0, '>': 123, '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': '7561957', 'n_tokens_mistral': 2505, 'n_tokens_neox': 2151, 'n_words': 435}