Merge pull request #3381 from Vizzuality/fix/thumbnails-issues

Fix/thumbnails issues

Author: edbrett

app/javascript/pages/map/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-component.js

@@ -31,7 +31,7 @@ class RecentImagerySettings extends PureComponent {
       settings: {
         styles,
         thumbsToShow,
-        selectedTileIndex,
+        selectedTileSource,
         date,
         weeks,
         clouds
@@ -115,18 +115,18 @@ class RecentImagerySettings extends PureComponent {
           />
         </div>
         <div className="c-recent-imagery-settings__thumbnails">
-          {tiles.length >= 2 && (
+          {tiles.length >= 1 && (
             <div>
               <div className="c-recent-imagery-settings__thumbnails__description">
-                {this.state.thumbnailsDescription || selectedTile.description}
+                {this.state.thumbnailsDescription ||
+                  (selectedTile && selectedTile.description)}
               </div>
               <Carousel
                 settings={{
                   slidesToShow: thumbsToShow,
-                  infinite: tiles.length > thumbsToShow,
-                  centerMode: tiles.length > thumbsToShow,
+                  infinite: false,
+                  centerMode: false,
                   centerPadding: '20px',
-                  draggable: false,
                   dots: false,
                   arrows: tiles.length > thumbsToShow,
                   responsive: [
@@ -144,9 +144,11 @@ class RecentImagerySettings extends PureComponent {
                     <RecentImageryThumbnail
                       id={i}
                       tile={tile}
-                      selected={selectedTileIndex === i}
+                      selected={selectedTileSource === tile.id}
                       handleClick={() => {
-                        setRecentImagerySettings({ selectedTileIndex: i });
+                        setRecentImagerySettings({
+                          selectedTileSource: tile.id
+                        });
                       }}
                       handleMouseEnter={() => {
                         this.setState({
@@ -162,7 +164,7 @@ class RecentImagerySettings extends PureComponent {
               </Carousel>
             </div>
           )}
-          {tiles.length < 2 && (
+          {tiles.length < 1 && (
             <NoContent
               className="c-recent-imagery-settings__empty-thumbnails"
               message="We can't find additional images for the selection"
@@ -175,7 +177,7 @@ class RecentImagerySettings extends PureComponent {
 }
 
 RecentImagerySettings.propTypes = {
-  selectedTile: PropTypes.object.isRequired,
+  selectedTile: PropTypes.object,
   tiles: PropTypes.array.isRequired,
   settings: PropTypes.object.isRequired,
   isDragging: PropTypes.bool.isRequired,

app/javascript/pages/map/recent-imagery/recent-imagery-actions.js

@@ -24,7 +24,11 @@ const getData = createThunkAction('getData', params => dispatch => {
   getRecentTiles({ ...params, token: this.getDataSource.token })
     .then(response => {
       if (response.data.data.tiles) {
-        dispatch(setRecentImagerySettings({ selectedTileIndex: 0 }));
+        dispatch(
+          setRecentImagerySettings({
+            selectedTileSource: response.data.data.tiles[0].attributes.source
+          })
+        );
         dispatch(
           setRecentImageryData({
             data: response.data.data,
@@ -76,15 +80,19 @@ const getMoreTiles = createThunkAction(
                   data.tiles,
                   d => d.attributes.source === item.source_id
                 );
-                data.tiles[index].attributes.tile_url = item.tile_url;
+                if (index !== -1) {
+                  data.tiles[index].attributes.tile_url = item.tile_url;
+                }
               }
             });
             thumbs.forEach(item => {
               const index = findIndex(
                 data.tiles,
                 d => d.attributes.source === item.source
               );
-              data.tiles[index].attributes.thumbnail_url = item.thumbnail_url;
+              if (index !== -1) {
+                data.tiles[index].attributes.thumbnail_url = item.thumbnail_url;
+              }
             });
 
             dispatch(

app/javascript/pages/map/recent-imagery/recent-imagery-reducers.js

@@ -18,7 +18,7 @@ export const initialState = {
     layerSlug: 'sentinel_tiles',
     minZoom: 9,
     thumbsToShow: 5,
-    selectedTileIndex: 0,
+    selectedTileSource: null,
     date: null,
     weeks: 13,
     clouds: 25

app/javascript/pages/map/recent-imagery/recent-imagery-selectors.js

@@ -1,7 +1,9 @@
 import { createSelector } from 'reselect';
 import isEmpty from 'lodash/isEmpty';
+import findIndex from 'lodash/findIndex';
 import moment from 'moment';
 import { format } from 'd3-format';
+import { sortByKey } from 'utils/data';
 
 const getData = state => state.data || null;
 const getBbox = state => state.bbox || null;
@@ -13,9 +15,16 @@ const getFilteredData = createSelector(
   (data, settings) => {
     if (!data || isEmpty(data)) return null;
 
-    const { clouds } = settings;
-    return data.filter(
-      item => Math.round(item.attributes.cloud_score) <= clouds
+    const { clouds, selectedTileSource } = settings;
+    const dataFiltered = data.filter(
+      item =>
+        Math.round(item.attributes.cloud_score) <= clouds ||
+        item.attributes.source === selectedTileSource
+    );
+    return sortByKey(
+      dataFiltered.map(item => item.attributes),
+      'date_time',
+      true
     );
   }
 );
@@ -24,17 +33,17 @@ export const getAllTiles = createSelector([getFilteredData], data => {
   if (!data || isEmpty(data)) return [];
 
   return data.map(item => ({
-    id: item.attributes.source,
-    url: item.attributes.tile_url,
-    thumbnail: item.attributes.thumbnail_url,
-    cloudScore: item.attributes.cloud_score,
-    dateTime: item.attributes.date_time,
-    instrument: item.attributes.instrument,
-    description: `${moment(item.attributes.date_time)
+    id: item.source,
+    url: item.tile_url,
+    thumbnail: item.thumbnail_url,
+    cloudScore: item.cloud_score,
+    dateTime: item.date_time,
+    instrument: item.instrument,
+    description: `${moment(item.date_time)
       .format('DD MMM YYYY')
-      .toUpperCase()} - ${format('.0f')(
-      item.attributes.cloud_score
-    )}% cloud coverage - ${item.attributes.instrument}`
+      .toUpperCase()} - ${format('.0f')(item.cloud_score)}% cloud coverage - ${
+      item.instrument
+    }`
   }));
 });
 
@@ -43,8 +52,16 @@ export const getTile = createSelector(
   (data, settings) => {
     if (!data || isEmpty(data)) return null;
 
-    const { selectedTileIndex } = settings;
-    const selectedTile = data[selectedTileIndex].attributes;
+    const { selectedTileSource } = settings;
+    const index = findIndex(
+      data,
+      d => d.attributes.source === selectedTileSource
+    );
+    if (index === -1) {
+      return null;
+    }
+
+    const selectedTile = data[index].attributes;
     return {
       url: selectedTile.tile_url,
       cloudScore: selectedTile.cloud_score,

app/javascript/pages/map/recent-imagery/recent-imagery-styles.scss

@@ -49,28 +49,14 @@
 }
 
 .recent-imagery-infowindow {
+  padding: rem(15px);
   font-family: $font-family-1;
-  padding: rem(10px);
-  margin: rem(3px) rem(3px) rem(5px) rem(3px);
   font-size: 12px;
-  color: $slate;
-  background-color: $tip;
-  box-shadow: 0 1px 3px 0 rgba($slate, 0.25);
+  color: $white;
+  background: rgba($black, 0.6);
 
-  &__arrow {
-    position: absolute;
-    left: rem(-18px);
-    right: 0;
-    top: rem(37px);
-    width: 0;
-    height: 0;
-    margin: auto;
-    border-left: 7px solid $tip;
-    border-right: none;
-    border-top: 7px solid $slate-light;
-    transform-origin: 0 0;
-    transform: rotate(-45deg);
-    border-top-color: $tip;
-    box-shadow: -2px 2px 2px 0 rgba($slate, 0.1);
+  &__hook {
+    margin-top: rem(5px);
+    font-size: 11px;
   }
 }

app/javascript/pages/map/recent-imagery/recent-imagery.js

@@ -4,7 +4,6 @@ import { createElement, PureComponent } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
-import { getPolygonCenter } from 'utils/map';
 
 import actions from './recent-imagery-actions';
 import reducers, { initialState } from './recent-imagery-reducers';
@@ -228,7 +227,6 @@ class RecentImageryContainer extends PureComponent {
       fillColor: 'transparent',
       strokeWeight: 0
     });
-    const polygonCenter = getPolygonCenter(this.boundsPolygon);
 
     this.addBoundsPolygonEvents();
     this.boundsPolygon.setMap(map);
@@ -240,10 +238,9 @@ class RecentImageryContainer extends PureComponent {
       content: `
         <div class="recent-imagery-infowindow">
           ${description}
-          <div class="recent-imagery-infowindow__arrow"></div>
+          <div class="recent-imagery-infowindow__hook">Click to refine image</div>
         </div>
-      `,
-      position: polygonCenter.top
+      `
     });
   }
 
@@ -266,6 +263,9 @@ class RecentImageryContainer extends PureComponent {
       });
       this.boundsPolygonInfowindow.close();
     });
+    google.maps.event.addListener(this.boundsPolygon, 'mousemove', e => {
+      this.boundsPolygonInfowindow.setPosition(e.latLng);
+    });
     google.maps.event.addListener(this.boundsPolygon, 'click', () => {
       clickTimeout = setTimeout(() => {
         setRecentImageryShowSettings(true);