@nasa-terra/components 0.0.189 → 0.0.192

package/cdn/chunks/chunk.CSUI7ZCT.js

@@ -0,0 +1,658 @@
+import {
+  getSortLabel
+} from "./chunk.GIG3YQL2.js";
+import {
+  TerraVariableKeywordSearch
+} from "./chunk.BXX2TOJD.js";
+import {
+  TerraSkeleton
+} from "./chunk.JGY4EGZC.js";
+import {
+  getRandomIntInclusive
+} from "./chunk.YFGSWD7H.js";
+import {
+  QueryClientMixin
+} from "./chunk.DOUWGQFH.js";
+import {
+  TerraLoader
+} from "./chunk.PRQLTMQC.js";
+import {
+  BrowseVariablesController
+} from "./chunk.FIEZKD4M.js";
+import {
+  browse_variables_styles_default
+} from "./chunk.R2LD2BG6.js";
+import {
+  TerraButton
+} from "./chunk.XVNO5RTC.js";
+import {
+  TerraIcon
+} from "./chunk.ET5DXSTJ.js";
+import {
+  TerraAlert
+} from "./chunk.245STXLU.js";
+import {
+  watch
+} from "./chunk.MPVZOQYA.js";
+import {
+  TerraElement,
+  component_styles_default,
+  n,
+  r
+} from "./chunk.4MXAJRHY.js";
+import {
+  A,
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  __objRest,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __restKey,
+  __spreadProps,
+  __spreadValues,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/browse-variables/browse-variables.component.ts
+init_dirname();
+init_buffer();
+init_process();
+var _controller, _selectFacetField, selectFacetField_fn, _clearFacet, clearFacet_fn, _unselectFacetField, unselectFacetField_fn, _handleVariableSelection, handleVariableSelection_fn, _handleSortChange, handleSortChange_fn, _getSortedVariables, getSortedVariables_fn, _getBrowsingText, getBrowsingText_fn, _renderCategorySelect, renderCategorySelect_fn, _renderFacet, renderFacet_fn, _renderVariablesBrowse, renderVariablesBrowse_fn;
+var TerraBrowseVariables = class extends QueryClientMixin(TerraElement) {
+  constructor() {
+    super(...arguments);
+    /**
+     * given a field, ex: "observations": "Model", will add the field to any existing selected facets
+     * if "selectedOneFieldAtATime" is true, then we will only select that one field
+     */
+    __privateAdd(this, _selectFacetField);
+    __privateAdd(this, _clearFacet);
+    __privateAdd(this, _unselectFacetField);
+    __privateAdd(this, _handleVariableSelection);
+    __privateAdd(this, _handleSortChange);
+    __privateAdd(this, _getSortedVariables);
+    __privateAdd(this, _getBrowsingText);
+    __privateAdd(this, _renderCategorySelect);
+    __privateAdd(this, _renderFacet);
+    __privateAdd(this, _renderVariablesBrowse);
+    this.catalog = "giovanni";
+    this.selectedFacets = {};
+    this.selectedVariables = [];
+    this.showVariablesBrowse = false;
+    this.activeIndex = void 0;
+    this.sortOrder = "aToZ" /* AtoZ */;
+    __privateAdd(this, _controller, new BrowseVariablesController(this));
+  }
+  handleSelectedVariablesChange() {
+    this.emit("terra-variables-change", {
+      detail: {
+        selectedVariables: this.selectedVariables
+      }
+    });
+  }
+  reset() {
+    this.searchQuery = "";
+    this.selectedFacets = {};
+    this.showVariablesBrowse = false;
+  }
+  handleObservationChange() {
+    var _a, _b, _c;
+    const selectedObservation = (_c = (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      'input[name="observation"]:checked'
+    )) == null ? void 0 : _b.value) != null ? _c : "All";
+    if (selectedObservation === "All") {
+      __privateMethod(this, _clearFacet, clearFacet_fn).call(this, "observations");
+    } else {
+      __privateMethod(this, _selectFacetField, selectFacetField_fn).call(this, "observations", selectedObservation, true);
+    }
+  }
+  toggleFacetSelect(event) {
+    const target = event.target;
+    if (!target.dataset.facet) {
+      return;
+    }
+    __privateMethod(this, _selectFacetField, selectFacetField_fn).call(this, target.dataset.facet, target.innerText.trim());
+    this.showVariablesBrowse = true;
+  }
+  handleSearch(e) {
+    this.selectedFacets = {};
+    this.searchQuery = e.detail;
+    this.showVariablesBrowse = true;
+  }
+  render() {
+    const showLoader = __privateGet(this, _controller).isPending && // only show the loader when doing a fetch
+    __privateGet(this, _controller).facetsByCategory;
+    return b`
+            <div class="container">
+                <header class="search">
+                    ${this.showVariablesBrowse ? b`
+                              <terra-button @click=${this.reset}>
+                                  <terra-icon
+                                      name="solid-chevron-left"
+                                      library="heroicons"
+                                      font-size="1.5em"
+                                  ></terra-icon>
+                              </terra-button>
+                          ` : A}
+
+                    <terra-variable-keyword-search
+                        @terra-search=${this.handleSearch}
+                    ></terra-variable-keyword-search>
+                </header>
+
+                ${this.showVariablesBrowse ? __privateMethod(this, _renderVariablesBrowse, renderVariablesBrowse_fn).call(this, Boolean(showLoader)) : __privateMethod(this, _renderCategorySelect, renderCategorySelect_fn).call(this)}
+
+                <dialog ?open=${showLoader}>
+                    <terra-loader indeterminate></terra-loader>
+                </dialog>
+            </div>
+        `;
+  }
+  getVariable(variableEntryId) {
+    return __privateGet(this, _controller).getVariable(variableEntryId);
+  }
+};
+_controller = new WeakMap();
+_selectFacetField = new WeakSet();
+selectFacetField_fn = function(facet, field, selectOneFieldAtATime = false) {
+  const existingFields = this.selectedFacets[facet] || [];
+  if (existingFields.includes(field)) {
+    __privateMethod(this, _unselectFacetField, unselectFacetField_fn).call(this, facet, field);
+    return;
+  }
+  this.selectedFacets = __spreadProps(__spreadValues({}, this.selectedFacets), {
+    [facet]: selectOneFieldAtATime ? [field] : [...existingFields, field]
+  });
+};
+_clearFacet = new WeakSet();
+clearFacet_fn = function(facet) {
+  const _a = this.selectedFacets, { [facet]: _ } = _a, remainingFacets = __objRest(_a, [__restKey(facet)]);
+  this.selectedFacets = remainingFacets;
+};
+_unselectFacetField = new WeakSet();
+unselectFacetField_fn = function(facet, field) {
+  if (!this.selectedFacets[facet]) {
+    return;
+  }
+  const filteredFields = this.selectedFacets[facet].filter((f) => f !== field);
+  if (!filteredFields.length) {
+    __privateMethod(this, _clearFacet, clearFacet_fn).call(this, facet);
+    return;
+  }
+  this.selectedFacets = __spreadProps(__spreadValues({}, this.selectedFacets), {
+    [facet]: filteredFields
+  });
+};
+_handleVariableSelection = new WeakSet();
+handleVariableSelection_fn = function(variable, checked) {
+  const variableIsSelected = this.selectedVariables.find(
+    (v) => v.dataFieldLongName === variable.dataFieldLongName
+  );
+  if (checked && !variableIsSelected) {
+    this.selectedVariables = [].concat(
+      this.selectedVariables,
+      variable
+    );
+  } else if (!checked && variableIsSelected) {
+    this.selectedVariables = this.selectedVariables.filter(
+      (v) => v.dataFieldLongName !== variable.dataFieldLongName
+    );
+  }
+};
+_handleSortChange = new WeakSet();
+handleSortChange_fn = function(event) {
+  const selectedItem = event.detail.item;
+  const value = selectedItem.value;
+  if (value === "aToZ" /* AtoZ */ || value === "zToA" /* ZtoA */) {
+    this.sortOrder = value;
+    requestAnimationFrame(() => {
+      const menu = event.target;
+      const allItems = menu.querySelectorAll("terra-menu-item");
+      allItems.forEach((item) => {
+        const itemValue = item.value;
+        if (itemValue === this.sortOrder) {
+          item.checked = true;
+        } else {
+          item.checked = false;
+        }
+      });
+    });
+  }
+};
+_getSortedVariables = new WeakSet();
+getSortedVariables_fn = function() {
+  const variables = __privateGet(this, _controller).variables;
+  const sorted = [...variables].sort((a, b2) => {
+    const nameA = a.dataFieldLongName.toLowerCase();
+    const nameB = b2.dataFieldLongName.toLowerCase();
+    if (this.sortOrder === "aToZ" /* AtoZ */) {
+      return nameA.localeCompare(nameB);
+    } else {
+      return nameB.localeCompare(nameA);
+    }
+  });
+  return sorted;
+};
+_getBrowsingText = new WeakSet();
+getBrowsingText_fn = function() {
+  const selectedFacetNames = [];
+  Object.values(this.selectedFacets).forEach((fields) => {
+    selectedFacetNames.push(...fields);
+  });
+  const hasFacets = selectedFacetNames.length > 0;
+  const hasQuery = !!this.searchQuery;
+  if (!hasFacets && !hasQuery) {
+    return "";
+  }
+  let text = "Browsing";
+  if (hasFacets) {
+    if (selectedFacetNames.length === 1) {
+      text += ` '${selectedFacetNames[0]}'`;
+    } else if (selectedFacetNames.length === 2) {
+      text += ` '${selectedFacetNames[0]}' and '${selectedFacetNames[1]}'`;
+    } else {
+      const allButLast = selectedFacetNames.slice(0, -1);
+      const last = selectedFacetNames[selectedFacetNames.length - 1];
+      text += ` '${allButLast.join("', '")}', and '${last}'`;
+    }
+    text += " variables";
+  } else {
+    text += " variables";
+  }
+  if (hasQuery) {
+    text += ` for query \`${this.searchQuery}\``;
+  }
+  return text;
+};
+_renderCategorySelect = new WeakSet();
+renderCategorySelect_fn = function() {
+  var _a, _b;
+  const columns = [
+    { title: "Research Areas", facetKey: "disciplines" },
+    { title: "Measurements", facetKey: "measurements" },
+    { title: "Sources", facetKey: "platformInstruments" }
+  ];
+  return b`
+            <div class="scrollable browse-by-category">
+                <aside>
+                    <h3>Observations</h3>
+
+                    ${((_a = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _a.observations.length) ? b`
+                              <label>
+                                  <input
+                                      type="radio"
+                                      name="observation"
+                                      value="All"
+                                      @change=${this.handleObservationChange}
+                                      checked
+                                  />
+                                  All</label
+                              >
+
+                              ${(_b = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _b.observations.map(
+    (field) => b`<label>
+                                          <input
+                                              type="radio"
+                                              name="observation"
+                                              value=${field.name}
+                                              @change=${this.handleObservationChange}
+                                          />
+                                          ${field.name}
+                                      </label>`
+  )}
+                          ` : b`<terra-skeleton
+                              rows="4"
+                              variableWidths
+                          ></terra-skeleton>`}
+
+                    <terra-button
+                        variant="text"
+                        size
+                        @click=${() => this.showVariablesBrowse = true}
+                        >View All Now</terra-button
+                    >
+                </aside>
+
+                <main>
+                    ${columns.map(
+    (column) => {
+      var _a2, _b2, _c;
+      return b`
+                            <div class="column">
+                                <h3>${column.title}</h3>
+                                <ul role="list">
+                                    ${(_c = (_b2 = (_a2 = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _a2[column.facetKey]) == null ? void 0 : _b2.filter((field) => field.count > 0).map(
+        (field) => b`<li
+                                                    role="button"
+                                                    tabindex="0"
+                                                    aria-selected="false"
+                                                    data-facet=${column.facetKey}
+                                                    @click=${this.toggleFacetSelect}
+                                                >
+                                                    ${field.name}
+                                                </li>`
+      )) != null ? _c : b`<terra-skeleton
+                                        rows=${getRandomIntInclusive(8, 12)}
+                                        variableWidths
+                                    ></terra-skeleton>`}
+                                </ul>
+                            </div>
+                        `;
+    }
+  )}
+                </main>
+            </div>
+        `;
+};
+_renderFacet = new WeakSet();
+renderFacet_fn = function(facetKey, title, fields, open) {
+  const hasValidFields = (fields != null ? fields : []).some((field) => field.count > 0);
+  if (!hasValidFields) {
+    return A;
+  }
+  return b`<details ?open=${open}>
+            <summary>${title}</summary>
+
+            ${(fields != null ? fields : []).map(
+    (field) => {
+      var _a;
+      return field.count > 0 ? b`
+                          <div class="facet">
+                              <label
+                                  ><input
+                                      type="checkbox"
+                                      @change=${() => __privateMethod(this, _selectFacetField, selectFacetField_fn).call(this, facetKey, field.name)}
+                                      ?checked=${(_a = this.selectedFacets[facetKey]) == null ? void 0 : _a.includes(field.name)}
+                                  />
+                                  ${field.name}
+                                  <!-- TODO: add count back in once we aren't filtering by Cloud Giovanni Catalog (or Cloud Giovanni supports all variables)(${field.count})--></label
+                              >
+                          </div>
+                      ` : A;
+    }
+  )}
+        </details>`;
+};
+_renderVariablesBrowse = new WeakSet();
+renderVariablesBrowse_fn = function(loading) {
+  const facets = [
+    { title: "Observations", facetKey: "observations", open: true },
+    { title: "Disciplines", facetKey: "disciplines" },
+    { title: "Measurements", facetKey: "measurements" },
+    { title: "Platform / Instrument", facetKey: "platformInstruments" },
+    { title: "Spatial Resolutions", facetKey: "spatialResolutions" },
+    { title: "Temporal Resolutions", facetKey: "temporalResolutions" },
+    { title: "Wavelengths", facetKey: "wavelengths" },
+    { title: "Depths", facetKey: "depths" },
+    { title: "Special Features", facetKey: "specialFeatures" },
+    { title: "Portal", facetKey: "portals" }
+  ];
+  const variables = __privateMethod(this, _getSortedVariables, getSortedVariables_fn).call(this);
+  const browsingText = __privateMethod(this, _getBrowsingText, getBrowsingText_fn).call(this);
+  return b`<div class="scrollable variables-container">
+            <header>
+                <div>${browsingText}</div>
+
+                <menu>
+                    <li>
+                        <terra-dropdown
+                            class="list-menu-dropdown"
+                            placement="bottom-end"
+                        >
+                            <terra-button
+                                slot="trigger"
+                                variant="default"
+                                outline
+                                caret
+                                >Sort by ${getSortLabel(this.sortOrder)}</terra-button
+                            >
+                            <terra-menu @terra-select=${__privateMethod(this, _handleSortChange, handleSortChange_fn)}>
+                                <terra-menu-item
+                                    type="checkbox"
+                                    value="aToZ"
+                                    ?checked=${this.sortOrder === "aToZ" /* AtoZ */}
+                                    >A to Z</terra-menu-item
+                                >
+                                <terra-menu-item
+                                    type="checkbox"
+                                    value="zToA"
+                                    ?checked=${this.sortOrder === "zToA" /* ZtoA */}
+                                    >Z to A</terra-menu-item
+                                >
+                            </terra-menu>
+                        </terra-dropdown>
+                    </li>
+                    <!--
+                    <li>
+                        <terra-dropdown class="list-menu-dropdown">
+                            <terra-button slot="trigger" caret>Group By</terra-button>
+                            <terra-menu>
+                                <terra-menu-item value="depths"
+                                    >Depths</terra-menu-item
+                                >
+                                <terra-menu-item value="disciplines"
+                                    >Disciplines</terra-menu-item
+                                >
+                                <terra-menu-item value="measurements"
+                                    >Measurements</terra-menu-item
+                                >
+                                <terra-menu-item value="observations"
+                                    >Observations</terra-menu-item
+                                >
+                                <terra-menu-item value="platformInstruments"
+                                    >Platform Instruments</terra-menu-item
+                                >
+                                <terra-menu-item value="portals"
+                                    >Portals</terra-menu-item
+                                >
+                                <terra-menu-item value="spatialResolutions"
+                                    >Spatial Resolutions</terra-menu-item
+                                >
+                                <terra-menu-item value="specialFeatures"
+                                    >Special Features</terra-menu-item
+                                >
+                                <terra-menu-item value="temporalResolutions"
+                                    >Temporal Resolutions</terra-menu-item
+                                >
+                                <terra-menu-item value="wavelengths"
+                                    >Wavelengths</terra-menu-item
+                                >
+                            </terra-menu>
+                        </terra-dropdown>
+                    </li>
+                    -->
+                </menu>
+            </header>
+
+            <aside>
+                <h3>Filter</h3>
+
+                ${facets.map(
+    (facet) => {
+      var _a;
+      return __privateMethod(this, _renderFacet, renderFacet_fn).call(this, facet.facetKey, facet.title, (_a = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _a[facet.facetKey], facet.open);
+    }
+  )}
+            </aside>
+
+            <main class="variable-layout">
+                <!-- LEFT COLUMN -->
+                <section class="left-column">
+                    <ul class="variable-list">
+                        ${!loading && !variables.length ? b`
+                                  <terra-alert
+                                      variant="primary"
+                                      appearance="white"
+                                      open
+                                  >
+                                      <p>
+                                          We didn't find any variables matching your
+                                          search and filters.
+                                      </p>
+                                      <p>
+                                          Please note: This is a beta release and may
+                                          not have the full Giovanni catalog available
+                                          yet. We are working on adding more variables
+                                          and improving the search and filter
+                                          capabilities, so please check back soon!
+                                      </p>
+                                  </terra-alert>
+                              ` : A}
+                        ${variables.map(
+    (variable, index) => b`
+                                <li
+                                    aria-selected="false"
+                                    class="variable-list-item"
+                                    @mouseenter=${() => this.activeIndex = index}
+                                    @mouseleave=${() => this.activeIndex = void 0}
+                                    @focusin=${() => this.activeIndex = index}
+                                    @focusout=${() => this.activeIndex = void 0}
+                                    @click=${(event) => {
+      const target = event.currentTarget;
+      const targetCheckbox = target.querySelector(
+        'input[type="checkbox"]'
+      );
+      if (!targetCheckbox) {
+        return;
+      }
+      target == null ? void 0 : target.setAttribute(
+        "aria-selected",
+        `${targetCheckbox.checked}`
+      );
+    }}
+                                >
+                                    <div class="variable">
+                                        <label>
+                                            <input
+                                                data-variable=${variable}
+                                                type="checkbox"
+                                                @change=${(e) => {
+      const input = e.currentTarget;
+      __privateMethod(this, _handleVariableSelection, handleVariableSelection_fn).call(this, variable, input.checked);
+    }}
+                                                style="display: none;"
+                                            />
+                                            <strong
+                                                >${variable.dataFieldLongName}</strong
+                                            >
+                                            <span
+                                                >${variable.dataProductShortName}_${variable.dataProductVersion}
+                                                &bull;
+                                                ${variable.dataProductTimeInterval}
+                                                &bull;
+                                                ${variable.dataProductSpatialResolution}</span
+                                            >
+                                        </label>
+                                    </div>
+                                </li>
+                            `
+  )}
+                    </ul>
+                </section>
+
+                <!-- RIGHT COLUMN -->
+                ${!loading && !variables.length ? A : b`
+                          <section class="right-column">
+                              ${this.activeIndex !== void 0 ? b`
+                                        <div class="sticky-element">
+                                            <p>
+                                                <label
+                                                    ><strong
+                                                        >Name in Data File:</strong
+                                                    ></label
+                                                >
+                                                ${variables[this.activeIndex].dataFieldShortName}
+                                            </p>
+                                            <p>
+                                                <label><strong>Units:</strong></label>
+                                                ${variables[this.activeIndex].dataFieldUnits}
+                                            </p>
+                                            <p>
+                                                <label
+                                                    ><strong
+                                                        >Temporal Coverage:</strong
+                                                    ></label
+                                                >
+                                                ${variables[this.activeIndex].dataProductBeginDateTime}
+                                                –
+                                                ${variables[this.activeIndex].dataProductEndDateTime}
+                                            </p>
+                                            <p>
+                                                <label
+                                                    ><strong
+                                                        >Region Coverage:</strong
+                                                    ></label
+                                                >
+                                                ${variables[this.activeIndex].dataProductWest},
+                                                ${variables[this.activeIndex].dataProductSouth},
+                                                ${variables[this.activeIndex].dataProductEast},
+                                                ${variables[this.activeIndex].dataProductNorth}
+                                            </p>
+                                            <p>
+                                                <label
+                                                    ><strong
+                                                        >Spatial Resolution:</strong
+                                                    ></label
+                                                >
+                                                ${variables[this.activeIndex].dataProductSpatialResolution}
+                                            </p>
+                                            <p>
+                                                <label
+                                                    ><strong>Dataset:</strong></label
+                                                >
+                                                ${variables[this.activeIndex].dataProductShortName}_${variables[this.activeIndex].dataProductVersion}
+                                            </p>
+                                        </div>
+                                    ` : b`<p class="placeholder">
+                                        Hover over a variable to see details
+                                    </p>`}
+                          </section>
+                      `}
+            </main>
+        </div> `;
+};
+TerraBrowseVariables.styles = [component_styles_default, browse_variables_styles_default];
+TerraBrowseVariables.dependencies = {
+  "terra-variable-keyword-search": TerraVariableKeywordSearch,
+  "terra-button": TerraButton,
+  "terra-skeleton": TerraSkeleton,
+  "terra-icon": TerraIcon,
+  "terra-loader": TerraLoader,
+  "terra-alert": TerraAlert
+};
+__decorateClass([
+  n()
+], TerraBrowseVariables.prototype, "catalog", 2);
+__decorateClass([
+  n({ attribute: "selected-variable-entry-ids", reflect: true })
+], TerraBrowseVariables.prototype, "selectedVariableEntryIds", 2);
+__decorateClass([
+  r()
+], TerraBrowseVariables.prototype, "searchQuery", 2);
+__decorateClass([
+  r()
+], TerraBrowseVariables.prototype, "selectedFacets", 2);
+__decorateClass([
+  r()
+], TerraBrowseVariables.prototype, "selectedVariables", 2);
+__decorateClass([
+  r()
+], TerraBrowseVariables.prototype, "showVariablesBrowse", 2);
+__decorateClass([
+  r()
+], TerraBrowseVariables.prototype, "activeIndex", 2);
+__decorateClass([
+  r()
+], TerraBrowseVariables.prototype, "sortOrder", 2);
+__decorateClass([
+  watch("selectedVariables")
+], TerraBrowseVariables.prototype, "handleSelectedVariablesChange", 1);
+
+export {
+  TerraBrowseVariables
+};