@nasa-terra/components 0.0.167 → 0.0.169

package/dist/chunks/chunk.V5E6WXAV.js

@@ -0,0 +1,1132 @@
+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.2L3CFGOL.js";
+import {
+  TerraPlot
+} from "./chunk.6YM2VNJ6.js";
+import {
+  extractHarmonyError,
+  formatHarmonyErrorMessage
+} from "./chunk.ESNQNQUJ.js";
+import {
+  AuthController
+} from "./chunk.DHM36JBP.js";
+import {
+  getVariableEntryId
+} from "./chunk.CGVPVXTX.js";
+import {
+  TerraLoader
+} from "./chunk.SJ2MURWD.js";
+import {
+  TerraButton
+} from "./chunk.HARXTWRK.js";
+import {
+  formatDate
+} from "./chunk.Y4QEHGFE.js";
+import {
+  TerraIcon
+} from "./chunk.R2FIROFJ.js";
+import {
+  TerraAlert
+} from "./chunk.2IFSOO3E.js";
+import {
+  watch
+} from "./chunk.NWXJOH5T.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.JEAP7TNI.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)}
+                              .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
+};