@eodash/eodash 5.0.0-alpha.2.9 → 5.0.0-rc

package/core/client/eodashSTAC/createLayers.js

@@ -0,0 +1,315 @@
+import { registerProjection } from "@/store/actions";
+import { mapEl } from "@/store/states";
+import {
+  extractRoles,
+  getProjectionCode,
+  createLayerID,
+  createAssetID,
+} from "./helpers";
+import log from "loglevel";
+
+/**
+ * @param {string} collectionId
+ * @param {string} title
+ * @param {Record<string,import("stac-ts").StacAsset>} assets
+ * @param {import("stac-ts").StacItem } item
+ * @param {import("ol/layer/WebGLTile").Style} [style]
+ * @param {Record<string, unknown>} [layerConfig]
+ * @param {Record<string, unknown>} [layerDatetime]
+ * @param {object | null} [extraProperties]
+ **/
+export async function createLayersFromAssets(
+  collectionId,
+  title,
+  assets,
+  item,
+  style,
+  layerConfig,
+  layerDatetime,
+  extraProperties,
+) {
+  log.debug("Creating layers from assets");
+  let jsonArray = [];
+  let geoTIFFSources = [];
+  /** @type {number|null} */
+  let geoTIFFIdx = null;
+
+  for (const [idx, ast] of Object.keys(assets).entries()) {
+    // register projection if exists
+    const assetProjection =
+      /** @type {string | number | {name: string, def: string, extent?:number[]} | undefined} */ (
+        assets[ast]?.["proj:epsg"] || assets[ast]?.["eodash:proj4_def"]
+      );
+    await registerProjection(assetProjection);
+
+    if (assets[ast]?.type === "application/geo+json") {
+      const assetId = createAssetID(collectionId, item.id, idx);
+      log.debug("Creating Vector layer from GeoJSON", assetId);
+      const layer = {
+        type: "Vector",
+        source: {
+          type: "Vector",
+          url: assets[ast].href,
+          format: "GeoJSON",
+        },
+        properties: {
+          id: assetId,
+          title,
+          layerDatetime,
+          ...(layerConfig && {
+            layerConfig: {
+              ...layerConfig,
+              style,
+            },
+          }),
+        },
+        ...(!style?.variables && { style }),
+      };
+
+      extractRoles(layer.properties, assets[ast]);
+
+      layer.properties = { ...layer.properties, ...(extraProperties ?? {}) };
+
+      jsonArray.push(layer);
+    } else if (assets[ast]?.type === "image/tiff") {
+      geoTIFFIdx = idx;
+      geoTIFFSources.push({ url: assets[ast].href });
+    }
+  }
+
+  if (geoTIFFSources.length && typeof geoTIFFIdx === "number") {
+    const geotiffSourceID = collectionId + ";:;GeoTIFF";
+    log.debug("Creating WebGLTile layer from GeoTIFF", geotiffSourceID);
+    log.debug("Configured Sources", geoTIFFSources);
+    const layer = {
+      type: "WebGLTile",
+      source: {
+        type: "GeoTIFF",
+        normalize: !style,
+        interpolate: false,
+        sources: geoTIFFSources,
+      },
+      properties: {
+        id: createAssetID(collectionId, item.id, geoTIFFIdx),
+        title,
+        layerConfig,
+        layerDatetime,
+      },
+      style,
+    };
+    if (extraProperties) {
+      layer.properties = { ...layer.properties, ...extraProperties };
+    }
+    jsonArray.push(layer);
+  }
+
+  return jsonArray;
+}
+
+/**
+ * @param {string} collectionId
+ * @param {import('stac-ts').StacItem} item
+ * @param {string} title
+ * @param {Record<string,any>} [layerDatetime]
+ * @param {object | null} [extraProperties]
+ */
+export const createLayersFromLinks = async (
+  collectionId,
+  title,
+  item,
+  layerDatetime,
+  extraProperties,
+) => {
+  log.debug("Creating layers from links");
+  /** @type {Record<string,any>[]} */
+  const jsonArray = [];
+  const wmsArray = item.links.filter((l) => l.rel === "wms");
+  const wmtsArray = item.links.filter((l) => l.rel === "wmts");
+  const xyzArray = item.links.filter((l) => l.rel === "xyz") ?? [];
+
+  // Taking projection code from main map view, as main view defines
+  // projection for comparison map
+  const viewProjectionCode = mapEl?.value?.projection || "EPSG:3857";
+
+  for (const wmsLink of wmsArray ?? []) {
+    // Registering setting sub wms link projection
+
+    const wmsLinkProjection =
+      /** @type {number | string | {name: string, def: string} | undefined} */
+      (wmsLink?.["proj:epsg"] || wmsLink?.["eodash:proj4_def"]);
+
+    await registerProjection(wmsLinkProjection);
+
+    const linkProjectionCode =
+      getProjectionCode(wmsLinkProjection) || "EPSG:4326";
+    // Projection code need to be based on map view projection to make sure
+    // tiles are reloaded when changing projection
+    const linkId = createLayerID(
+      collectionId,
+      item.id,
+      wmsLink,
+      viewProjectionCode,
+    );
+    log.debug("WMS Layer added", linkId);
+    const tileSize = /** @type {number[]} */ (
+      "wms:tilesize" in wmsLink
+        ? [wmsLink["wms:tilesize"], wmsLink["wms:tilesize"]]
+        : [512, 512]
+    );
+    let json = {
+      type: "Tile",
+      properties: {
+        id: linkId,
+        title: wmsLink.title || title || item.id,
+        layerDatetime,
+      },
+      source: {
+        type: "TileWMS",
+        url: wmsLink.href,
+        projection: linkProjectionCode,
+        tileGrid: {
+          tileSize,
+        },
+        params: {
+          LAYERS: wmsLink["wms:layers"],
+          TILED: true,
+        },
+      },
+    };
+    if ("wms:version" in wmsLink) {
+      // @ts-expect-error no type for eox-map
+      json.source.params["VERSION"] = wmsLink["wms:version"];
+    }
+    extractRoles(json.properties, wmsLink);
+    if ("wms:dimensions" in wmsLink) {
+      // Expand all dimensions into the params attribute
+      Object.assign(json.source.params, wmsLink["wms:dimensions"]);
+    }
+    if (extraProperties !== null) {
+      json.properties = { ...json.properties, ...extraProperties };
+    }
+    jsonArray.push(json);
+  }
+
+  for (const wmtsLink of wmtsArray ?? []) {
+    // Registering setting sub wmts link projection
+
+    const wmtsLinkProjection =
+      /** @type {number | string | {name: string, def: string} | undefined} */
+      (wmtsLink?.["proj:epsg"] || wmtsLink?.["eodash:proj4_def"]);
+
+    await registerProjection(wmtsLinkProjection);
+    const projectionCode = getProjectionCode(wmtsLinkProjection || "EPSG:3857");
+    // TODO: WARNING! This is a temporary project specific implementation
+    // that needs to be removed once catalog and wmts creation from capabilities
+    // combined with custom view projections is solved
+    let json;
+    const linkId = createLayerID(
+      collectionId,
+      item.id,
+      wmtsLink,
+      viewProjectionCode,
+    );
+    const dimensions = /** @type { {style:any} & Record<string,any> } */ (
+      wmtsLink["wmts:dimensions"] || {}
+    );
+    let { style, ...dimensionsWithoutStyle } = { ...dimensions };
+    let extractedStyle = /** @type { string } */ (style || "default");
+
+    if (wmtsLink.title === "wmts capabilities") {
+      log.debug(
+        "Warning: WMTS Layer from capabilities added, function needs to be updated",
+        linkId,
+      );
+      json = {
+        type: "Tile",
+        properties: {
+          id: linkId,
+          title: title || item.id,
+          layerDatetime,
+        },
+        source: {
+          type: "WMTS",
+          // TODO: Hard coding url as the current one set is for capabilities
+          url: "https://wmts.marine.copernicus.eu/teroWmts",
+          layer: wmtsLink["wmts:layer"],
+          style: extractedStyle,
+          // TODO: Hard coding matrixSet until we find solution to wmts creation from capabilities
+          matrixSet: "EPSG:3857",
+          projection: projectionCode,
+          tileGrid: {
+            tileSize: [128, 128],
+          },
+          dimensions: dimensionsWithoutStyle,
+        },
+      };
+    } else {
+      log.debug(
+        "Warning: WMTS Layer from capabilities added, function needs to be updated",
+        linkId,
+      );
+      json = {
+        type: "Tile",
+        properties: {
+          id: linkId,
+          title: wmtsLink.title || title || item.id,
+          layerDatetime,
+        },
+        source: {
+          type: "WMTS",
+          url: wmtsLink.href,
+          layer: wmtsLink["wmts:layer"],
+          style: extractedStyle,
+          matrixSet: wmtsLink.matrixSet || "EPSG:3857",
+          projection: projectionCode,
+          tileGrid: {
+            tileSize: [512, 512],
+          },
+          dimensions: dimensionsWithoutStyle,
+        },
+      };
+    }
+    extractRoles(json.properties, wmtsLink);
+    if (extraProperties !== null) {
+      json.properties = { ...json.properties, ...extraProperties };
+    }
+    jsonArray.push(json);
+  }
+
+  for (const xyzLink of xyzArray ?? []) {
+    const xyzLinkProjection =
+      /** @type {number | string | {name: string, def: string} | undefined} */
+      (xyzLink?.["proj:epsg"] || xyzLink?.["eodash:proj4_def"]);
+
+    await registerProjection(xyzLinkProjection);
+    const projectionCode = getProjectionCode(xyzLinkProjection || "EPSG:3857");
+    const linkId = createLayerID(
+      collectionId,
+      item.id,
+      xyzLink,
+      viewProjectionCode,
+    );
+    log.debug("XYZ Layer added", linkId);
+    let json = {
+      type: "Tile",
+      properties: {
+        id: linkId,
+        title: xyzLink.title || title || item.id,
+        roles: xyzLink.roles,
+        layerDatetime,
+      },
+      source: {
+        type: "XYZ",
+        url: xyzLink.href,
+        projection: projectionCode,
+      },
+    };
+
+    extractRoles(json.properties, xyzLink);
+    if (extraProperties !== null) {
+      json.properties = { ...json.properties, ...extraProperties };
+    }
+    jsonArray.push(json);
+  }
+  return jsonArray;
+};

