@nasa-terra/components 0.0.66 → 0.0.68

package/dist/chunks/chunk.34PJLKJJ.js

@@ -0,0 +1,416 @@
+import {
+  TimeAvgMapController
+} from "./chunk.RZ3APMFR.js";
+import {
+  time_average_map_styles_default
+} from "./chunk.P7EL7GKI.js";
+import {
+  TerraPlotToolbar
+} from "./chunk.PSIAGOIP.js";
+import {
+  AuthController
+} from "./chunk.4SUQPJ6R.js";
+import {
+  GiovanniVariableCatalog
+} from "./chunk.JUQDLDHB.js";
+import {
+  TerraButton
+} from "./chunk.VO4JJ7CZ.js";
+import {
+  TerraIcon
+} from "./chunk.UTXEG3QD.js";
+import {
+  watch
+} from "./chunk.DTUHBE3U.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.TSIWRLNC.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/time-average-map/time-average-map.component.ts
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { Map, View } from "ol";
+import WebGLTileLayer from "ol/layer/WebGLTile.js";
+import OSM from "ol/source/OSM.js";
+import GeoTIFF from "ol/source/GeoTIFF.js";
+import { Task } from "@lit/task";
+import { cache } from "lit/directives/cache.js";
+import { toLonLat } from "ol/proj.js";
+import colormap from "colormap";
+var _controller, _catalog, _map, _gtLayer, _onColorMapChange, onColorMapChange_fn;
+var TerraTimeAverageMap = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _onColorMapChange);
+    this.activeMenuItem = null;
+    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.colorMapName = "density";
+    this.long_name = "";
+    __privateAdd(this, _controller, void 0);
+    __privateAdd(this, _catalog, new GiovanniVariableCatalog());
+    this._authController = new AuthController(this);
+    __privateAdd(this, _map, null);
+    __privateAdd(this, _gtLayer, null);
+    /**
+     * anytime the collection or variable changes, we'll fetch the variable from the catalog to get all of it's metadata
+     */
+    this._fetchVariableTask = new Task(this, {
+      task: async (_args, { signal }) => {
+        var _a, _b, _c, _d;
+        const variableEntryId = this.getVariableEntryId();
+        if (!variableEntryId) {
+          return;
+        }
+        console.debug("Fetch variable ", variableEntryId);
+        const variable = await __privateGet(this, _catalog).getVariable(variableEntryId, {
+          signal
+        });
+        console.debug("Found variable ", variable);
+        if (!variable) {
+          return;
+        }
+        this.startDate = (_b = this.startDate) != null ? _b : (_a = variable.exampleInitialStartDate) == null ? void 0 : _a.toISOString();
+        this.endDate = (_d = this.endDate) != null ? _d : (_c = variable.exampleInitialEndDate) == null ? void 0 : _c.toISOString();
+        this.catalogVariable = variable;
+      },
+      args: () => [this.collection, this.variable]
+    });
+  }
+  handleFocus(_oldValue, newValue) {
+    if (newValue === null) {
+      return;
+    }
+    this.menu.focus();
+  }
+  async firstUpdated() {
+    __privateSet(this, _controller, new TimeAvgMapController(this));
+    this.intializeMap();
+    this.updateGeoTIFFLayer();
+  }
+  async updateGeoTIFFLayer() {
+    var _a, _b, _c;
+    await __privateGet(this, _controller).jobStatusTask.run();
+    let job_status_value = __privateGet(this, _controller).jobStatusTask.value;
+    const blobUrl = URL.createObjectURL(job_status_value);
+    const gtSource = new GeoTIFF({
+      sources: [
+        {
+          url: blobUrl,
+          bands: [1],
+          nodata: NaN
+        }
+      ],
+      interpolate: false,
+      normalize: false
+    });
+    __privateSet(this, _gtLayer, new WebGLTileLayer({
+      source: gtSource
+    }));
+    if (__privateGet(this, _map)) {
+      __privateGet(this, _map).addLayer(__privateGet(this, _gtLayer));
+    }
+    const metadata = await this.fetchGeotiffMetadata(gtSource);
+    this.long_name = (_a = metadata["long_name"]) != null ? _a : "";
+    if (__privateGet(this, _map) && __privateGet(this, _gtLayer)) {
+      this.renderPixelValues(__privateGet(this, _map), __privateGet(this, _gtLayer));
+      this.applyColorToLayer(gtSource, "density");
+      const opacityInput = (_b = this.shadowRoot) == null ? void 0 : _b.getElementById(
+        "opacity-input"
+      );
+      const opacityOutput = (_c = this.shadowRoot) == null ? void 0 : _c.getElementById(
+        "opacity-output"
+      );
+      if (opacityInput && opacityOutput) {
+        const updateOpacity = () => {
+          const opacity = parseFloat(opacityInput.value);
+          if (__privateGet(this, _gtLayer)) {
+            __privateGet(this, _gtLayer).setOpacity(opacity);
+          }
+          opacityOutput.innerText = opacity.toFixed(2);
+        };
+        opacityInput.addEventListener("input", updateOpacity);
+        updateOpacity();
+      }
+    }
+  }
+  renderPixelValues(map, gtLayer) {
+    var _a, _b;
+    const pixelValueEl = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("pixelValue");
+    const coordEl = (_b = this.shadowRoot) == null ? void 0 : _b.getElementById("cursorCoordinates");
+    map.on("pointermove", (event) => {
+      const data = gtLayer.getData(event.pixel);
+      const coordinate = toLonLat(event.coordinate);
+      if (!data || isNaN(data[0]) || data[0] === 0) {
+        if (pixelValueEl)
+          pixelValueEl.textContent = "N/A";
+        if (coordEl)
+          coordEl.textContent = "N/A";
+        return;
+      }
+      const val = Number(data[0]).toExponential(4);
+      const coordStr = coordinate.map((c) => c.toFixed(3)).join(", ");
+      if (pixelValueEl)
+        pixelValueEl.textContent = val;
+      if (coordEl)
+        coordEl.textContent = coordStr;
+    });
+  }
+  // Referencing workshop example from https://openlayers.org/workshop/en/cog/colormap.html
+  getColorStops(name, min, max, steps, reverse) {
+    const delta = (max - min) / (steps - 1);
+    const stops = new Array(steps * 2);
+    const colors = colormap({ colormap: name, nshades: steps, format: "rgba" });
+    if (reverse) {
+      colors.reverse();
+    }
+    for (let i = 0; i < steps; i++) {
+      stops[i * 2] = min + i * delta;
+      stops[i * 2 + 1] = colors[i];
+    }
+    return stops;
+  }
+  intializeMap() {
+    var _a, _b;
+    const baseLayer = new WebGLTileLayer({
+      source: new OSM()
+    });
+    __privateSet(this, _map, new Map({
+      target: (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("map")) != null ? _b : void 0,
+      layers: [baseLayer],
+      view: new View({
+        center: [0, 0],
+        zoom: 2,
+        projection: "EPSG:3857"
+      }),
+      controls: []
+    }));
+  }
+  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)) {
+        if (val < min)
+          min = val;
+        if (val > max)
+          max = val;
+      }
+    }
+    return { min, max };
+  }
+  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;
+  }
+  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],
+          ...this.getColorStops(color, min, max, 72, false)
+        ]
+      ]
+    };
+    (_a = __privateGet(this, _gtLayer)) == null ? void 0 : _a.setStyle(gtStyle);
+  }
+  getVariableEntryId() {
+    if (!this.collection || !this.variable) {
+      return;
+    }
+    return `${this.collection}_${this.variable}`;
+  }
+  render() {
+    var _a;
+    return html`
+            ${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=${this.getVariableEntryId()}
+                      ></terra-plot-toolbar>` : html`<div class="spacer"></div>`
+    )}
+
+            <!-- Display pixels/coordinate/opacity/colormap list in Map  -->
+            <div id="map"">
+              <div id="settings">
+                <div><strong>Value:</strong> <span id="pixelValue">N/A</span></div>
+                <div><strong>Lat,Lon:</strong> <span id="cursorCoordinates">N/A</span></div>
+                <div>
+                  <label>
+                    Layer opacity
+                    <input id="opacity-input" type="range" min="0" max="1" step="0.01" value="1" />
+                    <span id="opacity-output"></span>
+                  </label>
+                  <label>
+                    ColorMap:
+                    <select id="colormap-select" @change=${__privateMethod(this, _onColorMapChange, onColorMapChange_fn)}>
+                      ${this.colormaps.map(
+      (cm) => html` <option
+                                  value="${cm}"
+                                  ?selected=${cm === this.colorMapName}
+                              >
+                                  ${cm}
+                              </option>`
+    )}
+                    </select>
+                    </label>
+                </div>
+              </div>
+            </div>
+        `;
+  }
+};
+_controller = new WeakMap();
+_catalog = new WeakMap();
+_map = new WeakMap();
+_gtLayer = new WeakMap();
+_onColorMapChange = new WeakSet();
+onColorMapChange_fn = function(event) {
+  const selectedColormap = event.target.value;
+  if (__privateGet(this, _gtLayer) && __privateGet(this, _gtLayer).getSource()) {
+    this.applyColorToLayer(__privateGet(this, _gtLayer).getSource(), selectedColormap);
+  }
+};
+TerraTimeAverageMap.styles = [component_styles_default, time_average_map_styles_default];
+TerraTimeAverageMap.dependencies = {
+  "terra-button": TerraButton,
+  "terra-icon": TerraIcon,
+  "terra-plot-toolbar": TerraPlotToolbar
+};
+__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([
+  state()
+], TerraTimeAverageMap.prototype, "activeMenuItem", 2);
+__decorateClass([
+  state()
+], TerraTimeAverageMap.prototype, "colormaps", 2);
+__decorateClass([
+  state()
+], TerraTimeAverageMap.prototype, "colorMapName", 2);
+__decorateClass([
+  watch("activeMenuItem")
+], TerraTimeAverageMap.prototype, "handleFocus", 1);
+__decorateClass([
+  property({ attribute: "bearer-token", reflect: false })
+], TerraTimeAverageMap.prototype, "bearerToken", 2);
+__decorateClass([
+  property({ type: String })
+], TerraTimeAverageMap.prototype, "long_name", 2);
+__decorateClass([
+  query("#menu")
+], TerraTimeAverageMap.prototype, "menu", 2);
+__decorateClass([
+  state()
+], TerraTimeAverageMap.prototype, "catalogVariable", 2);
+
+export {
+  TerraTimeAverageMap
+};

package/dist/chunks/chunk.35EPISNE.js

@@ -0,0 +1,11 @@
+import {
+  TerraTimeAverageMap
+} from "./chunk.34PJLKJJ.js";
+
+// src/components/time-average-map/time-average-map.ts
+var time_average_map_default = TerraTimeAverageMap;
+TerraTimeAverageMap.define("terra-time-average-map");
+
+export {
+  time_average_map_default
+};