chore: Expose ScrollytellingBlock w/o veda virtual modules dependency

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

@@ -36,7 +36,7 @@
   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';
+import { ProjectionOptions, VedaData, DatasetData } from '$types/veda';
 import { useVedaUI } from '$context/veda-ui-provider';
 
 export const mapHeight = '32rem';
@@ -87,7 +87,7 @@
 
   // zoom is not required, but if provided must be in the correct range.
   const zoomError = zoom && (isNaN(zoom) || zoom < 0);
   ('- Invalid zoom. Use number greater than 0');
 
   const compareDateError =
     compareDateTime &&
@@ -111,7 +111,7 @@
 }
 
 interface MapBlockProps {
-  datasets: VedaDatum<DatasetData>;
+  datasets: VedaData<DatasetData>;
   dateTime?: string;
   compareDateTime?: string;
   center?: [number, number];
@@ -181,7 +181,7 @@
       totalLayers = [...totalLayers, compareMapStaticData];
     }
     return totalLayers;
   }, [layerId]);
 
   const [layers, setLayers] = useState<VizDataset[]>(layersToFetch);
 

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

@@ -37,7 +37,7 @@ export function LazyScrollyTelling(props) {
       offset={100}
       once
     >
-      <ScrollytellingBlock {...props} />
+      <ScrollytellingBlock {...props} datasets={veda_faux_module_datasets} />
     </LazyLoad>
   );
 }

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

@@ -15,14 +15,9 @@ import { CSSTransition, SwitchTransition } from 'react-transition-group';
 import { CollecticonCircleXmark } from '@devseed-ui/collecticons';
 
 import { MapRef } from 'react-map-gl';
-import { datasets, ProjectionOptions } from 'veda';
 import { BlockErrorBoundary } from '..';
-import {
-  chapterDisplayName,
-  ChapterProps,
-  ScrollyChapter,
-  validateChapter
-} from './chapter';
+import { ChapterProps, ScrollyChapter, validateChapter } from './chapter';
+import { ProjectionOptions, VedaData } from '$types/veda';
 import { projectionDefault } from '$components/common/map/controls/map-options/projections';
 import { userTzDate2utcString, utcString2userTzDate } from '$utils/date';
 import { S_FAILED, S_SUCCEEDED } from '$utils/status';
