@nasa-terra/components 0.0.40 → 0.0.42

package/cdn/web-types.json

@@ -1,102 +1,34 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@nasa-terra/components",
-  "version": "0.0.40",
+  "version": "0.0.42",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
-          "name": "terra-combobox",
-          "description": "Fuzzy-search for combobox with list autocomplete.\n---\n\n\n### **CSS Properties:**\n - **--host-height** - The height of the host element. _(default: undefined)_\n- **--help-height** - The height of the search help element. _(default: undefined)_\n- **--label-height** - The height of the input's label element. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - A `search` element, the component's base.\n- **combobox** - An `input` element used for searching.\n- **button** - A `button` used for toggling the listbox's visibility.\n- **listbox** - A `ul` that holds the clickable options.",
+          "name": "terra-browse-variables",
+          "description": "Browse through the NASA CMR or Giovanni catalogs.\n---\n",
           "doc-url": "",
           "attributes": [
             {
-              "name": "label",
-              "description": "Label the combobox with this.",
-              "value": { "type": "string", "default": "'Search for Items'" }
-            },
-            {
-              "name": "name",
-              "description": "name the combobox with this.",
-              "value": { "type": "string", "default": "'Item'" }
-            },
-            {
-              "name": "placeholder",
-              "description": "Set a placeholder for the combobox with this.\nDefaults to the label's value.",
-              "value": { "type": "string" }
-            },
-            {
-              "name": "hide-help",
-              "description": "Hide the combobox's help text.\nWhen hidden, not rendered at all.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "hide-label",
-              "description": "Hide the combobox's label text.\nWhen hidden, still presents to screen readers.",
-              "value": { "type": "boolean", "default": "false" }
-            },
-            {
-              "name": "status",
-              "description": "status of the content",
-              "value": {
-                "type": "'INITIAL' | 'PENDING' | 'COMPLETE' | 'ERROR'",
-                "default": "'INITIAL'"
-              }
-            },
-            {
-              "name": "content",
-              "description": "content or data of the combobox. This could be of type string | GroupedListItem[] | ListItem[] | undefined",
-              "value": {
-                "type": "Content",
-                "default": "{\n        type: SearchableListType.GroupedListItem,\n        data: [],\n    }"
-              }
+              "name": "catalog",
+              "description": "Allows the user to switch the catalog between different providers\nTODO: add support for CMR catalog and make it the default",
+              "value": { "type": "'giovanni'", "default": "'giovanni'" }
             }
           ],
           "events": [],
           "js": {
             "properties": [
               {
-                "name": "label",
-                "description": "Label the combobox with this.",
-                "type": "string"
-              },
-              {
-                "name": "name",
-                "description": "name the combobox with this.",
-                "type": "string"
-              },
-              {
-                "name": "placeholder",
-                "description": "Set a placeholder for the combobox with this.\nDefaults to the label's value.",
-                "type": "string"
-              },
-              {
-                "name": "hideHelp",
-                "description": "Hide the combobox's help text.\nWhen hidden, not rendered at all.",
-                "type": "boolean"
-              },
-              {
-                "name": "hideLabel",
-                "description": "Hide the combobox's label text.\nWhen hidden, still presents to screen readers.",
-                "type": "boolean"
-              },
-              {
-                "name": "status",
-                "description": "status of the content",
-                "type": "'INITIAL' | 'PENDING' | 'COMPLETE' | 'ERROR'"
-              },
-              {
-                "name": "content",
-                "description": "content or data of the combobox. This could be of type string | GroupedListItem[] | ListItem[] | undefined",
-                "type": "Content"
+                "name": "catalog",
+                "description": "Allows the user to switch the catalog between different providers\nTODO: add support for CMR catalog and make it the default",
+                "type": "'giovanni'"
               },
-              { "name": "isExpanded", "type": "boolean" },
-              { "name": "query" },
-              {
-                "name": "searchResults",
-                "type": "GroupedListItem[] | ListItem[]"
-              }
+              { "name": "searchQuery", "type": "string" },
+              { "name": "selectedFacets", "type": "SelectedFacets" },
+              { "name": "selectedVariables", "type": "Variable[]" },
+              { "name": "showVariablesBrowse", "type": "boolean" }
             ],
             "events": []
           }
@@ -378,33 +310,6 @@
             "events": []
           }
         },
