@nasa-terra/components 0.0.7 → 0.0.9

package/README.md

@@ -38,11 +38,18 @@ To scaffold a new component, run the following command, replacing `terra-tag-nam
 npm run create terra-tag-name
 ```
 
-This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
+This will generate source files, a stylesheet, a Jupyter widget, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar. Do a `git status` to see all the changes this command made.
 
-### Contributing
+### Testing Components in Jupyter Lab
 
-Terra UI Components is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
+Install the `uv` package manager (https://github.com/astral-sh/uv), it's a lightweight tool that makes working with virtual environments and packages much easier.
+
+Then run the following:
+
+-   `uv venv` - create a virtual environment (only have to do this the first time)
+-   `source .venv/bin/activate` - activate it
+-   `uv pip install -e ".[dev]"` - install dependencies (see pyproject.toml)
+-   `./.venv/bin/jupyter lab` - spins up Jupyter lab and should open the browser for you
 
 ## License
 

package/cdn/chunks/{chunk.CPNLKTGF.js → chunk.2463X3BU.js}

@@ -1,6 +1,6 @@
 import {
   TerraSpatialPicker
-} from "./chunk.UBYAPUL3.js";
+} from "./chunk.PB3BAC36.js";
 
 // src/react/spatial-picker/index.ts
 import * as React from "react";

package/cdn/chunks/{chunk.2BF5ZHP6.js → chunk.2AR3YFY6.js}

@@ -1,41 +1,41 @@
-import {
-  variable_combobox_styles_default
-} from "./chunk.ZKRXIISK.js";
 import {
   FetchController
-} from "./chunk.R2AQMZE4.js";
+} from "./chunk.GCXPHNE2.js";
 import {
   clearSelection,
   groupDocsByCollection,
   removeEmptyCollections,
   renderSearchResult,
   walkToOption
-} from "./chunk.5DPGWL3Y.js";
+} from "./chunk.7JHEI2UU.js";
+import {
+  variable_combobox_styles_default
+} from "./chunk.SWEK2UAG.js";
 import {
   icon_default
-} from "./chunk.NFSGAK6D.js";
+} from "./chunk.R4AGAL4B.js";
 import {
-  button_default
-} from "./chunk.RZV7PTZZ.js";
+  h
+} from "./chunk.QB5SASDL.js";
 import {
   Fuse
 } from "./chunk.NTNL4P6D.js";
 import {
   n as n2
 } from "./chunk.2XCNCXGV.js";
-import {
-  h
-} from "./chunk.QB5SASDL.js";
 import {
   o
 } from "./chunk.QEA4QW6G.js";
+import {
+  button_default
+} from "./chunk.7ADLGY5T.js";
 import {
   watch
 } from "./chunk.IUDWCWFV.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.THBBULDA.js";
+} from "./chunk.XTN2KUNR.js";
 import {
   n,
   r
@@ -198,7 +198,7 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    globalThis.addEventListener("click", __privateGet(this, _manageListboxVisibility));
+    globalThis.removeEventListener("click", __privateGet(this, _manageListboxVisibility));
   }
   clear() {
     this.query = _TerraVariableCombobox.initialQuery;
@@ -213,9 +213,7 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
     var _a, _b, _c;
     const searchHasNoMatches = ((_a = this.searchResults) == null ? void 0 : _a.length) === 0 && ((_b = __privateGet(this, _searchableList)) == null ? void 0 : _b.length) !== 0 && this.query !== _TerraVariableCombobox.initialQuery;
     return x`<search part="base" title="Search through the list.">
-            <label
-                for="combobox"
-                class=${this.hideLabel ? "sr-only" : "search-input-label"}
+            <label for="combobox" class=${this.hideLabel ? "sr-only" : "input-label"}
                 >${this.label}</label
             >
             <div class="search-input-group">
@@ -228,6 +226,7 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
     })}
                     aria-autocomplete="list"
                     aria-controls="listbox"
+                    aria-haspopup="list"
                     aria-expanded=${this.isExpanded}
                     class="combobox"
                     id="combobox"
@@ -239,7 +238,8 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
                     @input=${__privateGet(this, _handleComboboxChange)}
                     @keydown=${__privateGet(this, _handleKeydown)}
                 />
-                <button
+                <terra-button
+                    shape="square-left"
                     aria-controls="listbox"
                     aria-expanded=${this.isExpanded}
                     aria-label="List of Searchable Variables"
@@ -267,7 +267,7 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
                                   stroke-width="3"
                               ></circle>
                           </svg>`}
