Abstract Away Faux Modules from MapBlock Component and make renderable for NextJs Instance Prototype

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';