@nasa-terra/components 0.0.0

package/dist/chunks/chunk.UVHPNM6M.js

@@ -0,0 +1,10 @@
+// src/components/combobox/type.ts
+var SearchableListType = /* @__PURE__ */ ((SearchableListType2) => {
+  SearchableListType2["GroupedListItem"] = "GroupedListItem";
+  SearchableListType2["ListItem"] = "ListItem";
+  return SearchableListType2;
+})(SearchableListType || {});
+
+export {
+  SearchableListType
+};

package/dist/chunks/chunk.V3YTQSMP.js

@@ -0,0 +1,194 @@
+import {
+  Leaflet
+} from "./chunk.3ZGFXEAJ.js";
+import {
+  leaflet_styles_default
+} from "./chunk.LELNKRPW.js";
+import {
+  MapController
+} from "./chunk.KPXFSE3J.js";
+import {
+  map_styles_default
+} from "./chunk.IBEKZVOY.js";
+import {
+  leaflet_draw_styles_default
+} from "./chunk.AAWOHDFX.js";
+import {
+  watch
+} from "./chunk.ZK7QVWBI.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.PJXIJK2G.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateMethod,
+  __spreadValues
+} from "./chunk.RYPAZDXE.js";
+
+// src/components/map/map.component.ts
+import { html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { cache } from "lit/directives/cache.js";
+import { map } from "lit/directives/map.js";
+var _markDynamicLeafletContent, markDynamicLeafletContent_fn;
+var TerraMap = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _markDynamicLeafletContent);
+    this.minZoom = 0;
+    this.maxZoom = 23;
+    this.zoom = 1;
+    this.hasNavigation = false;
+    this.hasCoordTracker = false;
+    this.hasShapeSelector = false;
+    this.value = [];
+    this.map = new Leaflet();
+    this._mapController = new MapController(this);
+  }
+  valueChanged(_oldValue, newValue) {
+    var _a;
+    if (newValue.length > 0) {
+      (_a = this.map) == null ? void 0 : _a.setValue(this.value);
+    } else if (newValue.length === 0 && this.map.isMapReady) {
+      this.map.clearLayers();
+    }
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+  }
+  async firstUpdated() {
+    await this.map.initializeMap(this.mapElement, {
+      zoom: this.zoom,
+      minZoom: this.minZoom,
+      maxZoom: this.maxZoom,
+      hasCoordTracker: this.hasCoordTracker,
+      hasNavigation: this.hasNavigation,
+      initialValue: this.value
+    });
+    this.map.on(
+      "draw",
+      (layer) => this.emit("terra-map-change", {
+        detail: __spreadValues({
+          cause: "draw"
+        }, layer)
+      })
+    );
+    this.map.on(
+      "clear",
+      (_e) => this.emit("terra-map-change", {
+        detail: {
+          cause: "clear"
+        }
+      })
+    );
+    __privateMethod(this, _markDynamicLeafletContent, markDynamicLeafletContent_fn).call(this);
+  }
+  selectTemplate() {
+    var _a;
+    return html`
+            <select
+                class="map__select form-control"
+                @change=${this.map.handleShapeSelect}
+            >
+                <option value="">Select a Shape...</option>
+
+                ${cache(
+      map((_a = this.shapes) == null ? void 0 : _a.available, (parentShape) => {
+        var _a2, _b;
+        const shapes = this.map.transformShapeData(
+          (_a2 = this.shapes) == null ? void 0 : _a2.info[parentShape]
+        );
+        return html`<optgroup
+                            label="${(_b = this.shapes) == null ? void 0 : _b.info[parentShape].title}"
+                        >
+                            ${shapes.map((shape) => {
+          return html`
+                                    <option
+                                        value="shape=${shape.shapefileID}/${shape.gShapeID}"
+                                    >
+                                        ${shape.name}
+                                    </option>
+                                `;
+        })}
+                        </optgroup> `;
+      })
+    )}
+            </select>
+        `;
+  }
+  render() {
+    return html`
+            <!-- select goes here -->
+            ${this.hasShapeSelector ? this.selectTemplate() : nothing}
+            <!-- "Map goes here" -->
+            <div part="map" id="map" class="map"></div>
+        `;
+  }
+};
+_markDynamicLeafletContent = new WeakSet();
+markDynamicLeafletContent_fn = function() {
+  var _a, _b, _c, _d;
+  const parts = [
+    {
+      item: (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(".leaflet-draw-draw-rectangle"),
+      name: "leaflet-bbox"
+    },
+    {
+      item: (_b = this.shadowRoot) == null ? void 0 : _b.querySelector(".leaflet-draw-draw-marker"),
+      name: "leaflet-point"
+    },
+    {
+      item: (_c = this.shadowRoot) == null ? void 0 : _c.querySelector(".leaflet-draw-edit-edit"),
+      name: "leaflet-edit"
+    },
+    {
+      item: (_d = this.shadowRoot) == null ? void 0 : _d.querySelector(".leaflet-draw-edit-remove"),
+      name: "leaflet-remove"
+    }
+  ];
+  parts.forEach(({ item, name }) => {
+    item == null ? void 0 : item.setAttribute("part", name);
+  });
+};
+TerraMap.styles = [
+  component_styles_default,
+  leaflet_styles_default,
+  leaflet_draw_styles_default,
+  map_styles_default
+];
+__decorateClass([
+  property({ attribute: "min-zoom", type: Number })
+], TerraMap.prototype, "minZoom", 2);
+__decorateClass([
+  property({ attribute: "max-zoom", type: Number })
+], TerraMap.prototype, "maxZoom", 2);
+__decorateClass([
+  property({ type: Number })
+], TerraMap.prototype, "zoom", 2);
+__decorateClass([
+  property({ attribute: "has-navigation", type: Boolean })
+], TerraMap.prototype, "hasNavigation", 2);
+__decorateClass([
+  property({ attribute: "has-coord-tracker", type: Boolean })
+], TerraMap.prototype, "hasCoordTracker", 2);
+__decorateClass([
+  property({ attribute: "has-shape-selector", type: Boolean })
+], TerraMap.prototype, "hasShapeSelector", 2);
+__decorateClass([
+  property({ type: Array })
+], TerraMap.prototype, "value", 2);
+__decorateClass([
+  query("#map")
+], TerraMap.prototype, "mapElement", 2);
+__decorateClass([
+  watch("value")
+], TerraMap.prototype, "valueChanged", 1);
+__decorateClass([
+  state()
+], TerraMap.prototype, "shapes", 2);
+
+export {
+  TerraMap
+};

package/dist/chunks/chunk.VIV3TUJX.js

@@ -0,0 +1,21 @@
+import {
+  TerraCombobox
+} from "./chunk.I7ZPL3IO.js";
+
+// src/react/combobox/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-combobox";
+TerraCombobox.define("terra-combobox");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraCombobox,
+  react: React,
+  events: {},
+  displayName: "TerraCombobox"
+});
+var combobox_default = reactWrapper;
+
+export {
+  combobox_default
+};

