Merge branch 'chore-babel' into dev-landcover

.babelrc

@@ -13,10 +13,10 @@
  "production": {
  "plugins": [
  [
- "babel-plugin-jsx-remove-data-test-id",
- {
- "attributes": ["data-test-id", "data-testid", "data-test-attr"]
- }
+ // "babel-plugin-jsx-remove-data-test-id",
+ // {
+ //  "attributes": ["data-test-id", "data-testid", "data-test-attr"]
+ // }
  ]
  ]
  }

package.json

@@ -36,15 +36,14 @@
  },
  "homepage": "https://github.com/vannizhang/imagery-explorer-apps",
  "devDependencies": {
- "@babel/core": "^7.14.6",
- "@babel/plugin-proposal-class-properties": "^7.10.4",
+ "@babel/core": "^7.24.3",
+ "@babel/plugin-proposal-class-properties": "^7.18.6",
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
- "@babel/plugin-transform-runtime": "^7.11.5",
- "@babel/polyfill": "^7.11.5",
- "@babel/preset-env": "^7.14.5",
- "@babel/preset-react": "^7.14.5",
- "@babel/preset-typescript": "^7.14.5",
- "@babel/runtime": "^7.14.6",
+ "@babel/plugin-transform-runtime": "^7.24.3",
+ "@babel/preset-env": "^7.24.3",
+ "@babel/preset-react": "^7.24.1",
+ "@babel/preset-typescript": "^7.24.1",
+ "@babel/runtime": "^7.24.1",
  "@storybook/addon-essentials": "^7.0.7",
  "@storybook/addon-interactions": "^7.0.7",
  "@storybook/addon-links": "^7.0.7",
@@ -64,7 +63,7 @@
  "@typescript-eslint/parser": "6.12",
  "@vue/preload-webpack-plugin": "^2.0.0",
  "autoprefixer": "^10.4.14",
- "babel-loader": "^8.2.2",
+ "babel-loader": "^8.3.0",
  "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
  "copy-webpack-plugin": "^9.0.0",
  "css-loader": "^5.2.6",

src/landsat-explorer/components/Layout/Layout.tsx

@@ -42,6 +42,7 @@ import { appConfig } from '@shared/config';
 import { useQueryAvailableLandsatScenes } from '@landsat-explorer/hooks/useQueryAvailableLandsatScenes';
 import { LandsatRasterFunctionSelector } from '../RasterFunctionSelector';
 import { LandsatInterestingPlaces } from '../InterestingPlaces';
+import { LandsatMissionFilter } from '../LandsatMissionFilter';
 
 const Layout = () => {
  const mode = useSelector(selectAppMode);
@@ -107,7 +108,9 @@ const Layout = () => {
  ) : (
  <>
  <div className="ml-2 3xl:ml-0">
- <Calendar />
+ <Calendar>
+ <LandsatMissionFilter />
+ </Calendar>
  </div>
 
  {mode === 'analysis' && (

src/landsat-explorer/index.tsx

@@ -26,6 +26,7 @@ import { AboutLandsatExplorer } from './components/About';
 import { ErrorPage } from '@shared/components/ErrorPage';
 import { getTimeExtentOfLandsatService } from '@shared/services/landsat-level-2/getTimeExtent';
 import AppContextProvider from '@shared/contexts/AppContextProvider';
+import { LANDSAT_RASTER_FUNCTION_INFOS } from '@shared/services/landsat-level-2/config';
 
 (async () => {
  const root = createRoot(document.getElementById('root'));
@@ -38,7 +39,10 @@ import AppContextProvider from '@shared/contexts/AppContextProvider';
 
  root.render(
  <ReduxProvider store={store}>
- <AppContextProvider timeExtent={timeExtent}>
+ <AppContextProvider
+ timeExtent={timeExtent}
+ rasterFunctionInfo={LANDSAT_RASTER_FUNCTION_INFOS}
+ >
  <ErrorBoundary>
  <Map />
  <Layout />

src/landsat-surface-temp/index.tsx

@@ -24,6 +24,7 @@ import Map from './components/Map/Map';
 import Layout from './components/Layout/Layout';
 import AppContextProvider from '@shared/contexts/AppContextProvider';
 import { getTimeExtentOfLandsatService } from '@shared/services/landsat-level-2/getTimeExtent';
+import { LANDSAT_RASTER_FUNCTION_INFOS } from '@shared/services/landsat-level-2/config';
 
 (async () => {
  const store = await getLandsatExplorerStore();
@@ -34,7 +35,10 @@ import { getTimeExtentOfLandsatService } from '@shared/services/landsat-level-2/
 
  root.render(
  <ReduxProvider store={store}>
- <AppContextProvider timeExtent={timeExtent}>
+ <AppContextProvider
+ timeExtent={timeExtent}
+ rasterFunctionInfo={LANDSAT_RASTER_FUNCTION_INFOS}
+ >
  <ErrorBoundary>
  <Map />
  <Layout />

src/shared/components/AnimationControl/useAnimationFramesInfo.tsx

@@ -13,20 +13,23 @@
  * limitations under the License.
  */
 
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { AnimationFrameInfo } from './AnimationFramesList';
 import { useSelector } from 'react-redux';
 import {
  selectListOfQueryParams,
  selectIdOfSelectedItemInListOfQueryParams,
 } from '@shared/store/ImageryScene/selectors';
 import { sortQueryParams4ScenesByAcquisitionDate } from './helpers';
-import { formattedDateString2Unixtimestamp } from '@shared/utils/date-time/formatDateString';
-import { DATE_FORMAT } from '@shared/constants/UI';
-import { getRasterFunctionLabelText } from '@shared/services/helpers/getRasterFunctionLabelText';
+// import { formattedDateString2Unixtimestamp } from '@shared/utils/date-time/formatDateString';
+// import { DATE_FORMAT } from '@shared/constants/UI';
+// import { getRasterFunctionLabelText } from '@shared/services/helpers/getRasterFunctionLabelText';
 import { formatFormattedDateStrInUTCTimeZone } from '@shared/utils/date-time/formatInUTCTimeZone';
+import { AppContext } from '@shared/contexts/AppContextProvider';
 
 export const useAnimationFramesInfo = () => {
+ const { rasterFunctionLabelMap } = useContext(AppContext);
+
  const selectedAnimationFrameId = useSelector(
  selectIdOfSelectedItemInListOfQueryParams
  );
@@ -46,14 +49,16 @@ export const useAnimationFramesInfo = () => {
  ).map((d) => {
  const { uniqueId, acquisitionDate, rasterFunctionName } = d;
 
+ const rasterFunctionLabel =
+ rasterFunctionLabelMap.get(rasterFunctionName) ||
+ rasterFunctionName;
+
  return {
  frameId: uniqueId,
  acquisitionDateLabel: acquisitionDate
  ? formatFormattedDateStrInUTCTimeZone(acquisitionDate)
  : 'Select a date',
- rasterFunctionName: acquisitionDate
- ? getRasterFunctionLabelText(rasterFunctionName)
- : '',
+ rasterFunctionName: acquisitionDate ? rasterFunctionLabel : '',
  selected: uniqueId === selectedAnimationFrameId,
  } as AnimationFrameInfo;
  });

src/shared/components/Calendar/CalendarContainer.tsx

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { FC, useEffect, useMemo, useState } from 'react';
 import Calendar, { FormattedImageryScene } from './Calendar';
 // import { selectMapCenter } from '@shared/store/Map/selectors';
 import { useSelector } from 'react-redux';
@@ -40,7 +40,7 @@ import {
  // acquisitionYearChanged,
  cloudCoverChanged,
 } from '@shared/store/ImageryScene/reducer';
-import { LandsatMissionFilter } from '../LandsatMissionFilter';
+// import { LandsatMissionFilter } from '../LandsatMissionFilter';
 import { APP_NAME } from '@shared/config';
 import { useFindSelectedSceneByDate } from './useFindSelectedSceneByDate';
 import { useAcquisitionDateFromSelectedScene } from './useAcquisitionDateFromSelectedScene';
@@ -54,7 +54,11 @@ import { useAcquisitionYear } from './useAcquisitionYear';
 import { batch } from 'react-redux';
 // import { useUpdateAcquisitionYear } from './useUpdateAcquisitionYear';
 
-const CalendarContainer = () => {
+type Props = {
+ children?: React.ReactNode;
+};
+
+const CalendarContainer: FC<Props> = ({ children }: Props) => {
  const dispatch = useDispatch();
 
  const queryParams = useSelector(selectQueryParams4SceneInSelectedMode);
@@ -112,6 +116,10 @@ const CalendarContainer = () => {
  // */
  // useUpdateAcquisitionYear();
 
+ const shouldShowCloudFilter = useMemo(() => {
+ return APP_NAME === 'landsat' || APP_NAME === 'landsat-surface-temp';
+ }, []);
+
  return (
  <div
  className={classNames('select-none', {
@@ -150,17 +158,21 @@ const CalendarContainer = () => {
  />
  </div>
 
- {APP_NAME === 'landsat' && <LandsatMissionFilter />}
-
- <CloudFilter
- cloudCoverage={cloudCoverThreshold}
- disabled={
- cloudCoverThreshold === undefined || isAnimationPlaying
- }
- onChange={(newValue) => {
- dispatch(cloudCoverChanged(newValue));
- }}
- />
+ {/* {APP_NAME === 'landsat' && <LandsatMissionFilter />} */}
+ {children}
+
+ {shouldShowCloudFilter && (
+ <CloudFilter
+ cloudCoverage={cloudCoverThreshold}
+ disabled={
+ cloudCoverThreshold === undefined ||
+ isAnimationPlaying
+ }
+ onChange={(newValue) => {
+ dispatch(cloudCoverChanged(newValue));
+ }}
+ />
+ )}
  </div>
 
  <Calendar

src/shared/components/SwipeLayerSelector/SwipeLayerSelector.tsx

@@ -13,11 +13,12 @@
  * limitations under the License.
  */
 
-import React, { FC } from 'react';
+import React, { FC, useContext } from 'react';
 import { Button } from '../Button';
 import { QueryParams4ImageryScene } from '../../store/ImageryScene/reducer';
 import classNames from 'classnames';
-import { getRasterFunctionLabelText } from '@shared/services/helpers/getRasterFunctionLabelText';
+import { AppContext } from '@shared/contexts/AppContextProvider';
+// import { getRasterFunctionLabelText } from '@shared/services/helpers/getRasterFunctionLabelText';
 
 type Side4SwipeMode = 'left' | 'right';
 
@@ -36,6 +37,8 @@ export const SwipeLayerSelector: FC<Props> = ({
  onChange,
  swapButtonOnClick,
 }) => {
+ const { rasterFunctionLabelMap } = useContext(AppContext);
+
  const getButtonContent = (side: Side4SwipeMode) => {
  const queryParams =
  side === 'left'
@@ -56,9 +59,9 @@ export const SwipeLayerSelector: FC<Props> = ({
  <br />
 
  <span className="normal-case">
- {getRasterFunctionLabelText(
+ {rasterFunctionLabelMap.get(
  queryParams?.rasterFunctionName
- )}
+ ) || queryParams?.rasterFunctionName}
  </span>
  </>
  ) : (

src/shared/contexts/AppContextProvider.tsx

@@ -13,26 +13,58 @@
  * limitations under the License.
  */
 
-import { ImageryServiceTimeExtentData } from '@typing/imagery-service';
+import {
+ ImageryServiceTimeExtentData,
+ RasterFunctionInfo,
+} from '@typing/imagery-service';
 import React, { useState, createContext, useEffect } from 'react';
 
+type RrasterFunctionLabelMap = Map<string, string>;
+
 type AppContextValue = {
  timeExtent: ImageryServiceTimeExtentData;
+ /**
+ * Map object that can be used to get the label text of a raster function by it's name
+ */
+ rasterFunctionLabelMap: RrasterFunctionLabelMap;
 };
 
 type AppContextProviderProps = {
+ /**
+ * time extent of the imagery service
+ */
  timeExtent: ImageryServiceTimeExtentData;
+ /**
+ * raster functions of the imagert service
+ */
+ rasterFunctionInfo: RasterFunctionInfo[];
  children?: React.ReactNode;
 };
 
 export const AppContext = createContext<AppContextValue>(null);
 
+const getRasterFunctionLabelMap = (
+ rasterFunctionInfo: RasterFunctionInfo[]
+) => {
+ const rasterFunctionLabelMap = new Map();
+
+ // const infos = [...LANDSAT_RASTER_FUNCTION_INFOS];
+
+ for (const { name, label } of rasterFunctionInfo) {
+ rasterFunctionLabelMap.set(name, label);
+ }
+
+ return rasterFunctionLabelMap;
+};
+
 const AppContextProvider: React.FC<AppContextProviderProps> = ({
  timeExtent,
+ rasterFunctionInfo,
  children,
 }: AppContextProviderProps) => {
  const [appContextValue, setAppContextValue] = useState<AppContextValue>({
  timeExtent,
+ rasterFunctionLabelMap: getRasterFunctionLabelMap(rasterFunctionInfo),
  });
 
  // const init = async () => {