@nasa-terra/components 0.0.65 → 0.0.67

package/dist/chunks/{chunk.BEZFGWIZ.js → chunk.34DHZMS5.js}

@@ -1,37 +1,38 @@
 import {
   TimeAvgMapController
-} from "./chunk.K36FUM7O.js";
+} from "./chunks/chunk.VOLITUSD.js";
 import {
   time_average_map_styles_default
-} from "./chunk.VSZLMYWV.js";
+} from "./chunks/chunk.4LRK7L7T.js";
 import {
   TerraPlotToolbar
-} from "./chunk.4AZAH4LW.js";
+} from "./chunks/chunk.Q7HZEPNH.js";
 import {
   AuthController
-} from "./chunk.3M5MSIZB.js";
+} from "./chunks/chunk.ZBGF5OT7.js";
 import {
   GiovanniVariableCatalog
-} from "./chunk.2OG44KDU.js";
+} from "./chunks/chunk.OMXEHGIN.js";
 import {
   TerraButton
-} from "./chunk.POAU27Y4.js";
+} from "./chunks/chunk.RBYTPPMS.js";
 import {
   TerraIcon
-} from "./chunk.IDHJPLBH.js";
+} from "./chunks/chunk.JLU4A5OO.js";
 import {
   watch
-} from "./chunk.DTUHBE3U.js";
+} from "./chunks/chunk.PQOUCUDR.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.XFYOJIAC.js";
+} from "./chunks/chunk.BVQLIJGN.js";
 import {
   __decorateClass,
   __privateAdd,
   __privateGet,
+  __privateMethod,
   __privateSet
-} from "./chunk.TVFCHGU3.js";
+} from "./chunks/chunk.FO2DFHVO.js";
 
 // src/components/time-average-map/time-average-map.component.ts
 import { html } from "lit";
@@ -42,11 +43,60 @@ 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";
-var _controller, _catalog, _map, _gtLayer;
+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());
@@ -90,7 +140,7 @@ var TerraTimeAverageMap = class extends TerraElement {
     this.updateGeoTIFFLayer();
   }
   async updateGeoTIFFLayer() {
-    var _a;
+    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);
@@ -113,6 +163,63 @@ var TerraTimeAverageMap = class extends TerraElement {
     }
     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;
@@ -126,9 +233,28 @@ var TerraTimeAverageMap = class extends TerraElement {
         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();
@@ -150,6 +276,24 @@ var TerraTimeAverageMap = class extends TerraElement {
     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;
@@ -172,7 +316,33 @@ var TerraTimeAverageMap = class extends TerraElement {
                       ></terra-plot-toolbar>` : html`<div class="spacer"></div>`
     )}
 
-            <div id="map"></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>
         `;
   }
 };
@@ -180,6 +350,13 @@ _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,
@@ -212,6 +389,12 @@ __decorateClass([
 __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);

package/dist/chunks/{chunk.NI3XJVYH.js → chunk.3MEFKRQM.js}

@@ -1,15 +1,15 @@
 import {
   chip_styles_default
-} from "./chunk.XOD4KYCP.js";
+} from "./chunks/chunk.WHFPL2JH.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.XFYOJIAC.js";
+} from "./chunks/chunk.BVQLIJGN.js";
 import {
   __decorateClass,
   __privateAdd,
   __privateGet
-} from "./chunk.TVFCHGU3.js";
+} from "./chunks/chunk.FO2DFHVO.js";
 
 // src/components/chip/chip.component.ts
 import { property } from "lit/decorators.js";

package/dist/chunks/chunk.3PYIOF6N.js

@@ -0,0 +1,21 @@
+import {
+  TerraChip
+} from "./chunks/chunk.3MEFKRQM.js";
+
+// src/react/chip/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-chip";
+TerraChip.define("terra-chip");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraChip,
+  react: React,
+  events: {},
+  displayName: "TerraChip"
+});
+var chip_default = reactWrapper;
+
+export {
+  chip_default
+};

package/dist/chunks/chunk.3UPK7ERI.js

@@ -0,0 +1,24 @@
+import {
+  TerraLogin
+} from "./chunks/chunk.4QUIMNHG.js";
+
+// src/react/login/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-login";
+TerraLogin.define("terra-login");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraLogin,
+  react: React,
+  events: {
+    onTerraLogin: "terra-login"
+  },
+  displayName: "TerraLogin"
+});
+var login_default = reactWrapper;
+
+export {
+  login_default
+};

