From a172fb89136d1b9fa408b74c03fafc1fc1396885 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Sandvik?= Date: Tue, 21 May 2019 14:36:42 +0200 Subject: [PATCH 1/5] Year select for EE layers --- src/components/earthengine/Collection.js | 104 +++++++++++++++++------ src/epics/earthEngine.js | 3 + 2 files changed, 82 insertions(+), 25 deletions(-) diff --git a/src/components/earthengine/Collection.js b/src/components/earthengine/Collection.js index 88b0b7bc5..91a3633ab 100644 --- a/src/components/earthengine/Collection.js +++ b/src/components/earthengine/Collection.js @@ -18,6 +18,17 @@ const collectionFilters = { ], }; +const styles = { + year: { + width: '35%', + paddingRight: 16, + boxSizing: 'border-box', + }, + period: { + width: '65%', + }, +}; + export class CollectionSelect extends Component { static propTypes = { id: PropTypes.string.isRequired, @@ -30,6 +41,11 @@ export class CollectionSelect extends Component { style: PropTypes.object, }; + state = { + years: null, + year: null, + }; + componentDidMount() { const { id, collections, loadEarthEngineCollection } = this.props; @@ -38,20 +54,70 @@ export class CollectionSelect extends Component { } } + componentDidUpdate(prevProps) { + const { id, collections } = this.props; + + if (id && collections[id] !== prevProps.collections[id]) { + const years = collections[id] + .filter(item => item.year) + .map(item => item.year); + + if (years.length) { + const yearItems = [...new Set(years)].map(year => ({ + id: year, + name: year.toString(), + })); + + this.setState({ + years: yearItems, + year: yearItems[0].id, + }); + } + } + } + render() { - const { - id, - filter, - label, - collections, - onChange, - style, - errorText, - } = this.props; - - const items = collections[id]; + const { id, filter, label, collections, style, errorText } = this.props; + + const { years, year } = this.state; + + const items = year + ? collections[id].filter(item => item.year === year) + : collections[id]; + const value = filter && filter[0].arguments[1]; + return ( +
+ {years && ( + + )} + +
+ ); + } + + onYearChange = year => { + this.setState({ year: year.id }); + this.props.onChange(null, null); + }; + + onPeriodChange = period => { + const { id, onChange } = this.props; const collectionFilter = collectionFilters[id] || (index => [ @@ -61,20 +127,8 @@ export class CollectionSelect extends Component { }, ]); - return ( - - onChange(period.name, collectionFilter(period.id)) - } - style={style} - errorText={!value && errorText ? errorText : null} - /> - ); - } + onChange(period.name, collectionFilter(period.id)); + }; } export default connect( diff --git a/src/epics/earthEngine.js b/src/epics/earthEngine.js index 8e7451117..5340b447f 100644 --- a/src/epics/earthEngine.js +++ b/src/epics/earthEngine.js @@ -68,6 +68,9 @@ const collections = { resolve( data.features.map(f => ({ id: f.id, + year: new Date( + f.properties['system:time_start'] + ).getFullYear(), name: formatStartEndDate( f.properties['system:time_start'], f.properties['system:time_end'] - 7200001 From 5f3ee347b78a7ae69b1a31c5b558560398753499 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Sandvik?= Date: Tue, 21 May 2019 15:01:31 +0200 Subject: [PATCH 2/5] Read year som saved EE layer --- src/components/earthengine/Collection.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/components/earthengine/Collection.js b/src/components/earthengine/Collection.js index 91a3633ab..401badbe0 100644 --- a/src/components/earthengine/Collection.js +++ b/src/components/earthengine/Collection.js @@ -55,23 +55,24 @@ export class CollectionSelect extends Component { } componentDidUpdate(prevProps) { - const { id, collections } = this.props; + const { id, filter, collections } = this.props; if (id && collections[id] !== prevProps.collections[id]) { - const years = collections[id] + const yearItems = collections[id] .filter(item => item.year) .map(item => item.year); - if (years.length) { - const yearItems = [...new Set(years)].map(year => ({ + if (yearItems.length) { + const years = [...new Set(yearItems)].map(year => ({ id: year, name: year.toString(), })); - this.setState({ - years: yearItems, - year: yearItems[0].id, - }); + const year = filter + ? Number(filter[0].arguments[1].substring(0, 4)) + : years[0].id; + + this.setState({ years, year }); } } } From 2567dc157d39dee38f78d839a28ba5306780f772 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Sandvik?= Date: Tue, 21 May 2019 15:08:32 +0200 Subject: [PATCH 3/5] Year select for EE temperature --- src/components/earthengine/Collection.js | 4 +++- src/epics/earthEngine.js | 3 +++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/earthengine/Collection.js b/src/components/earthengine/Collection.js index 401badbe0..8448b9a03 100644 --- a/src/components/earthengine/Collection.js +++ b/src/components/earthengine/Collection.js @@ -63,11 +63,13 @@ export class CollectionSelect extends Component { .map(item => item.year); if (yearItems.length) { + // Get unique years const years = [...new Set(yearItems)].map(year => ({ id: year, name: year.toString(), })); + // Get year from saved filter or select the most recent const year = filter ? Number(filter[0].arguments[1].substring(0, 4)) : years[0].id; @@ -105,7 +107,7 @@ export class CollectionSelect extends Component { items={items} value={value} onChange={this.onPeriodChange} - style={styles.period} + style={years && styles.period} errorText={!value && errorText ? errorText : null} /> diff --git a/src/epics/earthEngine.js b/src/epics/earthEngine.js index 5340b447f..7120350d2 100644 --- a/src/epics/earthEngine.js +++ b/src/epics/earthEngine.js @@ -93,6 +93,9 @@ const collections = { resolve( data.features.map(f => ({ id: f.id, + year: new Date( + f.properties['system:time_start'] + ).getFullYear(), name: formatStartEndDate( f.properties['system:time_start'], f.properties['system:time_end'] - 7200001 From 2a0b6c693b719196641c158c2418ccbcd04fee4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Sandvik?= Date: Tue, 21 May 2019 15:23:46 +0200 Subject: [PATCH 4/5] Don't include year in EE period dropdown if year select is shown --- src/epics/earthEngine.js | 12 ++++++++---- src/util/time.js | 15 +++++++++------ 2 files changed, 17 insertions(+), 10 deletions(-) diff --git a/src/epics/earthEngine.js b/src/epics/earthEngine.js index 7120350d2..538995407 100644 --- a/src/epics/earthEngine.js +++ b/src/epics/earthEngine.js @@ -73,8 +73,10 @@ const collections = { ).getFullYear(), name: formatStartEndDate( f.properties['system:time_start'], - f.properties['system:time_end'] - 7200001 - ), // Minus 2 hrs to end the day before + f.properties['system:time_end'] - 7200001, // Minus 2 hrs to end the day before + null, + false + ), })) ) ); @@ -98,8 +100,10 @@ const collections = { ).getFullYear(), name: formatStartEndDate( f.properties['system:time_start'], - f.properties['system:time_end'] - 7200001 - ), // Minus 2 hrs to end the day before + f.properties['system:time_end'] - 7200001, // Minus 2 hrs to end the day before + null, + false + ), })) ) ); diff --git a/src/util/time.js b/src/util/time.js index 96e6fd58d..459ac861f 100644 --- a/src/util/time.js +++ b/src/util/time.js @@ -51,29 +51,32 @@ export const hasIntlSupport = * Formats a date string or timestamp to the default display format: 13 Aug 2018 (en locale) * @param {String} dateString * @param {String} locale + * @param {Boolean} showYear * @returns {String} */ -export const formatLocaleDate = (dateString, locale) => +export const formatLocaleDate = (dateString, locale, showYear = true) => hasIntlSupport ? new Intl.DateTimeFormat(locale || i18n.language || DEFAULT_LOCALE, { - year: 'numeric', + year: showYear ? 'numeric' : undefined, month: 'short', day: 'numeric', }).format(toDate(dateString)) : fallbackDateFormat(dateString); /** - * Formats a date range + * Formats a date range without showing year * @param {String|Number} startDate * @param {String|Number} endDate * @param {String} locale + * @param {Boolean} showYear * @returns {String} */ -export const formatStartEndDate = (startDate, endDate, locale) => { +export const formatStartEndDate = (startDate, endDate, locale, showYear) => { const loc = locale || i18n.language || DEFAULT_LOCALE; - return `${formatLocaleDate(startDate, loc)} - ${formatLocaleDate( + return `${formatLocaleDate(startDate, loc, showYear)} - ${formatLocaleDate( endDate, - locale + locale, + showYear )}`; }; From 2826749a817af67e0c072d5f10f8b1e6c4460092 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Sandvik?= Date: Tue, 21 May 2019 15:29:31 +0200 Subject: [PATCH 5/5] Removed comment --- src/util/time.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/util/time.js b/src/util/time.js index 459ac861f..db077b754 100644 --- a/src/util/time.js +++ b/src/util/time.js @@ -64,7 +64,7 @@ export const formatLocaleDate = (dateString, locale, showYear = true) => : fallbackDateFormat(dateString); /** - * Formats a date range without showing year + * Formats a date range * @param {String|Number} startDate * @param {String|Number} endDate * @param {String} locale