-                </button>
+                </terra-button>
 
                 ${this.hideHelp ? T : x`<p class="search-help">
                           See
@@ -277,17 +277,10 @@ var _TerraVariableCombobox = class _TerraVariableCombobox extends TerraElement {
                               tabindex=${this.isExpanded ? "-1 " : "0"}
                               target="_blank"
                               >extended search syntax
-                              <svg
-                                  aria-hidden="true"
-                                  class="external-link"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                  width="14"
-                                  height="14"
-                                  viewBox="0 0 24 24"
-                              >
-                                  <path
-                                      d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
-                                  /></svg></a
+                              <terra-icon
+                                  name="outline-arrow-top-right-on-square"
+                                  library="heroicons"
+                              ></terra-icon></a
                           >.
                       </p>`}
             </div>

package/cdn/chunks/{chunk.UUZHIWQZ.js → chunk.2B3T647S.js}

@@ -1,9 +1,3 @@
-import {
-  MapController
-} from "./chunk.KPXFSE3J.js";
-import {
-  map_styles_default
-} from "./chunk.L7XOR6JZ.js";
 import {
   leaflet_draw_styles_default
 } from "./chunk.KJ4BZBTX.js";
@@ -13,6 +7,12 @@ import {
 import {
   leaflet_styles_default
 } from "./chunk.VHHIJXG2.js";
+import {
+  MapController
+} from "./chunk.KPXFSE3J.js";
+import {
+  map_styles_default
+} from "./chunk.TZK42POE.js";
 import {
   h
 } from "./chunk.QB5SASDL.js";
@@ -25,7 +25,7 @@ import {
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.THBBULDA.js";
+} from "./chunk.XTN2KUNR.js";
 import {
   e,
   n,

package/cdn/chunks/chunk.3WUZMCON.js

@@ -0,0 +1,198 @@
+import {
+  TerraElement,
+  component_styles_default
+} from "./chunk.XTN2KUNR.js";
+import {
+  n,
+  r
+} from "./chunk.K4EJQG4O.js";
+import {
+  BrowseVariablesController
+} from "./chunk.7QABLDUG.js";
+import {
+  browse_variables_styles_default
+} from "./chunk.TNP7NVU5.js";
+import {
+  x
+} from "./chunk.PQFHJHNO.js";
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod
+} from "./chunk.6QUGTGJO.js";
+
+// src/components/browse-variables/browse-variables.component.ts
+var _controller, _renderCategorySelect, renderCategorySelect_fn, _renderFacet, renderFacet_fn, _renderVariablesBrowse, renderVariablesBrowse_fn;
+var TerraBrowseVariables = class extends TerraElement {
+  constructor() {
+    super(...arguments);
+    __privateAdd(this, _renderCategorySelect);
+    __privateAdd(this, _renderFacet);
+    __privateAdd(this, _renderVariablesBrowse);
+    this.catalog = "giovanni";
+    this.selectedFacetFields = [];
+    __privateAdd(this, _controller, new BrowseVariablesController(this));
+    this.handleFacetSelect = (event) => {
+      const target = event.target;
+      if (!target.dataset.facet) {
+        return;
+      }
+      this.selectedFacetFields.push({
+        facet: target.dataset.facet,
+        field: target.innerText.trim()
+      });
+    };
+  }
+  render() {
+    return this.selectedFacetFields.length ? __privateMethod(this, _renderVariablesBrowse, renderVariablesBrowse_fn).call(this) : __privateMethod(this, _renderCategorySelect, renderCategorySelect_fn).call(this);
+  }
+};
+_controller = new WeakMap();
+_renderCategorySelect = new WeakSet();
+renderCategorySelect_fn = function() {
+  var _a, _b, _c, _d, _e, _f;
+  return x`<div class="initial-browse-container">
+            <div class="column">
+                <h2>Research Areas</h2>
+                <ul role="list">
+                    ${(_b = (_a = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _a.disciplines) == null ? void 0 : _b.map(
+    (field) => x`<li
+                                role="button"
+                                tabindex="0"
+                                aria-selected="false"
+                                data-facet="disciplines"
+                                @click=${this.handleFacetSelect}
+                            >
+                                ${field.name}
+                            </li>`
+  )}
+                </ul>
+            </div>
+
+            <div class="column">
+                <h2>Measurements</h2>
+                <ul role="list">
+                    ${(_d = (_c = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _c.measurements) == null ? void 0 : _d.map(
+    (field) => x`<li
+                                role="button"
+                                tabindex="0"
+                                aria-selected="false"
+                                data-facet="measurements"
+                                @click=${this.handleFacetSelect}
+                            >
+                                ${field.name}
+                            </li>`
+  )}
+                </ul>
+            </div>
+
+            <div class="column">
+                <h2>Sources</h2>
+                <ul role="list">
+                    ${(_f = (_e = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _e.platformInstruments) == null ? void 0 : _f.map(
+    (field) => x`<li
+                                role="button"
+                                tabindex="0"
+                                aria-selected="false"
+                                data-facet="platformInstruments"
+                                @click=${this.handleFacetSelect}
+                            >
+                                ${field.name}
+                            </li>`
+  )}
+                </ul>
+            </div>
+        </div>`;
+};
+_renderFacet = new WeakSet();
+renderFacet_fn = function(title, fields, open) {
+  return x`<details ?open=${open}>
+            <summary>${title}</summary>
+
+            ${(fields != null ? fields : []).map(
+    (field) => x`
+                    <div>
+                        <label
+                            ><input type="checkbox" /> ${field.name}
+                            (${field.count})</label
+                        >
+                    </div>
+                `
+  )}
+        </details>`;
+};
+_renderVariablesBrowse = new WeakSet();
+renderVariablesBrowse_fn = function() {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  return x`<div class="variables-container">
+            <aside class="sidebar">
+                <h2>Filter</h2>
+
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Observations", (_a = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _a.observations, true)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Disciplines", (_b = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _b.disciplines)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Measurements", (_c = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _c.measurements)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Platform / Instrument", (_d = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _d.platformInstruments)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Spatial Resolutions", (_e = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _e.spatialResolutions)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Temporal Resolutions", (_f = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _f.temporalResolutions)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Wavelengths", (_g = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _g.wavelengths)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Depths", (_h = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _h.depths)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Special Features", (_i = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _i.specialFeatures)}
+                ${__privateMethod(this, _renderFacet, renderFacet_fn).call(this, "Portal", (_j = __privateGet(this, _controller).facetsByCategory) == null ? void 0 : _j.portals)}
+            </aside>
+
+            <main class="content">
+                <section class="group">
+                    <h3>Category</h3>
+
+                    <ul class="variable-list">
+                        ${(_k = __privateGet(this, _controller).variables) == null ? void 0 : _k.map(
+    (variable) => x`
+                                <li tabindex="0" aria-selected="false">
+                                    <input type="checkbox" />
+                                    <strong>${variable.dataFieldLongName}</strong>
+                                    <span class="meta"
+                                        >MERRA-2 • ${variable.dataProductTimeInterval}
+                                        • kg-m2</span
+                                    >
+                                    <div class="details-panel">
+                                        <h4>
+                                            Science Name:
+                                            ${variable.dataFieldLongName}
+                                        </h4>
+                                        <p>
+                                            <strong>Spatial Resolution:</strong>
+                                            ${variable.dataProductSpatialResolution}
+                                        </p>
+                                        <p>
+                                            <strong>Temporal Coverage:</strong>
+                                            ${variable.dataProductBeginDateTime} -
+                                            ${variable.dataProductEndDateTime}
+                                        </p>
+                                        <p>
+                                            <strong>Region Coverage:</strong> Global
+                                        </p>
+                                        <p><strong>Dataset:</strong> MERRA-2</p>
+                                    </div>
+                                </li>
+                            `
+  )}
+                    </ul>
+                </section>
+            </main>
+        </div>`;
+};
+TerraBrowseVariables.styles = [component_styles_default, browse_variables_styles_default];
+__decorateClass([
+  n()
+], TerraBrowseVariables.prototype, "searchQuery", 2);
+__decorateClass([
+  n()
+], TerraBrowseVariables.prototype, "catalog", 2);
+__decorateClass([
+  r()
+], TerraBrowseVariables.prototype, "selectedFacetFields", 2);
+
+export {
+  TerraBrowseVariables
+};

package/cdn/chunks/{chunk.L4ODCAGX.js → chunk.4X3H4SXF.js}

@@ -1,6 +1,6 @@
 import {
   TerraVariableCombobox
-} from "./chunk.2BF5ZHP6.js";
+} from "./chunk.2AR3YFY6.js";
 
 // src/react/variable-combobox/index.ts
 import * as React from "react";

