@nasa-terra/components 0.0.194 → 0.0.196

package/cdn/chunks/chunk.UCT3XAKW.js

@@ -1,658 +0,0 @@
-import {
-  getSortLabel
-} from "./chunk.GIG3YQL2.js";
-import {
-  TerraVariableKeywordSearch
-} from "./chunk.VEA2ZOY3.js";
-import {
-  TerraSkeleton
-} from "./chunk.6OMLNJTP.js";
-import {
-  getRandomIntInclusive
-} from "./chunk.YFGSWD7H.js";
-import {
-  QueryClientMixin
-} from "./chunk.DOUWGQFH.js";
-import {
-  TerraLoader
-} from "./chunk.JBH5HRD4.js";
-import {
-  BrowseVariablesController
-} from "./chunk.IAR6FJQ6.js";
-import {
-  browse_variables_styles_default
-} from "./chunk.R2LD2BG6.js";
-import {
-  TerraButton
-} from "./chunk.XBS3GWMX.js";
-import {
-  TerraIcon
-} from "./chunk.IZYJIYRD.js";
-import {
-  TerraAlert
-} from "./chunk.RA34EXZV.js";
-import {
-  watch
-} from "./chunk.MPVZOQYA.js";
-import {
-  TerraElement,
-  component_styles_default,
-  n,
-  r
-} from "./chunk.WTFB42FU.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
-};