Pass layer data to layer components instead of specifying

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

@@ -378,16 +378,14 @@ function Scrollytelling(props) {
  <LayerCmp
  key={runtimeData.id}
  id={runtimeData.id}
- mapInstance={mapRef.current}
- stacCol={layer.stacCol}
+ mapInstance={mapRef.current!}
+ layerData={layer}
  date={runtimeData.datetime}
- sourceParams={layer.sourceParams}
- zoomExtent={layer.zoomExtent}
  onStatusChange={onLayerLoadSuccess}
  isHidden={
  !activeChapterLayerId ||
  activeChapterLayerId !== runtimeData.id ||
- activeChapter.showBaseMap
+ !!activeChapter.showBaseMap
  }
  />
  );
@@ -468,16 +466,14 @@ function Scrollytelling(props) {
  <LayerCmp
  key={runtimeData.id}
  id={runtimeData.id}
- mapInstance={mapRef.current}
- stacCol={layer.stacCol}
+ mapInstance={mapRef.current!}
  date={runtimeData.datetime}
- sourceParams={layer.sourceParams}
- zoomExtent={layer.zoomExtent}
+ layerData={layer}
  onStatusChange={onLayerLoadSuccess}
  isHidden={
  !activeChapterLayerId ||
  activeChapterLayerId !== runtimeData.id ||
- activeChapter.showBaseMap
+ !!activeChapter.showBaseMap
  }
  />
  );

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

