@nasa-terra/components 0.0.167 → 0.0.169

package/dist/chunks/chunk.V7WZ4WVL.js

@@ -0,0 +1,993 @@
+import {
+  getDataAccessNotebook
+} from "./chunk.U3XIKOX7.js";
+import {
+  TerraSlider
+} from "./chunk.HA3JDW7A.js";
+import {
+  TerraMenuItem
+} from "./chunk.KVCGJWC3.js";
+import {
+  TerraMenu
+} from "./chunk.YEJ2JSXH.js";
+import {
+  TerraDatePicker
+} from "./chunk.QIV6FTJZ.js";
+import {
+  DataAccessController
+} from "./chunk.BADHWJPB.js";
+import {
+  data_access_styles_default
+} from "./chunk.4BRHJBL7.js";
+import {
+  TerraDataGrid
+} from "./chunk.HSWF2FM4.js";
+import {
+  TerraSpatialPicker
+} from "./chunk.6AE2CYBW.js";
+import {
+  StringifyBoundingBox
+} from "./chunk.JB5255IQ.js";
+import {
+  TerraDropdown
+} from "./chunk.OESICSHC.js";
+import {
+  calculateGranuleSize,
+  getGranuleUrl
+} from "./chunk.CGVPVXTX.js";
+import {
+  TerraLoader
+} from "./chunk.SJ2MURWD.js";
+import {
+  TerraButton
+} from "./chunk.HARXTWRK.js";
+import {
+  TerraIcon
+} from "./chunk.R2FIROFJ.js";
+import {
+  getBasePath
+} from "./chunk.PBC3S6IG.js";
+import {
+  watch
+} from "./chunk.NWXJOH5T.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.JEAP7TNI.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.showPanelClose = true;
+    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();
+    this.dateDropdownRef = createRef();
+    this.spatialDropdownRef = 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;
+    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=${(_a = this.search) != null ? _a : ""}
+                        @input=${(event) => {
+      this.handleSearch(
+        event.target.value
+      );
+    }}
+                    />
+                </div>
+
+                <div class="toggle-row">
+                    <terra-dropdown ${ref(this.dateDropdownRef)}>
+                        <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">
+                            ${this.showPanelClose ? html`
+                                      <div class="dropdown-header">
+                                          <button
+                                              class="panel-close"
+                                              @click=${() => {
+      var _a2;
+      return (_a2 = this.dateDropdownRef.value) == null ? void 0 : _a2.hide();
+    }}
+                                              aria-label="Close"
+                                          >
+                                              ×
+                                          </button>
+                                      </div>
+                                  ` : nothing}
+                            <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)}
+                        ${ref(this.spatialDropdownRef)}
+                    >
+                        <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">
+                            ${this.showPanelClose ? html`
+                                      <div class="dropdown-header">
+                                          <button
+                                              class="panel-close"
+                                              @click=${() => {
+      var _a2;
+      return (_a2 = this.spatialDropdownRef.value) == null ? void 0 : _a2.hide();
+    }}
+                                              aria-label="Close"
+                                          >
+                                              ×
+                                          </button>
+                                      </div>
+                                  ` : nothing}
+                            <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=${(_b = __privateGet(this, _controller).cloudCoverRange) == null ? void 0 : _b.min}
+                                          max=${(_c = __privateGet(this, _controller).cloudCoverRange) == null ? void 0 : _c.max}
+                                          start-value=${(_e = this.cloudCover.min) != null ? _e : (_d = __privateGet(this, _controller).cloudCoverRange) == null ? void 0 : _d.min}
+                                          end-value=${(_g = this.cloudCover.max) != null ? _g : (_f = __privateGet(this, _controller).cloudCoverRange) == null ? void 0 : _f.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
+};
+__decorateClass([
+  property({ reflect: true, attribute: "short-name" })
+], TerraDataAccess.prototype, "shortName", 2);
+__decorateClass([
+  property({ reflect: true, attribute: "version" })
+], TerraDataAccess.prototype, "version", 2);
+__decorateClass([
+  property({ type: Boolean })
+], TerraDataAccess.prototype, "showPanelClose", 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
+};