-        {
-          "name": "terra-browse-variables",
-          "description": "Browse through the NASA CMR or Giovanni catalogs.\n---\n",
-          "doc-url": "",
-          "attributes": [
-            {
-              "name": "catalog",
-              "description": "Allows the user to switch the catalog between different providers\nTODO: add support for CMR catalog and make it the default",
-              "value": { "type": "'giovanni'", "default": "'giovanni'" }
-            }
-          ],
-          "events": [],
-          "js": {
-            "properties": [
-              {
-                "name": "catalog",
-                "description": "Allows the user to switch the catalog between different providers\nTODO: add support for CMR catalog and make it the default",
-                "type": "'giovanni'"
-              },
-              { "name": "searchQuery", "type": "string" },
-              { "name": "selectedFacets", "type": "SelectedFacets" },
-              { "name": "selectedVariables", "type": "Variable[]" },
-              { "name": "showVariablesBrowse", "type": "boolean" }
-            ],
-            "events": []
-          }
-        },
         {
           "name": "terra-chip",
           "description": "Used for contacts and tags\n---\n\n\n### **Slots:**\n - _default_ - The chip's label.",
@@ -528,6 +433,101 @@
             "events": []
           }
         },
+        {
+          "name": "terra-combobox",
+          "description": "Fuzzy-search for combobox with list autocomplete.\n---\n\n\n### **CSS Properties:**\n - **--host-height** - The height of the host element. _(default: undefined)_\n- **--help-height** - The height of the search help element. _(default: undefined)_\n- **--label-height** - The height of the input's label element. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - A `search` element, the component's base.\n- **combobox** - An `input` element used for searching.\n- **button** - A `button` used for toggling the listbox's visibility.\n- **listbox** - A `ul` that holds the clickable options.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "Label the combobox with this.",
+              "value": { "type": "string", "default": "'Search for Items'" }
+            },
+            {
+              "name": "name",
+              "description": "name the combobox with this.",
+              "value": { "type": "string", "default": "'Item'" }
+            },
+            {
+              "name": "placeholder",
+              "description": "Set a placeholder for the combobox with this.\nDefaults to the label's value.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "hide-help",
+              "description": "Hide the combobox's help text.\nWhen hidden, not rendered at all.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "hide-label",
+              "description": "Hide the combobox's label text.\nWhen hidden, still presents to screen readers.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "status",
+              "description": "status of the content",
+              "value": {
+                "type": "'INITIAL' | 'PENDING' | 'COMPLETE' | 'ERROR'",
+                "default": "'INITIAL'"
+              }
+            },
+            {
+              "name": "content",
+              "description": "content or data of the combobox. This could be of type string | GroupedListItem[] | ListItem[] | undefined",
+              "value": {
+                "type": "Content",
+                "default": "{\n        type: SearchableListType.GroupedListItem,\n        data: [],\n    }"
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "Label the combobox with this.",
+                "type": "string"
+              },
+              {
+                "name": "name",
+                "description": "name the combobox with this.",
+                "type": "string"
+              },
+              {
+                "name": "placeholder",
+                "description": "Set a placeholder for the combobox with this.\nDefaults to the label's value.",
+                "type": "string"
+              },
+              {
+                "name": "hideHelp",
+                "description": "Hide the combobox's help text.\nWhen hidden, not rendered at all.",
+                "type": "boolean"
+              },
+              {
+                "name": "hideLabel",
+                "description": "Hide the combobox's label text.\nWhen hidden, still presents to screen readers.",
+                "type": "boolean"
+              },
+              {
+                "name": "status",
+                "description": "status of the content",
+                "type": "'INITIAL' | 'PENDING' | 'COMPLETE' | 'ERROR'"
+              },
+              {
+                "name": "content",
+                "description": "content or data of the combobox. This could be of type string | GroupedListItem[] | ListItem[] | undefined",
+                "type": "Content"
+              },
+              { "name": "isExpanded", "type": "boolean" },
+              { "name": "query" },
+              {
+                "name": "searchResults",
+                "type": "GroupedListItem[] | ListItem[]"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "terra-date-range-slider",
           "description": "Short summary of the component's intended use.\n---\n\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
@@ -892,7 +892,7 @@
               {
                 "name": "shapes",
                 "description": "List of geojson shapes",
-                "type": "any"
+                "type": "ShapeFilesResponse"
               },
               { "name": "_mapController", "type": "MapController" }
             ],

package/{cdn/chunks/chunk.OZLHUWHZ.js → dist/chunks/chunk.37TB25W5.js}

@@ -1,6 +1,6 @@
 import {
   TerraSkeleton
-} from "./chunk.VMGDCNZ6.js";
+} from "./chunk.D3CNBHKN.js";
 
 // src/react/skeleton/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.UBBSTKSW.js → chunk.4ZCXZZM3.js}