@@ -41,11 +36,12 @@ import {
 import { Layer } from '$components/exploration/components/map/layer';
 import { MapLoading } from '$components/common/loading-skeleton';
 import {
-  DatasetData,
+  EADatasetDataLayer,
   DatasetStatus,
   VizDataset,
   VizDatasetSuccess
 } from '$components/exploration/types.d.ts';
+import { DatasetData } from '$types/veda';
 import { useReconcileWithStacMetadata } from '$components/exploration/hooks/use-stac-metadata-datasets';
 import {
   formatSingleDate,
@@ -96,12 +92,6 @@ function useChapterPropsFromChildren(children): ScrollyChapter[] {
       any
     >[];
 
-    if (chapters.some((c) => c.type.displayName !== chapterDisplayName)) {
-      throw new HintedError('Invalid ScrollytellingBlock children', [
-        'You can only use <Chapter> inside <ScrollytellingBlock>'
-      ]);
-    }
-
     const chErrors = chapters.reduce<string[]>(
       (acc, ch, idx) => acc.concat(validateChapter(ch.props, idx)),
       []
@@ -140,7 +130,8 @@ function getChapterLayerKey(ch: ScrollyChapter) {
  */
 function useMapLayersFromChapters(
   chList: ScrollyChapter[],
-  envApiStacEndpoint: string
+  envApiStacEndpoint: string,
+  datasets: VedaData<DatasetData>
 ): [ResolvedScrollyMapLayer[], string[]] {
   // The layers are unique based on the dataset, layer id and datetime.
   // First we filter out any scrollytelling block that doesn't have layer.
@@ -155,7 +146,6 @@ function useMapLayersFromChapters(
 
     return Object.values(unique);
   }, [chList]);
-
   // Create an array of datasetId & layerId pairs which we can easily validate when creating
   // the layers array.
   const uniqueLayerRefs = useMemo(() => {
@@ -170,8 +160,10 @@ function useMapLayersFromChapters(
   const reconciledVizDatasets = uniqueLayerRefs.map(
     ({ datasetId, layerId }) => {
       const layers = datasets[datasetId]?.data.layers;
-
-      const layer = layers?.find((l) => l.id === layerId) as DatasetData | null;
+      // @TECH-DEBT: We are casting which we shouldn't, look into types and clean up because this is masking bad typing issues
+      const layer = layers?.find(
+        (l) => l.id === layerId
+      ) as EADatasetDataLayer | null;
 
       if (!layer) {
         throw new Error(
@@ -257,7 +249,7 @@ const MAP_OPTIONS = {
 };
 
 function Scrollytelling(props) {
-  const { children } = props;
+  const { children, datasets } = props;
 
   const { envApiStacEndpoint } = useVedaUI();
 
@@ -272,7 +264,8 @@ function Scrollytelling(props) {
 
   const [resolvedLayers, resolvedStatus] = useMapLayersFromChapters(
     chapterProps,
-    envApiStacEndpoint
+    envApiStacEndpoint,
+    datasets
   );
 
   const [activeChapter, setActiveChapter] = useState<ScrollyChapter | null>(
@@ -482,7 +475,8 @@ function Scrollytelling(props) {
 }
 
 Scrollytelling.propTypes = {
-  children: T.node
+  children: T.node,
+  datasets: T.any
 };
 
 export function ScrollytellingBlock(props) {

app/scripts/components/common/catalog/prepare-datasets.ts

@@ -83,7 +83,7 @@ export function prepareDatasets(
   sortField &&
     /* eslint-disable-next-line fp/no-mutating-methods */
     filtered.sort((a, b) => {
-      if (!a[sortField]) return Infinity;
+      if (!a[sortField] || typeof a[sortField] !== 'string') return Infinity;
 
       return a[sortField]?.localeCompare(b[sortField]);
     });

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

@@ -17,7 +17,7 @@ import { userTzDate2utcString } from '$utils/date';
 import { validateRangeNum } from '$utils/utils';
 import {
   DatasetStatus,
-  DatasetData,
+  EADatasetDataLayer,
   VizDataset
 } from '$components/exploration/types.d.ts';
 import { fixAntimeridian } from '$utils/antimeridian';
@@ -282,7 +282,7 @@ export function getZoomFromBbox(bbox: BBox): number {
   }
 }
 
-export function reconcileVizDataset(dataset: DatasetData): VizDataset {
+export function reconcileVizDataset(dataset: EADatasetDataLayer): VizDataset {
   return {
     status: DatasetStatus.SUCCESS,
     data: dataset,

app/scripts/components/exploration/data-utils-no-faux-module.ts

@@ -20,6 +20,7 @@ import {
 import { utcString2userTzDate } from '$utils/date';
 import {
   DatasetLayer,
+  VedaData,
   VedaDatum,
   DatasetData,
   DatasetLayerType
@@ -28,27 +29,27 @@ import {
 // @NOTE: All fns from './date-utils` should eventually move here to get rid of their faux modules dependencies
 // `./date-utils` to be deprecated!!
 
-export const getDatasetLayers = (datasets: VedaDatum<DatasetData>) =>
+export const getDatasetLayers = (datasets: VedaData<DatasetData>) =>
   Object.values(datasets).flatMap((dataset: VedaDatum<DatasetData>) => {
-    return dataset!.data.layers.map((l) => ({
+    return dataset.data.layers.map((l) => ({
       ...l,
       parentDataset: {
-        id: dataset!.data.id,
-        name: dataset!.data.name
+        id: dataset.data.id,
+        name: dataset.data.name
       }
     }));
   });
 
-  export const getLayersFromDataset = (datasets: DatasetData[]) =>
-    Object.values(datasets).map((dataset: DatasetData) => {
-      return dataset!.layers.map((l) => ({
-        ...l,
-        parentDataset: {
-          id: dataset!.id,
-          name: dataset!.name
-        }
-      }));
-    });
+export const getLayersFromDataset = (datasets: DatasetData[]) =>
+  Object.values(datasets).map((dataset: DatasetData) => {
+    return dataset.layers.map((l) => ({
+      ...l,
+      parentDataset: {
+        id: dataset.id,
+        name: dataset.name
+      }
+    }));
+  });
 /**
  * Returns an array of metrics based on the given Dataset Layer configuration.
  * If the layer has metrics defined, it returns only the metrics that match the
@@ -66,14 +67,15 @@ function getInitialMetrics(data: DatasetLayer): DataMetric[] {
 
   const foundMetrics = metricsIds
     .map((metric: string) => {
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       return DATA_METRICS.find((m) => m.id === metric)!;
     })
     .filter(Boolean);
 
   return foundMetrics;
 }
 
-function getInitialColorMap(dataset: DatasetLayer): string|undefined {
+function getInitialColorMap(dataset: DatasetLayer): string | undefined {
   return dataset.sourceParams?.colormap_name;
 }
 

app/scripts/components/exploration/types.d.ts.ts

@@ -90,7 +90,7 @@ export interface EnhancedDatasetLayer extends DatasetLayer {
   parentDataset: ParentDatset;
 }
 
-export interface DatasetData extends EnhancedDatasetLayer {
+export interface EADatasetDataLayer extends EnhancedDatasetLayer {
   isPeriodic: boolean;
   timeDensity: TimeDensity;
   domain: Date[];
@@ -145,7 +145,7 @@ export interface VizDatasetError {
 
 export interface VizDatasetSuccess {
   status: DatasetStatus.SUCCESS;
-  data: DatasetData;
+  data: EADatasetDataLayer;
   error: null;
   settings: DatasetSettings;
   meta?: DatasetMeta;

app/scripts/index.ts

@@ -1,6 +1,7 @@
 import Block from './components/common/blocks';
 import Image from './components/common/blocks/images';
 import MapBlock from './components/common/blocks/block-map';
+import { ScrollytellingBlock } from './components/common/blocks/scrollytelling';
 import Figure from './components/common/blocks/figure';
 import { ContentBlockProse as Prose } from './styles/content-block';
 import MDXImage, { Caption } from './components/common/blocks/images';
@@ -22,7 +23,7 @@ import type {
   InternalNavLink,
   NavItemType
 } from '$components/common/page-header/types';
-import type { DatasetData, StoryData } from '$types/veda';
+import type { DatasetData, StoryData, VedaData } from '$types/veda';
 
 import ExplorationAndAnalysis from '$components/exploration';
 import useTimelineDatasetAtom from '$components/exploration/hooks/use-timeline-dataset-atom';
@@ -58,6 +59,7 @@ export {
   Caption,
   Chapter,
   Chart,
+  ScrollytellingBlock,
   Table,
   Embed,
   MapBlock,
@@ -83,6 +85,7 @@ export {
   InternalNavLink,
   DatasetData,
   StoryData,
+  VedaData,
 
   // STATE
   timelineDatasetsAtom,