@nasa-terra/components 0.0.16 → 0.0.19

package/dist/chunks/chunk.RR45MD47.js

@@ -1,11 +0,0 @@
-import {
-  TerraLoader
-} from "./chunk.5UE4SLYC.js";
-
-// src/components/loader/loader.ts
-var loader_default = TerraLoader;
-TerraLoader.define("terra-loader");
-
-export {
-  loader_default
-};

package/dist/chunks/chunk.RYDRC65X.js

@@ -1,11 +0,0 @@
-import {
-  TerraLoader
-} from "./chunk.5LOTY62O.js";
-
-// src/components/loader/loader.ts
-var loader_default = TerraLoader;
-TerraLoader.define("terra-loader");
-
-export {
-  loader_default
-};

package/dist/chunks/chunk.SDCAKUF2.js

@@ -1,11 +0,0 @@
-import {
-  TerraChip
-} from "./chunk.BQKL24VU.js";
-
-// src/components/chip/chip.ts
-var chip_default = TerraChip;
-TerraChip.define("terra-chip");
-
-export {
-  chip_default
-};

package/dist/chunks/chunk.SKHGD7CP.js

@@ -1,578 +0,0 @@
-import {
-  TerraVariableCombobox
-} from "./chunk.EG7EICTO.js";
-import {
-  spatial_picker_default
-} from "./chunk.GPMEZSRZ.js";
-import {
-  TimeSeriesController
-} from "./chunk.U4QKPX6T.js";
-import {
-  time_series_styles_default
-} from "./chunk.GHDRVO5M.js";
-import {
-  TerraPlot
-} from "./chunk.EZTCV6LQ.js";
-import {
-  TerraDateRangeSlider
-} from "./chunk.Q67RNINH.js";
-import {
-  TerraLoader
-} from "./chunk.5UE4SLYC.js";
-import {
-  TerraIcon
-} from "./chunk.CPXWDTHF.js";
-import {
-  TerraButton
-} from "./chunk.U2URIXJW.js";
-import {
-  watch
-} from "./chunk.SK7IZCKP.js";
-import {
-  TerraElement,
-  component_styles_default
-} from "./chunk.7QKG7IRI.js";
-import {
-  __decorateClass,
-  __privateAdd,
-  __privateGet,
-  __privateMethod,
-  __privateSet
-} from "./chunk.TVFCHGU3.js";
-
-// src/components/time-series/time-series.component.ts
-import { TaskStatus } from "@lit/task";
-import dayjs from "dayjs";
-import timezone from "dayjs/plugin/timezone.js";
-import utc from "dayjs/plugin/utc.js";
-import { html } from "lit";
-import { property, query, state } from "lit/decorators.js";
-import { cache } from "lit/directives/cache.js";
-import { downloadImage } from "plotly.js-dist-min";
-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 TerraTimeSeries = class extends TerraElement {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _adaptPropertyToController);
-    /**
-     * The Collection Beginning DateTime changes when a new collection is selected.
-     * We want to auto-select a reasonable slice of time and send a request to the data API, the
-     * same as if the user moved the time slider.
-     * However, if the component has the startDate or endDate set externally, don't override that;
-     * this is an init-only action.
-     */
-    __privateAdd(this, _maybeSliceTimeForStartEnd);
-    __privateAdd(this, _handleVariableChange);
-    __privateAdd(this, _handleMapChange);
-    /**
-     * anytime the date range slider changes, update the start and end date
-     */
-    __privateAdd(this, _handleDateRangeSliderChangeEvent);
-    /**
-     * aborts the underlying data loading task, which cancels the network request
-     */
-    __privateAdd(this, _abortDataLoad);
-    /**
-     * TODO:
-     * [x] re-enable downloads here
-     * [x] get live data from Giovanni
-     * [x] display required information in information menuitem
-     * [x] ask about adding help links
-     * [ ] see what can be simplified from downloadCSV
-     */
-    __privateAdd(this, _downloadCSV);
-    __privateAdd(this, _convertToCSV);
-    __privateAdd(this, _downloadPNG);
-    __privateAdd(this, _handleActiveMenuItem);
-    __privateAdd(this, _timeSeriesController, void 0);
-    this.activeMenuItem = null;
-  }
-  handleCollectionUpdate(_oldValue, newValue) {
-    __privateMethod(this, _adaptPropertyToController, adaptPropertyToController_fn).call(this, "collection", newValue);
-  }
-  handlevariableUpdate(_oldValue, newValue) {
-    __privateMethod(this, _adaptPropertyToController, adaptPropertyToController_fn).call(this, "variable", newValue);
-  }
-  handleStartDateUpdate(_oldValue, newValue) {
-    __privateMethod(this, _adaptPropertyToController, adaptPropertyToController_fn).call(this, "startDate", newValue);
-  }
-  handleEndDateUpdate(_oldValue, newValue) {
-    __privateMethod(this, _adaptPropertyToController, adaptPropertyToController_fn).call(this, "endDate", newValue);
-  }
-  handleLocationUpdate(_oldValue, newValue) {
-    __privateMethod(this, _adaptPropertyToController, adaptPropertyToController_fn).call(this, "location", newValue);
-  }
-  handleFocus(_oldValue, newValue) {
-    if (newValue === null) {
-      return;
-    }
-    this.menu.focus();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    __privateSet(this, _timeSeriesController, new TimeSeriesController(this, this.bearerToken));
-  }
-  render() {
-    var _a, _b;
-    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}`}
-                .bearerToken=${(_a = this.bearerToken) != null ? _a : null}
-                @terra-combobox-change="${__privateMethod(this, _handleVariableChange, handleVariableChange_fn)}"
-            ></terra-variable-combobox>
-
-            <terra-spatial-picker
-                initial-value=${this.location}
-                exportparts="map:spatial-picker__map, leaflet-bbox:spatial-picker__leaflet-bbox, leaflet-point:spatial-picker__leaflet-point"
-                label="Select Point"
-                @terra-map-change=${__privateMethod(this, _handleMapChange, handleMapChange_fn)}
-            ></terra-spatial-picker>
-
-            <div class="plot-container">
-                ${cache(
-      this.variable ? html`
-                              <header>
-                                  <h2 class="title">
-                                      ${this.variableLongName}
-                                  </h2>
-
-                                  <div class="toggles">
-                                      <terra-button
-                                          circle
-                                          outline
-                                          aria-expanded=${this.activeMenuItem === "information"}
-                                          aria-controls="menu"
-                                          aria-haspopup="true"
-                                          class="toggle"
-                                          @click=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
-                                          data-menu-name="information"
-                                      >
-                                          <span class="sr-only">Information for ${this.variableLongName}</span>
-
-                                          <terra-icon
-                                              name="outline-information-circle"
-                                              library="heroicons"
-                                              font-size="1.5em"
-                                          ></terra-icon>
-                                      </terra-button>
-
-                                      <terra-button
-                                          circle
-                                          outline
-                                          aria-expanded=${this.activeMenuItem === "download"}
-                                          aria-controls="menu"
-                                          aria-haspopup="true"
-                                          class="toggle"
-                                          @click=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
-                                          data-menu-name="download"
-                                      >
-                                          <span class="sr-only">Download options for ${this.variableLongName}</span>
-
-                                          <terra-icon
-                                              name="outline-arrow-down-tray"
-                                              library="heroicons"
-                                              font-size="1.5em"
-                                          ></terra-icon>
-                                      </terra-button>
-
-                                      <terra-button
-                                          circle
-                                          outline
-                                          aria-expanded=${this.activeMenuItem === "help"}
-                                          aria-controls="menu"
-                                          aria-haspopup="true"
-                                          class="toggle"
-                                          @click=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
-                                          data-menu-name="help"
-                                      >
-                                          <span class="sr-only">Help link for ${this.variableLongName}</span>
-
-                                          <terra-icon
-                                              name="outline-question-mark-circle"
-                                              library="heroicons"
-                                              font-size="1.5em"
-                                          ></terra-icon>
-                                      </terra-button>
-                                  </div>
-                              </header>
-
-                              <menu
-                                  role="menu"
-                                  id="menu"
-                                  data-expanded=${this.activeMenuItem !== null}
-                                  tabindex="-1"
-                              >
-                                  <li
-                                      role="menuitem"
-                                      ?hidden=${this.activeMenuItem !== "information"}
-                                  >
-                                      <h3 class="sr-only">Information</h3>
-
-                                      <dl>
-                                          <dt>Variable Longname</dt>
-                                          <dd>${this.variableLongName}</dd>
-
-                                          <dt>Variable Shortname</dt>
-                                          <dd>${this.variable}</dd>
-
-                                          <dt>Units</dt>
-                                          <dd>
-                                              <code>${this.units}</code>
-                                          </dd>
-
-                                          <dt>Dataset Information</dt>
-                                          <dd>
-                                              <a
-                                                  href=${this.datasetLandingPage}
-                                                  rel="noopener noreffer"
-                                                  target="_blank"
-                                                  >Dataset Summary
-
-                                                  <terra-icon
-                                                      name="outline-arrow-top-right-on-square"
-                                                      library="heroicons"
-                                                  ></terra-icon>
-                                              </a>
-                                          </dd>
-
-                                          <dt>Variable Information</dt>
-                                          <dd>
-                                              <a
-                                                  href=${this.variableLandingPage}
-                                                  rel="noopener noreffer"
-                                                  target="_blank"
-                                                  >Variable Glossary
-
-                                                  <terra-icon
-                                                      name="outline-arrow-top-right-on-square"
-                                                      library="heroicons"
-                                                  ></terra-icon>
-                                              </a>
-                                          </dd>
-                                      </dl>
-                                  </li>
-
-                                  <li
-                                      role="menuitem"
-                                      ?hidden=${this.activeMenuItem !== "download"}
-                                  >
-                                      <h3 class="sr-only">Download Options</h3>
-
-                                      <p>
-                                          This plot can be downloaded as either a
-                                          <abbr title="Portable Network Graphic"
-                                              >PNG</abbr
-                                          >
-                                          image or
-                                          <abbr title="Comma-Separated Value"
-                                              >CSV</abbr
-                                          >
-                                          data.
-                                      </p>
-
-                                      <terra-button
-                                          outline
-                                          variant="default"
-                                          @click=${__privateMethod(this, _downloadPNG, downloadPNG_fn)}
-                                      >
-                                          <span class="sr-only"
-                                              >Download Plot Data as
-                                          </span>
-                                          PNG
-                                          <terra-icon
-                                              slot="prefix"
-                                              name="outline-photo"
-                                              library="heroicons"
-                                              font-size="1.5em"
-                                          ></terra-icon>
-                                      </terra-button>
-
-                                      <terra-button
-                                          outline
-                                          variant="default"
-                                          @click=${__privateMethod(this, _downloadCSV, downloadCSV_fn)}
-                                      >
-                                          <span class="sr-only"
-                                              >Download Plot Data as
-                                          </span>
-                                          CSV
-                                          <terra-icon
-                                              slot="prefix"
-                                              name="outline-document-chart-bar"
-                                              library="heroicons"
-                                              font-size="1.5em"
-                                          ></terra-icon>
-                                      </terra-button>
-                                  </li>
-
-                                  <li
-                                      role="menuitem"
-                                      ?hidden=${this.activeMenuItem !== "help"}
-                                  >
-                                      <h3 class="sr-only">Help Links</h3>
-                                      <ul>
-                                          <li>
-                                              <a href="https://forum.earthdata.nasa.gov/viewforum.php?f=7&DAAC=3" rel"noopener noreffer">Earthdata User Forum
-                                                  <terra-icon
-                                                      name="outline-arrow-top-right-on-square"
-                                                      library="heroicons"
-                                                  ></terra-icon>
-                                              </a>
-                                          </li>
-                                      </ul>
-                                  </li>
-                              </menu>
-                          ` : html`<div class="spacer"></div>`
-    )}
-
-                <terra-plot
-                    exportparts="base:plot__base, plot-title:plot__title"
-                    .data=${(_b = __privateGet(this, _timeSeriesController).lastTaskValue) != null ? _b : __privateGet(this, _timeSeriesController).emptyPlotData}
-                    .layout="${{
-      xaxis: {
-        title: "Time",
-        showgrid: false,
-        zeroline: false
-      },
-      yaxis: {
-        title: this.variableLongName && this.units ? `${this.variableLongName}, ${this.units}` : null,
-        showline: false
-      },
-      title: {
-        text: this.collection && this.location ? `${this.collection} @ ${this.location}` : null
-      }
-    }}"
-                    .config=${{
-      displayModeBar: true,
-      displaylogo: false,
-      modeBarButtonsToRemove: ["toImage", "zoom2d", "resetScale2d"],
-      responsive: true
-    }}
-                ></terra-plot>
-            </div>
-
-            <terra-date-range-slider
-                exportparts="slider:date-range-slider__slider"
-                min-date=${this.collectionBeginningDateTime}
-                max-date=${this.collectionEndingDateTime}
-                start-date=${this.startDate}
-                end-date=${this.endDate}
-                @terra-date-range-change="${__privateMethod(this, _handleDateRangeSliderChangeEvent, handleDateRangeSliderChangeEvent_fn)}"
-            ></terra-date-range-slider>
-
-            <dialog
-                ?open=${__privateGet(this, _timeSeriesController).task.status === TaskStatus.PENDING}
-            >
-                <terra-loader indeterminate></terra-loader>
-                <p>Plotting ${this.collection} ${this.variable}&hellip;</p>
-                <terra-button @click=${__privateMethod(this, _abortDataLoad, abortDataLoad_fn)}>Cancel</terra-button>
-            </dialog>
-        `;
-  }
-};
-_timeSeriesController = new WeakMap();
-_adaptPropertyToController = new WeakSet();
-adaptPropertyToController_fn = function(property2, value) {
-  switch (property2) {
-    case "startDate":
-    case "endDate":
-      __privateGet(this, _timeSeriesController)[property2] = dayjs.utc(value).toDate();
-      break;
-    case "location":
-      const [lat, lon] = value.split(",");
-      __privateGet(this, _timeSeriesController)[property2] = `${lon},%20${lat}`;
-      break;
-    default:
-      __privateGet(this, _timeSeriesController)[property2] = value;
-      break;
-  }
-  __privateGet(this, _timeSeriesController).task.run();
-};
-_maybeSliceTimeForStartEnd = new WeakSet();
-maybeSliceTimeForStartEnd_fn = function() {
-  const hasExternallySetDates = !!this.startDate || !!this.endDate;
-  const hasBothDatesFromCollection = !!this.collectionBeginningDateTime && !!this.collectionEndingDateTime;
-  if (hasExternallySetDates || !hasBothDatesFromCollection) {
-    return;
-  }
-  const diff = Math.abs(
-    new Date(this.collectionEndingDateTime).getTime() - new Date(this.collectionBeginningDateTime).getTime()
-  );
-  const threeQuarterRange = Math.floor(diff * 0.75);
-  const startDate = Math.abs(
-    new Date(this.collectionBeginningDateTime).getTime() + threeQuarterRange
-  );
-  this.startDate = dayjs.utc(startDate).format();
-  this.endDate = dayjs.utc(this.collectionEndingDateTime).format();
-};
-_handleVariableChange = new WeakSet();
-handleVariableChange_fn = function(event) {
-  this.collectionBeginningDateTime = dayjs.utc().format(event.detail.collectionBeginningDateTime);
-  this.collectionEndingDateTime = dayjs.utc().format(event.detail.collectionEndingDateTime);
-  __privateMethod(this, _maybeSliceTimeForStartEnd, maybeSliceTimeForStartEnd_fn).call(this);
-  this.collection = `${event.detail.collectionShortName}_${event.detail.collectionVersion}`;
-  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;
-};
-_handleMapChange = new WeakSet();
-handleMapChange_fn = function(event) {
-  const type = event.detail.geoJson.geometry.type;
-  if (type === "Point") {
-    const { latLng } = event.detail;
-    this.location = `${latLng.lat.toFixed(4)},${latLng.lng.toFixed(4)}`;
-  }
-};
-_handleDateRangeSliderChangeEvent = new WeakSet();
-handleDateRangeSliderChangeEvent_fn = function(event) {
-  this.startDate = event.detail.startDate;
-  this.endDate = event.detail.endDate;
-};
-_abortDataLoad = new WeakSet();
-abortDataLoad_fn = function() {
-  var _a;
-  (_a = __privateGet(this, _timeSeriesController).task) == null ? void 0 : _a.abort();
-};
-_downloadCSV = new WeakSet();
-downloadCSV_fn = function(_event) {
-  var _a;
-  const controllerData = (_a = __privateGet(this, _timeSeriesController).lastTaskValue) != null ? _a : __privateGet(this, _timeSeriesController).emptyPlotData;
-  let plotData = [];
-  controllerData.forEach((plot, index) => {
-    plotData[index] = plot;
-  });
-  const csvData = plotData.map((trace) => {
-    return trace.x.map((x, i) => {
-      return {
-        x,
-        y: trace.y[i]
-      };
-    });
-  }).flat();
-  const csv = __privateMethod(this, _convertToCSV, convertToCSV_fn).call(this, csvData);
-  csv;
-};
-_convertToCSV = new WeakSet();
-convertToCSV_fn = function(data) {
-  const header = Object.keys(data[0]).join(",") + "\n";
-  const rows = data.map((obj) => Object.values(obj).join(",")).join("\n");
-  return header + rows;
-};
-_downloadPNG = new WeakSet();
-downloadPNG_fn = function(_event) {
-  var _a;
-  downloadImage((_a = this.plot) == null ? void 0 : _a.base, {
-    filename: `${this.collection}_${this.variable}`,
-    format: "png",
-    width: 1920,
-    height: 1080
-  });
-};
-_handleActiveMenuItem = new WeakSet();
-handleActiveMenuItem_fn = function(event) {
-  const button = event.currentTarget;
-  const menuName = button.dataset.menuName;
-  this.activeMenuItem = menuName === this.activeMenuItem ? null : menuName;
-};
-TerraTimeSeries.styles = [component_styles_default, time_series_styles_default];
-TerraTimeSeries.dependencies = {
-  "terra-plot": TerraPlot,
-  "terra-date-range-slider": TerraDateRangeSlider,
-  "terra-spatial-picker": spatial_picker_default,
-  "terra-variable-combobox": TerraVariableCombobox,
-  "terra-loader": TerraLoader,
-  "terra-icon": TerraIcon,
-  "terra-button": TerraButton
-};
-__decorateClass([
-  property({ reflect: true })
-], TerraTimeSeries.prototype, "collection", 2);
-__decorateClass([
-  property({ reflect: true })
-], TerraTimeSeries.prototype, "datasetLandingPage", 2);
-__decorateClass([
-  property({ reflect: true })
-], TerraTimeSeries.prototype, "variable", 2);
-__decorateClass([
-  property({ reflect: true })
-], TerraTimeSeries.prototype, "variableLandingPage", 2);
-__decorateClass([
-  property({ reflect: true })
-], TerraTimeSeries.prototype, "variableLongName", 2);
-__decorateClass([
-  property({
-    attribute: "start-date",
-    reflect: true
-  })
-], TerraTimeSeries.prototype, "startDate", 2);
-__decorateClass([
-  property({
-    attribute: "end-date",
-    reflect: true
-  })
-], TerraTimeSeries.prototype, "endDate", 2);
-__decorateClass([
-  property({
-    reflect: true
-  })
-], TerraTimeSeries.prototype, "location", 2);
-__decorateClass([
-  property({
-    reflect: true
-  })
-], TerraTimeSeries.prototype, "units", 2);
-__decorateClass([
-  property({ attribute: "bearer-token", reflect: false })
-], TerraTimeSeries.prototype, "bearerToken", 2);
-__decorateClass([
-  query("terra-date-range-slider")
-], TerraTimeSeries.prototype, "dateRangeSlider", 2);
-__decorateClass([
-  query("terra-plot")
-], TerraTimeSeries.prototype, "plot", 2);
-__decorateClass([
-  query("terra-spatial-picker")
-], TerraTimeSeries.prototype, "spatialPicker", 2);
-__decorateClass([
-  query("terra-variable-combobo")
-], TerraTimeSeries.prototype, "variableCombobox", 2);
-__decorateClass([
-  query("#menu")
-], TerraTimeSeries.prototype, "menu", 2);
-__decorateClass([
-  state()
-], TerraTimeSeries.prototype, "collectionBeginningDateTime", 2);
-__decorateClass([
-  state()
-], TerraTimeSeries.prototype, "collectionEndingDateTime", 2);
-__decorateClass([
-  state()
-], TerraTimeSeries.prototype, "activeMenuItem", 2);
-__decorateClass([
-  watch("collection")
-], TerraTimeSeries.prototype, "handleCollectionUpdate", 1);
-__decorateClass([
-  watch("variable")
-], TerraTimeSeries.prototype, "handlevariableUpdate", 1);
-__decorateClass([
-  watch("startDate")
-], TerraTimeSeries.prototype, "handleStartDateUpdate", 1);
-__decorateClass([
-  watch("endDate")
-], TerraTimeSeries.prototype, "handleEndDateUpdate", 1);
-__decorateClass([
-  watch("location")
-], TerraTimeSeries.prototype, "handleLocationUpdate", 1);
-__decorateClass([
-  watch("activeMenuItem")
-], TerraTimeSeries.prototype, "handleFocus", 1);
-
-export {
-  TerraTimeSeries
-};