Merge pull request #3527 from Vizzuality/feature/recent-imagery-bands…

…-filter feature/recent-imagery-bands-filter
wri · Jul 25, 2018 · 1905304 · 1905304
2 parents 53e47e1 + d8a5b38
commit 1905304
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 63 deletions.
diff --git a/app/javascript/data/bands.json b/app/javascript/data/bands.json
@@ -0,0 +1,10 @@
+[
+  {
+    "label": "Natural color",
+    "value": 0
+  },
+  {
+    "label": "Vegetation Health",
+    "value": "[B8,B11,B4]"
+  }
+]
diff --git a/...ap/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-component.js b/...ap/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-component.js
@@ -11,6 +11,7 @@ import NoContent from 'components/ui/no-content';
 import RecentImageryThumbnail from 'pages/map/recent-imagery/components/recent-imagery-thumbnail';
 
 import WEEKS from 'data/weeks.json';
+import BANDS from 'data/bands.json';
 import draggerIcon from 'assets/icons/dragger.svg';
 import closeIcon from 'assets/icons/close.svg';
 import RecentImageryDrag from './recent-imagery-settings-drag';
@@ -34,7 +35,8 @@ class RecentImagerySettings extends PureComponent {
         selectedTileSource,
         date,
         weeks,
-        clouds
+        clouds,
+        bands
       },
       isDragging,
       connectDragSource,