package/dist/chunks/chunk.WBXETWE4.js

@@ -0,0 +1,178 @@
+import {
+  __privateAdd,
+  __privateMethod,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.RYPAZDXE.js";
+
+// src/components/time-series/time-series.controller.ts
+import { Task, initialState } from "@lit/task";
+import { compile } from "handlebars";
+import { format } from "date-fns";
+
+// src/internal/indexeddb.ts
+import { openDB } from "idb";
+var DB_NAME = "terra";
+async function getDb() {
+  return await openDB(DB_NAME, 1, {
+    upgrade(db) {
+      db.createObjectStore("time-series" /* TIME_SERIES */, {
+        keyPath: "key"
+      });
+    }
+  });
+}
+async function withDb(callback) {
+  const db = await getDb();
+  try {
+    return await callback(db);
+  } finally {
+    await db.close();
+  }
+}
+function getDataByKey(store, key) {
+  return withDb(async (db) => {
+    return await db.get(store, key);
+  });
+}
+function storeDataByKey(store, key, data) {
+  return withDb(async (db) => {
+    await db.put(store, __spreadValues({
+      key
+    }, data));
+  });
+}
+
+// src/components/time-series/time-series.controller.ts
+var isLocalHost = globalThis.location.hostname === "localhost";
+var timeSeriesUrlTemplate = compile(
+  `${isLocalHost ? "http://localhost:9000/hydro1" : "https://hydro1.terra-ui.eosdis.nasa.gov"}/daac-bin/access/timeseries.cgi?variable={{variable}}&startDate={{startDate}}&endDate={{endDate}}&location={{location}}&type=asc2`
+);
+var plotlyDefaultData = {
+  // holds the default Plotly configuration options.
+  // see https://plotly.com/javascript/time-series/
+  type: "scatter",
+  mode: "lines",
+  line: { color: "rgb(28, 103, 227)" }
+  // TODO: configureable?
+};
+var _loadTimeSeries, loadTimeSeries_fn, _parseTimeSeriesCsv, parseTimeSeriesCsv_fn, _getDataInRange, getDataInRange_fn;
+var TimeSeriesController = class {
+  constructor(host) {
+    __privateAdd(this, _loadTimeSeries);
+    /**
+     * the data we receive for the time series is in CSV format, but with metadata at the top
+     * this function parses the CSV data and returns an object of the metadata and the data
+     */
+    __privateAdd(this, _parseTimeSeriesCsv);
+    /**
+     * given a set of data and a date range, will return only the data that falls within that range
+     */
+    __privateAdd(this, _getDataInRange);
+    this.emptyPlotData = [
+      __spreadProps(__spreadValues({}, plotlyDefaultData), {
+        x: [],
+        y: []
+      })
+    ];
+    this.host = host;
+    this.task = new Task(host, {
+      autoRun: false,
+      // passing the signal in so the fetch request will be aborted when the task is aborted
+      task: async (_args, { signal }) => {
+        if (!this.collection || !this.variable || !this.startDate || !this.endDate || !this.location) {
+          return initialState;
+        }
+        const timeSeries = await __privateMethod(this, _loadTimeSeries, loadTimeSeries_fn).call(this, signal);
+        return [
+          __spreadProps(__spreadValues({}, plotlyDefaultData), {
+            x: timeSeries.data.map((row) => row.timestamp),
+            y: timeSeries.data.map((row) => row.value)
+          })
+        ];
+      }
+    });
+  }
+  render(renderFunctions) {
+    return this.task.render(renderFunctions);
+  }
+};
+_loadTimeSeries = new WeakSet();
+loadTimeSeries_fn = async function(signal) {
+  const variableEntryId = `${this.collection}_${this.variable}`;
+  const existingTerraData = await getDataByKey(
+    "time-series" /* TIME_SERIES */,
+    `${variableEntryId}_${this.location}`
+  );
+  if (existingTerraData && this.startDate.getTime() >= new Date(existingTerraData.startDate).getTime() && this.endDate.getTime() <= new Date(existingTerraData.endDate).getTime()) {
+    return __privateMethod(this, _getDataInRange, getDataInRange_fn).call(this, existingTerraData);
+  }
+  let requestStartDate = this.startDate;
+  let requestEndDate = this.endDate;
+  if (existingTerraData) {
+    if (requestStartDate.getTime() < new Date(existingTerraData.startDate).getTime()) {
+      requestEndDate = new Date(existingTerraData.startDate);
+    }
+    if (requestEndDate.getTime() > new Date(existingTerraData.endDate).getTime()) {
+      requestStartDate = new Date(existingTerraData.endDate);
+    }
+  }
+  const url = timeSeriesUrlTemplate({
+    variable: `${variableEntryId.split("_")[0]}:${this.collection}:${this.variable}`,
+    // TODO: Cloud Giovanni would use "variableEntryId" directly here, no need to reformat
+    startDate: format(requestStartDate, "yyyy-MM-dd") + "T00",
+    endDate: format(requestEndDate, "yyyy-MM-dd") + "T00",
+    location: `GEOM:POINT(${this.location})`
+  });
+  const response = await fetch(url, { mode: "cors", signal });
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch time series data: ${response.statusText}`
+    );
+  }
+  const parsedData = __privateMethod(this, _parseTimeSeriesCsv, parseTimeSeriesCsv_fn).call(this, await response.text());
+  parsedData.data = [...parsedData.data, ...(existingTerraData == null ? void 0 : existingTerraData.data) || []];
+  await storeDataByKey(
+    "time-series" /* TIME_SERIES */,
+    `${variableEntryId}_${this.location}`,
+    __spreadValues({
+      variableEntryId,
+      key: `${variableEntryId}_${this.location}`,
+      startDate: parsedData.data[0].timestamp,
+      endDate: parsedData.data[parsedData.data.length - 1].timestamp
+    }, parsedData)
+  );
+  return __privateMethod(this, _getDataInRange, getDataInRange_fn).call(this, parsedData);
+};
+_parseTimeSeriesCsv = new WeakSet();
+parseTimeSeriesCsv_fn = function(text) {
+  const lines = text.split("\n");
+  const metadata = {};
+  const data = [];
+  lines.forEach((line) => {
+    if (line.includes("=")) {
+      const [key, value] = line.split("=");
+      metadata[key] = value;
+    } else if (line.includes("	")) {
+      const [timestamp, value] = line.split("	");
+      if (timestamp && value) {
+        data.push({ timestamp, value });
+      }
+    }
+  });
+  return { metadata, data };
+};
+_getDataInRange = new WeakSet();
+getDataInRange_fn = function(data) {
+  return __spreadProps(__spreadValues({}, data), {
+    data: data.data.filter((row) => {
+      const timestamp = new Date(row.timestamp);
+      return timestamp >= this.startDate && timestamp <= this.endDate;
+    })
+  });
+};
+
+export {
+  plotlyDefaultData,
+  TimeSeriesController
+};

package/dist/chunks/chunk.WGFD2LHA.js

@@ -0,0 +1,83 @@
+import {
+  chip_styles_default
+} from "./chunk.N2DS7NLI.js";
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.PJXIJK2G.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet
+} from "./chunk.RYPAZDXE.js";
+
+// src/components/chip/chip.component.ts
+import { property } from "lit/decorators.js";
+import { html } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+var _handleRemoveClick;
+var TerraChip = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    this.size = "medium";
+    __privateAdd(this, _handleRemoveClick, () => {
+      this.emit("terra-remove");
+      this.remove();
+    });
+  }
+  render() {
+    return html`
+            <div
+                id="chip"
+                class="${classMap({
+      // Sizes
+      "chip--small": this.size === "small",
+      "chip--medium": this.size === "medium",
+      "chip--large": this.size === "large"
+    })}
+                chip"
+            >
+                <div
+                    class="${classMap({
+      // Sizes
+      "chip-content--small": this.size === "small",
+      "chip-content--medium": this.size === "medium",
+      "chip-content--large": this.size === "large"
+    })}
+                    chip-content"
+                >
+                    <slot part="content" class="tag__content"></slot>
+                </div>
+                <button class="chip-close" @click="${__privateGet(this, _handleRemoveClick)}">
+                    <svg
+                        class="${classMap({
+      // Sizes
+      "chip-svg--small": this.size === "small",
+      "chip-svg--medium": this.size === "medium",
+      "chip-svg--large": this.size === "large"
+    })}
+                        chip-svg"
+                        focusable="false"
+                        viewBox="0 0 500 500"
+                        aria-hidden="true"
+                    >
+                        <path
+                            d="M 227 56.036 H 265 V 227.037 H 436 V 265.036 H 265 V 436.036 H 227 V 265.036 H 56 V 227.037 H 227 Z"
+                            style="fill: #909090; paint-order: fill; fill-rule: nonzero; stroke-width: 0px; transform-origin: 246px 246.036px;"
+                            transform="matrix(0.707107007504, 0.707107007504, -0.707107007504, 0.707107007504, -9.98393e-7, -0.000026419743)"
+                        ></path>
+                    </svg>
+                </button>
+            </div>
+        `;
+  }
+};
+_handleRemoveClick = new WeakMap();
+TerraChip.styles = [component_styles_default, chip_styles_default];
+__decorateClass([
+  property({ reflect: true })
+], TerraChip.prototype, "size", 2);
+
+export {
+  TerraChip
+};

package/dist/chunks/chunk.WJPV6KQS.js

@@ -0,0 +1,11 @@
+import {
+  TerraButton
+} from "./chunk.OSC7AN4C.js";
+
+// src/components/button/button.ts
+var button_default = TerraButton;
+TerraButton.define("terra-button");
+
+export {
+  button_default
+};

package/dist/chunks/chunk.WNRL2JWN.js

@@ -0,0 +1,21 @@
+import {
+  TerraChip
+} from "./chunk.WGFD2LHA.js";
+
+// src/react/chip/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-chip";
+TerraChip.define("terra-chip");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraChip,
+  react: React,
+  events: {},
+  displayName: "TerraChip"
+});
+var chip_default = reactWrapper;
+
+export {
+  chip_default
+};

package/dist/chunks/chunk.XJ3P4AO2.js

@@ -0,0 +1,11 @@
+import {
+  TerraVariableCombobox
+} from "./chunk.2RBWEAYS.js";
+
+// src/components/variable-combobox/variable-combobox.ts
+var variable_combobox_default = TerraVariableCombobox;
+TerraVariableCombobox.define("terra-variable-combobox");
+
+export {
+  variable_combobox_default
+};