Feature/project-time-travel

package.json

@@ -50,6 +50,7 @@
     "@formatjs/intl-localematcher": "^0.5.4",
     "@mapbox/mapbox-gl-draw": "^1.3.0",
     "@mapbox/togeojson": "^0.16.1",
+    "@maplibre/maplibre-gl-compare": "^0.5.0",
     "@math.gl/web-mercator": "^3.5.3",
     "@mui/icons-material": "^5.16.13",
     "@mui/lab": "^5.0.0-alpha.77",
@@ -75,6 +76,7 @@
     "@types/react-gtm-module": "^2.0.1",
     "@types/react-lazyload": "^2.6.0",
     "@types/supercluster": "^7.1.0",
+    "@vannizhang/wayback-core": "^1.0.8",
     "@vercel/kv": "^1.0.1",
     "apexcharts": "^3.54.0",
     "connection-string": "^4.3.6",

public/assets/images/icons/FieldDataIcon.tsx

@@ -0,0 +1,22 @@
+import type { IconProps } from '../../../../src/features/common/types/common';
+
+const FieldDataIcon = ({ color }: IconProps) => {
+  return (
+    <svg viewBox="0 0 512 352" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M0 269.803V134.666C4.799 140.028 9.18723 145.718 14.6775 150.502C23.2937 158.012 32.7113 164.365 42.9205 169.718C52.8391 174.917 63.0683 179.422 73.7583 182.908C88.6061 187.76 103.845 191.043 119.384 193.045C129.964 194.412 140.574 195.173 151.264 195.163C252.213 195.134 353.162 195.144 454.112 195.153C465.733 195.153 477.355 195.134 488.987 195.211C496.321 195.259 502.542 197.772 507.241 203.365C510.928 207.736 511.99 212.867 511.99 218.297C512 253.783 512 289.259 511.99 324.745C511.99 327.345 511.9 329.944 511.75 332.534C511.118 343.547 501.591 352.01 490.119 351.923C481.202 351.856 472.296 351.904 463.379 351.961C462.257 351.961 461.976 351.673 461.976 350.623C462.016 340.38 462.006 330.146 461.996 319.903C461.996 313.404 457.348 307.821 450.685 306.242C444.113 304.682 437.13 307.628 433.974 313.241C432.381 316.09 432.06 319.162 432.06 322.3C432.08 331.783 432.11 341.256 432.17 350.739C432.17 351.682 431.87 351.971 430.878 351.961C421.55 351.913 412.213 351.904 402.885 351.904C400.381 351.904 400.361 351.933 400.361 349.468C400.341 340.226 400.341 330.984 400.331 321.751C400.321 309.871 400.461 297.991 400.251 286.111C400.08 276.59 390.402 270.149 380.904 272.922C375.694 274.443 370.364 279.709 370.405 287.295C370.505 308.418 370.445 329.54 370.495 350.662C370.495 351.769 370.104 351.99 369.042 351.99C359.504 351.942 349.966 351.942 340.428 351.942C338.625 351.942 338.615 351.981 338.595 350.171C338.565 346.734 338.545 343.287 338.535 339.85C338.535 332.967 338.735 326.084 338.485 319.21C338.134 309.688 327.875 303.344 318.567 306.685C312.376 308.909 308.739 314.232 308.749 321.01C308.769 330.368 308.779 339.735 308.779 349.093C308.779 351.913 308.759 351.894 305.874 351.894C296.546 351.904 287.209 351.942 277.881 351.961C277.611 351.961 277.34 351.875 277.019 351.827C276.999 351.326 276.959 350.883 276.959 350.45C276.949 341.891 276.929 333.333 276.929 324.774C276.929 312.211 276.959 299.657 276.959 287.093C276.959 280.046 272.261 274.116 265.568 272.701C258.284 271.16 251.411 274.337 248.356 280.691C247.194 283.108 246.993 285.688 247.003 288.306C247.003 309.072 247.003 329.829 247.023 350.594C247.023 351.403 247.103 352 245.831 351.99C236.043 351.942 226.254 351.961 216.466 351.99C215.494 351.99 214.923 351.827 215.033 350.768C215.073 350.373 215.003 349.969 215.003 349.574C215.043 339.937 214.933 330.291 215.163 320.654C215.394 310.555 205.806 303.97 196.448 306.29C189.676 307.975 185.307 313.684 185.307 320.866C185.307 330.782 185.307 340.707 185.348 350.623C185.348 351.711 185.027 351.981 183.935 351.971C171.111 351.846 158.277 351.884 145.453 351.615C138.8 351.48 132.138 351.018 125.525 350.334C115.837 349.333 106.279 347.523 96.8416 345.203C80.7314 341.246 65.082 336.096 50.4746 328.259C40.4158 322.868 31.0081 316.764 22.8328 308.909C15.1484 301.534 8.75642 293.361 4.64872 283.647C2.5047 278.592 0.831559 273.432 0.971822 267.877C0.99186 266.895 0.831559 265.913 0.761428 264.931C0.701315 264.931 0.651221 264.931 0.591108 264.931C0.390733 266.578 0.200376 268.195 0 269.803Z"
+        fill={color}
+      />
+      <path
+        d="M0 82.334C0.180338 83.7011 0.370695 85.0778 0.551033 86.4449C0.601127 86.4449 0.66124 86.4449 0.711334 86.4449C0.781465 85.4725 0.951785 84.4905 0.911709 83.5182C0.711334 78.6853 2.26425 74.199 3.9474 69.7898C6.95304 61.9051 11.5817 54.9157 17.3024 48.5714C24.3557 40.7541 32.4809 34.1402 41.5679 28.566C52.9192 21.6152 65.0219 16.2047 77.7257 11.9976C90.0188 7.92525 102.632 5.03709 115.436 2.95761C127.068 1.07067 138.82 0.127207 150.612 0.0213075C157.485 -0.0364559 164.358 -0.0364559 171.221 0.29087C180.368 0.724094 189.465 1.67719 198.512 3.15978C208.982 4.87343 219.311 7.12619 229.43 10.2069C236.513 12.3634 243.497 14.7895 250.309 17.7161C259.386 21.6152 268.063 26.14 276.188 31.6082C284.063 36.9128 291.076 43.1224 297.187 50.2946C302.167 56.1287 306.174 62.4923 308.949 69.5298C312.215 77.8381 313.548 86.4256 312.386 95.3019C311.143 104.785 307.497 113.363 302.167 121.411C296.306 130.249 288.691 137.402 280.095 143.717C267.391 153.056 253.305 159.881 238.327 165.109C224.401 169.961 210.094 173.282 195.477 175.506C180.619 177.769 165.681 178.77 150.673 178.269C140.654 177.942 130.665 177.133 120.696 175.853C109.024 174.351 97.603 171.848 86.3719 168.632C77.9061 166.216 69.6205 163.116 61.4853 159.775C49.8535 155 39.0632 148.733 29.2448 141.012C20.5185 134.148 13.2849 126.042 7.79461 116.578C4.53851 110.956 2.33438 104.929 1.13212 98.604C0.801503 96.8904 0.981841 95.0997 0.921728 93.3379C0.901691 92.9047 0.841578 92.4715 0.591108 92.0286C0.400751 93.5882 0.210394 95.1479 0.0200376 96.7171C0.0200376 91.9131 0.0200376 87.1188 0.0200376 82.3148L0 82.334ZM158.257 129.122C158.257 128.997 158.267 128.872 158.277 128.747C165.921 128.67 173.465 127.842 180.939 126.273C190.106 124.347 198.863 121.44 206.858 116.645C213.901 112.429 219.922 107.24 223.639 99.9615C225.904 95.5137 226.735 90.7867 226.074 85.8576C225.322 80.2449 222.688 75.4891 218.981 71.1761C216.075 67.7969 212.438 65.2842 208.781 62.7619C204.253 59.633 199.214 57.4092 194.054 55.5222C188.113 53.3465 181.951 51.8543 175.649 50.8434C168.266 49.6592 160.852 49.1875 153.408 49.4571C147.517 49.6689 141.626 49.9866 135.785 51.0552C129.172 52.2586 122.74 53.9819 116.559 56.4561C111.148 58.6222 106.029 61.3467 101.31 64.7932C97.8936 67.2963 94.8579 70.0786 92.3331 73.4C87.7445 79.4074 86.0113 86.1272 87.2937 93.4535C88.4859 100.241 92.3932 105.613 97.4928 110.234C102.883 115.115 109.125 118.783 115.967 121.44C123.972 124.549 132.198 126.937 140.844 127.717C146.645 128.246 152.446 128.651 158.247 129.113L158.257 129.122Z"
+        fill={color}
+      />
+      <path
+        d="M248.977 178.209C249.899 177.795 250.81 177.362 251.752 176.977C261.13 173.213 270.187 168.842 278.863 163.769C290.224 157.126 300.093 148.769 308.909 139.238C309.601 138.497 310.212 137.679 310.863 136.899C311.484 136.158 312.115 135.416 312.877 134.511V178.392H249.047C249.027 178.325 248.997 178.267 248.977 178.2V178.209Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default FieldDataIcon;

src/temp/icons/CalendarIcon.tsx → public/assets/images/icons/projectV2/CalendarIcon.tsx

@@ -1,6 +1,4 @@
-import type { IconProps } from '../../features/common/types/common';
-
-import React from 'react';
+import type { IconProps } from '../../../../../src/features/common/types/common';
 
 const CalendarIcon = ({ width, color }: IconProps) => {
   return (

src/temp/icons/DropdownDownArrow.tsx → public/assets/images/icons/projectV2/DropdownDownArrow.tsx

@@ -1,6 +1,4 @@
-import type { IconProps } from '../../features/common/types/common';
-
-import React from 'react';
+import type { IconProps } from '../../../../../src/features/common/types/common';
 
 const DropdownDownArrow = ({ width }: IconProps) => {
   return (

src/temp/icons/DropdownUpArrow.tsx → public/assets/images/icons/projectV2/DropdownUpArrow.tsx

@@ -1,6 +1,4 @@
-import type { IconProps } from '../../features/common/types/common';
-
-import React from 'react';
+import type { IconProps } from '../../../../../src/features/common/types/common';
 
 const DropdownUpArrow = ({ width }: IconProps) => {
   return (

public/data/maps/time-travel.json

@@ -0,0 +1,38 @@
+{
+  "esri": {
+    "wayback": {
+      "2014": {
+        "id": "31144",
+        "date": "2014-06-11"
+      },
+      "2015": {
+        "id": "24007",
+        "date": "2015-07-08"
+      },
+      "2016": {
+        "id": "11509",
+        "date": "2016-06-13"
+      },
+      "2017": {
+        "id": "14765",
+        "date": "2017-06-14"
+      },
+      "2018": {
+        "id": "7072",
+        "date": "2018-06-06"
+      },
+      "2019": {
+        "id": "645",
+        "date": "2019-06-26"
+      },
+      "2020": {
+        "id": "11135",
+        "date": "2020-06-10"
+      },
+      "2021": {
+        "id": "48376",
+        "date": "2021-06-09"
+      }
+    }
+  }
+}

public/static/locales/en/projectDetails.json

@@ -92,6 +92,10 @@
       "stop-tree-harvesting": "Stop Tree Harvesting",
       "maintenance": "Maintenance",
       "other-intervention": "Other Interventions"
+    },
+    "timeTravel": {
+      "sourceAttributionLabel": "<highlight>{year}</highlight> via {source}",
+      "timeTravelOptionsLabel": "Time Travel Options"
     }
   }
 }

src/features/common/Layout/ProjectPropsContext.tsx

@@ -1,9 +1,12 @@
+// Changes in this file can be ignored as it was just used to get the old time travel feature working
 import type { FC } from 'react';
+import type { MapRef } from 'react-map-gl/src/components/static-map';
 import type {
   TreeProjectExtended,
   ConservationProjectExtended,
 } from '@planet-sdk/common/build/types/project/extended';
 import type { ProjectPurposeTypes } from '@planet-sdk/common/build/types/project/common';
+import type ProjectPropsContextInterface from '../types/ProjectPropsContextInterface';
 import type {
   ExploreOption,
   LayerSettings,
@@ -15,8 +18,6 @@ import type {
   SitesGeoJSON,
   ViewPort,
 } from '../types/ProjectPropsContextInterface';
-import type ProjectPropsContextInterface from '../types/ProjectPropsContextInterface';
-import type { MapRef } from 'react-map-gl/src/components/static-map';
 import type {
   PlantLocation,
   SamplePlantLocation,
@@ -29,6 +30,7 @@ import React, {
   useContext,
   useEffect,
 } from 'react';
+import { getTimeTravelConfig } from '../../../utils/mapsV2/timeTravel';
 import { ParamsContext } from './QueryParamsContext';
 
 const ProjectPropsContext = createContext<ProjectPropsContextInterface | null>(
@@ -120,8 +122,8 @@ const ProjectPropsProvider: FC = ({ children }) => {
   const [layersSettings, setLayersSettings] = useState<LayerSettings>({});
   const [selectedMode, setSelectedMode] = useState<MapMode>('location');
   const [rasterData, setRasterData] = useState<RasterData>({
-    evi: '',
-    imagery: {},
+    evi: undefined,
+    imagery: getTimeTravelConfig(),
   });
   const [plIds, setPlIds] = useState<string[] | null>(null);
   const [isPolygonMenuOpen, setIsPolygonMenuOpen] = useState(false);

src/features/common/types/maplibre-gl-compare.d.ts

@@ -0,0 +1,23 @@
+declare module '@maplibre/maplibre-gl-compare' {
+  import type { Map } from 'maplibre-gl';
+
+  interface CompareOptions {
+    mousemove?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+  }
+
+  class Compare {
+    constructor(
+      leftMap: Map,
+      rightMap: Map,
+      container: string | HTMLElement,
+      options?: CompareOptions
+    );
+
+    remove(): void;
+    setSlider(x: number): void;
+    getSlider(): number;
+  }
+
+  export default Compare;
+}

src/features/projects/components/maps/Project.tsx

@@ -1,3 +1,4 @@
+// Changes in this file can be ignored as it was just used to get the old time travel feature working
 import type { ReactElement } from 'react';
 import type {
   TreeProjectExtended,
@@ -35,8 +36,8 @@
   const {
     selectedPl,
     plantLocations,
     geoJson,
     selectedSite,
     siteExists,
     rasterData,
     setRasterData,
@@ -82,13 +83,13 @@
       if (result2) {
         // Raster data for multipolygons is not supported and is returned with an error message (but a 200 response) for such projects.
         // In this case rasterData.evi will not exist and is not set as a result
-        setRasterData({
+        /* setRasterData({
           ...rasterData,
           imagery: result.imagery,
           evi: result2.evi || '',
-        });
+        }); */
       } else {
-        setRasterData({ ...rasterData, imagery: result.imagery });
+        /* setRasterData({ ...rasterData, imagery: result.imagery }); */
       }
     }
   }

src/features/projectsV2/ProjectDetails/index.tsx

@@ -25,34 +25,37 @@
 import ProjectDetailsMeta from '../../../utils/getMetaTags/ProjectDetailsMeta';
 import OtherInterventionInfo from './components/OtherInterventionInfo';
 import { isNonPlantationType } from '../../../utils/constants/intervention';
+import { getProjectTimeTravelConfig } from '../../../utils/mapsV2/timeTravel';
+import { useProjectsMap } from '../ProjectsMapContext';
 
 const ProjectDetails = ({
   currencyCode,
   isMobile,
 }: {
   currencyCode: string;
   isMobile: boolean;
 }) => {
   const {
     singleProject,
     setSingleProject,
     plantLocations,
     setPlantLocations,
     setIsLoading,
     setIsError,
     setSelectedMode,
     selectedPlantLocation,
     hoveredPlantLocation,
     selectedSamplePlantLocation,
     setSelectedSamplePlantLocation,
     setPreventShallowPush,
   } = useProjects();
+  const { setTimeTravelConfig } = useProjectsMap();
   const { setErrors, redirect } = useContext(ErrorHandlingContext);
   const { tenantConfig } = useTenant();
   const locale = useLocale();
   const router = useRouter();
   const { p: projectSlug } = router.query;
 
   useEffect(() => {
     async function loadProject(
       projectSlug: string,
@@ -71,9 +74,15 @@
             locale: locale,
           },
         });
+
         const { purpose } = fetchedProject;
         if (purpose === 'conservation' || purpose === 'trees') {
           setSingleProject(fetchedProject);
+          const timeTravelConfig = await getProjectTimeTravelConfig(
+            fetchedProject.id,
+            fetchedProject.geoLocation
+          );
+          setTimeTravelConfig(timeTravelConfig);
         } else {
           throw new ClientError(404, {
             error_type: 'project_not_available',
@@ -184,8 +193,8 @@
               hoveredPlantLocation?.type === 'multi-tree-registration'
                 ? hoveredPlantLocation
                 : selectedPlantLocation?.type === 'multi-tree-registration'
-                  ? selectedPlantLocation
-                  : undefined
+                ? selectedPlantLocation
+                : undefined
             }
             setSelectedSamplePlantLocation={setSelectedSamplePlantLocation}
             isMobile={isMobile}
@@ -194,10 +203,20 @@
 
         {shouldShowOtherIntervention ? (
           <OtherInterventionInfo
-            selectedPlantLocation={selectedPlantLocation && selectedPlantLocation?.type !== 'single-tree-registration' &&
-              selectedPlantLocation?.type !== 'multi-tree-registration' ? selectedPlantLocation : null}
-            hoveredPlantLocation={hoveredPlantLocation && hoveredPlantLocation?.type !== 'single-tree-registration' &&
-              hoveredPlantLocation?.type !== 'multi-tree-registration' ? hoveredPlantLocation : null}
+            selectedPlantLocation={
+              selectedPlantLocation &&
+              selectedPlantLocation?.type !== 'single-tree-registration' &&
+              selectedPlantLocation?.type !== 'multi-tree-registration'
+                ? selectedPlantLocation
+                : null
+            }
+            hoveredPlantLocation={
+              hoveredPlantLocation &&
+              hoveredPlantLocation?.type !== 'single-tree-registration' &&
+              hoveredPlantLocation?.type !== 'multi-tree-registration'
+                ? hoveredPlantLocation
+                : null
+            }
             setSelectedSamplePlantLocation={setSelectedSamplePlantLocation}
             isMobile={isMobile}
           />

src/features/projectsV2/ProjectsMap/InterventionDropDown/index.tsx

@@ -3,13 +3,14 @@ import type { INTERVENTION_TYPE } from '../../../../utils/constants/intervention
 
 import { useState, useMemo, useEffect } from 'react';
 import styles from './InterventionList.module.scss';
-import DropdownUpArrow from '../../../../temp/icons/DropdownUpArrow';
-import DropdownDownArrow from '../../../../temp/icons/DropdownDownArrow';
+
 import InterventionList from './InterventionList';
 import { truncateString } from '../../../../utils/getTruncatedString';
 import { findMatchingIntervention } from '../../../../utils/constants/intervention';
 import InterventionIcon from '../../../../../public/assets/images/icons/InterventionIcon';
 import { useTranslations } from 'next-intl';
+import DropdownUpArrow from '../../../../../public/assets/images/icons/projectV2/DropdownUpArrow';
+import DropdownDownArrow from '../../../../../public/assets/images/icons/projectV2/DropdownDownArrow';
 interface InterventionOptionType {
   label: string;
   value: INTERVENTION_TYPE;
@@ -23,7 +24,7 @@ interface Props {
   isMobile?: boolean;
   enableInterventionFilter: () => void;
   disableInterventionMenu: boolean;
-  hasProjectSites?: boolean
+  hasProjectSites?: boolean;
 }
 
 const InterventionDropdown = ({
@@ -33,7 +34,7 @@ const InterventionDropdown = ({
   enableInterventionFilter,
   disableInterventionMenu,
   isMobile,
-  hasProjectSites
+  hasProjectSites,
 }: Props) => {
   const tIntervention = useTranslations('ProjectDetails.intervention');
 
@@ -61,7 +62,14 @@ const InterventionDropdown = ({
   };
   return (
     <>
-      <div className={`${styles.dropdownButton} ${hasProjectSites ? styles.dropdownButtonAlignmentAbove : styles.dropdownButtonAlignmentBelow}`} onClick={toggleMenu}>
+      <div
+        className={`${styles.dropdownButton} ${
+          hasProjectSites
+            ? styles.dropdownButtonAlignmentAbove
+            : styles.dropdownButtonAlignmentBelow
+        }`}
+        onClick={toggleMenu}
+      >
         <div className={styles.interventionIconAndTextContainer}>
           <InterventionIcon />
           <>