fix: Consolidate RasterPaintLayer (#1607)

**Related Ticket:** #1545

### Description of Changes
- [x] I need to confirm how we can get wmts tile url from non raster
timeseries data.


### Validation / Testing

Load all types of datasets (raster, CMR ([HLS
data](https://deploy-preview-837--visex.netlify.app/exploration?datasets=%5B%7B%22id%22%3A%22HLSL30_2.0_false_color%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%7D%7D%2C%7B%22id%22%3A%22HLSL30_2.0_true_color%22%2C%22settings%22%3A%7B%22isVisible%22%3Afalse%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%7D%7D%2C%7B%22id%22%3A%22HLSS30_2.0_false_color%22%2C%22settings%22%3A%7B%22isVisible%22%3Atrue%2C%22opacity%22%3A100%2C%22analysisMetrics%22%3A%5B%7B%22id%22%3A%22mean%22%2C%22label%22%3A%22Average%22%2C%22chartLabel%22%3A%22Average%22%2C%22themeColor%22%3A%22infographicB%22%7D%2C%7B%22id%22%3A%22std%22%2C%22label%22%3A%22St+Deviation%22%2C%22chartLabel%22%3A%22St+Deviation%22%2C%22themeColor%22%3A%22infographicD%22%7D%5D%7D%7D%5D&taxonomy=%7B%7D&search=&date=2024-08-30T15%3A00%3A00.000Z&aois=%5B%5D&dateRange=)
- you will need to zoom to minnesota to see the data), WMS (any ESRI
data that @Slesa added:
https://deploy-preview-1607--veda-ui.netlify.app/exploration?search=arcgis&datasets=%5B%5D&taxonomy=%7B%7D
) - I believe we no longer have a Zarr dataset on production). Ensure
they are working as expected. 'Expectation' includes tile loading,
zooming to the dataset for raster timeseries data, datetime change, and
'Load into GIS' functionality.

@aboydnw - Can I ask to test if all the layers work as expected? I
created a preview on veda config in case this helps:
NASA-IMPACT/veda-config#837
@slesaad - Can you check if I am not missing anything from wms layer?

Author: hanbyul-here

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

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

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

@@ -8,7 +8,15 @@ import { useRequestStatus } from './hooks';
 import { userTzDate2utcString } from '$utils/date';
 
 export function CMRTimeseries(props: BaseTimeseriesProps) {
-  const { id, date, sourceParams, onStatusChange } = props;
+  const {
+    id,
+    date,
+    sourceParams,
+    onStatusChange,
+    hidden,
+    opacity,
+    generatorOrder
+  } = props;
   const start_datetime = userTzDate2utcString(startOfDay(date));
   const end_datetime = userTzDate2utcString(endOfDay(date));
   const tileParams = {
@@ -28,6 +36,14 @@ export function CMRTimeseries(props: BaseTimeseriesProps) {
       tileParams={tileParams}
       generatorPrefix='cmr-timeseries'
       onStatusChange={changeStatus}
+      hidden={hidden}
+      opacity={opacity}
+      generatorOrder={generatorOrder}
+      metadataFormatter={(tilejsonData) => {
+        return {
+          xyzTileUrl: tilejsonData?.tiles[0]
+        };
+      }}
     />
   );
 }

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

@@ -1,12 +1,13 @@
 import { useEffect, useMemo } from 'react';
-import qs from 'qs';
 import { RasterSourceSpecification, RasterLayerSpecification } from 'mapbox-gl';
-
+import { requestQuickCache } from '../utils';
 import { BaseGeneratorParams } from '../types';
 import useMapStyle from '../hooks/use-map-style';
 import useGeneratorParams from '../hooks/use-generator-params';
 import { STATUS_KEY } from './hooks';
 
+import { formatTitilerParameter } from './utils';
+import { TileJSON } from '$types/veda';
 import { ActionStatus, S_SUCCEEDED } from '$utils/status';
 
 interface RasterPaintLayerProps extends BaseGeneratorParams {
@@ -17,6 +18,11 @@ interface RasterPaintLayerProps extends BaseGeneratorParams {
   tileParams: Record<string, any>;
   generatorPrefix?: string;
   reScale?: { min: number; max: number };
+  metadataFormatter?: (
+    tileJsonData: TileJSON | null,
+    tileParamsAsString: string
+  ) => Record<string, any>;
+  sourceParamFormatter?: (tileUrl: string) => Record<string, any>;
   onStatusChange?: (params: {
     status: ActionStatus;
     context: STATUS_KEY;
@@ -34,6 +40,8 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
     colorMap,
     reScale,
     generatorPrefix = 'raster',
+    metadataFormatter,
+    sourceParamFormatter = (tileUrl) => ({ url: tileUrl }),
     onStatusChange
   } = props;
   const { updateStyle } = useMapStyle();
@@ -60,88 +68,82 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
 
   useEffect(
     () => {
-      // Create a modified version of the parameters
-      const processedParams = { ...updatedTileParams } as {
-        reScale?: number[];
-        colormap_name?: string;
-        bands?: string[];
-        assets?: string[];
-        [key: string]: any;
-      };
-
-      // bands and assets need to be sent as repeat query params
-      const { bands, assets, bbox, ...regularParams } = processedParams;
-
-      const repeatParams: Record<string, string[] | undefined> = {};
-      if (Array.isArray(bands)) repeatParams.bands = bands;
-      if (Array.isArray(assets)) repeatParams.assets = assets;
-
-      const regularParamsString = qs.stringify(regularParams, {
-        arrayFormat: 'comma'
-      });
+      if (!tileApiEndpoint) return;
+      const controller = new AbortController();
+      async function run() {
+        // Create a modified version of the parameters
+        const tileParamsAsString = formatTitilerParameter(updatedTileParams);
+        const tileUrl = `${tileApiEndpoint}?${tileParamsAsString}`;
+
+        try {
+          let tileUrlMetadata;
+          if (!generatorPrefix.includes('wms')) {
+            // wms data doesn't have an endpoint for tlejson
+            const tileJsonData = await requestQuickCache<any>({
+              url: tileUrl,
+              method: 'GET',
+              payload: null,
+              controller
+            });
+
+            tileUrlMetadata =
+              metadataFormatter &&
+              metadataFormatter(tileJsonData, tileParamsAsString);
+          } else {
+            tileUrlMetadata =
+              metadataFormatter && metadataFormatter(null, tileParamsAsString);
+          }
 
-      const repeatParamsString = qs.stringify(repeatParams, {
-        arrayFormat: 'repeat'
-      });
+          const mapSourceParams = sourceParamFormatter(tileUrl);
 
-      // Need to use raw query params for bbox, because it's a mapbox template query param
-      const bboxString = bbox ? `bbox=${bbox}` : '';
-
-      const tileParamsAsString = [
-        regularParamsString,
-        repeatParamsString,
-        bboxString
-      ]
-        .filter(Boolean) // Remove empty strings
-        .join('&');
-
-      // Use url only if the request is being made to a tilejson endpoint (eg. raster)
-      // otherwise use tiles array (eg. wms)
-      const mapSourceParams = tileApiEndpoint?.includes('tilejson')
-        ? {
-            url: `${tileApiEndpoint}?${tileParamsAsString}`
-          }
-        : {
-            tiles: [`${tileApiEndpoint}?${tileParamsAsString}`],
-            tileSize: 256
+          const rasterSource: RasterSourceSpecification = {
+            type: 'raster',
+            ...mapSourceParams
           };
 
-      const zarrSource: RasterSourceSpecification = {
-        type: 'raster',
-        ...mapSourceParams
-      };
-
-      const rasterOpacity = typeof opacity === 'number' ? opacity / 100 : 1;
-
-      const zarrLayer: RasterLayerSpecification = {
-        id: id,
-        type: 'raster',
-        source: id,
-        paint: {
-          'raster-opacity': hidden ? 0 : rasterOpacity,
-          'raster-opacity-transition': {
-            duration: 320
-          }
-        },
-        minzoom: minZoom,
-        metadata: {
-          layerOrderPosition: 'raster'
-        }
-      };
-
-      const sources = {
-        [id]: zarrSource
-      };
-      const layers = [zarrLayer];
+          const rasterOpacity = typeof opacity === 'number' ? opacity / 100 : 1;
+
+          const rasterLayer: RasterLayerSpecification = {
+            id: id,
+            type: 'raster',
+            source: id,
+            paint: {
+              'raster-opacity': hidden ? 0 : rasterOpacity,
+              'raster-opacity-transition': {
+                duration: 320
+              }
+            },
+            minzoom: minZoom,
+            metadata: {
+              id,
+              layerOrderPosition: 'raster',
+              ...tileUrlMetadata
+            }
+          };
 
-      updateStyle({
-        generatorId,
-        sources,
-        layers,
-        params: generatorParams
-      });
-      if (onStatusChange)
-        onStatusChange({ status: S_SUCCEEDED, context: STATUS_KEY.Layer });
+          const sources = {
+            [id]: rasterSource
+          };
+          const layers = [rasterLayer];
+
+          updateStyle({
+            generatorId,
+            sources,
+            layers,
+            params: generatorParams
+          });
+          if (onStatusChange)
+            onStatusChange({
+              status: S_SUCCEEDED,
+              context: STATUS_KEY.Layer
+            });
+        } catch (e) {
+          // eslint-disable-next-line no-console
+          console.error(e);
+          throw e;
+        }
+      }
+      run();
     },
     // sourceParams not included, but using a stringified version of it to
     // detect changes (haveSourceParamsChanged)