package/dist/chunks/chunk.4KEYPSXH.js

@@ -0,0 +1,25 @@
+import {
+  TerraDialog
+} from "./chunks/chunk.4XP4NE6U.js";
+
+// src/react/dialog/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-dialog";
+TerraDialog.define("terra-dialog");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraDialog,
+  react: React,
+  events: {
+    onTerraDialogShow: "terra-dialog-show",
+    onTerraDialogHide: "terra-dialog-hide"
+  },
+  displayName: "TerraDialog"
+});
+var dialog_default = reactWrapper;
+
+export {
+  dialog_default
+};

package/dist/chunks/chunk.4LRK7L7T.js

@@ -0,0 +1,41 @@
+// src/components/time-average-map/time-average-map.styles.ts
+import { css } from "lit";
+var time_average_map_styles_default = css`
+    :host {
+        display: block;
+        height: 800px;
+    }
+
+    #map {
+        width: 100%;
+        height: 100%;
+    }
+
+    #settings {
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+        background: rgba(255, 255, 255, 0.9);
+        padding: 8px 10px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-family: monospace;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        z-index: 10;
+        pointer-events: auto;
+    }
+
+    label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    input[type='range'] {
+        vertical-align: middle;
+    }
+`;
+
+export {
+  time_average_map_styles_default
+};

package/dist/chunks/{chunk.DZWV4IM5.js → chunk.4QUIMNHG.js}

@@ -1,27 +1,27 @@
-import {
-  login_styles_default
-} from "./chunk.TCEJ3MS6.js";
 import {
   loader_default
-} from "./chunk.3XTTMUZJ.js";
+} from "./chunks/chunk.6IEKW27U.js";
+import {
+  login_styles_default
+} from "./chunks/chunk.LUH6JHJQ.js";
 import {
   AuthController
-} from "./chunk.3M5MSIZB.js";
+} from "./chunks/chunk.ZBGF5OT7.js";
 import {
   icon_default
-} from "./chunk.STGG57OG.js";
+} from "./chunks/chunk.XDREHBXD.js";
 import {
   button_default
-} from "./chunk.FMYA7ZPR.js";
+} from "./chunks/chunk.M2QQWRBB.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.XFYOJIAC.js";
+} from "./chunks/chunk.BVQLIJGN.js";
 import {
   __decorateClass,
   __privateAdd,
   __privateGet
-} from "./chunk.TVFCHGU3.js";
+} from "./chunks/chunk.FO2DFHVO.js";
 
 // src/components/login/login.component.ts
 import { html } from "lit";

package/dist/chunks/{chunk.G7J4TFTU.js → chunk.4XP4NE6U.js}

@@ -1,15 +1,15 @@
 import {
   dialog_styles_default
-} from "./chunk.3PUTIFOP.js";
+} from "./chunks/chunk.SWZKCXUX.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.XFYOJIAC.js";
+} from "./chunks/chunk.BVQLIJGN.js";
 import {
   __decorateClass,
   __privateAdd,
   __privateMethod
-} from "./chunk.TVFCHGU3.js";
+} from "./chunks/chunk.FO2DFHVO.js";
 
 // src/components/dialog/dialog.component.ts
 import { html } from "lit";

package/dist/chunks/{chunk.WFF7SRV6.js → chunk.4XWUMSOL.js}

@@ -1,6 +1,6 @@
 import {
   TerraBrowseVariables
-} from "./chunk.HM25M7E4.js";
+} from "./chunks/chunk.VRI4IVZZ.js";
 
 // src/components/browse-variables/browse-variables.ts
 var browse_variables_default = TerraBrowseVariables;

package/dist/chunks/{chunk.EC75KAKW.js → chunk.5LNZM2XR.js}

