@eodash/eodash 5.1.0 → 5.3.0

package/core/client/types.ts

@@ -109,6 +109,14 @@ export interface TEodashDatePicker {
   >["$props"];
 }
 
+/** @group Widgets */
+export interface TEodashTimeSlider {
+  name: "EodashTimeSlider";
+  properties?: InstanceType<
+    typeof import("^/EodashTimeSlider.vue").default
+  >["$props"];
+}
+
 /** @group Widgets */
 export interface TEodashItemFilter {
   name: "EodashItemFilter";
@@ -164,6 +172,12 @@ export interface TEodashLayoutSwitcher {
     typeof import("^/EodashLayoutSwitcher.vue").default
   >["$props"];
 }
+export interface TEodashItemCatalog {
+  name: "EodashItemCatalog";
+  properties?: InstanceType<
+    typeof import("^/EodashItemCatalog/index.vue").default
+  >["$props"];
+}
 
 /** @group Widgets */
 export interface TExportState {
@@ -201,9 +215,11 @@ export type ComponentWidget =
   | TEodashMapBtns
   | TEodashTools
   | TEodashLayoutSwitcher
+  | TEodashItemCatalog
   | TExportState
   | TPopUp
-  | TWidgetsContainer;
+  | TWidgetsContainer
+  | TEodashTimeSlider;
 /**
  * Widget type: `internal` API. Internal widgets are Vue components provided by
  * eodash.
@@ -299,7 +315,14 @@ export interface Template {
 export type MultiTemplates = Record<string, Template>;
 
 /** @ignore */
-export type StacEndpoint = `${string}/catalog.json`;
+export type StacEndpoint =
+  | string
+  | {
+      endpoint: string;
+      api?: boolean;
+      rasterEndpoint?: string;
+      vectorEndpoint?: string;
+    };
 
 /** @group Eodash */
 export interface EodashFont {
@@ -444,7 +467,11 @@ export type EodashStyleJson = import("ol/style/flat").FlatStyleLike & {
   jsonform?: import("json-schema").JSONSchema7;
   tooltip?: { id: string; title?: string; appendix?: string }[];
 };
-
+export type EodashRasterJSONForm = {
+  jsonform: Record<string, any>;
+  legend?: import("@eox/layercontrol/src/components/layer-config.js").EOxLayerControlLayerConfig["layerConfig"]["legend"];
+};
+/** @ignore */
 export type LayersEventBusKeys =
   | "layers:updated"
   | "time:updated"
@@ -452,3 +479,179 @@ export type LayersEventBusKeys =
   | "compareLayers:updated"
   | "compareTime:updated"
   | "compareProcess:updated";
+
+//// STAC API types
+/** @ignore */
+export interface SearchParams {
+  /** Collection IDs to search within */
+  collections: string[];
+  /** Query parameters */
+  query: {
+    datetime?: {
+      eq?: string;
+      in?: string[];
+    };
+    geometry?: Record<string, any>;
+  };
+  /** Maximum number of results to return */
+  limit?: number;
+}
+export interface StacItemsAPIResponse {
+  type: "FeatureCollection";
+  features: import("stac-ts").StacItem[];
+}
+/** @ignore */
+export interface Render {
+  /** REQUIRED. Array of asset keys referencing the assets that are used to make the rendering */
+  assets: string[];
+  /** Optional title of the rendering */
+  title?: string;
+  /** 2 dimensions array of delimited Min,Max range per band. If not provided, the data will not be rescaled. */
+  rescale?: number[][];
+  /** Nodata value to use for the referenced assets. */
+  nodata?: number | string;
+  /** Color map identifier that must be applied for a raster band */
+  colormap_name?: string;
+  /** Color map JSON definition that must be applied for a raster band */
+  colormap?: Record<string, unknown>;
+  /** Color formula that must be applied for a raster band */
+  color_formula?: string;
+  /** Resampling algorithm to apply to the referenced assets. See GDAL resampling algorithm for some examples. */
+  resampling?: string;
+  /** Band arithmetic formula to apply to the referenced assets. */
+  expression?: string;
+  /** Zoom levels range applicable for the visualization */
+  minmax_zoom?: number[];
+}
+/** @ignore */
+export interface TitilerSTACParameters {
+  /** STAC Item URL. Required */
+  url: string;
+  /** asset names. */
+  assets?: string[];
+  /** rio-tiler's math expression with asset names (e.g Asset1_b1/Asset2_b1). */
+  expression?: string;
+  /** tell rio-tiler that each asset is a 1 band dataset, so expression Asset1/Asset2 can be passed. */
+  asset_as_band?: boolean;
+  /** Per asset band math expression (e.g Asset1|1,2,3). */
+  asset_bidx?: string[];
+  /** Overwrite internal Nodata value. */
+  nodata?: string | number;
+  /** Apply dataset internal Scale/Offset. */
+  unscale?: boolean;
+  /** RasterIO resampling algorithm. Defaults to nearest. */
+  resampling?: string;
+  /** WarpKernel resampling algorithm (only used when doing re-projection). Defaults to nearest. */
+  reproject?: string;
+  /** Comma (',') delimited Min,Max range (e.g rescale=0,1000, rescale=0,1000&rescale=0,3000&rescale=0,2000). */
+  rescale?: string[];
+  /** rio-color formula. */
+  color_formula?: string;
+  /** JSON encoded custom Colormap. */
+  colormap?: string;
+  /** rio-tiler color map name. */
+  colormap_name?: string;
+  /** Add mask to the output data. Default is True. */
+  return_mask?: boolean;
+  /** Buffer on each side of the given tile. It must be a multiple of 0.5. Output tilesize will be expanded to tilesize + 2 * buffer (e.g 0.5 = 257x257, 1.0 = 258x258). */
+  buffer?: number;
+  /** Padding to apply to each tile edge. Helps reduce resampling artefacts along edges. Defaults to 0. */
+  padding?: number;
+  /** Custom algorithm name (e.g hillshade). */
+  algorithm?: string;
+  /** JSON encoded algorithm parameters. */
+  algorithm_params?: string;
+}
+/**
+ * Generic GeoJSON Feature interface that can hold additional properties.
+ * @ignore
+ */
+export interface GeoJsonFeature<T = Record<string, any>, G = GeoJSON.Geometry> {
+  type: "Feature";
+  geometry: G;
+  properties: T & Record<string, any>;
+  id?: string | number;
+}
+
+/**
+ * Generic GeoJSON FeatureCollection interface that can hold additional properties.
+ * @ignore
+ */
+export interface GeoJsonFeatureCollection<
+  T = Record<string, any>,
+  G = GeoJSON.Geometry,
+> {
+  type: "FeatureCollection";
+  features: Array<GeoJsonFeature<T, G>>;
+  properties?: T & Record<string, any>;
+}
+/**
+ * Partial STAC Authentication Extension v1.1.0
+ * Generated from https://stac-extensions.github.io/authentication/v1.1.0/schema.json
+ */
+
+export interface AuthScheme {
+  /** Scheme keyword, e.g. http, s3, signedUrl, oauth2, apiKey, openIdConnect */
+  type:
+    | "http"
+    | "s3"
+    | "signedUrl"
+    | "oauth2"
+    | "apiKey"
+    | "openIdConnect"
+    | string;
+
+  description?: string;
+
+  name?: string;
+  in?: string;
+
+  scheme?: string;
+
+  flows?: Record<string, OAuth2Flow | SignedUrlFlow>;
+
+  openIdConnectUrl?: string;
+}
+
+export interface OAuth2Flow {
+  authorizationUrl?: string;
+  tokenUrl?: string;
+  refreshUrl?: string;
+  scopes: Record<string, string>;
+}
+
+
+/** Signed URL flow configuration */
+export interface SignedUrlFlow {
+  authorizationApi: string;
+  method: string;
+  responseField?: string;
+  parameters?: Record<
+    string,
+    {
+      in: "query" | "header" | "body" | string;
+      required: boolean;
+      description?: string;
+      schema?: object;
+    }
+  >;
+}
+
+export interface ApiKeyAuthScheme extends AuthScheme {
+   type: "apiKey",
+   name: string;
+   in: string;
+}
+
+import { StacItem, StacLink, StacAsset } from "stac-ts";
+export interface StacAuthItem extends StacItem {
+  "auth:schemes": {
+    [key: string]: AuthScheme;
+  },
+}
+export interface StacAuthLink extends StacLink {
+  "auth:refs": [string],
+}
+export interface StacAuthAsset extends StacAsset {
+  "auth:refs": [string],
+}

package/core/client/utils/bands-editor/arithmetic.js

@@ -0,0 +1,144 @@
+import { addDraggableBands } from "./dom.js";
+import { createSlotStyles, createSlot, fillSlotWithBand } from "./dom";
+const MUSTACHE_REGEX = /\{\{([^}]+)\}\}/g;
+/**
+ * Build the arithmetic expression interface
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @param {Array<string>} colors - Array of color strings
+ * @param {Array<string>} bands - Array of band identifiers
+ * @param {Array<string>} bandTitles - Array of band titles
+ */
+export function buildArithmeticInterface(editor, colors, bands, bandTitles) {
+  const formulaTemplate = editor.schema.formulaTemplate || "{{A}}";
+
+  const style = createSlotStyles(bands, colors);
+  editor.control?.appendChild(style);
+
+  addDraggableBands(editor, bands, bandTitles);
+
+  editor.control?.appendChild(document.createElement("hr"));
+
+  // Add formula display with embedded slots after the bands
+  addFormulaSlots(editor, formulaTemplate, bands, bandTitles);
+}
+
+/**
+ * Generate the final formula string with band values substituted
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @returns {string} Formula string with substituted values
+ */
+function generateFormulaString(editor) {
+  /** @type {string} */
+  const formulaTemplate = editor.schema.formulaTemplate || "{{A}}";
+
+  const variableValues = editor.variableValues || {};
+
+  return formulaTemplate.replace(MUSTACHE_REGEX, (match, variable) => {
+    const bandValue = variableValues[variable.trim()];
+    return bandValue || match; // Keep placeholder if no value assigned
+  });
+}
+
+/**
+ * Add formula display with embedded circular slots
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @param {string} template - Formula template string
+ * @param {Array<string>} bands - Array of band identifiers
+ * @param {Array<string>} bandTitles - Array of band titles
+ */
+function addFormulaSlots(editor, template, bands, bandTitles) {
+  const formulaContainer = document.createElement("div");
+  formulaContainer.classList.add("slots-container");
+
+  // Initialize slots tracking
+  editor.variableSlots = {};
+
+  // Split the template into parts and create elements
+  const parts = template.split(/(\{\{[^}]+\}\})/);
+
+  parts.forEach((part) => {
+    if (!part) {
+      return;
+    }
+
+    if (!part.match(MUSTACHE_REGEX)) {
+      // This is formula text
+      part = part.trim();
+      if (part) {
+        const textElement = document.createElement("span");
+        textElement.classList.add("formula-text");
+        textElement.textContent = part;
+        formulaContainer.appendChild(textElement);
+      }
+      return;
+    }
+
+    // This is a variable placeholder
+    const variable = part.replace(/[{}]/g, "").trim();
+    const slotElement = createSlot(variable, (e) => {
+      e.preventDefault();
+      const enumValue = e.dataTransfer?.getData("band");
+      if (!enumValue) return;
+
+      const enumIndex = bands.indexOf(enumValue);
+      const title = bandTitles[enumIndex] || enumValue;
+
+      editor.variableValues[variable] = enumValue;
+
+      // Update ALL slots for this variable using unified system
+      updateAllSlotsForVariable(editor, variable, enumValue, title);
+
+      // final formula string as the value
+      //@ts-expect-error todo
+      editor.value = generateFormulaString(editor);
+      editor.onChange(true);
+    });
+    formulaContainer.appendChild(slotElement);
+
+    // Track all slots for this variable
+    if (!editor.variableSlots[variable]) {
+      editor.variableSlots[variable] = [];
+    }
+    editor.variableSlots[variable].push(slotElement);
+  });
+
+  editor.control?.appendChild(formulaContainer);
+
+  // Initialize slots with existing values after all slots are created
+  setTimeout(() => {
+    initializeSlots(editor);
+  });
+}
+
+/**
+ * Initialize all slots with existing values
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ */
+function initializeSlots(editor) {
+  if (editor.variableValues && editor.variableSlots) {
+    Object.keys(editor.variableValues).forEach((variable) => {
+      const enumValue = editor.variableValues[variable];
+      const bands = editor.bands || editor.schema.enum || [];
+      const bandTitles =
+        editor.bandTitles || editor.schema.options?.enum_titles || bands;
+      const enumIndex = bands.indexOf(enumValue);
+      const title = bandTitles[enumIndex] || enumValue;
+      updateAllSlotsForVariable(editor, variable, enumValue, title);
+    });
+  }
+}
+
+/**
+ * Update all slots for a specific variable with band circle
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @param {string} variable - Variable name
+ * @param {string} enumValue - Band value
+ * @param {string} title - Band title
+ */
+function updateAllSlotsForVariable(editor, variable, enumValue, title) {
+  if (editor.variableSlots && editor.variableSlots[variable]) {
+    editor.variableSlots[variable].forEach((slot) => {
+      fillSlotWithBand(slot, enumValue, title);
+    });
+  }
+}

package/core/client/utils/bands-editor/colors.js

@@ -0,0 +1,36 @@
+/**
+ * Generate band colors for the editor
+ * @param {Record<string,any>} schema - JSON schema
+ * @param {string} format - Format type ("bands" or "bands-arithmetic")
+ * @returns {string[]} Array of color strings
+ */
+export function generateBandColors(schema, format) {
+  const bands = format === "bands" ? schema.items?.enum : schema.enum || [];
+  const colors =
+    format === "bands"
+      ? schema.items?.options?.colors
+      : schema.options?.colors || [];
+  if (colors && colors.length === bands.length) {
+    return colors;
+  }
+
+  return bands.map(
+    () =>
+      "#" +
+      Math.floor(Math.random() * 16777215)
+        .toString(16)
+        .padStart(6, "0"),
+  );
+}
+
+/**
+ * Get color for a specific band
+ * @param {string} band - Band identifier
+ * @param {string[]} bands - Array of band identifiers
+ * @param {string[]} colors - Array of color strings
+ * @returns {string} Color string
+ */
+export function getBandColor(band, bands, colors) {
+  const index = bands.indexOf(band);
+  return index !== -1 ? colors[index] : "#000000";
+}

package/core/client/utils/bands-editor/dom.js

@@ -0,0 +1,196 @@
+import { getBandColor } from "./colors.js";
+
+/**
+ * Create band styles
+ * @param {string[]} bands - Array of band identifiers
+ * @param {string[]} colors - Array of color strings
+ * @param {string} additionalStyles - Additional CSS styles
+ * @returns {HTMLStyleElement} Style element
+ */
+export function createBandStyles(bands, colors, additionalStyles = "") {
+  const style = document.createElement("style");
+  style.innerHTML = `
+    [data-band], [data-slot] {
+      display: inline-flex;
+      border: 1px solid darkgrey;
+      border-radius: 50%;
+      height: 40px;
+      aspect-ratio: 1/1;
+      padding: 4px;
+      margin: 2px;
+      align-items: center;
+      justify-content: center;
+      cursor: move;
+      font-size: 10px;
+    }
+    ${bands
+      .map(
+        (band) =>
+          `[data-band="${band}"] { background: ${getBandColor(
+            band,
+            bands,
+            colors,
+          )}; color: black; }`,
+      )
+      .join("\n")}
+    ${additionalStyles}
+  `;
+  return style;
+}
+
+/**
+ * Create a draggable band element.
+ * @param {string} enumValue
+ * @param {string} title
+ */
+export function createBandDiv(enumValue, title) {
+  const div = document.createElement("div");
+  div.dataset.band = enumValue;
+  div.textContent = title;
+  div.draggable = true;
+  div.ondragstart = (e) => {
+    e.dataTransfer?.setData("band", enumValue);
+  };
+  return div;
+}
+
+/**
+ * Add draggable band elements
+ * @param {import("./index.js").BandsEditor} editor - The editor instance
+ * @param {Array<string>} bands - Array of band identifiers
+ * @param {Array<string>} bandTitles - Array of band titles
+ */
+export function addDraggableBands(editor, bands, bandTitles) {
+  bands.forEach((band, index) => {
+    const title = bandTitles[index];
+    const bandDiv = createBandDiv(band, title);
+
+    // createBandDiv already sets up drag functionality
+    editor.control?.appendChild(bandDiv);
+  });
+}
+
+/**
+ * Create unified styles for all slot types
+ * @param {string[]} bands - Array of band identifiers
+ * @param {string[]} colors - Array of color strings
+ * @returns {HTMLStyleElement} Style element with unified slot styles
+ */
+export function createSlotStyles(bands, colors) {
+  const style = document.createElement("style");
+  style.innerHTML = `
+    /* Base styles for all band elements */
+    [data-band] {
+      display: inline-flex;
+      border: 1px solid darkgrey;
+      border-radius: 50%;
+      height: 40px;
+      aspect-ratio: 1/1;
+      padding: 4px;
+      margin: 2px;
+      align-items: center;
+      justify-content: center;
+      cursor: move;
+      font-size: 10px;
+    }
+
+    /* Band color styles */
+    ${bands
+      .map(
+        (band) =>
+          `[data-band="${band}"] { background: ${getBandColor(
+            band,
+            bands,
+            colors,
+          )}; color: black; }`,
+      )
+      .join("\n")}
+
+    /* RGB slot styles */
+    [data-slot] {
+      display: inline-flex;
+      width: 50px;
+      height: 50px;
+      aspect-ratio: 1/1;
+      padding: 1px;
+      border: 2px solid #666;
+      background: #f0f0f0;
+      border-radius: 50%;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      margin: 2px;
+      position: relative;
+      box-sizing: border-box;
+    }
+    [data-slot]:hover {
+      border-color: #333;
+      background: #f9f9f9;
+    }
+    [data-slot]::before {
+      content: attr(data-slot);
+      position: absolute;
+      font-size: 12px;
+      font-weight: bold;
+      color: #666;
+      z-index: 0;
+    }
+
+    /* container */
+    .slots-container {
+      font-family: monospace;
+      font-size: 18px;
+      padding: 16px;
+      background: #f0f0f0;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      margin: 8px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      gap: 4px;
+    }
+
+    .formula-text {
+      font-size: 18px;
+      margin: 0 2px;
+    }
+  `;
+  return style;
+}
+
+/**
+ * Create a unified slot element for RGB or arithmetic use
+ * @param {string} identifier - RGB letter ("R", "G", "B") or variable name for arithmetic
+ * @param {(e: DragEvent) => void} onDrop - Drop handler function
+ * @returns {HTMLDivElement} Slot element
+ */
+export function createSlot(identifier, onDrop) {
+  const slotDiv = document.createElement("div");
+  // Use data-slot
+  slotDiv.dataset.slot = identifier;
+
+  // Add drag & drop functionality
+  slotDiv.ondrop = onDrop;
+  slotDiv.ondragover = (e) => e.preventDefault();
+
+  return slotDiv;
+}
+
+/**
+ * Fill a slot with a band
+ * @param {HTMLElement} slot - Slot element
+ * @param {string} enumValue - Band value
+ * @param {string} title - Band title
+ */
+export function fillSlotWithBand(slot, enumValue, title) {
+  // clear existing band and add new one
+  const existingBand = slot.querySelector("[data-band]");
+  if (existingBand) {
+    existingBand.remove();
+  }
+
+  const bandDiv = createBandDiv(enumValue, title);
+  slot.appendChild(bandDiv);
+}