diff --git a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-actions.js b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-actions.js index 5f7b405eca..d87c1c7093 100644 --- a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-actions.js +++ b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-actions.js @@ -66,7 +66,7 @@ export const getRecentImageryData = createThunkAction( }) .catch(error => { dispatch(setRecentImageryLoading(false)); - console.info(error && error.response); + console.info(error); }); } } diff --git a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-selectors.js b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-selectors.js index 849a1f0a06..109193e624 100644 --- a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-selectors.js +++ b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery-selectors.js @@ -2,6 +2,7 @@ import { createSelector, createStructuredSelector } from 'reselect'; import isEmpty from 'lodash/isEmpty'; import sortBy from 'lodash/sortBy'; import moment from 'moment'; +import { checkLocationInsideBbox } from 'utils/geoms'; import { initialState as mapInitialState } from 'components/maps/map/reducers'; import { initialState } from './recent-imagery-reducers'; @@ -22,7 +23,9 @@ const getMapUrlState = state => state.location && state.location.query && state.location.query.map; export const getMapSettings = createSelector([getMapUrlState], urlState => ({ - ...mapInitialState.settings, + ...(mapInitialState && { + ...mapInitialState.settings + }), ...urlState })); @@ -30,6 +33,9 @@ export const getRecentImagerySettings = createSelector( [getRecentUrlState], urlState => ({ ...initialState.settings, + ...(initialState && { + ...initialState.settings + }), ...urlState }) ); @@ -62,43 +68,38 @@ export const getActive = createSelector( } ); -export const getFilteredData = createSelector( +export const getFilteredTiles = createSelector( [getData, getRecentImagerySettings], (data, settings) => { if (isEmpty(data)) return null; const { clouds } = settings; - return data - .filter(item => Math.round(item.cloud_score) <= clouds) - .map(item => item); + return data.filter(item => item.cloud_score <= clouds).map(t => ({ + id: t.source, + url: t.tile_url, + thumbnail: t.thumbnail_url, + cloudScore: t.cloud_score, + dateTime: t.date_time, + instrument: t.instrument, + bbox: t.bbox + })); } ); -export const getTiles = createSelector([getFilteredData], data => { +export const getTiles = createSelector([getFilteredTiles], data => { if (!data || isEmpty(data)) return []; - - return sortBy( - data.map(item => ({ - id: item.source, - url: item.tile_url, - thumbnail: item.thumbnail_url, - cloudScore: item.cloud_score, - dateTime: item.date_time, - instrument: item.instrument, - bbox: item.bbox - })), - d => new Date(d.dateTime) - ).reverse(); + return sortBy(data, d => new Date(d.dateTime)).reverse(); }); export const getActiveTile = createSelector( - [getTiles, getRecentImagerySettings], + [getFilteredTiles, getRecentImagerySettings], (tiles, settings) => { if (isEmpty(tiles)) return null; const { selected, selectedIndex } = settings; const selectedTileById = tiles.find(t => t.id === selected); if (selectedTileById) return selectedTileById; const selectedTileByIndex = selectedIndex && tiles[selectedIndex]; + return selectedTileByIndex || tiles[0]; } ); @@ -126,6 +127,14 @@ export const getTileBounds = createSelector([getActiveTile], activeTile => { return activeTile.bbox.geometry.coordinates; }); +export const getPositionInsideTile = createSelector( + [getTileBounds, getPosition], + (bounds, position) => + (bounds + ? checkLocationInsideBbox([position.lat, position.lng], bounds) + : true) +); + export const getSources = createSelector( [getData, getDataStatus], (data, dataStatus) => { @@ -174,7 +183,7 @@ export const getRecentImageryProps = createStructuredSelector({ dataStatus: getDataStatus, tiles: getTiles, activeTile: getActiveTile, - bounds: getTileBounds, + positionInsideTile: getPositionInsideTile, location: getLocation, // url props datasets: getActiveDatasetsFromState, diff --git a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery.js b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery.js index 40188ef509..b2a004d9da 100644 --- a/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery.js +++ b/app/javascript/components/maps/main-map/components/recent-imagery/recent-imagery.js @@ -3,7 +3,6 @@ import { connect } from 'react-redux'; import PropTypes from 'prop-types'; import isEqual from 'lodash/isEqual'; import debounce from 'lodash/debounce'; -import { checkLocationInsideBbox } from 'utils/geoms'; import { CancelToken } from 'axios'; import reducerRegistry from 'app/registry'; @@ -48,12 +47,12 @@ class RecentImageryContainer extends PureComponent { active, dataStatus, activeTile, - bounds, sources, dates, settings, getRecentImageryData, getMoreTiles, + positionInsideTile, position, loadingMoreTiles, resetRecentImageryData @@ -63,15 +62,13 @@ class RecentImageryContainer extends PureComponent { activeTile && !!activeTile.url && (!prevProps.activeTile || activeTile.url !== prevProps.activeTile.url); - const positionInsideTile = bounds - ? checkLocationInsideBbox([position.lat, position.lng], bounds) - : true; // get data if activated or new props if ( active && (active !== prevProps.active || - !positionInsideTile || + (!positionInsideTile && + !isEqual(positionInsideTile, prevProps.positionInsideTile)) || !isEqual(settings.date, prevProps.settings.date) || !isEqual(settings.weeks, prevProps.settings.weeks) || !isEqual(settings.bands, prevProps.settings.bands)) @@ -90,8 +87,15 @@ class RecentImageryContainer extends PureComponent { token: this.getDataSource.token }); } + // get the rest of the tiles - if (dataStatus && !dataStatus.haveAllData && !loadingMoreTiles && active) { + if ( + dataStatus && + !dataStatus.haveAllData && + !loadingMoreTiles && + active && + activeTile + ) { getMoreTiles({ sources, dataStatus, @@ -159,7 +163,7 @@ RecentImageryContainer.propTypes = { active: PropTypes.bool, dataStatus: PropTypes.object, activeTile: PropTypes.object, - bounds: PropTypes.array, + positionInsideTile: PropTypes.bool, sources: PropTypes.array, dates: PropTypes.object, settings: PropTypes.object, diff --git a/app/javascript/components/ui/datepicker/datepicker-styles.scss b/app/javascript/components/ui/datepicker/datepicker-styles.scss index 87feb68f0c..8a38a9a5f1 100644 --- a/app/javascript/components/ui/datepicker/datepicker-styles.scss +++ b/app/javascript/components/ui/datepicker/datepicker-styles.scss @@ -12,6 +12,10 @@ font-size: 12px; cursor: pointer; color: $slate; + + &:focus { + outline: none; + } } .react-datepicker__day-name {