Abstract Away Faux Modules from MapBlock Component and make renderable for NextJs Instance Prototype (#1046)

**Related Ticket:** #1002

**These changes are RELATED TO THIS PR:**
NASA-IMPACT/next-veda-ui#1

### Description of Changes
This makes the MapBlock component renderable by the NextJs instance by
abstracting away the veda faux modules dependencies. This also exports
the themeProvider and reactQueryProvider to be used by the nextJs
instance.

I've tried to keep these changes quite isolated to the problem we are
trying to solve so its not too big of a PR.

### Notes & Questions About Changes
* Should NOT BE BREAKING CHANGES. Should be able to merge without care
of order of NextJs PR
* See my comments in the code

### Validation / Testing
* Regular build should work
* Library build should work
* The stories and mapblocks in the stories should render as usual in the
deploy preview

Author: sandrahoang686

app/scripts/components/analysis/results/timeseries-data.ts

@@ -1,12 +1,11 @@
 import axios, { AxiosRequestConfig } from 'axios';
 import { QueryClient } from '@tanstack/react-query';
 import { FeatureCollection, Polygon } from 'geojson';
-import { DatasetLayer } from 'veda';
-
 import { MAX_QUERY_NUM } from '../constants';
 import { getFilterPayload, combineFeatureCollection } from '../utils';
-import EventEmitter from './mini-events';
 import { ConcurrencyManager, ConcurrencyManagerInstance } from './concurrency';
+import EventEmitter from './mini-events';
+import { DatasetLayer } from '$types/veda';
 import { TimeDensity } from '$context/layer-data';
 
 export const TIMESERIES_DATA_BASE_ID = 'analysis';

app/scripts/components/common/blocks/block-map.tsx

@@ -1,7 +1,5 @@
 import React, { useMemo, useState, useEffect } from 'react';
 import styled from 'styled-components';
-// @NOTE: This should be replaced by types/veda once the changes are consolidated
-import { ProjectionOptions } from 'veda';
 import { MapboxOptions } from 'mapbox-gl';
 import {
   convertProjectionToMapbox,
@@ -35,9 +33,9 @@ import {
   DatasetStatus
 } from '$components/exploration/types.d.ts';
 
-import { reconcileDatasets } from '$components/exploration/data-utils';
-import { datasetLayers } from '$components/exploration/data-utils';
+import { reconcileDatasets, getDatasetLayers } from '$components/exploration/data-utils-no-faux-module';
 import { useReconcileWithStacMetadata } from '$components/exploration/hooks/use-stac-metadata-datasets';
+import { ProjectionOptions, VedaDatum, DatasetData } from '$types/veda';
 
 export const mapHeight = '32rem';
 const Carto = styled.div`
@@ -111,6 +109,7 @@ function validateBlockProps(props: MapBlockProps) {
 }
 
 interface MapBlockProps {
+  datasets: VedaDatum<DatasetData>;
   dateTime?: string;
   compareDateTime?: string;
   center?: [number, number];
@@ -128,7 +127,6 @@ interface MapBlockProps {
 const getDataLayer = (layerIndex: number, layers: VizDataset[] | undefined): (VizDatasetSuccess | null) => {
   if (!layers || layers.length <= layerIndex) return null;
   const layer = layers[layerIndex];
-
   // @NOTE: What to do when data returns ERROR
   if (layer.status !== DatasetStatus.SUCCESS) return null;
   return {
@@ -144,6 +142,7 @@ function MapBlock(props: MapBlockProps) {
   const generatedId = useMemo(() => `map-${++mapInstanceId}`, []);
 
   const {
+    datasets,
     layerId,
     dateTime,
     compareDateTime,
@@ -162,6 +161,8 @@ function MapBlock(props: MapBlockProps) {
     throw new HintedError('Malformed Map Block', errors);
   }
 
+  const datasetLayers = getDatasetLayers(datasets);
+
   const layersToFetch = useMemo(() => {
     const [baseMapStaticData] = reconcileDatasets([layerId], datasetLayers, []);
     let totalLayers = [baseMapStaticData];
@@ -262,7 +263,7 @@ function MapBlock(props: MapBlockProps) {
       const providedLabel = compareDataLayer.data.mapLabel as string;
       return providedLabel;
     }
-
+  
     // Default to date comparison.
     return selectedDatetime && compareToDate
       ? formatCompareDate(
@@ -280,7 +281,6 @@ function MapBlock(props: MapBlockProps) {
     baseTimeDensity,
     compareTimeDensity
   ]);
-
   const initialPosition = useMemo(
     () => (center ? { lng: center[0], lat: center[1], zoom } : undefined),
     [center, zoom]

app/scripts/components/common/blocks/lazy-components.js

@@ -16,6 +16,7 @@ import {
 } from '$components/common/blocks/scrollytelling';
 
 import { LoadingSkeleton } from '$components/common/loading-skeleton';
+import { veda_faux_module_datasets } from '$data-layer/datasets';
 
 export function LazyChart(props) {
   return (
@@ -48,7 +49,7 @@ export function LazyMap(props) {
       offset={100}
       once
     >
-      <Map {...props} />
+      <Map {...props} datasets={veda_faux_module_datasets} />
     </LazyLoad>
   );
 }

app/scripts/components/common/blocks/scrollytelling/chapter.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { themeVal, media, multiply } from '@devseed-ui/theme-provider';
-import { ProjectionOptions } from 'veda';
+import { ProjectionOptions } from '$types/veda';
 
 import { variableGlsp } from '$styles/variable-utils';
 import { ContentBlockProse } from '$styles/content-block';

app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx

@@ -328,7 +328,6 @@ export default function CustomAoIControl({
 
   // Start/stop the drawing.
   useEffect(() => {
-    // @ts-expect-error Property '_drawControl' does not exist on type 'Map'.
     // Property was added to access draw control.
     const mbDraw = main?._drawControl;
     if (!mbDraw) return;

app/scripts/components/common/map/controls/hooks/use-preset-aoi.tsx

@@ -1,7 +1,6 @@
 import { Feature, Polygon } from 'geojson';
 import { useCallback, useEffect, useState } from 'react';
 import axios from 'axios';
-
 import { getAoiAppropriateFeatures } from './use-custom-aoi';
 
 const presetFilePath = `${process.env.PUBLIC_URL ?? ''}/public/geo-data/states/`;

app/scripts/components/common/map/controls/map-options/projections.ts

@@ -1,7 +1,6 @@
-import { MbProjectionOptions, ProjectionOptions } from 'veda';
-
 import { validateLat, validateLon } from '../../utils';
 import { ProjectionListItem } from './types';
+import { MbProjectionOptions, ProjectionOptions } from '$types/veda';
 
 // The id is internal to the app.
 // The mbId is the projection name to use with mapbox. This is needed because

app/scripts/components/common/map/controls/map-options/types.ts

@@ -1,5 +1,5 @@
-import { MbProjectionOptions, ProjectionOptions } from 'veda';
 import { BasemapId, Option } from './basemap';
+import { MbProjectionOptions, ProjectionOptions } from '$types/veda';
 
 export interface MapOptionsProps {
   onProjectionChange: (projection: ProjectionOptions) => void;

app/scripts/components/common/map/hooks/use-map-style.ts

@@ -1,9 +1,9 @@
 import { useContext } from "react";
-import { StylesContext } from "../styles";
+import { StylesContext, StylesContextType } from "../styles";
 import useCustomMarker from "./use-custom-marker";
 import useMaps from "./use-maps";
 
-export function useStylesContext() {
+export function useStylesContext(): StylesContextType {
   return useContext(StylesContext);
 }
 

app/scripts/components/common/map/hooks/use-maps.ts

@@ -1,17 +1,17 @@
 import { useContext } from 'react';
 import { useMap } from 'react-map-gl';
-import { MapsContext } from '../maps';
+import { MapsContext, MapsContextType } from '../maps';
 import { useStylesContext } from './use-map-style';
 
-export function useMapsContext() {
+export function useMapsContext(): MapsContextType {
   return useContext(MapsContext);
 }
 
-export default function useMaps() {
+export default function useMaps(): Record<string, any | undefined> {
   const { mainId, comparedId } = useMapsContext();
   const { isCompared } = useStylesContext();
   const maps = useMap();
-  const main = maps[mainId];
+  const main = maps?.[mainId];
   const compared = maps[comparedId];
   const current = isCompared ? compared : main;
 

app/scripts/components/common/map/layer-legend.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode, Fragment, useState, useCallback } from 'react';
 import styled from 'styled-components';
-import { LayerLegendCategorical, LayerLegendGradient } from 'veda';
 import { AccordionFold, AccordionManager } from '@devseed-ui/accordion';
 import {
   glsp,
@@ -12,7 +11,6 @@ import { CollecticonCircleInformation } from '@devseed-ui/collecticons';
 import { Toolbar, ToolbarIconButton } from '@devseed-ui/toolbar';
 import { followCursor } from 'tippy.js';
 import { scaleLinear } from 'd3';
-
 import { Tip } from '../tip';
 import {
   formatAsScientificNotation,
@@ -26,6 +24,7 @@ import {
   WidgetItemHeadline,
   WidgetItemHGroup
 } from '$styles/panel';
+import { LayerLegendCategorical, LayerLegendGradient } from '$types/veda';
 
 interface LayerLegendCommonProps {
   id: string;

app/scripts/components/common/map/map-component.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, ReactElement, useMemo, Ref } from 'react';
 import ReactMapGlMap, { LngLatBoundsLike, MapRef } from 'react-map-gl';
 import { debounce } from 'lodash';
-import { ProjectionOptions } from 'veda';
-import 'mapbox-gl/dist/mapbox-gl.css';
-import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
 import useMapStyle from './hooks/use-map-style';
 import { useMapsContext } from './hooks/use-maps';
 import { convertProjectionToMapbox } from './controls/map-options/projections';
+import { ProjectionOptions } from '$types/veda';
+import 'mapbox-gl/dist/mapbox-gl.css';
+import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
 
 const maxMapBounds: LngLatBoundsLike = [
   [-540, -90], // SW

app/scripts/components/common/map/maps.tsx

@@ -15,7 +15,6 @@ import {
   iconDataURI
 } from '@devseed-ui/collecticons';
 import { themeVal } from '@devseed-ui/theme-provider';
-import { ProjectionOptions } from 'veda';
 import useDimensions from 'react-cool-dimensions';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import 'mapbox-gl-compare/dist/mapbox-gl-compare.css';
@@ -27,6 +26,7 @@ import MapComponent from './map-component';
 import useMaps, { useMapsContext } from './hooks/use-maps';
 import { aoiCustomCursorStyle } from './controls/aoi/custom-aoi-control';
 import { COMPARE_CONTAINER_NAME, CONTROLS_CONTAINER_NAME } from '.';
+import { ProjectionOptions } from '$types/veda';
 
 const chevronRightURI = () =>
   iconDataURI(CollecticonChevronRightSmall, {
@@ -202,7 +202,7 @@ export default function MapsContextWrapper(props: MapsContextWrapperProps) {
   );
 }
 
-interface MapsContextType {
+export interface MapsContextType {
   initialViewState: any;
   setInitialViewState: (viewState: any) => void;
   mainId: string;

app/scripts/components/common/map/style-generators/cmr-timeseries.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { BaseGeneratorParams } from '../types';
 import { ZarrPaintLayer } from './zarr-timeseries';
 import { useCMR } from './hooks';

app/scripts/components/common/map/style-generators/raster-timeseries.tsx

@@ -358,15 +358,13 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
         );
 
         const tilejsonUrl = `${mosaicUrl}?${tileParams}`;
-
         try {
           const tilejsonData = await requestQuickCache<any>({
             url: tilejsonUrl,
             method: 'GET',
             payload: null,
             controller
           });
-
           const tileServerUrl = tilejsonData.tiles[0];
 
           const wmtsBaseUrl = mosaicUrl.replace(
@@ -417,6 +415,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
               context: STATUS_KEY.StacSearch
             });
           }
+
           LOG &&
             /* eslint-disable-next-line no-console */
             console.log(

app/scripts/components/common/map/style-generators/zarr-timeseries.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 import qs from 'qs';
 import { RasterSource, RasterLayer } from 'mapbox-gl';
-
 import useMapStyle from '../hooks/use-map-style';
 import useGeneratorParams from '../hooks/use-generator-params';
 import { BaseGeneratorParams } from '../types';

app/scripts/components/common/map/styles.tsx

@@ -14,7 +14,7 @@ import {
   LayerOrderPosition
 } from './types';
 
-interface StylesContextType {
+export interface StylesContextType {
   updateStyle: (params: GeneratorStyleParams) => void;
   style?: Style;
   updateMetaData?: (params: unknown) => void;

app/scripts/components/common/map/utils.ts

@@ -1,17 +1,17 @@
 import axios, { Method } from 'axios';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import { Map as MapboxMap } from 'mapbox-gl';
 import { MapRef } from 'react-map-gl';
-import { endOfDay, startOfDay } from 'date-fns';
+import startOfDay from 'date-fns/startOfDay';
+import endOfDay from 'date-fns/endOfDay';
 import { Feature, MultiPolygon, Polygon } from 'geojson';
 import { BBox } from '@turf/helpers';
+import { StacFeature } from './types';
 import {
   DatasetDatumFn,
   DatasetDatumFnResolverBag,
   DatasetDatumReturnType
-} from 'veda';
-
-import { StacFeature } from './types';
+} from '$types/veda';
 import { TimeDensity } from '$context/layer-data';
 import { userTzDate2utcString } from '$utils/date';
 import { validateRangeNum } from '$utils/utils';

app/scripts/components/common/mapbox/index.tsx

@@ -23,7 +23,7 @@ import {
   iconDataURI
 } from '@devseed-ui/collecticons';
 import { themeVal } from '@devseed-ui/theme-provider';
-import { DatasetDatumFnResolverBag, ProjectionOptions } from 'veda';
+import { DatasetDatumFnResolverBag, ProjectionOptions, datasets } from 'veda';
 
 import { AoiChangeListenerOverload, AoiState } from '../aoi/types';
 import MapMessage from '../map/map-message';
@@ -176,7 +176,7 @@ function MapboxMapComponent(
     compareInstance: mapCompareRef.current
   }));
 
-  const { baseLayer, compareLayer } = useDatasetAsyncLayer(datasetId, layerId);
+  const { baseLayer, compareLayer } = useDatasetAsyncLayer(datasets, datasetId, layerId);
 
   const shouldRenderCompare = isMapLoaded && isComparing;
 

app/scripts/components/common/mapbox/layers/cmr-timeseries.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Map as MapboxMap } from 'mapbox-gl';
-
 import { ZarrPaintLayer } from './zarr-timeseries';
 import { ActionStatus } from '$utils/status';
 

app/scripts/components/common/mapbox/layers/utils.ts

@@ -9,17 +9,6 @@ import {
   eachYearOfInterval
 } from 'date-fns';
 import { endOfDay, startOfDay } from 'date-fns';
-import {
-  datasets,
-  DatasetLayer,
-  DatasetLayerCompareInternal,
-  DatasetLayerCompareSTAC,
-  DatasetDatumFn,
-  DatasetDatumFnResolverBag,
-  DatasetDatumReturnType,
-  DatasetLayerCompareNormalized,
-  DatasetLayerType
-} from 'veda';
 import {
   MapLayerRasterTimeseries,
   MapLayerRasterTimeseriesProps,
@@ -37,7 +26,18 @@ import {
   MapLayerCMRTimeseries,
   MapLayerCMRTimeseriesProps
 } from './cmr-timeseries';
-
+import {
+  DatasetLayer,
+  DatasetLayerCompareInternal,
+  DatasetLayerCompareSTAC,
+  DatasetDatumFn,
+  DatasetDatumFnResolverBag,
+  DatasetDatumReturnType,
+  DatasetLayerCompareNormalized,
+  DatasetLayerType,
+  VedaData,
+  DatasetData,
+} from '$types/veda';
 import { userTzDate2utcString, utcString2userTzDate } from '$utils/date';
 import { AsyncDatasetLayer } from '$context/layer-data';
 import { S_FAILED, S_IDLE, S_LOADING, S_SUCCEEDED } from '$utils/status';
@@ -70,6 +70,7 @@ export const getLayerComponent = (
  * @returns object
  */
 export const getCompareLayerData = (
+  datasets: VedaData<DatasetData>,
   layerData: DatasetLayer | null
 ): DatasetLayerCompareNormalized | null => {
   if (!layerData?.compare) return null;

app/scripts/components/common/mapbox/layers/vector-timeseries.tsx

@@ -11,7 +11,6 @@ import {
 import { Feature } from 'geojson';
 import { endOfDay, startOfDay } from 'date-fns';
 import centroid from '@turf/centroid';
-
 import { requestQuickCache, useFitBbox, useLayerInteraction } from './utils';
 import { useMapStyle } from './styles';
 import { useCustomMarker } from './custom-marker';

app/scripts/components/common/mapbox/layers/zarr-timeseries.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 import qs from 'qs';
 import { RasterSource, RasterLayer } from 'mapbox-gl';
-
 import { useMapStyle } from './styles';
 
 import { ActionStatus } from '$utils/status';