@nasa-terra/components 0.0.182 → 0.0.184

package/cdn/chunks/chunk.AXHE75CH.js

@@ -1,1211 +0,0 @@
-import {
-  TimeAvgMapController
-} from "./chunk.MZC6KDXV.js";
-import {
-  time_average_map_styles_default
-} from "./chunk.3RQRUNDE.js";
-import {
-  getFetchVariableTask,
-  getVariableEntryId
-} from "./chunk.E3T7QPCE.js";
-import {
-  extractHarmonyError,
-  formatHarmonyErrorMessage
-} from "./chunk.3TKV2VNC.js";
-import {
-  TerraPlotToolbar
-} from "./chunk.J3JP6ALM.js";
-import {
-  TerraPlot
-} from "./chunk.2YBP736T.js";
-import {
-  AuthController
-} from "./chunk.7DYV7ZXX.js";
-import {
-  GeoJSON_default,
-  Graticule_default,
-  Map_default,
-  OSM_default,
-  WebGLTile_default
-} from "./chunk.MVC5FVKI.js";
-import {
-  Draw_default,
-  Feature_default,
-  Point_default,
-  Stroke_default,
-  Style_default,
-  Vector_default,
-  Vector_default2,
-  View_default
-} from "./chunk.4B5TLXQ3.js";
-import {
-  getLength,
-  toLonLat,
-  transformExtent
-} from "./chunk.RCPXD7AS.js";
-import {
-  QueryClientMixin
-} from "./chunk.45J3MZ3A.js";
-import {
-  h
-} from "./chunk.KM6WWUYU.js";
-import {
-  TerraLoader
-} from "./chunk.FEU2ZHGK.js";
-import {
-  TerraButton
-} from "./chunk.ZIBQ3RIQ.js";
-import {
-  formatDate
-} from "./chunk.TKSEPVAL.js";
-import {
-  s
-} from "./chunk.BQDEKCXK.js";
-import {
-  TerraAlert
-} from "./chunk.OXV3VH7N.js";
-import {
-  TerraIcon
-} from "./chunk.S3QWAZET.js";
-import {
-  watch
-} from "./chunk.MPVZOQYA.js";
-import {
-  TerraElement,
-  component_styles_default,
-  n,
-  r
-} from "./chunk.7ZVYIV7K.js";
-import {
-  A,
-  b
-} from "./chunk.RRCYT4LP.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateGet,
-  __privateMethod,
-  __privateSet,
-  init_buffer,
-  init_dirname,
-  init_process
-} from "./chunk.ZEOVK2FE.js";
-
-// src/components/time-average-map/time-average-map.component.ts
-init_dirname();
-init_buffer();
-init_process();
-var _controller, _map, _gtLayer, _bordersLayer, _vectorSource, _vectorLayer, _draw, _graticuleLayer, _handleMapError, _handleExportImage, _drawLegend, drawLegend_fn, _getMapTitleText, getMapTitleText_fn, _wrapText, wrapText_fn, _handleOpacityChange, handleOpacityChange_fn, _handleColorMapChange, handleColorMapChange_fn, _abortJobStatusTask, abortJobStatusTask_fn, _getNumberOfPoints, getNumberOfPoints_fn, _quantizeLineString, quantizeLineString_fn, _minifyMapPopover, minifyMapPopover_fn, _cleanUpMap, cleanUpMap_fn, _getRasterValueAtCoordinate, getRasterValueAtCoordinate_fn, _handleCheckBoxToggle, handleCheckBoxToggle_fn, _isVariableNotFound, isVariableNotFound_fn, _getErrorMessage, getErrorMessage_fn;
-var TerraTimeAverageMap = class extends QueryClientMixin(TerraElement) {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _drawLegend);
-    __privateAdd(this, _getMapTitleText);
-    __privateAdd(this, _wrapText);
-    __privateAdd(this, _handleOpacityChange);
-    __privateAdd(this, _handleColorMapChange);
-    __privateAdd(this, _abortJobStatusTask);
-    __privateAdd(this, _getNumberOfPoints);
-    __privateAdd(this, _quantizeLineString);
-    __privateAdd(this, _minifyMapPopover);
-    __privateAdd(this, _cleanUpMap);
-    __privateAdd(this, _getRasterValueAtCoordinate);
-    __privateAdd(this, _handleCheckBoxToggle);
-    __privateAdd(this, _isVariableNotFound);
-    __privateAdd(this, _getErrorMessage);
-    this.long_name = "";
-    this.colorMapName = "viridis";
-    this.opacity = 1;
-    this.noCache = false;
-    this.pixelValue = "N/A";
-    this.pixelCoordinates = "N/A";
-    this.metadata = {};
-    this.toggleState = false;
-    this.minimized = false;
-    this.noDataValue = -9999;
-    this.min = "0";
-    this.max = "1";
-    this.legendValues = [];
-    this.timeAverageMapError = null;
-    __privateAdd(this, _controller, new TimeAvgMapController(this));
-    __privateAdd(this, _map, null);
-    __privateAdd(this, _gtLayer, null);
-    __privateAdd(this, _bordersLayer, null);
-    __privateAdd(this, _vectorSource, null);
-    __privateAdd(this, _vectorLayer, null);
-    __privateAdd(this, _draw, null);
-    __privateAdd(this, _graticuleLayer, null);
-    this._authController = new AuthController(this);
-    this.colormaps = [
-      "jet",
-      "hsv",
-      "hot",
-      "cool",
-      "spring",
-      "summer",
-      "autumn",
-      "winter",
-      "bone",
-      "copper",
-      "greys",
-      "YIGnBu",
-      "greens",
-      "YIOrRd",
-      "bluered",
-      "RdBu",
-      "picnic",
-      "rainbow",
-      "portland",
-      "blackbody",
-      "earth",
-      "electric",
-      "viridis",
-      "inferno",
-      "magma",
-      "plasma",
-      "warm",
-      "cool",
-      "bathymetry",
-      "cdom",
-      "chlorophyll",
-      "density",
-      "fressurface-blue",
-      "freesurface-red",
-      "oxygen",
-      "par",
-      "phase",
-      "salinity",
-      "temperature",
-      "turbidity",
-      "velocity-blue",
-      "velocity-green",
-      "cubhelix"
-    ];
-    this.plotData = {};
-    this.layout = {};
-    /**
-     * anytime the collection or variable changes, we'll fetch the variable from the catalog to get all of it's metadata
-     */
-    this._fetchVariableTask = getFetchVariableTask(this, false);
-    __privateAdd(this, _handleMapError, (event) => {
-      const { status, code, message, context } = event.detail;
-      this.timeAverageMapError = {
-        code: code || String(status),
-        message,
-        context
-      };
-    });
-    __privateAdd(this, _handleExportImage, async (event) => {
-      var _a;
-      if (!__privateGet(this, _map)) {
-        console.warn("Map not initialized, cannot export image");
-        return;
-      }
-      const format = ((_a = event.detail) == null ? void 0 : _a.format) || "png";
-      try {
-        await new Promise((resolve) => {
-          __privateGet(this, _map).once("rendercomplete", () => {
-            resolve();
-          });
-          __privateGet(this, _map).render();
-        });
-        const mapElement = __privateGet(this, _map).getViewport();
-        const mapSize = __privateGet(this, _map).getSize();
-        if (!mapSize) {
-          console.warn("Map size is not available");
-          return;
-        }
-        const mapWidth = mapSize[0];
-        const mapHeight = mapSize[1];
-        const allCanvases = Array.from(
-          mapElement.querySelectorAll("canvas")
-        );
-        const svgs = Array.from(
-          mapElement.querySelectorAll("svg")
-        );
-        if (allCanvases.length === 0 && svgs.length === 0) {
-          console.warn("Could not find map canvas or SVG elements");
-          return;
-        }
-        const finalCanvas = document.createElement("canvas");
-        const ctx = finalCanvas.getContext("2d");
-        if (!ctx) {
-          console.warn("Could not get canvas context");
-          return;
-        }
-        const textHeight = 80;
-        finalCanvas.width = mapWidth;
-        finalCanvas.height = mapHeight + textHeight;
-        ctx.fillStyle = "#ffffff";
-        ctx.fillRect(0, 0, finalCanvas.width, finalCanvas.height);
-        for (const canvas of allCanvases) {
-          ctx.drawImage(
-            canvas,
-            0,
-            0,
-            canvas.width,
-            canvas.height,
-            0,
-            textHeight,
-            mapWidth,
-            mapHeight
-          );
-        }
-        for (const svg of svgs) {
-          try {
-            const clonedSvg = svg.cloneNode(true);
-            if (!clonedSvg.hasAttribute("width")) {
-              clonedSvg.setAttribute("width", String(mapWidth));
-            }
-            if (!clonedSvg.hasAttribute("height")) {
-              clonedSvg.setAttribute("height", String(mapHeight));
-            }
-            const svgData = new XMLSerializer().serializeToString(clonedSvg);
-            const svgBlob = new Blob([svgData], {
-              type: "image/svg+xml;charset=utf-8"
-            });
-            const url = URL.createObjectURL(svgBlob);
-            const img = new Image();
-            await new Promise((resolve, reject) => {
-              img.onload = () => {
-                ctx.drawImage(img, 0, textHeight, mapWidth, mapHeight);
-                URL.revokeObjectURL(url);
-                resolve();
-              };
-              img.onerror = () => {
-                URL.revokeObjectURL(url);
-                reject(new Error("Failed to load SVG image"));
-              };
-              img.src = url;
-            });
-          } catch (error) {
-            console.warn("Failed to render SVG layer:", error);
-          }
-        }
-        const textY = 30;
-        const lineHeight = 25;
-        ctx.fillStyle = "#000000";
-        ctx.font = "bold 18px Arial, sans-serif";
-        ctx.textAlign = "left";
-        ctx.textBaseline = "top";
-        const titleText = __privateMethod(this, _getMapTitleText, getMapTitleText_fn).call(this);
-        const lines = __privateMethod(this, _wrapText, wrapText_fn).call(this, ctx, titleText, mapWidth - 40, 16);
-        lines.forEach((line, index) => {
-          ctx.fillText(line, 20, textY + index * lineHeight);
-        });
-        await __privateMethod(this, _drawLegend, drawLegend_fn).call(this, ctx, textHeight);
-        const mimeType = format === "jpg" ? "image/jpeg" : "image/png";
-        const fileExtension = format === "jpg" ? "jpg" : "png";
-        const quality = format === "jpg" ? 0.92 : void 0;
-        finalCanvas.toBlob(
-          (blob) => {
-            if (!blob) {
-              console.warn("Failed to create blob from canvas");
-              return;
-            }
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement("a");
-            const locationStr = this.location ? `_${this.location.replace(/,/g, "_")}` : "";
-            const dateRange = this.startDate && this.endDate ? `_${this.startDate.split("T")[0]}_to_${this.endDate.split("T")[0]}` : "";
-            const variableEntryId = getVariableEntryId(this);
-            const filename = `${variableEntryId || "map"}${locationStr}${dateRange}.${fileExtension}`;
-            a.href = url;
-            a.download = filename;
-            a.style.display = "none";
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-          },
-          mimeType,
-          quality
-        );
-      } catch (error) {
-        console.error("Error exporting map as PNG:", error);
-      }
-    });
-  }
-  handlePropertyChange() {
-    if (!this.startDate || !this.endDate || !this.location || !this.catalogVariable) {
-      return;
-    }
-    __privateGet(this, _controller).jobStatusTask.run();
-  }
-  handlePlotOptionsChange() {
-    this.emit("terra-plot-options-change", {
-      detail: {
-        colorMapName: this.colorMapName,
-        opacity: this.opacity
-      }
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener(
-      "terra-time-average-map-error",
-      __privateGet(this, _handleMapError)
-    );
-    this.addEventListener(
-      "terra-plot-toolbar-export-image",
-      __privateGet(this, _handleExportImage)
-    );
-  }
-  async firstUpdated() {
-    this.intializeMap();
-    this._fetchVariableTask.run();
-  }
-  updated(changedProps) {
-    var _a, _b, _c, _d;
-    super.updated(changedProps);
-    const taskStatus = (_b = (_a = __privateGet(this, _controller)) == null ? void 0 : _a.jobStatusTask) == null ? void 0 : _b.status;
-    if (taskStatus === s.PENDING && this.timeAverageMapError) {
-      this.timeAverageMapError = null;
-    }
-    if (taskStatus === s.ERROR && !this.timeAverageMapError) {
-      const taskError = (_d = (_c = __privateGet(this, _controller)) == null ? void 0 : _c.jobStatusTask) == null ? void 0 : _d.error;
-      if (taskError) {
-        const errorDetails = extractHarmonyError(taskError);
-        if (errorDetails.isCancellation) {
-          return;
-        }
-        this.timeAverageMapError = {
-          code: errorDetails.code,
-          message: errorDetails.message,
-          context: errorDetails.context
-        };
-      }
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener(
-      "terra-time-average-map-error",
-      __privateGet(this, _handleMapError)
-    );
-    this.removeEventListener(
-      "terra-plot-toolbar-export-image",
-      __privateGet(this, _handleExportImage)
-    );
-  }
-  /**
-   * Captures the current map view as a thumbnail Blob (JPEG, 200×200).
-   * Composites all OpenLayers canvas layers without text overlay or legend.
-   * Returns undefined if the map is not ready.
-   */
-  async captureMapThumbnail(thumbWidth = 200, thumbHeight = 200) {
-    if (!__privateGet(this, _map)) {
-      return void 0;
-    }
-    const map = __privateGet(this, _map);
-    try {
-      await new Promise((resolve) => {
-        map.once("rendercomplete", () => resolve());
-        map.render();
-      });
-      const mapElement = map.getViewport();
-      const mapSize = map.getSize();
-      if (!mapSize)
-        return void 0;
-      const [mapWidth, mapHeight] = mapSize;
-      const allCanvases = Array.from(
-        mapElement.querySelectorAll("canvas")
-      );
-      if (allCanvases.length === 0)
-        return void 0;
-      const composite = document.createElement("canvas");
-      composite.width = mapWidth;
-      composite.height = mapHeight;
-      const ctx = composite.getContext("2d");
-      if (!ctx)
-        return void 0;
-      for (const canvas of allCanvases) {
-        if (canvas.width > 0 && canvas.height > 0) {
-          ctx.drawImage(canvas, 0, 0, mapWidth, mapHeight);
-        }
-      }
-      const thumb = document.createElement("canvas");
-      thumb.width = thumbWidth;
-      thumb.height = thumbHeight;
-      const thumbCtx = thumb.getContext("2d");
-      if (!thumbCtx)
-        return void 0;
-      thumbCtx.drawImage(composite, 0, 0, thumbWidth, thumbHeight);
-      return new Promise(
-        (resolve, reject) => thumb.toBlob(
-          (b2) => b2 ? resolve(b2) : reject(new Error("toBlob failed")),
-          "image/jpeg",
-          0.8
-        )
-      );
-    } catch (error) {
-      console.error("Failed to capture map thumbnail", error);
-      return void 0;
-    }
-  }
-  async updateGeoTIFFLayer(blob) {
-    var _a;
-    const blobUrl = URL.createObjectURL(blob);
-    const { default: GeoTIFF } = await import("./GeoTIFF.WDM5HZIC.js");
-    const gtSource = new GeoTIFF({
-      sources: [
-        {
-          url: blobUrl,
-          bands: [1],
-          nodata: this.noDataValue
-        }
-      ],
-      wrapX: true,
-      // Enable wrapping so GeoTIFF is always visible when scrolling
-      interpolate: false,
-      normalize: false
-    });
-    __privateSet(this, _gtLayer, new WebGLTile_default({
-      source: gtSource
-    }));
-    if (__privateGet(this, _map)) {
-      __privateGet(this, _map).addLayer(__privateGet(this, _gtLayer));
-      if (__privateGet(this, _bordersLayer)) {
-        __privateGet(this, _map).removeLayer(__privateGet(this, _bordersLayer));
-        __privateSet(this, _bordersLayer, null);
-      }
-      await this.addBordersLayerForGeoTIFF(gtSource);
-    }
-    this.metadata = await this.fetchGeotiffMetadata(gtSource);
-    this.long_name = (_a = this.metadata["long_name"]) != null ? _a : "";
-    if (__privateGet(this, _map) && __privateGet(this, _gtLayer)) {
-      this.renderPixelValues(__privateGet(this, _map), __privateGet(this, _gtLayer));
-      this.applyColorToLayer(gtSource, this.colorMapName);
-      setTimeout(async () => {
-        var _a2;
-        try {
-          const view = await ((_a2 = __privateGet(this, _gtLayer).getSource()) == null ? void 0 : _a2.getView());
-          const transformedExtent = transformExtent(
-            view.extent,
-            view.projection,
-            __privateGet(this, _map).getView().getProjection()
-          );
-          __privateGet(this, _map).getView().fit(transformedExtent, {
-            padding: [50, 50, 50, 50],
-            duration: 300
-          });
-        } catch (error) {
-          console.warn("Failed to fit map to GeoTIFF extent:", error);
-        }
-      }, 500);
-    }
-  }
-  intializeMap() {
-    var _a, _b, _c;
-    const baseLayer = new WebGLTile_default({
-      source: new OSM_default()
-    });
-    __privateSet(this, _graticuleLayer, new Graticule_default({
-      strokeStyle: new Stroke_default({
-        color: "rgba(0,0,0,0.2)",
-        width: 2,
-        lineDash: [0.5, 4]
-      }),
-      showLabels: true,
-      wrapX: false
-    }));
-    __privateSet(this, _map, new Map_default({
-      target: (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("map")) != null ? _b : void 0,
-      layers: [baseLayer, __privateGet(this, _graticuleLayer)],
-      view: new View_default({
-        center: [0, 0],
-        zoom: 2,
-        projection: "EPSG:3857"
-      })
-    }));
-    if (__privateGet(this, _map)) {
-      const resizeObserver = new ResizeObserver(() => {
-        var _a2;
-        (_a2 = __privateGet(this, _map)) == null ? void 0 : _a2.updateSize();
-      });
-      const mapElement = (_c = this.shadowRoot) == null ? void 0 : _c.getElementById("map");
-      if (mapElement) {
-        resizeObserver.observe(mapElement);
-      }
-    }
-  }
-  async addBordersLayerForGeoTIFF(gtSource) {
-    if (!__privateGet(this, _map)) {
-      return;
-    }
-    let geoTiffExtent;
-    try {
-      const view = await gtSource.getView();
-      if (view == null ? void 0 : view.extent) {
-        geoTiffExtent = transformExtent(
-          view.extent,
-          view.projection,
-          __privateGet(this, _map).getView().getProjection()
-        );
-      }
-    } catch (error) {
-      console.warn("Could not get GeoTIFF extent for border clipping:", error);
-    }
-    const vectorSource = new Vector_default({
-      url: "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_10m_admin_0_countries.geojson",
-      format: new GeoJSON_default()
-    });
-    __privateSet(this, _bordersLayer, new Vector_default2({
-      source: vectorSource,
-      extent: geoTiffExtent,
-      style: new Style_default({
-        stroke: new Stroke_default({
-          color: "#000000",
-          width: 1
-        })
-      })
-    }));
-    __privateGet(this, _map).addLayer(__privateGet(this, _bordersLayer));
-  }
-  async fetchGeotiffMetadata(gtSource) {
-    var _a;
-    await gtSource.getView();
-    const internal = gtSource;
-    const gtImage = internal.sourceImagery_[0][0];
-    const gtMetadata = (_a = gtImage.fileDirectory) == null ? void 0 : _a.GDAL_METADATA;
-    const parser = new DOMParser();
-    const xmlDoc = parser.parseFromString(gtMetadata, "application/xml");
-    const items = xmlDoc.querySelectorAll("Item");
-    const dataObj = {};
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      const name = item.getAttribute("name");
-      const value = item.textContent ? item.textContent.trim() : "";
-      if (name) {
-        dataObj[name] = value;
-      }
-    }
-    console.log("Data obj: ", dataObj);
-    return dataObj;
-  }
-  renderPixelValues(map, gtLayer) {
-    map.on("pointermove", (event) => {
-      let data = gtLayer.getData(event.pixel);
-      const coordinate = toLonLat(event.coordinate);
-      if (!data || !(data instanceof Uint8Array || data instanceof Uint8ClampedArray || data instanceof Float32Array) || isNaN(data[0]) || data[0] === 0) {
-        data = null;
-      }
-      const val = data ? Number(data[0]).toExponential(3) : "N/A";
-      const coordStr = coordinate.map((c) => c.toFixed(3)).join(", ");
-      this.pixelValue = val;
-      this.pixelCoordinates = coordStr;
-    });
-  }
-  // Get the fill value from the GeoTIFF file
-  getNoDataValue(gtSource) {
-    let ndv = this.noDataValue;
-    if (gtSource == null) {
-      return ndv;
-    }
-    gtSource.getView().then(() => {
-      var _a, _b;
-      const gtImage = gtSource.sourceImagery_[0][0];
-      ndv = parseFloat(
-        (_b = (_a = gtImage.fileDirectory) == null ? void 0 : _a.GDAL_NODATA) != null ? _b : this.noDataValue.toString()
-      );
-    });
-    return ndv;
-  }
-  async getMinMax(gtSource) {
-    await gtSource.getView();
-    const gtImage = gtSource.sourceImagery_[0][0];
-    const rasterData = await gtImage.readRasters({ samples: [0] });
-    const pixels = rasterData[0];
-    let min = Infinity;
-    let max = -Infinity;
-    for (let i = 0; i < pixels.length; i++) {
-      const val = pixels[i];
-      if (!isNaN(val) && val !== this.getNoDataValue(gtSource)) {
-        if (val < min)
-          min = val;
-        if (val > max)
-          max = val;
-      }
-    }
-    return { min, max };
-  }
-  // Referencing workshop example from https://openlayers.org/workshop/en/cog/colormap.html
-  async getColorStops(name, min, max, steps, reverse) {
-    const delta = (max - min) / (steps - 1);
-    const stops = new Array(steps * 2);
-    const { default: colormap } = await import("./colormap.BMZ7G2OU.js");
-    const colors = colormap({
-      colormap: name,
-      nshades: steps,
-      format: "rgba"
-    });
-    const dataVals = [];
-    if (reverse) {
-      colors.reverse();
-    }
-    for (let i = 0; i < steps; i++) {
-      stops[i * 2] = min + i * delta;
-      stops[i * 2 + 1] = colors[i];
-      dataVals.push((min + i * delta).toExponential(2));
-    }
-    this.generatePalette(colors, dataVals, min, max);
-    return stops;
-  }
-  generatePalette(clrs, dv, min, max) {
-    this.legendValues = [];
-    for (let i = clrs.length - 1; i > 0; i--) {
-      const curVal = parseFloat(dv[i]);
-      if (curVal >= min && curVal <= max) {
-        this.legendValues.push({ value: dv[i], rgb: clrs[i] });
-      }
-    }
-    this.min = min.toExponential(3);
-    this.max = max.toExponential(3);
-  }
-  async applyColorToLayer(gtSource, color) {
-    var _a;
-    var { min, max } = await this.getMinMax(gtSource);
-    let gtStyle = {
-      color: [
-        "case",
-        ["==", ["band", 2], 0],
-        [0, 0, 0, 0],
-        [
-          "interpolate",
-          ["linear"],
-          ["band", 1],
-          ...await this.getColorStops(color, min, max, 72, false)
-        ]
-      ]
-    };
-    (_a = __privateGet(this, _gtLayer)) == null ? void 0 : _a.setStyle(gtStyle);
-  }
-  render() {
-    var _a, _b, _c, _d;
-    return b`
-            ${__privateMethod(this, _isVariableNotFound, isVariableNotFound_fn).call(this) ? b`
-                      <terra-alert
-                          class="no-data-alert"
-                          variant="danger"
-                          open
-                          closable
-                      >
-                          <terra-icon
-                              slot="icon"
-                              name="outline-exclamation-triangle"
-                              library="heroicons"
-                          ></terra-icon>
-                          The selected variable was not found in the catalog
-                      </terra-alert>
-                  ` : ""}
-            ${this.timeAverageMapError ? b`
-                      <terra-alert
-                          class="error-alert"
-                          variant="danger"
-                          open
-                          closable
-                          @terra-after-hide=${() => this.timeAverageMapError = null}
-                      >
-                          <terra-icon
-                              slot="icon"
-                              name="outline-exclamation-triangle"
-                              library="heroicons"
-                          ></terra-icon>
-                          ${__privateMethod(this, _getErrorMessage, getErrorMessage_fn).call(this, this.timeAverageMapError)}
-                      </terra-alert>
-                  ` : ""}
-            <div class="toolbar-container">
-                ${h(
-      this.catalogVariable ? b`<terra-plot-toolbar
-                              dataType="geotiff"
-                              .catalogVariable=${this.catalogVariable}
-                              .timeSeriesData=${(_a = __privateGet(this, _controller).jobStatusTask) == null ? void 0 : _a.value}
-                              .location=${this.location}
-                              .startDate=${this.startDate}
-                              .endDate=${this.endDate}
-                              .cacheKey=${__privateGet(this, _controller).getCacheKey()}
-                              .variableEntryId=${getVariableEntryId(this)}
-                              @show-opacity-value=${__privateMethod(this, _handleOpacityChange, handleOpacityChange_fn)}
-                              @show-color-map=${__privateMethod(this, _handleColorMapChange, handleColorMapChange_fn)}
-                              @show-check-box-toggle=${__privateMethod(this, _handleCheckBoxToggle, handleCheckBoxToggle_fn)}
-                              .pixelValue=${this.pixelValue}
-                              .pixelCoordinates=${this.pixelCoordinates}
-                              show-date-range
-                              .colormaps=${this.colormaps}
-                              .colorMapName=${this.colorMapName}
-                              .opacity=${this.opacity}
-                          ></terra-plot-toolbar>` : b`<div class="spacer"></div>`
-    )}
-            </div>
-
-            <div class="map-container">
-                <div id="map">
-                    <div id="settings">
-                        <div>
-                            <strong>Value:</strong>
-                            <span id="pixelValue">${this.pixelValue}</span>
-                        </div>
-
-                        <div>
-                            <strong>Coordinate: </strong>
-                            <span id="cursorCoordinates"
-                                >${this.pixelCoordinates}</span
-                            >
-                        </div>
-                    </div>
-
-                    <div id="legend">
-                        <div class="stats" id="statsMax">${this.max}</div>
-                        <div class="palette">
-                            ${this.legendValues.map(
-      (value) => b`
-                                    <div
-                                        class="color-box"
-                                        style="background-color: rgba(${value.rgb})"
-                                        title="${value.value}"
-                                    ></div>
-                                `
-    )}
-                        </div>
-                        <div class="stats" id="statsMin">${this.min}</div>
-                    </div>
-                </div>
-            </div>
-
-            ${this.harmonyJobId ? b`
-                      <div class="harmony-job-link">
-                          <a
-                              href=${`https://harmony${this.environment === "uat" /* UAT */ ? ".uat" : ""}.earthdata.nasa.gov/jobs/${this.harmonyJobId}`}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                          >
-                              Request Status: ${this.harmonyJobId}
-                          </a>
-                      </div>
-                  ` : A}
-
-            <!-- Floating Popover for Plot -->
-            ${this.toggleState && this.plotData && Object.keys(this.plotData).length && this.layout && Object.keys(this.layout).length ? b`
-                      <div class="plot-popover ${this.minimized ? "minimized" : ""}">
-                          <terra-plot
-                              style="display: ${this.minimized ? "none" : "block"}"
-                              .data=${this.plotData}
-                              plotTitle="Data Profile"
-                              .layout=${this.layout}
-                          >
-                          </terra-plot>
-
-                          <terra-button
-                              class="minify-btn"
-                              @click=${__privateMethod(this, _minifyMapPopover, minifyMapPopover_fn)}
-                          >
-                              ${this.minimized ? "Restore" : "Minimize"}
-                          </terra-button>
-                      </div>
-                  ` : null}
-
-            <dialog
-                ?open=${((_c = (_b = __privateGet(this, _controller)) == null ? void 0 : _b.jobStatusTask) == null ? void 0 : _c.status) === s.PENDING}
-            >
-                <terra-loader indeterminate variant="orbit"></terra-loader>
-                <p>Plotting ${(_d = this.catalogVariable) == null ? void 0 : _d.dataFieldId}&hellip;</p>
-                <terra-button @click=${__privateMethod(this, _abortJobStatusTask, abortJobStatusTask_fn)}>Cancel</terra-button>
-            </dialog>
-        `;
-  }
-};
-_controller = new WeakMap();
-_map = new WeakMap();
-_gtLayer = new WeakMap();
-_bordersLayer = new WeakMap();
-_vectorSource = new WeakMap();
-_vectorLayer = new WeakMap();
-_draw = new WeakMap();
-_graticuleLayer = new WeakMap();
-_handleMapError = new WeakMap();
-_handleExportImage = new WeakMap();
-_drawLegend = new WeakSet();
-drawLegend_fn = async function(ctx, textHeight) {
-  var _a, _b;
-  const legendElement = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("legend");
-  if (!legendElement) {
-    return;
-  }
-  const mapContainer = (_b = this.shadowRoot) == null ? void 0 : _b.getElementById("map");
-  if (!mapContainer) {
-    return;
-  }
-  const legendRect = legendElement.getBoundingClientRect();
-  const mapRect = mapContainer.getBoundingClientRect();
-  const legendX = legendRect.left - mapRect.left;
-  const legendY = legendRect.top - mapRect.top + textHeight;
-  const legendWidth = legendRect.width;
-  const legendHeight = legendRect.height;
-  ctx.fillStyle = "#ffffff";
-  ctx.fillRect(legendX, legendY, legendWidth, legendHeight);
-  ctx.strokeStyle = "#cccccc";
-  ctx.lineWidth = 1;
-  ctx.strokeRect(legendX, legendY, legendWidth, legendHeight);
-  const computedStyle = window.getComputedStyle(legendElement);
-  const fontSize = parseFloat(computedStyle.fontSize) || 12;
-  const fontFamily = computedStyle.fontFamily || "monospace";
-  const padding = parseFloat(computedStyle.padding) || 8;
-  const statsMax = legendElement.querySelector("#statsMax");
-  if (statsMax) {
-    ctx.fillStyle = "#000000";
-    ctx.font = `${fontSize}px ${fontFamily}`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "top";
-    ctx.fillText(
-      statsMax.textContent || "",
-      legendX + legendWidth / 2,
-      legendY + padding
-    );
-  }
-  const palette = legendElement.querySelector(".palette");
-  if (palette) {
-    const paletteRect = palette.getBoundingClientRect();
-    const paletteX = paletteRect.left - mapRect.left;
-    const paletteY = paletteRect.top - mapRect.top + textHeight;
-    const paletteWidth = paletteRect.width;
-    const colorDivs = Array.from(
-      palette.querySelectorAll("div")
-    );
-    let currentY = paletteY;
-    for (const div of colorDivs) {
-      const divRect = div.getBoundingClientRect();
-      const divHeight = divRect.height;
-      const style = div.getAttribute("style") || "";
-      const bgColorMatch = style.match(
-        /background-color:\s*rgba?\(([^)]+)\)/
-      );
-      if (bgColorMatch) {
-        const colorStr = bgColorMatch[1];
-        const [r2, g, b2, a = 1] = colorStr.split(",").map((s2) => parseFloat(s2.trim()));
-        ctx.fillStyle = `rgba(${r2}, ${g}, ${b2}, ${a})`;
-        ctx.fillRect(paletteX, currentY, paletteWidth, divHeight);
-      }
-      currentY += divHeight;
-    }
-  }
-  const statsMin = legendElement.querySelector("#statsMin");
-  if (statsMin) {
-    ctx.fillStyle = "#000000";
-    ctx.font = `${fontSize}px ${fontFamily}`;
-    ctx.textAlign = "center";
-    ctx.textBaseline = "bottom";
-    ctx.fillText(
-      statsMin.textContent || "",
-      legendX + legendWidth / 2,
-      legendY + legendHeight - padding
-    );
-  }
-};
-_getMapTitleText = new WeakSet();
-getMapTitleText_fn = function() {
-  if (!this.catalogVariable) {
-    return "Time Averaged Map";
-  }
-  const parts = [];
-  parts.push("Time Averaged Map of");
-  if (this.catalogVariable.dataFieldLongName) {
-    parts.push(this.catalogVariable.dataFieldLongName);
-  }
-  if (this.catalogVariable.dataProductTimeInterval && this.catalogVariable.dataProductTimeInterval.toLowerCase() !== "not applicable") {
-    parts.push(this.catalogVariable.dataProductTimeInterval);
-  }
-  if (this.catalogVariable.dataProductSpatialResolution && this.catalogVariable.dataProductSpatialResolution.toLowerCase() !== "not applicable") {
-    parts.push(this.catalogVariable.dataProductSpatialResolution);
-  }
-  if (this.catalogVariable.dataProductShortName) {
-    let datasetInfo = `[${this.catalogVariable.dataProductShortName}`;
-    if (this.catalogVariable.dataProductVersion) {
-      datasetInfo += ` v${this.catalogVariable.dataProductVersion}`;
-    }
-    datasetInfo += "]";
-    parts.push(datasetInfo);
-  }
-  if (this.startDate && this.endDate) {
-    const startFormatted = formatDate(this.startDate);
-    const endFormatted = formatDate(this.endDate);
-    parts.push(`over ${startFormatted} - ${endFormatted}`);
-  }
-  return parts.join(" ");
-};
-_wrapText = new WeakSet();
-wrapText_fn = function(ctx, text, maxWidth, fontSize) {
-  ctx.font = `bold ${fontSize}px Arial, sans-serif`;
-  const words = text.split(" ");
-  const lines = [];
-  let currentLine = words[0];
-  for (let i = 1; i < words.length; i++) {
-    const word = words[i];
-    const width = ctx.measureText(currentLine + " " + word).width;
-    if (width < maxWidth) {
-      currentLine += " " + word;
-    } else {
-      lines.push(currentLine);
-      currentLine = word;
-    }
-  }
-  lines.push(currentLine);
-  return lines;
-};
-_handleOpacityChange = new WeakSet();
-handleOpacityChange_fn = function(e) {
-  this.opacity = e.detail;
-  if (__privateGet(this, _gtLayer)) {
-    __privateGet(this, _gtLayer).setOpacity(this.opacity);
-  }
-};
-_handleColorMapChange = new WeakSet();
-handleColorMapChange_fn = function(e) {
-  const selectedColormap = e.detail;
-  if (__privateGet(this, _gtLayer) && __privateGet(this, _gtLayer).getSource()) {
-    this.colorMapName = selectedColormap;
-    this.applyColorToLayer(__privateGet(this, _gtLayer).getSource(), this.colorMapName);
-  }
-};
-_abortJobStatusTask = new WeakSet();
-abortJobStatusTask_fn = function() {
-  var _a;
-  (_a = __privateGet(this, _controller).jobStatusTask) == null ? void 0 : _a.abort("Cancelled time averaged map request");
-};
-_getNumberOfPoints = new WeakSet();
-getNumberOfPoints_fn = function(line) {
-  const length = getLength(line);
-  let pointCount;
-  if (length > 100) {
-    pointCount = length / 1e3 / 60;
-  } else {
-    pointCount = length / 10;
-  }
-  return Math.max(2, Math.round(pointCount));
-};
-_quantizeLineString = new WeakSet();
-quantizeLineString_fn = function(geo) {
-  const numPoints = __privateMethod(this, _getNumberOfPoints, getNumberOfPoints_fn).call(this, geo);
-  const points = [];
-  for (let i = 0; i <= numPoints; i++) {
-    const fraction = i / numPoints;
-    points.push(geo.getCoordinateAt(fraction));
-  }
-  return points;
-};
-_minifyMapPopover = new WeakSet();
-minifyMapPopover_fn = function() {
-  this.minimized = !this.minimized;
-};
-_cleanUpMap = new WeakSet();
-cleanUpMap_fn = function() {
-  var _a;
-  this.toggleState = false;
-  if (__privateGet(this, _map) && __privateGet(this, _draw) && __privateGet(this, _vectorLayer)) {
-    __privateGet(this, _map).removeInteraction(__privateGet(this, _draw));
-    __privateGet(this, _map).removeLayer(__privateGet(this, _vectorLayer));
-  }
-  (_a = __privateGet(this, _vectorSource)) == null ? void 0 : _a.clear();
-  __privateSet(this, _draw, null);
-  __privateSet(this, _vectorLayer, null);
-  __privateSet(this, _vectorSource, null);
-};
-_getRasterValueAtCoordinate = new WeakSet();
-getRasterValueAtCoordinate_fn = function(coord) {
-  if (!__privateGet(this, _map) || !__privateGet(this, _gtLayer))
-    return NaN;
-  const pixel = __privateGet(this, _map).getPixelFromCoordinate(coord);
-  if (!pixel)
-    return NaN;
-  const data = __privateGet(this, _gtLayer).getData(pixel);
-  if (!data)
-    return NaN;
-  if (data instanceof Uint8Array || data instanceof Uint8ClampedArray || data instanceof Float32Array) {
-    return !isNaN(data[0]) ? data[0] : NaN;
-  }
-  if (data instanceof DataView) {
-    const val = data.getFloat32(0, true);
-    return !isNaN(val) ? val : NaN;
-  }
-  return NaN;
-};
-_handleCheckBoxToggle = new WeakSet();
-handleCheckBoxToggle_fn = function(e) {
-  var isToggled = e.detail;
-  if (isToggled) {
-    this.toggleState = isToggled;
-    __privateSet(this, _vectorSource, new Vector_default({ wrapX: false }));
-    __privateSet(this, _vectorLayer, new Vector_default2({
-      source: __privateGet(this, _vectorSource)
-    }));
-    __privateSet(this, _draw, new Draw_default({
-      source: __privateGet(this, _vectorSource),
-      type: "LineString"
-    }));
-    if (__privateGet(this, _map)) {
-      __privateGet(this, _map).addLayer(__privateGet(this, _vectorLayer));
-      __privateGet(this, _map).addInteraction(__privateGet(this, _draw));
-      __privateGet(this, _draw).on("drawend", (event) => {
-        var _a;
-        const line = event.feature.getGeometry();
-        const coords = __privateMethod(this, _quantizeLineString, quantizeLineString_fn).call(this, line);
-        const pointFeatures = coords.map(
-          (coord) => new Feature_default({
-            geometry: new Point_default(coord)
-          })
-        );
-        (_a = __privateGet(this, _vectorSource)) == null ? void 0 : _a.addFeatures(pointFeatures);
-        const rasterValues = coords.map(
-          (coord) => __privateMethod(this, _getRasterValueAtCoordinate, getRasterValueAtCoordinate_fn).call(this, coord)
-        );
-        const xValues = coords.map((_, index) => index);
-        const lonLatCoords = coords.map((coord) => {
-          const [lon, lat] = toLonLat(coord);
-          const val = __privateMethod(this, _getRasterValueAtCoordinate, getRasterValueAtCoordinate_fn).call(this, coord);
-          const rastervalue = !isNaN(val) ? val.toExponential(4) : "N/A";
-          return [
-            parseFloat(lon.toFixed(2)),
-            parseFloat(lat.toFixed(2)),
-            rastervalue
-          ];
-        });
-        const hoverTexts = lonLatCoords.map((coord, idx) => {
-          const x = idx;
-          const value = coord[2];
-          return `Index: ${x}<br>Value: ${value}<br>Coordinates: [${coord[0]}, ${coord[1]}]`;
-        });
-        this.plotData = [
-          {
-            x: xValues,
-            y: rasterValues,
-            text: hoverTexts,
-            hoverinfo: "text",
-            type: "scatter",
-            mode: "lines+markers",
-            line: { color: "blue" }
-          }
-        ];
-        this.layout = {
-          title: "Data Profile",
-          xaxis: {
-            title: "Point Index"
-          },
-          yaxis: {
-            title: `Cloud Coverage (${this.metadata["units"]})`,
-            tickformat: ".2e"
-          }
-        };
-      });
-    }
-  } else {
-    __privateMethod(this, _cleanUpMap, cleanUpMap_fn).call(this);
-  }
-};
-_isVariableNotFound = new WeakSet();
-isVariableNotFound_fn = function() {
-  const variableTaskStatus = this._fetchVariableTask.status;
-  if (variableTaskStatus !== s.COMPLETE) {
-    return false;
-  }
-  const hasVariableRequest = Boolean(this.collection && this.variable);
-  return hasVariableRequest && !this.catalogVariable;
-};
-_getErrorMessage = new WeakSet();
-getErrorMessage_fn = function(error) {
-  return formatHarmonyErrorMessage(error);
-};
-TerraTimeAverageMap.styles = [component_styles_default, time_average_map_styles_default];
-TerraTimeAverageMap.dependencies = {
-  "terra-button": TerraButton,
-  "terra-icon": TerraIcon,
-  "terra-plot-toolbar": TerraPlotToolbar,
-  "terra-loader": TerraLoader,
-  "terra-plot": TerraPlot,
-  "terra-alert": TerraAlert
-};
-__decorateClass([
-  n({ reflect: true })
-], TerraTimeAverageMap.prototype, "collection", 2);
-__decorateClass([
-  n({ reflect: true })
-], TerraTimeAverageMap.prototype, "variable", 2);
-__decorateClass([
-  n({ attribute: "start-date", reflect: true })
-], TerraTimeAverageMap.prototype, "startDate", 2);
-__decorateClass([
-  n({ attribute: "end-date", reflect: true })
-], TerraTimeAverageMap.prototype, "endDate", 2);
-__decorateClass([
-  n({ reflect: true })
-], TerraTimeAverageMap.prototype, "location", 2);
-__decorateClass([
-  n({ attribute: "bearer-token", reflect: false })
-], TerraTimeAverageMap.prototype, "bearerToken", 2);
-__decorateClass([
-  n({ type: String })
-], TerraTimeAverageMap.prototype, "long_name", 2);
-__decorateClass([
-  n({ type: String, attribute: "color-map-name", reflect: true })
-], TerraTimeAverageMap.prototype, "colorMapName", 2);
-__decorateClass([
-  n({ type: Number })
-], TerraTimeAverageMap.prototype, "opacity", 2);
-__decorateClass([
-  n({ attribute: "application-id" })
-], TerraTimeAverageMap.prototype, "applicationId", 2);
-__decorateClass([
-  n({ type: Boolean, attribute: "no-cache" })
-], TerraTimeAverageMap.prototype, "noCache", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "catalogVariable", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "pixelValue", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "pixelCoordinates", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "metadata", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "toggleState", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "minimized", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "noDataValue", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "min", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "max", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "legendValues", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "timeAverageMapError", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "colormaps", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "plotData", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "layout", 2);
-__decorateClass([
-  r()
-], TerraTimeAverageMap.prototype, "harmonyJobId", 2);
-__decorateClass([
-  watch(["startDate", "endDate", "location", "catalogVariable"])
-], TerraTimeAverageMap.prototype, "handlePropertyChange", 1);
-__decorateClass([
-  watch(["colorMapName", "opacity"])
-], TerraTimeAverageMap.prototype, "handlePlotOptionsChange", 1);
-
-export {
-  TerraTimeAverageMap
-};