@@ -19,6 +19,13 @@ var plot_toolbar_styles_default = css`
         font-size: 1.25rem;
     }
 
+    .subtitle {
+        font-weight: var(--terra-font-weight-normal);
+        margin: 0;
+        margin-bottom: 0.5em;
+        font-size: 0.875rem;
+    }
+
     .toggles {
         display: flex;
         justify-content: space-between;

package/dist/chunks/{chunk.V7LXD3II.js → chunk.65OWBNJP.js}

@@ -1,7 +1,7 @@
 import {
   __spreadProps,
   __spreadValues
-} from "./chunk.TVFCHGU3.js";
+} from "./chunks/chunk.FO2DFHVO.js";
 
 // src/internal/form.ts
 var formCollections = /* @__PURE__ */ new WeakMap();

package/dist/chunks/{chunk.QU2MMH2N.js → chunk.6AINJMCU.js}

@@ -1,6 +1,6 @@
 import {
   TerraAccordion
-} from "./chunk.ZLHUO2CY.js";
+} from "./chunks/chunk.6LZ27APU.js";
 
 // src/components/accordion/accordion.ts
 var accordion_default = TerraAccordion;

package/dist/chunks/chunk.6DDGOR37.js

@@ -0,0 +1,24 @@
+import {
+  TerraVariableCombobox
+} from "./chunks/chunk.27RKSMDG.js";
+
+// src/react/variable-combobox/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-variable-combobox";
+TerraVariableCombobox.define("terra-variable-combobox");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraVariableCombobox,
+  react: React,
+  events: {
+    onTerraComboboxChange: "terra-combobox-change"
+  },
+  displayName: "TerraVariableCombobox"
+});
+var variable_combobox_default = reactWrapper;
+
+export {
+  variable_combobox_default
+};

package/dist/chunks/{chunk.3XTTMUZJ.js → chunk.6IEKW27U.js}

@@ -1,6 +1,6 @@
 import {
   TerraLoader
-} from "./chunk.K4ETWAVK.js";
+} from "./chunks/chunk.PGR2ZXLW.js";
 
 // src/components/loader/loader.ts
 var loader_default = TerraLoader;

package/dist/chunks/{chunk.ZLHUO2CY.js → chunk.6LZ27APU.js}

@@ -1,16 +1,16 @@
 import {
   TerraIcon
-} from "./chunk.IDHJPLBH.js";
+} from "./chunks/chunk.JLU4A5OO.js";
 import {
   accordion_styles_default
-} from "./chunk.MQOXBVDK.js";
+} from "./chunks/chunk.PRMM5YYK.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.XFYOJIAC.js";
+} from "./chunks/chunk.BVQLIJGN.js";
 import {
   __decorateClass
-} from "./chunk.TVFCHGU3.js";
+} from "./chunks/chunk.FO2DFHVO.js";
 
 // src/components/accordion/accordion.component.ts
 import { html } from "lit";

package/dist/chunks/chunk.6ZUZNVLN.js

@@ -0,0 +1,21 @@
+import {
+  TerraLoader
+} from "./chunks/chunk.PGR2ZXLW.js";
+
+// src/react/loader/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-loader";
+TerraLoader.define("terra-loader");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraLoader,
+  react: React,
+  events: {},
+  displayName: "TerraLoader"
+});
+var loader_default = reactWrapper;
+
+export {
+  loader_default
+};

package/dist/chunks/{chunk.6K4POAM7.js → chunk.7B7T37PG.js}

@@ -1,22 +1,22 @@
-import {
-  mergeTooltips
-} from "./chunk.L63WM7I3.js";
 import {
   date_range_slider_styles_default
-} from "./chunk.7AEQ2LX4.js";
+} from "./chunks/chunk.SGFM4CK3.js";
+import {
+  mergeTooltips
+} from "./chunks/chunk.3A3FRFKY.js";
 import {
   isValidDate
-} from "./chunk.IC4T7CZD.js";
+} from "./chunks/chunk.ZBBJW34D.js";
 import {
   watch
-} from "./chunk.DTUHBE3U.js";
+} from "./chunks/chunk.PQOUCUDR.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.XFYOJIAC.js";
+} from "./chunks/chunk.BVQLIJGN.js";
 import {
   __decorateClass
-} from "./chunk.TVFCHGU3.js";
+} from "./chunks/chunk.FO2DFHVO.js";
 
 // src/components/date-range-slider/date-range-slider.component.ts
 import { property, query } from "lit/decorators.js";

package/dist/chunks/chunk.A4XTXIEE.js

@@ -0,0 +1,27 @@
+import {
+  TerraAlert
+} from "./chunks/chunk.DXB5IRJW.js";
+
+// src/react/alert/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-alert";
+TerraAlert.define("terra-alert");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraAlert,
+  react: React,
+  events: {
+    onTerraShow: "terra-show",
+    onTerraAfterShow: "terra-after-show",
+    onTerraHide: "terra-hide",
+    onTerraAfterHide: "terra-after-hide"
+  },
+  displayName: "TerraAlert"
+});
+var alert_default = reactWrapper;
+
+export {
+  alert_default
+};