@@ -398,12 +398,9 @@ function MapboxMapComponent(props: MapboxMapProps, ref) {
  {isMapLoaded && baseLayerResolvedData && BaseLayerComponent && (
  <BaseLayerComponent
  id={`base-${baseLayerResolvedData.id}`}
- stacCol={baseLayerResolvedData.stacCol}
- assetUrl={baseLayerResolvedData.assetUrl}
- mapInstance={mapRef.current}
+ layerData={baseLayerResolvedData}
+ mapInstance={mapRef.current!}
  date={date}
- sourceParams={baseLayerResolvedData.sourceParams}
- zoomExtent={baseLayerResolvedData.zoomExtent}
  onStatusChange={onBaseLayerStatusChange}
  />
  )}
@@ -448,11 +445,9 @@ function MapboxMapComponent(props: MapboxMapProps, ref) {
  CompareLayerComponent && (
  <CompareLayerComponent
  id={`compare-${compareLayerResolvedData.id}`}
- stacCol={compareLayerResolvedData.stacCol}
- mapInstance={mapCompareRef.current}
- date={compareToDate}
- sourceParams={compareLayerResolvedData.sourceParams}
- zoomExtent={compareLayerResolvedData.zoomExtent}
+ layerData={compareLayerResolvedData}
+ mapInstance={mapCompareRef.current!}
+ date={compareToDate!}
  onStatusChange={onCompareLayerStatusChange}
  />
  )}

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

@@ -36,15 +36,17 @@ const LOG = true;
 
 const FIT_BOUNDS_PADDING = 32;
 
-interface MapLayerRasterTimeseriesProps {
+export interface MapLayerRasterTimeseriesProps {
  id: string;
- stacCol: string;
  date?: Date;
  mapInstance: MapboxMap;
- sourceParams: object;
- zoomExtent?: [number, number];
  onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
- isHidden: boolean;
+ isHidden?: boolean;
+ layerData: {
+ sourceParams?: object;
+ zoomExtent?: number[];
+ stacCol: string;
+ };
 }
 
 export interface StacFeature {
@@ -64,16 +66,8 @@ interface Statuses {
 }
 
 export function MapLayerRasterTimeseries(props: MapLayerRasterTimeseriesProps) {
- const {
- id,
- stacCol,
- date,
- mapInstance,
- sourceParams,
- zoomExtent,
- onStatusChange,
- isHidden
- } = props;
+ const { id, date, mapInstance, onStatusChange, isHidden } = props;
+ const { sourceParams, zoomExtent, stacCol } = props.layerData;
 
  const theme = useTheme();
  const { updateStyle } = useMapStyle();

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

@@ -19,9 +19,19 @@ import {
  DatasetDatumReturnType,
  DatasetLayerCompareNormalized
 } from 'veda';
-import { MapLayerRasterTimeseries, StacFeature } from './raster-timeseries';
-import { MapLayerVectorTimeseries } from './vector-timeseries';
-import { MapLayerZarrTimeseries } from './zarr-timeseries';
+import {
+ MapLayerRasterTimeseries,
+ MapLayerRasterTimeseriesProps,
+ StacFeature
+} from './raster-timeseries';
+import {
+ MapLayerVectorTimeseries,
+ MapLayerVectorTimeseriesProps
+} from './vector-timeseries';
+import {
+ MapLayerZarrTimeseries,
+ MapLayerZarrTimeseriesProps
+} from './zarr-timeseries';
 
 import { userTzDate2utcString, utcString2userTzDate } from '$utils/date';
 import { AsyncDatasetLayer } from '$context/layer-data';
@@ -31,7 +41,11 @@ import { HintedError } from '$utils/hinted-error';
 export const getLayerComponent = (
  isTimeseries: boolean,
  layerType: 'raster' | 'vector' | 'zarr'
-): FunctionComponent<any> | null => {
+): FunctionComponent<
+ | MapLayerRasterTimeseriesProps
+ | MapLayerVectorTimeseriesProps
+ | MapLayerZarrTimeseriesProps
+> | null => {
  if (isTimeseries) {
  if (layerType === 'raster') return MapLayerRasterTimeseries;
  if (layerType === 'vector') return MapLayerVectorTimeseries;
@@ -71,7 +85,6 @@ export const getCompareLayerData = (
  id: stacCol,
  stacCol,
  type: type || layerData.type,
- assetUrl: layerData.assetUrl,
  zoomExtent: zoomExtent || layerData.zoomExtent,
  sourceParams: defaultsDeep({}, sourceParams, layerData.sourceParams),
  ...passThroughProps

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

@@ -19,28 +19,22 @@ import { useCustomMarker } from './custom-marker';
 import { ActionStatus, S_FAILED, S_LOADING, S_SUCCEEDED } from '$utils/status';
 import { userTzDate2utcString } from '$utils/date';
 
-interface MapLayerVectorTimeseriesProps {
+export interface MapLayerVectorTimeseriesProps {
  id: string;
- stacCol: string;
  date?: Date;
  mapInstance: MapboxMap;
- sourceParams: object;
- zoomExtent?: [number, number];
  onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
- isHidden: boolean;
+ isHidden?: boolean;
+ layerData: {
+ sourceParams?: object;
+ zoomExtent?: number[];
+ stacCol: string;
+ };
 }
 
 export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
- const {
- id,
- stacCol,
- date,
- mapInstance,
- sourceParams,
- zoomExtent,
- onStatusChange,
- isHidden
- } = props;
+ const { id, date, mapInstance, onStatusChange, isHidden } = props;
+ const { sourceParams, zoomExtent, stacCol } = props.layerData;
 
  const theme = useTheme();
  const { updateStyle } = useMapStyle();
@@ -81,7 +75,6 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
  };
  }, [mapInstance, id, stacCol, date, onStatusChange]);
 
-
  const markerLayout = useCustomMarker(mapInstance);
 
  //
@@ -188,7 +181,7 @@ export function MapLayerVectorTimeseries(props: MapLayerVectorTimeseriesProps) {
  'source-layer': 'default',
  layout: {
  ...(markerLayout as any),
- visibility: isHidden ? 'none' : 'visible',
+ visibility: isHidden ? 'none' : 'visible'
  },
  paint: {
  'icon-color': theme.color?.infographicB,

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

@@ -1,61 +1,52 @@
 import { useEffect, useMemo } from 'react';
 import qs from 'qs';
-import {
- AnyLayer,
- AnySourceImpl,
- RasterLayer,
- RasterSource,
-} from 'mapbox-gl';
+import { AnyLayer, AnySourceImpl, RasterLayer, RasterSource } from 'mapbox-gl';
 
 import { useMapStyle } from './styles';
 
-interface MapLayerZarrTimeseriesProps {
+export interface MapLayerZarrTimeseriesProps {
  id: string;
  date?: Date;
- sourceParams: object;
- zoomExtent?: [number, number];
- assetUrl?: string;
- isHidden: boolean;
+ isHidden?: boolean;
+ layerData: {
+ sourceParams?: object;
+ zoomExtent?: number[];
+ assetUrl: string;
+ };
 }
 
 export function MapLayerZarrTimeseries(props: MapLayerZarrTimeseriesProps) {
- const {
- id,
- date,
- sourceParams,
- zoomExtent,
- assetUrl,
- isHidden
- } = props;
+ const { id, date, isHidden } = props;
+ const { sourceParams = {}, zoomExtent, assetUrl } = props.layerData;
 
  const { updateStyle } = useMapStyle();
 
  const minZoom = zoomExtent?.[0] ?? 0;
- const tilesUrl = process.env.API_XARRAY_ENDPOINT;
+ const tilerUrl = process.env.API_XARRAY_ENDPOINT;
+
  //
  // Generate Mapbox GL layers and sources for raster timeseries
  //
  const haveSourceParamsChanged = useMemo(
  () => JSON.stringify(sourceParams),
  [sourceParams]
  );
+
  useEffect(
  () => {
  let layers: AnyLayer[] = [];
  let sources: Record<string, AnySourceImpl> = {};
 
- if (tilesUrl) {
- const tileParams = qs.stringify(
- {
- url: assetUrl,
- time_slice: date,
- ...sourceParams
- }
- );
+ if (tilerUrl) {
+ const tileParams = qs.stringify({
+ url: assetUrl,
+ time_slice: date,
+ ...sourceParams
+ });
 
  const zarrSource: RasterSource = {
  type: 'raster',
- url: `${tilesUrl}?${tileParams}`
+ url: `${tilerUrl}?${tileParams}`
  };
 
  const zarrLayer: RasterLayer = {
@@ -78,10 +69,9 @@ export function MapLayerZarrTimeseries(props: MapLayerZarrTimeseriesProps) {
  };
 
  sources = {
- ...sources,
  [id]: zarrSource
  };
- layers = [...layers, zarrLayer];
+ layers = [zarrLayer];
  }
 
  updateStyle({
@@ -95,7 +85,8 @@ export function MapLayerZarrTimeseries(props: MapLayerZarrTimeseriesProps) {
  updateStyle,
  id,
  date,
- tilesUrl,
+ assetUrl,
+ tilerUrl,
  minZoom,
  haveSourceParamsChanged,
  isHidden

app/scripts/context/layer-data.tsx

@@ -42,9 +42,7 @@ const fetchLayerById = async (
  isPeriodic: data['dashboard:is_periodic'],
  timeDensity: data['dashboard:time_density']
  };
- // TODO: Normalize API data structure
- // For the time being the vector and raster sources have different api
- // endpoints, and different properties to get data from.
+
  if (type === 'vector') {
  const featuresApiEndpoint = data.links.find((l) => l.rel === 'child').href;
  const { data: featuresApiData } = await axios.get(featuresApiEndpoint);
@@ -55,23 +53,23 @@ const fetchLayerById = async (
  domain: featuresApiData.extent.temporal.interval[0]
  }
  };
- }
-
- const defaultData = {
- timeseries: {
- ...commonTimeseriesParams,
- domain: data.summaries ? data.summaries.datetime : data.extent.temporal.interval[0]
- }
- };
-
- if (type === 'zarr') {
- return {
- ...defaultData,
- assetUrl: data.assets.zarr.href
+ } else {
+ const defaultData = {
+ timeseries: {
+ ...commonTimeseriesParams,
+ domain: data.summaries ? data.summaries.datetime : data.extent.temporal.interval[0]
+ }
  };
+
+ if (type === 'zarr') {
+ return {
+ ...defaultData,
+ assetUrl: data.assets.zarr.href
+ };
+ } else {
+ return defaultData;
+ }
  }
-
- return defaultData;
 };
 
 // Create a query object for react query.

parcel-resolver-veda/index.d.ts

@@ -54,8 +54,6 @@ declare module 'veda' {
  initialDatetime?: 'newest' | 'oldest' | string;
  projection?: ProjectionOptions;
  type: DatasetLayerType;
- assetUrl?: string;
- stacApiOverride?: string;
  compare: DatasetLayerCompareSTAC | DatasetLayerCompareInternal | null;
  legend?: LayerLegendCategorical | LayerLegendGradient;
  }
@@ -68,7 +66,6 @@ declare module 'veda' {
  extends DatasetLayerCommonCompareProps {
  id: string;
  stacCol: string;
- assetUrl?: string;
  type: DatasetLayerType;
  }