package/core/client/eodashSTAC/helpers.js

@@ -0,0 +1,375 @@
+import { toAbsolute } from "stac-js/src/http.js";
+import axios from "@/plugins/axios";
+import log from "loglevel";
+
+/** @param {import("stac-ts").StacLink[]} [links] */
+export function generateFeatures(links) {
+  /**
+   * @type {import("geojson").Feature[]}
+   */
+  const features = [];
+  links?.forEach((element) => {
+    if (element.rel === "item" && "latlng" in element) {
+      const [lat, lon] = /** @type {string} */ (element.latlng)
+        .split(",")
+        .map((it) => Number(it));
+      features.push({
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [lon, lat],
+        },
+        properties: { id: element.id },
+      });
+    }
+  });
+  const geojsonObject = {
+    type: "FeatureCollection",
+    crs: {
+      type: "name",
+      properties: {
+        name: "EPSG:4326",
+      },
+    },
+    features,
+  };
+  return geojsonObject;
+}
+
+/**
+ * Sperates and extracts layerConfig (jsonform schema & legend) from a style json
+ *
+ *  @param { import("ol/layer/WebGLTile").Style & { jsonform?: Record<string,any> } & { legend?: Record<string,any> } } [style] */
+export function extractLayerConfig(style) {
+  /** @type {Record<string,unknown> | undefined} */
+  let layerConfig = undefined;
+  if (style?.jsonform) {
+    layerConfig = { schema: style.jsonform, type: "style" };
+    style = { ...style };
+    delete style.jsonform;
+    if (style?.legend) {
+      layerConfig.legend = style.legend;
+      delete style.legend;
+    }
+  }
+  log.debug(
+    "extracted layerConfig",
+    JSON.parse(JSON.stringify({ layerConfig, style })),
+  );
+
+  return { layerConfig, style };
+}
+
+/**
+ * Function to extract collection urls from an indicator
+ * @param {import("stac-ts").StacCatalog
+ *   | import("stac-ts").StacCollection
+ *   | import("stac-ts").StacItem
+ *   | null
+ * } stacObject
+ * @param {string} basepath
+ */
+export function extractCollectionUrls(stacObject, basepath) {
+  /** @type {string[]} */
+  const collectionUrls = [];
+  // Support for two structure types, flat and indicator, simplified here:
+  // Flat assumes Catalog-Collection-Item
+  // Indicator assumes Catalog-Collection-Collection-Item
+
+  const children = stacObject?.links?.filter(
+    (link) => link.rel === "child" && link.type?.includes("json"),
+  );
+  if (!children?.length) {
+    collectionUrls.push(basepath);
+    return collectionUrls;
+  }
+  children.forEach((link) => {
+    collectionUrls.push(toAbsolute(link.href, basepath));
+  });
+  return collectionUrls;
+}
+
+/**
+ * Assign extracted roles to layer properties
+ * @param {Record<string,any>} properties
+ * @param {import("stac-ts").StacLink | import("stac-ts").StacAsset} linkOrAsset
+ * */
+export const extractRoles = (properties, linkOrAsset) => {
+  const roles = /** @type {string[]} */ (linkOrAsset.roles);
+  roles?.forEach((role) => {
+    if (role === "visible") {
+      properties.visible = true;
+    }
+    if (role === "overlay" || role === "baselayer") {
+      properties.group = role;
+    }
+
+    return properties;
+  });
+};
+
+/**
+ * Extracts style JSON from a STAC Item
+ * @param {import("stac-ts").StacItem} item
+ * @param {string} itemUrl
+ * @returns
+ **/
+export const fetchStyle = async (item, itemUrl) => {
+  const styleLink = item.links.find((link) => link.rel.includes("style"));
+  if (styleLink) {
+    let url = "";
+    if (styleLink.href.startsWith("http")) {
+      url = styleLink.href;
+    } else {
+      url = toAbsolute(styleLink.href, itemUrl);
+    }
+
+    /** @type {import("ol/layer/WebGLTile").Style & {jsonform?:Record<string,any>}} */
+    const styleJson = await axios.get(url).then((resp) => resp.data);
+
+    log.debug("fetched styles JSON", JSON.parse(JSON.stringify(styleJson)));
+    return { ...styleJson };
+  }
+};
+
+/**
+ * Return projection code which is to be registered in `eox-map`
+ * @param {string|number|{name: string, def: string}} [projection]
+ * @returns {string}
+ */
+export const getProjectionCode = (projection) => {
+  let code = projection;
+  switch (typeof projection) {
+    case "number":
+      code = `EPSG:${projection}`;
+      break;
+    case "string":
+      code = projection;
+      break;
+    case "object":
+      code = projection?.name;
+  }
+  return /** @type {string} */ (code);
+};
+
+/**
+ * Extracts layercontrol LayerDatetime property from STAC Links
+ * @param {import("stac-ts").StacLink[]} [links]
+ * @param {string|null} [currentStep]
+ **/
+export const extractLayerDatetime = (links, currentStep) => {
+  if (!currentStep || !links?.length) {
+    return undefined;
+  }
+
+  // check if links has a datetime value
+  // TODO: consider datetime ranges
+  const hasDatetime = links.some((l) => typeof l.datetime === "string");
+  if (!hasDatetime) {
+    return undefined;
+  }
+
+  /** @type {string[]} */
+  const controlValues = [];
+  try {
+    currentStep = new Date(currentStep).toISOString();
+
+    links.reduce((vals, link) => {
+      if (link.datetime && link.rel === "item") {
+        vals.push(
+          new Date(/** @type {string} */ (link.datetime)).toISOString(),
+        );
+      }
+      return vals;
+    }, controlValues);
+  } catch (e) {
+    console.warn("[eodash] not supported datetime format was provided", e);
+    return undefined;
+  }
+  // not enough controlValues
+  if (controlValues.length <= 1) {
+    return undefined;
+  }
+
+  // item datetime is not included in the item links datetime
+  if (!controlValues.includes(currentStep)) {
+    return undefined;
+  }
+
+  return {
+    controlValues,
+    currentStep,
+    slider: true,
+    play: false,
+    displayFormat: "DD MMMM YYYY",
+  };
+};
+
+/**
+ * Find JSON layer by ID
+ *  @param {string} layer
+ *  @param {Record<string, any>[]} layers
+ *  @returns {Record<string,any> | undefined}
+ **/
+export const findLayer = (layers, layer) => {
+  for (const lyr of layers) {
+    if (lyr.type === "Group") {
+      const found = findLayer(lyr.layers, layer);
+      if (!found) {
+        continue;
+      }
+      return found;
+    }
+    if (lyr.properties.id === layer) {
+      return lyr;
+    }
+  }
+};
+
+/**
+ * Removes the layer with the id provided and injects an array of layers in its position
+ * @param {Record<string,any>[]} currentLayers
+ * @param {string} oldLayer - id of the layer to be replaced
+ * @param {Record<string,any>[]} newLayers - array of layers to replace the old layer
+ * @returns {Record<string,any>[] | undefined}
+ */
+export const replaceLayer = (currentLayers, oldLayer, newLayers) => {
+  const oldLayerIdx = currentLayers.findIndex(
+    (l) => l.properties.id === oldLayer,
+  );
+
+  if (oldLayerIdx !== -1) {
+    log.debug(
+      "Replacing layer",
+      oldLayer,
+      "with",
+      newLayers.map((l) => l.properties.id),
+    );
+    currentLayers.splice(oldLayerIdx, 1, ...newLayers);
+    return currentLayers;
+  }
+
+  for (const l of currentLayers) {
+    if (l.type === "Group") {
+      const updatedGroupLyrs = replaceLayer(l.layers, oldLayer, newLayers);
+      if (updatedGroupLyrs?.length) {
+        l.layers = updatedGroupLyrs;
+        return currentLayers;
+      }
+    }
+  }
+};
+
+/**
+ * Extracts the STAC collection which the layer was created from.
+ *
+ * @param {import('../eodashSTAC/EodashCollection.js').EodashCollection[]} indicators
+ * @param {import('ol/layer').Layer} layer
+ */
+export const getColFromLayer = async (indicators, layer) => {
+  // init cols
+  const collections = await Promise.all(
+    indicators.map((ind) => ind.fetchCollection()),
+  );
+  const [collectionId, itemId, ..._other] = layer.get("id").split(";:;");
+
+  const chosen = collections.find((col) => {
+    const isInd =
+      col.id === collectionId &&
+      col.links?.some(
+        (link) => link.rel === "item" && link.href.includes(itemId),
+      );
+    return isInd;
+  });
+  return indicators.find((ind) => ind.collectionStac?.id === chosen?.id);
+};
+
+/**
+ * Generates layer specific ID from STAC Links
+ * related functions are: {@link assignProjID} & {@link createAssetID}
+ *
+ * @param {string} collectionId
+ * @param {string} itemId
+ * @param {import('stac-ts').StacLink} link
+ * @param {string} projectionCode
+ *
+ */
+export const createLayerID = (collectionId, itemId, link, projectionCode) => {
+  const linkId = link.id || link.title || link.href;
+  let lId = `${collectionId ?? ""};:;${itemId ?? ""};:;${linkId ?? ""};:;${projectionCode ?? ""}`;
+  // If we are looking at base layers and overlays we remove the collection and item part
+  // as we want to make sure tiles are not reloaded when switching layers
+  if (
+    /** @type {string[]} */
+    (link.roles)?.find((r) => ["baselayer", "overlay"].includes(r))
+  ) {
+    lId = `${linkId ?? ""};:;${projectionCode ?? ""}`;
+  }
+  log.debug("Generated Layer ID", lId);
+  return lId;
+};
+
+/**
+ * Generates layer specific ID from STAC assets, related functions are: {@link assignProjID} & {@link createLayerID}
+ *
+ * @param {string} collectionId
+ * @param {string} itemId
+ * @param {number} index
+ *
+ */
+export const createAssetID = (collectionId, itemId, index) => {
+  let lId = `${collectionId ?? ""};:;${itemId ?? ""};:;${index ?? ""}`;
+  log.debug("Generated Asset ID", lId);
+  return lId;
+};
+
+/**
+ * Assigns projection code to the layer ID
+ * @param {import("stac-ts").StacItem} item
+ * @param {import("stac-ts").StacLink | import("stac-ts").StacAsset} linkOrAsset
+ * @param {string} id - {@link createLayerID} & {@link extractRoles}
+ * @param {{ properties:{id:string}  & Record<string, any> }& Record<string,any>} layer
+ * @returns
+ */
+export function assignProjID(item, linkOrAsset, id, layer) {
+  const indicatorProjection =
+    /** @type { string | undefined} */
+    (item?.["proj:epsg"]) ||
+    /** @type { {name?: string} | undefined} */
+    (item?.["eodash:mapProjection"])?.name ||
+    "EPSG:3857";
+
+  const idArr = id.split(";:;");
+
+  idArr.pop();
+  idArr.push(indicatorProjection);
+  const updatedID = idArr.join(";:;");
+  layer.properties.id = updatedID;
+
+  log.debug("Updating layer id", updatedID);
+
+  return updatedID;
+}
+
+/**
+ * creates a structured clone from the layers and
+ * removes all properties from the clone
+ * except the ID and title
+ *
+ * @param {Record<string,any>[]} layers
+ */
+export const removeUnneededProperties = (layers) => {
+  const cloned = structuredClone(layers);
+  cloned.forEach((layer) => {
+    const id = layer.properties.id;
+    const title = layer.properties.title;
+    layer.properties = { id, title };
+    if (layer["interactions"]) {
+      delete layer["interactions"];
+    }
+    if (layer.type === "Group") {
+      layer.layers = removeUnneededProperties(layer.layers);
+    }
+  });
+  return cloned;
+};