@nasa-terra/components 0.0.195 → 0.0.196

package/dist/chunks/chunk.XJ5BSBB7.js

@@ -0,0 +1,299 @@
+import{b as q}from"./chunk.UXPPNGDD.js";import{a as W}from"./chunk.WMO3XFWN.js";import{a as Q}from"./chunk.ZLR3GVCO.js";import{a as H}from"./chunk.QDFHF7LY.js";import{a as Z}from"./chunk.KF4DMI4T.js";import{a as D}from"./chunk.XWAHYN4Q.js";import{a as M}from"./chunk.QWFODK2P.js";import{a as j}from"./chunk.3TTTQDTO.js";import{a as G}from"./chunk.LXQROJE2.js";import{a as B}from"./chunk.J3UHFD4B.js";import{a as N}from"./chunk.KVKFLEA5.js";import{a as E}from"./chunk.J5Q4TWEG.js";import{a as P,c as R}from"./chunk.BLIMMPQ7.js";import{a as V,b as L,c as O,d as A,e as h,f as p,g as c,i as l}from"./chunk.INFVQQSJ.js";import{html as n,nothing as g}from"lit";import{property as U,state as v}from"lit/decorators.js";var d,b,f,y,T,$,z,F,_,S,J,I,X,w,Y,k,ee,x,te,C,ae,o=class extends H(R){constructor(){super(...arguments);c(this,b);c(this,y);c(this,$);c(this,F);c(this,S);c(this,I);c(this,w);c(this,k);c(this,x);c(this,C);this.catalog="giovanni";this.selectedFacets={};this.selectedVariables=[];this.showVariablesBrowse=!1;this.activeIndex=void 0;this.sortOrder="aToZ";c(this,d,new j(this))}handleSelectedVariablesChange(){this.emit("terra-variables-change",{detail:{selectedVariables:this.selectedVariables}})}reset(){this.searchQuery="",this.selectedFacets={},this.showVariablesBrowse=!1}handleObservationChange(){var r,t,a;let e=(a=(t=(r=this.shadowRoot)==null?void 0:r.querySelector('input[name="observation"]:checked'))==null?void 0:t.value)!=null?a:"All";e==="All"?l(this,y,T).call(this,"observations"):l(this,b,f).call(this,"observations",e,!0)}toggleFacetSelect(e){let r=e.target;r.dataset.facet&&(l(this,b,f).call(this,r.dataset.facet,r.innerText.trim()),this.showVariablesBrowse=!0)}handleSearch(e){this.selectedFacets={},this.searchQuery=e.detail,this.showVariablesBrowse=!0}render(){let e=p(this,d).isPending&&p(this,d).facetsByCategory;return n`
+            <div class="container">
+                <header class="search">
+                    ${this.showVariablesBrowse?n`
+                              <terra-button @click=${this.reset}>
+                                  <terra-icon
+                                      name="solid-chevron-left"
+                                      library="heroicons"
+                                      font-size="1.5em"
+                                  ></terra-icon>
+                              </terra-button>
+                          `:g}
+
+                    <terra-variable-keyword-search
+                        @terra-search=${this.handleSearch}
+                    ></terra-variable-keyword-search>
+                </header>
+
+                ${this.showVariablesBrowse?l(this,C,ae).call(this,!!e):l(this,k,ee).call(this)}
+
+                <dialog ?open=${e}>
+                    <terra-loader indeterminate></terra-loader>
+                </dialog>
+            </div>
+        `}getVariable(e){return p(this,d).getVariable(e)}};d=new WeakMap,b=new WeakSet,f=function(e,r,t=!1){let a=this.selectedFacets[e]||[];if(a.includes(r)){l(this,$,z).call(this,e,r);return}this.selectedFacets=L(V({},this.selectedFacets),{[e]:t?[r]:[...a,r]})},y=new WeakSet,T=function(e){let a=this.selectedFacets,{[e]:r}=a,t=A(a,[O(e)]);this.selectedFacets=t},$=new WeakSet,z=function(e,r){if(!this.selectedFacets[e])return;let t=this.selectedFacets[e].filter(a=>a!==r);if(!t.length){l(this,y,T).call(this,e);return}this.selectedFacets=L(V({},this.selectedFacets),{[e]:t})},F=new WeakSet,_=function(e,r){let t=this.selectedVariables.find(a=>a.dataFieldLongName===e.dataFieldLongName);r&&!t?this.selectedVariables=[].concat(this.selectedVariables,e):!r&&t&&(this.selectedVariables=this.selectedVariables.filter(a=>a.dataFieldLongName!==e.dataFieldLongName))},S=new WeakSet,J=function(e){let t=e.detail.item.value;(t==="aToZ"||t==="zToA")&&(this.sortOrder=t,requestAnimationFrame(()=>{e.target.querySelectorAll("terra-menu-item").forEach(s=>{s.value===this.sortOrder?s.checked=!0:s.checked=!1})}))},I=new WeakSet,X=function(){return[...p(this,d).variables].sort((t,a)=>{let i=t.dataFieldLongName.toLowerCase(),s=a.dataFieldLongName.toLowerCase();return this.sortOrder==="aToZ"?i.localeCompare(s):s.localeCompare(i)})},w=new WeakSet,Y=function(){let e=[];Object.values(this.selectedFacets).forEach(i=>{e.push(...i)});let r=e.length>0,t=!!this.searchQuery;if(!r&&!t)return"";let a="Browsing";if(r){if(e.length===1)a+=` '${e[0]}'`;else if(e.length===2)a+=` '${e[0]}' and '${e[1]}'`;else{let i=e.slice(0,-1),s=e[e.length-1];a+=` '${i.join("', '")}', and '${s}'`}a+=" variables"}else a+=" variables";return t&&(a+=` for query \`${this.searchQuery}\``),a},k=new WeakSet,ee=function(){var r,t;let e=[{title:"Research Areas",facetKey:"disciplines"},{title:"Measurements",facetKey:"measurements"},{title:"Sources",facetKey:"platformInstruments"}];return n`
+            <div class="scrollable browse-by-category">
+                <aside>
+                    <h3>Observations</h3>
+
+                    ${(r=p(this,d).facetsByCategory)!=null&&r.observations.length?n`
+                              <label>
+                                  <input
+                                      type="radio"
+                                      name="observation"
+                                      value="All"
+                                      @change=${this.handleObservationChange}
+                                      checked
+                                  />
+                                  All</label
+                              >
+
+                              ${(t=p(this,d).facetsByCategory)==null?void 0:t.observations.map(a=>n`<label>
+                                          <input
+                                              type="radio"
+                                              name="observation"
+                                              value=${a.name}
+                                              @change=${this.handleObservationChange}
+                                          />
+                                          ${a.name}
+                                      </label>`)}
+                          `:n`<terra-skeleton
+                              rows="4"
+                              variableWidths
+                          ></terra-skeleton>`}
+
+                    <terra-button
+                        variant="text"
+                        size
+                        @click=${()=>this.showVariablesBrowse=!0}
+                        >View All Now</terra-button
+                    >
+                </aside>
+
+                <main>
+                    ${e.map(a=>{var i,s,m;return n`
+                            <div class="column">
+                                <h3>${a.title}</h3>
+                                <ul role="list">
+                                    ${(m=(s=(i=p(this,d).facetsByCategory)==null?void 0:i[a.facetKey])==null?void 0:s.filter(u=>u.count>0).map(u=>n`<li
+                                                    role="button"
+                                                    tabindex="0"
+                                                    aria-selected="false"
+                                                    data-facet=${a.facetKey}
+                                                    @click=${this.toggleFacetSelect}
+                                                >
+                                                    ${u.name}
+                                                </li>`))!=null?m:n`<terra-skeleton
+                                        rows=${Z(8,12)}
+                                        variableWidths
+                                    ></terra-skeleton>`}
+                                </ul>
+                            </div>
+                        `})}
+                </main>
+            </div>
+        `},x=new WeakSet,te=function(e,r,t,a){return(t!=null?t:[]).some(s=>s.count>0)?n`<details ?open=${a}>
+            <summary>${r}</summary>
+
+            ${(t!=null?t:[]).map(s=>{var m;return s.count>0?n`
+                          <div class="facet">
+                              <label
+                                  ><input
+                                      type="checkbox"
+                                      @change=${()=>l(this,b,f).call(this,e,s.name)}
+                                      ?checked=${(m=this.selectedFacets[e])==null?void 0:m.includes(s.name)}
+                                  />
+                                  ${s.name}
+                                  <!-- TODO: add count back in once we aren't filtering by Cloud Giovanni Catalog (or Cloud Giovanni supports all variables)(${s.count})--></label
+                              >
+                          </div>
+                      `:g})}
+        </details>`:g},C=new WeakSet,ae=function(e){let r=[{title:"Observations",facetKey:"observations",open:!0},{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"}],t=l(this,I,X).call(this),a=l(this,w,Y).call(this);return n`<div class="scrollable variables-container">
+            <header>
+                <div>${a}</div>
+
+                <menu>
+                    <li>
+                        <terra-dropdown
+                            class="list-menu-dropdown"
+                            placement="bottom-end"
+                        >
+                            <terra-button
+                                slot="trigger"
+                                variant="default"
+                                outline
+                                caret
+                                >Sort by ${q(this.sortOrder)}</terra-button
+                            >
+                            <terra-menu @terra-select=${l(this,S,J)}>
+                                <terra-menu-item
+                                    type="checkbox"
+                                    value="aToZ"
+                                    ?checked=${this.sortOrder==="aToZ"}
+                                    >A to Z</terra-menu-item
+                                >
+                                <terra-menu-item
+                                    type="checkbox"
+                                    value="zToA"
+                                    ?checked=${this.sortOrder==="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>
+
+                ${r.map(i=>{var s;return l(this,x,te).call(this,i.facetKey,i.title,(s=p(this,d).facetsByCategory)==null?void 0:s[i.facetKey],i.open)})}
+            </aside>
+
+            <main class="variable-layout">
+                <!-- LEFT COLUMN -->
+                <section class="left-column">
+                    <ul class="variable-list">
+                        ${!e&&!t.length?n`
+                                  <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>
+                              `:g}
+                        ${t.map((i,s)=>n`
+                                <li
+                                    aria-selected="false"
+                                    class="variable-list-item"
+                                    @mouseenter=${()=>this.activeIndex=s}
+                                    @mouseleave=${()=>this.activeIndex=void 0}
+                                    @focusin=${()=>this.activeIndex=s}
+                                    @focusout=${()=>this.activeIndex=void 0}
+                                    @click=${m=>{let u=m.currentTarget,K=u.querySelector('input[type="checkbox"]');K&&(u==null||u.setAttribute("aria-selected",`${K.checked}`))}}
+                                >
+                                    <div class="variable">
+                                        <label>
+                                            <input
+                                                data-variable=${i}
+                                                type="checkbox"
+                                                @change=${m=>{let u=m.currentTarget;l(this,F,_).call(this,i,u.checked)}}
+                                            />
+                                            <strong
+                                                >${i.dataFieldLongName}</strong
+                                            >
+                                            <span
+                                                >${i.dataProductShortName}_${i.dataProductVersion}
+                                                &bull;
+                                                ${i.dataProductTimeInterval}
+                                                &bull;
+                                                ${i.dataProductSpatialResolution}</span
+                                            >
+                                        </label>
+                                    </div>
+                                </li>
+                            `)}
+                    </ul>
+                </section>
+
+                <!-- RIGHT COLUMN -->
+                ${!e&&!t.length?g:n`
+                          <section class="right-column">
+                              ${this.activeIndex!==void 0?n`
+                                        <div class="sticky-element">
+                                            <p>
+                                                <label
+                                                    ><strong
+                                                        >Name in Data File:</strong
+                                                    ></label
+                                                >
+                                                ${t[this.activeIndex].dataFieldShortName}
+                                            </p>
+                                            <p>
+                                                <label><strong>Units:</strong></label>
+                                                ${t[this.activeIndex].dataFieldUnits}
+                                            </p>
+                                            <p>
+                                                <label
+                                                    ><strong
+                                                        >Temporal Coverage:</strong
+                                                    ></label
+                                                >
+                                                ${t[this.activeIndex].dataProductBeginDateTime}
+                                                –
+                                                ${t[this.activeIndex].dataProductEndDateTime}
+                                            </p>
+                                            <p>
+                                                <label
+                                                    ><strong
+                                                        >Region Coverage:</strong
+                                                    ></label
+                                                >
+                                                ${t[this.activeIndex].dataProductWest},
+                                                ${t[this.activeIndex].dataProductSouth},
+                                                ${t[this.activeIndex].dataProductEast},
+                                                ${t[this.activeIndex].dataProductNorth}
+                                            </p>
+                                            <p>
+                                                <label
+                                                    ><strong
+                                                        >Spatial Resolution:</strong
+                                                    ></label
+                                                >
+                                                ${t[this.activeIndex].dataProductSpatialResolution}
+                                            </p>
+                                            <p>
+                                                <label
+                                                    ><strong>Dataset:</strong></label
+                                                >
+                                                ${t[this.activeIndex].dataProductShortName}_${t[this.activeIndex].dataProductVersion}
+                                            </p>
+                                        </div>
+                                    `:n`<p class="placeholder">
+                                        Hover over a variable to see details
+                                    </p>`}
+                          </section>
+                      `}
+            </main>
+        </div> `},o.styles=[P,G],o.dependencies={"terra-variable-keyword-search":W,"terra-button":M,"terra-skeleton":Q,"terra-icon":B,"terra-loader":D,"terra-alert":N},h([U()],o.prototype,"catalog",2),h([U({attribute:"selected-variable-entry-ids",reflect:!0})],o.prototype,"selectedVariableEntryIds",2),h([v()],o.prototype,"searchQuery",2),h([v()],o.prototype,"selectedFacets",2),h([v()],o.prototype,"selectedVariables",2),h([v()],o.prototype,"showVariablesBrowse",2),h([v()],o.prototype,"activeIndex",2),h([v()],o.prototype,"sortOrder",2),h([E("selectedVariables")],o.prototype,"handleSelectedVariablesChange",1);export{o as a};

package/dist/chunks/chunk.XKZTTPRT.js

@@ -0,0 +1,280 @@
+import{a as Ae}from"./chunk.SPFKT3LJ.js";import{a as Se}from"./chunk.LEH7GMRV.js";import{a as xe}from"./chunk.2AODSMTM.js";import{a as Pe}from"./chunk.ZTFY3IDS.js";import{a as De}from"./chunk.HXQXVX3Q.js";import{a as Ie}from"./chunk.UC5K3JSD.js";import{a as ve}from"./chunk.WMNEFMBK.js";import{a as fe,b as Ce}from"./chunk.HZOOFT3Z.js";import{a as ge}from"./chunk.C53TDQ4M.js";import{a as ue}from"./chunk.M5IBNNVO.js";import{a as me}from"./chunk.QDFHF7LY.js";import{a as pe}from"./chunk.XWAHYN4Q.js";import{a as he}from"./chunk.QWFODK2P.js";import{a as de}from"./chunk.J3UHFD4B.js";import{b as ce}from"./chunk.E3NUSTFU.js";import{a as le}from"./chunk.KVKFLEA5.js";import{a as te}from"./chunk.J5Q4TWEG.js";import{a as ne,b as $,c as se}from"./chunk.BLIMMPQ7.js";import{a as w,b as B,e as h,f as a,g as i,h as M,i as o}from"./chunk.INFVQQSJ.js";import{property as H,state as O}from"lit/decorators.js";import{html as f,nothing as b}from"lit";var Te=Symbol(),Me=oe=>(_e,e,t)=>{let r=t.value;t.value=function(...n){clearTimeout(this[Te]),this[Te]=window.setTimeout(()=>{r.apply(this,n)},oe)}};import{createRef as z,ref as W}from"lit/directives/ref.js";var l,D,I,E,F,Ee,L,we,Y,Be,_,Ne,q,ke,X,ye,R,Ve,N,re,K,$e,Z,He,Q,ze,k,ae,U,We,J,Fe,j,Le,y,ie,ee,Ye,s=class extends me(se){constructor(){super(...arguments);i(this,I);i(this,F);i(this,L);i(this,Y);i(this,_);i(this,q);i(this,X);i(this,R);i(this,N);i(this,K);i(this,Z);i(this,Q);i(this,k);i(this,U);i(this,J);i(this,j);i(this,y);i(this,ee);this.service=new Ie;this.searchParams={pageSize:50,offset:0,search:"",sortBy:"title",sortDirection:"asc",cloudCover:{min:void 0,max:void 0}};this.loading=!1;this.totalGranules=0;this.estimatedSize=null;this.cloudCoverRange=null;this._gridInitialized=!1;this.cloudCoverPickerOpen=!1;this.datePickerRef=z();this.spatialPickerRef=z();this.cloudCoverSliderRef=z();this.gridRef=z();i(this,l,null);i(this,D,new Ce(this,{getCollectionEntryId:()=>this.collectionEntryId,getBearerToken:()=>this.bearerToken}))}handleShortNameOrVersionChange(){this.shortName&&this.version&&!this.collectionEntryId&&(this.collectionEntryId=`${this.shortName}_${this.version}`)}handleCollectionChange(){this._gridInitialized&&this.isVisible&&(this._gridInitialized=!1,this.firstVisible())}get isSubDaily(){return a(this,D).isSubDaily}get granuleMinDate(){var t,r;let e=(r=(t=a(this,D).sampling)==null?void 0:t.data)==null?void 0:r.minDate;return e?new Date(e):null}get granuleMaxDate(){var t,r;let e=(r=(t=a(this,D).sampling)==null?void 0:t.data)==null?void 0:r.maxDate;return e?new Date(e):null}get spatialConstraints(){return a(this,D).spatialConstraints}disconnectedCallback(){super.disconnectedCallback(),a(this,l)&&(document.removeEventListener("click",a(this,l)),M(this,l,null))}async firstVisible(){o(this,L,we).call(this)}handleSearch(e){var t;this.searchParams=B(w({},this.searchParams),{search:e}),(t=a(this,I,E))==null||t.purgeInfiniteCache()}render(){var e,t,r,n,m,g,p,d,v,A,P,S,x;return f`
+            <div class="filters-compact">
+                <div class="search-row">
+                    <div class="search-icon" aria-hidden="true">🔍</div>
+                    <input
+                        type="text"
+                        class="search-input"
+                        placeholder="Search file names"
+                        .value=${(e=this.searchParams.search)!=null?e:""}
+                        @input=${c=>{this.handleSearch(c.target.value)}}
+                    />
+                </div>
+
+                <div class="toggle-row">
+                    <terra-dropdown>
+                        <button
+                            slot="trigger"
+                            class="filter-btn ${this.searchParams.startDate&&this.searchParams.endDate?"active":""}"
+                        >
+                            <terra-icon
+                                name="outline-calendar"
+                                library="heroicons"
+                                font-size="18px"
+                            ></terra-icon>
+                            <span>${o(this,q,ke).call(this)}</span>
+                            ${this.searchParams.startDate&&this.searchParams.endDate?f`
+                                      <button
+                                          class="clear-badge"
+                                          @click=${c=>{c.stopPropagation(),o(this,R,Ve).call(this)}}
+                                          aria-label="Clear date range"
+                                      >
+                                          ×
+                                      </button>
+                                  `:b}
+                        </button>
+
+                        <div class="datepicker-container">
+                            <terra-date-picker
+                                ${W(this.datePickerRef)}
+                                range
+                                ?enable-time=${this.isSubDaily}
+                                show-presets
+                                split-inputs
+                                inline
+                                .startDate=${this.searchParams.startDate}
+                                .endDate=${this.searchParams.endDate}
+                                .startPlaceholder=${this.isSubDaily?"YYYY-MM-DD HH:mm:ss":"YYYY-MM-DD"}
+                                .endPlaceholder=${this.isSubDaily?"YYYY-MM-DD HH:mm:ss":"YYYY-MM-DD"}
+                                .minDate=${this.granuleMinDate}
+                                .maxDate=${this.granuleMaxDate}
+                                @terra-date-range-change=${o(this,_,Ne)}
+                            >
+                                ${this.granuleMinDate&&this.granuleMaxDate?f` <p
+                                          slot="additional-text"
+                                          class="available-range"
+                                      >
+                                          <strong>Available Range:</strong>
+                                          ${this.service.formatAvailableRangeDate(this.granuleMinDate,this.isSubDaily)}
+                                          -
+                                          ${this.service.formatAvailableRangeDate(this.granuleMaxDate,this.isSubDaily)}
+                                      </p>`:b}
+                            </terra-date-picker>
+                        </div>
+                    </terra-dropdown>
+
+                    <terra-dropdown placement="bottom-start" distance="4" hoist>
+                        <div slot="trigger" class="filter">
+                            <button
+                                class="filter-btn ${this.searchParams.location?"active":""}"
+                            >
+                                <terra-icon
+                                    name="outline-globe-alt"
+                                    library="heroicons"
+                                    font-size="18px"
+                                ></terra-icon>
+                                <span>${o(this,X,ye).call(this)}</span>
+                                ${this.searchParams.location?f`
+                                          <button
+                                              class="clear-badge"
+                                              @click=${c=>{c.stopPropagation(),o(this,N,re).call(this,null)}}
+                                              aria-label="Clear spatial filter"
+                                          >
+                                              ×
+                                          </button>
+                                      `:b}
+                            </button>
+                        </div>
+
+                        <div class="spatialpicker-container">
+                            <terra-spatial-picker
+                                ${W(this.spatialPickerRef)}
+                                hide-label
+                                inline
+                                no-world-wrap
+                                .spatialConstraints=${this.spatialConstraints}
+                                @terra-map-change=${o(this,Y,Be)}
+                            >
+                                <p class="available-range" slot="additional-text">
+                                    <strong>Available range:</strong> ${this.spatialConstraints}
+                                </p>
+                            </terra-spatial-picker>
+                        </div>
+                    </terra-dropdown>
+
+                    ${this.cloudCoverRange?f`
+                              <div class="filter">
+                                  <button
+                                      class="filter-btn ${((t=this.searchParams.cloudCover)==null?void 0:t.min)!==void 0&&((r=this.searchParams.cloudCover)==null?void 0:r.max)!==void 0?"active":""}"
+                                      @click=${c=>{c.stopPropagation(),o(this,K,$e).call(this)}}
+                                  >
+                                      <terra-icon
+                                          name="outline-cloud"
+                                          library="heroicons"
+                                          font-size="18px"
+                                      ></terra-icon>
+                                      <span>${o(this,Q,ze).call(this)}</span>
+                                      ${((n=this.searchParams.cloudCover)==null?void 0:n.min)!==void 0&&((m=this.searchParams.cloudCover)==null?void 0:m.max)!==void 0?f`
+                                                <button
+                                                    class="clear-badge"
+                                                    @click=${c=>{c.stopPropagation(),o(this,Z,He).call(this)}}
+                                                    aria-label="Clear cloud cover filter"
+                                                >
+                                                    ×
+                                                </button>
+                                            `:b}
+                                  </button>
+
+                                  <!-- hidden slider to show when clicking the filter -->
+                                  <div
+                                      class="cloud-cover-dropdown ${this.cloudCoverPickerOpen?"open":""}"
+                                      @click=${c=>c.stopPropagation()}
+                                  >
+                                      <terra-slider
+                                          ${W(this.cloudCoverSliderRef)}
+                                          mode="range"
+                                          min=${(g=this.cloudCoverRange)==null?void 0:g.min}
+                                          max=${(p=this.cloudCoverRange)==null?void 0:p.max}
+                                          start-value=${(A=(d=this.searchParams.cloudCover)==null?void 0:d.min)!=null?A:(v=this.cloudCoverRange)==null?void 0:v.min}
+                                          end-value=${(x=(P=this.searchParams.cloudCover)==null?void 0:P.max)!=null?x:(S=this.cloudCoverRange)==null?void 0:S.max}
+                                          step="0.1"
+                                          hide-label
+                                          label="Cloud Cover"
+                                          @terra-slider-change=${o(this,j,Le)}
+                                          show-inputs
+                                      ></terra-slider>
+                                  </div>
+                              </div>
+                          `:b}
+                </div>
+
+                <div class="results-info">
+                    <strong>${this.totalGranules.toLocaleString()}</strong>
+                    files selected
+                    ${this.estimatedSize?f` (~${this.estimatedSize})`:b}
+                </div>
+            </div>
+
+            <div class="grid-container">
+                <terra-data-grid
+                    ${W(this.gridRef)}
+                    row-model-type="infinite"
+                    height="350px"
+                ></terra-data-grid>
+
+                ${this.loading?o(this,ee,Ye).call(this):b}
+            </div>
+
+            ${this.footerSlot?f`
+                      <div
+                          slot="footer"
+                          style="margin-top: 15px; display: flex; align-items: center; gap: 8px;"
+                      >
+                          <terra-dropdown @terra-select=${o(this,k,ae)}>
+                              <terra-button slot="trigger" caret>
+                                  Download Options
+                              </terra-button>
+                              <terra-menu>
+                                  <terra-menu-item value="python-script">
+                                      <svg
+                                          slot="prefix"
+                                          viewBox="0 0 128 128"
+                                          width="16"
+                                          height="16"
+                                          style="width: 16px; height: 16px;"
+                                      >
+                                          <path
+                                              fill="currentColor"
+                                              d="M49.33 62h29.159C86.606 62 93 55.132 93 46.981V19.183c0-7.912-6.632-13.856-14.555-15.176-5.014-.835-10.195-1.215-15.187-1.191-4.99.023-9.612.448-13.805 1.191C37.098 6.188 35 10.758 35 19.183V30h29v4H23.776c-8.484 0-15.914 5.108-18.237 14.811-2.681 11.12-2.8 17.919 0 29.53C7.614 86.983 12.569 93 21.054 93H31V79.952C31 70.315 39.428 62 49.33 62zm-1.838-39.11c-3.026 0-5.478-2.479-5.478-5.545 0-3.079 2.451-5.581 5.478-5.581 3.015 0 5.479 2.502 5.479 5.581-.001 3.066-2.465 5.545-5.479 5.545zm74.789 25.921C120.183 40.363 116.178 34 107.682 34H97v12.981C97 57.031 88.206 65 78.489 65H49.33C41.342 65 35 72.326 35 80.326v27.8c0 7.91 6.745 12.564 14.462 14.834 9.242 2.717 17.994 3.208 29.051 0C85.862 120.831 93 116.549 93 108.126V97H64v-4h43.682c8.484 0 11.647-5.776 14.599-14.66 3.047-9.145 2.916-17.799 0-29.529zm-41.955 55.606c3.027 0 5.479 2.479 5.479 5.547 0 3.076-2.451 5.579-5.479 5.579-3.015 0-5.478-2.502-5.478-5.579 0-3.068 2.463-5.547 5.478-5.547z"
+                                          ></path>
+                                      </svg>
+                                      Python Script
+                                  </terra-menu-item>
+                                  <terra-menu-item value="earthdata-download">
+                                      <svg
+                                          slot="prefix"
+                                          viewBox="0 0 64 64"
+                                          fill="none"
+                                          width="16"
+                                          height="16"
+                                          style="width: 16px; height: 16px;"
+                                      >
+                                          <circle
+                                              cx="32"
+                                              cy="32"
+                                              r="28"
+                                              fill="currentColor"
+                                          />
+                                          <path
+                                              d="M32 14v26M32 40l-9-9M32 40l9-9"
+                                              stroke="#fff"
+                                              stroke-width="4"
+                                              stroke-linecap="round"
+                                              stroke-linejoin="round"
+                                              fill="none"
+                                          />
+                                      </svg>
+                                      Earthdata Download
+                                  </terra-menu-item>
+                              </terra-menu>
+                          </terra-dropdown>
+                      </div>
+                  `:f`
+                      <div
+                          style="margin-top: 15px; display: flex; align-items: center; gap: 8px;"
+                      >
+                          <terra-dropdown @terra-select=${o(this,k,ae)}>
+                              <terra-button slot="trigger" caret>
+                                  Download Options
+                              </terra-button>
+                              <terra-menu>
+                                  <terra-menu-item value="python-script">
+                                      <svg
+                                          slot="prefix"
+                                          viewBox="0 0 128 128"
+                                          width="16"
+                                          height="16"
+                                          style="width: 16px; height: 16px;"
+                                      >
+                                          <path
+                                              fill="currentColor"
+                                              d="M49.33 62h29.159C86.606 62 93 55.132 93 46.981V19.183c0-7.912-6.632-13.856-14.555-15.176-5.014-.835-10.195-1.215-15.187-1.191-4.99.023-9.612.448-13.805 1.191C37.098 6.188 35 10.758 35 19.183V30h29v4H23.776c-8.484 0-15.914 5.108-18.237 14.811-2.681 11.12-2.8 17.919 0 29.53C7.614 86.983 12.569 93 21.054 93H31V79.952C31 70.315 39.428 62 49.33 62zm-1.838-39.11c-3.026 0-5.478-2.479-5.478-5.545 0-3.079 2.451-5.581 5.478-5.581 3.015 0 5.479 2.502 5.479 5.581-.001 3.066-2.465 5.545-5.479 5.545zm74.789 25.921C120.183 40.363 116.178 34 107.682 34H97v12.981C97 57.031 88.206 65 78.489 65H49.33C41.342 65 35 72.326 35 80.326v27.8c0 7.91 6.745 12.564 14.462 14.834 9.242 2.717 17.994 3.208 29.051 0C85.862 120.831 93 116.549 93 108.126V97H64v-4h43.682c8.484 0 11.647-5.776 14.599-14.66 3.047-9.145 2.916-17.799 0-29.529zm-41.955 55.606c3.027 0 5.479 2.479 5.479 5.547 0 3.076-2.451 5.579-5.479 5.579-3.015 0-5.478-2.502-5.478-5.579 0-3.068 2.463-5.547 5.478-5.547z"
+                                          ></path>
+                                      </svg>
+                                      Python Script
+                                  </terra-menu-item>
+                                  <terra-menu-item value="earthdata-download">
+                                      <svg
+                                          slot="prefix"
+                                          viewBox="0 0 64 64"
+                                          fill="none"
+                                          width="16"
+                                          height="16"
+                                          style="width: 16px; height: 16px;"
+                                      >
+                                          <circle
+                                              cx="32"
+                                              cy="32"
+                                              r="28"
+                                              fill="currentColor"
+                                          />
+                                          <path
+                                              d="M32 14v26M32 40l-9-9M32 40l9-9"
+                                              stroke="#fff"
+                                              stroke-width="4"
+                                              stroke-linecap="round"
+                                              stroke-linejoin="round"
+                                              fill="none"
+                                          />
+                                      </svg>
+                                      Earthdata Download
+                                  </terra-menu-item>
+                              </terra-menu>
+                          </terra-dropdown>
+                      </div>
+                  `}
+        `}};l=new WeakMap,D=new WeakMap,I=new WeakSet,E=function(){var e;return(e=this.gridRef.value)==null?void 0:e.getGridApi()},F=new WeakSet,Ee=function(e){var m;let t=e.target,r=(m=this.shadowRoot)==null?void 0:m.querySelector(".cloud-cover-dropdown"),n=r==null?void 0:r.closest(".filter");n!=null&&n.contains(t)||(this.cloudCoverPickerOpen=!1,a(this,l)&&(document.removeEventListener("click",a(this,l)),M(this,l,null)))},L=new WeakSet,we=function(){if(!this.gridRef.value||this._gridInitialized)return;this._gridInitialized=!0;let e={rowCount:void 0,getRows:async r=>{var n,m,g,p,d,v,A,P,S,x;if(!this.collectionEntryId&&!this.searchParams.collectionConceptId){r.successCallback([],0);return}this.loading=!0;try{let c=fe(B(w({collectionEntryId:this.collectionEntryId},this.searchParams),{pageSize:r.endRow-r.startRow,offset:r.startRow,sortBy:(g=(m=(n=r.sortModel)==null?void 0:n[0])==null?void 0:m.colId)!=null?g:"title",sortDirection:(v=(d=(p=r.sortModel)==null?void 0:p[0])==null?void 0:d.sort)!=null?v:"asc"})),u=await this.queryClient.ensureQueryData(c);if((u==null?void 0:u.hits)===void 0||!(u!=null&&u.items)){r.failCallback();return}this.totalGranules=u.hits;let V=(P=(A=a(this,D).sampling)==null?void 0:A.data)==null?void 0:P.firstGranule,C=(x=(S=a(this,D).sampling)==null?void 0:S.data)==null?void 0:x.lastGranule;this.estimatedSize=this.service.getEstimatedGranuleSize(V,C,this.totalGranules);let T=u.hits<=r.endRow?u.hits:-1;r.successCallback(u.items,T)}catch(c){r.failCallback()}finally{this.loading=!1}}},t=[{field:"umm.GranuleUR",headerName:"Title",flex:3,cellRenderer:r=>{var g,p;if(!r.data)return"";let n=(p=(g=r.data.umm.RelatedUrls)==null?void 0:g.find(d=>d.Type==="GET DATA"))==null?void 0:p.URL;if(n){let d=document.createElement("a");return d.href=n,d.target="_blank",d.title=n,d.textContent=r.data.umm.GranuleUR,d}let m=document.createElement("span");return m.textContent=r.data.umm.GranuleUR,m}},{colId:"umm.DataGranule.Size",headerName:"Size (MB)",valueGetter:r=>{if(r.data)return this.service.calculateGranuleSize(r.data.umm,"MB").toFixed(2)}},{field:"umm.TemporalExtent.RangeDateTime.BeginningDateTime",headerName:"Start Date"},{field:"umm.TemporalExtent.RangeDateTime.EndingDateTime",headerName:"End Date"},{field:"umm.CloudCover",hide:!0,headerName:"Cloud Cover (%)"}];this.gridRef.value.rowModelType="infinite",this.gridRef.value.columnDefs=t,this.gridRef.value.datasource=e,this.gridRef.value.gridOptions={defaultColDef:{flex:1,minWidth:100,sortable:!0,sortingOrder:["desc","asc",null]},rowBuffer:25,cacheBlockSize:50,maxConcurrentDatasourceRequests:2,infiniteInitialRowCount:50}},Y=new WeakSet,Be=function(e){o(this,N,re).call(this,e.detail)},_=new WeakSet,Ne=function(e){var r;let t=e.detail;this.searchParams=B(w({},this.searchParams),{startDate:t.startDate||"",endDate:t.endDate||""}),(r=a(this,I,E))==null||r.purgeInfiniteCache()},q=new WeakSet,ke=function(){if(this.searchParams.startDate&&this.searchParams.endDate){let e=t=>new Date(t).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric",timeZone:"UTC"});return`${e(this.searchParams.startDate)} \u2013 ${e(this.searchParams.endDate)}`}return"Date Range"},X=new WeakSet,ye=function(){if(!this.searchParams.location)return"Spatial Area";try{if(this.searchParams.location.type==="point"&&this.searchParams.location.latLng){let{lat:e,lng:t}=this.searchParams.location.latLng;return`${e.toFixed(2)}, ${t.toFixed(2)}`}if(this.searchParams.location.type==="bbox"&&this.searchParams.location.bounds){let e=this.searchParams.location.bounds.toBBoxString(),t=e.split(",").map(r=>parseFloat(r.trim()));return t.length===4?`${t[1].toFixed(2)}, ${t[0].toFixed(2)}, ${t[3].toFixed(2)}, ${t[2].toFixed(2)}`:e}if(this.searchParams.location.type==="bbox"&&this.searchParams.location.bounds)return this.searchParams.location.bounds.toBBoxString()}catch(e){console.warn("Error formatting spatial selection:",e)}return"Spatial Area"},R=new WeakSet,Ve=function(){var e;this.searchParams.startDate="",this.searchParams.endDate="",(e=a(this,I,E))==null||e.purgeInfiniteCache()},N=new WeakSet,re=function(e){var t;this.searchParams.location=e,(t=a(this,I,E))==null||t.purgeInfiniteCache()},K=new WeakSet,$e=function(){setTimeout(()=>{this.cloudCoverPickerOpen=!this.cloudCoverPickerOpen,this.cloudCoverPickerOpen?a(this,l)||(M(this,l,o(this,F,Ee).bind(this)),document.addEventListener("click",a(this,l))):a(this,l)&&(document.removeEventListener("click",a(this,l)),M(this,l,null))},0)},Z=new WeakSet,He=function(){o(this,y,ie).call(this,{min:void 0,max:void 0}),this.cloudCoverPickerOpen=!1,a(this,l)&&(document.removeEventListener("click",a(this,l)),M(this,l,null))},Q=new WeakSet,ze=function(){var e,t,r,n;return((e=this.searchParams.cloudCover)==null?void 0:e.min)!==void 0&&((t=this.searchParams.cloudCover)==null?void 0:t.max)!==void 0?`${(r=this.searchParams.cloudCover)==null?void 0:r.min.toFixed(1)}% \u2013 ${(n=this.searchParams.cloudCover)==null?void 0:n.max.toFixed(1)}%`:"Cloud Cover"},k=new WeakSet,ae=function(e){let t=e.detail.item,r=t.value||t.getTextLabel();r==="python-script"?o(this,U,We).call(this,e):r==="earthdata-download"&&o(this,J,Fe).call(this,e)},U=new WeakSet,We=async function(e){var d,v,A,P,S,x,c,u,V;e.stopPropagation();let t=await fetch(ce("assets/data-access/download_files.py.txt"));t.ok||alert(`Sorry, there was a problem generating the Python script. We are investigating the issue.
+You could try using the Jupyter Notebook in the meantime`);let r=()=>{if(!this.searchParams.location)return"";try{if(this.searchParams.location.type==="bbox"&&this.searchParams.location.bounds){let C=this.searchParams.location.bounds.toBBoxString(),T=C.split(",").map(G=>parseFloat(G.trim()));return T.length===4?T.join(","):C.replace(/\s+/g,"")}if(this.searchParams.location.type==="point"&&this.searchParams.location.latLng){let{lat:C,lng:T}=this.searchParams.location.latLng,G=.01;return`${(T-G).toFixed(2)},${(C-G).toFixed(2)},${(T+G).toFixed(2)},${(C+G).toFixed(2)}`}}catch(C){console.warn("Error formatting bbox for Python script:",C)}return""},n=(await t.text()).replace(/{{short_name}}/gi,(d=this.shortName)!=null?d:"").replace(/{{version}}/gi,(v=this.version)!=null?v:"").replace(/{{filter_temporal}}/gi,this.searchParams.startDate&&this.searchParams.endDate?this.searchParams.startDate+","+this.searchParams.endDate:"").replace(/{{filter_bbox}}/gi,r()).replace(/{{filter_search}}/gi,(A=this.searchParams.search)!=null?A:"").replace(/{{filter_cloud_cover_min}}/gi,(x=(S=(P=this.searchParams.cloudCover)==null?void 0:P.min)==null?void 0:S.toString())!=null?x:"").replace(/{{filter_cloud_cover_max}}/gi,(V=(u=(c=this.searchParams.cloudCover)==null?void 0:c.max)==null?void 0:u.toString())!=null?V:""),m=new Blob([n],{type:"text/plain"}),g=URL.createObjectURL(m),p=document.createElement("a");p.href=g,p.download=`download_files_${this.shortName}_${this.version}.py`,document.body.appendChild(p),p.click(),document.body.removeChild(p),URL.revokeObjectURL(g)},J=new WeakSet,Fe=async function(e){e.stopPropagation(),alert("Sorry, Earthdata Download is not currently supported")},j=new WeakSet,Le=function(e){let t=e.detail;o(this,y,ie).call(this,{min:"startValue"in t?t.startValue:void 0,max:"endValue"in t?t.endValue:void 0})},y=new WeakSet,ie=function(e){var t;this.searchParams=B(w({},this.searchParams),{cloudCover:{min:e.min,max:e.max}}),(t=a(this,I,E))==null||t.purgeInfiniteCache()},ee=new WeakSet,Ye=function(){return f` <div class="loading-modal">
+            <terra-loader indeterminate variant="small"></terra-loader>
+            <span>Loading</span>
+        </div>`},s.styles=[ne,ve],s.dependencies={"terra-loader":pe,"terra-icon":de,"terra-date-picker":De,"terra-spatial-picker":ge,"terra-slider":Ae,"terra-dropdown":ue,"terra-menu":Se,"terra-menu-item":xe,"terra-button":he,"terra-data-grid":Pe,"terra-alert":le},h([H({reflect:!0,attribute:"collection-entry-id",converter:$})],s.prototype,"collectionEntryId",2),h([H({reflect:!0,attribute:"short-name",converter:$})],s.prototype,"shortName",2),h([H({reflect:!0,attribute:"version",converter:$})],s.prototype,"version",2),h([H({attribute:"footer-slot",type:Boolean})],s.prototype,"footerSlot",2),h([O()],s.prototype,"searchParams",2),h([O()],s.prototype,"loading",2),h([O()],s.prototype,"totalGranules",2),h([O()],s.prototype,"estimatedSize",2),h([O()],s.prototype,"cloudCoverRange",2),h([O()],s.prototype,"_gridInitialized",2),h([O()],s.prototype,"cloudCoverPickerOpen",2),h([te(["shortName","version"])],s.prototype,"handleShortNameOrVersionChange",1),h([te("collectionEntryId")],s.prototype,"handleCollectionChange",1),h([Me(500)],s.prototype,"handleSearch",1);export{Me as a,s as b};