<commit_before>import {Buttons} from 'widget/buttons'
import {Layout} from 'widget/layout'
import {MapAreaLayout} from '../mapAreaLayout'
import {compose} from 'compose'
import {connect} from 'store'
import {get$} from 'http-client'
import {map} from 'rxjs/operators'
import {withMapAreaContext} from '../mapAreaContext'
import {withMapContext} from '../mapContext'
import ButtonSelect from 'widget/buttonSelect'
import PropTypes from 'prop-types'
import React from 'react'
import WMTSLayer from '../wmtsLayer'
import _ from 'lodash'
import moment from 'moment'

const defaultLayerConfig = {
    bands: 'rgb'
}

class _PlanetImageLayerSource extends React.Component {
    state = {}

    render() {
        const {map} = this.props
        return (
            <MapAreaLayout
                layer={this.createLayer()}
                form={this.renderForm()}
                map={map}
            />
        )
    }

    createLayer() {
        const {layerConfig: {bands, urlTemplate} = defaultLayerConfig, map} = this.props
        return urlTemplate
            ? this.selectedHasCir()
                ? new WMTSLayer({map, urlTemplate: `${urlTemplate}&proc=${bands}`})
                : new WMTSLayer({map, urlTemplate: `${urlTemplate}`})
            : null
    }

    renderForm() {
        return (
            <Layout>
                {this.renderMosaics()}
                {this.selectedHasCir() ? this.renderBands() : null}
            </Layout>
        )
    }

    renderBands() {
        const {layerConfig: {bands}} = this.props
        return (
            <Buttons
                label={'Bands'}
                selected={bands}
                onChange={bands => this.setBands(bands)}
                options={[
                    {value: 'rgb', label: 'RGB'},
                    {value: 'cir', label: 'CIR'}
                ]}/>
        )
    }

    selectedHasCir() {
        const {layerConfig: {urlTemplate}} = this.props
        const apiKey = this.getApiKey()
        const {[apiKey]: mosaics = []} = this.state
        const {hasCir = false} = mosaics.find(({urlTemplate: t}) => t === urlTemplate) || {}
        return hasCir
    }

    renderMosaics() {
        const {layerConfig: {urlTemplate}} = this.props
        const apiKey = this.getApiKey()
        const {[apiKey]: mosaics = []} = this.state

        const mosaicOptions = mosaics.map(({startDate, endDate, urlTemplate}) => {
            const start = moment(startDate, 'YYYY-MM-DD')
            const end = moment(endDate, 'YYYY-MM-DD')
            const months = end.diff(start, 'months')
            const duration = moment.duration(months, 'months').humanize()
            const date = start.format('MMM YYYY')
            return ({
                value: urlTemplate,
                label: `${date} (${duration})`
            })
        })
        const selectedOption = mosaicOptions.find(({value}) => value === urlTemplate)
        return (
            <ButtonSelect
                options={mosaicOptions}
                label={selectedOption && selectedOption.label}
                disabled={!mosaics.length}
                onSelect={({value}) => this.selectUrlTemplate(value)}
            />
        )
    }

    componentDidMount() {
        this.update()
    }

    componentDidUpdate(prevProps) {
        const prevApiKey = this.getApiKey(prevProps)
        const apiKey = this.getApiKey()
        if (apiKey !== prevApiKey) {
            const {[apiKey]: mosaics} = this.state<commit_msg>Used combo box for planet mosaic selection.<commit_after>import {Buttons} from 'widget/buttons'
import {Combo} from 'widget/combo'
import {Item} from 'widget/item'
import {Layout} from 'widget/layout'
import {MapAreaLayout} from '../mapAreaLayout'
import {compose} from 'compose'
import {connect} from 'store'
import {get$} from 'http-client'
import {map} from 'rxjs/operators'
import {withMapAreaContext} from '../mapAreaContext'
import {withMapContext} from '../mapContext'
import PropTypes from 'prop-types'
import React from 'react'
import WMTSLayer from '../wmtsLayer'
import _ from 'lodash'
import moment from 'moment'
import styles from '../mapControls.module.css'

const defaultLayerConfig = {
    bands: 'rgb'
}

class _PlanetImageLayerSource extends React.Component {
    state = {}

    render() {
        const {map} = this.props
        return (
            <MapAreaLayout
                layer={this.createLayer()}
                form={this.renderForm()}
                map={map}
            />
        )
    }

    createLayer() {
        const {layerConfig: {bands, urlTemplate} = defaultLayerConfig, map} = this.props
        return urlTemplate
            ? this.selectedHasCir()
                ? new WMTSLayer({map, urlTemplate: `${urlTemplate}&proc=${bands}`})
                : new WMTSLayer({map, urlTemplate: `${urlTemplate}`})
            : null
    }

    renderForm() {
        return (
            <Layout>
                {this.renderMosaics()}
                {this.selectedHasCir() ? this.renderBands() : null}
            </Layout>
        )
    }

    renderBands() {
        const {layerConfig: {bands}} = this.props
        return (
            <Buttons
                label={'Bands'}
                selected={bands}
                onChange={bands => this.setBands(bands)}
                options={[
                    {value: 'rgb', label: 'RGB'},
                    {value: 'cir', label: 'CIR'}
                ]}/>
        )
    }

    selectedHasCir() {
        const {layerConfig: {urlTemplate}} = this.props
        const apiKey = this.getApiKey()
        const {[apiKey]: mosaics = []} = this.state
        const {hasCir = false} = mosaics.find(({urlTemplate: t}) => t === urlTemplate) || {}
        return hasCir
    }

    renderMosaics() {
        const {layerConfig: {urlTemplate}} = this.props
        const apiKey = this.getApiKey()
        const {[apiKey]: mosaics = []} = this.state

        const options = mosaics.map(({startDate, endDate, urlTemplate}) => {
            const start = moment(startDate, 'YYYY-MM-DD')
            const end = moment(endDate, 'YYYY-MM-DD')
            const months = end.diff(start, 'months')
            const duration = moment.duration(months, 'months').humanize()
            const date = start.format('MMMM YYYY')
            return ({
                value: urlTemplate,
                label: `${date} - ${duration}`,
                searchableText: `${date} ${duration}`,
                render: () =>
                    <div className={styles.imageLayerSourceOption}>
                        <Item title={duration} description={date}/>
                    </div>
            })
        })
        const selectedOption = options.find(({value}) => value === urlTemplate) || {}
        return (
            <Combo
                label={'Composite'}
                options={options}
                placeholder={selectedOption.label}
                value={selectedOption.value}
                disabled={!mosaics.length}
                onChange={({value}) => this.selectUrlTemplate(value)}
            />
        )
    }

    componentDidMount() {
        this.update()
    }

    componentDidUpdate(prevProps) {
        const prevApiKey = this.getApiKey(prevProps)
        const apiKey = this.getApiKey()
        if (apiKey !== prevApiKey) {
            const {[apiKey]: mosaics} = this.state
{'fraction_non_alphanumeric': 0.13119415109666938, 'fraction_numerical': 0.0, 'mean_word_length': 1.9151539068666141, 'pattern_counts': {'":': 0, '<': 16, '<?xml version=': 0, '>': 27, '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': '7253105', 'n_tokens_mistral': 2076, 'n_tokens_neox': 2024, 'n_words': 460}