@nasa-terra/components 0.0.193 → 0.0.194

package/cdn/chunks/chunk.UYMVPCQM.js

@@ -0,0 +1,539 @@
+import {
+  TerraTooltip
+} from "./chunk.IGNHRKWM.js";
+import {
+  harmony_history_styles_default
+} from "./chunk.HFRKSSXY.js";
+import {
+  HarmonyRequest,
+  MutationController
+} from "./chunk.DPSHTZ6P.js";
+import {
+  AuthController
+} from "./chunk.P34Y4ETY.js";
+import {
+  FINAL_STATUSES,
+  mutationRemoveHarmonyJobLabels,
+  queryHarmonyJobs
+} from "./chunk.PYRLBGCN.js";
+import {
+  QueryClientMixin
+} from "./chunk.DOUWGQFH.js";
+import {
+  TerraLoader
+} from "./chunk.JBH5HRD4.js";
+import {
+  formatDate
+} from "./chunk.X2BIJLHO.js";
+import {
+  QueryController
+} from "./chunk.YY3ZUPZV.js";
+import {
+  TerraIcon
+} from "./chunk.IZYJIYRD.js";
+import {
+  TerraElement,
+  component_styles_default,
+  e,
+  n,
+  r
+} from "./chunk.WTFB42FU.js";
+import {
+  A,
+  b
+} from "./chunk.RRCYT4LP.js";
+import {
+  __decorateClass,
+  __spreadValues,
+  init_buffer,
+  init_dirname,
+  init_process
+} from "./chunk.ZEOVK2FE.js";
+
+// src/components/harmony-history/harmony-history.component.ts
+init_dirname();
+init_buffer();
+init_process();
+
+// src/events/terra-harmony-job-select.ts
+init_dirname();
+init_buffer();
+init_process();
+
+// src/events/terra-harmony-job-delete.ts
+init_dirname();
+init_buffer();
+init_process();
+
+// src/components/harmony-history/harmony-history.component.ts
+var STRIDE = 108;
+function formatDatetimeUtc(dateStr) {
+  if (!dateStr)
+    return "";
+  const d = new Date(dateStr);
+  const hasTime = d.getUTCHours() !== 0 || d.getUTCMinutes() !== 0 || d.getUTCSeconds() !== 0;
+  if (hasTime) {
+    const yyyy = d.getUTCFullYear();
+    const mm = String(d.getUTCMonth() + 1).padStart(2, "0");
+    const dd = String(d.getUTCDate()).padStart(2, "0");
+    const hh = String(d.getUTCHours()).padStart(2, "0");
+    const min = String(d.getUTCMinutes()).padStart(2, "0");
+    return `${yyyy}-${mm}-${dd} ${hh}:${min} UTC`;
+  }
+  return formatDate(d, "yyyy-MM-dd");
+}
+var TerraHarmonyHistory = class extends QueryClientMixin(TerraElement) {
+  constructor() {
+    super(...arguments);
+    this.limit = 20;
+    this.removeLabelsOnDelete = false;
+    this._boundDataChangeHandler = () => {
+      clearTimeout(this._refreshPage1Timer);
+      this._refreshPage1Timer = window.setTimeout(() => {
+        this._refreshPage1();
+      }, 500);
+    };
+    this._scrollIndex = 0;
+    this._totalCount = 0;
+    this._loadedPages = /* @__PURE__ */ new Map();
+    this._pendingPages = /* @__PURE__ */ new Set();
+    this._authController = new AuthController(this);
+    this._removeLabelsOnDeleteMutation = new MutationController(
+      this,
+      mutationRemoveHarmonyJobLabels()
+    );
+    /**
+     * Page 1 is always managed by this QueryController (includes polling for non-final jobs).
+     * Other pages are fetched imperatively via _fetchPage().
+     */
+    this.jobsQuery = new QueryController(
+      this,
+      () => queryHarmonyJobs(
+        __spreadValues({
+          page: 1,
+          limit: this.limit
+        }, this.filterByLabels ? { label: this.filterByLabels } : {}),
+        { bearerToken: this.bearerToken }
+      )
+    );
+  }
+  get _visibleCount() {
+    var _a, _b;
+    const viewportWidth = (_b = (_a = this._viewportEl) == null ? void 0 : _a.clientWidth) != null ? _b : 400;
+    return Math.max(1, Math.floor(viewportWidth / STRIDE));
+  }
+  /** Returns all jobs as a sparse array — null slots represent not-yet-loaded pages */
+  get _allJobs() {
+    return Array.from({ length: this._totalCount }, (_, i) => {
+      var _a, _b;
+      const page = Math.floor(i / this.limit) + 1;
+      const indexInPage = i % this.limit;
+      return (_b = (_a = this._loadedPages.get(page)) == null ? void 0 : _a[indexInPage]) != null ? _b : null;
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    if (typeof window !== "undefined") {
+      window.addEventListener(
+        "terra-time-average-map-data-change",
+        this._boundDataChangeHandler
+      );
+      window.addEventListener(
+        "terra-time-series-data-change",
+        this._boundDataChangeHandler
+      );
+    }
+  }
+  firstUpdated() {
+    if (this._viewportEl && typeof ResizeObserver !== "undefined") {
+      this._resizeObserver = new ResizeObserver(() => {
+        this._checkPagesInView();
+      });
+      this._resizeObserver.observe(this._viewportEl);
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this._resizeObserver) == null ? void 0 : _a.disconnect();
+    if (typeof window !== "undefined") {
+      window.removeEventListener(
+        "terra-time-average-map-data-change",
+        this._boundDataChangeHandler
+      );
+      window.removeEventListener(
+        "terra-time-series-data-change",
+        this._boundDataChangeHandler
+      );
+    }
+  }
+  updated(changedProperties) {
+    var _a;
+    super.updated(changedProperties);
+    const data = (_a = this.jobsQuery.result) == null ? void 0 : _a.data;
+    if (data && data !== this._lastPage1Data) {
+      this._lastPage1Data = data;
+      if (data.count !== this._totalCount) {
+        this._totalCount = data.count;
+      }
+      const newMap = new Map(this._loadedPages);
+      newMap.set(1, data.jobs);
+      this._loadedPages = newMap;
+      this._checkPagesInView();
+    }
+  }
+  async _refreshPage1() {
+    await this.queryClient.invalidateQueries({
+      queryKey: [
+        "harmony",
+        "jobs",
+        __spreadValues({
+          page: 1,
+          limit: this.limit
+        }, this.filterByLabels ? { label: this.filterByLabels } : {})
+      ]
+    });
+  }
+  async _fetchPage(page) {
+    if (this._loadedPages.has(page) || this._pendingPages.has(page))
+      return;
+    const newPending = new Set(this._pendingPages);
+    newPending.add(page);
+    this._pendingPages = newPending;
+    try {
+      const data = await this.queryClient.fetchQuery(
+        queryHarmonyJobs(
+          __spreadValues({
+            page,
+            limit: this.limit
+          }, this.filterByLabels ? { label: this.filterByLabels } : {}),
+          { bearerToken: this.bearerToken }
+        )
+      );
+      const newMap = new Map(this._loadedPages);
+      newMap.set(page, data.jobs);
+      this._loadedPages = newMap;
+    } finally {
+      const newPending2 = new Set(this._pendingPages);
+      newPending2.delete(page);
+      this._pendingPages = newPending2;
+    }
+  }
+  _checkPagesInView() {
+    if (!this.bearerToken)
+      return;
+    const endIndex = Math.min(
+      this._scrollIndex + this._visibleCount,
+      this._totalCount
+    );
+    const startPage = Math.floor(this._scrollIndex / this.limit) + 1;
+    const endPage = Math.floor(Math.max(0, endIndex - 1) / this.limit) + 1;
+    for (let page = startPage; page <= endPage; page++) {
+      if (page === 1)
+        continue;
+      this._fetchPage(page);
+    }
+  }
+  _scrollLeft() {
+    this._scrollIndex = Math.max(0, this._scrollIndex - 1);
+    this._checkPagesInView();
+  }
+  _scrollRight() {
+    const max = Math.max(0, this._totalCount - this._visibleCount);
+    this._scrollIndex = Math.min(max, this._scrollIndex + 1);
+    this._checkPagesInView();
+  }
+  _handleWheel(e2) {
+    e2.preventDefault();
+    if (e2.deltaY > 0) {
+      this._scrollRight();
+    } else {
+      this._scrollLeft();
+    }
+  }
+  async refresh() {
+    this._scrollIndex = 0;
+    this._loadedPages = /* @__PURE__ */ new Map();
+    this._pendingPages = /* @__PURE__ */ new Set();
+    this._totalCount = 0;
+    this._lastPage1Data = void 0;
+    await this.queryClient.invalidateQueries({
+      queryKey: ["harmony", "jobs"]
+    });
+  }
+  _showTooltip(e2, job) {
+    var _a, _b, _c;
+    clearTimeout(this._hideTooltipTimer);
+    clearTimeout(this._showTooltipTimer);
+    if (!this._tooltip)
+      return;
+    const isNonFinal = job !== null && !FINAL_STATUSES.has(job.status);
+    const harmonyRequest = (job == null ? void 0 : job.request) ? HarmonyRequest.fromUrl(job.request) : null;
+    const tooltipContent = document.createElement("div");
+    if (harmonyRequest) {
+      const instrumentShortName = harmonyRequest.getLabelByPrefix(
+        "instrument-short-name"
+      );
+      const interval = harmonyRequest.getLabelByPrefix("time-interval");
+      const units = harmonyRequest.getLabelByPrefix("units");
+      const collection = harmonyRequest.getLabelByPrefix("collection");
+      const metadata = [];
+      if (instrumentShortName)
+        metadata.push(instrumentShortName);
+      if (interval)
+        metadata.push(interval);
+      if (units)
+        metadata.push(units);
+      if (collection)
+        metadata.push(collection);
+      tooltipContent.style.lineHeight = "1.3";
+      tooltipContent.style.fontSize = "12px";
+      tooltipContent.style.padding = "5px";
+      tooltipContent.innerHTML = `
+                <div class="font-weight-semibold tooltip-row">${(_a = harmonyRequest.getLabelByPrefix("variable-display-name")) != null ? _a : job == null ? void 0 : job.jobID}</div>
+                <div class="text-gray-300 mb-1 tooltip-row">${metadata.join(" \u2022 ")}</div>
+                ${harmonyRequest.options.startDate && harmonyRequest.options.endDate ? `
+                    <div class="text-gray-300 tooltip-row">
+                        <terra-icon library="heroicons" name="solid-calendar-date-range"></terra-icon> 
+                        ${formatDatetimeUtc(harmonyRequest.options.startDate)} to ${formatDatetimeUtc(harmonyRequest.options.endDate)}
+                    </div>
+                ` : ""}
+                <div class="text-gray-300 mb-1 tooltip-row">
+                    <terra-icon library="heroicons" name="solid-map"></terra-icon>
+                    ${(_b = harmonyRequest.options.location) == null ? void 0 : _b.toString()}
+                </div>
+                ${!isNonFinal ? `<div class="text-gray-300 tooltip-row">
+                        Last updated: ${formatDate((_c = harmonyRequest.getLabelByPrefix("updated-at")) != null ? _c : /* @__PURE__ */ new Date())}
+                        </div>` : `<div class="text-gray-300 tooltip-row">Status: ${job == null ? void 0 : job.status}</div>`}
+                
+            `;
+    }
+    tooltipContent.slot = "content";
+    const anchor = e2.currentTarget;
+    if (this._tooltip.open) {
+      this._tooltip.innerHTML = "";
+      this._tooltip.appendChild(tooltipContent);
+      this._tooltip.popup.anchor = anchor;
+      this._tooltip.popup.reposition();
+    } else {
+      this._showTooltipTimer = window.setTimeout(() => {
+        if (!this._tooltip)
+          return;
+        this._tooltip.innerHTML = "";
+        this._tooltip.appendChild(tooltipContent);
+        this._tooltip.popup.anchor = anchor;
+        this._tooltip.show();
+      }, 100);
+    }
+  }
+  _hideTooltip() {
+    clearTimeout(this._showTooltipTimer);
+    clearTimeout(this._hideTooltipTimer);
+    this._hideTooltipTimer = window.setTimeout(() => {
+      var _a;
+      (_a = this._tooltip) == null ? void 0 : _a.hide();
+    }, 250);
+  }
+  _handleThumbnailClick(job) {
+    if (!job)
+      return;
+    this.emit("terra-harmony-job-select", { detail: { job } });
+  }
+  async _handleDeleteClick(e2, job) {
+    var _a;
+    e2.stopPropagation();
+    const confirmed = window.confirm(
+      `Are you sure you want to delete this history item?`
+    );
+    if (!confirmed)
+      return;
+    const labels = (_a = this.filterByLabels) == null ? void 0 : _a.split(",").map((l) => l.trim()).filter(Boolean);
+    this._optimisticallyRemoveJob(job.jobID);
+    if (this.removeLabelsOnDelete && (labels == null ? void 0 : labels.length)) {
+      await this._removeLabelsOnDeleteMutation.mutate({
+        jobIDs: [job.jobID],
+        labels,
+        options: { bearerToken: this.bearerToken }
+      });
+    } else {
+      this.emit("terra-harmony-job-delete", {
+        detail: { jobId: job.jobID }
+      });
+    }
+    await this._refreshPage1();
+  }
+  /** Removes a single job from the local page cache and decrements the total count. */
+  _optimisticallyRemoveJob(jobID) {
+    const newMap = new Map(this._loadedPages);
+    for (const [page, jobs] of newMap) {
+      const filtered = jobs.filter((j) => j.jobID !== jobID);
+      if (filtered.length !== jobs.length) {
+        newMap.set(page, filtered);
+        this._totalCount = Math.max(0, this._totalCount - 1);
+      }
+    }
+    this._loadedPages = newMap;
+  }
+  _renderThumbnail(job) {
+    var _a, _b;
+    const showLoadingOverlay = job === null || !FINAL_STATUSES.has(job.status);
+    const thumbUrl = (job == null ? void 0 : job.thumbnailBlob) ? URL.createObjectURL(job.thumbnailBlob) : null;
+    const harmonyRequest = HarmonyRequest.fromUrl((_a = job == null ? void 0 : job.request) != null ? _a : "");
+    return b`
+            <div
+                part="thumbnail"
+                class="thumbnail"
+                @click=${() => this._handleThumbnailClick(job)}
+                @mouseenter=${(e2) => this._showTooltip(e2, job)}
+                @mouseleave=${this._hideTooltip}
+            >
+                <div class="thumbnail-inner">
+                    ${thumbUrl ? b`<img
+                              class="thumbnail-img"
+                              src=${thumbUrl}
+                              alt=""
+                              aria-hidden="true"
+                          />` : b`<terra-icon
+                              library="heroicons"
+                              name=${harmonyRequest.getTerraIcon()}
+                              style="font-size: 1.5rem"
+                          ></terra-icon>`}
+                    ${showLoadingOverlay ? b`<div class="loading-overlay">
+                              <terra-loader
+                                  indeterminate
+                                  variant="small"
+                              ></terra-loader>
+                          </div>` : A}
+                </div>
+                ${job ? b`<button
+                          class="delete-button"
+                          aria-label="Delete job"
+                          ?disabled=${(_b = this._removeLabelsOnDeleteMutation.result) == null ? void 0 : _b.isPending}
+                          @click=${(e2) => this._handleDeleteClick(e2, job)}
+                      >
+                          ×
+                      </button>` : A}
+            </div>
+        `;
+  }
+  render() {
+    var _a;
+    const jobs = this._allJobs;
+    const isAtStart = this._scrollIndex <= 0;
+    const isAtEnd = this._totalCount === 0 || this._scrollIndex >= this._totalCount - this._visibleCount;
+    const isInitialLoading = jobs.length === 0 && ((_a = this.jobsQuery.result) == null ? void 0 : _a.status) === "pending";
+    return b`
+            <button
+                part="nav-button"
+                class="nav-button"
+                aria-label="Scroll left"
+                ?disabled=${isAtStart}
+                @click=${this._scrollLeft}
+            >
+                <svg
+                    width="16"
+                    height="16"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M15 19l-7-7 7-7"
+                    />
+                </svg>
+            </button>
+
+            <div part="viewport" class="viewport" @wheel=${this._handleWheel}>
+                <div
+                    part="track"
+                    class="track"
+                    style="transform: translateX(-${this._scrollIndex * STRIDE}px)"
+                >
+                    ${isInitialLoading ? b`<div class="empty-state">
+                              <terra-loader indeterminate></terra-loader>
+                          </div>` : jobs.map((job) => this._renderThumbnail(job))}
+                </div>
+            </div>
+
+            <button
+                part="nav-button"
+                class="nav-button"
+                aria-label="Scroll right"
+                ?disabled=${isAtEnd}
+                @click=${this._scrollRight}
+            >
+                <svg
+                    width="16"
+                    height="16"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M9 5l7 7-7 7"
+                    />
+                </svg>
+            </button>
+
+            <terra-tooltip
+                trigger="manual"
+                placement="top"
+                hoist
+                interactive
+                @mouseenter=${() => {
+      clearTimeout(this._showTooltipTimer);
+      clearTimeout(this._hideTooltipTimer);
+    }}
+                @mouseleave=${this._hideTooltip}
+            ></terra-tooltip>
+        `;
+  }
+};
+TerraHarmonyHistory.styles = [component_styles_default, harmony_history_styles_default];
+TerraHarmonyHistory.dependencies = {
+  "terra-loader": TerraLoader,
+  "terra-tooltip": TerraTooltip,
+  "terra-icon": TerraIcon
+};
+__decorateClass([
+  n({ attribute: "bearer-token" })
+], TerraHarmonyHistory.prototype, "bearerToken", 2);
+__decorateClass([
+  n({ type: Number })
+], TerraHarmonyHistory.prototype, "limit", 2);
+__decorateClass([
+  n({ attribute: "filter-by-labels" })
+], TerraHarmonyHistory.prototype, "filterByLabels", 2);
+__decorateClass([
+  n({ type: Boolean, attribute: "remove-labels-on-delete" })
+], TerraHarmonyHistory.prototype, "removeLabelsOnDelete", 2);
+__decorateClass([
+  r()
+], TerraHarmonyHistory.prototype, "_scrollIndex", 2);
+__decorateClass([
+  r()
+], TerraHarmonyHistory.prototype, "_totalCount", 2);
+__decorateClass([
+  r()
+], TerraHarmonyHistory.prototype, "_loadedPages", 2);
+__decorateClass([
+  r()
+], TerraHarmonyHistory.prototype, "_pendingPages", 2);
+__decorateClass([
+  e('[part="viewport"]')
+], TerraHarmonyHistory.prototype, "_viewportEl", 2);
+__decorateClass([
+  e("terra-tooltip")
+], TerraHarmonyHistory.prototype, "_tooltip", 2);
+
+export {
+  TerraHarmonyHistory
+};