@nasa-terra/components 0.0.178 → 0.0.181

package/cdn/chunks/chunk.PNBVXM3Y.js

@@ -0,0 +1,2547 @@
+import {
+  KnownFeatureFlags,
+  isFeatureEnabled
+} from "./chunk.S6KQAZNG.js";
+import {
+  convertVariableEntryIdToGiovanniFormat
+} from "./chunk.FXO66O5A.js";
+import {
+  getNotebook
+} from "./chunk.K2UWIYQ2.js";
+import {
+  TerraLogin
+} from "./chunk.JIY4UZ2J.js";
+import {
+  TerraDialog
+} from "./chunk.4NU6XC7B.js";
+import {
+  data_subsetter_styles_default
+} from "./chunk.GPQPCP6B.js";
+import {
+  TerraDataAccess,
+  debounce
+} from "./chunk.OJT6BD3G.js";
+import {
+  TerraSlider
+} from "./chunk.7W7LCLU5.js";
+import {
+  TerraMenuItem
+} from "./chunk.LG5C4AHH.js";
+import {
+  TerraMenu
+} from "./chunk.5BFFURMO.js";
+import {
+  TerraDatePicker
+} from "./chunk.2Y5YYW4R.js";
+import {
+  HarmonyRequestController
+} from "./chunk.JS5OOQLY.js";
+import {
+  HarmonyRequest
+} from "./chunk.RISDH34C.js";
+import {
+  AuthController
+} from "./chunk.7DYV7ZXX.js";
+import {
+  CollectionController
+} from "./chunk.6FVRJALX.js";
+import {
+  TerraSpatialPicker
+} from "./chunk.47Q7XTJE.js";
+import {
+  QueryClientMixin
+} from "./chunk.N4WZUEQD.js";
+import {
+  TerraInput
+} from "./chunk.GMDJOE3D.js";
+import {
+  TerraDropdown
+} from "./chunk.BUHSAHXI.js";
+import {
+  TerraLoader
+} from "./chunk.OSBHMGAB.js";
+import {
+  TerraButton
+} from "./chunk.3QZNL3QN.js";
+import {
+  getUTCDate
+} from "./chunk.TKSEPVAL.js";
+import {
+  TerraAccordion
+} from "./chunk.N466UPRW.js";
+import {
+  TerraIcon
+} from "./chunk.QRJLBELU.js";
+import {
+  getBasePath
+} from "./chunk.ZQVMOVOT.js";
+import {
+  TerraAlert
+} from "./chunk.SJFGHGKH.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,
+  __spreadProps,
+  __spreadValues,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/data-subsetter/data-subsetter.component.ts
+init_dirname();
+init_buffer();
+init_process();
+
+// src/lib/jupyter.ts
+init_dirname();
+init_buffer();
+init_process();
+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/services/cmr-variable.service.ts
+init_dirname();
+init_buffer();
+init_process();
+var CmrVariableService = class {
+  /**
+   * given a name and a list of variables, return the variable with the matching name
+   */
+  getVariableByName(name, variables) {
+    var _a;
+    if (!variables || !((_a = variables.items) == null ? void 0 : _a.length)) {
+      return;
+    }
+    return variables.items.find((variable) => variable.umm.Name === name);
+  }
+  /**
+   * given a variable, return the variable's display label
+   * ex: Shortname = LongName (Units)
+   */
+  getVariableDisplayLabel(variable) {
+    const { Name = "", LongName = "", Units = "" } = variable.umm;
+    return `${Name}${Name && LongName && Name !== LongName ? ` = ${LongName}` : ""}${Units ? ` (${Units})` : ""}`;
+  }
+};
+var cmrVariableService = new CmrVariableService();
+var cmr_variable_service_default = cmrVariableService;
+
+// src/components/data-subsetter/data-subsetter.component.ts
+var defaultOutputFormat = {
+  key: "application/x-netcdf4",
+  label: "NetCDF",
+  description: "Download data in NetCDF format"
+};
+var _collectionController, _authController, _harmonyRequestController, _renderFooterForDialog, renderFooterForDialog_fn, _renderSizeInfo, renderSizeInfo_fn, _renderSubsetOptions, renderSubsetOptions_fn, _resetAllParameters, _renderSearchForCollection, renderSearchForCollection_fn, _renderOutputFormatSelection, renderOutputFormatSelection_fn, _renderDateRangeSelection, renderDateRangeSelection_fn, _handleDateChange, _resetDateRangeSelection, _resetFormatSelection, _getCollectionDateRange, getCollectionDateRange_fn, _renderSpatialSelection, renderSpatialSelection_fn, _handleSpatialChange, _resetSpatialSelection, _renderVariableSelection, renderVariableSelection_fn, _renderDimensionGroup, renderDimensionGroup_fn, _setDimensionValue, setDimensionValue_fn, _renderDimensionSelection, renderDimensionSelection_fn, _filterVariableTree, filterVariableTree_fn, _handleVariableFilterChange, handleVariableFilterChange_fn, _buildVariableTree, buildVariableTree_fn, _renderVariableTree, renderVariableTree_fn, _getAllGroupPaths, getAllGroupPaths_fn, _toggleGroupExpand, toggleGroupExpand_fn, _toggleExpandCollapseAll, toggleExpandCollapseAll_fn, _toggleVariableSelection, toggleVariableSelection_fn, _markFieldTouched, markFieldTouched_fn, _resetVariableSelection, _resetDimensionSelection, resetDimensionSelection_fn, _isDimensionExcluded, isDimensionExcluded_fn, _getCommonSelectableDimensions, getCommonSelectableDimensions_fn, _renderJobStatus, renderJobStatus_fn, _renderSelectedParams, renderSelectedParams_fn, _cancelJob, cancelJob_fn, _getData, getData_fn, _touchAllFields, touchAllFields_fn, _numberOfFilesFoundEstimate, numberOfFilesFoundEstimate_fn, _getDocumentationLinks, getDocumentationLinks_fn, _getDataLinks, getDataLinks_fn, _hasAtLeastOneSubsetOption, hasAtLeastOneSubsetOption_fn, _hasSpatialSubset, hasSpatialSubset_fn, _renderJobMessage, renderJobMessage_fn, _getJobMessageText, getJobMessageText_fn, _estimateJobSize, estimateJobSize_fn, _refineParameters, refineParameters_fn, _backToSubsetOptions, backToSubsetOptions_fn, _viewRunningJob, viewRunningJob_fn, _handleDownloadSelect, handleDownloadSelect_fn, _downloadLinksAsTxt, downloadLinksAsTxt_fn, _downloadPythonScript, downloadPythonScript_fn, _downloadEarthdataDownload, downloadEarthdataDownload_fn, _handleJupyterNotebookClick, handleJupyterNotebookClick_fn, _renderAvailableTemporalRangeSection, renderAvailableTemporalRangeSection_fn, _renderAvailableSpatialRangeSection, renderAvailableSpatialRangeSection_fn, _renderDataAccessModeSelection, renderDataAccessModeSelection_fn, _getGiovanniValidationError, getGiovanniValidationError_fn;
+var TerraDataSubsetter = class extends QueryClientMixin(TerraElement) {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _renderFooterForDialog);
+    __privateAdd(this, _renderSizeInfo);
+    __privateAdd(this, _renderSubsetOptions);
+    __privateAdd(this, _renderSearchForCollection);
+    __privateAdd(this, _renderOutputFormatSelection);
+    __privateAdd(this, _renderDateRangeSelection);
+    __privateAdd(this, _getCollectionDateRange);
+    __privateAdd(this, _renderSpatialSelection);
+    __privateAdd(this, _renderVariableSelection);
+    __privateAdd(this, _renderDimensionGroup);
+    __privateAdd(this, _setDimensionValue);
+    __privateAdd(this, _renderDimensionSelection);
+    __privateAdd(this, _filterVariableTree);
+    __privateAdd(this, _handleVariableFilterChange);
+    __privateAdd(this, _buildVariableTree);
+    __privateAdd(this, _renderVariableTree);
+    __privateAdd(this, _getAllGroupPaths);
+    __privateAdd(this, _toggleGroupExpand);
+    __privateAdd(this, _toggleExpandCollapseAll);
+    __privateAdd(this, _toggleVariableSelection);
+    __privateAdd(this, _markFieldTouched);
+    __privateAdd(this, _resetDimensionSelection);
+    __privateAdd(this, _isDimensionExcluded);
+    __privateAdd(this, _getCommonSelectableDimensions);
+    __privateAdd(this, _renderJobStatus);
+    __privateAdd(this, _renderSelectedParams);
+    __privateAdd(this, _cancelJob);
+    __privateAdd(this, _getData);
+    __privateAdd(this, _touchAllFields);
+    __privateAdd(this, _numberOfFilesFoundEstimate);
+    __privateAdd(this, _getDocumentationLinks);
+    __privateAdd(this, _getDataLinks);
+    __privateAdd(this, _hasAtLeastOneSubsetOption);
+    __privateAdd(this, _hasSpatialSubset);
+    __privateAdd(this, _renderJobMessage);
+    __privateAdd(this, _getJobMessageText);
+    __privateAdd(this, _estimateJobSize);
+    __privateAdd(this, _refineParameters);
+    __privateAdd(this, _backToSubsetOptions);
+    __privateAdd(this, _viewRunningJob);
+    __privateAdd(this, _handleDownloadSelect);
+    __privateAdd(this, _downloadLinksAsTxt);
+    __privateAdd(this, _downloadPythonScript);
+    __privateAdd(this, _downloadEarthdataDownload);
+    __privateAdd(this, _handleJupyterNotebookClick);
+    __privateAdd(this, _renderAvailableTemporalRangeSection);
+    __privateAdd(this, _renderAvailableSpatialRangeSection);
+    __privateAdd(this, _renderDataAccessModeSelection);
+    __privateAdd(this, _getGiovanniValidationError);
+    this.showCollectionSearch = true;
+    this.showHistoryPanel = true;
+    this.isHistoryView = false;
+    this.selectedVariables = [];
+    this.selectedDimensionIndexes = {};
+    this.expandedVariableGroups = /* @__PURE__ */ new Set();
+    this.variableFilterText = "";
+    this.touchedFields = /* @__PURE__ */ new Set();
+    this.selectedDateRange = {
+      startDate: null,
+      endDate: null
+    };
+    this.selectedFormat = defaultOutputFormat;
+    this.cancelingGetData = false;
+    this.selectedTab = "web-links";
+    this.refineParameters = false;
+    this.collectionSearchType = "all";
+    this.collectionSearchLoading = false;
+    this.collectionLoading = false;
+    this.collectionAccordionOpen = true;
+    this.dataAccessMode = "original";
+    __privateAdd(this, _collectionController, new CollectionController(this, {
+      getCollectionEntryId: () => this.collectionEntryId,
+      getBearerToken: () => this.bearerToken
+    }));
+    __privateAdd(this, _authController, new AuthController(this));
+    __privateAdd(this, _harmonyRequestController, new HarmonyRequestController(this));
+    __privateAdd(this, _resetAllParameters, () => {
+      this.selectedVariables = [];
+      if (__privateMethod(this, _hasSpatialSubset, hasSpatialSubset_fn).call(this)) {
+        __privateGet(this, _resetSpatialSelection).call(this);
+      }
+      this.selectedDateRange = {
+        startDate: null,
+        endDate: null
+      };
+      this.touchedFields = /* @__PURE__ */ new Set();
+      this.validationError = void 0;
+      this.expandedVariableGroups = /* @__PURE__ */ new Set();
+      this.requestUpdate();
+    });
+    __privateAdd(this, _handleDateChange, (e2) => {
+      __privateMethod(this, _markFieldTouched, markFieldTouched_fn).call(this, "date");
+      this.selectedDateRange = __spreadProps(__spreadValues({}, this.selectedDateRange), {
+        startDate: e2.detail.startDate,
+        endDate: e2.detail.endDate
+      });
+    });
+    __privateAdd(this, _resetDateRangeSelection, () => {
+      this.selectedDateRange = { startDate: null, endDate: null };
+    });
+    __privateAdd(this, _resetFormatSelection, () => {
+      var _a;
+      if ((_a = this.collectionWithServices) == null ? void 0 : _a.configuredOutputFormats.length) {
+        const netcdfFormat = this.collectionWithServices.configuredOutputFormats.find(
+          (f) => f.key === "application/x-netcdf4" || f.key === "application/netcdf"
+        );
+        this.selectedFormat = netcdfFormat || this.collectionWithServices.configuredOutputFormats[0];
+      } else {
+        this.selectedFormat = defaultOutputFormat;
+      }
+    });
+    __privateAdd(this, _handleSpatialChange, (e2) => {
+      __privateMethod(this, _markFieldTouched, markFieldTouched_fn).call(this, "spatial");
+      if (e2.detail.type === "point" /* POINT */) {
+        this.spatialSelection = e2.detail.latLng;
+      } else if (e2.detail.type === "bbox" /* BBOX */) {
+        this.spatialSelection = e2.detail.bounds;
+      } else {
+        this.spatialSelection = void 0;
+      }
+    });
+    /**
+     * resets the spatial selection back to the bounds of the collection
+     */
+    __privateAdd(this, _resetSpatialSelection, () => {
+      this.spatialSelection = void 0;
+      this.spatialPicker.clear();
+      __privateMethod(this, _markFieldTouched, markFieldTouched_fn).call(this, "spatial");
+    });
+    __privateAdd(this, _resetVariableSelection, () => {
+      this.selectedVariables = [];
+      __privateMethod(this, _resetDimensionSelection, resetDimensionSelection_fn).call(this);
+    });
+  }
+  jobIdChanged() {
+    if (this.jobId) {
+      __privateGet(this, _harmonyRequestController).startPollForJobStatus(this.jobId);
+      this.dataAccessMode = "subset";
+    }
+  }
+  shortNameAndVersionChanged() {
+    if (this.shortName && this.version) {
+      this.collectionEntryId = `${this.shortName}_${this.version}`;
+    }
+  }
+  collectionEntryIdChanged() {
+    if (this.collectionEntryId) {
+      this.showCollectionSearch = false;
+    } else {
+      this.showCollectionSearch = true;
+    }
+  }
+  firstUpdated() {
+    if (this.collectionEntryId) {
+      this.showCollectionSearch = false;
+    }
+    if (this.jobId) {
+      __privateGet(this, _harmonyRequestController).startPollForJobStatus(this.jobId);
+      this.dataAccessMode = "subset";
+    }
+    this.renderHistoryPanel();
+  }
+  updated(changedProps) {
+    var _a, _b, _c;
+    super.updated(changedProps);
+    const newCollectionInfo = __privateGet(this, _collectionController).collectionInfo;
+    if (newCollectionInfo !== this.collectionWithServices) {
+      this.collectionWithServices = newCollectionInfo;
+    }
+    const sampling = (_a = __privateGet(this, _collectionController).sampling) == null ? void 0 : _a.data;
+    if ((sampling == null ? void 0 : sampling.minDate) !== this.granuleMinDate) {
+      this.granuleMinDate = sampling == null ? void 0 : sampling.minDate;
+    }
+    if ((sampling == null ? void 0 : sampling.maxDate) !== this.granuleMaxDate) {
+      this.granuleMaxDate = sampling == null ? void 0 : sampling.maxDate;
+    }
+    const newGiovanni = __privateGet(this, _collectionController).giovanniVariables;
+    if (newGiovanni.size !== ((_c = (_b = this.giovanniConfiguredVariables) == null ? void 0 : _b.size) != null ? _c : 0)) {
+      this.giovanniConfiguredVariables = newGiovanni;
+    }
+  }
+  /** True if the collection contains sub-daily granules. Used by DataSubsetterController to format dates. */
+  get isSubDaily() {
+    return __privateGet(this, _collectionController).isSubDaily;
+  }
+  collectionChanged() {
+    const { startDate, endDate } = __privateMethod(this, _getCollectionDateRange, getCollectionDateRange_fn).call(this);
+    this.selectedDateRange = { startDate, endDate };
+    __privateGet(this, _resetFormatSelection).call(this);
+    this.collectionLoading = false;
+    this.collectionAccordionOpen = false;
+  }
+  granuleDatesChanged() {
+    const newRange = __spreadValues(__spreadValues({}, this.granuleMinDate && { startDate: this.granuleMinDate }), this.granuleMaxDate && { endDate: this.granuleMaxDate });
+    if (Object.keys(newRange).length > 0) {
+      this.selectedDateRange = __spreadValues(__spreadValues({}, this.selectedDateRange), newRange);
+    }
+  }
+  selectedFormatChanged() {
+    if (this.selectedFormat.isGiovanniFormat && this.selectedVariables.length > 1) {
+      this.selectedVariables = [this.selectedVariables[0]];
+    }
+  }
+  showDialog() {
+    var _a;
+    (_a = this.dialogElement) == null ? void 0 : _a.show();
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
+    const showJobStatus = __privateGet(this, _harmonyRequestController).jobId && !this.refineParameters;
+    const showMinimizeButton = showJobStatus && !!this.dialog;
+    const title = (_c = (_b = (_a = this.collectionWithServices) == null ? void 0 : _a.collection) == null ? void 0 : _b.EntryTitle) != null ? _c : "Download Data";
+    if (!this.collectionWithServices) {
+      if (__privateGet(this, _collectionController).hasCapabilitiesError) {
+        return b`
+                    <terra-alert open variant="danger" appearance="white">
+                        Failed to find the requested collection.
+                    </terra-alert>
+                `;
+      }
+    }
+    const content = b`
+            <div class="container">
+                ${!this.dialog ? b`
+                          <div class="header">
+                              <h1>
+                                  <svg
+                                      class="download-icon"
+                                      viewBox="0 0 24 24"
+                                      fill="currentColor"
+                                  >
+                                      <path
+                                          d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"
+                                      />
+                                  </svg>
+                                  ${title}
+                              </h1>
+
+                              ${showMinimizeButton ? b`<button
+                                        class="minimize-btn"
+                                        @click=${() => this.minimizeDialog()}
+                                    >
+                                        -
+                                    </button>` : A}
+                          </div>
+                      ` : A}
+                ${!this.isHistoryView && ((_e = (_d = this.collectionWithServices) == null ? void 0 : _d.services) == null ? void 0 : _e.length) ? b`
+                          <div class="section">
+                              ${__privateMethod(this, _renderDataAccessModeSelection, renderDataAccessModeSelection_fn).call(this)}
+                          </div>
+                      ` : A}
+                ${this.dataAccessMode === "original" ? b`
+                          <div class="section">
+                              <terra-data-access
+                                  short-name=${(_h = this.shortName) != null ? _h : (_g = (_f = this.collectionWithServices) == null ? void 0 : _f.collection) == null ? void 0 : _g.ShortName}
+                                  version=${(_k = this.version) != null ? _k : (_j = (_i = this.collectionWithServices) == null ? void 0 : _i.collection) == null ? void 0 : _j.Version}
+                                  ?footer-slot=${!!this.dialog}
+                              >
+                                  ${this.dialog ? b`
+                                            <div
+                                                slot="footer"
+                                                style="margin-top: 15px;"
+                                            >
+                                                <slot
+                                                    name="data-access-footer"
+                                                ></slot>
+                                            </div>
+                                        ` : A}
+                              </terra-data-access>
+                          </div>
+                      ` : showJobStatus ? __privateMethod(this, _renderJobStatus, renderJobStatus_fn).call(this) : __privateMethod(this, _renderSubsetOptions, renderSubsetOptions_fn).call(this)}
+            </div>
+        `;
+    if (this.dialog) {
+      return b`
+                <terra-dialog id=${this.dialog} style="--title-font-size: 16px;">
+                    <span
+                        slot="label"
+                        style="display: flex; align-items: center; gap: 8px; color: #0066cc; font-weight: 600;"
+                    >
+                        <svg
+                            class="download-icon"
+                            viewBox="0 0 24 24"
+                            fill="currentColor"
+                            style="width: 16px; height: 16px; display: inline-block; vertical-align: middle; flex-shrink: 0;"
+                        >
+                            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
+                        </svg>
+                        ${title}
+                    </span>
+                    ${showMinimizeButton ? b`
+                              <button
+                                  slot="header-actions"
+                                  class="minimize-btn"
+                                  @click=${() => {
+        var _a2;
+        return (_a2 = this.dialogElement) == null ? void 0 : _a2.hide();
+      }}
+                                  aria-label="Minimize"
+                              >
+                                  -
+                              </button>
+                          ` : A}
+                    <slot name="dialog-header-content"></slot>
+                    ${content} ${__privateMethod(this, _renderFooterForDialog, renderFooterForDialog_fn).call(this)}
+                </terra-dialog>
+            `;
+    }
+    return b`
+            <div class="container">
+                <div class="header">
+                    <h1>
+                        <svg
+                            class="download-icon"
+                            viewBox="0 0 24 24"
+                            fill="currentColor"
+                        >
+                            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
+                        </svg>
+                        ${title}
+                    </h1>
+
+                    ${showMinimizeButton ? b`<button
+                              class="minimize-btn"
+                              @click=${() => this.minimizeDialog()}
+                          >
+                              -
+                          </button>` : A}
+                </div>
+                ${!this.isHistoryView && ((_m = (_l = this.collectionWithServices) == null ? void 0 : _l.services) == null ? void 0 : _m.length) ? b`
+                          <div class="section">
+                              ${__privateMethod(this, _renderDataAccessModeSelection, renderDataAccessModeSelection_fn).call(this)}
+                          </div>
+                      ` : A}
+                ${this.dataAccessMode === "original" ? b`
+                          <div class="section">
+                              <terra-data-access
+                                  short-name=${(_p = this.shortName) != null ? _p : (_o = (_n = this.collectionWithServices) == null ? void 0 : _n.collection) == null ? void 0 : _o.ShortName}
+                                  version=${(_s = this.version) != null ? _s : (_r = (_q = this.collectionWithServices) == null ? void 0 : _q.collection) == null ? void 0 : _r.Version}
+                                  ?footer-slot=${!!this.dialog}
+                              >
+                                  ${this.dialog ? b`
+                                            <div
+                                                slot="footer"
+                                                style="margin-top: 15px;"
+                                            >
+                                                <slot
+                                                    name="data-access-footer"
+                                                ></slot>
+                                            </div>
+                                        ` : A}
+                              </terra-data-access>
+                          </div>
+                      ` : showJobStatus ? __privateMethod(this, _renderJobStatus, renderJobStatus_fn).call(this) : __privateMethod(this, _renderSubsetOptions, renderSubsetOptions_fn).call(this)}
+            </div>
+        `;
+  }
+  minimizeDialog() {
+    var _a;
+    (_a = this.closest("terra-dialog")) == null ? void 0 : _a.hide();
+  }
+  handleCollectionSearch(searchTerm) {
+    this.collectionSearchQuery = searchTerm;
+  }
+  renderHistoryPanel() {
+    const existingHistoryPanel = document.querySelector(
+      "terra-data-subsetter-history"
+    );
+    if (!existingHistoryPanel && this.bearerToken) {
+      const historyPanel = document.createElement(
+        "terra-data-subsetter-history"
+      );
+      if (this.bearerToken) {
+        historyPanel.setAttribute("bearer-token", this.bearerToken);
+      }
+      if (this.environment) {
+        historyPanel.setAttribute("environment", this.environment);
+      }
+      document.body.appendChild(historyPanel);
+    }
+  }
+};
+_collectionController = new WeakMap();
+_authController = new WeakMap();
+_harmonyRequestController = new WeakMap();
+_renderFooterForDialog = new WeakSet();
+renderFooterForDialog_fn = function() {
+  const showJobStatus = __privateGet(this, _harmonyRequestController).jobId && !this.refineParameters;
+  if (showJobStatus && __privateGet(this, _harmonyRequestController).jobId) {
+    return b`
+                <div slot="footer" class="footer">
+                    ${__privateGet(this, _harmonyRequestController).status === "successful" /* SUCCESSFUL */ || __privateGet(this, _harmonyRequestController).status === "complete_with_errors" /* COMPLETE_WITH_ERRORS */ ? b`
+                              <div
+                                  style="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="file-list">
+                                              <svg
+                                                  slot="prefix"
+                                                  viewBox="0 0 24 24"
+                                                  width="16"
+                                                  height="16"
+                                                  style="width: 16px; height: 16px;"
+                                              >
+                                                  <path
+                                                      fill="currentColor"
+                                                      d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+                                                  />
+                                              </svg>
+                                              File List
+                                          </terra-menu-item>
+                                          <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>
+                          ` : A}
+                    ${__privateGet(this, _harmonyRequestController).status === "running" /* RUNNING */ ? b`<button
+                              class="btn btn-success"
+                              @click=${__privateMethod(this, _cancelJob, cancelJob_fn)}
+                              ?disabled=${this.cancelingGetData}
+                          >
+                              ${this.cancelingGetData ? "Canceling..." : "Cancel request"}
+                          </button>` : A}
+
+                    <div class="job-info">
+                        Job ID:
+                        <span class="job-id">
+                            ${this.bearerToken ? b`<a
+                                      href="https://harmony.earthdata.nasa.gov/jobs/${__privateGet(this, _harmonyRequestController).jobId}"
+                                      target="_blank"
+                                      >${__privateGet(this, _harmonyRequestController).jobId}</a
+                                  >` : __privateGet(this, _harmonyRequestController).jobId}
+                        </span>
+                        <span class="info-icon">?</span>
+                    </div>
+                </div>
+            `;
+  } else if (this.dataAccessMode === "subset") {
+    return b`
+                <div slot="footer" class="footer">
+                    <button class="btn btn-secondary" @click=${__privateGet(this, _resetAllParameters)}>Reset All</button>
+                    <div>
+                        <button class="btn btn-primary" @click=${__privateMethod(this, _getData, getData_fn)}>
+                            Get Data
+                        </button>
+                            ${this.jobId ? b`
+                                          <terra-button
+                                              variant="default"
+                                              @click=${__privateMethod(this, _viewRunningJob, viewRunningJob_fn)}
+                                          >
+                                              View Running Job
+                                          </terra-button>
+                                      ` : A}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+  }
+  return A;
+};
+_renderSizeInfo = new WeakSet();
+renderSizeInfo_fn = function(estimates) {
+  if (!__privateGet(this, _authController).state.isLoading && !__privateGet(this, _authController).state.user) {
+    return b`
+                <div class="size-info warning">
+                    <terra-login>
+                        <h2 slot="logged-out">Limited access as a guest.</h2>
+
+                        <p slot="logged-out">
+                            Your results will be capped at 10 links. Log in for full
+                            access to all data.
+                        </p>
+                    </terra-login>
+                </div>
+            `;
+  }
+  return b`<div
+            class="size-info ${estimates.links >= 150 ? "warning" : "neutral"}"
+        >
+            <h2>Estimated size of results</h2>
+            <div class="size-stats">
+                ${estimates.days.toLocaleString()} days,
+                ${estimates.links.toLocaleString()} links
+            </div>
+            ${estimates.links >= 150 ? b`<div class="size-warning">
+                      You are about to retrieve ${estimates.links.toLocaleString()}
+                      file links from the archive. You may
+                      <strong>speed up the request</strong> by limiting the scope of
+                      your search.
+                  </div>` : A}
+        </div>`;
+};
+_renderSubsetOptions = new WeakSet();
+renderSubsetOptions_fn = function() {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const estimates = __privateMethod(this, _estimateJobSize, estimateJobSize_fn).call(this);
+  const hasSubsetOption = __privateMethod(this, _hasAtLeastOneSubsetOption, hasAtLeastOneSubsetOption_fn).call(this);
+  const collection = (_a = this.collectionWithServices) == null ? void 0 : _a.collection;
+  const temporalExtents = collection == null ? void 0 : collection.TemporalExtents;
+  const spatialExtent = collection == null ? void 0 : collection.SpatialExtent;
+  const showTemporalSection = temporalExtents == null ? void 0 : temporalExtents.length;
+  const showSpatialSection = (_c = (_b = spatialExtent == null ? void 0 : spatialExtent.HorizontalSpatialDomain) == null ? void 0 : _b.Geometry) == null ? void 0 : _c.BoundingRectangles;
+  return b`
+            ${this.dataAccessMode === "original" ? A : hasSubsetOption ? b`
+                        ${hasSubsetOption && estimates ? __privateMethod(this, _renderSizeInfo, renderSizeInfo_fn).call(this, estimates) : A}
+                        ${this.showCollectionSearch ? b`
+                                  <div class="section">
+                                      <h2 class="section-title">
+                                          Select Data Collection
+                                      </h2>
+
+                                      ${__privateMethod(this, _renderSearchForCollection, renderSearchForCollection_fn).call(this)}
+                                  </div>
+                              ` : A}
+                        ${((_e = (_d = this.collectionWithServices) == null ? void 0 : _d.summary.outputFormats) == null ? void 0 : _e.length) && hasSubsetOption ? b`
+                                  <div class="section">
+                                      <h2 class="section-title">Output Format</h2>
+
+                                      ${__privateMethod(this, _renderOutputFormatSelection, renderOutputFormatSelection_fn).call(this)}
+                                  </div>
+                              ` : A}
+                        <div class="section">
+                            <h2 class="section-title">Subset Options</h2>
+                            <p style="color: #666; margin-bottom: 16px;">
+                                Generate file links that support spatial subsetting,
+                                date/time range selection, and variable selection.
+                            </p>
+
+                            ${((_f = this.collectionWithServices) == null ? void 0 : _f.summary.subsetting.temporal) ? __privateMethod(this, _renderDateRangeSelection, renderDateRangeSelection_fn).call(this) : A}
+                            ${__privateMethod(this, _hasSpatialSubset, hasSpatialSubset_fn).call(this) ? __privateMethod(this, _renderSpatialSelection, renderSpatialSelection_fn).call(this) : A}
+                            ${((_g = this.collectionWithServices) == null ? void 0 : _g.summary.subsetting.variable) ? __privateMethod(this, _renderVariableSelection, renderVariableSelection_fn).call(this) : A}
+                            ${((_h = this.collectionWithServices) == null ? void 0 : _h.summary.subsetting.variable) && isFeatureEnabled(
+    KnownFeatureFlags.DIMENSION_SUBSET,
+    this.features
+  ) ? __privateMethod(this, _renderDimensionSelection, renderDimensionSelection_fn).call(this) : A}
+                        </div>
+                    ` : b`
+                        ${showTemporalSection && !((_i = this.collectionWithServices) == null ? void 0 : _i.summary.subsetting.temporal) ? __privateMethod(this, _renderAvailableTemporalRangeSection, renderAvailableTemporalRangeSection_fn).call(this) : A}
+                        ${showSpatialSection && !__privateMethod(this, _hasSpatialSubset, hasSpatialSubset_fn).call(this) ? __privateMethod(this, _renderAvailableSpatialRangeSection, renderAvailableSpatialRangeSection_fn).call(this) : A}
+                    `}
+            ${!hasSubsetOption && estimates ? b`
+                      <div
+                          class="neutral-info"
+                          style="margin-top: 24px; padding: 16px 20px; border-radius: 6px; background: #f8f9fa; color: #555; border: 1px solid #ccc;"
+                      >
+                          <strong>Estimated result size:</strong><br />
+                          Your request will return approximately
+                          <b>${estimates.links.toLocaleString()}</b> files covering
+                          <b>${estimates.days.toLocaleString()}</b> days.
+                      </div>
+                  ` : A}
+            ${this.dataAccessMode === "subset" && !this.dialog ? b`
+                      <div class="footer">
+                          <button class="btn btn-secondary" @click=${__privateGet(this, _resetAllParameters)}>Reset All</button>
+                          <div>
+                          <button
+                              class="btn btn-primary"
+                              @click=${__privateMethod(this, _getData, getData_fn)}
+                          >
+                              Get Data
+                          </button>
+                                  ${this.jobId ? b`
+                                                <terra-button
+                                                    variant="default"
+                                                    @click=${__privateMethod(this, _viewRunningJob, viewRunningJob_fn)}
+                                                >
+                                                    View Running Job
+                                                </terra-button>
+                                            ` : A}
+                              </div>
+                                </div>
+                          </div>
+                      </div>
+                  ` : A}
+        `;
+};
+_resetAllParameters = new WeakMap();
+_renderSearchForCollection = new WeakSet();
+renderSearchForCollection_fn = function() {
+  var _a, _b;
+  let placeholder = "Search all types of resources (e.g. rainfall, GPM, hurricanes, etc.)";
+  if (this.collectionSearchType === "collection") {
+    placeholder = "Search collections (e.g. AQUA, GPM_3IMERGH, etc.)";
+  }
+  if (this.collectionSearchType === "variable") {
+    placeholder = "Search variables (e.g. rainfall, hurricanes, etc.)";
+  }
+  return b`
+            <terra-accordion .open=${this.collectionAccordionOpen}>
+                <div slot="summary">
+                    <span class="accordion-title">Collection:</span>
+                </div>
+
+                <div
+                    slot="summary-right"
+                    style="display: flex; align-items: center; gap: 10px"
+                >
+                    ${this.collectionEntryId ? b` <span
+                                  class="accordion-value"
+                                  id="selected-collection-display"
+                                  >${this.collectionEntryId}</span
+                              >
+
+                              <button
+                                  class="reset-btn"
+                                  @click=${() => this.collectionEntryId = void 0}
+                              >
+                                  Reset
+                              </button>` : A}
+                </div>
+
+                <div class="search-tabs-mini">
+                    <button
+                        class="search-tab-mini ${this.collectionSearchType === "all" ? "active" : ""}"
+                        @click=${() => this.collectionSearchType = "all"}
+                    >
+                        All
+                    </button>
+                    <button
+                        class="search-tab-mini ${this.collectionSearchType === "collection" ? "active" : ""}"
+                        @click=${() => this.collectionSearchType = "collection"}
+                    >
+                        Collections
+                    </button>
+                    <button
+                        class="search-tab-mini ${this.collectionSearchType === "variable" ? "active" : ""}"
+                        @click=${() => this.collectionSearchType = "variable"}
+                    >
+                        Variables
+                    </button>
+                </div>
+
+                <div class="search-container-mini">
+                    <input
+                        type="text"
+                        class="search-input-mini"
+                        id="search-input"
+                        placeholder=${placeholder}
+                        @input="${(e2) => this.handleCollectionSearch(
+    e2.target.value
+  )}"
+                    />
+
+                    <button class="search-button-mini">
+                        <svg
+                            class="search-icon-mini"
+                            viewBox="0 0 24 24"
+                            fill="currentColor"
+                        >
+                            <path
+                                d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                            />
+                        </svg>
+                        Search
+                    </button>
+                </div>
+
+                <!-- TODO: it may be nice to have a quick search, perhaps by recent trends? 
+                <div class="quick-links-mini">
+                    <a href="#" class="quick-link-mini" onclick="quickSearch('GPM')"
+                        >GPM Precipitation</a
+                    >
+                    <a href="#" class="quick-link-mini" onclick="quickSearch('MODIS')"
+                        >MODIS Data</a
+                    >
+                    <a
+                        href="#"
+                        class="quick-link-mini"
+                        onclick="quickSearch('Landsat')"
+                        >Landsat Imagery</a
+                    >
+                    <a href="#" class="quick-link-mini" onclick="quickSearch('AIRS')"
+                        >Atmospheric Data</a
+                    >
+                </div>
+                -->
+
+                <div id="search-results-section" class="search-results-section">
+                    ${this.collectionSearchLoading ? b`
+                              <div id="loading-mini" class="loading-mini">
+                                  <div class="spinner-mini"></div>
+                                  <div>Searching NASA CMR...</div>
+                              </div>
+                          ` : ((_a = this.collectionSearchResults) == null ? void 0 : _a.length) ? b` <div
+                                id="results-container-mini"
+                                class="results-container-mini"
+                            >
+                                ${(_b = this.collectionSearchResults) == null ? void 0 : _b.map(
+    (item) => b`
+                                        <div
+                                            class="result-item-mini"
+                                            @click=${() => {
+      this.collectionEntryId = item.collectionEntryId;
+      this.collectionAccordionOpen = false;
+      this.collectionLoading = true;
+      if (item.type === "variable") {
+        this.selectedVariables = [
+          {
+            name: item.entryId,
+            href: "",
+            conceptId: item.conceptId
+          }
+        ];
+      }
+      this.requestUpdate();
+    }}
+                                            style="cursor: pointer;"
+                                        >
+                                            <div class="result-title-mini">
+                                                ${item.title}
+                                            </div>
+                                            <div class="result-id-mini">
+                                                ${item.entryId}
+                                            </div>
+                                            <div class="result-description-mini">
+                                                ${item.summary || item.title}
+                                            </div>
+                                            <div class="result-meta-mini">
+                                                <span>📅 2000-02-24 - ongoing</span>
+                                                <span>🌍 Global</span>
+                                                <span>🏢 ${item.provider}</span>
+                                                ${item.type === "variable" ? b` <span
+                                                          >📊
+                                                          ${item.collectionEntryId}</span
+                                                      >` : A}
+                                                <span class="tag-mini"
+                                                    >${item.type.toUpperCase()}</span
+                                                >
+                                            </div>
+                                        </div>
+                                    `
+  )}
+                            </div>` : this.collectionSearchResults && this.collectionSearchResults.length === 0 ? b`<div id="no-results-mini" class="no-results-mini">
+                                  <p>
+                                      No results found for
+                                      '${this.collectionSearchQuery}'. Try adjusting
+                                      your search term.
+                                  </p>
+                              </div>` : A}
+                </div>
+            </terra-accordion>
+
+            ${this.collectionLoading ? b`
+                      <div
+                          class="collection-loading-bar"
+                          style="display: flex; align-items: center; gap: 10px; margin: 16px 0;"
+                      >
+                          <span
+                              class="loading-spinner"
+                              style="width: 20px; height: 20px; border: 3px solid #ccc; border-top: 3px solid #31708f; border-radius: 50%; display: inline-block; animation: spin 1s linear infinite;"
+                          ></span>
+                          Retrieving collection, please wait...
+                      </div>
+                      <style>
+                          @keyframes spin {
+                              0% {
+                                  transform: rotate(0deg);
+                              }
+                              100% {
+                                  transform: rotate(360deg);
+                              }
+                          }
+                      </style>
+                  ` : A}
+        `;
+};
+_renderOutputFormatSelection = new WeakSet();
+renderOutputFormatSelection_fn = function() {
+  return b`
+            <terra-accordion>
+                <div slot="summary">
+                    <span class="accordion-title">File Format:</span>
+                </div>
+
+                <div
+                    slot="summary-right"
+                    style="display: flex; align-items: center; gap: 10px;"
+                >
+                    <span>${this.selectedFormat.label}</span>
+
+                    <button class="reset-btn" @click=${__privateGet(this, _resetFormatSelection)}>
+                        Reset
+                    </button>
+                </div>
+
+                <div class="accordion-content" style="margin-top: 12px;">
+                    ${(() => {
+    var _a;
+    return (((_a = this.collectionWithServices) == null ? void 0 : _a.configuredOutputFormats) || []).map(
+      (format) => b`
+                                <label
+                                    style="display: flex; align-items: center; gap: 8px; padding: 5px;"
+                                >
+                                    <input
+                                        type="radio"
+                                        name="output-format"
+                                        value="${format}"
+                                        .checked=${this.selectedFormat === format}
+                                        @change=${() => this.selectedFormat = format}
+                                    />
+                                    ${format.label}
+                                </label>
+                            `
+    );
+  })()}
+                </div>
+            </terra-accordion>
+        `;
+};
+_renderDateRangeSelection = new WeakSet();
+renderDateRangeSelection_fn = function() {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const { startDate: defaultStartDate, endDate: defaultEndDate } = __privateMethod(this, _getCollectionDateRange, getCollectionDateRange_fn).call(this);
+  const startDate = (_b = (_a = this.selectedDateRange.startDate) != null ? _a : this.granuleMinDate) != null ? _b : defaultStartDate;
+  const endDate = (_d = (_c = this.selectedDateRange.endDate) != null ? _c : this.granuleMaxDate) != null ? _d : defaultEndDate;
+  const showError = this.touchedFields.has("date") && (!this.selectedDateRange.startDate || !this.selectedDateRange.endDate);
+  return b`
+            <terra-accordion>
+                <div slot="summary">
+                    <span class="accordion-title">Refine Date Range:</span>
+                </div>
+
+                <div
+                    slot="summary-right"
+                    style="display: flex; align-items: center; gap: 10px;"
+                >
+                    ${showError ? b`<span class="accordion-value error"
+                              >Please select a date range</span
+                          >` : this.touchedFields.has("date") && startDate && endDate ? b`<span class="accordion-value"
+                                >${startDate} to ${endDate}</span
+                            >` : A}
+                    <button class="reset-btn" @click=${__privateGet(this, _resetDateRangeSelection)}>
+                        Reset
+                    </button>
+                </div>
+
+                <div style="width: 300px">
+                    <terra-date-picker
+                        allow-input
+                        inline
+                        range
+                        split-inputs
+                        show-presets
+                        ?enable-time=${this.isSubDaily}
+                        start-label="Start Date"
+                        end-label="End Date"
+                        .minDate=${(_e = this.granuleMinDate) != null ? _e : defaultStartDate}
+                        .maxDate=${(_f = this.granuleMaxDate) != null ? _f : defaultEndDate}
+                        .startDate=${(_g = this.selectedDateRange.startDate) != null ? _g : this.granuleMinDate}
+                        .endDate=${(_h = this.selectedDateRange.endDate) != null ? _h : this.granuleMaxDate}
+                        .useEndOfDay=${!this.selectedFormat.isGiovanniFormat}
+                        @terra-date-range-change=${__privateGet(this, _handleDateChange)}
+                    ></terra-date-picker>
+                </div>
+
+                <div
+                    style="display: flex; gap: 16px; margin-top: 15px; color: #31708f;"
+                >
+                    <span
+                        ><strong>Available Range:</strong> ${defaultStartDate} to
+                        ${defaultEndDate}</span
+                    >
+                    ${this.isSubDaily ? b`<span
+                              ><strong>Note:</strong> All dates and times are in
+                              UTC.</span
+                          >` : A}
+                </div>
+            </terra-accordion>
+        `;
+};
+_handleDateChange = new WeakMap();
+_resetDateRangeSelection = new WeakMap();
+_resetFormatSelection = new WeakMap();
+_getCollectionDateRange = new WeakSet();
+getCollectionDateRange_fn = function() {
+  var _a, _b;
+  const samplingMinDate = this.granuleMinDate;
+  const samplingMaxDate = this.granuleMaxDate;
+  if (samplingMinDate && samplingMaxDate) {
+    return {
+      startDate: samplingMinDate.slice(0, 10),
+      endDate: samplingMaxDate.slice(0, 10)
+    };
+  }
+  const temporalExtents = (_b = (_a = this.collectionWithServices) == null ? void 0 : _a.collection) == null ? void 0 : _b.TemporalExtents;
+  if (!(temporalExtents == null ? void 0 : temporalExtents.length))
+    return {
+      startDate: null,
+      endDate: null
+    };
+  let minStart = null;
+  let maxEnd = null;
+  const today = /* @__PURE__ */ new Date();
+  for (const temporal of temporalExtents) {
+    for (const range of temporal.RangeDateTimes || []) {
+      const start = new Date(range.BeginningDateTime);
+      let end;
+      if (temporal.EndsAtPresentFlag || !range.EndingDateTime) {
+        end = today;
+      } else {
+        end = new Date(range.EndingDateTime);
+      }
+      if (!minStart || start < minStart)
+        minStart = start;
+      if (!maxEnd || end > maxEnd)
+        maxEnd = end;
+    }
+  }
+  return {
+    startDate: minStart ? minStart.toISOString().slice(0, 10) : null,
+    endDate: maxEnd ? maxEnd.toISOString().slice(0, 10) : null
+  };
+};
+_renderSpatialSelection = new WeakSet();
+renderSpatialSelection_fn = function() {
+  var _a, _b;
+  const showError = this.touchedFields.has("spatial") && !this.spatialSelection;
+  const spatialString = (_b = (_a = this.spatialSelection) == null ? void 0 : _a.toString()) != null ? _b : this.spatialSelection;
+  return b`
+            <terra-accordion>
+                <div slot="summary">
+                    <span class="accordion-title">Refine Region:</span>
+                </div>
+
+                <div
+                    slot="summary-right"
+                    style="display: flex; align-items: center; gap: 10px;"
+                >
+                    ${showError ? b`<span class="accordion-value error"
+                              >Please select a region</span
+                          >` : spatialString ? b`<span class="accordion-value"
+                                >${spatialString}</span
+                            >` : A}
+                    <button class="reset-btn" @click=${__privateGet(this, _resetSpatialSelection)}>
+                        Reset
+                    </button>
+                </div>
+                <div class="accordion-content">
+                    <terra-spatial-picker
+                        part="spatial-picker"
+                        inline
+                        hide-label
+                        .spatialConstraints=${__privateGet(this, _collectionController).spatialConstraints || "-180, -90, 180, 90"}
+                        .initialValue=${spatialString}
+                        @terra-map-change=${__privateGet(this, _handleSpatialChange)}
+                    ></terra-spatial-picker>
+                    <div
+                        style="display: flex; gap: 16px; margin-top: 15px; color: #31708f;"
+                    >
+                        <span
+                            ><strong>Available Range:</strong> ${__privateGet(this, _collectionController).spatialConstraints}</span
+                        >
+                    </div>
+                </div>
+            </terra-accordion>
+        `;
+};
+_handleSpatialChange = new WeakMap();
+_resetSpatialSelection = new WeakMap();
+_renderVariableSelection = new WeakSet();
+renderVariableSelection_fn = function() {
+  var _a;
+  const variables = ((_a = this.collectionWithServices) == null ? void 0 : _a.variables) || [];
+  const giovanniError = this.touchedFields.has("variables") && __privateMethod(this, _getGiovanniValidationError, getGiovanniValidationError_fn).call(this);
+  const basicError = this.touchedFields.has("variables") && this.selectedVariables.length === 0;
+  const showError = giovanniError || basicError;
+  const errorMessage = giovanniError || (basicError ? "Please select at least one variable" : "");
+  const tree = __privateMethod(this, _buildVariableTree, buildVariableTree_fn).call(this, variables);
+  const allGroups = __privateMethod(this, _getAllGroupPaths, getAllGroupPaths_fn).call(this, tree);
+  const allExpanded = allGroups.length > 0 && allGroups.every((g) => this.expandedVariableGroups.has(g));
+  return b`
+            <terra-accordion>
+                <div slot="summary">
+                    <span class="accordion-title">Select Variables:</span>
+                </div>
+                <div
+                    slot="summary-right"
+                    style="display: flex; align-items: center; gap: 10px;"
+                >
+                    ${showError ? b`<span class="accordion-value error"
+                              >${errorMessage}</span
+                          >` : this.selectedVariables.length ? b`<span class="accordion-value"
+                                >${this.selectedVariables.length} selected</span
+                            >` : A}
+
+                    <button class="reset-btn" @click=${__privateGet(this, _resetVariableSelection)}>
+                        Reset
+                    </button>
+                </div>
+                <div class="accordion-content">
+                    <terra-input
+                        label="Filter variables"
+                        placeholder="Search by variable name..."
+                        .value=${this.variableFilterText}
+                        @input=${(e2) => {
+    const input = e2.target;
+    this.variableFilterText = input.value;
+    __privateMethod(this, _handleVariableFilterChange, handleVariableFilterChange_fn).call(this);
+  }}
+                        style="margin-bottom: 10px;"
+                    ></terra-input>
+                    <button
+                        class="reset-btn"
+                        style="margin-bottom: 10px;"
+                        @click=${() => __privateMethod(this, _toggleExpandCollapseAll, toggleExpandCollapseAll_fn).call(this, tree)}
+                    >
+                        ${allExpanded ? "Collapse Tree" : "Expand Tree"}
+                    </button>
+
+                    ${this.selectedFormat.isGiovanniFormat && this.giovanniConfiguredVariables ? b`
+                              <terra-alert
+                                  open
+                                  appearance="white"
+                                  style="margin: 10px 0"
+                              >
+                                  <terra-icon
+                                      slot="icon"
+                                      name="outline-information-circle"
+                                      library="heroicons"
+                                  ></terra-icon>
+                                  Only certain variables are supported for the
+                                  selected output format. (Giovanni service)
+                              </terra-alert>
+                          ` : A}
+                    ${variables.length === 0 ? b`<p style="color: #666; font-style: italic;">
+                              No variables available for this collection.
+                          </p>` : __privateMethod(this, _renderVariableTree, renderVariableTree_fn).call(this, __privateMethod(this, _filterVariableTree, filterVariableTree_fn).call(this, tree), [])}
+                </div>
+            </terra-accordion>
+        `;
+};
+_renderDimensionGroup = new WeakSet();
+renderDimensionGroup_fn = function(dim) {
+  var _a, _b, _c, _d, _e, _f;
+  const currentValue = (_a = this.selectedDimensionIndexes[dim.name]) != null ? _a : 1;
+  const dimensions = ((_f = (_e = (_d = (_c = (_b = __privateGet(this, _collectionController).gesDiscCollection) == null ? void 0 : _b.data) == null ? void 0 : _c.services) == null ? void 0 : _d.subset) == null ? void 0 : _e.find(
+    (s) => s.dimensions && s.dimensions.length > 0
+  )) == null ? void 0 : _f.dimensions) || [];
+  return b`
+            <div style="margin-bottom: 16px;">
+                <div
+                    style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;"
+                >
+                    <span style="font-weight: 600; margin-bottom: 44px"
+                        >Dimension: ${dim.name}</span
+                    >
+                </div>
+                <terra-slider
+                    class="dimension-slider"
+                    mode="range"
+                    min="1"
+                    .max=${dim.size}
+                    step="1"
+                    .startValue=${currentValue.start}
+                    .endValue=${currentValue.end}
+                    has-tooltips
+                    show-inputs
+                    hide-label
+                    .formatTooltip=${dimensions.length > 0 ? (value) => {
+    const found = dimensions.find(
+      (d) => String(d.value) === String(value)
+    );
+    return found ? found.label : String(value);
+  } : A}
+                    @terra-slider-change=${(event) => {
+    if ("startValue" in event.detail) {
+      const { startValue, endValue } = event.detail;
+      __privateMethod(this, _setDimensionValue, setDimensionValue_fn).call(this, dim.name, startValue, endValue);
+    }
+  }}
+                ></terra-slider>
+            </div>
+        `;
+};
+_setDimensionValue = new WeakSet();
+setDimensionValue_fn = function(dimName, startValue, endValue) {
+  const dimensions = __privateMethod(this, _getCommonSelectableDimensions, getCommonSelectableDimensions_fn).call(this);
+  const found = dimensions.find((d) => d.name === dimName);
+  if (!found) {
+    return;
+  }
+  const normalizedStartValue = Math.min(
+    Math.max(Math.round(startValue), 1),
+    found.size
+  );
+  const normalizedEndValue = Math.min(
+    Math.max(Math.round(endValue != null ? endValue : startValue), 1),
+    found.size
+  );
+  if (normalizedStartValue <= 1 && normalizedEndValue >= found.size) {
+    delete this.selectedDimensionIndexes[dimName];
+    return;
+  }
+  this.selectedDimensionIndexes = __spreadProps(__spreadValues({}, this.selectedDimensionIndexes), {
+    [dimName]: { start: normalizedStartValue, end: normalizedEndValue }
+  });
+};
+_renderDimensionSelection = new WeakSet();
+renderDimensionSelection_fn = function() {
+  const dimensions = __privateMethod(this, _getCommonSelectableDimensions, getCommonSelectableDimensions_fn).call(this);
+  if (!dimensions.length) {
+    return A;
+  }
+  const selectedCount = Object.keys(this.selectedDimensionIndexes).length;
+  return b`
+            <terra-accordion>
+                <div slot="summary">
+                    <span class="accordion-title">Select Dimensions:</span>
+                </div>
+                <div
+                    slot="summary-right"
+                    style="display: flex; align-items: center; gap: 10px;"
+                >
+                    ${selectedCount ? b`<span class="accordion-value"
+                              >${selectedCount}
+                              dimension${selectedCount === 1 ? "" : "s"}
+                              selected</span
+                          >` : A}
+                    <button class="reset-btn" @click=${__privateMethod(this, _resetDimensionSelection, resetDimensionSelection_fn)}>
+                        Reset
+                    </button>
+                </div>
+                <div class="accordion-content">
+                    ${dimensions.map((dim) => __privateMethod(this, _renderDimensionGroup, renderDimensionGroup_fn).call(this, dim))}
+                </div>
+            </terra-accordion>
+        `;
+};
+_filterVariableTree = new WeakSet();
+filterVariableTree_fn = function(tree) {
+  if (!this.variableFilterText.trim()) {
+    return tree;
+  }
+  const filterText = this.variableFilterText.toLowerCase().trim();
+  const filterNode = (node) => {
+    const result = {};
+    for (const [key, value] of Object.entries(node)) {
+      if (value.__isLeaf) {
+        const variableName = value.__variable.name.toLowerCase();
+        if (variableName.includes(filterText)) {
+          result[key] = value;
+        }
+      } else {
+        const filteredChildren = filterNode(value.__children);
+        if (Object.keys(filteredChildren).length > 0 || key.toLowerCase().includes(filterText)) {
+          result[key] = __spreadProps(__spreadValues({}, value), {
+            __children: filteredChildren
+          });
+        }
+      }
+    }
+    return result;
+  };
+  return filterNode(tree);
+};
+_handleVariableFilterChange = new WeakSet();
+handleVariableFilterChange_fn = function() {
+  var _a;
+  if (!this.variableFilterText.trim()) {
+    return;
+  }
+  const variables = ((_a = this.collectionWithServices) == null ? void 0 : _a.variables) || [];
+  const tree = __privateMethod(this, _buildVariableTree, buildVariableTree_fn).call(this, variables);
+  const filterText = this.variableFilterText.toLowerCase().trim();
+  const groupsToExpand = /* @__PURE__ */ new Set();
+  const findMatchingGroups = (node, path = []) => {
+    for (const [key, value] of Object.entries(node)) {
+      if (value.__isLeaf) {
+        const variableName = value.__variable.name.toLowerCase();
+        if (variableName.includes(filterText)) {
+          for (let i = 0; i < path.length; i++) {
+            const groupPath = path.slice(0, i + 1).join("/");
+            groupsToExpand.add(groupPath);
+          }
+        }
+      } else {
+        const groupPath = [...path, key].join("/");
+        findMatchingGroups(value.__children, [...path, key]);
+        if (key.toLowerCase().includes(filterText)) {
+          groupsToExpand.add(groupPath);
+        }
+      }
+    }
+  };
+  findMatchingGroups(tree);
+  if (groupsToExpand.size > 0) {
+    this.expandedVariableGroups = /* @__PURE__ */ new Set([
+      ...this.expandedVariableGroups,
+      ...groupsToExpand
+    ]);
+  }
+};
+_buildVariableTree = new WeakSet();
+buildVariableTree_fn = function(variables) {
+  let filteredVariables = variables;
+  if (this.selectedFormat.isGiovanniFormat && this.giovanniConfiguredVariables) {
+    filteredVariables = variables.filter((v) => {
+      var _a, _b, _c;
+      const shortName = (_a = this.collectionWithServices) == null ? void 0 : _a.shortName;
+      const version = (_c = (_b = this.collectionWithServices) == null ? void 0 : _b.collection) == null ? void 0 : _c.Version;
+      if (!shortName || !version) {
+        return false;
+      }
+      const giovanniVariableName = convertVariableEntryIdToGiovanniFormat(
+        shortName,
+        version,
+        v.name
+      );
+      return this.giovanniConfiguredVariables.has(giovanniVariableName);
+    });
+  }
+  const root = {};
+  for (const v of filteredVariables) {
+    const parts = v.name.split("/");
+    let node = root;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (!node[part])
+        node[part] = { __children: {}, __isLeaf: false };
+      if (i === parts.length - 1) {
+        node[part].__isLeaf = true;
+        node[part].__variable = v;
+      }
+      node = node[part].__children;
+    }
+  }
+  return root;
+};
+_renderVariableTree = new WeakSet();
+renderVariableTree_fn = function(node, path) {
+  const isGiovanni = this.selectedFormat.isGiovanniFormat;
+  return b`
+            <div style="margin-left: ${path.length * 20}px;">
+                ${Object.entries(node).map(([key, value]) => {
+    var _a;
+    const groupPath = [...path, key].join("/");
+    if (value.__isLeaf) {
+      const ummVar = cmr_variable_service_default.getVariableByName(
+        key,
+        (_a = __privateGet(this, _collectionController).variables) == null ? void 0 : _a.data
+      );
+      const variableLabel = ummVar ? cmr_variable_service_default.getVariableDisplayLabel(ummVar) : key;
+      return b`
+                            <div class="option-row">
+                                <label class="checkbox-option">
+                                    <input
+                                        type="${isGiovanni ? "radio" : "checkbox"}"
+                                        name="${isGiovanni ? "variable-selection" : ""}"
+                                        .checked=${this.selectedVariables.some(
+        (v) => v.name === value.__variable.name
+      )}
+                                        @change=${(e2) => __privateMethod(this, _toggleVariableSelection, toggleVariableSelection_fn).call(this, e2, value.__variable)}
+                                    />
+                                    <span>${variableLabel}</span>
+                                </label>
+                            </div>
+                        `;
+    } else {
+      const expanded = this.expandedVariableGroups.has(groupPath);
+      return b`
+                            <div class="option-row" style="align-items: flex-start;">
+                                <span
+                                    style="cursor: pointer; display: flex; align-items: center;"
+                                    @click=${() => __privateMethod(this, _toggleGroupExpand, toggleGroupExpand_fn).call(this, groupPath)}
+                                >
+                                    <terra-icon
+                                        library="heroicons"
+                                        name="${expanded ? "outline-minus-circle" : "outline-plus-circle"}"
+                                        style="margin-right: 4px;"
+                                    ></terra-icon>
+                                    <span style="font-weight: 500;">${key}</span>
+                                </span>
+                            </div>
+                            ${expanded ? __privateMethod(this, _renderVariableTree, renderVariableTree_fn).call(this, value.__children, [
+        ...path,
+        key
+      ]) : ""}
+                        `;
+    }
+  })}
+            </div>
+        `;
+};
+_getAllGroupPaths = new WeakSet();
+getAllGroupPaths_fn = function(node, path = []) {
+  let groups = [];
+  for (const [key, value] of Object.entries(node)) {
+    if (!value.__isLeaf) {
+      const groupPath = [...path, key].join("/");
+      groups.push(groupPath);
+      groups = groups.concat(
+        __privateMethod(this, _getAllGroupPaths, getAllGroupPaths_fn).call(this, value.__children, [...path, key])
+      );
+    }
+  }
+  return groups;
+};
+_toggleGroupExpand = new WeakSet();
+toggleGroupExpand_fn = function(groupPath) {
+  const set = new Set(this.expandedVariableGroups);
+  if (set.has(groupPath)) {
+    set.delete(groupPath);
+  } else {
+    set.add(groupPath);
+  }
+  this.expandedVariableGroups = set;
+};
+_toggleExpandCollapseAll = new WeakSet();
+toggleExpandCollapseAll_fn = function(tree) {
+  const allGroups = __privateMethod(this, _getAllGroupPaths, getAllGroupPaths_fn).call(this, tree);
+  const allExpanded = allGroups.length > 0 && allGroups.every((g) => this.expandedVariableGroups.has(g));
+  if (allExpanded) {
+    this.expandedVariableGroups = /* @__PURE__ */ new Set();
+  } else {
+    this.expandedVariableGroups = new Set(allGroups);
+  }
+};
+_toggleVariableSelection = new WeakSet();
+toggleVariableSelection_fn = function(e2, variable) {
+  __privateMethod(this, _markFieldTouched, markFieldTouched_fn).call(this, "variables");
+  const checked = e2.target.checked;
+  if (this.selectedFormat.isGiovanniFormat) {
+    if (checked) {
+      this.selectedVariables = [variable];
+    }
+  } else {
+    if (checked) {
+      if (!this.selectedVariables.some((v) => v.name === variable.name)) {
+        this.selectedVariables = [...this.selectedVariables, variable];
+      }
+    } else {
+      this.selectedVariables = this.selectedVariables.filter(
+        (v) => v.name !== variable.name
+      );
+    }
+  }
+};
+_markFieldTouched = new WeakSet();
+markFieldTouched_fn = function(field) {
+  this.touchedFields = new Set(this.touchedFields).add(field);
+};
+_resetVariableSelection = new WeakMap();
+_resetDimensionSelection = new WeakSet();
+resetDimensionSelection_fn = function() {
+  this.selectedDimensionIndexes = {};
+};
+_isDimensionExcluded = new WeakSet();
+isDimensionExcluded_fn = function(dim) {
+  var _a, _b, _c;
+  const normalizedName = (_b = (_a = dim.Name) == null ? void 0 : _a.toLowerCase()) != null ? _b : "";
+  const normalizedType = ((_c = dim.Type) != null ? _c : "").toLowerCase();
+  return ["time", "latitude", "longitude", "lat", "lon", "x", "y"].some(
+    (value) => normalizedName.includes(value) || normalizedType.includes(value)
+  );
+};
+_getCommonSelectableDimensions = new WeakSet();
+getCommonSelectableDimensions_fn = function() {
+  var _a, _b;
+  const variables = (_a = __privateGet(this, _collectionController).variables) == null ? void 0 : _a.data;
+  if (!variables) {
+    console.log("no variables found, cannot determine dimensions");
+    return [];
+  }
+  const allUmmVars = (_b = variables.items) != null ? _b : [];
+  if (!allUmmVars.length) {
+    return [];
+  }
+  const allDimensionSets = allUmmVars.map(
+    (v) => {
+      var _a2;
+      return (_a2 = v.umm.Dimensions) != null ? _a2 : [];
+    }
+  );
+  if (!allDimensionSets.length) {
+    return [];
+  }
+  const allDimensionNames = Array.from(
+    new Set(allDimensionSets.flatMap((dimSet) => dimSet.map((dim) => dim.Name)))
+  );
+  const filteredCommon = allDimensionNames.map((name) => {
+    var _a2, _b2;
+    const dims = allDimensionSets.map((set) => set.find((dim) => dim.Name === name)).filter((d) => Boolean(d));
+    if (!dims.length) {
+      return null;
+    }
+    const validSizes = dims.filter((dim) => dim.Size !== void 0 && dim.Size !== "Varies").map((dim) => Number(dim.Size)).filter((size2) => Number.isFinite(size2) && size2 > 0);
+    if (!validSizes.length) {
+      return null;
+    }
+    const size = Math.min(...validSizes);
+    return {
+      name,
+      type: (_b2 = (_a2 = dims[0]) == null ? void 0 : _a2.Type) != null ? _b2 : "OTHER",
+      size
+    };
+  }).filter(
+    (entry) => Boolean(entry)
+  ).filter(
+    (entry) => !__privateMethod(this, _isDimensionExcluded, isDimensionExcluded_fn).call(this, {
+      Name: entry.name,
+      Type: entry.type
+    })
+  );
+  return filteredCommon;
+};
+_renderJobStatus = new WeakSet();
+renderJobStatus_fn = function() {
+  var _a, _b, _c, _d, _e;
+  if (!__privateGet(this, _harmonyRequestController).jobId) {
+    return b`<div class="results-section" id="job-status-section">
+                <div
+                    style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;"
+                >
+                    <h2 class="results-title" style="margin: 0;">Results:</h2>
+                    ${!this.isHistoryView ? b`
+                              <terra-button
+                                  variant="default"
+                                  size="small"
+                                  @click=${__privateMethod(this, _backToSubsetOptions, backToSubsetOptions_fn)}
+                              >
+                                  ← Back to Subset Options
+                              </terra-button>
+                          ` : A}
+                </div>
+
+                <div class="progress-container">
+                    <div class="progress-text">
+                        <span class="spinner"></span>
+                        <span class="status-running">Searching for data...</span>
+                    </div>
+
+                    <div class="progress-bar">
+                        <div class="progress-fill" style="width: 0%"></div>
+                    </div>
+                </div>
+
+                ${__privateMethod(this, _renderJobMessage, renderJobMessage_fn).call(this)}
+            </div>`;
+  }
+  return b`
+            <div class="results-section" id="job-status-section">
+                <div
+                    style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;"
+                >
+                    <h2 class="results-title" style="margin: 0;">Results:</h2>
+                    ${!this.isHistoryView ? b`
+                              <terra-button
+                                  variant="default"
+                                  size="small"
+                                  @click=${__privateMethod(this, _backToSubsetOptions, backToSubsetOptions_fn)}
+                              >
+                                  ← Back to Subset Options
+                              </terra-button>
+                          ` : A}
+                </div>
+
+                ${__privateGet(this, _harmonyRequestController).status !== "canceled" && __privateGet(this, _harmonyRequestController).status !== "failed" ? b` <div class="progress-container">
+                          <div class="progress-text">
+                              ${__privateGet(this, _harmonyRequestController).progress >= 100 ? b`
+                                        <span class="status-complete"
+                                            >✓ Search complete</span
+                                        >
+                                    ` : b`
+                                        <span class="spinner"></span>
+                                        <span class="status-running"
+                                            >Searching for data...
+                                            (${__privateGet(this, _harmonyRequestController).progress}%)</span
+                                        >
+                                    `}
+                          </div>
+
+                          <div class="progress-bar">
+                              <div
+                                  class="progress-fill"
+                                  style="width: ${__privateGet(this, _harmonyRequestController).progress}%"
+                              ></div>
+                          </div>
+                      </div>` : A}
+
+                <div class="search-status">
+                    <span class="file-count"
+                        >Found ${__privateMethod(this, _numberOfFilesFoundEstimate, numberOfFilesFoundEstimate_fn).call(this)} files</span
+                    >
+                    out of estimated
+                    <span class="estimated-total"
+                        >${(_a = __privateGet(this, _harmonyRequestController).data) == null ? void 0 : _a.numInputGranules.toLocaleString()}</span
+                    >
+                </div>
+
+                ${__privateMethod(this, _renderJobMessage, renderJobMessage_fn).call(this)}
+                ${((_c = (_b = __privateGet(this, _harmonyRequestController).data) == null ? void 0 : _b.errors) == null ? void 0 : _c.length) ? b`
+                          <terra-accordion>
+                              <div slot="summary">
+                                  <span
+                                      class="accordion-title"
+                                      style="color: #dc3545;"
+                                      >Errors
+                                      (${(_d = __privateGet(this, _harmonyRequestController).data) == null ? void 0 : _d.errors.length})</span
+                                  >
+                              </div>
+                              <div class="accordion-content">
+                                  <ul
+                                      style="color: #dc3545; font-size: 14px; padding-left: 20px;"
+                                  >
+                                      ${(_e = __privateGet(this, _harmonyRequestController).data) == null ? void 0 : _e.errors.map(
+    (err) => b`
+                                              <li style="margin-bottom: 12px;">
+                                                  <a
+                                                      href="${err.url}"
+                                                      target="_blank"
+                                                      style="word-break: break-all; color: #dc3545; text-decoration: underline;"
+                                                  >
+                                                      ${err.url}
+                                                  </a>
+                                                  <div style="margin-top: 2px;">
+                                                      ${err.message}
+                                                  </div>
+                                              </li>
+                                          `
+  )}
+                                  </ul>
+                              </div>
+                          </terra-accordion>
+                      ` : A}
+
+                <div class="tabs">
+                    <button
+                        class="tab ${this.selectedTab === "web-links" ? "active" : ""}"
+                        @click=${() => this.selectedTab = "web-links"}
+                    >
+                        Web Links
+                    </button>
+
+                    ${!this.isHistoryView ? b`
+                              <button
+                                  class="tab ${this.selectedTab === "selected-params" ? "active" : ""}"
+                                  @click=${() => this.selectedTab = "selected-params"}
+                              >
+                                  Selected Parameters
+                              </button>
+                          ` : A}
+                </div>
+                <div
+                    id="web-links"
+                    class="tab-content ${this.selectedTab === "web-links" ? "active" : ""}"
+                >
+                    ${__privateMethod(this, _getDocumentationLinks, getDocumentationLinks_fn).call(this).length ? b`
+                              <div class="documentation-links">
+                                  ${__privateMethod(this, _getDocumentationLinks, getDocumentationLinks_fn).call(this).map(
+    (link) => b`
+                                          <a href="${link.href}" class="doc-link"
+                                              >${link.title}</a
+                                          >
+                                      `
+  )}
+                              </div>
+                          ` : A}
+
+                    <ul class="file-list">
+                        ${__privateMethod(this, _getDataLinks, getDataLinks_fn).call(this).map(
+    (link) => b`
+                                <li class="file-item">
+                                    <a
+                                        href="${link.href}"
+                                        class="file-link"
+                                        target="_blank"
+                                    >
+                                        ${link.title}
+                                    </a>
+                                </li>
+                            `
+  )}
+                    </ul>
+                </div>
+
+                <div
+                    id="selected-params"
+                    class="tab-content ${this.selectedTab === "selected-params" ? "active" : ""}"
+                >
+                    ${__privateMethod(this, _renderSelectedParams, renderSelectedParams_fn).call(this)}
+                </div>
+            </div>
+
+            ${!this.dialog ? b`
+                      <div class="footer">
+                          ${__privateGet(this, _harmonyRequestController).status === "successful" /* SUCCESSFUL */ || __privateGet(this, _harmonyRequestController).status === "complete_with_errors" /* COMPLETE_WITH_ERRORS */ ? b`
+                                    <div
+                                        style="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="file-list">
+                                                    <svg
+                                                        slot="prefix"
+                                                        viewBox="0 0 24 24"
+                                                        width="16"
+                                                        height="16"
+                                                        style="width: 16px; height: 16px;"
+                                                    >
+                                                        <path
+                                                            fill="currentColor"
+                                                            d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"
+                                                        />
+                                                    </svg>
+                                                    File List
+                                                </terra-menu-item>
+                                                <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>
+                                ` : A}
+                          ${__privateGet(this, _harmonyRequestController).status === "running" /* RUNNING */ ? b`<button
+                                    class="btn btn-success"
+                                    @click=${__privateMethod(this, _cancelJob, cancelJob_fn)}
+                                    ?disabled=${this.cancelingGetData}
+                                >
+                                    ${this.cancelingGetData ? "Canceling..." : "Cancel request"}
+                                </button>` : A}
+
+                          <div class="job-info">
+                              Job ID:
+                              <span class="job-id">
+                                  ${this.bearerToken ? b`<a
+                                            href="https://harmony.earthdata.nasa.gov/jobs/${__privateGet(this, _harmonyRequestController).jobId}"
+                                            target="_blank"
+                                            >${__privateGet(this, _harmonyRequestController).jobId}</a
+                                        >` : __privateGet(this, _harmonyRequestController).jobId}
+                              </span>
+                              <span class="info-icon">?</span>
+                          </div>
+                      </div>
+                  ` : A}
+        `;
+};
+_renderSelectedParams = new WeakSet();
+renderSelectedParams_fn = function() {
+  var _a, _b, _c, _d;
+  const collection = (_a = this.collectionWithServices) == null ? void 0 : _a.collection;
+  const variables = this.selectedVariables.length ? this.selectedVariables.map((v) => v.name) : ["All"];
+  const dateRange = this.selectedDateRange.startDate && this.selectedDateRange.endDate ? `${this.selectedDateRange.startDate} to ${this.selectedDateRange.endDate}` : "\u2014";
+  const spatial = (_c = (_b = this.spatialSelection) == null ? void 0 : _b.toString()) != null ? _c : "-";
+  return b`
+            <dl class="params-summary">
+                <div>
+                    <dt><strong>Dataset</strong></dt>
+                    <dd>${(_d = collection == null ? void 0 : collection.EntryTitle) != null ? _d : "\u2014"}</dd>
+                </div>
+                <div>
+                    <dt><strong>Variables</strong></dt>
+                    <dd>${variables.map((v) => b`<div>${v}</div>`)}</dd>
+                </div>
+                <div>
+                    <dt><strong>Dimensions</strong></dt>
+                    <dd>
+                        ${Object.entries(this.selectedDimensionIndexes).length ? Object.entries(this.selectedDimensionIndexes).map(
+    ([dimName, value]) => b`<div>
+                                          <strong>${dimName}:</strong> ${value}
+                                      </div>`
+  ) : "\u2014"}
+                    </dd>
+                </div>
+                <div>
+                    <dt><strong>Date Range</strong></dt>
+                    <dd>${dateRange}</dd>
+                </div>
+                <div>
+                    <dt><strong>Spatial</strong></dt>
+                    <dd>${spatial}</dd>
+                </div>
+            </dl>
+
+            <terra-button @click=${__privateMethod(this, _refineParameters, refineParameters_fn)}
+                >Refine Parameters</terra-button
+            >
+        `;
+};
+_cancelJob = new WeakSet();
+cancelJob_fn = async function() {
+  if (!this.jobId) {
+    return;
+  }
+  this.cancelingGetData = true;
+  try {
+    await __privateGet(this, _harmonyRequestController).cancelJob({
+      jobId: this.jobId,
+      options: { bearerToken: this.bearerToken }
+    });
+  } finally {
+    this.cancelingGetData = false;
+  }
+};
+_getData = new WeakSet();
+getData_fn = async function() {
+  var _a;
+  const validationError = __privateMethod(this, _getGiovanniValidationError, getGiovanniValidationError_fn).call(this);
+  if (validationError) {
+    this.validationError = validationError;
+    __privateMethod(this, _markFieldTouched, markFieldTouched_fn).call(this, "variables");
+    return;
+  }
+  this.validationError = void 0;
+  this.cancelingGetData = false;
+  __privateMethod(this, _touchAllFields, touchAllFields_fn).call(this);
+  const variables = this.selectedFormat.isGiovanniFormat ? this.selectedVariables.map(
+    (v) => {
+      var _a2, _b, _c;
+      return (
+        // the Giovanni variable catalog uses different variable entry ids, we need to support them
+        // ex. CMR: M2T1NXSLV_5.2.14 in Giovanni uses underscores: M2T1NXSLV_5_2_14
+        convertVariableEntryIdToGiovanniFormat(
+          (_a2 = this.collectionWithServices.shortName) != null ? _a2 : "",
+          (_c = (_b = this.collectionWithServices.collection) == null ? void 0 : _b.Version) != null ? _c : "",
+          v.name
+        )
+      );
+    }
+  ) : this.selectedVariables.map((v) => v.conceptId);
+  const harmonyRequest = new HarmonyRequest({
+    collectionConceptId: this.collectionWithServices.conceptId,
+    variables,
+    location: this.spatialSelection
+  });
+  if (((_a = this.collectionWithServices) == null ? void 0 : _a.summary.subsetting.temporal) && this.selectedDateRange.startDate && this.selectedDateRange.endDate) {
+    harmonyRequest.startDate(
+      this.isSubDaily ? this.selectedDateRange.startDate : getUTCDate(this.selectedDateRange.startDate).toISOString()
+    );
+    harmonyRequest.endDate(
+      this.isSubDaily ? this.selectedDateRange.endDate : getUTCDate(this.selectedDateRange.endDate).toISOString()
+    );
+  }
+  if (this.selectedFormat) {
+    harmonyRequest.format(
+      this.selectedFormat.isGiovanniFormat ? "text/csv" : this.selectedFormat.key
+    );
+  }
+  if (this.selectedFormat.key === "text/csv") {
+    harmonyRequest.average("area");
+  }
+  if (this.selectedFormat.key === "image/tiff") {
+    harmonyRequest.average("time");
+  }
+  if (Object.keys(this.selectedDimensionIndexes).length) {
+    Object.entries(this.selectedDimensionIndexes).forEach(
+      ([dimName, { start, end }]) => {
+        harmonyRequest.dimension({
+          name: dimName,
+          min: start,
+          max: end
+        });
+      }
+    );
+  }
+  harmonyRequest.label("terra-data-subsetter");
+  console.log("Creating Harmony job with request:", harmonyRequest);
+  const job = await __privateGet(this, _harmonyRequestController).startJob({
+    harmonyRequest,
+    options: { bearerToken: this.bearerToken }
+  });
+  this.jobId = job.jobID;
+  setTimeout(() => {
+    const el = this.renderRoot.querySelector("#job-status-section");
+    el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
+  }, 100);
+  this.refineParameters = false;
+  this.isHistoryView = false;
+};
+_touchAllFields = new WeakSet();
+touchAllFields_fn = function() {
+  this.touchedFields = /* @__PURE__ */ new Set(["variables", "spatial"]);
+};
+_numberOfFilesFoundEstimate = new WeakSet();
+numberOfFilesFoundEstimate_fn = function() {
+  return Math.floor(
+    __privateGet(this, _harmonyRequestController).data.numInputGranules * __privateGet(this, _harmonyRequestController).progress / 100
+  );
+};
+_getDocumentationLinks = new WeakSet();
+getDocumentationLinks_fn = function() {
+  return __privateGet(this, _harmonyRequestController).data.links.filter(
+    (link) => link.rel === "stac-catalog-json"
+  );
+};
+_getDataLinks = new WeakSet();
+getDataLinks_fn = function() {
+  return __privateGet(this, _harmonyRequestController).data.links.filter(
+    (link) => link.rel === "data"
+  );
+};
+_hasAtLeastOneSubsetOption = new WeakSet();
+hasAtLeastOneSubsetOption_fn = function() {
+  var _a, _b, _c, _d;
+  return ((_a = this.collectionWithServices) == null ? void 0 : _a.summary.subsetting.bbox) || ((_b = this.collectionWithServices) == null ? void 0 : _b.summary.subsetting.shape) || ((_c = this.collectionWithServices) == null ? void 0 : _c.summary.subsetting.variable) || ((_d = this.collectionWithServices) == null ? void 0 : _d.summary.subsetting.temporal);
+};
+_hasSpatialSubset = new WeakSet();
+hasSpatialSubset_fn = function() {
+  var _a, _b;
+  return ((_a = this.collectionWithServices) == null ? void 0 : _a.summary.subsetting.bbox) || ((_b = this.collectionWithServices) == null ? void 0 : _b.summary.subsetting.shape);
+};
+_renderJobMessage = new WeakSet();
+renderJobMessage_fn = function() {
+  const warningStatuses = [
+    "canceled" /* CANCELED */,
+    "complete_with_errors" /* COMPLETE_WITH_ERRORS */,
+    "running_with_errors" /* RUNNING_WITH_ERRORS */
+  ];
+  const errorStatuses = ["failed" /* FAILED */];
+  let type = "normal";
+  if (warningStatuses.includes(__privateGet(this, _harmonyRequestController).data.status)) {
+    type = "warning";
+  } else if (errorStatuses.includes(__privateGet(this, _harmonyRequestController).data.status)) {
+    type = "error";
+  }
+  let color, bg;
+  if (type === "error") {
+    color = "#dc3545";
+    bg = "#f8d7da";
+  } else if (type === "warning") {
+    color = "#856404";
+    bg = "#fff3cd";
+  } else {
+    color = "#555";
+    bg = "#f8f9fa";
+  }
+  return b`
+            <div
+                style="
+                margin: 24px 0 16px 0;
+                padding: 16px 20px;
+                border-radius: 6px;
+                background: ${bg};
+                color: ${color};
+                border: 1px solid ${color}22;
+            "
+            >
+                ${__privateMethod(this, _getJobMessageText, getJobMessageText_fn).call(this)}
+            </div>
+        `;
+};
+_getJobMessageText = new WeakSet();
+getJobMessageText_fn = function() {
+  var _a;
+  return (_a = __privateGet(this, _harmonyRequestController).data) == null ? void 0 : _a.message.replace(
+    /\b(The job|the job|job|Job)\b/g,
+    (match) => {
+      switch (match) {
+        case "The job":
+          return "Your request";
+        case "the job":
+          return "Your Request";
+        case "job":
+          return "request";
+        case "Job":
+          return "Request";
+      }
+      return match;
+    }
+  );
+};
+_estimateJobSize = new WeakSet();
+estimateJobSize_fn = function() {
+  var _a, _b, _c, _d, _e;
+  if (!((_a = this.collectionWithServices) == null ? void 0 : _a.granuleCount))
+    return;
+  const range = __privateMethod(this, _getCollectionDateRange, getCollectionDateRange_fn).call(this);
+  let startDate;
+  let endDate;
+  let links = (_c = (_b = this.collectionWithServices) == null ? void 0 : _b.granuleCount) != null ? _c : 0;
+  if (this.selectedDateRange.startDate && this.selectedDateRange.endDate) {
+    startDate = this.selectedDateRange.startDate;
+    endDate = this.selectedDateRange.endDate;
+  } else {
+    startDate = (_d = this.granuleMinDate) != null ? _d : range.startDate;
+    endDate = (_e = this.granuleMaxDate) != null ? _e : range.endDate;
+  }
+  if (!startDate || !endDate)
+    return;
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  const days = Math.floor((end.getTime() - start.getTime()) / (1e3 * 60 * 60 * 24)) + 1;
+  if (range.startDate && range.endDate) {
+    const availableDaysInCollection = Math.floor(
+      (new Date(range.endDate).getTime() - new Date(range.startDate).getTime()) / (1e3 * 60 * 60 * 24)
+    ) + 1;
+    const granulesPerDay = links / availableDaysInCollection;
+    links = Math.ceil(days * granulesPerDay);
+  }
+  return { days, links };
+};
+_refineParameters = new WeakSet();
+refineParameters_fn = function() {
+  this.refineParameters = true;
+};
+_backToSubsetOptions = new WeakSet();
+backToSubsetOptions_fn = function() {
+  this.refineParameters = true;
+  setTimeout(() => {
+    const container = this.renderRoot.querySelector(".container");
+    container == null ? void 0 : container.scrollIntoView({ behavior: "smooth", block: "start" });
+  }, 100);
+};
+_viewRunningJob = new WeakSet();
+viewRunningJob_fn = function() {
+  this.refineParameters = false;
+  setTimeout(() => {
+    const el = this.renderRoot.querySelector("#job-status-section");
+    el == null ? void 0 : el.scrollIntoView({ behavior: "smooth" });
+  }, 100);
+};
+_handleDownloadSelect = new WeakSet();
+handleDownloadSelect_fn = function(event) {
+  const item = event.detail.item;
+  const value = item.value || item.getTextLabel();
+  if (value === "file-list") {
+    __privateMethod(this, _downloadLinksAsTxt, downloadLinksAsTxt_fn).call(this, event);
+  } else 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);
+  }
+};
+_downloadLinksAsTxt = new WeakSet();
+downloadLinksAsTxt_fn = function(event) {
+  var _a;
+  event.stopPropagation();
+  if (!((_a = __privateGet(this, _harmonyRequestController).data) == null ? void 0 : _a.links)) {
+    return;
+  }
+  const dataLinks = __privateMethod(this, _getDataLinks, getDataLinks_fn).call(this);
+  if (dataLinks.length === 0) {
+    return;
+  }
+  const content = dataLinks.map((link) => link.href).join("\n");
+  const blob = new Blob([content], { type: "text/plain" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `subset_links_${__privateGet(this, _harmonyRequestController).jobId}.txt`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+};
+_downloadPythonScript = new WeakSet();
+downloadPythonScript_fn = async function(event) {
+  var _a, _b, _c, _d;
+  event.stopPropagation();
+  if (!((_a = __privateGet(this, _harmonyRequestController).data) == null ? void 0 : _a.links)) {
+    return;
+  }
+  const response = await fetch(
+    getBasePath("assets/data-subsetter/download_subset_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 content = (await response.text()).replace(/{{jobId}}/gi, (_b = __privateGet(this, _harmonyRequestController).jobId) != null ? _b : "").replace(
+    /{{HARMONY_ENV}}/gi,
+    `Environment.${(_c = this.environment) == null ? void 0 : _c.toUpperCase()}`
+  ).replace(
+    /{{EARTHACCESS_ENV}}/gi,
+    `earthaccess.${(_d = this.environment) == null ? void 0 : _d.toUpperCase()}`
+  );
+  const blob = new Blob([content], { type: "text/plain" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `download_subset_files_${__privateGet(this, _harmonyRequestController).jobId}.py`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+};
+_downloadEarthdataDownload = new WeakSet();
+downloadEarthdataDownload_fn = async function(event) {
+  var _a;
+  event.stopPropagation();
+  if (!((_a = __privateGet(this, _harmonyRequestController).data) == null ? void 0 : _a.links)) {
+    return;
+  }
+  alert("Sorry, Earthdata Download is not currently supported");
+};
+_handleJupyterNotebookClick = new WeakSet();
+handleJupyterNotebookClick_fn = function() {
+  const notebook = getNotebook(this);
+  sendDataToJupyterNotebook("load-notebook", {
+    filename: `subset_${__privateGet(this, _harmonyRequestController).jobId}.ipynb`,
+    notebook,
+    bearerToken: this.bearerToken
+  });
+};
+_renderAvailableTemporalRangeSection = new WeakSet();
+renderAvailableTemporalRangeSection_fn = function() {
+  const { startDate, endDate } = __privateMethod(this, _getCollectionDateRange, getCollectionDateRange_fn).call(this);
+  if (!startDate || !endDate)
+    return A;
+  return b`
+            <div class="section" style="margin-bottom: 16px;">
+                <h2 class="section-title">Available Date Range</h2>
+                <div style="color: #31708f; margin-top: 8px;">
+                    <strong>${startDate}</strong> to <strong>${endDate}</strong>
+                </div>
+                <div style="font-size: 0.95em; color: #666;">
+                    This collection does not support temporal subsetting.
+                </div>
+            </div>
+        `;
+};
+_renderAvailableSpatialRangeSection = new WeakSet();
+renderAvailableSpatialRangeSection_fn = function() {
+  var _a, _b, _c, _d, _e;
+  const boundingRects = (_e = (_d = (_c = (_b = (_a = this.collectionWithServices) == null ? void 0 : _a.collection) == null ? void 0 : _b.SpatialExtent) == null ? void 0 : _c.HorizontalSpatialDomain) == null ? void 0 : _d.Geometry) == null ? void 0 : _e.BoundingRectangles;
+  if (!boundingRects || !Array.isArray(boundingRects) || !boundingRects.length)
+    return A;
+  return b`
+            <div class="section" style="margin-bottom: 16px;">
+                <h2 class="section-title">Available Spatial Area</h2>
+                <div style="color: #31708f; margin-top: 8px;">
+                    ${boundingRects.map(
+    (rect) => b`<div>
+                                <strong>Bounding Box:</strong>
+                                ${rect.WestBoundingCoordinate},
+                                ${rect.SouthBoundingCoordinate},
+                                ${rect.EastBoundingCoordinate},
+                                ${rect.NorthBoundingCoordinate}
+                            </div>`
+  )}
+                </div>
+                <div style="font-size: 0.95em; color: #666;">
+                    This collection does not support spatial subsetting.
+                </div>
+            </div>
+        `;
+};
+_renderDataAccessModeSelection = new WeakSet();
+renderDataAccessModeSelection_fn = function() {
+  if (!__privateGet(this, _collectionController).hasGranules) {
+    return A;
+  }
+  return b`
+            <div class="mode-selection">
+                <div class="mode-options">
+                    <label
+                        class="mode-option ${this.dataAccessMode === "original" ? "selected" : ""}"
+                    >
+                        <input
+                            type="radio"
+                            name="data-access-mode"
+                            value="original"
+                            .checked=${this.dataAccessMode === "original"}
+                            @change=${() => this.dataAccessMode = "original"}
+                        />
+                        <div class="mode-content">
+                            <div class="mode-title">Get Original Files</div>
+                            <div class="mode-description">
+                                Filter file links directly from the archive.
+                            </div>
+                        </div>
+                    </label>
+
+                    <label
+                        class="mode-option ${this.dataAccessMode === "subset" ? "selected" : ""}"
+                    >
+                        <input
+                            type="radio"
+                            name="data-access-mode"
+                            value="subset"
+                            .checked=${this.dataAccessMode === "subset"}
+                            @change=${() => this.dataAccessMode = "subset"}
+                        />
+                        <div class="mode-content">
+                            <div class="mode-title">Transform Data</div>
+                            <div class="mode-description">
+                                Transform the data to your specific needs.
+                            </div>
+                        </div>
+                    </label>
+                </div>
+            </div>
+        `;
+};
+_getGiovanniValidationError = new WeakSet();
+getGiovanniValidationError_fn = function() {
+  if (!this.selectedFormat.isGiovanniFormat) {
+    return null;
+  }
+  if (this.selectedVariables.length === 0) {
+    return "Please select a variable to subset.";
+  }
+  if (this.selectedVariables.length > 1) {
+    return "The selected format only supports subsetting one variable at a time.";
+  }
+  return null;
+};
+TerraDataSubsetter.styles = [component_styles_default, data_subsetter_styles_default];
+TerraDataSubsetter.dependencies = {
+  "terra-accordion": TerraAccordion,
+  "terra-date-picker": TerraDatePicker,
+  "terra-icon": TerraIcon,
+  "terra-input": TerraInput,
+  "terra-spatial-picker": TerraSpatialPicker,
+  "terra-login": TerraLogin,
+  "terra-loader": TerraLoader,
+  "terra-data-access": TerraDataAccess,
+  "terra-dialog": TerraDialog,
+  "terra-dropdown": TerraDropdown,
+  "terra-menu": TerraMenu,
+  "terra-menu-item": TerraMenuItem,
+  "terra-button": TerraButton,
+  "terra-alert": TerraAlert,
+  "terra-slider": TerraSlider
+};
+__decorateClass([
+  n({ reflect: true, attribute: "collection-entry-id" })
+], TerraDataSubsetter.prototype, "collectionEntryId", 2);
+__decorateClass([
+  n({ reflect: true, attribute: "short-name" })
+], TerraDataSubsetter.prototype, "shortName", 2);
+__decorateClass([
+  n({ reflect: true, attribute: "version" })
+], TerraDataSubsetter.prototype, "version", 2);
+__decorateClass([
+  n({
+    reflect: true,
+    type: Boolean,
+    attribute: "show-collection-search"
+  })
+], TerraDataSubsetter.prototype, "showCollectionSearch", 2);
+__decorateClass([
+  n({ reflect: true, type: Boolean, attribute: "show-history-panel" })
+], TerraDataSubsetter.prototype, "showHistoryPanel", 2);
+__decorateClass([
+  n({ reflect: true, attribute: "job-id" })
+], TerraDataSubsetter.prototype, "jobId", 2);
+__decorateClass([
+  n({ attribute: "bearer-token" })
+], TerraDataSubsetter.prototype, "bearerToken", 2);
+__decorateClass([
+  n()
+], TerraDataSubsetter.prototype, "features", 2);
+__decorateClass([
+  n({ reflect: true })
+], TerraDataSubsetter.prototype, "dialog", 2);
+__decorateClass([
+  n({ reflect: true, type: Boolean, attribute: "is-history-view" })
+], TerraDataSubsetter.prototype, "isHistoryView", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "collectionWithServices", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "selectedVariables", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "selectedDimensionIndexes", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "expandedVariableGroups", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "variableFilterText", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "touchedFields", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "spatialSelection", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "selectedDateRange", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "selectedFormat", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "cancelingGetData", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "selectedTab", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "refineParameters", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "collectionSearchType", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "collectionSearchQuery", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "collectionSearchLoading", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "collectionSearchResults", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "collectionLoading", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "collectionAccordionOpen", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "dataAccessMode", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "validationError", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "granuleMinDate", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "granuleMaxDate", 2);
+__decorateClass([
+  r()
+], TerraDataSubsetter.prototype, "giovanniConfiguredVariables", 2);
+__decorateClass([
+  e('[part~="spatial-picker"]')
+], TerraDataSubsetter.prototype, "spatialPicker", 2);
+__decorateClass([
+  e("terra-dialog")
+], TerraDataSubsetter.prototype, "dialogElement", 2);
+__decorateClass([
+  watch(["jobId"], { waitUntilFirstUpdate: true })
+], TerraDataSubsetter.prototype, "jobIdChanged", 1);
+__decorateClass([
+  watch(["shortName", "version"])
+], TerraDataSubsetter.prototype, "shortNameAndVersionChanged", 1);
+__decorateClass([
+  watch("collectionEntryId", { waitUntilFirstUpdate: true })
+], TerraDataSubsetter.prototype, "collectionEntryIdChanged", 1);
+__decorateClass([
+  watch(["collectionWithServices"])
+], TerraDataSubsetter.prototype, "collectionChanged", 1);
+__decorateClass([
+  watch(["granuleMinDate", "granuleMaxDate"])
+], TerraDataSubsetter.prototype, "granuleDatesChanged", 1);
+__decorateClass([
+  watch("selectedFormat")
+], TerraDataSubsetter.prototype, "selectedFormatChanged", 1);
+__decorateClass([
+  debounce(500)
+], TerraDataSubsetter.prototype, "handleCollectionSearch", 1);
+
+export {
+  TerraDataSubsetter
+};