Merge pull request #3690 from Vizzuality/fix/recent-imagery-tile-updates

Fix/issues with recent imagery fetches

Author: edbrett

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);
         });
     }
   }

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,14 +23,19 @@ const getMapUrlState = state =>
   state.location && state.location.query && state.location.query.map;
 
 export const getMapSettings = createSelector([getMapUrlState], urlState => ({
-  ...mapInitialState.settings,
+  ...(mapInitialState && {
+    ...mapInitialState.settings
+  }),
   ...urlState
 }));
 
 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,

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,

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 {