@nasa-terra/components 0.0.7 → 0.0.10

package/README.md

@@ -38,11 +38,18 @@ To scaffold a new component, run the following command, replacing `terra-tag-nam
 npm run create terra-tag-name
 ```
 
-This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
+This will generate source files, a stylesheet, a Jupyter widget, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar. Do a `git status` to see all the changes this command made.
 
-### Contributing
+### Testing Components in Jupyter Lab
 
-Terra UI Components is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
+Install the `uv` package manager (https://github.com/astral-sh/uv), it's a lightweight tool that makes working with virtual environments and packages much easier.
+
+Then run the following:
+
+-   `uv venv` - create a virtual environment (only have to do this the first time)
+-   `source .venv/bin/activate` - activate it
+-   `uv pip install -e ".[dev]"` - install dependencies (see pyproject.toml)
+-   `./.venv/bin/jupyter lab` - spins up Jupyter lab and should open the browser for you
 
 ## License
 

package/cdn/chunks/{chunk.RZV7PTZZ.js → chunk.3IJDKBGJ.js}

@@ -1,6 +1,6 @@
 import {
   TerraButton
-} from "./chunk.P3N5PW3F.js";
+} from "./chunk.4AB3LJPJ.js";
 
 // src/components/button/button.ts
 var button_default = TerraButton;

package/cdn/chunks/{chunk.XAVEBGFY.js → chunk.3W4F6TQ2.js}

@@ -1,6 +1,6 @@
 import {
   TerraDateRangeSlider
-} from "./chunk.GMWFNQ7Q.js";
+} from "./chunk.FCJIZOLN.js";
 
 // src/react/date-range-slider/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.P3N5PW3F.js → chunk.4AB3LJPJ.js}

@@ -9,17 +9,17 @@ import {
 } from "./chunk.BT4IJCQK.js";
 import {
   button_styles_default
-} from "./chunk.NTB4EIFE.js";
-import {
-  e
-} from "./chunk.YVSJQ4KD.js";
+} from "./chunk.YVG2XG3L.js";
 import {
   watch
 } from "./chunk.IUDWCWFV.js";
