@nasa-terra/components 0.0.181 → 0.0.182

package/cdn/chunks/chunk.Z45L4FIP.js

@@ -1,1184 +0,0 @@
-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
-};