package/{dist/chunks/chunk.CNBF6GCR.js → cdn/chunks/chunk.5BNGCWLY.js}

@@ -1,6 +1,6 @@
 import {
   TerraPlot
-} from "./chunk.IEHDLSGA.js";
+} from "./chunk.BZAX3KPT.js";
 
 // src/components/plot/plot.ts
 var plot_default = TerraPlot;

package/cdn/chunks/chunk.5FZY6SGS.js

@@ -0,0 +1,61 @@
+import {
+  i
+} from "./chunk.PH7RLQK2.js";
+
+// src/components/spatial-picker/spatial-picker.styles.ts
+var spatial_picker_styles_default = i`
+    :host {
+        display: block;
+        position: relative;
+        max-width: 600px;
+    }
+
+    :host .spatial-picker__input_fields {
+        position: relative;
+    }
+
+    :host input {
+        box-shadow: none;
+    }
+
+    :host .form-control {
+        display: block;
+        width: 100%;
+        height: 36px;
+        padding: 6px 12px;
+        background-image: none;
+        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+        -webkit-transition:
+            border-color ease-in-out 0.15s,
+            box-shadow ease-in-out 0.15s;
+        transition:
+            background-color 0.2s ease,
+            border-color 0.2s ease;
+    }
+
+    :host .spatial-picker__input_icon_button {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: 36px;
+        padding: 0px;
+        z-index: 2;
+        margin-block: 0;
+        margin-inline: 0;
+    }
+
+    :host .spatial-picker__input_icon_button svg {
+        height: 1.4rem;
+        width: 1.4rem;
+    }
+
+    .button-icon {
+        height: 1rem;
+        width: 1rem;
+    }
+`;
+
+export {
+  spatial_picker_styles_default
+};