@@ -1,3 +1,6 @@
+import {
+  GiovanniGeoJsonShapes
+} from "./chunk.ACUTOX6G.js";
 import {
   __spreadValues
 } from "./chunk.TVFCHGU3.js";
@@ -48,6 +51,7 @@ var Leaflet = class {
     this.listeners = [];
     this.isMapReady = false;
     this.handleShapeSelect = this.handleShapeSelect.bind(this);
+    this.geoJsonRepository = new GiovanniGeoJsonShapes();
   }
   // map initialization function
   initializeMap(container, options) {
@@ -212,28 +216,13 @@ var Leaflet = class {
     });
     return transformedShapes;
   }
-  async fetchSelectedShape(query) {
-    const url = new URL(
-      "https://windmill-load-balancer-641499207.us-east-1.elb.amazonaws.com/api/r/giovanni/geojson"
-    );
-    const [key, value] = query.split("=");
-    if (key && value) {
-      url.searchParams.append(key, value);
-    }
-    const data = await fetch(url.toString(), {
-      method: "GET",
-      mode: "cors"
-    });
-    const shape = await data.json();
-    return shape;
-  }
   async handleShapeSelect(event) {
     var _a;
     event.preventDefault();
     const selectedShape = event.target.value;
     if (!selectedShape)
       return;
-    const shapeGeoJson = await this.fetchSelectedShape(selectedShape);
+    const shapeGeoJson = await this.geoJsonRepository.getGeoJson(selectedShape);
     if ((_a = this.selectedGeoJson) == null ? void 0 : _a.hasLayer) {
       this.selectedGeoJson.remove();
     }

package/dist/chunks/{chunk.PZ74PH5L.js → chunk.57H323P7.js}

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

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

@@ -22,7 +22,7 @@ var FetchController = class {
     __privateSet(this, _apiTask, new Task(host, {
       task: async () => {
         const response = await fetch(
-          "https://windmill-load-balancer-641499207.us-east-1.elb.amazonaws.com/api/r/website/data-rods-variables",
+          "https://lb.gesdisc.eosdis.nasa.gov/windmill/api/r/website/data-rods-variables",
           {
             headers: __spreadValues({
               Accept: "application/json"

package/dist/chunks/chunk.5BT4MERK.js

@@ -0,0 +1,21 @@
+import {
+  GiovanniGeoJsonShapes
+} from "./chunk.ACUTOX6G.js";
+
+// src/components/map/map.controller.ts
+var MapController = class {
+  constructor(host) {
+    this.host = host;
+    this.geoJsonShapes = new GiovanniGeoJsonShapes();
+    this.host.addController(this);
+  }
+  async hostConnected() {
+    if (this.host.hasShapeSelector) {
+      this.host.shapes = await this.geoJsonShapes.getShapeFiles();
+    }
+  }
+};
+
+export {
+  MapController
+};

package/dist/chunks/{chunk.ROKXES2M.js → chunk.5C3BK3DD.js}

@@ -1,34 +1,34 @@
 import {
   TerraVariableKeywordSearch
-} from "./chunk.MBEJXOQR.js";
+} from "./chunk.HPH7B5RV.js";
 import {
   TerraSkeleton
-} from "./chunk.ZK6BXJM2.js";
+} from "./chunk.D3CNBHKN.js";
 import {
   getRandomIntInclusive
 } from "./chunk.7PAVW6KC.js";
 import {
   TerraLoader
-} from "./chunk.E2OGXHG2.js";
+} from "./chunk.6CVD44CG.js";
 import {
   TerraIcon
-} from "./chunk.Q6ULCJ5A.js";
+} from "./chunk.ZAG3VX64.js";
 import {
   BrowseVariablesController
-} from "./chunk.Z2ELMSYN.js";
+} from "./chunk.M6QZS4UJ.js";
 import {
   browse_variables_styles_default
 } from "./chunk.DNBZHQCS.js";
 import {
   TerraButton
-} from "./chunk.6OHX7MFV.js";
+} from "./chunk.P7N5DB3S.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.KCG2W75N.js";
+} from "./chunk.7QFQWJUX.js";
 import {
   __decorateClass,
   __objRest,
@@ -99,6 +99,7 @@ var TerraBrowseVariables = class extends TerraElement {
   handleSearch(e) {
     this.selectedFacets = {};
     this.searchQuery = e.detail;
+    this.showVariablesBrowse = true;
   }
   render() {
     const showLoader = __privateGet(this, _controller).task.status === TaskStatus.PENDING && // only show the loader when doing a fetch
@@ -389,6 +390,7 @@ renderVariablesBrowse_fn = function() {
       const input = e.currentTarget;
       __privateMethod(this, _handleVariableSelection, handleVariableSelection_fn).call(this, variable, input.checked);
     }}
+                                                style="display: none;"
                                             />
                                             <strong
                                                 >${variable.dataFieldLongName}</strong
@@ -428,8 +430,10 @@ renderVariablesBrowse_fn = function() {
                                         </sl-drawer>
 
                                         <terra-button
-                                            @click=${(_event) => {
-      const drawer = this.renderRoot.querySelector(
+                                            @click=${(event) => {
+      var _a;
+      const button = event.currentTarget;
+      const drawer = (_a = button.closest(".variable")) == null ? void 0 : _a.querySelector(
         "sl-drawer"
       );
       drawer.show();

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

@@ -1,6 +1,6 @@
 import {
   FetchController
-} from "./chunk.YY2NUPBF.js";
+} from "./chunk.5AOSWMDT.js";
 import {
   variable_combobox_styles_default
 } from "./chunk.HJGC45MW.js";
@@ -14,17 +14,17 @@ import {
 } from "./chunk.5LMWCV76.js";
 import {
   icon_default
-} from "./chunk.FNVJAT2N.js";
+} from "./chunk.SDW6HUGX.js";
 import {
   button_default
-} from "./chunk.V747WCNA.js";
+} from "./chunk.YXL3ZYZS.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.KCG2W75N.js";
+} from "./chunk.7QFQWJUX.js";
 import {
   __decorateClass,
   __privateAdd,

package/dist/chunks/{chunk.E2OGXHG2.js → chunk.6CVD44CG.js}

@@ -4,7 +4,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.KCG2W75N.js";
+} from "./chunk.7QFQWJUX.js";
 import {
   __decorateClass
 } from "./chunk.TVFCHGU3.js";

package/dist/chunks/{chunk.57IHZ3U7.js → chunk.6Z52LJYO.js}

@@ -4,7 +4,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.KCG2W75N.js";
+} from "./chunk.7QFQWJUX.js";
 import {
   __decorateClass,
   __privateAdd,

package/dist/chunks/{chunk.UEEVZ7FV.js → chunk.77WVGP37.js}

@@ -4,7 +4,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.KCG2W75N.js";
+} from "./chunk.7QFQWJUX.js";
 import {
   __decorateClass
 } from "./chunk.TVFCHGU3.js";

package/dist/chunks/{chunk.FXXWVDU7.js → chunk.7CW7OYAA.js}

@@ -1,6 +1,6 @@
 import {
   TerraCombobox
-} from "./chunk.MRIC7GU3.js";
+} from "./chunk.KXVLGKFP.js";
 
 // src/components/combobox/combobox.ts
 var combobox_default = TerraCombobox;

package/dist/chunks/{chunk.KCG2W75N.js → chunk.7QFQWJUX.js}

@@ -360,7 +360,7 @@ var TerraElement = class extends LitElement {
 };
 /* eslint-disable */
 // @ts-expect-error This is auto-injected at build time.
-TerraElement.version = "0.0.40";
+TerraElement.version = "0.0.42";
 TerraElement.dependencies = {};
 __decorateClass([
   property()

package/dist/chunks/{chunk.NGGIBOGM.js → chunk.7V3PWSYC.js}

@@ -1,19 +1,19 @@
 import {
   isValidDate
 } from "./chunk.OIDMX5LU.js";
-import {
-  date_range_slider_styles_default
-} from "./chunk.62YHGVQN.js";
 import {
   mergeTooltips
 } from "./chunk.KW4TJM4C.js";
+import {
+  date_range_slider_styles_default
+} from "./chunk.62YHGVQN.js";
 import {
   watch
 } from "./chunk.SK7IZCKP.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.KCG2W75N.js";
+} from "./chunk.7QFQWJUX.js";
 import {
   __decorateClass
 } from "./chunk.TVFCHGU3.js";

package/dist/chunks/{chunk.VEWSPG7S.js → chunk.7YA6YPDX.js}

@@ -1,6 +1,6 @@
 import {
   TerraDatePicker
-} from "./chunk.UEEVZ7FV.js";
+} from "./chunk.77WVGP37.js";
 
 // src/components/date-picker/date-picker.ts
 var date_picker_default = TerraDatePicker;

package/dist/chunks/chunk.ACUTOX6G.js

@@ -0,0 +1,104 @@
+import {
+  getGraphQLClient
+} from "./chunk.XWRIA5G5.js";
+
+// src/geojson/queries.ts
+import { gql } from "@apollo/client";
+var GET_SHAPE_FILES = gql`
+    query {
+        shapeFiles {
+            categories {
+                shapefileID
+                title
+                sourceName
+                sourceURL
+                shapes {
+                    name
+                    shapeID
+                    shapefileID
+                }
+            }
+        }
+    }
+`;
+var GET_GEOJSON_SHAPE = gql`
+    query GetGeoJsonShape($shape: String!) {
+        getGeoJsonShape(shape: $shape) {
+            type
+            features {
+                type
+                geometry {
+                    type
+                    coordinates
+                }
+                properties {
+                    TYPE
+                    RIVER
+                    USE_1
+                    USE_2
+                    USE_3
+                    ELEV_M
+                    COUNTRY
+                    GLWD_ID
+                    LAT_DEG
+                    VOL_SRC
+                    AREA_SKM
+                    DAM_NAME
+                    DAM_YEAR
+                    LONG_DEG
+                    LRS_AREA
+                    PERIM_KM
+                    POLY_SRC
+                    gShapeID
+                    LAKE_NAME
+                    LRS_CATCH
+                    MGLD_AREA
+                    MGLD_TYPE
+                    NEAR_CITY
+                    SEC_CNTRY
+                    CATCH_TSKM
+                    DAM_HEIGHT
+                    INFLOW_CMS
+                    LRS_AR_SRC
+                    VOLUME_CKM
+                }
+            }
+        }
+    }
+`;
+
+// src/geojson/giovanni-geojson.ts
+var GiovanniGeoJsonShapes = class {
+  async getShapeFiles() {
+    const client = await getGraphQLClient();
+    const response = await client.query({
+      query: GET_SHAPE_FILES,
+      fetchPolicy: "cache-first"
+    });
+    if (response.errors) {
+      throw new Error(
+        `Failed to fetch shape files: ${response.errors[0].message}`
+      );
+    }
+    return response.data.shapeFiles;
+  }
+  async getGeoJson(query) {
+    const client = await getGraphQLClient();
+    const shapeId = query.replace("shape=", "");
+    const response = await client.query({
+      query: GET_GEOJSON_SHAPE,
+      variables: {
+        shape: shapeId
+      },
+      fetchPolicy: "cache-first"
+    });
+    if (response.errors) {
+      throw new Error(`Failed to fetch GeoJSON: ${response.errors[0].message}`);
+    }
+    return response.data.getGeoJsonShape;
+  }
+};
+
+export {
+  GiovanniGeoJsonShapes
+};

package/dist/chunks/{chunk.4AD5NHEX.js → chunk.AVJCKEOG.js}

@@ -1,6 +1,6 @@
 import {
   TerraButton
-} from "./chunk.6OHX7MFV.js";
+} from "./chunk.P7N5DB3S.js";
 
 // src/react/button/index.ts
 import * as React from "react";

package/dist/chunks/{chunk.ZTJWLDIP.js → chunk.AVOXIWLL.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableKeywordSearch
-} from "./chunk.MBEJXOQR.js";
+} from "./chunk.HPH7B5RV.js";
 
 // src/components/variable-keyword-search/variable-keyword-search.ts
 var variable_keyword_search_default = TerraVariableKeywordSearch;