@nasa-terra/components 0.0.179 → 0.0.181

package/cdn/chunks/chunk.Z45L4FIP.js

@@ -0,0 +1,1184 @@
+import {
+  getTimeAveragedMapNotebook
+} from "./chunk.LA5VODPG.js";
+import {
+  getTimeSeriesNotebook
+} from "./chunk.TOYEA3BN.js";
+import {
+  PlotToolbarController
+} from "./chunk.Y4DVU7OI.js";
+import {
+  plot_toolbar_styles_default
+} from "./chunk.7DRUZWQ6.js";
+import {
+  require_plotly_min
+} from "./chunk.NPCTDW7V.js";
+import {
+  AuthController
+} from "./chunk.7DYV7ZXX.js";
+import {
+  TerraMap
+} from "./chunk.DHRENFRE.js";
+import {
+  DB_NAME,
+  getDataByKey
+} from "./chunk.EHU3RZOC.js";
+import {
+  h
+} from "./chunk.ASJLND3B.js";
+import {
+  TerraButton
+} from "./chunk.3QZNL3QN.js";
+import {
+  formatDate
+} from "./chunk.TKSEPVAL.js";
+import {
+  TerraIcon
+} from "./chunk.QRJLBELU.js";
+import {
+  watch
+} from "./chunk.MPVZOQYA.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n,
+  r
+} from "./chunk.XQO3ZO7J.js";
+import {
+  A,
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet,
+  __toESM,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/plot-toolbar/plot-toolbar.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var Plotly = __toESM(require_plotly_min(), 1);
+var _controller, _isBottomSheetDragging, _bottomSheetStartY, _getLocationIcon, getLocationIcon_fn, _getDateRangeIcon, getDateRangeIcon_fn, _toggleMobileTitle, toggleMobileTitle_fn, _onBottomSheetTouchStart, onBottomSheetTouchStart_fn, _onBottomSheetTouchMove, onBottomSheetTouchMove_fn, _onBottomSheetMouseDown, onBottomSheetMouseDown_fn, _handleBottomSheetStartDrag, handleBottomSheetStartDrag_fn, _handleBottomSheetMoveDrag, handleBottomSheetMoveDrag_fn, _handleBottomSheetEndDrag, handleBottomSheetEndDrag_fn, _handleBottomSheetClose, handleBottomSheetClose_fn, _handleActiveMenuItem, handleActiveMenuItem_fn, _handleMenuLeave, handleMenuLeave_fn, _onShowOpacityChange, _onColorMapChange, _showCheckBoxToggle, _renderGeotiffPanel, renderGeotiffPanel_fn, _renderInfoPanel, renderInfoPanel_fn, _renderMobileInfoPanel, renderMobileInfoPanel_fn, _renderCitationPanel, renderCitationPanel_fn, _renderDownloadPanel, renderDownloadPanel_fn, _renderImageDownloadButtons, renderImageDownloadButtons_fn, _renderHelpPanel, renderHelpPanel_fn, _renderJupyterNotebookPanel, renderJupyterNotebookPanel_fn, _handleJupyterNotebookClick, handleJupyterNotebookClick_fn, _sendDataToJupyterNotebook, sendDataToJupyterNotebook_fn, _sendTimeSeriesDataToJupyterNotebook, sendTimeSeriesDataToJupyterNotebook_fn, _sendMapDataToJupyterNotebook, sendMapDataToJupyterNotebook_fn, _downloadPNG, downloadPNG_fn, _downloadJPG, downloadJPG_fn, _downloadCSV, downloadCSV_fn, _convertToCSV, convertToCSV_fn, _downloadGeotiff, downloadGeotiff_fn, _downloadMapPNG, downloadMapPNG_fn, _downloadMapJPG, downloadMapJPG_fn, _normalizeMetadata, normalizeMetadata_fn;
+var TerraPlotToolbar = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _getLocationIcon);
+    __privateAdd(this, _getDateRangeIcon);
+    __privateAdd(this, _toggleMobileTitle);
+    __privateAdd(this, _onBottomSheetTouchStart);
+    __privateAdd(this, _onBottomSheetTouchMove);
+    __privateAdd(this, _onBottomSheetMouseDown);
+    __privateAdd(this, _handleBottomSheetStartDrag);
+    __privateAdd(this, _handleBottomSheetMoveDrag);
+    __privateAdd(this, _handleBottomSheetEndDrag);
+    __privateAdd(this, _handleBottomSheetClose);
+    __privateAdd(this, _handleActiveMenuItem);
+    __privateAdd(this, _handleMenuLeave);
+    __privateAdd(this, _renderGeotiffPanel);
+    __privateAdd(this, _renderInfoPanel);
+    __privateAdd(this, _renderMobileInfoPanel);
+    __privateAdd(this, _renderCitationPanel);
+    __privateAdd(this, _renderDownloadPanel);
+    __privateAdd(this, _renderImageDownloadButtons);
+    __privateAdd(this, _renderHelpPanel);
+    __privateAdd(this, _renderJupyterNotebookPanel);
+    __privateAdd(this, _handleJupyterNotebookClick);
+    __privateAdd(this, _sendDataToJupyterNotebook);
+    __privateAdd(this, _sendTimeSeriesDataToJupyterNotebook);
+    __privateAdd(this, _sendMapDataToJupyterNotebook);
+    __privateAdd(this, _downloadPNG);
+    __privateAdd(this, _downloadJPG);
+    __privateAdd(this, _downloadCSV);
+    __privateAdd(this, _convertToCSV);
+    __privateAdd(this, _downloadGeotiff);
+    __privateAdd(this, _downloadMapPNG);
+    __privateAdd(this, _downloadMapJPG);
+    /**
+     * Converts raw object with human-readable keys
+     * (e.g. "User Start Date:", "Fill Value:")
+     * into a cleaner camelCase object usable in code
+     * (e.g. metadata.userStartDate, metadata.fillValue).
+     *
+     * @param raw - Original object with human-readable keys
+     * @returns Normalized object with camelCase keys
+     */
+    __privateAdd(this, _normalizeMetadata);
+    this.showLocation = true;
+    this.colormaps = [];
+    this.colorMapName = "viridis";
+    this.opacity = 1;
+    this.showCitation = false;
+    this.mobileView = false;
+    this.bottomSheetDragY = 0;
+    this.hideTitle = false;
+    this.activeMenuItem = null;
+    this.showLocationTooltip = false;
+    this._authController = new AuthController(this);
+    __privateAdd(this, _controller, new PlotToolbarController(this));
+    __privateAdd(this, _isBottomSheetDragging, false);
+    __privateAdd(this, _bottomSheetStartY, 0);
+    __privateAdd(this, _onShowOpacityChange, (e2) => {
+      this.opacity = parseFloat(e2.target.value);
+      this.dispatchEvent(
+        new CustomEvent("show-opacity-value", {
+          detail: this.opacity,
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+    __privateAdd(this, _onColorMapChange, (e2) => {
+      this.colorMapName = e2.target.value;
+      this.dispatchEvent(
+        new CustomEvent("show-color-map", {
+          detail: this.colorMapName,
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+    __privateAdd(this, _showCheckBoxToggle, (e2) => {
+      const checkbox = e2.target;
+      const isChecked = checkbox.checked;
+      this.dispatchEvent(
+        new CustomEvent("show-check-box-toggle", {
+          detail: isChecked,
+          bubbles: true,
+          composed: true
+        })
+      );
+    });
+  }
+  handleFocus(_oldValue, newValue) {
+    if (this.mobileView)
+      return;
+    if (newValue === null) {
+      return;
+    }
+    this.menu.focus();
+  }
+  closeMenu() {
+    this.activeMenuItem = null;
+  }
+  firstUpdated() {
+    this.hideTitle = !!(this.mobileView && this.productLabel);
+  }
+  render() {
+    var _a;
+    const metadata = [
+      this.catalogVariable.dataProductInstrumentShortName,
+      this.catalogVariable.dataProductTimeInterval
+    ].filter(Boolean).filter((value) => value.toLowerCase() !== "not applicable");
+    return h(
+      !this.catalogVariable ? b`<div class="spacer"></div>` : b`
+                      <header>
+                          <div class="title-container">
+                              <slot name="title">
+                                  <h2 class="title" @click=${__privateMethod(this, _toggleMobileTitle, toggleMobileTitle_fn)}>
+                                      ${this.productLabel || ""}
+                                      ${this.productLabel ? b`<br />` : ""}
+                                      ${!this.hideTitle ? this.catalogVariable.dataFieldLongName : ""}
+                                  </h2>
+                              </slot>
+                              <slot name="subtitle" ?hidden=${this.hideTitle}>
+                                  <h3 class="subtitle">
+                                      ${metadata.join(" \u2022 ")} •
+                                      <a
+                                          target="_blank"
+                                          href="${this.catalogVariable.dataProductDescriptionUrl}"
+                                          >[${this.catalogVariable.dataProductShortName}_${this.catalogVariable.dataProductVersion}]</a
+                                      >
+                                      ${this.showLocation ? b`• ${__privateMethod(this, _getLocationIcon, getLocationIcon_fn).call(this)}
+                                                <span
+                                                    class="location-text"
+                                                    @mouseenter=${() => this.showLocationTooltip = true}
+                                                    @mouseleave=${() => this.showLocationTooltip = true}
+                                                    >${((_a = this.location) != null ? _a : "").replace(
+        /,/g,
+        ", "
+      )}</span
+                                                >` : ""}
+                                      ${this.showDateRange ? b`• ${__privateMethod(this, _getDateRangeIcon, getDateRangeIcon_fn).call(this)}
+                                                <span
+                                                    >${formatDate(this.startDate)} to
+                                                    ${formatDate(this.endDate)}</span
+                                                >` : ""}
+                                  </h3>
+                              </slot>
+                          </div>
+
+                          <div class="toggles" data-mobile-view=${this.mobileView}>
+                              <terra-button
+                                  circle
+                                  outline
+                                  aria-expanded=${this.activeMenuItem === "information"}
+                                  aria-controls="menu"
+                                  aria-haspopup="true"
+                                  class="toggle"
+                                  @mouseenter=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                  @click=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                  data-menu-name="information"
+                              >
+                                  <span class="sr-only"
+                                      >Information for
+                                      ${this.catalogVariable.dataFieldLongName}</span
+                                  >
+
+                                  <terra-icon
+                                      name="info"
+                                      font-size="1em"
+                                  ></terra-icon>
+                              </terra-button>
+
+                              ${this.showCitation ? b`
+                                        <terra-button
+                                            circle
+                                            outline
+                                            aria-expanded=${this.activeMenuItem === "citation"}
+                                            aria-controls="menu"
+                                            aria-haspopup="true"
+                                            class="toggle"
+                                            @mouseenter=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                            @click=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                            data-menu-name="citation"
+                                        >
+                                            <span class="sr-only"
+                                                >Citation for
+                                                ${this.catalogVariable.dataFieldLongName}</span
+                                            >
+
+                                            <span
+                                                style="font-weight: 500; font-size: 1.2em"
+                                                >C</span
+                                            >
+                                        </terra-button>
+                                    ` : A}
+
+                              <terra-button
+                                  circle
+                                  outline
+                                  aria-expanded=${this.activeMenuItem === "download"}
+                                  aria-controls="menu"
+                                  aria-haspopup="true"
+                                  class="toggle"
+                                  @mouseenter=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                  @click=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                  data-menu-name="download"
+                              >
+                                  <span class="sr-only"
+                                      >Download options for
+                                      ${this.catalogVariable.dataFieldLongName}</span
+                                  >
+
+                                  <terra-icon
+                                      name="outline-arrow-down-tray"
+                                      library="heroicons"
+                                      font-size="1.5em"
+                                  ></terra-icon>
+                              </terra-button>
+
+                              <terra-button
+                                  circle
+                                  outline
+                                  aria-expanded=${this.activeMenuItem === "help"}
+                                  aria-controls="menu"
+                                  aria-haspopup="true"
+                                  class="toggle help-toggle"
+                                  @mouseenter=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                  @click=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                  data-menu-name="help"
+                              >
+                                  <span class="sr-only"
+                                      >Help link for
+                                      ${this.catalogVariable.dataFieldLongName}</span
+                                  >
+
+                                  <terra-icon
+                                      name="question"
+                                      font-size="1em"
+                                  ></terra-icon>
+                              </terra-button>
+
+                              <terra-button
+                                  outline
+                                  aria-expanded=${this.activeMenuItem === "jupyter"}
+                                  aria-controls="menu"
+                                  aria-haspopup="true"
+                                  class="toggle square-button"
+                                  variant="warning"
+                                  @mouseenter=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                  @click=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                  data-menu-name="jupyter"
+                              >
+                                  <span class="sr-only"
+                                      >Open in Jupyter Notebook for
+                                      ${this.catalogVariable.dataFieldLongName}</span
+                                  >
+
+                                  <terra-icon
+                                      name="outline-code-bracket"
+                                      library="heroicons"
+                                      font-size="1.5em"
+                                  ></terra-icon>
+                              </terra-button>
+
+                              ${this.dataType == "geotiff" ? b`
+                                        <terra-button
+                                            circle
+                                            outline
+                                            aria-expanded=${this.activeMenuItem === "GeoTIFF"}
+                                            aria-controls="menu"
+                                            aria-haspopup="true"
+                                            class="toggle"
+                                            @mouseenter=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                            @click=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                            data-menu-name="GeoTIFF"
+                                        >
+                                            <terra-icon
+                                                name="outline-cog-8-tooth"
+                                                library="heroicons"
+                                                font-size="1.5em"
+                                            ></terra-icon>
+                                        </terra-button>
+                                    ` : A}
+                          </div>
+
+                          ${!this.mobileView ? b`
+                                    <menu
+                                        role="menu"
+                                        id="menu"
+                                        data-expanded=${this.activeMenuItem !== null}
+                                        tabindex="-1"
+                                        @mouseleave=${__privateMethod(this, _handleMenuLeave, handleMenuLeave_fn)}
+                                    >
+                                        <li
+                                            role="menuitem"
+                                            ?hidden=${this.activeMenuItem !== "information"}
+                                        >
+                                            ${__privateMethod(this, _renderInfoPanel, renderInfoPanel_fn).call(this)}
+                                        </li>
+
+                                        <li
+                                            role="menuitem"
+                                            ?hidden=${this.activeMenuItem !== "citation"}
+                                        >
+                                            ${__privateMethod(this, _renderCitationPanel, renderCitationPanel_fn).call(this)}
+                                        </li>
+
+                                        <li
+                                            role="menuitem"
+                                            ?hidden=${this.activeMenuItem !== "download"}
+                                        >
+                                            ${__privateMethod(this, _renderDownloadPanel, renderDownloadPanel_fn).call(this)}
+                                        </li>
+
+                                        <li
+                                            role="menuitem"
+                                            ?hidden=${this.activeMenuItem !== "help"}
+                                        >
+                                            ${__privateMethod(this, _renderHelpPanel, renderHelpPanel_fn).call(this)}
+                                        </li>
+
+                                        <li
+                                            role="menuitem"
+                                            ?hidden=${this.activeMenuItem !== "jupyter"}
+                                        >
+                                            ${__privateMethod(this, _renderJupyterNotebookPanel, renderJupyterNotebookPanel_fn).call(this)}
+                                        </li>
+
+                                        <li
+                                            role="menuitem"
+                                            ?hidden=${this.activeMenuItem !== "GeoTIFF"}
+                                        >
+                                            ${__privateMethod(this, _renderGeotiffPanel, renderGeotiffPanel_fn).call(this)}
+                                        </li>
+                                    </menu>
+                                ` : A}
+                          ${this.showLocationTooltip ? b`
+                                    <div class="location-tooltip">
+                                        <terra-map
+                                            .value=${this.location}
+                                            .fitToValue=${true}
+                                            .staticMode=${true}
+                                            style="width: 300px; height: 200px;"
+                                        ></terra-map>
+                                    </div>
+                                ` : ""}
+                      </header>
+
+                      ${this.mobileView ? b` <div
+                                    class="bottom-sheet-backdrop"
+                                    data-state=${this.activeMenuItem ? "open" : "close"}
+                                    @click=${__privateMethod(this, _handleBottomSheetClose, handleBottomSheetClose_fn)}
+                                ></div>
+                                <div
+                                    data-state=${this.activeMenuItem ? "open" : "close"}
+                                    class="bottom-sheet"
+                                    @touchstart=${__privateMethod(this, _onBottomSheetTouchStart, onBottomSheetTouchStart_fn)}
+                                    @touchmove=${__privateMethod(this, _onBottomSheetTouchMove, onBottomSheetTouchMove_fn)}
+                                    @touchend=${__privateMethod(this, _handleBottomSheetEndDrag, handleBottomSheetEndDrag_fn)}
+                                    @mousedown=${__privateMethod(this, _onBottomSheetMouseDown, onBottomSheetMouseDown_fn)}
+                                >
+                                    <div class="bottom-sheet-handle"></div>
+                                    <div class="bottom-sheet-content">
+                                        ${this.activeMenuItem === "information" ? __privateMethod(this, _renderMobileInfoPanel, renderMobileInfoPanel_fn).call(this) : ""}
+                                        ${this.activeMenuItem === "citation" ? __privateMethod(this, _renderCitationPanel, renderCitationPanel_fn).call(this) : ""}
+                                        ${this.activeMenuItem === "download" ? __privateMethod(this, _renderDownloadPanel, renderDownloadPanel_fn).call(this) : ""}
+                                        ${this.activeMenuItem === "help" ? __privateMethod(this, _renderHelpPanel, renderHelpPanel_fn).call(this) : ""}
+                                        ${this.activeMenuItem === "jupyter" ? __privateMethod(this, _renderJupyterNotebookPanel, renderJupyterNotebookPanel_fn).call(this) : ""}
+                                        ${this.activeMenuItem === "GeoTIFF" ? __privateMethod(this, _renderGeotiffPanel, renderGeotiffPanel_fn).call(this) : ""}
+                                    </div>
+                                </div>` : A}
+                  `
+    );
+  }
+};
+_controller = new WeakMap();
+_isBottomSheetDragging = new WeakMap();
+_bottomSheetStartY = new WeakMap();
+_getLocationIcon = new WeakSet();
+getLocationIcon_fn = function() {
+  if (!this.location)
+    return "";
+  return b`<terra-icon
+            name="outline-map-pin"
+            library="heroicons"
+            font-size="1em"
+            class="location-icon"
+            label="Point location"
+        ></terra-icon>`;
+};
+_getDateRangeIcon = new WeakSet();
+getDateRangeIcon_fn = function() {
+  if (!this.startDate || !this.endDate)
+    return "";
+  return b`<terra-icon
+            name="outline-calendar-date-range"
+            library="heroicons"
+            font-size="1em"
+            class="date-range-icon"
+            label="Date range"
+        ></terra-icon>`;
+};
+_toggleMobileTitle = new WeakSet();
+toggleMobileTitle_fn = function() {
+  if (!this.mobileView || !this.productLabel)
+    return;
+  this.hideTitle = !this.hideTitle;
+};
+_onBottomSheetTouchStart = new WeakSet();
+onBottomSheetTouchStart_fn = function(e2) {
+  __privateMethod(this, _handleBottomSheetStartDrag, handleBottomSheetStartDrag_fn).call(this, e2.touches[0].clientY, e2.target);
+};
+_onBottomSheetTouchMove = new WeakSet();
+onBottomSheetTouchMove_fn = function(e2) {
+  if (!__privateGet(this, _isBottomSheetDragging))
+    return;
+  __privateMethod(this, _handleBottomSheetMoveDrag, handleBottomSheetMoveDrag_fn).call(this, e2.touches[0].clientY);
+  if (this.bottomSheetDragY > 0) {
+    e2.cancelable && e2.preventDefault();
+  }
+};
+_onBottomSheetMouseDown = new WeakSet();
+onBottomSheetMouseDown_fn = function(e2) {
+  __privateMethod(this, _handleBottomSheetStartDrag, handleBottomSheetStartDrag_fn).call(this, e2.clientY, e2.target);
+  const move = (ev) => __privateMethod(this, _handleBottomSheetMoveDrag, handleBottomSheetMoveDrag_fn).call(this, ev.clientY);
+  const up = () => {
+    __privateMethod(this, _handleBottomSheetEndDrag, handleBottomSheetEndDrag_fn).call(this);
+    window.removeEventListener("mousemove", move);
+    window.removeEventListener("mouseup", up);
+  };
+  window.addEventListener("mousemove", move);
+  window.addEventListener("mouseup", up);
+};
+_handleBottomSheetStartDrag = new WeakSet();
+handleBottomSheetStartDrag_fn = function(y, target) {
+  if (!this.activeMenuItem)
+    return;
+  const content = this.bottomSheet.querySelector(".bottom-sheet-content");
+  if (content && content.scrollTop > 0 && target !== this.bottomSheet)
+    return;
+  __privateSet(this, _isBottomSheetDragging, true);
+  __privateSet(this, _bottomSheetStartY, y);
+  this.bottomSheetDragY = 0;
+  this.bottomSheet.style.transition = "none";
+};
+_handleBottomSheetMoveDrag = new WeakSet();
+handleBottomSheetMoveDrag_fn = function(y) {
+  this.bottomSheetDragY = y - __privateGet(this, _bottomSheetStartY);
+  if (!__privateGet(this, _isBottomSheetDragging))
+    return;
+  if (this.bottomSheetDragY > 0) {
+    this.bottomSheet.style.transform = `translate(-50%, ${this.bottomSheetDragY}px)`;
+  }
+};
+_handleBottomSheetEndDrag = new WeakSet();
+handleBottomSheetEndDrag_fn = function() {
+  const SWIPE_TO_CLOSE_THRESHOLD = 20;
+  if (!__privateGet(this, _isBottomSheetDragging))
+    return;
+  __privateSet(this, _isBottomSheetDragging, false);
+  this.bottomSheet.style.transition = "transform 0.35s cubic-bezier(0.25,1,0.5,1)";
+  if (this.bottomSheetDragY > SWIPE_TO_CLOSE_THRESHOLD) {
+    __privateMethod(this, _handleBottomSheetClose, handleBottomSheetClose_fn).call(this);
+  } else {
+    this.bottomSheet.style.transform = "translate(-50%, 0)";
+  }
+  this.bottomSheetDragY = 0;
+};
+_handleBottomSheetClose = new WeakSet();
+handleBottomSheetClose_fn = function() {
+  this.bottomSheet.style.transform = "translate(-50%, 100%)";
+  setTimeout(() => {
+    this.closeMenu();
+    this.bottomSheet.style.transform = "";
+  }, 150);
+  const scrollY = Number(document.body.dataset.scrollLockY || 0);
+  document.body.style.position = "";
+  document.body.style.top = "";
+  document.body.style.left = "";
+  document.body.style.right = "";
+  document.body.style.width = "";
+  delete document.body.dataset.scrollLockY;
+  window.scrollTo(0, scrollY);
+};
+_handleActiveMenuItem = new WeakSet();
+handleActiveMenuItem_fn = function(event) {
+  if (this.mobileView && event.type === "mouseenter") {
+    return;
+  }
+  const button = event.currentTarget;
+  const menuName = button.dataset.menuName;
+  this.activeMenuItem = menuName;
+  if (this.mobileView) {
+    const scrollY = window.scrollY;
+    document.body.dataset.scrollLockY = String(scrollY);
+    document.body.style.position = "fixed";
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.left = "0";
+    document.body.style.right = "0";
+    document.body.style.width = "100%";
+  }
+};
+_handleMenuLeave = new WeakSet();
+handleMenuLeave_fn = function(event) {
+  if (this.mobileView)
+    return;
+  const relatedTarget = event.relatedTarget;
+  if (!this.contains(relatedTarget)) {
+    this.activeMenuItem = null;
+  }
+};
+_onShowOpacityChange = new WeakMap();
+_onColorMapChange = new WeakMap();
+_showCheckBoxToggle = new WeakMap();
+_renderGeotiffPanel = new WeakSet();
+renderGeotiffPanel_fn = function() {
+  return b`
+            <h3 class="sr-only">GeoTIFF Settings</h3>
+
+            ${this.dataType === "geotiff" ? b`
+                      <p>Select opacity,apply colormaps, and toggle draw profile</p>
+
+                      <label>
+                          Layer opacity
+                          <input
+                              type="range"
+                              min="0"
+                              max="1"
+                              step="0.01"
+                              .value=${String(this.opacity)}
+                              @input=${__privateGet(this, _onShowOpacityChange)}
+                          />
+                          <span id="opacity-output">${this.opacity.toFixed(2)}</span>
+                      </label>
+
+                      <label>
+                          ColorMap:
+                          <select
+                              id="colormap-select"
+                              @change=${__privateGet(this, _onColorMapChange)}
+                          >
+                              ${this.colormaps.map(
+    (cm) => b` <option
+                                          value="${cm}"
+                                          ?selected=${cm === this.colorMapName}
+                                      >
+                                          ${cm}
+                                      </option>`
+  )}
+                          </select>
+                      </label>
+                      <label>
+                          <input
+                              type="checkbox"
+                              @change=${__privateGet(this, _showCheckBoxToggle)}
+                          />
+                          <slot>Draw Profile</slot>
+                      </label>
+                  ` : A}
+        `;
+};
+_renderInfoPanel = new WeakSet();
+renderInfoPanel_fn = function() {
+  var _a;
+  return b`
+            <h3 class="sr-only">Information</h3>
+
+            <dl>
+                <dt>Variable Longname</dt>
+                <dd>${this.catalogVariable.dataFieldLongName}</dd>
+
+                <dt>Variable Shortname</dt>
+                <dd>
+                    ${(_a = this.catalogVariable.dataFieldShortName) != null ? _a : this.catalogVariable.dataFieldAccessName}
+                </dd>
+
+                <dt>Units</dt>
+                <dd>
+                    <code>${this.catalogVariable.dataFieldUnits}</code>
+                </dd>
+
+                <dt>Dataset Information</dt>
+                <dd>
+                    <a
+                        href=${this.catalogVariable.dataProductDescriptionUrl}
+                        rel="noopener noreffer"
+                        target="_blank"
+                        >${this.catalogVariable.dataProductLongName}
+
+                        <terra-icon
+                            name="outline-arrow-top-right-on-square"
+                            library="heroicons"
+                        ></terra-icon>
+                    </a>
+                </dd>
+
+                <dt>Variable Information</dt>
+                <dd>
+                    <a
+                        href=${this.catalogVariable.dataFieldDescriptionUrl}
+                        rel="noopener noreffer"
+                        target="_blank"
+                        >Variable Glossary
+
+                        <terra-icon
+                            name="outline-arrow-top-right-on-square"
+                            library="heroicons"
+                        ></terra-icon>
+                    </a>
+                </dd>
+            </dl>
+        `;
+};
+_renderMobileInfoPanel = new WeakSet();
+renderMobileInfoPanel_fn = function() {
+  var _a;
+  const locationArr = this.location.trim().split(",");
+  const isLatLon = locationArr.length === 2;
+  const isBoundingBox = locationArr.length === 4;
+  const timeAvgMetadata = isBoundingBox ? __privateMethod(this, _normalizeMetadata, normalizeMetadata_fn).call(this, this.metadata) : this.metadata;
+  return b`
+            <h3>Request</h3>
+            <ul class="bottom-sheet-list">
+                ${isLatLon ? b` <li>
+                          <strong>Timestamp: </strong>${formatDate(
+    this.metadata.Request_time,
+    "yyyy-MM-dd HH:mm"
+  )}
+                      </li>` : ""}
+                <li>
+                    <strong>Begin Datetime: </strong>${formatDate(
+    isBoundingBox ? timeAvgMetadata.userStartDate : this.metadata.begin_time
+  )}
+                </li>
+                <li>
+                    <strong>End Datetime: </strong>${formatDate(
+    isBoundingBox ? timeAvgMetadata.userEndDate : this.metadata.end_time
+  )}
+                </li>
+                <li>
+                    <strong>${isBoundingBox ? "West" : "Lat"}: </strong
+                    >${locationArr[0]}
+                </li>
+                <li>
+                    <strong>${isBoundingBox ? "South" : "Lon"}: </strong
+                    >${locationArr[1]}
+                </li>
+                ${isBoundingBox ? b`
+                          <li><strong>East: </strong>${locationArr[2]}</li>
+                          <li><strong>North: </strong>${locationArr[3]}</li>
+                      ` : ""}
+            </ul>
+
+            <h3>Data Variable</h3>
+            <ul class="bottom-sheet-list">
+                ${this.productLabel ? b`<li><strong>Label: </strong>${this.productLabel}</li>` : ""}
+                <li>
+                    <strong>Longname: </strong>${this.catalogVariable.dataFieldLongName}
+                </li>
+                <li>
+                    <strong>Shortname: </strong>
+                    ${(_a = this.catalogVariable.dataFieldShortName) != null ? _a : this.catalogVariable.dataFieldAccessName}
+                </li>
+                <li>
+                    <strong>Units: </strong>
+                    ${this.catalogVariable.dataFieldUnits}
+                </li>
+                <li>
+                    <strong>Fill Value: </strong>
+                    ${isBoundingBox ? timeAvgMetadata.fillValue : this.metadata.undef}
+                </li>
+
+                <li>
+                    <strong>Data Product Name: </strong>
+                    ${this.catalogVariable.dataProductShortName}.${this.catalogVariable.dataProductVersion}
+                </li>
+                ${isLatLon ? b`<li><strong>Mean Value: </strong>${this.metadata.mean}</li>
+                          <li>
+                              <strong>Lat. Resolution: </strong>${this.metadata.lat_resolution}
+                          </li>
+                          <li>
+                              <strong>Lon. Resolution: </strong>${this.metadata.lon_resolution}
+                          </li>
+                          <li><strong>DOI: </strong>${this.metadata.doi}</li>` : ""}
+                <li>
+                    <a
+                        href=${this.catalogVariable.dataProductDescriptionUrl}
+                        rel="noopener noreffer"
+                        target="_blank"
+                        >Dataset Information
+                        <terra-icon
+                            name="outline-arrow-top-right-on-square"
+                            library="heroicons"
+                        ></terra-icon>
+                    </a>
+                </li>
+            </ul>
+        `;
+};
+_renderCitationPanel = new WeakSet();
+renderCitationPanel_fn = function() {
+  var _a, _b;
+  const citation = (_a = __privateGet(this, _controller).collectionCitation) == null ? void 0 : _a.collectionCitations[0];
+  if (!citation) {
+    return b`<div class="spacer"></div>`;
+  }
+  return b`
+            <h3 class="sr-only">Citation</h3>
+
+            ${this.applicationCitation ? b`
+                      <p>
+                          Please cite both the data used and the application itself.
+                      </p>
+                  ` : A}
+
+            <p>
+                <strong>Data Citation</strong>
+            </p>
+
+            <p>
+                ${citation == null ? void 0 : citation.creator} (${formatDate(citation == null ? void 0 : citation.releaseDate, "yyyy")}),
+                ${citation == null ? void 0 : citation.title}, Edited by ${citation == null ? void 0 : citation.editor},
+                ${citation == null ? void 0 : citation.releasePlace}, ${citation == null ? void 0 : citation.publisher},
+                ${(_b = __privateGet(this, _controller).collectionCitation) == null ? void 0 : _b.doi.doi}
+            </p>
+
+            ${this.applicationCitation ? b`
+                      <p>
+                          <strong>Application Citation</strong>
+                      </p>
+
+                      <p>${this.applicationCitation}</p>
+                  ` : A}
+        `;
+};
+_renderDownloadPanel = new WeakSet();
+renderDownloadPanel_fn = function() {
+  return b`
+            <h3 class="sr-only">Download Options</h3>
+
+            ${this.dataType === "geotiff" ? b`
+                      <p>
+                          This plot can be downloaded as a
+                          <abbr title="Geotiff">GeoTIFF</abbr>, a
+                          <abbr title="Portable Network Graphic">PNG</abbr>, or a
+                          <abbr title="Joint Photographic Experts Group">JPG</abbr>
+                          image
+                      </p>
+                  ` : b`
+                      <p>
+                          This plot can be downloaded as a
+                          <abbr title="Portable Network Graphic">PNG</abbr> or
+                          <abbr title="Joint Photographic Experts Group">JPG</abbr>
+                          image, or as
+                          <abbr title="Comma-Separated Value">CSV</abbr>
+                          data.
+                      </p>
+                  `}
+            ${this.dataType === "geotiff" ? b`
+                      <terra-button
+                          outline
+                          variant="default"
+                          @click=${__privateMethod(this, _downloadGeotiff, downloadGeotiff_fn)}
+                      >
+                          <span class="sr-only">Download Plot Data as </span>
+                          GeoTIFF
+                          <terra-icon
+                              slot="prefix"
+                              name="outline-photo"
+                              library="heroicons"
+                              font-size="1.5em"
+                          ></terra-icon>
+                      </terra-button>
+                      ${__privateMethod(this, _renderImageDownloadButtons, renderImageDownloadButtons_fn).call(this, true)}
+                  ` : b`
+                      ${__privateMethod(this, _renderImageDownloadButtons, renderImageDownloadButtons_fn).call(this, false)}
+                      <terra-button
+                          outline
+                          variant="default"
+                          @click=${__privateMethod(this, _downloadCSV, downloadCSV_fn)}
+                      >
+                          <span class="sr-only">Download Plot Data as </span>
+                          CSV
+                          <terra-icon
+                              slot="prefix"
+                              name="outline-document-chart-bar"
+                              library="heroicons"
+                              font-size="1.5em"
+                          ></terra-icon>
+                      </terra-button>
+                  `}
+        `;
+};
+_renderImageDownloadButtons = new WeakSet();
+renderImageDownloadButtons_fn = function(isMap) {
+  return b`
+            <terra-button
+                outline
+                variant="default"
+                @click=${isMap ? __privateMethod(this, _downloadMapPNG, downloadMapPNG_fn) : __privateMethod(this, _downloadPNG, downloadPNG_fn)}
+            >
+                <span class="sr-only">Download ${isMap ? "Map" : "Plot"} as </span>
+                PNG
+                <terra-icon
+                    slot="prefix"
+                    name="outline-photo"
+                    library="heroicons"
+                    font-size="1.5em"
+                ></terra-icon>
+            </terra-button>
+
+            <terra-button
+                outline
+                variant="default"
+                @click=${isMap ? __privateMethod(this, _downloadMapJPG, downloadMapJPG_fn) : __privateMethod(this, _downloadJPG, downloadJPG_fn)}
+            >
+                <span class="sr-only">Download ${isMap ? "Map" : "Plot"} as </span>
+                JPG
+                <terra-icon
+                    slot="prefix"
+                    name="outline-photo"
+                    library="heroicons"
+                    font-size="1.5em"
+                ></terra-icon>
+            </terra-button>
+        `;
+};
+_renderHelpPanel = new WeakSet();
+renderHelpPanel_fn = function() {
+  return b`
+            <h3 class="sr-only">Help Links</h3>
+            <ul>
+                <slot name="help-links"></slot>
+                <li>
+                    <a href="https://forum.earthdata.nasa.gov/viewforum.php?f=7&DAAC=3" rel"noopener noreffer">Earthdata User Forum
+                        <terra-icon
+                            name="outline-arrow-top-right-on-square"
+                            library="heroicons"
+                        ></terra-icon>
+                    </a>
+                </li>
+            </ul>                  
+        `;
+};
+_renderJupyterNotebookPanel = new WeakSet();
+renderJupyterNotebookPanel_fn = function() {
+  return b`
+            <h3 class="sr-only">Jupyter Notebook Options</h3>
+            <p>Open this plot in a Jupyter Notebook to explore the data further.</p>
+            <a
+                href="#"
+                @click=${(e2) => {
+    e2.preventDefault();
+    __privateMethod(this, _handleJupyterNotebookClick, handleJupyterNotebookClick_fn).call(this);
+  }}
+            >
+                Open in Jupyter Notebook
+                <terra-icon
+                    name="outline-arrow-top-right-on-square"
+                    library="heroicons"
+                ></terra-icon>
+            </a>
+        `;
+};
+_handleJupyterNotebookClick = new WeakSet();
+handleJupyterNotebookClick_fn = function() {
+  const jupyterLiteUrl = "https://gesdisc.github.io/jupyterlite/lab/index.html";
+  const jupyterWindow = window.open(jupyterLiteUrl, "_blank");
+  if (!jupyterWindow) {
+    console.error("Failed to open JupyterLite!");
+    return;
+  }
+  const handleMessage = (event) => {
+    var _a;
+    if (((_a = event.data) == null ? void 0 : _a.type) !== "jupyterlite-ready") {
+      return;
+    }
+    console.log("JupyterLite is ready!");
+    __privateMethod(this, _sendDataToJupyterNotebook, sendDataToJupyterNotebook_fn).call(this, jupyterWindow);
+  };
+  window.addEventListener("message", handleMessage.bind(this), { once: true });
+};
+_sendDataToJupyterNotebook = new WeakSet();
+sendDataToJupyterNotebook_fn = function(jupyterWindow) {
+  if (this.dataType === "geotiff") {
+    __privateMethod(this, _sendMapDataToJupyterNotebook, sendMapDataToJupyterNotebook_fn).call(this, jupyterWindow);
+  } else {
+    __privateMethod(this, _sendTimeSeriesDataToJupyterNotebook, sendTimeSeriesDataToJupyterNotebook_fn).call(this, jupyterWindow);
+  }
+};
+_sendTimeSeriesDataToJupyterNotebook = new WeakSet();
+sendTimeSeriesDataToJupyterNotebook_fn = function(jupyterWindow) {
+  console.log("Sending time series data to JupyterLite...");
+  getDataByKey(
+    "time-series" /* TIME_SERIES */,
+    this.cacheKey
+  ).then((timeSeriesData) => {
+    setTimeout(() => {
+      var _a;
+      const notebook = getTimeSeriesNotebook(this);
+      jupyterWindow.postMessage(
+        {
+          type: "load-notebook",
+          filename: `${encodeURIComponent((_a = this.variableEntryId) != null ? _a : "plot")}-timeseries.ipynb`,
+          notebook,
+          timeSeriesData,
+          databaseName: DB_NAME,
+          storeName: "time-series" /* TIME_SERIES */,
+          bearerToken: this.bearerToken
+        },
+        "*"
+      );
+    }, 500);
+  });
+};
+_sendMapDataToJupyterNotebook = new WeakSet();
+sendMapDataToJupyterNotebook_fn = function(jupyterWindow) {
+  console.log("Sending map data to JupyterLite...");
+  getDataByKey("time-average-map" /* TIME_AVERAGE_MAP */, this.cacheKey).then(
+    (blob) => {
+      setTimeout(() => {
+        var _a;
+        const notebook = getTimeAveragedMapNotebook(this);
+        jupyterWindow.postMessage(
+          {
+            type: "load-notebook",
+            filename: `${encodeURIComponent((_a = this.variableEntryId) != null ? _a : "plot")}-map.ipynb`,
+            notebook,
+            blob,
+            databaseName: DB_NAME,
+            storeName: "time-average-map" /* TIME_AVERAGE_MAP */,
+            token: this.bearerToken
+          },
+          "*"
+        );
+      }, 500);
+    }
+  );
+};
+_downloadPNG = new WeakSet();
+downloadPNG_fn = function(_event) {
+  Plotly.downloadImage(this.plot.base, {
+    filename: this.catalogVariable.dataFieldId,
+    format: "png",
+    width: 1920,
+    height: 1080
+  });
+};
+_downloadJPG = new WeakSet();
+downloadJPG_fn = function(_event) {
+  Plotly.downloadImage(this.plot.base, {
+    filename: this.catalogVariable.dataFieldId,
+    format: "jpeg",
+    width: 1920,
+    height: 1080
+  });
+};
+_downloadCSV = new WeakSet();
+downloadCSV_fn = function(_event) {
+  var _a, _b;
+  let plotData = [];
+  if (!Array.isArray(this.timeSeriesData)) {
+    return;
+  }
+  (_a = this.timeSeriesData) == null ? void 0 : _a.forEach((plot, index) => {
+    plotData[index] = plot;
+  });
+  const csvData = plotData.map((trace) => {
+    return trace.x.map((x, i) => {
+      return {
+        x,
+        y: trace.y[i]
+      };
+    });
+  }).flat();
+  const csv = __privateMethod(this, _convertToCSV, convertToCSV_fn).call(this, csvData);
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.setAttribute("href", url);
+  const variableName = ((_b = this.catalogVariable) == null ? void 0 : _b.dataFieldId) || "time-series-data";
+  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 filename = `${variableName}${locationStr}${dateRange}.csv`;
+  link.setAttribute("download", filename);
+  link.style.visibility = "hidden";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+_convertToCSV = new WeakSet();
+convertToCSV_fn = function(data) {
+  const header = Object.keys(data[0]).join(",") + "\n";
+  const rows = data.map((obj) => Object.values(obj).join(",")).join("\n");
+  return header + rows;
+};
+_downloadGeotiff = new WeakSet();
+downloadGeotiff_fn = function() {
+  if (!this.timeSeriesData || !(this.timeSeriesData instanceof Blob)) {
+    console.warn("No GeoTIFF available to download.");
+    return;
+  }
+  const url = URL.createObjectURL(this.timeSeriesData);
+  const a = document.createElement("a");
+  const locationStr = `${this.location.replace(/,/g, "_")}`;
+  let file_name = `${this.variableEntryId}_${this.startDate}-${this.endDate}_${locationStr}.tif`;
+  a.href = url;
+  a.download = `${file_name}`;
+  a.style.display = "none";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  console.log("Successfully downloaded tiff file...");
+};
+_downloadMapPNG = new WeakSet();
+downloadMapPNG_fn = function() {
+  this.emit("terra-plot-toolbar-export-image", { detail: { format: "png" } });
+};
+_downloadMapJPG = new WeakSet();
+downloadMapJPG_fn = function() {
+  this.emit("terra-plot-toolbar-export-image", { detail: { format: "jpg" } });
+};
+_normalizeMetadata = new WeakSet();
+normalizeMetadata_fn = function(raw) {
+  const result = {};
+  Object.entries(raw).forEach(([key, value]) => {
+    const cleanKey = key.replace(/:$/, "").toLowerCase().replace(/[^a-z0-9]+(.)/g, (_, c) => c.toUpperCase());
+    result[cleanKey] = value;
+  });
+  return result;
+};
+TerraPlotToolbar.styles = [component_styles_default, plot_toolbar_styles_default];
+TerraPlotToolbar.dependencies = {
+  "terra-icon": TerraIcon,
+  "terra-button": TerraButton,
+  "terra-map": TerraMap
+};
+__decorateClass([
+  n()
+], TerraPlotToolbar.prototype, "catalogVariable", 2);
+__decorateClass([
+  n()
+], TerraPlotToolbar.prototype, "variableEntryId", 2);
+__decorateClass([
+  n()
+], TerraPlotToolbar.prototype, "plot", 2);
+__decorateClass([
+  n()
+], TerraPlotToolbar.prototype, "timeSeriesData", 2);
+__decorateClass([
+  n()
+], TerraPlotToolbar.prototype, "location", 2);
+__decorateClass([
+  n()
+], TerraPlotToolbar.prototype, "startDate", 2);
+__decorateClass([
+  n()
+], TerraPlotToolbar.prototype, "endDate", 2);
+__decorateClass([
+  n()
+], TerraPlotToolbar.prototype, "cacheKey", 2);
+__decorateClass([
+  n()
+], TerraPlotToolbar.prototype, "dataType", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "show-location" })
+], TerraPlotToolbar.prototype, "showLocation", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "show-date-range" })
+], TerraPlotToolbar.prototype, "showDateRange", 2);
+__decorateClass([
+  n({ type: Array })
+], TerraPlotToolbar.prototype, "colormaps", 2);
+__decorateClass([
+  n({ type: String, attribute: "color-map-name", reflect: true })
+], TerraPlotToolbar.prototype, "colorMapName", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraPlotToolbar.prototype, "opacity", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "show-citation" })
+], TerraPlotToolbar.prototype, "showCitation", 2);
+__decorateClass([
+  n({ attribute: "application-citation" })
+], TerraPlotToolbar.prototype, "applicationCitation", 2);
+__decorateClass([
+  n()
+], TerraPlotToolbar.prototype, "mobileView", 2);
+__decorateClass([
+  n()
+], TerraPlotToolbar.prototype, "productLabel", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraPlotToolbar.prototype, "bottomSheetDragY", 2);
+__decorateClass([
+  r()
+], TerraPlotToolbar.prototype, "hideTitle", 2);
+__decorateClass([
+  r()
+], TerraPlotToolbar.prototype, "activeMenuItem", 2);
+__decorateClass([
+  r()
+], TerraPlotToolbar.prototype, "showLocationTooltip", 2);
+__decorateClass([
+  e("#menu")
+], TerraPlotToolbar.prototype, "menu", 2);
+__decorateClass([
+  e(".bottom-sheet")
+], TerraPlotToolbar.prototype, "bottomSheet", 2);
+__decorateClass([
+  watch("activeMenuItem")
+], TerraPlotToolbar.prototype, "handleFocus", 1);
+
+export {
+  TerraPlotToolbar
+};