Merge pull request #4971 from wri/feat/FLAG-1314

FLAG-1314: remove Planet option from satellite imagery dropdown

Author: wri7tno

components/map/basemaps.js

@@ -28,21 +28,6 @@ export default {
     labelsGroup: 'labels-dark',
     mapStyle: 'mapbox://styles/resourcewatch/ckgrx1ak30npt19o10xxkeqli',
   },
-  planet: {
-    label: 'Planet satellite imagery',
-    description: 'Monthly high resolution basemaps (tropics)',
-    value: 'planet',
-    color: '#131620',
-    baseStyle: false,
-    caveat: '(tropics)',
-    image: satelliteImage,
-    hasSettings: true,
-    infoModal: 'planet_basemap',
-    basemapGroup: 'basemap-dark',
-    labelsGroup: 'labels-dark',
-    mapStyle: 'mapbox://styles/resourcewatch/ckgrx1ak30npt19o10xxkeqli',
-    url: `${PROXIES.PLANET_TILES}/{name}/gmap/{z}/{x}/{y}/?proc={color}`,
-  },
   satellite: {
     label: 'Google satellite imagery',
     description: 'Highest resolution imagery 1-3 years old (global)',

components/satellite-basemaps/component.jsx

@@ -22,20 +22,12 @@ function handleTitle(basemap) {
         <span className="label">{basemap?.label || ''}</span>
         {basemap?.caveat && <span className="caveat">{basemap.caveat}</span>}
       </span>
-      {basemap?.value === 'planet' &&
-        basemap?.active &&
-        basemap?.planetPeriod?.period && (
-          <span className="title-active-value">
-            {basemap.planetPeriod.period}
-          </span>
-        )}
     </>
   );
 }
 
 const SatelliteBasemaps = ({
   className,
-  planetPeriods,
   landsatYear,
   basemaps,
   activeBasemap,
@@ -76,11 +68,6 @@ const SatelliteBasemaps = ({
     setOpen(!activeBasemap?.active);
     setMapBasemap({
       value: activeBasemap?.active ? 'default' : activeBasemap?.value,
-      ...(activeBasemap?.value === 'planet' && {
-        color: '',
-        name: planetPeriods[planetPeriods.length - 1].value,
-        imageType: planetPeriods[planetPeriods.length - 1].imageType,
-      }),
       ...(activeBasemap?.value === 'landsat' && {
         year: landsatYear,
       }),
@@ -101,11 +88,6 @@ const SatelliteBasemaps = ({
     e.stopPropagation();
     setMapBasemap({
       value,
-      ...(value === 'planet' && {
-        color: '',
-        name: planetPeriods[planetPeriods.length - 1].value,
-        imageType: planetPeriods[planetPeriods.length - 1].imageType,
-      }),
       ...(value === 'landsat' && {
         year: landsatYear,
       }),
@@ -224,7 +206,6 @@ const SatelliteBasemaps = ({
 SatelliteBasemaps.propTypes = {
   className: PropTypes.string,
   isTropics: PropTypes.bool,
-  planetPeriods: PropTypes.arrayOf(PropTypes.object),
   landsatYear: PropTypes.number.isRequired,
   setMainMapSettings: PropTypes.func.isRequired,
   setMapBasemap: PropTypes.func.isRequired,

components/satellite-basemaps/planet-selectors.js

@@ -4,8 +4,6 @@ import find from 'lodash/find';
 
 import { getBasemaps, getBasemap } from 'components/map/selectors';
 
-import { getPeriodOptions } from './settings/planet-menu/selectors';
-
 import { getSelectedYear } from './settings/landsat-menu/selectors';
 
 const getLocation = (state) => state.location && state.location;
@@ -33,18 +31,10 @@ export const getActiveDynoBasemap = createSelector(
     getDynoBasemaps,
     getBasemap,
     isTropics,
-    getPeriodOptions,
     getMapBasemapSettings,
     getBasemaps,
   ],
-  (
-    location,
-    basemaps,
-    activeBasemap,
-    tropics,
-    planetPeriods,
-    mapBasemapSettings
-  ) => {
+  (location, basemaps, activeBasemap, tropics, mapBasemapSettings) => {
     const isDashboard = location.pathname.includes('/dashboards/');
     if (!basemaps || !activeBasemap) {
       return null;
@@ -55,17 +45,10 @@ export const getActiveDynoBasemap = createSelector(
     if (dynoBasemap) {
       return {
         ...dynoBasemap,
-        ...(isDashboard &&
-          dynoBasemap.value !== 'planet' && {
-            ...defaultBasemap,
-          }),
+        ...(isDashboard && {
+          ...defaultBasemap,
+        }),
         settings: mapBasemapSettings,
-        ...(dynoBasemap &&
-          dynoBasemap?.value === 'planet' && {
-            planetPeriod: planetPeriods?.length
-              ? planetPeriods.find((p) => p.value === mapBasemapSettings.name)
-              : null,
-          }),
         active: true,
       };
     }
@@ -74,9 +57,6 @@ export const getActiveDynoBasemap = createSelector(
       return {
         ...defaultBasemap,
         settings: mapBasemapSettings,
-        ...(defaultBasemap.value === 'planet' && {
-          planetPeriod: planetPeriods?.length ? planetPeriods[0] : null,
-        }),
         active: false,
       };
     }
@@ -87,7 +67,6 @@ export const getActiveDynoBasemap = createSelector(
 
 export const getBasemapProps = createStructuredSelector({
   activeBasemap: getActiveDynoBasemap,
-  planetPeriods: getPeriodOptions,
   landsatYear: getSelectedYear,
   basemaps: getDynoBasemaps,
   isTropics,

components/satellite-basemaps/selectors.js

@@ -1,7 +1,4 @@
 import { createStructuredSelector, createSelector } from 'reselect';
-import isEmpty from 'lodash/isEmpty';
-
-import { getPlanetBasemaps } from '../../planet-selectors';
 
 const COLOR_OPTIONS = [
   {
@@ -16,80 +13,9 @@ const COLOR_OPTIONS = [
   },
 ];
 
-const selectBasemapSelected = (state) => {
-  return state?.map?.settings?.basemap?.name;
-};
 const selectBasemapColorSelected = (state) =>
   state?.map?.settings?.basemap?.color;
 
-const selectBasemapImageTypeSelected = (state) =>
-  state?.map?.settings?.basemap?.color === '' ? 'visual' : 'analytic';
-
-const serializePlanetTile = ({
-  label,
-  period,
-  name,
-  imageType,
-  sortOrder,
-  year,
-  proc,
-} = {}) => ({
-  label,
-  period,
-  year,
-  imageType,
-  sortOrder,
-  proc,
-  value: name,
-});
-
-// Returns the opposite default option, used when switching image types
-const getDefaultPeriodOption = createSelector(
-  [selectBasemapImageTypeSelected, getPlanetBasemaps],
-  (selected, planetBasemaps) => {
-    if (isEmpty(planetBasemaps)) return null;
-    const oppositeImage = selected === 'visual' ? 'analytic' : 'visual';
-    const periodOptions = planetBasemaps
-      .map((tile) => serializePlanetTile(tile))
-      .filter((bm) => bm.imageType === oppositeImage);
-    return periodOptions[0];
-  }
-);
-
-export const getPeriodOptions = createSelector(
-  [selectBasemapImageTypeSelected, getPlanetBasemaps],
-  (selected, planetBasemaps) => {
-    if (isEmpty(planetBasemaps)) return null;
-    const periodOptions = planetBasemaps
-      ?.map((tile) => serializePlanetTile(tile))
-      .filter((bm) => bm.imageType === selected)
-      .reverse();
-    return periodOptions;
-  }
-);
-
-export const getPeriodSelected = createSelector(
-  [selectBasemapSelected, getPeriodOptions],
-  (selected, periodOptions) => {
-    if (isEmpty(periodOptions)) return null;
-    const period = periodOptions?.find((r) => r.value === selected);
-    if (!period) return periodOptions[periodOptions.length - 1];
-    return period;
-  }
-);
-
-export const getPeriodSelectedIndex = createSelector(
-  [getPeriodOptions, selectBasemapSelected],
-  (periodOptions, selected) => {
-    if (isEmpty(periodOptions)) return null;
-    const periodIndex = periodOptions?.findIndex((r) => r.value === selected);
-    if (periodIndex === -1) {
-      return periodOptions.length - 1;
-    }
-    return periodIndex;
-  }
-);
-
 export const getColorOptions = createSelector([], () => COLOR_OPTIONS);
 
 export const getColorSelected = createSelector(
@@ -100,10 +26,6 @@ export const getColorSelected = createSelector(
 );
 
 export default createStructuredSelector({
-  periodOptions: getPeriodOptions,
-  periodSelected: getPeriodSelected,
-  periodSelectedIndex: getPeriodSelectedIndex,
   colorOptions: getColorOptions,
   colorSelected: getColorSelected,
-  defaultPeriodOption: getDefaultPeriodOption,
 });

components/satellite-basemaps/settings/planet-menu/selectors.js

@@ -8,7 +8,6 @@ import lowerCase from 'lodash/lowerCase';
 import Button from 'components/ui/button';
 import Icon from 'components/ui/icon';
 import Tip from 'components/ui/tip';
-import SatelliteBasemaps from 'components/satellite-basemaps';
 
 import linkIcon from 'assets/icons/link.svg?sprite';
 
@@ -142,9 +141,6 @@ class MiniLegend extends PureComponent {
             </Button>
           </div>
         </div>
-        <div className="satellite-basemaps-wrapper">
-          <SatelliteBasemaps />
-        </div>
       </div>
     ) : null;
   }