@nasa-terra/components 0.0.167 → 0.0.169

package/dist/chunks/chunk.MQVNIT4S.js

@@ -1,973 +0,0 @@
-import {
-  getDataAccessNotebook
-} from "./chunk.U3XIKOX7.js";
-import {
-  TerraSlider
-} from "./chunk.AYMNVM3K.js";
-import {
-  TerraMenuItem
-} from "./chunk.ET4GP57T.js";
-import {
-  TerraMenu
-} from "./chunk.ZVEB7QG2.js";
-import {
-  TerraDatePicker
-} from "./chunk.K6WBYPK4.js";
-import {
-  data_access_styles_default
-} from "./chunk.DO6GYJM7.js";
-import {
-  TerraDataGrid
-} from "./chunk.KTF6ZVQC.js";
-import {
-  TerraSpatialPicker
-} from "./chunk.QP5XM7WT.js";
-import {
-  StringifyBoundingBox
-} from "./chunk.JB5255IQ.js";
-import {
-  TerraDropdown
-} from "./chunk.PUQIBC6P.js";
-import {
-  DataAccessController
-} from "./chunk.CIDFDZRW.js";
-import {
-  calculateGranuleSize,
-  getGranuleUrl
-} from "./chunk.CGVPVXTX.js";
-import {
-  TerraLoader
-} from "./chunk.LPYTOTCB.js";
-import {
-  TerraButton
-} from "./chunk.WHFZNJAZ.js";
-import {
-  TerraAlert
-} from "./chunk.SZAADZKK.js";
-import {
-  TerraIcon
-} from "./chunk.HWE36KUL.js";
-import {
-  watch
-} from "./chunk.NWXJOH5T.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.ABJSJSVR.js";
-import {
-  getBasePath
-} from "./chunk.PBC3S6IG.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateGet,
-  __privateMethod,
-  __privateSet,
-  __spreadValues
-} from "./chunk.SHKVBVTI.js";
-
-// src/components/data-access/data-access.component.ts
-import { property, state } from "lit/decorators.js";
-import { html, nothing } from "lit";
-
-// src/internal/debounce.ts
-var TIMER_ID_KEY = Symbol();
-var debounce = (delay) => {
-  return (_target, _propertyKey, descriptor) => {
-    const fn = descriptor.value;
-    descriptor.value = function(...args) {
-      clearTimeout(this[TIMER_ID_KEY]);
-      this[TIMER_ID_KEY] = window.setTimeout(() => {
-        fn.apply(this, args);
-      }, delay);
-    };
-  };
-};
-
-// src/components/data-access/data-access.component.ts
-import { createRef, ref } from "lit/directives/ref.js";
-
-// src/lib/jupyter.ts
-var JUPYTER_LITE_URL = "https://gesdisc.github.io/jupyterlite/lab/index.html";
-function openJupyterLiteWindow(readyCb) {
-  const jupyterWindow = window.open(JUPYTER_LITE_URL, "_blank");
-  if (!jupyterWindow) {
-    console.error("Failed to open JupyterLite!");
-    return;
-  }
-  window.addEventListener("message", (event) => readyCb(event, jupyterWindow), {
-    once: true
-  });
-  return jupyterWindow;
-}
-function sendDataToJupyterNotebook(type, data) {
-  openJupyterLiteWindow((event, jupyterWindow) => {
-    var _a;
-    if (((_a = event.data) == null ? void 0 : _a.type) !== "jupyterlite-ready") {
-      return;
-    }
-    console.log("JupyterLite is ready!");
-    jupyterWindow.postMessage(__spreadValues({ type }, data), "*");
-  });
-}
-
-// src/components/data-access/data-access.component.ts
-var _controller, _boundHandleCloudCoverClickOutside, _gridApi, gridApi_get, _handleCloudCoverClickOutside, handleCloudCoverClickOutside_fn, _initializeGrid, initializeGrid_fn, _handleMapChange, handleMapChange_fn, _handleSpatialDropdownShow, handleSpatialDropdownShow_fn, _handleDateRangeChange, handleDateRangeChange_fn, _getDateRangeButtonText, getDateRangeButtonText_fn, _formatAvailableRangeDate, formatAvailableRangeDate_fn, _getSpatialButtonText, getSpatialButtonText_fn, _clearDateRange, clearDateRange_fn, _clearSpatialFilter, clearSpatialFilter_fn, _toggleCloudCoverPicker, toggleCloudCoverPicker_fn, _clearCloudCoverFilter, clearCloudCoverFilter_fn, _getCloudCoverButtonText, getCloudCoverButtonText_fn, _handleDownloadSelect, handleDownloadSelect_fn, _downloadPythonScript, downloadPythonScript_fn, _downloadEarthdataDownload, downloadEarthdataDownload_fn, _handleJupyterNotebookClick, handleJupyterNotebookClick_fn, _handleCloudCoverChange, handleCloudCoverChange_fn, _renderLoadingOverlay, renderLoadingOverlay_fn;
-var TerraDataAccess = class extends TerraElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _gridApi);
-    __privateAdd(this, _handleCloudCoverClickOutside);
-    __privateAdd(this, _initializeGrid);
-    __privateAdd(this, _handleMapChange);
-    __privateAdd(this, _handleSpatialDropdownShow);
-    __privateAdd(this, _handleDateRangeChange);
-    __privateAdd(this, _getDateRangeButtonText);
-    __privateAdd(this, _formatAvailableRangeDate);
-    __privateAdd(this, _getSpatialButtonText);
-    // Date picker is now handled by dropdown component
-    __privateAdd(this, _clearDateRange);
-    __privateAdd(this, _clearSpatialFilter);
-    __privateAdd(this, _toggleCloudCoverPicker);
-    __privateAdd(this, _clearCloudCoverFilter);
-    __privateAdd(this, _getCloudCoverButtonText);
-    __privateAdd(this, _handleDownloadSelect);
-    __privateAdd(this, _downloadPythonScript);
-    __privateAdd(this, _downloadEarthdataDownload);
-    __privateAdd(this, _handleJupyterNotebookClick);
-    __privateAdd(this, _handleCloudCoverChange);
-    __privateAdd(this, _renderLoadingOverlay);
-    this._gridInitialized = false;
-    this.limit = 50;
-    this.page = 1;
-    this.search = "";
-    this.startDate = "";
-    this.endDate = "";
-    this.location = null;
-    this.cloudCover = { min: void 0, max: void 0 };
-    this.cloudCoverPickerOpen = false;
-    this.datePickerRef = createRef();
-    this.spatialPickerRef = createRef();
-    this.cloudCoverSliderRef = createRef();
-    this.gridRef = createRef();
-    __privateAdd(this, _controller, new DataAccessController(this));
-    __privateAdd(this, _boundHandleCloudCoverClickOutside, null);
-  }
-  handleCollectionChange() {
-    if (this._gridInitialized && this.isVisible) {
-      this._gridInitialized = false;
-      this.firstVisible();
-    }
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (__privateGet(this, _boundHandleCloudCoverClickOutside)) {
-      document.removeEventListener(
-        "click",
-        __privateGet(this, _boundHandleCloudCoverClickOutside)
-      );
-      __privateSet(this, _boundHandleCloudCoverClickOutside, null);
-    }
-  }
-  async firstVisible() {
-    await Promise.all([
-      __privateGet(this, _controller).cloudCoverRangeTask.taskComplete,
-      __privateGet(this, _controller).samplingTask.taskComplete
-    ]);
-    __privateMethod(this, _initializeGrid, initializeGrid_fn).call(this);
-  }
-  handleSearch(search) {
-    var _a;
-    this.search = search;
-    (_a = __privateGet(this, _gridApi, gridApi_get)) == null ? void 0 : _a.purgeInfiniteCache();
-  }
-  render() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (((_a = __privateGet(this, _controller).sampling) == null ? void 0 : _a.firstGranules.count) === 0) {
-      return html`
-                <terra-alert variant="warning" open appearance="white">
-                    <strong>No granules found.</strong>
-                    <p>
-                        This collection does not have any granules available to access
-                        or subset.
-                    </p>
-                </terra-alert>
-            `;
-    }
-    return html`
-            <div class="filters-compact">
-                <div class="search-row">
-                    <div class="search-icon" aria-hidden="true">🔍</div>
-                    <input
-                        type="text"
-                        class="search-input"
-                        placeholder="Search file names"
-                        .value=${(_b = this.search) != null ? _b : ""}
-                        @input=${(event) => {
-      this.handleSearch(
-        event.target.value
-      );
-    }}
-                    />
-                </div>
-
-                <div class="toggle-row">
-                    <terra-dropdown>
-                        <button
-                            slot="trigger"
-                            class="filter-btn ${this.startDate && this.endDate ? "active" : ""}"
-                        >
-                            <terra-icon
-                                name="outline-calendar"
-                                library="heroicons"
-                                font-size="18px"
-                            ></terra-icon>
-                            <span>${__privateMethod(this, _getDateRangeButtonText, getDateRangeButtonText_fn).call(this)}</span>
-                            ${this.startDate && this.endDate ? html`
-                                      <button
-                                          class="clear-badge"
-                                          @click=${(e) => {
-      e.stopPropagation();
-      __privateMethod(this, _clearDateRange, clearDateRange_fn).call(this);
-    }}
-                                          aria-label="Clear date range"
-                                      >
-                                          ×
-                                      </button>
-                                  ` : nothing}
-                        </button>
-
-                        <div class="datepicker-container">
-                            <terra-date-picker
-                                ${ref(this.datePickerRef)}
-                                range
-                                ?enable-time=${__privateGet(this, _controller).isSubDaily}
-                                show-presets
-                                split-inputs
-                                inline
-                                .startDate=${this.startDate}
-                                .endDate=${this.endDate}
-                                .startPlaceholder=${__privateGet(this, _controller).isSubDaily ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD"}
-                                .endPlaceholder=${__privateGet(this, _controller).isSubDaily ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD"}
-                                .minDate=${__privateGet(this, _controller).granuleMinDate}
-                                .maxDate=${__privateGet(this, _controller).granuleMaxDate}
-                                @terra-date-range-change=${__privateMethod(this, _handleDateRangeChange, handleDateRangeChange_fn)}
-                            >
-                                ${__privateGet(this, _controller).granuleMinDate && __privateGet(this, _controller).granuleMaxDate ? html` <p
-                                          slot="additional-text"
-                                          class="available-range"
-                                      >
-                                          <strong>Available Range:</strong>
-                                          ${__privateMethod(this, _formatAvailableRangeDate, formatAvailableRangeDate_fn).call(this, __privateGet(this, _controller).granuleMinDate)}
-                                          -
-                                          ${__privateMethod(this, _formatAvailableRangeDate, formatAvailableRangeDate_fn).call(this, __privateGet(this, _controller).granuleMaxDate)}
-                                      </p>` : nothing}
-                            </terra-date-picker>
-                        </div>
-                    </terra-dropdown>
-
-                    <terra-dropdown
-                        placement="bottom-start"
-                        distance="4"
-                        hoist
-                        @terra-show=${__privateMethod(this, _handleSpatialDropdownShow, handleSpatialDropdownShow_fn)}
-                    >
-                        <div slot="trigger" class="filter">
-                            <button
-                                class="filter-btn ${this.location ? "active" : ""}"
-                            >
-                                <terra-icon
-                                    name="outline-globe-alt"
-                                    library="heroicons"
-                                    font-size="18px"
-                                ></terra-icon>
-                                <span>${__privateMethod(this, _getSpatialButtonText, getSpatialButtonText_fn).call(this)}</span>
-                                ${this.location ? html`
-                                          <button
-                                              class="clear-badge"
-                                              @click=${(e) => {
-      e.stopPropagation();
-      __privateMethod(this, _clearSpatialFilter, clearSpatialFilter_fn).call(this);
-    }}
-                                              aria-label="Clear spatial filter"
-                                          >
-                                              ×
-                                          </button>
-                                      ` : nothing}
-                            </button>
-                        </div>
-
-                        <div class="spatialpicker-container">
-                            <terra-spatial-picker
-                                ${ref(this.spatialPickerRef)}
-                                hide-label
-                                inline
-                                no-world-wrap
-                                .spatialConstraints=${__privateGet(this, _controller).spatialConstraints || "-180, -90, 180, 90"}
-                                @terra-map-change=${__privateMethod(this, _handleMapChange, handleMapChange_fn)}
-                            >
-                                <p class="available-range" slot="additional-text">
-                                    <strong>Available range:</strong> ${__privateGet(this, _controller).spatialConstraints}
-                                </p>
-                            </terra-spatial-picker>
-                        </div>
-                    </terra-dropdown>
-
-                    ${__privateGet(this, _controller).cloudCoverRange ? html`
-                              <div class="filter">
-                                  <button
-                                      class="filter-btn ${this.cloudCover.min !== void 0 && this.cloudCover.max !== void 0 ? "active" : ""}"
-                                      @click=${(e) => {
-      e.stopPropagation();
-      __privateMethod(this, _toggleCloudCoverPicker, toggleCloudCoverPicker_fn).call(this);
-    }}
-                                  >
-                                      <terra-icon
-                                          name="outline-cloud"
-                                          library="heroicons"
-                                          font-size="18px"
-                                      ></terra-icon>
-                                      <span>${__privateMethod(this, _getCloudCoverButtonText, getCloudCoverButtonText_fn).call(this)}</span>
-                                      ${this.cloudCover.min !== void 0 && this.cloudCover.max !== void 0 ? html`
-                                                <button
-                                                    class="clear-badge"
-                                                    @click=${(e) => {
-      e.stopPropagation();
-      __privateMethod(this, _clearCloudCoverFilter, clearCloudCoverFilter_fn).call(this);
-    }}
-                                                    aria-label="Clear cloud cover filter"
-                                                >
-                                                    ×
-                                                </button>
-                                            ` : nothing}
-                                  </button>
-
-                                  <!-- hidden slider to show when clicking the filter -->
-                                  <div
-                                      class="cloud-cover-dropdown ${this.cloudCoverPickerOpen ? "open" : ""}"
-                                      @click=${(e) => e.stopPropagation()}
-                                  >
-                                      <terra-slider
-                                          ${ref(this.cloudCoverSliderRef)}
-                                          mode="range"
-                                          min=${(_c = __privateGet(this, _controller).cloudCoverRange) == null ? void 0 : _c.min}
-                                          max=${(_d = __privateGet(this, _controller).cloudCoverRange) == null ? void 0 : _d.max}
-                                          start-value=${(_f = this.cloudCover.min) != null ? _f : (_e = __privateGet(this, _controller).cloudCoverRange) == null ? void 0 : _e.min}
-                                          end-value=${(_h = this.cloudCover.max) != null ? _h : (_g = __privateGet(this, _controller).cloudCoverRange) == null ? void 0 : _g.max}
-                                          step="0.1"
-                                          hide-label
-                                          label="Cloud Cover"
-                                          @terra-slider-change=${__privateMethod(this, _handleCloudCoverChange, handleCloudCoverChange_fn)}
-                                          show-inputs
-                                      ></terra-slider>
-                                  </div>
-                              </div>
-                          ` : nothing}
-                </div>
-
-                <div class="results-info">
-                    <strong
-                        >${__privateGet(this, _controller).totalGranules.toLocaleString()}</strong
-                    >
-                    files selected
-                    ${__privateGet(this, _controller).estimatedSize ? html` (~${__privateGet(this, _controller).estimatedSize})` : nothing}
-                </div>
-            </div>
-
-            <div class="grid-container">
-                <terra-data-grid
-                    ${ref(this.gridRef)}
-                    row-model-type="infinite"
-                    height="350px"
-                ></terra-data-grid>
-
-                ${__privateGet(this, _controller).render({
-      initial: () => __privateMethod(this, _renderLoadingOverlay, renderLoadingOverlay_fn).call(this),
-      pending: () => __privateMethod(this, _renderLoadingOverlay, renderLoadingOverlay_fn).call(this),
-      complete: () => nothing,
-      error: () => nothing
-    })}
-            </div>
-
-            ${this.footerSlot ? html`
-                      <div
-                          slot="footer"
-                          style="margin-top: 15px; display: flex; align-items: center; gap: 8px;"
-                      >
-                          <terra-dropdown @terra-select=${__privateMethod(this, _handleDownloadSelect, handleDownloadSelect_fn)}>
-                              <terra-button slot="trigger" caret>
-                                  Download Options
-                              </terra-button>
-                              <terra-menu>
-                                  <terra-menu-item value="python-script">
-                                      <svg
-                                          slot="prefix"
-                                          viewBox="0 0 128 128"
-                                          width="16"
-                                          height="16"
-                                          style="width: 16px; height: 16px;"
-                                      >
-                                          <path
-                                              fill="currentColor"
-                                              d="M49.33 62h29.159C86.606 62 93 55.132 93 46.981V19.183c0-7.912-6.632-13.856-14.555-15.176-5.014-.835-10.195-1.215-15.187-1.191-4.99.023-9.612.448-13.805 1.191C37.098 6.188 35 10.758 35 19.183V30h29v4H23.776c-8.484 0-15.914 5.108-18.237 14.811-2.681 11.12-2.8 17.919 0 29.53C7.614 86.983 12.569 93 21.054 93H31V79.952C31 70.315 39.428 62 49.33 62zm-1.838-39.11c-3.026 0-5.478-2.479-5.478-5.545 0-3.079 2.451-5.581 5.478-5.581 3.015 0 5.479 2.502 5.479 5.581-.001 3.066-2.465 5.545-5.479 5.545zm74.789 25.921C120.183 40.363 116.178 34 107.682 34H97v12.981C97 57.031 88.206 65 78.489 65H49.33C41.342 65 35 72.326 35 80.326v27.8c0 7.91 6.745 12.564 14.462 14.834 9.242 2.717 17.994 3.208 29.051 0C85.862 120.831 93 116.549 93 108.126V97H64v-4h43.682c8.484 0 11.647-5.776 14.599-14.66 3.047-9.145 2.916-17.799 0-29.529zm-41.955 55.606c3.027 0 5.479 2.479 5.479 5.547 0 3.076-2.451 5.579-5.479 5.579-3.015 0-5.478-2.502-5.478-5.579 0-3.068 2.463-5.547 5.478-5.547z"
-                                          ></path>
-                                      </svg>
-                                      Python Script
-                                  </terra-menu-item>
-                                  <terra-menu-item value="earthdata-download">
-                                      <svg
-                                          slot="prefix"
-                                          viewBox="0 0 64 64"
-                                          fill="none"
-                                          width="16"
-                                          height="16"
-                                          style="width: 16px; height: 16px;"
-                                      >
-                                          <circle
-                                              cx="32"
-                                              cy="32"
-                                              r="28"
-                                              fill="currentColor"
-                                          />
-                                          <path
-                                              d="M32 14v26M32 40l-9-9M32 40l9-9"
-                                              stroke="#fff"
-                                              stroke-width="4"
-                                              stroke-linecap="round"
-                                              stroke-linejoin="round"
-                                              fill="none"
-                                          />
-                                      </svg>
-                                      Earthdata Download
-                                  </terra-menu-item>
-                              </terra-menu>
-                          </terra-dropdown>
-
-                          <!--
-                          <terra-button
-                              outline
-                              @click=${() => __privateMethod(this, _handleJupyterNotebookClick, handleJupyterNotebookClick_fn).call(this)}
-                          >
-                              <terra-icon
-                                  name="outline-code-bracket"
-                                  library="heroicons"
-                                  font-size="1.5em"
-                                  style="margin-right: 5px;"
-                              ></terra-icon>
-                              Open in Jupyter Notebook
-                          </terra-button>
-                            -->
-                      </div>
-                  ` : html`
-                      <div
-                          style="margin-top: 15px; display: flex; align-items: center; gap: 8px;"
-                      >
-                          <terra-dropdown @terra-select=${__privateMethod(this, _handleDownloadSelect, handleDownloadSelect_fn)}>
-                              <terra-button slot="trigger" caret>
-                                  Download Options
-                              </terra-button>
-                              <terra-menu>
-                                  <terra-menu-item value="python-script">
-                                      <svg
-                                          slot="prefix"
-                                          viewBox="0 0 128 128"
-                                          width="16"
-                                          height="16"
-                                          style="width: 16px; height: 16px;"
-                                      >
-                                          <path
-                                              fill="currentColor"
-                                              d="M49.33 62h29.159C86.606 62 93 55.132 93 46.981V19.183c0-7.912-6.632-13.856-14.555-15.176-5.014-.835-10.195-1.215-15.187-1.191-4.99.023-9.612.448-13.805 1.191C37.098 6.188 35 10.758 35 19.183V30h29v4H23.776c-8.484 0-15.914 5.108-18.237 14.811-2.681 11.12-2.8 17.919 0 29.53C7.614 86.983 12.569 93 21.054 93H31V79.952C31 70.315 39.428 62 49.33 62zm-1.838-39.11c-3.026 0-5.478-2.479-5.478-5.545 0-3.079 2.451-5.581 5.478-5.581 3.015 0 5.479 2.502 5.479 5.581-.001 3.066-2.465 5.545-5.479 5.545zm74.789 25.921C120.183 40.363 116.178 34 107.682 34H97v12.981C97 57.031 88.206 65 78.489 65H49.33C41.342 65 35 72.326 35 80.326v27.8c0 7.91 6.745 12.564 14.462 14.834 9.242 2.717 17.994 3.208 29.051 0C85.862 120.831 93 116.549 93 108.126V97H64v-4h43.682c8.484 0 11.647-5.776 14.599-14.66 3.047-9.145 2.916-17.799 0-29.529zm-41.955 55.606c3.027 0 5.479 2.479 5.479 5.547 0 3.076-2.451 5.579-5.479 5.579-3.015 0-5.478-2.502-5.478-5.579 0-3.068 2.463-5.547 5.478-5.547z"
-                                          ></path>
-                                      </svg>
-                                      Python Script
-                                  </terra-menu-item>
-                                  <terra-menu-item value="earthdata-download">
-                                      <svg
-                                          slot="prefix"
-                                          viewBox="0 0 64 64"
-                                          fill="none"
-                                          width="16"
-                                          height="16"
-                                          style="width: 16px; height: 16px;"
-                                      >
-                                          <circle
-                                              cx="32"
-                                              cy="32"
-                                              r="28"
-                                              fill="currentColor"
-                                          />
-                                          <path
-                                              d="M32 14v26M32 40l-9-9M32 40l9-9"
-                                              stroke="#fff"
-                                              stroke-width="4"
-                                              stroke-linecap="round"
-                                              stroke-linejoin="round"
-                                              fill="none"
-                                          />
-                                      </svg>
-                                      Earthdata Download
-                                  </terra-menu-item>
-                              </terra-menu>
-                          </terra-dropdown>
-
-                          <!--
-                          <terra-button
-                              outline
-                              @click=${() => __privateMethod(this, _handleJupyterNotebookClick, handleJupyterNotebookClick_fn).call(this)}
-                          >
-                              <terra-icon
-                                  name="outline-code-bracket"
-                                  library="heroicons"
-                                  font-size="1.5em"
-                                  style="margin-right: 5px;"
-                              ></terra-icon>
-                              Open in Jupyter Notebook
-                          </terra-button>
-                        -->
-                      </div>
-                  `}
-        `;
-  }
-};
-_controller = new WeakMap();
-_boundHandleCloudCoverClickOutside = new WeakMap();
-_gridApi = new WeakSet();
-gridApi_get = function() {
-  var _a;
-  return (_a = this.gridRef.value) == null ? void 0 : _a.getGridApi();
-};
-_handleCloudCoverClickOutside = new WeakSet();
-handleCloudCoverClickOutside_fn = function(event) {
-  var _a;
-  const target = event.target;
-  const dropdown = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".cloud-cover-dropdown");
-  const filterContainer = dropdown == null ? void 0 : dropdown.closest(".filter");
-  if (filterContainer == null ? void 0 : filterContainer.contains(target)) {
-    return;
-  }
-  this.cloudCoverPickerOpen = false;
-  if (__privateGet(this, _boundHandleCloudCoverClickOutside)) {
-    document.removeEventListener(
-      "click",
-      __privateGet(this, _boundHandleCloudCoverClickOutside)
-    );
-    __privateSet(this, _boundHandleCloudCoverClickOutside, null);
-  }
-};
-_initializeGrid = new WeakSet();
-initializeGrid_fn = function() {
-  if (!this.gridRef.value || this._gridInitialized) {
-    return;
-  }
-  this._gridInitialized = true;
-  const datasource = {
-    rowCount: void 0,
-    // behave as infinite scroll
-    getRows: async (params) => {
-      var _a, _b, _c, _d, _e, _f;
-      await __privateGet(this, _controller).fetchGranules({
-        collectionEntryId: `${this.shortName}_${this.version}`,
-        startRow: params.startRow,
-        endRow: params.endRow,
-        sortBy: (_c = (_b = (_a = params.sortModel) == null ? void 0 : _a[0]) == null ? void 0 : _b.colId) != null ? _c : "title",
-        sortDirection: (_f = (_e = (_d = params.sortModel) == null ? void 0 : _d[0]) == null ? void 0 : _e.sort) != null ? _f : "asc",
-        search: this.search,
-        cloudCover: this.cloudCover
-      });
-      const lastRow = __privateGet(this, _controller).totalGranules <= params.endRow ? __privateGet(this, _controller).totalGranules : -1;
-      if (__privateGet(this, _gridApi, gridApi_get)) {
-        __privateGet(this, _gridApi, gridApi_get).applyColumnState({
-          state: [
-            {
-              colId: "cloudCover",
-              hide: !__privateGet(this, _controller).cloudCoverRange
-            }
-          ]
-        });
-      }
-      params.successCallback(__privateGet(this, _controller).granules, lastRow);
-    }
-  };
-  const columnDefs = [
-    {
-      field: "title",
-      flex: 3,
-      cellRenderer: (params) => {
-        if (!params.data) {
-          return "";
-        }
-        const url = getGranuleUrl(params.data);
-        if (url) {
-          const link = document.createElement("a");
-          link.href = url;
-          link.target = "_blank";
-          link.title = url;
-          link.textContent = params.data.title;
-          return link;
-        }
-        const span = document.createElement("span");
-        span.textContent = params.data.title;
-        return span;
-      }
-    },
-    {
-      colId: "size",
-      headerName: "Size (MB)",
-      valueGetter: (g) => {
-        if (!g.data) {
-          return void 0;
-        }
-        return calculateGranuleSize(g.data, "MB").toFixed(2);
-      }
-    },
-    { field: "timeStart" },
-    { field: "timeEnd" },
-    { field: "cloudCover", hide: true }
-  ];
-  this.gridRef.value.rowModelType = "infinite";
-  this.gridRef.value.columnDefs = columnDefs;
-  this.gridRef.value.datasource = datasource;
-  this.gridRef.value.gridOptions = {
-    defaultColDef: {
-      flex: 1,
-      minWidth: 100,
-      sortable: true,
-      sortingOrder: ["desc", "asc", null]
-    },
-    rowBuffer: 25,
-    cacheBlockSize: 50,
-    maxConcurrentDatasourceRequests: 2,
-    infiniteInitialRowCount: 50,
-    onGridReady: (params) => {
-      params.api.applyColumnState({
-        state: [
-          {
-            colId: "cloudCover",
-            hide: !__privateGet(this, _controller).cloudCoverRange
-          }
-        ]
-      });
-    }
-  };
-};
-_handleMapChange = new WeakSet();
-handleMapChange_fn = function(event) {
-  var _a;
-  this.location = event.detail;
-  (_a = __privateGet(this, _gridApi, gridApi_get)) == null ? void 0 : _a.purgeInfiniteCache();
-};
-_handleSpatialDropdownShow = new WeakSet();
-handleSpatialDropdownShow_fn = function() {
-  setTimeout(() => {
-    var _a;
-    (_a = this.spatialPickerRef.value) == null ? void 0 : _a.invalidateSize();
-  }, 0);
-};
-_handleDateRangeChange = new WeakSet();
-handleDateRangeChange_fn = function(event) {
-  var _a;
-  const detail = event.detail;
-  this.startDate = detail.startDate || "";
-  this.endDate = detail.endDate || "";
-  (_a = __privateGet(this, _gridApi, gridApi_get)) == null ? void 0 : _a.purgeInfiniteCache();
-};
-_getDateRangeButtonText = new WeakSet();
-getDateRangeButtonText_fn = function() {
-  if (this.startDate && this.endDate) {
-    const formatDate = (dateStr) => {
-      const date = new Date(dateStr);
-      return date.toLocaleDateString("en-US", {
-        month: "short",
-        day: "numeric",
-        year: "numeric",
-        timeZone: "UTC"
-      });
-    };
-    return `${formatDate(this.startDate)} \u2013 ${formatDate(this.endDate)}`;
-  }
-  return "Date Range";
-};
-_formatAvailableRangeDate = new WeakSet();
-formatAvailableRangeDate_fn = function(dateStr) {
-  if (!dateStr)
-    return "";
-  const date = new Date(dateStr);
-  const year = date.getUTCFullYear();
-  const month = String(date.getUTCMonth() + 1).padStart(2, "0");
-  const day = String(date.getUTCDate()).padStart(2, "0");
-  if (__privateGet(this, _controller).isSubDaily) {
-    const hours = String(date.getUTCHours()).padStart(2, "0");
-    const minutes = String(date.getUTCMinutes()).padStart(2, "0");
-    const seconds = String(date.getUTCSeconds()).padStart(2, "0");
-    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-  }
-  return `${year}-${month}-${day}`;
-};
-_getSpatialButtonText = new WeakSet();
-getSpatialButtonText_fn = function() {
-  var _a, _b, _c;
-  if (!this.location) {
-    return "Spatial Area";
-  }
-  try {
-    if (this.location.type === "point" /* POINT */ && this.location.latLng) {
-      const { lat, lng } = this.location.latLng;
-      return `${lat.toFixed(2)}, ${lng.toFixed(2)}`;
-    }
-    if (this.location.type === "bbox" /* BBOX */ && this.location.bounds) {
-      const boundsStr = StringifyBoundingBox(this.location.bounds);
-      const coords = boundsStr.split(", ").map((c) => parseFloat(c.trim()));
-      if (coords.length === 4) {
-        return `${coords[1].toFixed(2)}, ${coords[0].toFixed(2)}, ${coords[3].toFixed(2)}, ${coords[2].toFixed(2)}`;
-      }
-      return boundsStr;
-    }
-    if ((_c = (_b = (_a = this.location.geoJson) == null ? void 0 : _a.features) == null ? void 0 : _b[0]) == null ? void 0 : _c.properties) {
-      const props = this.location.geoJson.features[0].properties;
-      const name = props.LAKE_NAME || props.COUNTRY || props.DAM_NAME || props.TYPE || props.name;
-      if (name) {
-        return name;
-      }
-    }
-    if (this.location.type === "bbox" /* BBOX */ && this.location.bounds) {
-      return StringifyBoundingBox(this.location.bounds);
-    }
-  } catch (error) {
-    console.warn("Error formatting spatial selection:", error);
-  }
-  return "Spatial Area";
-};
-_clearDateRange = new WeakSet();
-clearDateRange_fn = function() {
-  var _a;
-  this.startDate = "";
-  this.endDate = "";
-  (_a = __privateGet(this, _gridApi, gridApi_get)) == null ? void 0 : _a.purgeInfiniteCache();
-};
-_clearSpatialFilter = new WeakSet();
-clearSpatialFilter_fn = function() {
-  var _a;
-  this.location = null;
-  (_a = __privateGet(this, _gridApi, gridApi_get)) == null ? void 0 : _a.purgeInfiniteCache();
-};
-_toggleCloudCoverPicker = new WeakSet();
-toggleCloudCoverPicker_fn = function() {
-  setTimeout(() => {
-    this.cloudCoverPickerOpen = !this.cloudCoverPickerOpen;
-    if (this.cloudCoverPickerOpen) {
-      if (!__privateGet(this, _boundHandleCloudCoverClickOutside)) {
-        __privateSet(this, _boundHandleCloudCoverClickOutside, __privateMethod(this, _handleCloudCoverClickOutside, handleCloudCoverClickOutside_fn).bind(this));
-        document.addEventListener(
-          "click",
-          __privateGet(this, _boundHandleCloudCoverClickOutside)
-        );
-      }
-    } else {
-      if (__privateGet(this, _boundHandleCloudCoverClickOutside)) {
-        document.removeEventListener(
-          "click",
-          __privateGet(this, _boundHandleCloudCoverClickOutside)
-        );
-        __privateSet(this, _boundHandleCloudCoverClickOutside, null);
-      }
-    }
-  }, 0);
-};
-_clearCloudCoverFilter = new WeakSet();
-clearCloudCoverFilter_fn = function() {
-  var _a;
-  this.cloudCover = { min: void 0, max: void 0 };
-  this.cloudCoverPickerOpen = false;
-  if (__privateGet(this, _boundHandleCloudCoverClickOutside)) {
-    document.removeEventListener(
-      "click",
-      __privateGet(this, _boundHandleCloudCoverClickOutside)
-    );
-    __privateSet(this, _boundHandleCloudCoverClickOutside, null);
-  }
-  (_a = __privateGet(this, _gridApi, gridApi_get)) == null ? void 0 : _a.purgeInfiniteCache();
-};
-_getCloudCoverButtonText = new WeakSet();
-getCloudCoverButtonText_fn = function() {
-  if (this.cloudCover.min !== void 0 && this.cloudCover.max !== void 0) {
-    return `${this.cloudCover.min.toFixed(1)}% \u2013 ${this.cloudCover.max.toFixed(1)}%`;
-  }
-  return "Cloud Cover";
-};
-_handleDownloadSelect = new WeakSet();
-handleDownloadSelect_fn = function(event) {
-  const item = event.detail.item;
-  const value = item.value || item.getTextLabel();
-  if (value === "python-script") {
-    __privateMethod(this, _downloadPythonScript, downloadPythonScript_fn).call(this, event);
-  } else if (value === "earthdata-download") {
-    __privateMethod(this, _downloadEarthdataDownload, downloadEarthdataDownload_fn).call(this, event);
-  }
-};
-_downloadPythonScript = new WeakSet();
-downloadPythonScript_fn = async function(event) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  event.stopPropagation();
-  if (!__privateGet(this, _controller).granules) {
-    return;
-  }
-  const response = await fetch(
-    getBasePath("assets/data-access/download_files.py.txt")
-  );
-  if (!response.ok) {
-    alert(
-      "Sorry, there was a problem generating the Python script. We are investigating the issue.\nYou could try using the Jupyter Notebook in the meantime"
-    );
-  }
-  const getBboxString = () => {
-    var _a2, _b2, _c2, _d2;
-    if (!this.location) {
-      return "";
-    }
-    try {
-      if (this.location.type === "bbox" /* BBOX */ && this.location.bounds) {
-        const boundsStr = StringifyBoundingBox(this.location.bounds);
-        const coords = boundsStr.split(",").map((c) => parseFloat(c.trim()));
-        if (coords.length === 4) {
-          return coords.join(",");
-        }
-        return boundsStr.replace(/\s+/g, "");
-      }
-      if (this.location.type === "point" /* POINT */ && this.location.latLng) {
-        const { lat, lng } = this.location.latLng;
-        const buffer = 0.01;
-        return `${(lng - buffer).toFixed(2)},${(lat - buffer).toFixed(2)},${(lng + buffer).toFixed(2)},${(lat + buffer).toFixed(2)}`;
-      }
-      if (((_a2 = this.location.geoJson) == null ? void 0 : _a2.bbox) && Array.isArray(this.location.geoJson.bbox)) {
-        return this.location.geoJson.bbox.join(",");
-      }
-      if ((_d2 = (_c2 = (_b2 = this.location.geoJson) == null ? void 0 : _b2.features) == null ? void 0 : _c2[0]) == null ? void 0 : _d2.geometry) {
-        const geometry = this.location.geoJson.features[0].geometry;
-        if (geometry.type === "Point" && geometry.coordinates) {
-          const [lng, lat] = geometry.coordinates;
-          const buffer = 0.01;
-          return `${(lng - buffer).toFixed(2)},${(lat - buffer).toFixed(2)},${(lng + buffer).toFixed(2)},${(lat + buffer).toFixed(2)}`;
-        }
-      }
-    } catch (error) {
-      console.warn("Error formatting bbox for Python script:", error);
-    }
-    return "";
-  };
-  const content = (await response.text()).replace(/{{short_name}}/gi, (_a = this.shortName) != null ? _a : "").replace(/{{version}}/gi, (_b = this.version) != null ? _b : "").replace(
-    /{{filter_temporal}}/gi,
-    this.startDate && this.endDate ? this.startDate + "," + this.endDate : ""
-  ).replace(/{{filter_bbox}}/gi, getBboxString()).replace(/{{filter_search}}/gi, (_c = this.search) != null ? _c : "").replace(
-    /{{filter_cloud_cover_min}}/gi,
-    (_e = (_d = this.cloudCover.min) == null ? void 0 : _d.toString()) != null ? _e : ""
-  ).replace(
-    /{{filter_cloud_cover_max}}/gi,
-    (_g = (_f = this.cloudCover.max) == null ? void 0 : _f.toString()) != null ? _g : ""
-  );
-  const blob = new Blob([content], { type: "text/plain" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = `download_files_${this.shortName}_${this.version}.py`;
-  document.body.appendChild(a);
-  a.click();
-  document.body.removeChild(a);
-  URL.revokeObjectURL(url);
-};
-_downloadEarthdataDownload = new WeakSet();
-downloadEarthdataDownload_fn = async function(event) {
-  event.stopPropagation();
-  console.log("downloading earthdata download ", this, __privateGet(this, _gridApi, gridApi_get));
-  alert("Sorry, Earthdata Download is not currently supported");
-};
-_handleJupyterNotebookClick = new WeakSet();
-handleJupyterNotebookClick_fn = function() {
-  const notebook = getDataAccessNotebook(this);
-  console.log("Sending data to JupyterLite");
-  sendDataToJupyterNotebook("load-notebook", {
-    filename: `data_${this.shortName}_${this.version}.ipynb`,
-    notebook,
-    bearerToken: this.bearerToken
-  });
-};
-_handleCloudCoverChange = new WeakSet();
-handleCloudCoverChange_fn = function(event) {
-  var _a, _b, _c;
-  const cloudCover = event.detail;
-  this.cloudCover = {
-    min: (_a = cloudCover.startValue) != null ? _a : void 0,
-    max: (_b = cloudCover.endValue) != null ? _b : void 0
-  };
-  (_c = __privateGet(this, _gridApi, gridApi_get)) == null ? void 0 : _c.purgeInfiniteCache();
-};
-_renderLoadingOverlay = new WeakSet();
-renderLoadingOverlay_fn = function() {
-  return html` <div class="loading-modal">
-            <terra-loader indeterminate variant="small"></terra-loader>
-            <span>Loading</span>
-        </div>`;
-};
-TerraDataAccess.styles = [component_styles_default, data_access_styles_default];
-TerraDataAccess.dependencies = {
-  "terra-loader": TerraLoader,
-  "terra-icon": TerraIcon,
-  "terra-date-picker": TerraDatePicker,
-  "terra-spatial-picker": TerraSpatialPicker,
-  "terra-slider": TerraSlider,
-  "terra-dropdown": TerraDropdown,
-  "terra-menu": TerraMenu,
-  "terra-menu-item": TerraMenuItem,
-  "terra-button": TerraButton,
-  "terra-data-grid": TerraDataGrid,
-  "terra-alert": TerraAlert
-};
-__decorateClass([
-  property({ reflect: true, attribute: "short-name" })
-], TerraDataAccess.prototype, "shortName", 2);
-__decorateClass([
-  property({ reflect: true, attribute: "version" })
-], TerraDataAccess.prototype, "version", 2);
-__decorateClass([
-  state()
-], TerraDataAccess.prototype, "_gridInitialized", 2);
-__decorateClass([
-  watch("shortName"),
-  watch("version")
-], TerraDataAccess.prototype, "handleCollectionChange", 1);
-__decorateClass([
-  property({ attribute: "footer-slot", type: Boolean })
-], TerraDataAccess.prototype, "footerSlot", 2);
-__decorateClass([
-  state()
-], TerraDataAccess.prototype, "limit", 2);
-__decorateClass([
-  state()
-], TerraDataAccess.prototype, "page", 2);
-__decorateClass([
-  state()
-], TerraDataAccess.prototype, "search", 2);
-__decorateClass([
-  state()
-], TerraDataAccess.prototype, "startDate", 2);
-__decorateClass([
-  state()
-], TerraDataAccess.prototype, "endDate", 2);
-__decorateClass([
-  state()
-], TerraDataAccess.prototype, "location", 2);
-__decorateClass([
-  state()
-], TerraDataAccess.prototype, "cloudCover", 2);
-__decorateClass([
-  state()
-], TerraDataAccess.prototype, "cloudCoverPickerOpen", 2);
-__decorateClass([
-  debounce(500)
-], TerraDataAccess.prototype, "handleSearch", 1);
-
-export {
-  debounce,
-  sendDataToJupyterNotebook,
-  TerraDataAccess
-};