@nasa-terra/components 0.0.42 → 0.0.44

package/dist/chunks/chunk.LCOAWJU6.js

@@ -0,0 +1,588 @@
+import {
+  TimeSeriesController
+} from "./chunk.7OWQQEAP.js";
+import {
+  time_series_styles_default
+} from "./chunk.K2IRF2QI.js";
+import {
+  TerraPlot
+} from "./chunk.KKSEBQNV.js";
+import {
+  TerraLoader
+} from "./chunk.V626KHDN.js";
+import {
+  TerraIcon
+} from "./chunk.QKGUST2I.js";
+import {
+  GiovanniVariableCatalog
+} from "./chunk.TFI3UXXB.js";
+import {
+  TerraButton
+} from "./chunk.IQ2JFSLH.js";
+import {
+  watch
+} from "./chunk.SK7IZCKP.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.VYB75K7O.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.TVFCHGU3.js";
+
+// src/components/time-series/time-series.component.ts
+import { cache } from "lit/directives/cache.js";
+import { downloadImage } from "plotly.js-dist-min";
+import { html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { Task, TaskStatus } from "@lit/task";
+var _timeSeriesController, _catalog, _fetchVariableTask, _confirmDataPointWarning, confirmDataPointWarning_fn, _cancelDataPointWarning, cancelDataPointWarning_fn, _abortDataLoad, abortDataLoad_fn, _downloadCSV, downloadCSV_fn, _convertToCSV, convertToCSV_fn, _downloadPNG, downloadPNG_fn, _handleActiveMenuItem, handleActiveMenuItem_fn, _handleMenuLeave, handleMenuLeave_fn, _getVariableEntryId, getVariableEntryId_fn, _getYAxisLabel, getYAxisLabel_fn, _renderInfoPanel, renderInfoPanel_fn, _renderDownloadPanel, renderDownloadPanel_fn, _renderHelpPanel, renderHelpPanel_fn, _renderJupyterNotebookPanel, renderJupyterNotebookPanel_fn;
+var TerraTimeSeries = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _confirmDataPointWarning);
+    __privateAdd(this, _cancelDataPointWarning);
+    /**
+     * aborts the underlying data loading task, which cancels the network request
+     */
+    __privateAdd(this, _abortDataLoad);
+    __privateAdd(this, _downloadCSV);
+    __privateAdd(this, _convertToCSV);
+    __privateAdd(this, _downloadPNG);
+    __privateAdd(this, _handleActiveMenuItem);
+    __privateAdd(this, _handleMenuLeave);
+    __privateAdd(this, _getVariableEntryId);
+    __privateAdd(this, _getYAxisLabel);
+    __privateAdd(this, _renderInfoPanel);
+    __privateAdd(this, _renderDownloadPanel);
+    __privateAdd(this, _renderHelpPanel);
+    __privateAdd(this, _renderJupyterNotebookPanel);
+    __privateAdd(this, _timeSeriesController, void 0);
+    this.showDataPointWarning = false;
+    this.estimatedDataPoints = 0;
+    this.activeMenuItem = null;
+    __privateAdd(this, _catalog, new GiovanniVariableCatalog());
+    // @ts-expect-error
+    __privateAdd(this, _fetchVariableTask, new Task(this, {
+      task: async (_args, { signal }) => {
+        var _a, _b, _c, _d;
+        const variableEntryId = __privateMethod(this, _getVariableEntryId, getVariableEntryId_fn).call(this);
+        console.debug("fetch variable ", variableEntryId);
+        if (!variableEntryId) {
+          return;
+        }
+        const variable = await __privateGet(this, _catalog).getVariable(variableEntryId, {
+          signal
+        });
+        console.debug("found variable ", variable);
+        if (!variable) {
+          return;
+        }
+        this.startDate = (_b = this.startDate) != null ? _b : (_a = variable.exampleInitialStartDate) == null ? void 0 : _a.toISOString();
+        this.endDate = (_d = this.endDate) != null ? _d : (_c = variable.exampleInitialEndDate) == null ? void 0 : _c.toISOString();
+        this.catalogVariable = variable;
+      },
+      args: () => [this.variableEntryId, this.collection, this.variable]
+    }));
+  }
+  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`
+            <div class="plot-container">
+                ${cache(
+      this.catalogVariable ? html`
+                              <header>
+                                  <h2 class="title">
+                                      ${this.catalogVariable.dataFieldLongName}
+                                  </h2>
+
+                                  <div class="toggles">
+                                      <terra-button
+                                          circle
+                                          outline
+                                          aria-expanded=${this.activeMenuItem === "information"}
+                                          aria-controls="menu"
+                                          aria-haspopup="true"
+                                          class="toggle"
+                                          @mouseenter=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                          data-menu-name="information"
+                                      >
+                                          <span class="sr-only"
+                                              >Information for
+                                              ${this.catalogVariable.dataFieldLongName}</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"
+                                          @mouseenter=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                          data-menu-name="download"
+                                      >
+                                          <span class="sr-only"
+                                              >Download options for
+                                              ${this.catalogVariable.dataFieldLongName}</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"
+                                          @mouseenter=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                          data-menu-name="help"
+                                      >
+                                          <span class="sr-only"
+                                              >Help link for
+                                              ${this.catalogVariable.dataFieldLongName}</span
+                                          >
+
+                                          <terra-icon
+                                              name="outline-question-mark-circle"
+                                              library="heroicons"
+                                              font-size="1.5em"
+                                          ></terra-icon>
+                                      </terra-button>
+
+                                      <terra-button
+                                          circle
+                                          outline
+                                          aria-expanded=${this.activeMenuItem === "jupyter"}
+                                          aria-controls="menu"
+                                          aria-haspopup="true"
+                                          class="toggle"
+                                          @mouseenter=${__privateMethod(this, _handleActiveMenuItem, handleActiveMenuItem_fn)}
+                                          data-menu-name="jupyter"
+                                      >
+                                          <span class="sr-only"
+                                              >Open in Jupyter Notebook for
+                                              ${this.catalogVariable.dataFieldLongName}</span
+                                          >
+
+                                          <terra-icon
+                                              name="outline-code-bracket-square"
+                                              library="heroicons"
+                                              font-size="1.5em"
+                                          ></terra-icon>
+                                      </terra-button>
+                                  </div>
+
+                                  <menu
+                                      role="menu"
+                                      id="menu"
+                                      data-expanded=${this.activeMenuItem !== null}
+                                      tabindex="-1"
+                                      @mouseleave=${__privateMethod(this, _handleMenuLeave, handleMenuLeave_fn)}
+                                  >
+                                      <li
+                                          role="menuitem"
+                                          ?hidden=${this.activeMenuItem !== "information"}
+                                      >
+                                          ${__privateMethod(this, _renderInfoPanel, renderInfoPanel_fn).call(this)}
+                                      </li>
+
+                                      <li
+                                          role="menuitem"
+                                          ?hidden=${this.activeMenuItem !== "download"}
+                                      >
+                                          ${__privateMethod(this, _renderDownloadPanel, renderDownloadPanel_fn).call(this)}
+                                      </li>
+
+                                      <li
+                                          role="menuitem"
+                                          ?hidden=${this.activeMenuItem !== "help"}
+                                      >
+                                          ${__privateMethod(this, _renderHelpPanel, renderHelpPanel_fn).call(this)}
+                                      </li>
+
+                                      <li
+                                          role="menuitem"
+                                          ?hidden=${this.activeMenuItem !== "jupyter"}
+                                      >
+                                          ${__privateMethod(this, _renderJupyterNotebookPanel, renderJupyterNotebookPanel_fn).call(this)}
+                                      </li>
+                                  </menu>
+                              </header>
+                          ` : 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: __privateMethod(this, _getYAxisLabel, getYAxisLabel_fn).call(this),
+        showline: false
+      },
+      title: {
+        text: this.catalogVariable && this.location ? `${this.catalogVariable.dataProductShortName} @ ${this.location}` : null
+      }
+    }}"
+                    .config=${{
+      displayModeBar: true,
+      displaylogo: false,
+      modeBarButtonsToRemove: ["toImage", "zoom2d", "resetScale2d"],
+      responsive: true
+    }}
+                ></terra-plot>
+            </div>
+
+            <!-- DATE RANGE SLIDER WAS HERE -->
+
+            <dialog
+                ?open=${__privateGet(this, _timeSeriesController).task.status === TaskStatus.PENDING}
+            >
+                <terra-loader indeterminate></terra-loader>
+                <p>Plotting ${(_b = this.catalogVariable) == null ? void 0 : _b.dataFieldId}&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();
+_catalog = new WeakMap();
+_fetchVariableTask = new WeakMap();
+_confirmDataPointWarning = new WeakSet();
+confirmDataPointWarning_fn = function() {
+  __privateGet(this, _timeSeriesController).confirmDataPointWarning();
+  __privateGet(this, _timeSeriesController).task.run();
+};
+_cancelDataPointWarning = new WeakSet();
+cancelDataPointWarning_fn = function() {
+  this.showDataPointWarning = false;
+};
+_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, _b;
+  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);
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.setAttribute("href", url);
+  const variableName = ((_b = this.catalogVariable) == null ? void 0 : _b.dataFieldId) || "time-series-data";
+  const locationStr = this.location ? `_${this.location.replace(/,/g, "_")}` : "";
+  const dateRange = this.startDate && this.endDate ? `_${this.startDate.split("T")[0]}_to_${this.endDate.split("T")[0]}` : "";
+  const filename = `${variableName}${locationStr}${dateRange}.csv`;
+  link.setAttribute("download", filename);
+  link.style.visibility = "hidden";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+_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.catalogVariable.dataFieldId,
+    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;
+};
+_handleMenuLeave = new WeakSet();
+handleMenuLeave_fn = function() {
+  this.activeMenuItem = null;
+};
+_getVariableEntryId = new WeakSet();
+getVariableEntryId_fn = function() {
+  var _a;
+  if (!this.variableEntryId && !(this.collection && this.variable)) {
+    return;
+  }
+  return (_a = this.variableEntryId) != null ? _a : `${this.collection}_${this.variable}`;
+};
+_getYAxisLabel = new WeakSet();
+getYAxisLabel_fn = function() {
+  if (!this.catalogVariable) {
+    return;
+  }
+  return [
+    this.catalogVariable.dataFieldLongName,
+    this.catalogVariable.dataFieldUnits
+  ].filter(Boolean).join(", ");
+};
+_renderInfoPanel = new WeakSet();
+renderInfoPanel_fn = function() {
+  var _a;
+  return html`
+            <h3 class="sr-only">Information</h3>
+
+            <dl>
+                <dt>Variable Longname</dt>
+                <dd>${this.catalogVariable.dataFieldLongName}</dd>
+
+                <dt>Variable Shortname</dt>
+                <dd>
+                    ${(_a = this.catalogVariable.dataFieldShortName) != null ? _a : this.catalogVariable.dataFieldAccessName}
+                </dd>
+
+                <dt>Units</dt>
+                <dd>
+                    <code>${this.catalogVariable.dataFieldUnits}</code>
+                </dd>
+
+                <dt>Dataset Information</dt>
+                <dd>
+                    <a
+                        href=${this.catalogVariable.dataProductDescriptionUrl}
+                        rel="noopener noreffer"
+                        target="_blank"
+                        >${this.catalogVariable.dataProductLongName}
+
+                        <terra-icon
+                            name="outline-arrow-top-right-on-square"
+                            library="heroicons"
+                        ></terra-icon>
+                    </a>
+                </dd>
+
+                <dt>Variable Information</dt>
+                <dd>
+                    <a
+                        href=${this.catalogVariable.dataFieldDescriptionUrl}
+                        rel="noopener noreffer"
+                        target="_blank"
+                        >Variable Glossary
+
+                        <terra-icon
+                            name="outline-arrow-top-right-on-square"
+                            library="heroicons"
+                        ></terra-icon>
+                    </a>
+                </dd>
+            </dl>
+        `;
+};
+_renderDownloadPanel = new WeakSet();
+renderDownloadPanel_fn = function() {
+  return html`
+            <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>
+        `;
+};
+_renderHelpPanel = new WeakSet();
+renderHelpPanel_fn = function() {
+  return html`
+            <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>
+
+                                      
+        `;
+};
+_renderJupyterNotebookPanel = new WeakSet();
+renderJupyterNotebookPanel_fn = function() {
+  return html`
+            <h3 class="sr-only">Jupyter Notebook Options</h3>
+            <p>Open this plot in a Jupyter Notebook to explore the data further.</p>
+            <a
+                href=${`https://notebooks.gesdisc.eosdis.nasa.gov/hub/user-redirect/git-pull?repo=https://github.com/nasa/GESDISC-Notebooks&branch=main&subPath=TimeSeries/${this.catalogVariable.dataFieldId}.ipynb`}
+                rel="noopener noreferrer"
+                target="_blank"
+            >
+                Open in Jupyter Notebook
+                <terra-icon
+                    name="outline-arrow-top-right-on-square"
+                    library="heroicons"
+                ></terra-icon>
+            </a>
+        `;
+};
+TerraTimeSeries.styles = [component_styles_default, time_series_styles_default];
+TerraTimeSeries.dependencies = {
+  "terra-plot": TerraPlot,
+  "terra-loader": TerraLoader,
+  "terra-icon": TerraIcon,
+  "terra-button": TerraButton
+};
+__decorateClass([
+  property({ attribute: "variable-entry-id", reflect: true })
+], TerraTimeSeries.prototype, "variableEntryId", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraTimeSeries.prototype, "collection", 2);
+__decorateClass([
+  property({ reflect: true })
+], TerraTimeSeries.prototype, "variable", 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({ attribute: "bearer-token", reflect: false })
+], TerraTimeSeries.prototype, "bearerToken", 2);
+__decorateClass([
+  query("terra-plot")
+], TerraTimeSeries.prototype, "plot", 2);
+__decorateClass([
+  query("#menu")
+], TerraTimeSeries.prototype, "menu", 2);
+__decorateClass([
+  state()
+], TerraTimeSeries.prototype, "catalogVariable", 2);
+__decorateClass([
+  state()
+], TerraTimeSeries.prototype, "showDataPointWarning", 2);
+__decorateClass([
+  state()
+], TerraTimeSeries.prototype, "estimatedDataPoints", 2);
+__decorateClass([
+  state()
+], TerraTimeSeries.prototype, "activeMenuItem", 2);
+__decorateClass([
+  watch("activeMenuItem")
+], TerraTimeSeries.prototype, "handleFocus", 1);
+
+export {
+  TerraTimeSeries
+};

package/dist/chunks/{chunk.FUNHBD3Q.js → chunk.LF3ESETA.js}

@@ -1,6 +1,6 @@
 import {
   TerraDateRangeSlider
-} from "./chunk.7V3PWSYC.js";
+} from "./chunk.VHF2RWLV.js";
 
 // src/components/date-range-slider/date-range-slider.ts
 var date_range_slider_default = TerraDateRangeSlider;

package/dist/chunks/{chunk.H4IGXIVH.js → chunk.LFVSYBJ6.js}

@@ -1,6 +1,6 @@
 import {
   TerraBrowseVariables
-} from "./chunk.5C3BK3DD.js";
+} from "./chunk.M4PEGCWF.js";
 
 // src/react/browse-variables/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.5AOSWMDT.js → chunk.LFZXSVJS.js}

@@ -1,6 +1,6 @@
 import {
   cherryPickDocInfo
-} from "./chunk.5LMWCV76.js";
+} from "./chunk.V3YFBP3T.js";
 import {
   __privateAdd,
   __privateGet,

package/dist/chunks/{chunk.6BC7KDU7.js → chunk.LJOF4Z47.js}

@@ -1,9 +1,9 @@
-import {
-  FetchController
-} from "./chunk.5AOSWMDT.js";
 import {
   variable_combobox_styles_default
 } from "./chunk.HJGC45MW.js";
+import {
+  FetchController
+} from "./chunk.LFZXSVJS.js";
 import {
   adaptValueToVariableMetadata,
   clearSelection,
@@ -11,20 +11,20 @@ import {
   removeEmptyCollections,
   renderSearchResult,
   walkToOption
-} from "./chunk.5LMWCV76.js";
+} from "./chunk.V3YFBP3T.js";
 import {
   icon_default
-} from "./chunk.SDW6HUGX.js";
+} from "./chunk.RC5E6NBB.js";
 import {
   button_default
-} from "./chunk.YXL3ZYZS.js";
+} from "./chunk.EBTGXENT.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.7QFQWJUX.js";
+} from "./chunk.VYB75K7O.js";
 import {
   __decorateClass,
   __privateAdd,