@@ -115,55 +117,67 @@ class RecentImagerySettings extends PureComponent {
           />
         </div>
         <div className="c-recent-imagery-settings__thumbnails">
-          {tiles.length >= 1 && (
-            <div>
+          {tiles.length >= 1 && [
+            <div
+              key="thumbnails-header"
+              className="c-recent-imagery-settings__thumbnails__header"
+            >
               <div className="c-recent-imagery-settings__thumbnails__description">
                 {this.state.thumbnailsDescription ||
                   (selectedTile && selectedTile.description)}
               </div>
-              <Carousel
-                settings={{
-                  slidesToShow: thumbsToShow,
-                  infinite: false,
-                  centerMode: false,
-                  centerPadding: '20px',
-                  dots: false,
-                  arrows: tiles.length > thumbsToShow,
-                  responsive: [
-                    {
-                      breakpoint: 620,
-                      settings: {
-                        slidesToShow: thumbsToShow - 2
-                      }
+              <Dropdown
+                theme="theme-dropdown-button"
+                value={bands}
+                options={BANDS}
+                onChange={option =>
+                  setRecentImagerySettings({ bands: option.value })
+                }
+              />
+            </div>,
+            <Carousel
+              key="thumbnails-carousel"
+              settings={{
+                slidesToShow: thumbsToShow,
+                infinite: false,
+                centerMode: false,
+                centerPadding: '20px',
+                dots: false,
+                arrows: tiles.length > thumbsToShow,
+                responsive: [
+                  {
+                    breakpoint: 620,
+                    settings: {
+                      slidesToShow: thumbsToShow - 2
                     }
-                  ]
-                }}
-              >
-                {tiles.map((tile, i) => (
-                  <div key={`recent-imagery-thumb-${tile.id}`}>
-                    <RecentImageryThumbnail
-                      id={i}
-                      tile={tile}
-                      selected={selectedTileSource === tile.id}
-                      handleClick={() => {
-                        setRecentImagerySettings({
-                          selectedTileSource: tile.id
-                        });
-                      }}
-                      handleMouseEnter={() => {
-                        this.setState({
-                          thumbnailsDescription: tile.description
-                        });
-                      }}
-                      handleMouseLeave={() => {
-                        this.setState({ thumbnailsDescription: null });
-                      }}
-                    />
-                  </div>
-                ))}
-              </Carousel>
-            </div>
-          )}
+                  }
+                ]
+              }}
+            >
+              {tiles.map((tile, i) => (
+                <div key={`recent-imagery-thumb-${tile.id}`}>
+                  <RecentImageryThumbnail
+                    id={i}
+                    tile={tile}
+                    selected={selectedTileSource === tile.id}
+                    handleClick={() => {
+                      setRecentImagerySettings({
+                        selectedTileSource: tile.id
+                      });
+                    }}
+                    handleMouseEnter={() => {
+                      this.setState({
+                        thumbnailsDescription: tile.description
+                      });
+                    }}
+                    handleMouseLeave={() => {
+                      this.setState({ thumbnailsDescription: null });
+                    }}
+                  />
+                </div>
+              ))}
+            </Carousel>
+          ]}
           {tiles.length < 1 && (
             <NoContent
               className="c-recent-imagery-settings__empty-thumbnails"

diff --git a/...map/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-styles.scss b/...map/recent-imagery/components/recent-imagery-settings/recent-imagery-settings-styles.scss
@@ -106,17 +106,31 @@
     border-top: 1px solid rgba(#9e9e9e, 0.3);
     z-index: 1;
 
-    &__description {
-      padding-left: rem(22px);
+    &__header {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 rem(22px);
       margin-bottom: rem(18px);
+      z-index: 2;
+
+      .theme-dropdown-button .container {
+        max-width: rem(140px);
+      }
+    }
+
+    &__description {
       font-size: 12px;
       font-weight: 500;
       line-height: 13px;
       color: $slate;
     }
 
     .c-carousel {
+      position: relative;
       margin: 0;
+      z-index: 1;
 
       .slick-slide {
         padding: 0 rem(5.5px);

diff --git a/app/javascript/pages/map/recent-imagery/recent-imagery-actions.js b/app/javascript/pages/map/recent-imagery/recent-imagery-actions.js
@@ -58,12 +58,12 @@ const getMoreTiles = createThunkAction(
       this.getMoreTilesSource.cancel();
     }
     this.getMoreTilesSource = CancelToken.source();
-    const { sources, dataStatus } = params;
+    const { sources, dataStatus, bands } = params;
 
     axios
       .all([
-        getTiles({ sources, token: this.getMoreTilesSource.token }),
-        getThumbs({ sources, token: this.getMoreTilesSource.token })
+        getTiles({ sources, token: this.getMoreTilesSource.token, bands }),
+        getThumbs({ sources, token: this.getMoreTilesSource.token, bands })
       ])
       .then(
         axios.spread((getTilesResponse, getThumbsResponse) => {

diff --git a/app/javascript/pages/map/recent-imagery/recent-imagery-reducers.js b/app/javascript/pages/map/recent-imagery/recent-imagery-reducers.js
@@ -21,7 +21,8 @@ export const initialState = {
     selectedTileSource: null,
     date: null,
     weeks: 13,
-    clouds: 25
+    clouds: 25,
+    bands: 0
   }
 };
 

diff --git a/app/javascript/pages/map/recent-imagery/recent-imagery.js b/app/javascript/pages/map/recent-imagery/recent-imagery.js
@@ -100,13 +100,15 @@ class RecentImageryContainer extends PureComponent {
     if (
       (active && active !== this.props.active) ||
       !isEqual(settings.date, this.props.settings.date) ||
-      !isEqual(settings.weeks, this.props.settings.weeks)
+      !isEqual(settings.weeks, this.props.settings.weeks) ||
+      !isEqual(settings.bands, this.props.settings.bands)
     ) {
       getData({
         latitude: map.getCenter().lng(),
         longitude: map.getCenter().lat(),
         start: dates.start,
-        end: dates.end
+        end: dates.end,
+        bands: settings.bands
       });
     }
     if (!active && active !== this.props.active) {
@@ -134,15 +136,15 @@ class RecentImageryContainer extends PureComponent {
         dataStatus.requestFails !== this.props.dataStatus.requestFails ||
         isNewTile)
     ) {
-      getMoreTiles({ sources, dataStatus });
+      getMoreTiles({ sources, dataStatus, bands: settings.bands });
     }
   }
 
   setEvents() {
     const { map } = this.middleView;
 
     this.mapIdleEvent = map.addListener('idle', () => {
-      const { visible, dates, getData } = this.props;
+      const { visible, dates, settings, getData } = this.props;
       if (visible) {
         const needNewTile = !google.maps.geometry.poly.containsLocation(
           map.getCenter(),
@@ -153,7 +155,8 @@ class RecentImageryContainer extends PureComponent {
             latitude: map.getCenter().lng(),
             longitude: map.getCenter().lat(),
             start: dates.start,
-            end: dates.end
+            end: dates.end,
+            bands: settings.bands
           });
         }
       }

diff --git a/app/javascript/services/recent-imagery.js b/app/javascript/services/recent-imagery.js
@@ -4,28 +4,38 @@ const REQUEST_URL = `${process.env.GFW_API}`;
 
 const QUERIES = {
   recentTiles:
-    '/recent-tiles?lat={latitude}&lon={longitude}&start={start}&end={end}',
+    '/recent-tiles?lat={latitude}&lon={longitude}&start={start}&end={end}&bands={bands}',
   tiles: '/recent-tiles/tiles',
   thumbs: '/recent-tiles/thumbs'
 };
 
-export const getRecentTiles = ({ latitude, longitude, start, end, token }) => {
+export const getRecentTiles = ({
+  latitude,
+  longitude,
+  start,
+  end,
+  bands,
+  token
+}) => {
   const url = `${REQUEST_URL}${QUERIES.recentTiles}`
     .replace('{latitude}', latitude)
     .replace('{longitude}', longitude)
     .replace('{start}', start)
-    .replace('{end}', end);
+    .replace('{end}', end)
+    .replace('{bands}', bands || '');
   return axios.get(url, { cancelToken: token });
 };
 
-export const getTiles = ({ sources, token }) =>
+export const getTiles = ({ sources, token, bands }) =>
   axios.post(`${REQUEST_URL}${QUERIES.tiles}`, {
     source_data: sources,
-    cancelToken: token
+    cancelToken: token,
+    bands
   });
 
-export const getThumbs = ({ sources, token }) =>
+export const getThumbs = ({ sources, token, bands }) =>
   axios.post(`${REQUEST_URL}${QUERIES.thumbs}`, {
     source_data: sources,
-    cancelToken: token
+    cancelToken: token,
+    bands
   });