<commit_before>import * as React from 'react'
import * as ReactDOM from 'react-dom'
import EditorBasicTab from './EditorBasicTab'
import EditorDataTab from './EditorDataTab'
import EditorAxisTab from './EditorAxisTab'
import EditorScatterTab from './EditorScatterTab'
import EditorStylingTab from './EditorStylingTab'
import EditorMapTab from './EditorMapTab'
import ChartConfig from '../charts/ChartConfig'
import {clone} from 'lodash'
import * as $ from 'jquery'
import ChartType from '../charts/ChartType'
import ChartView from '../charts/ChartView'
import ChartEditor, {ChartEditorProps} from './ChartEditor'
import SaveButtons from './SaveButtons'
import {observer} from 'mobx-react'

declare const App: any

@observer
export default class ChartEditorView extends React.Component<{ editor: ChartEditor }, undefined> {
    static bootstrap({ chartView, editorData }: { chartView: ChartView, editorData: any }) {
		const editor = new ChartEditor({ chart: chartView.chart, data: editorData })
		window.editor = editor
		ReactDOM.render(<ChartEditorView editor={editor}/>, document.getElementById("form-view"))
    }

    constructor(props: any) {
        super(props)
	}
	
	getChildContext() {
		return {
			editor: this.props.editor
		}
	}

	componentDidMount() {
		$('.nav-tabs').stickyTabs();
	}

	render() {
		const {editor} = this.props
		const {chart} = editor

		return <div className="form-wrapper-inner">
			<form method="POST" accept-charset="UTF-8"><input name="_method" type="hidden" value="PUT"/>
				<div className="nav-tabs-custom">
					<ul className="nav nav-tabs no-bullets">
						<li className="nav-item active">
							<a className="nav-link" href="#basic-tab" data-toggle="tab" aria-expanded="false">Basic</a>
						</li>
						<li className="nav-item">
							<a className="nav-link" href="#data-tab" data-toggle="tab" aria-expanded="false">Data</a>
						</li>
						<li className="nav-item">
							<a className="nav-link" href="#axis-tab" data-toggle="tab" aria-expanded="false">Axis</a>
						</li>
						<li className="nav-item">
							<a className="nav-link" href="#styling-tab" data-toggle="tab" aria-expanded="false">Styling</a>
						</li>
						{chart.type == ChartType.ScatterPlot && <li className="nav-item">
							<a className="nav-link" href="#scatter-tab" data-toggle="tab" aria-expanded="false">Scatter</a>
						</li>}
						{chart.hasMapTab && <li className="nav-item">
							<a className="nav-link" href="#map-tab" data-toggle="tab" aria-expanded="false">Map</a>
						</li>}
					</ul>
				</div>
				<div className="tab-content">
					<EditorBasicTab chart={chart}/>
					<EditorDataTab editor={editor}/>
					<EditorAxisTab chart={chart}/>
					<EditorStylingTab chart={chart}/>
					{chart.type == ChartType.ScatterPlot && <EditorScatterTab chart={chart}/>}
					{chart.hasMapTab && <EditorMapTab editor={editor}/>}
				</div>
				<SaveButtons editor={editor}/>
			</form>
		</div>
	}
}<commit_msg>Laoding indicator when saving chart<commit_after>import * as React from 'react'
import * as ReactDOM from 'react-dom'
import EditorBasicTab from './EditorBasicTab'
import EditorDataTab from './EditorDataTab'
import EditorAxisTab from './EditorAxisTab'
import EditorScatterTab from './EditorScatterTab'
import EditorStylingTab from './EditorStylingTab'
import EditorMapTab from './EditorMapTab'
import ChartConfig from '../charts/ChartConfig'
import {clone} from 'lodash'
import * as $ from 'jquery'
import ChartType from '../charts/ChartType'
import ChartView from '../charts/ChartView'
import ChartEditor, {ChartEditorProps} from './ChartEditor'
import SaveButtons from './SaveButtons'
import {observer} from 'mobx-react'

declare const App: any

class LoadingBlocker extends React.Component<{}, undefined> {
	render() {
		const style: any = {
			position: 'fixed',
			top: 0,
			left: 0,
			bottom: 0,
			right: 0,
			backgroundColor: 'black',
			opacity: 0.5,
			zIndex: 2100,
			display: 'flex',
			alignItems: 'center',
			justifyContent: 'center',
			fontSize: '36px',
			color: 'white'
		}
        return <div style={style}>
			<i className="fa fa-spinner fa-spin"/>
		</div>		
	}
}

@observer
export default class ChartEditorView extends React.Component<{ editor: ChartEditor }, undefined> {
    static bootstrap({ chartView, editorData }: { chartView: ChartView, editorData: any }) {
		const editor = new ChartEditor({ chart: chartView.chart, data: editorData })
		window.editor = editor
		ReactDOM.render(<ChartEditorView editor={editor}/>, document.getElementById("form-view"))
    }

    constructor(props: any) {
        super(props)
	}
	
	getChildContext() {
		return {
			editor: this.props.editor
		}
	}

	componentDidMount() {
		$('.nav-tabs').stickyTabs();
	}

	render() {
		const {editor} = this.props
		const {chart} = editor

		return <div className="form-wrapper-inner">
			{editor.currentRequest && <LoadingBlocker/>}
			<form method="POST" accept-charset="UTF-8"><input name="_method" type="hidden" value="PUT"/>
				<div className="nav-tabs-custom">
					<ul className="nav nav-tabs no-bullets">
						<li className="nav-item active">
							<a className="nav-link" href="#basic-tab" data-toggle="tab" aria-expanded="false">Basic</a>
						</li>
						<li className="nav-item">
							<a className="nav-link" href="#data-tab" data-toggle="tab" aria-expanded="false">Data</a>
						</li>
						<li className="nav-item">
							<a className="nav-link" href="#axis-tab" data-toggle="tab" aria-expanded="false">Axis</a>
						</li>
						<li className="nav-item">
							<a className="nav-link" href="#styling-tab" data-toggle="tab" aria-expanded="false">Styling</a>
						</li>
						{chart.type == ChartType.ScatterPlot && <li className="nav-item">
							<a className="nav-link" href="#scatter-tab" data-toggle="tab" aria-expanded="false">Scatter</a>
						</li>}
						{chart.hasMapTab && <li className="nav-item">
							<a className="nav-link" href="#map-tab" data-toggle="tab" aria-expanded="false">Map</a>
						</li>}
					</ul>
				</div>
				<div className="tab-content">
					<EditorBasicTab chart={chart}/>
					<EditorDataTab editor={editor}/>
					<EditorAxisTab chart={chart}/>
					<EditorStylingTab chart={chart}/>
					{chart.type == ChartType.ScatterPlot && <EditorScatterTab chart={chart}/>}
					{chart.hasMapTab && <EditorMapTab editor={editor}/>}
				</div>
				<SaveButtons editor={editor}/>
			</form>
		</div>
	}
}
{'fraction_non_alphanumeric': 0.16440492902823273, 'fraction_numerical': 0.0021837466853844955, 'mean_word_length': 3.8797564687975648, 'pattern_counts': {'":': 0, '<': 96, '<?xml version=': 0, '>': 96, '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': '5602101', 'n_tokens_mistral': 2407, 'n_tokens_neox': 2009, 'n_words': 467}