package/cdn/chunks/chunk.5IYEJYZC.js

@@ -0,0 +1,21 @@
+import {
+  TerraBrowseVariables
+} from "./chunk.3WUZMCON.js";
+
+// src/react/browse-variables/index.ts
+import * as React from "react";
+import { createComponent } from "@lit/react";
+var tagName = "terra-browse-variables";
+TerraBrowseVariables.define("terra-browse-variables");
+var reactWrapper = createComponent({
+  tagName,
+  elementClass: TerraBrowseVariables,
+  react: React,
+  events: {},
+  displayName: "TerraBrowseVariables"
+});
+var browse_variables_default = reactWrapper;
+
+export {
+  browse_variables_default
+};

package/cdn/chunks/{chunk.P3N5PW3F.js → chunk.5SINCXSM.js}

@@ -7,19 +7,19 @@ import {
   FormControlController,
   validValidityState
 } from "./chunk.BT4IJCQK.js";
-import {
-  button_styles_default
-} from "./chunk.NTB4EIFE.js";
 import {
   e
 } from "./chunk.YVSJQ4KD.js";
 import {
   watch
 } from "./chunk.IUDWCWFV.js";
+import {
+  button_styles_default
+} from "./chunk.YVG2XG3L.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.THBBULDA.js";
+} from "./chunk.XTN2KUNR.js";
 import {
   e as e2,
   n as n2,
@@ -91,13 +91,12 @@ var TerraButton = class extends TerraElement {
     this.hasFocus = false;
     this.invalid = false;
     this.title = "";
-    this.variant = "default";
+    this.variant = "primary";
     this.size = "medium";
     this.caret = false;
     this.disabled = false;
     this.loading = false;
     this.outline = false;
-    this.pill = false;
     this.circle = false;
     this.type = "button";
     this.name = "";
@@ -193,6 +192,24 @@ var TerraButton = class extends TerraElement {
       this.formControlController.updateValidity();
     }
   }
+  setPageLinkIcon(href) {
+    const parsedUrl = new URL(href);
+    const linkDomain = parsedUrl.hostname;
+    const hostDomain = globalThis.location.hostname;
+    return linkDomain === hostDomain ? "outline-arrow-right" : "outline-arrow-up-right";
+  }
+  setFontSize(size) {
+    switch (size) {
+      case "small":
+        return ".8rem";
+      case "medium":
+        return "1.2rem";
+      case "large":
+        return "1.5rem";
+      default:
+        return "1.5rem";
+    }
+  }
   render() {
     const isLink = this.isLink();
     const tag = isLink ? s`a` : s`button`;
@@ -204,21 +221,23 @@ var TerraButton = class extends TerraElement {
       "button--default": this.variant === "default",
       "button--primary": this.variant === "primary",
       "button--success": this.variant === "success",
-      "button--neutral": this.variant === "neutral",
       "button--warning": this.variant === "warning",
       "button--danger": this.variant === "danger",
       "button--text": this.variant === "text",
+      "button--pagelink": this.variant === "pagelink",
       "button--small": this.size === "small",
       "button--medium": this.size === "medium",
       "button--large": this.size === "large",
       "button--caret": this.caret,
+      "button--square-left": this.shape === "square-left",
+      "button--square": this.shape === "square",
+      "button--square-right": this.shape === "square-right",
       "button--circle": this.circle,
       "button--disabled": this.disabled,
       "button--focused": this.hasFocus,
       "button--loading": this.loading,
       "button--standard": !this.outline,
       "button--outline": this.outline,
-      "button--pill": this.pill,
       "button--has-label": this.hasSlotController.test("[default]"),
       "button--has-prefix": this.hasSlotController.test("prefix"),
       "button--has-suffix": this.hasSlotController.test("suffix")
@@ -242,7 +261,17 @@ var TerraButton = class extends TerraElement {
       >
         <slot name="prefix" part="prefix" class="button__prefix"></slot>
         <slot part="label" class="button__label"></slot>
-        <slot name="suffix" part="suffix" class="button__suffix"></slot>
+        <slot name="suffix" part="suffix" class="button__suffix">
+            ${this.variant == "pagelink" ? n`
+                          <span>
+                              <terra-icon
+                                  name=${this.setPageLinkIcon(this.href)}
+                                  library="heroicons"
+                                  font-size=${this.setFontSize(this.size)}
+                              ></terra-icon>
+                          </span>
+                      ` : ``}
+        </slot>
       </${tag}>
     `;
   }
@@ -269,6 +298,9 @@ __decorateClass([
 __decorateClass([
   n2({ type: Boolean, reflect: true })
 ], TerraButton.prototype, "caret", 2);
+__decorateClass([
+  n2({ reflect: true })
+], TerraButton.prototype, "shape", 2);
 __decorateClass([
   n2({ type: Boolean, reflect: true })
 ], TerraButton.prototype, "disabled", 2);
@@ -278,9 +310,6 @@ __decorateClass([
 __decorateClass([
   n2({ type: Boolean, reflect: true })
 ], TerraButton.prototype, "outline", 2);
-__decorateClass([
-  n2({ type: Boolean, reflect: true })
-], TerraButton.prototype, "pill", 2);
 __decorateClass([
   n2({ type: Boolean, reflect: true })
 ], TerraButton.prototype, "circle", 2);

package/{dist/chunks/chunk.UNE3VYFP.js → cdn/chunks/chunk.5UDVR4WP.js}

@@ -1,6 +1,6 @@
 import {
   TerraSpatialPicker
-} from "./chunk.FFZEV52Q.js";
+} from "./chunk.PB3BAC36.js";
 
 // src/components/spatial-picker/spatial-picker.ts
 var spatial_picker_default = TerraSpatialPicker;

package/cdn/chunks/{chunk.RZV7PTZZ.js → chunk.7ADLGY5T.js}

@@ -1,6 +1,6 @@
 import {
   TerraButton
-} from "./chunk.P3N5PW3F.js";
+} from "./chunk.5SINCXSM.js";
 
 // src/components/button/button.ts
 var button_default = TerraButton;

package/cdn/chunks/{chunk.5DPGWL3Y.js → chunk.7JHEI2UU.js}

@@ -5,6 +5,7 @@ import {
   x
 } from "./chunk.PQFHJHNO.js";
 import {
+  __objRest,
   __spreadProps,
   __spreadValues
 } from "./chunk.6QUGTGJO.js";
@@ -63,24 +64,19 @@ function cherryPickDocInfo(docs) {
       collectionLongName: doc["Collection.LongName"],
       collectionShortName: doc["Collection.ShortName"],
       collectionVersion: doc["Collection.Version"],
-      name: doc["Variable.Name"],
+      entryId: `${doc["Collection.ShortName"]}_${doc["Collection.Version"]}_${doc["Variable.Name"]}`,
       longName: doc["Variable.LongName"],
+      name: doc["Variable.Name"],
       standardName: doc["Variable.StandardName"],
-      units: doc["Variable.Units"],
-      entryId: `${doc["Collection.ShortName"]}_${doc["Collection.Version"]}_${doc["Variable.Name"]}`
-    };
-    const eventDetail = JSON.stringify({
-      collectionBeginningDateTime: doc["Collection.BeginDateTime"],
-      collectionEndingDateTime: doc["Collection.EndDateTime"],
-      collectionShortName: renderableData.collectionShortName,
-      collectionVersion: renderableData.collectionVersion,
-      name: renderableData.name,
-      longName: renderableData.longName,
-      standardName: renderableData.standardName,
-      entryId: renderableData.entryId,
       units: doc["Variable.Units"]
+    };
+    const _a = renderableData, { collectionLongName } = _a, eventDetails = __objRest(_a, ["collectionLongName"]);
+    return __spreadProps(__spreadValues({}, renderableData), {
+      eventDetail: JSON.stringify(__spreadProps(__spreadValues({}, eventDetails), {
+        datasetLandingPage: doc["Collection.DescriptionUrl"],
+        variableLandingPage: doc["Variable.DescriptionUrl"]
+      }))
     });
-    return __spreadProps(__spreadValues({}, renderableData), { eventDetail });
   });
 }
 function clearSelection(combobox, listbox) {