@nasa-terra/components 0.0.7 → 0.0.10

package/dist/chunks/chunk.FNGOLJO3.js

@@ -0,0 +1,569 @@
+import {
+  TerraVariableCombobox
+} from "./chunk.76XK3OGD.js";
+import {
+  spatial_picker_default
+} from "./chunk.J5H3VO4T.js";
+import {
+  TimeSeriesController
+} from "./chunk.EP3UVTII.js";
+import {
+  time_series_styles_default
+} from "./chunk.GHDRVO5M.js";
+import {
+  TerraPlot
+} from "./chunk.4VZN3W62.js";
+import {
+  TerraLoader
+} from "./chunk.CETYO6UP.js";
+import {
+  TerraIcon
+} from "./chunk.YOWSDNNI.js";
+import {
+  TerraButton
+} from "./chunk.KU2GHEQC.js";
+import {
+  TerraDateRangeSlider
+} from "./chunk.VUIXHR4Y.js";
+import {
+  watch
+} from "./chunk.Y6OL24QM.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.VDU7JJBS.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod
+} from "./chunk.GKBF7QGR.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, new TimeSeriesController(this));
+    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();
+  }
+  render() {
+    var _a;
+    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}`}
+                @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=${(_a = __privateGet(this, _timeSeriesController).lastTaskValue) != null ? _a : __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([
+  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
+};

package/dist/chunks/chunk.G6IVJK35.js

@@ -0,0 +1,25 @@
+import {
+  TerraGiovanniSearch
+} from "./chunk.3WWANPMA.js";
+
+// src/react/giovanni-search/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import "@lit/react";
+var tagName = "terra-giovanni-search";
+TerraGiovanniSearch.define("terra-giovanni-search");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraGiovanniSearch,
+  react: React,
+  events: {
+    onTerraGiovanniSearchChange: "terra-giovanni-search-change",
+    onTerraSearch: "terra-search"
+  },
+  displayName: "TerraGiovanniSearch"
+});
+var giovanni_search_default = reactWrapper;
+
+export {
+  giovanni_search_default
+};