+import {
+  e
+} from "./chunk.YVSJQ4KD.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.THBBULDA.js";
+} from "./chunk.LVWJBUI5.js";
 import {
   e as e2,
   n as n2,
@@ -91,13 +91,12 @@ var TerraButton = class extends TerraElement {
     this.hasFocus = false;
     this.invalid = false;
     this.title = "";
-    this.variant = "default";
+    this.variant = "primary";
     this.size = "medium";
     this.caret = false;
     this.disabled = false;
     this.loading = false;
     this.outline = false;
-    this.pill = false;
     this.circle = false;
     this.type = "button";
     this.name = "";
@@ -193,6 +192,24 @@ var TerraButton = class extends TerraElement {
       this.formControlController.updateValidity();
     }
   }
+  setPageLinkIcon(href) {
+    const parsedUrl = new URL(href);
+    const linkDomain = parsedUrl.hostname;
+    const hostDomain = globalThis.location.hostname;
+    return linkDomain === hostDomain ? "outline-arrow-right" : "outline-arrow-up-right";
+  }
+  setFontSize(size) {
+    switch (size) {
+      case "small":
+        return ".8rem";
+      case "medium":
+        return "1.2rem";
+      case "large":
+        return "1.5rem";
+      default:
+        return "1.5rem";
+    }
+  }
   render() {
     const isLink = this.isLink();
     const tag = isLink ? s`a` : s`button`;
@@ -204,21 +221,23 @@ var TerraButton = class extends TerraElement {
       "button--default": this.variant === "default",
       "button--primary": this.variant === "primary",
       "button--success": this.variant === "success",
-      "button--neutral": this.variant === "neutral",
       "button--warning": this.variant === "warning",
       "button--danger": this.variant === "danger",
       "button--text": this.variant === "text",
+      "button--pagelink": this.variant === "pagelink",
       "button--small": this.size === "small",
       "button--medium": this.size === "medium",
       "button--large": this.size === "large",
       "button--caret": this.caret,
+      "button--square-left": this.shape === "square-left",
+      "button--square": this.shape === "square",
+      "button--square-right": this.shape === "square-right",
       "button--circle": this.circle,
       "button--disabled": this.disabled,
       "button--focused": this.hasFocus,
       "button--loading": this.loading,
       "button--standard": !this.outline,
       "button--outline": this.outline,
-      "button--pill": this.pill,
       "button--has-label": this.hasSlotController.test("[default]"),
       "button--has-prefix": this.hasSlotController.test("prefix"),
       "button--has-suffix": this.hasSlotController.test("suffix")
@@ -242,7 +261,17 @@ var TerraButton = class extends TerraElement {
       >
         <slot name="prefix" part="prefix" class="button__prefix"></slot>
         <slot part="label" class="button__label"></slot>
-        <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        <slot name="suffix" part="suffix" class="button__suffix">
+            ${this.variant == "pagelink" ? n`
+                          <span>
+                              <terra-icon
+                                  name=${this.setPageLinkIcon(this.href)}
+                                  library="heroicons"
+                                  font-size=${this.setFontSize(this.size)}
+                              ></terra-icon>
+                          </span>
+                      ` : ``}
+        </slot>
       </${tag}>
     `;
   }
@@ -269,6 +298,9 @@ __decorateClass([
 __decorateClass([
   n2({ type: Boolean, reflect: true })
 ], TerraButton.prototype, "caret", 2);
+__decorateClass([
+  n2({ reflect: true })
+], TerraButton.prototype, "shape", 2);
 __decorateClass([
   n2({ type: Boolean, reflect: true })
 ], TerraButton.prototype, "disabled", 2);
@@ -278,9 +310,6 @@ __decorateClass([
 __decorateClass([
   n2({ type: Boolean, reflect: true })
 ], TerraButton.prototype, "outline", 2);
-__decorateClass([
-  n2({ type: Boolean, reflect: true })
-], TerraButton.prototype, "pill", 2);
 __decorateClass([
   n2({ type: Boolean, reflect: true })
 ], TerraButton.prototype, "circle", 2);

package/cdn/chunks/chunk.5FZY6SGS.js

@@ -0,0 +1,61 @@
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+
+// src/components/spatial-picker/spatial-picker.styles.ts
+var spatial_picker_styles_default = i`
+    :host {
+        display: block;
+        position: relative;
+        max-width: 600px;
+    }
+
+    :host .spatial-picker__input_fields {
+        position: relative;
+    }
+
+    :host input {
+        box-shadow: none;
+    }
+
+    :host .form-control {
+        display: block;
+        width: 100%;
+        height: 36px;
+        padding: 6px 12px;
+        background-image: none;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        -webkit-transition:
+            border-color ease-in-out 0.15s,
+            box-shadow ease-in-out 0.15s;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    :host .spatial-picker__input_icon_button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 36px;
+        padding: 0px;
+        z-index: 2;
+        margin-block: 0;
+        margin-inline: 0;
+    }
+
+    :host .spatial-picker__input_icon_button svg {
+        height: 1.4rem;
+        width: 1.4rem;
+    }
+
+    .button-icon {
+        height: 1rem;
+        width: 1rem;
+    }
+`;
+
+export {
+  spatial_picker_styles_default
+};

package/{dist/chunks/chunk.CNBF6GCR.js → cdn/chunks/chunk.5NV6P6GX.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlot
-} from "./chunk.IEHDLSGA.js";
+} from "./chunk.765C5WRO.js";
 
 // src/components/plot/plot.ts
 var plot_default = TerraPlot;

package/cdn/chunks/{chunk.6TG7HJRE.js → chunk.5VDHK5K4.js}

@@ -1,18 +1,21 @@
-import {
-  Fuse
-} from "./chunk.NTNL4P6D.js";
-import {
-  n as n2
-} from "./chunk.2XCNCXGV.js";
 import {
   c
 } from "./chunk.PZRCJWJ4.js";
 import {
   h
 } from "./chunk.QB5SASDL.js";
+import {
+  Fuse
+} from "./chunk.NTNL4P6D.js";
+import {
+  n as n2
+} from "./chunk.2XCNCXGV.js";
 import {
   o
 } from "./chunk.QEA4QW6G.js";
+import {
+  combobox_styles_default
+} from "./chunk.USC76EZL.js";
 import {
   clearSelection,
   walkToOption
@@ -23,14 +26,11 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.THBBULDA.js";
+} from "./chunk.LVWJBUI5.js";
 import {
   n,
   r
 } from "./chunk.K4EJQG4O.js";
-import {
-  combobox_styles_default
-} from "./chunk.IBV3HXI5.js";
 import {
   T,
   s,
@@ -296,9 +296,7 @@ var _TerraCombobox = class _TerraCombobox extends TerraElement {
   render() {
     var _a;
     return x`<search part="base" title="Search through the list.">
-            <label
-                for="combobox"
-                class=${this.hideLabel ? "sr-only" : "search-input-label"}
+            <label for="combobox" class=${this.hideLabel ? "sr-only" : "input-label"}
                 >${this.label}</label
             >
             <div class="search-input-group">
@@ -322,7 +320,8 @@ var _TerraCombobox = class _TerraCombobox extends TerraElement {
                     @input=${__privateGet(this, _handleComboboxChange)}
                     @keydown=${__privateGet(this, _handleKeydown)}
                 />
-                <button
+                <terra-button
+                    shape="square-left"
                     aria-controls="listbox"
                     aria-expanded=${this.isExpanded}
                     aria-label="List of Searchable Items"
@@ -358,7 +357,7 @@ var _TerraCombobox = class _TerraCombobox extends TerraElement {
                                   stroke-width="3"
                               ></circle>
                           </svg>`}
-                </button>
+                </terra-button>
 
                 ${this.hideHelp ? T : x`<p class="search-help">
                           See

package/cdn/chunks/{chunk.URIOYHEA.js → chunk.765C5WRO.js}

@@ -1,13 +1,13 @@
 import {
   plot_styles_default
-} from "./chunk.PTWY7M47.js";
+} from "./chunk.EZSX4R2K.js";
 import {
   watch
 } from "./chunk.IUDWCWFV.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.THBBULDA.js";
+} from "./chunk.LVWJBUI5.js";
 import {
   e,
   n
@@ -18,6 +18,9 @@ import {
 import {
   __commonJS,
   __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateSet,
   __spreadValues,
   __toESM
 } from "./chunk.6QUGTGJO.js";
@@ -88169,33 +88172,31 @@ var require_plotly_min = __commonJS({
 
 // src/components/plot/plot.component.ts
 var import_plotly = __toESM(require_plotly_min(), 1);
+var _resizeObserver;
 var TerraPlot = class extends TerraElement {
   constructor() {
     super(...arguments);
-    this.plotData = [];
+    __privateAdd(this, _resizeObserver, void 0);
     this.layout = {};
-    this.config = {
-      modeBarButtonsToAdd: [
-        {
-          name: "Download Data",
-          title: "Download plot data as a CSV file",
-          icon: import_plotly.Icons.disk,
-          click: () => {
-            this.downloadCSV();
-          }
-        }
-      ]
-    };
+    this.config = {};
     this.data = [];
   }
   handleDataChange() {
     this.updatePlotWithData();
   }
   firstUpdated() {
+    __privateSet(this, _resizeObserver, new ResizeObserver(() => {
+      import_plotly.Plots.resize(this.base);
+    }));
+    __privateGet(this, _resizeObserver).observe(this.base);
     if (this.data.length) {
       this.updatePlotWithData();
     }
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateGet(this, _resizeObserver).disconnect();
+  }
   updatePlotWithData() {
     if (!this.base) {
       return;
@@ -88206,45 +88207,21 @@ var TerraPlot = class extends TerraElement {
       __spreadValues({
         title: this.plotTitle
       }, this.layout),
-      this.config
+      __spreadValues({ responsive: true }, this.config)
     );
   }
-  downloadCSV() {
-    let plotData = [];
-    this.data.forEach((plot, index) => {
-      plotData[index] = plot;
-    });
-    const csvData = plotData.map((trace) => {
-      return trace.x.map((x2, i) => {
-        return {
-          x: x2,
-          y: trace.y[i]
-        };
-      });
-    }).flat();
-    const csv = this.convertToCSV(csvData);
-    const blob = new Blob([csv], { type: "text/csv" });
-    const url = window.URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.setAttribute("href", url);
-    a.setAttribute("download", "chart_data.csv");
-    a.style.display = "none";
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-  }
-  convertToCSV(data) {
-    const header = Object.keys(data[0]).join(",") + "\n";
-    const rows = data.map((obj) => Object.values(obj).join(",")).join("\n");
-    return header + rows;
-  }
   render() {
     return x`<div part="base"></div>`;
   }
+  updated() {
+    var _a, _b;
+    (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".gtitle")) == null ? void 0 : _b.part.add("plot-title");
+  }
 };
+_resizeObserver = new WeakMap();
 TerraPlot.styles = [component_styles_default, plot_styles_default];
 __decorateClass([
-  e('[part~="base"]')
+  e('[part="base"]')
 ], TerraPlot.prototype, "base", 2);
 __decorateClass([
   n()
@@ -88263,6 +88240,7 @@ __decorateClass([
 ], TerraPlot.prototype, "handleDataChange", 1);
 
 export {
+  require_plotly_min,
   TerraPlot
 };
 /*! Bundled license information:

package/cdn/chunks/{chunk.5DPGWL3Y.js → chunk.7JHEI2UU.js}

@@ -5,6 +5,7 @@ import {
   x
 } from "./chunk.PQFHJHNO.js";
 import {
+  __objRest,
   __spreadProps,
   __spreadValues
 } from "./chunk.6QUGTGJO.js";
@@ -63,24 +64,19 @@ function cherryPickDocInfo(docs) {
       collectionLongName: doc["Collection.LongName"],
       collectionShortName: doc["Collection.ShortName"],
       collectionVersion: doc["Collection.Version"],
-      name: doc["Variable.Name"],
+      entryId: `${doc["Collection.ShortName"]}_${doc["Collection.Version"]}_${doc["Variable.Name"]}`,
       longName: doc["Variable.LongName"],
+      name: doc["Variable.Name"],
       standardName: doc["Variable.StandardName"],
-      units: doc["Variable.Units"],
-      entryId: `${doc["Collection.ShortName"]}_${doc["Collection.Version"]}_${doc["Variable.Name"]}`
-    };
-    const eventDetail = JSON.stringify({
-      collectionBeginningDateTime: doc["Collection.BeginDateTime"],
-      collectionEndingDateTime: doc["Collection.EndDateTime"],
-      collectionShortName: renderableData.collectionShortName,
-      collectionVersion: renderableData.collectionVersion,
-      name: renderableData.name,
-      longName: renderableData.longName,
-      standardName: renderableData.standardName,
-      entryId: renderableData.entryId,
       units: doc["Variable.Units"]
+    };
+    const _a = renderableData, { collectionLongName } = _a, eventDetails = __objRest(_a, ["collectionLongName"]);
+    return __spreadProps(__spreadValues({}, renderableData), {
+      eventDetail: JSON.stringify(__spreadProps(__spreadValues({}, eventDetails), {
+        datasetLandingPage: doc["Collection.DescriptionUrl"],
+        variableLandingPage: doc["Variable.DescriptionUrl"]
+      }))
     });
-    return __spreadProps(__spreadValues({}, renderableData), { eventDetail });
   });
 }
 function clearSelection(combobox, listbox) {

package/cdn/chunks/{chunk.L4ODCAGX.js → chunk.7PMR7OPB.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableCombobox
-} from "./chunk.2BF5ZHP6.js";
+} from "./chunk.OEXEZBPR.js";
 
 // src/react/variable-combobox/index.ts
 import * as React from "react";

package/cdn/chunks/chunk.7QABLDUG.js

@@ -0,0 +1,57 @@
+import {
+  GiovanniRepository
+} from "./chunk.O7AXAEKY.js";
+import {
+  h
+} from "./chunk.UGTZ22DI.js";
+import {
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk.6QUGTGJO.js";
+
+// src/components/browse-variables/browse-variables.controller.ts
+var _host, _task, _catalog, _getCatalogRepository, getCatalogRepository_fn;
+var BrowseVariablesController = class {
+  constructor(host) {
+    __privateAdd(this, _getCatalogRepository);
+    __privateAdd(this, _host, void 0);
+    __privateAdd(this, _task, void 0);
+    __privateAdd(this, _catalog, void 0);
+    __privateSet(this, _host, host);
+    __privateSet(this, _catalog, __privateMethod(this, _getCatalogRepository, getCatalogRepository_fn).call(this));
+    __privateSet(this, _task, new h(host, {
+      task: async (_args, { signal }) => {
+        const searchResponse = await __privateGet(this, _catalog).searchVariablesAndFacets(
+          void 0,
+          void 0,
+          {
+            signal
+          }
+        );
+        this.facetsByCategory = searchResponse.facetsByCategory;
+        this.variables = searchResponse.variables;
+        return searchResponse;
+      },
+      args: () => []
+    }));
+  }
+  render(renderFunctions) {
+    return __privateGet(this, _task).render(renderFunctions);
+  }
+};
+_host = new WeakMap();
+_task = new WeakMap();
+_catalog = new WeakMap();
+_getCatalogRepository = new WeakSet();
+getCatalogRepository_fn = function() {
+  if (__privateGet(this, _host).catalog === "giovanni") {
+    return new GiovanniRepository();
+  }
+  throw new Error(`Invalid catalog: ${__privateGet(this, _host).catalog}`);
+};
+
+export {
+  BrowseVariablesController
+};

package/{dist/chunks/chunk.4EEBFDHS.js → cdn/chunks/chunk.7UW6DDQF.js}

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

package/cdn/chunks/chunk.AC5MB5SX.js

@@ -0,0 +1,128 @@
+import {
+  loader_styles_default
+} from "./chunk.NYEDLELY.js";
+import {
+  e
+} from "./chunk.YVSJQ4KD.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.LVWJBUI5.js";
+import {
+  n,
+  r
+} from "./chunk.K4EJQG4O.js";
+import {
+  T,
+  x
+} from "./chunk.PQFHJHNO.js";
+import {
+  __decorateClass
+} from "./chunk.6QUGTGJO.js";
+
+// src/components/loader/loader.component.ts
+var TerraLoader = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "large";
+    this.percent = "0";
+    this.indeterminate = false;
+    this._currentPercent = 0;
+  }
+  formatPercent(percent) {
+    if (parseInt(percent) > 100) {
+      percent = "100";
+    }
+    return parseInt(percent) > 0 ? percent + "%" : "";
+  }
+  render() {
+    this._currentPercent = parseInt(this.percent);
+    return x`
+            <div
+                class=${e({
+      loader: true,
+      "loader--small": this.variant === "small",
+      "loader--large": this.variant === "large",
+      "loader--orbit": this.variant === "orbit"
+    })}
+                aria-valuenow=${this.formatPercent(this.percent)}
+                role="progressbar"
+                tabindex="-1"
+            >
+                ${this.variant === "large" || this.variant === "orbit" ? x`
+                          <div
+                              class="percent ${this.variant == "orbit" ? "number-14" : "number-11"}"
+                          >
+                              ${this.formatPercent(this.percent)}
+                          </div>
+                      ` : T}
+                ${this.variant === "orbit" ? x`
+                          <svg viewBox="0 0 160 160">
+                              <circle class="planet" />
+
+                              <!-- total length of orbit ellipse = 298.2393493652344 -->
+                              <path
+                                  id="orbit"
+                                  d="M 53.528 96.775 C 73.584 124.975 100.654 140.601 115.393 130.137 C 132.613 117.912 119.246 79.55 105.434 60.525 C 90.233 39.587 60.506 18.543 44.962 30.114 C 29.456 41.657 38.219 75.25 53.528 96.775 Z"
+                              >
+                                  <animate
+                                      attributeName="stroke-dashoffset"
+                                      begin="-0.25s"
+                                      from="300"
+                                      to="0"
+                                      dur="1.5s"
+                                      repeatCount="indefinite"
+                                  />
+                              </path>
+
+                              <circle class="moon">
+                                  <animateMotion
+                                      begin="0s"
+                                      dur="1.5s"
+                                      repeatCount="indefinite"
+                                  >
+                                      <mpath href="#orbit"></mpath>
+                                  </animateMotion>
+                              </circle>
+
+                              <path
+                                  id="mask"
+                                  class="planet"
+                                  d="M 130.176 80.041 C 130.176 41.552 88.321 17.697 55.544 36.652 C 40.081 45.594 30.865 62.428 30.47 80.094 L 130.176 80.041 Z"
+                                  style="transform-box: fill-box; transform-origin: 49.8347% 100.62%;"
+                                  transform="matrix(-0.350367, -0.936613, 0.936613, -0.350367, -0.148117, -0.20884)"
+                              />
+                          </svg>
+                      ` : T}
+                ${this.variant === "small" || this.variant === "large" ? x`
+                          <svg
+                              viewBox=${this.variant == "small" ? "0 0 30 30" : "0 0 52 52"}
+                              aria-hidden="true"
+                              style="--progress: ${this.percent}"
+                              class="circular-progress ${this.indeterminate ? "indeterminate" : ""}"
+                          >
+                              <circle class="bg"></circle>
+                              <circle class="fg"></circle>
+                          </svg>
+                      ` : T}
+            </div>
+        `;
+  }
+};
+TerraLoader.styles = [component_styles_default, loader_styles_default];
+__decorateClass([
+  n({ reflect: true })
+], TerraLoader.prototype, "variant", 2);
+__decorateClass([
+  n({ type: String })
+], TerraLoader.prototype, "percent", 2);
+__decorateClass([
+  n({ type: Boolean })
+], TerraLoader.prototype, "indeterminate", 2);
+__decorateClass([
+  r()
+], TerraLoader.prototype, "_currentPercent", 2);
+
+export {
+  TerraLoader
+};