@nasa-terra/components 0.0.171 → 0.0.173

package/dist/chunks/chunk.BT7HPCEV.js

@@ -1,1133 +0,0 @@
-import {
-  time_average_map_styles_default
-} from "./chunk.NEI6ESI4.js";
-import {
-  TimeAvgMapController
-} from "./chunk.X3XBLLUJ.js";
-import {
-  getFetchVariableTask
-} from "./chunk.RO4MUFVF.js";
-import {
-  TerraPlotToolbar
-} from "./chunk.ZBWOSTXK.js";
-import {
-  TerraPlot
-} from "./chunk.UL6YVM7N.js";
-import {
-  extractHarmonyError,
-  formatHarmonyErrorMessage
-} from "./chunk.ESNQNQUJ.js";
-import {
-  AuthController
-} from "./chunk.DHM36JBP.js";
-import {
-  getVariableEntryId
-} from "./chunk.CGVPVXTX.js";
-import {
-  TerraLoader
-} from "./chunk.LIUUOC56.js";
-import {
-  TerraButton
-} from "./chunk.I5S7VMNW.js";
-import {
-  formatDate
-} from "./chunk.Y4QEHGFE.js";
-import {
-  TerraIcon
-} from "./chunk.JP5ESC3H.js";
-import {
-  TerraAlert
-} from "./chunk.QDGFDNGX.js";
-import {
-  watch
-} from "./chunk.NWXJOH5T.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.WHB35BIS.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateGet,
-  __privateMethod,
-  __privateSet
-} from "./chunk.SHKVBVTI.js";
-
-// src/components/time-average-map/time-average-map.component.ts
-import { html, nothing } from "lit";
-import { property, state } from "lit/decorators.js";
-import { Map, View } from "ol";
-import WebGLTileLayer from "ol/layer/WebGLTile.js";
-import VectorLayer from "ol/layer/Vector.js";
-import Graticule from "ol/layer/Graticule.js";
-import OSM from "ol/source/OSM.js";
-import VectorSource from "ol/source/Vector.js";
-import GeoJSON from "ol/format/GeoJSON.js";
-import { Style, Stroke } from "ol/style.js";
-import Draw from "ol/interaction/Draw.js";
-import Point from "ol/geom/Point.js";
-import { getLength } from "ol/sphere.js";
-import Feature from "ol/Feature.js";
-import { TaskStatus } from "@lit/task";
-import { cache } from "lit/directives/cache.js";
-import { toLonLat, transformExtent } from "ol/proj.js";
-var _controller, _map, _gtLayer, _bordersLayer, _vectorSource, _vectorLayer, _draw, _graticuleLayer, _isNotebookEnv, isNotebookEnv_fn, _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 TerraElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _isNotebookEnv);
-    __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.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, void 0);
-    __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() {
-    if (this.showJupyter === void 0) {
-      this.showJupyter = !__privateMethod(this, _isNotebookEnv, isNotebookEnv_fn).call(this);
-    }
-    __privateSet(this, _controller, new TimeAvgMapController(this));
-    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 === TaskStatus.PENDING && this.timeAverageMapError) {
-      this.timeAverageMapError = null;
-    }
-    if (taskStatus === TaskStatus.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)
-    );
-  }
-  async updateGeoTIFFLayer(blob) {
-    var _a;
-    const blobUrl = URL.createObjectURL(blob);
-    const { default: GeoTIFF } = await import("ol/source/GeoTIFF.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 WebGLTileLayer({
-      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 WebGLTileLayer({
-      source: new OSM()
-    });
-    __privateSet(this, _graticuleLayer, new Graticule({
-      strokeStyle: new Stroke({
-        color: "rgba(0,0,0,0.2)",
-        width: 2,
-        lineDash: [0.5, 4]
-      }),
-      showLabels: true,
-      wrapX: false
-    }));
-    __privateSet(this, _map, new Map({
-      target: (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("map")) != null ? _b : void 0,
-      layers: [baseLayer, __privateGet(this, _graticuleLayer)],
-      view: new View({
-        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 VectorSource({
-      url: "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_10m_admin_0_countries.geojson",
-      format: new GeoJSON()
-    });
-    __privateSet(this, _bordersLayer, new VectorLayer({
-      source: vectorSource,
-      extent: geoTiffExtent,
-      style: new Style({
-        stroke: new Stroke({
-          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");
-    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 html`
-            ${__privateMethod(this, _isVariableNotFound, isVariableNotFound_fn).call(this) ? html`
-                      <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 ? html`
-                      <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">
-                ${cache(
-      this.catalogVariable ? html`<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)}
-                              .showJupyter=${this.showJupyter}
-                              .pixelValue=${this.pixelValue}
-                              .pixelCoordinates=${this.pixelCoordinates}
-                              show-date-range
-                              .colormaps=${this.colormaps}
-                              .colorMapName=${this.colorMapName}
-                              .opacity=${this.opacity}
-                          ></terra-plot-toolbar>` : html`<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) => html`
-                                    <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 ? html`
-                      <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>
-                  ` : nothing}
-
-            <!-- Floating Popover for Plot -->
-            ${this.toggleState && this.plotData && Object.keys(this.plotData).length && this.layout && Object.keys(this.layout).length ? html`
-                      <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) === TaskStatus.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();
-_isNotebookEnv = new WeakSet();
-isNotebookEnv_fn = function() {
-  var _a;
-  const w = window;
-  return typeof w.Jupyter !== "undefined" || typeof w.IPython !== "undefined" || typeof ((_a = w.google) == null ? void 0 : _a.colab) !== "undefined" || typeof w.__jupyterlab !== "undefined" || document.querySelector(".jp-Notebook") !== null || document.querySelector(".jupyter-widgets") !== null;
-};
-_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 [r, g, b, a = 1] = colorStr.split(",").map((s) => parseFloat(s.trim()));
-        ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${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 VectorSource({ wrapX: false }));
-    __privateSet(this, _vectorLayer, new VectorLayer({
-      source: __privateGet(this, _vectorSource)
-    }));
-    __privateSet(this, _draw, new Draw({
-      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({
-            geometry: new Point(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 !== TaskStatus.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([
-  property({ reflect: true })
-], TerraTimeAverageMap.prototype, "collection", 2);
-__decorateClass([
-  property({ reflect: true })
-], TerraTimeAverageMap.prototype, "variable", 2);
-__decorateClass([
-  property({ attribute: "start-date", reflect: true })
-], TerraTimeAverageMap.prototype, "startDate", 2);
-__decorateClass([
-  property({ attribute: "end-date", reflect: true })
-], TerraTimeAverageMap.prototype, "endDate", 2);
-__decorateClass([
-  property({ reflect: true })
-], TerraTimeAverageMap.prototype, "location", 2);
-__decorateClass([
-  property({ attribute: "bearer-token", reflect: false })
-], TerraTimeAverageMap.prototype, "bearerToken", 2);
-__decorateClass([
-  property({ type: String })
-], TerraTimeAverageMap.prototype, "long_name", 2);
-__decorateClass([
-  property({ type: String, attribute: "color-map-name", reflect: true })
-], TerraTimeAverageMap.prototype, "colorMapName", 2);
-__decorateClass([
-  property({ type: Number })
-], TerraTimeAverageMap.prototype, "opacity", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "catalogVariable", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "pixelValue", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "pixelCoordinates", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "metadata", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "toggleState", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "minimized", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "noDataValue", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "min", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "max", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "legendValues", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "timeAverageMapError", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "colormaps", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "plotData", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "layout", 2);
-__decorateClass([
-  state()
-], TerraTimeAverageMap.prototype, "harmonyJobId", 2);
-__decorateClass([
-  watch(["startDate", "endDate", "location", "catalogVariable"])
-], TerraTimeAverageMap.prototype, "handlePropertyChange", 1);
-__decorateClass([
-  watch(["colorMapName", "opacity"])
-], TerraTimeAverageMap.prototype, "handlePlotOptionsChange", 1);
-
-export {
-  TerraTimeAverageMap
-};