@nasa-terra/components 0.0.29 → 0.0.30

package/dist/chunks/{chunk.LIBBEBVE.js → chunk.PVN5GF75.js}

@@ -1,37 +1,38 @@
 import {
   TerraVariableCombobox
-} from "./chunk.NW3BG32V.js";
+} from "./chunk.NRFKLACI.js";
 import {
   spatial_picker_default
-} from "./chunk.6SN6X5JU.js";
+} from "./chunk.YF6EKHHQ.js";
 import {
-  TimeSeriesController
-} from "./chunk.OAWTBOBI.js";
+  TimeSeriesController,
+  calculateDataPoints
+} from "./chunk.WAIWLZ6Z.js";
 import {
   time_series_styles_default
-} from "./chunk.GHDRVO5M.js";
+} from "./chunk.5EHGVGXV.js";
 import {
   TerraPlot
-} from "./chunk.TGFRBJQ2.js";
+} from "./chunk.TOKOGZDW.js";
 import {
   TerraDateRangeSlider
-} from "./chunk.ZJX62EXO.js";
+} from "./chunk.LDXAXITL.js";
 import {
   TerraLoader
-} from "./chunk.SBA3WOAN.js";
+} from "./chunk.3JQPZWUE.js";
 import {
   TerraIcon
-} from "./chunk.TRYPXGEF.js";
+} from "./chunk.KAU6YSSX.js";
 import {
   TerraButton
-} from "./chunk.Z3BPGAEC.js";
+} from "./chunk.TOSECFXS.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -46,16 +47,24 @@ import timezone from "dayjs/plugin/timezone.js";
 import utc from "dayjs/plugin/utc.js";
 import { cache } from "lit/directives/cache.js";
 import { downloadImage } from "plotly.js-dist-min";
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { TaskStatus } from "@lit/task";
+var NUM_DATAPOINTS_TO_WARN_USER = 5e4;
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.tz.setDefault("Etc/GMT");
-var _timeSeriesController, _adaptPropertyToController, adaptPropertyToController_fn, _maybeSliceTimeForStartEnd, maybeSliceTimeForStartEnd_fn, _handleVariableChange, handleVariableChange_fn, _handleMapChange, handleMapChange_fn, _handleDateRangeSliderChangeEvent, handleDateRangeSliderChangeEvent_fn, _abortDataLoad, abortDataLoad_fn, _downloadCSV, downloadCSV_fn, _convertToCSV, convertToCSV_fn, _downloadPNG, downloadPNG_fn, _handleActiveMenuItem, handleActiveMenuItem_fn;
+var _timeSeriesController, _checkDataPointLimits, checkDataPointLimits_fn, _confirmDataPointWarning, confirmDataPointWarning_fn, _cancelDataPointWarning, cancelDataPointWarning_fn, _adaptPropertyToController, adaptPropertyToController_fn, _maybeSliceTimeForStartEnd, maybeSliceTimeForStartEnd_fn, _handleVariableChange, handleVariableChange_fn, _handleMapChange, handleMapChange_fn, _handleDateRangeSliderChangeEvent, handleDateRangeSliderChangeEvent_fn, _abortDataLoad, abortDataLoad_fn, _downloadCSV, downloadCSV_fn, _convertToCSV, convertToCSV_fn, _downloadPNG, downloadPNG_fn, _handleActiveMenuItem, handleActiveMenuItem_fn;
 var TerraTimeSeries = class extends TerraElement {
   constructor() {
     super(...arguments);
+    /**
+     * Checks if the current date range will exceed data point limits
+     * eturns true if it's safe to proceed, false if confirmation is needed
+     */
+    __privateAdd(this, _checkDataPointLimits);
+    __privateAdd(this, _confirmDataPointWarning);
+    __privateAdd(this, _cancelDataPointWarning);
     __privateAdd(this, _adaptPropertyToController);
     /**
      * The Collection Beginning DateTime changes when a new collection is selected.
@@ -88,6 +97,8 @@ var TerraTimeSeries = class extends TerraElement {
     __privateAdd(this, _downloadPNG);
     __privateAdd(this, _handleActiveMenuItem);
     __privateAdd(this, _timeSeriesController, void 0);
+    this.showDataPointWarning = false;
+    this.estimatedDataPoints = 0;
     this.activeMenuItem = null;
   }
   handleCollectionUpdate(_oldValue, newValue) {
@@ -120,8 +131,9 @@ var TerraTimeSeries = class extends TerraElement {
     return html`
             <terra-variable-combobox
                 exportparts="base:variable-combobox__base, combobox:variable-combobox__combobox, button:variable-combobox__button, listbox:variable-combobox__listbox"
-                value=${`${this.collection}_${this.variable}`}
+                .value=${this.collection && this.variable ? `${this.collection}_${this.variable}` : nothing}
                 .bearerToken=${(_a = this.bearerToken) != null ? _a : null}
+                .useTags=${true}
                 @terra-combobox-change="${__privateMethod(this, _handleVariableChange, handleVariableChange_fn)}"
             ></terra-variable-combobox>
 
@@ -198,7 +210,6 @@ var TerraTimeSeries = class extends TerraElement {
                                           ></terra-icon>
                                       </terra-button>
                                   </div>
-                              </header>
 
                               <menu
                                   role="menu"
@@ -230,7 +241,7 @@ var TerraTimeSeries = class extends TerraElement {
                                                   href=${this.datasetLandingPage}
                                                   rel="noopener noreffer"
                                                   target="_blank"
-                                                  >Dataset Summary
+                                                  >${this.collectionLongName}
 
                                                   <terra-icon
                                                       name="outline-arrow-top-right-on-square"
@@ -326,6 +337,7 @@ var TerraTimeSeries = class extends TerraElement {
                                       </ul>
                                   </li>
                               </menu>
+                              </header>
                           ` : html`<div class="spacer"></div>`
     )}
 
@@ -371,10 +383,69 @@ var TerraTimeSeries = class extends TerraElement {
                 <p>Plotting ${this.collection} ${this.variable}&hellip;</p>
                 <terra-button @click=${__privateMethod(this, _abortDataLoad, abortDataLoad_fn)}>Cancel</terra-button>
             </dialog>
+
+            <dialog ?open=${this.showDataPointWarning} class="quota-dialog">
+                <h2>This is a large request</h2>
+
+                <p>
+                    You are requesting approximately
+                    ${this.estimatedDataPoints.toLocaleString()} data points.
+                </p>
+
+                <p>
+                    Requesting large amounts of data may cause you to reach your
+                    monthly quota limit.
+                </p>
+
+                <p>Would you still like to proceed with this request?</p>
+
+                <div class="dialog-buttons">
+                    <terra-button
+                        @click=${__privateMethod(this, _cancelDataPointWarning, cancelDataPointWarning_fn)}
+                        variant="default"
+                    >
+                        Cancel
+                    </terra-button>
+
+                    <terra-button
+                        @click=${__privateMethod(this, _confirmDataPointWarning, confirmDataPointWarning_fn)}
+                        variant="primary"
+                    >
+                        Proceed
+                    </terra-button>
+                </div>
+            </dialog>
         `;
   }
 };
 _timeSeriesController = new WeakMap();
+_checkDataPointLimits = new WeakSet();
+checkDataPointLimits_fn = function() {
+  if (!this.timeInterval || !this.startDate || !this.endDate) {
+    return true;
+  }
+  const startDate = dayjs.utc(this.startDate).toDate();
+  const endDate = dayjs.utc(this.endDate).toDate();
+  this.estimatedDataPoints = calculateDataPoints(
+    this.timeInterval,
+    startDate,
+    endDate
+  );
+  if (this.estimatedDataPoints < NUM_DATAPOINTS_TO_WARN_USER) {
+    return true;
+  }
+  this.showDataPointWarning = true;
+  return false;
+};
+_confirmDataPointWarning = new WeakSet();
+confirmDataPointWarning_fn = function() {
+  this.showDataPointWarning = false;
+  __privateGet(this, _timeSeriesController).task.run();
+};
+_cancelDataPointWarning = new WeakSet();
+cancelDataPointWarning_fn = function() {
+  this.showDataPointWarning = false;
+};
 _adaptPropertyToController = new WeakSet();
 adaptPropertyToController_fn = function(property2, value) {
   switch (property2) {
@@ -390,7 +461,6 @@ adaptPropertyToController_fn = function(property2, value) {
       __privateGet(this, _timeSeriesController)[property2] = value;
       break;
   }
-  __privateGet(this, _timeSeriesController).task.run();
 };
 _maybeSliceTimeForStartEnd = new WeakSet();
 maybeSliceTimeForStartEnd_fn = function() {
@@ -415,11 +485,16 @@ handleVariableChange_fn = function(event) {
   this.collectionEndingDateTime = dayjs.utc().format(event.detail.collectionEndingDateTime);
   __privateMethod(this, _maybeSliceTimeForStartEnd, maybeSliceTimeForStartEnd_fn).call(this);
   this.collection = `${event.detail.collectionShortName}_${event.detail.collectionVersion}`;
+  this.collectionLongName = event.detail.collectionLongName;
   this.datasetLandingPage = event.detail.datasetLandingPage;
   this.units = event.detail.units;
   this.variable = event.detail.name;
   this.variableLandingPage = event.detail.variableLandingPage;
   this.variableLongName = event.detail.longName;
+  this.timeInterval = event.detail.timeInterval;
+  if (__privateMethod(this, _checkDataPointLimits, checkDataPointLimits_fn).call(this)) {
+    __privateGet(this, _timeSeriesController).task.run();
+  }
 };
 _handleMapChange = new WeakSet();
 handleMapChange_fn = function(event) {
@@ -427,12 +502,18 @@ handleMapChange_fn = function(event) {
   if (type === "Point") {
     const { latLng } = event.detail;
     this.location = `${latLng.lat.toFixed(4)},${latLng.lng.toFixed(4)}`;
+    if (__privateMethod(this, _checkDataPointLimits, checkDataPointLimits_fn).call(this)) {
+      __privateGet(this, _timeSeriesController).task.run();
+    }
   }
 };
 _handleDateRangeSliderChangeEvent = new WeakSet();
 handleDateRangeSliderChangeEvent_fn = function(event) {
   this.startDate = event.detail.startDate;
   this.endDate = event.detail.endDate;
+  if (__privateMethod(this, _checkDataPointLimits, checkDataPointLimits_fn).call(this)) {
+    __privateGet(this, _timeSeriesController).task.run();
+  }
 };
 _abortDataLoad = new WeakSet();
 abortDataLoad_fn = function() {
@@ -493,6 +574,9 @@ TerraTimeSeries.dependencies = {
 __decorateClass([
   property({ reflect: true })
 ], TerraTimeSeries.prototype, "collection", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraTimeSeries.prototype, "collectionLongName", 2);
 __decorateClass([
   property({ reflect: true })
 ], TerraTimeSeries.prototype, "datasetLandingPage", 2);
@@ -551,6 +635,15 @@ __decorateClass([
 __decorateClass([
   state()
 ], TerraTimeSeries.prototype, "collectionEndingDateTime", 2);
+__decorateClass([
+  state()
+], TerraTimeSeries.prototype, "timeInterval", 2);
+__decorateClass([
+  state()
+], TerraTimeSeries.prototype, "showDataPointWarning", 2);
+__decorateClass([
+  state()
+], TerraTimeSeries.prototype, "estimatedDataPoints", 2);
 __decorateClass([
   state()
 ], TerraTimeSeries.prototype, "activeMenuItem", 2);

package/{cdn/chunks/chunk.34HTZ3BS.js → dist/chunks/chunk.R7ZFWMFX.js}

@@ -1,6 +1,6 @@
 import {
   TerraMap
-} from "./chunk.ZM74J5O7.js";
+} from "./chunk.NE2F3K3V.js";
 
 // src/components/map/map.ts
 var map_default = TerraMap;

package/dist/chunks/{chunk.MERZEEOA.js → chunk.RAGOKALJ.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlot
-} from "./chunk.TGFRBJQ2.js";
+} from "./chunk.TOKOGZDW.js";
 
 // src/react/plot/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.VTKHAV5B.js → chunk.RFLNQ553.js}

@@ -1,27 +1,27 @@
 import {
-  icon_default
-} from "./chunk.5VZI3AW6.js";
-import {
-  FetchController
-} from "./chunk.JOOAZ4RH.js";
-import {
-  giovanni_search_styles_default
-} from "./chunk.KJQZP5RO.js";
+  variable_keyword_search_styles_default
+} from "./chunk.AUB6SKUI.js";
 import {
   clearSelection,
   renderSearchResult,
   walkToOption
-} from "./chunk.EGZMQ7T7.js";
+} from "./chunk.DW23TAF4.js";
+import {
+  FetchController
+} from "./chunk.T3YDWJBU.js";
+import {
+  icon_default
+} from "./chunk.BXMFNRIQ.js";
 import {
   button_default
-} from "./chunk.GRG5Z2VH.js";
+} from "./chunk.MY3D3SMW.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -32,14 +32,14 @@ import {
   __spreadValues
 } from "./chunk.TVFCHGU3.js";
 
-// src/components/giovanni-search/giovanni-search.component.ts
+// src/components/variable-keyword-search/variable-keyword-search.component.ts
 import Fuse from "fuse.js";
 import { LitElement, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
 import { map } from "lit/directives/map.js";
 import { ref } from "lit/directives/ref.js";
 var _combobox, _fetchController, _listbox, _searchEngine, _walker, _handleComboboxChange, _handleOptionClick, _handleKeydown, _manageListboxVisibility, _selectOption, _handleSearch, handleSearch_fn, _clearSearch, clearSearch_fn;
-var _TerraGiovanniSearch = class _TerraGiovanniSearch extends TerraElement {
+var _TerraVariableKeywordSearch = class _TerraVariableKeywordSearch extends TerraElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _handleSearch);
@@ -57,7 +57,7 @@ var _TerraGiovanniSearch = class _TerraGiovanniSearch extends TerraElement {
       useExtendedSearch: true
     };
     this.isExpanded = false;
-    this.query = _TerraGiovanniSearch.initialQuery;
+    this.query = _TerraVariableKeywordSearch.initialQuery;
     this.searchResults = [];
     __privateAdd(this, _handleComboboxChange, (event) => {
       var _a;
@@ -128,7 +128,7 @@ var _TerraGiovanniSearch = class _TerraGiovanniSearch extends TerraElement {
             this.isExpanded = false;
             this.dispatchEvent(new Event("cancel"));
           } else {
-            this.query = _TerraGiovanniSearch.initialQuery;
+            this.query = _TerraVariableKeywordSearch.initialQuery;
           }
           break;
         }
@@ -140,7 +140,7 @@ var _TerraGiovanniSearch = class _TerraGiovanniSearch extends TerraElement {
     __privateAdd(this, _manageListboxVisibility, (event) => {
       const path = event.composedPath();
       const containedThis = path.some(
-        (eventTarget) => eventTarget.localName === _TerraGiovanniSearch.tagName
+        (eventTarget) => eventTarget.localName === _TerraVariableKeywordSearch.tagName
       );
       if (!containedThis) {
         this.isExpanded = false;
@@ -148,7 +148,7 @@ var _TerraGiovanniSearch = class _TerraGiovanniSearch extends TerraElement {
     });
     __privateAdd(this, _selectOption, (option) => {
       this.query = option.id;
-      this.emit("terra-giovanni-search-change", { detail: option.id });
+      this.emit("terra-variable-keyword-search-change", { detail: option.id });
       this.isExpanded = false;
       clearSelection(
         __privateGet(this, _combobox),
@@ -168,7 +168,7 @@ var _TerraGiovanniSearch = class _TerraGiovanniSearch extends TerraElement {
     globalThis.removeEventListener("click", __privateGet(this, _manageListboxVisibility));
   }
   clear() {
-    this.query = _TerraGiovanniSearch.initialQuery;
+    this.query = _TerraVariableKeywordSearch.initialQuery;
   }
   close() {
     this.isExpanded = false;
@@ -302,7 +302,7 @@ handleSearch_fn = function(query) {
 _clearSearch = new WeakSet();
 clearSearch_fn = function() {
   var _a;
-  this.query = _TerraGiovanniSearch.initialQuery;
+  this.query = _TerraVariableKeywordSearch.initialQuery;
   this.emit("terra-search", { detail: this.query });
   clearSelection(
     __privateGet(this, _combobox),
@@ -310,45 +310,45 @@ clearSearch_fn = function() {
   );
   (_a = __privateGet(this, _combobox)) == null ? void 0 : _a.focus();
 };
-_TerraGiovanniSearch.dependencies = {
+_TerraVariableKeywordSearch.dependencies = {
   "terra-button": button_default,
   "terra-icon": icon_default
 };
-_TerraGiovanniSearch.styles = [component_styles_default, giovanni_search_styles_default];
-_TerraGiovanniSearch.shadowRootOptions = __spreadProps(__spreadValues({}, LitElement.shadowRootOptions), {
+_TerraVariableKeywordSearch.styles = [component_styles_default, variable_keyword_search_styles_default];
+_TerraVariableKeywordSearch.shadowRootOptions = __spreadProps(__spreadValues({}, LitElement.shadowRootOptions), {
   delegatesFocus: true
 });
-_TerraGiovanniSearch.tagName = "terra-giovanni-search";
-_TerraGiovanniSearch.initialQuery = "";
+_TerraVariableKeywordSearch.tagName = "terra-variable-keyword-search";
+_TerraVariableKeywordSearch.initialQuery = "";
 __decorateClass([
   property()
-], _TerraGiovanniSearch.prototype, "label", 2);
+], _TerraVariableKeywordSearch.prototype, "label", 2);
 __decorateClass([
   property()
-], _TerraGiovanniSearch.prototype, "placeholder", 2);
+], _TerraVariableKeywordSearch.prototype, "placeholder", 2);
 __decorateClass([
   property({ attribute: "hide-label", type: Boolean })
-], _TerraGiovanniSearch.prototype, "hideLabel", 2);
+], _TerraVariableKeywordSearch.prototype, "hideLabel", 2);
 __decorateClass([
   property({ reflect: false, type: Object })
-], _TerraGiovanniSearch.prototype, "searchConfig", 2);
+], _TerraVariableKeywordSearch.prototype, "searchConfig", 2);
 __decorateClass([
   property()
-], _TerraGiovanniSearch.prototype, "value", 2);
+], _TerraVariableKeywordSearch.prototype, "value", 2);
 __decorateClass([
   state()
-], _TerraGiovanniSearch.prototype, "isExpanded", 2);
+], _TerraVariableKeywordSearch.prototype, "isExpanded", 2);
 __decorateClass([
   state()
-], _TerraGiovanniSearch.prototype, "query", 2);
+], _TerraVariableKeywordSearch.prototype, "query", 2);
 __decorateClass([
   state()
-], _TerraGiovanniSearch.prototype, "searchResults", 2);
+], _TerraVariableKeywordSearch.prototype, "searchResults", 2);
 __decorateClass([
   watch("value")
-], _TerraGiovanniSearch.prototype, "valueChanged", 1);
-var TerraGiovanniSearch = _TerraGiovanniSearch;
+], _TerraVariableKeywordSearch.prototype, "valueChanged", 1);
+var TerraVariableKeywordSearch = _TerraVariableKeywordSearch;
 
 export {
-  TerraGiovanniSearch
+  TerraVariableKeywordSearch
 };

package/{cdn/chunks/chunk.DELCDBUW.js → dist/chunks/chunk.RO6IKZZJ.js}

@@ -1,6 +1,6 @@
 import {
   TerraLoader
-} from "./chunk.R4PWO4RV.js";
+} from "./chunk.3JQPZWUE.js";
 
 // src/react/loader/index.ts
 import * as React from "react";

package/{cdn/chunks/chunk.FQ3DGJP3.js → dist/chunks/chunk.SOQ4CR5P.js}

@@ -1,6 +1,6 @@
 import {
   TerraTimeSeries
-} from "./chunk.GF7FCO7U.js";
+} from "./chunk.PVN5GF75.js";
 
 // src/react/time-series/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.JOOAZ4RH.js → chunk.T3YDWJBU.js}

@@ -4,7 +4,7 @@ import {
   __privateSet
 } from "./chunk.TVFCHGU3.js";
 
-// src/components/giovanni-search/giovanni-search.controller.ts
+// src/components/variable-keyword-search/variable-keyword-search.controller.ts
 import { Task, TaskStatus } from "@lit/task";
 var apiError = new Error(
   "Failed to fetch the data required to make a list of searchable items."

package/dist/chunks/{chunk.TGFRBJQ2.js → chunk.TOKOGZDW.js}

@@ -1,13 +1,13 @@
 import {
   plot_styles_default
-} from "./chunk.W7JRXR2Y.js";
+} from "./chunk.2YRBHDWM.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass,
   __privateAdd,

package/dist/chunks/{chunk.Z3BPGAEC.js → chunk.TOSECFXS.js}

@@ -2,16 +2,16 @@ import {
   FormControlController,
   validValidityState
 } from "./chunk.KAV5L6Z5.js";
-import {
-  button_styles_default
-} from "./chunk.APJOA6RL.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
+import {
+  button_styles_default
+} from "./chunk.APJOA6RL.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AKIZ4D6W.js";
+} from "./chunk.BCU2ZKJ4.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -308,7 +308,6 @@ var TerraButton = class extends TerraElement {
 _handleDialogStateChange = new WeakSet();
 handleDialogStateChange_fn = function(e) {
   if (this.forDialog && this.forDialog === e.target.id) {
-    this.expanded = e.target.open;
   }
 };
 TerraButton.styles = [component_styles_default, button_styles_default];

package/{cdn/chunks/chunk.3YMOUEX5.js → dist/chunks/chunk.U4VDOWEL.js}

@@ -1,6 +1,6 @@
 import {
   TerraCombobox
-} from "./chunk.HLLY7QKL.js";
+} from "./chunk.6P4UBSKH.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = TerraCombobox;

package/dist/chunks/{chunk.TPLUT5FB.js → chunk.UUUQALNS.js}

@@ -1,6 +1,6 @@
 import {
   TerraSkeleton
-} from "./chunk.2OY33DUQ.js";
+} from "./chunk.3K3BQXON.js";
 
 // src/components/skeleton/skeleton.ts
 var skeleton_default = TerraSkeleton;

package/dist/chunks/chunk.W5W4VEOX.js

@@ -0,0 +1,11 @@
+// src/components/date-picker/date-picker.styles.ts
+import { css } from "lit";
+var date_picker_styles_default = css`
+    :host {
+        display: inline-block;
+    }
+`;
+
+export {
+  date_picker_styles_default
+};