@nasa-terra/components 0.0.173 → 0.0.175

package/dist/chunks/chunk.EP7VZEIL.js

@@ -0,0 +1,197 @@
+import{css as r}from"lit";var l=r`
+    :host {
+        display: contents;
+
+        /* For better DX, we'll reset the margin here so the base part can inherit it */
+        margin: 0;
+    }
+
+    .alert {
+        position: relative;
+        display: flex;
+        align-items: stretch;
+        border-radius: var(--terra-border-radius-medium);
+        font-family: var(--terra-font-family--inter);
+        font-size: var(--terra-font-size-small);
+        font-weight: var(--terra-font-weight-normal);
+        line-height: var(--terra-alert-line-height);
+        margin: inherit;
+        overflow: hidden;
+    }
+
+    /* Filled appearance (HDS default) - colored background with white text */
+    .alert--filled {
+        background-color: var(--terra-alert-filled-background-color-primary);
+        border: none;
+        color: var(--terra-alert-filled-color);
+    }
+
+    .alert--filled.alert--primary {
+        background-color: var(--terra-alert-filled-background-color-primary);
+    }
+
+    .alert--filled.alert--success {
+        background-color: var(--terra-alert-filled-background-color-success);
+    }
+
+    .alert--filled.alert--neutral {
+        background-color: var(--terra-alert-filled-background-color-neutral);
+    }
+
+    .alert--filled.alert--warning {
+        background-color: var(--terra-alert-filled-background-color-warning);
+    }
+
+    .alert--filled.alert--danger {
+        background-color: var(--terra-alert-filled-background-color-danger);
+    }
+
+    .alert--filled .alert__icon {
+        color: var(--terra-alert-filled-icon-color);
+    }
+
+    .alert--filled .alert__close-button {
+        color: var(--terra-alert-filled-icon-color);
+    }
+
+    /* White appearance - white background with colored top border */
+    .alert--white {
+        background-color: var(--terra-alert-white-background-color);
+        border: solid var(--terra-panel-border-width) var(--terra-panel-border-color);
+        border-top-width: calc(var(--terra-panel-border-width) * 3);
+        color: var(--terra-alert-white-color);
+    }
+
+    .alert:not(.alert--has-icon) .alert__icon,
+    .alert:not(.alert--closable) .alert__close-button {
+        display: none;
+    }
+
+    .alert__icon {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        font-size: var(--terra-font-size-large);
+        padding-inline-start: var(--terra-spacing-large);
+    }
+
+    .alert--has-countdown {
+        border-bottom: none;
+    }
+
+    /* White appearance variant colors */
+    .alert--white.alert--primary {
+        border-top-color: var(--terra-color-nasa-blue-shade);
+    }
+
+    .alert--white.alert--primary .alert__icon {
+        color: var(--terra-color-nasa-blue-shade);
+    }
+
+    .alert--white.alert--success {
+        border-top-color: var(--terra-color-success-green);
+    }
+
+    .alert--white.alert--success .alert__icon {
+        color: var(--terra-color-success-green);
+    }
+
+    .alert--white.alert--neutral {
+        border-top-color: var(--terra-color-carbon-60);
+    }
+
+    .alert--white.alert--neutral .alert__icon {
+        color: var(--terra-color-carbon-60);
+    }
+
+    .alert--white.alert--warning {
+        border-top-color: var(--terra-color-international-orange);
+    }
+
+    .alert--white.alert--warning .alert__icon {
+        color: var(--terra-color-international-orange);
+    }
+
+    .alert--white.alert--danger {
+        border-top-color: var(--terra-color-nasa-red);
+    }
+
+    .alert--white.alert--danger .alert__icon {
+        color: var(--terra-color-nasa-red);
+    }
+
+    .alert__message {
+        flex: 1 1 auto;
+        display: block;
+        padding: var(--terra-spacing-large);
+        overflow: hidden;
+    }
+
+    .alert__message ::slotted(a) {
+        color: inherit !important;
+        text-decoration-color: inherit !important;
+    }
+
+    .alert__message ::slotted(a):hover {
+        text-decoration: none !important;
+    }
+
+    .alert__close-button {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        font-size: var(--terra-font-size-medium);
+        margin-inline-end: var(--terra-spacing-medium);
+        align-self: center;
+    }
+
+    .alert__countdown {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: calc(var(--terra-panel-border-width) * 3);
+        display: flex;
+    }
+
+    .alert--white .alert__countdown {
+        background-color: var(--terra-panel-border-color);
+    }
+
+    .alert--filled .alert__countdown {
+        background-color: rgba(0, 0, 0, 0.2);
+    }
+
+    .alert__countdown--ltr {
+        justify-content: flex-end;
+    }
+
+    .alert__countdown .alert__countdown-elapsed {
+        height: 100%;
+        width: 0;
+    }
+
+    .alert--primary .alert__countdown-elapsed {
+        background-color: var(--terra-color-nasa-blue-shade);
+    }
+
+    .alert--success .alert__countdown-elapsed {
+        background-color: var(--terra-color-success-green);
+    }
+
+    .alert--neutral .alert__countdown-elapsed {
+        background-color: var(--terra-color-carbon-60);
+    }
+
+    .alert--warning .alert__countdown-elapsed {
+        background-color: var(--terra-color-international-orange);
+    }
+
+    .alert--danger .alert__countdown-elapsed {
+        background-color: var(--terra-color-nasa-red);
+    }
+
+    .alert__timer {
+        display: none;
+    }
+`;export{l as a};

package/dist/chunks/chunk.ETT4EB7D.js

@@ -0,0 +1,287 @@
+import{css as o}from"lit";var s=o`
+    :host {
+        display: block;
+    }
+
+    :host::part(base) {
+        aspect-ratio: 16 / 9;
+    }
+
+    /**
+   * !Alert! The rest of this stylesheet is auto-generated!
+   * Unfortunately Plotly does not work well with Shadow DOM AND they don't supply a CSS file at all for us to import
+   * Because of this, a working solution is to copy their CSS over.
+   *
+   * Given that they use CSS, you can do npx -y sass ./node_modules/plotly.js/src/css/style.scss > plotly.css
+   * to generate the CSS, then copy the contents of plotly.css into this file
+   */
+    .js-plotly-plot .plotly,
+    .js-plotly-plot .plotly div {
+        direction: ltr;
+        font-family: 'Open Sans', verdana, arial, sans-serif;
+        margin: 0;
+        padding: 0;
+    }
+    .js-plotly-plot .plotly input,
+    .js-plotly-plot .plotly button {
+        font-family: 'Open Sans', verdana, arial, sans-serif;
+    }
+    .js-plotly-plot .plotly input:focus,
+    .js-plotly-plot .plotly button:focus {
+        outline: none;
+    }
+    .js-plotly-plot .plotly a {
+        text-decoration: none;
+    }
+    .js-plotly-plot .plotly a:hover {
+        text-decoration: none;
+    }
+    .js-plotly-plot .plotly .crisp {
+        shape-rendering: crispEdges;
+    }
+    .js-plotly-plot .plotly .user-select-none {
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        -o-user-select: none;
+        user-select: none;
+    }
+    .js-plotly-plot .plotly svg {
+        overflow: hidden;
+    }
+    .js-plotly-plot .plotly svg a {
+        fill: #447adb;
+    }
+    .js-plotly-plot .plotly svg a:hover {
+        fill: #3c6dc5;
+    }
+    .js-plotly-plot .plotly .main-svg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+    }
+    .js-plotly-plot .plotly .main-svg .draglayer {
+        pointer-events: all;
+    }
+    .js-plotly-plot .plotly .cursor-default {
+        cursor: default;
+    }
+    .js-plotly-plot .plotly .cursor-pointer {
+        cursor: pointer;
+    }
+    .js-plotly-plot .plotly .cursor-crosshair {
+        cursor: crosshair;
+    }
+    .js-plotly-plot .plotly .cursor-move {
+        cursor: move;
+    }
+    .js-plotly-plot .plotly .cursor-col-resize {
+        cursor: col-resize;
+    }
+    .js-plotly-plot .plotly .cursor-row-resize {
+        cursor: row-resize;
+    }
+    .js-plotly-plot .plotly .cursor-ns-resize {
+        cursor: ns-resize;
+    }
+    .js-plotly-plot .plotly .cursor-ew-resize {
+        cursor: ew-resize;
+    }
+    .js-plotly-plot .plotly .cursor-sw-resize {
+        cursor: sw-resize;
+    }
+    .js-plotly-plot .plotly .cursor-s-resize {
+        cursor: s-resize;
+    }
+    .js-plotly-plot .plotly .cursor-se-resize {
+        cursor: se-resize;
+    }
+    .js-plotly-plot .plotly .cursor-w-resize {
+        cursor: w-resize;
+    }
+    .js-plotly-plot .plotly .cursor-e-resize {
+        cursor: e-resize;
+    }
+    .js-plotly-plot .plotly .cursor-nw-resize {
+        cursor: nw-resize;
+    }
+    .js-plotly-plot .plotly .cursor-n-resize {
+        cursor: n-resize;
+    }
+    .js-plotly-plot .plotly .cursor-ne-resize {
+        cursor: ne-resize;
+    }
+    .js-plotly-plot .plotly .cursor-grab {
+        cursor: -webkit-grab;
+        cursor: grab;
+    }
+    .js-plotly-plot .plotly .modebar {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+    }
+    .js-plotly-plot .plotly .ease-bg {
+        -webkit-transition: background-color 0.3s ease 0s;
+        -moz-transition: background-color 0.3s ease 0s;
+        -ms-transition: background-color 0.3s ease 0s;
+        -o-transition: background-color 0.3s ease 0s;
+        transition: background-color 0.3s ease 0s;
+    }
+    .js-plotly-plot .plotly .modebar--hover > :not(.watermark) {
+        opacity: 0;
+        -webkit-transition: opacity 0.3s ease 0s;
+        -moz-transition: opacity 0.3s ease 0s;
+        -ms-transition: opacity 0.3s ease 0s;
+        -o-transition: opacity 0.3s ease 0s;
+        transition: opacity 0.3s ease 0s;
+    }
+    .js-plotly-plot .plotly:hover .modebar--hover .modebar-group {
+        opacity: 1;
+    }
+    .js-plotly-plot .plotly .modebar-group {
+        float: left;
+        display: inline-block;
+        box-sizing: border-box;
+        padding-left: 8px;
+        position: relative;
+        vertical-align: middle;
+        white-space: nowrap;
+    }
+    .js-plotly-plot .plotly .modebar-btn {
+        position: relative;
+        font-size: 16px;
+        padding: 3px 4px;
+        height: 22px;
+        /* display: inline-block; including this breaks 3d interaction in .embed mode. Chrome bug? */
+        cursor: pointer;
+        line-height: normal;
+        box-sizing: border-box;
+    }
+    .js-plotly-plot .plotly .modebar-btn svg {
+        position: relative;
+        top: 2px;
+    }
+    .js-plotly-plot .plotly .modebar.vertical {
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        align-content: flex-end;
+        max-height: 100%;
+    }
+    .js-plotly-plot .plotly .modebar.vertical svg {
+        top: -1px;
+    }
+    .js-plotly-plot .plotly .modebar.vertical .modebar-group {
+        display: block;
+        float: none;
+        padding-left: 0px;
+        padding-bottom: 8px;
+    }
+    .js-plotly-plot .plotly .modebar.vertical .modebar-group .modebar-btn {
+        display: block;
+        text-align: center;
+    }
+    .js-plotly-plot .plotly [data-title] {
+        /**
+   * tooltip body
+   */
+    }
+    .js-plotly-plot .plotly [data-title]:before,
+    .js-plotly-plot .plotly [data-title]:after {
+        position: absolute;
+        -webkit-transform: translate3d(0, 0, 0);
+        -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+        -o-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        display: none;
+        opacity: 0;
+        z-index: 1001;
+        pointer-events: none;
+        top: 110%;
+        right: 50%;
+    }
+    .js-plotly-plot .plotly [data-title]:hover:before,
+    .js-plotly-plot .plotly [data-title]:hover:after {
+        display: block;
+        opacity: 1;
+    }
+    .js-plotly-plot .plotly [data-title]:before {
+        content: '';
+        position: absolute;
+        background: transparent;
+        border: 6px solid transparent;
+        z-index: 1002;
+        margin-top: -12px;
+        border-bottom-color: #69738a;
+        margin-right: -6px;
+    }
+    .js-plotly-plot .plotly [data-title]:after {
+        content: attr(data-title);
+        background: #69738a;
+        color: white;
+        padding: 8px 10px;
+        font-size: 12px;
+        line-height: 12px;
+        white-space: nowrap;
+        margin-right: -18px;
+        border-radius: 2px;
+    }
+    .js-plotly-plot .plotly .vertical [data-title]:before,
+    .js-plotly-plot .plotly .vertical [data-title]:after {
+        top: 0%;
+        right: 200%;
+    }
+    .js-plotly-plot .plotly .vertical [data-title]:before {
+        border: 6px solid transparent;
+        border-left-color: #69738a;
+        margin-top: 8px;
+        margin-right: -30px;
+    }
+
+    .plotly-notifier {
+        font-family: 'Open Sans', verdana, arial, sans-serif;
+        position: fixed;
+        top: 50px;
+        right: 20px;
+        z-index: 10000;
+        font-size: 10pt;
+        max-width: 180px;
+    }
+    .plotly-notifier p {
+        margin: 0;
+    }
+    .plotly-notifier .notifier-note {
+        min-width: 180px;
+        max-width: 250px;
+        border: 1px solid #fff;
+        z-index: 3000;
+        margin: 0;
+        background-color: #8c97af;
+        background-color: rgba(140, 151, 175, 0.9);
+        color: #fff;
+        padding: 10px;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        -ms-hyphens: auto;
+        -webkit-hyphens: auto;
+        hyphens: auto;
+    }
+    .plotly-notifier .notifier-close {
+        color: #fff;
+        opacity: 0.8;
+        float: right;
+        padding: 0 5px;
+        background: none;
+        border: none;
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 20px;
+    }
+    .plotly-notifier .notifier-close:hover {
+        color: #444;
+        text-decoration: none;
+        cursor: pointer;
+    }
+`;export{s as a};

package/dist/chunks/chunk.EWEQBNIT.js

@@ -0,0 +1,16 @@
+import{a as L}from"./chunk.2NNF6S2I.js";import{a as G}from"./chunk.XIGQQUXS.js";import{a as A,b as M}from"./chunk.4S7M2RKR.js";import{a as C,b as D,e as l,f as o,g as h,h as c,i as u}from"./chunk.INFVQQSJ.js";import{createRef as $,ref as z}from"lit/directives/ref.js";import{html as V,nothing as B}from"lit";import{property as r,state as I}from"lit/decorators.js";import{createGrid as j,AllCommunityModule as q,ModuleRegistry as H}from"ag-grid-community";var i,d,p,f,g,F,n=class extends M{constructor(){super(...arguments);h(this,p);h(this,g);this.height="400px";this.rowModelType="clientSide";this.theme="alpine";this.showLoading=!1;this.isLoading=!1;h(this,i,void 0);h(this,d,$())}connectedCallback(){super.connectedCallback(),H.registerModules([q])}disconnectedCallback(){super.disconnectedCallback(),o(this,i)&&(o(this,i).destroy(),c(this,i,void 0))}firstVisible(){u(this,p,f).call(this)}updated(e){super.updated(e),(e.has("gridOptions")||e.has("columnDefs")||e.has("rowData")||e.has("datasource")||e.has("rowModelType"))&&o(this,i)&&o(this,d).value&&u(this,p,f).call(this)}getGridApi(){return o(this,i)}refresh(){o(this,i)&&(this.rowModelType==="infinite"?o(this,i).purgeInfiniteCache():o(this,i).refreshCells())}exportToCsv(e){o(this,i)&&o(this,i).exportDataAsCsv(e)}exportToExcel(e){var s,a;o(this,i)&&((a=(s=o(this,i)).exportDataAsExcel)==null||a.call(s,e))}render(){return V`
+            <div class="grid-container" part="base">
+                <div
+                    class="grid ag-theme-${this.theme}"
+                    part="grid"
+                    ${z(o(this,d))}
+                    style="height: ${this.height};"
+                ></div>
+
+                ${this.isLoading&&this.showLoading?V`
+                          <div class="loading-overlay" part="loading">
+                              <terra-loader indeterminate></terra-loader>
+                          </div>
+                      `:B}
+            </div>
+        `}};i=new WeakMap,d=new WeakMap,p=new WeakSet,f=function(){var k,S,O,R,x,T;if(!o(this,d).value)return;o(this,i)&&(o(this,i).destroy(),c(this,i,void 0));let e=D(C(C({},u(this,g,F).call(this)),this.gridOptions),{columnDefs:(S=this.columnDefs)!=null?S:(k=this.gridOptions)==null?void 0:k.columnDefs,rowData:(R=this.rowData)!=null?R:(O=this.gridOptions)==null?void 0:O.rowData,datasource:(T=this.datasource)!=null?T:(x=this.gridOptions)==null?void 0:x.datasource,rowModelType:this.rowModelType}),s=e.onGridReady;e.onGridReady=t=>{c(this,i,t.api),this.emit("terra-grid-ready",{detail:t}),s&&s(t)};let a=e.onSelectionChanged;e.onSelectionChanged=t=>{this.emit("terra-selection-changed",{detail:t}),a&&a(t)};let y=e.onSortChanged;e.onSortChanged=t=>{this.emit("terra-sort-changed",{detail:t}),y&&y(t)};let m=e.onFilterChanged;e.onFilterChanged=t=>{this.emit("terra-filter-changed",{detail:t}),m&&m(t)};let v=e.onRowClicked;e.onRowClicked=t=>{this.emit("terra-row-clicked",{detail:t}),v&&v(t)};let w=e.onRowDoubleClicked;e.onRowDoubleClicked=t=>{this.emit("terra-row-double-clicked",{detail:t}),w&&w(t)};let E=e.onCellClicked;e.onCellClicked=t=>{this.emit("terra-cell-clicked",{detail:t}),E&&E(t)};let b=e.onCellValueChanged;e.onCellValueChanged=t=>{this.emit("terra-cell-value-changed",{detail:t}),b&&b(t)},c(this,i,j(o(this,d).value,e))},g=new WeakSet,F=function(){return{defaultColDef:{sortable:!0,filter:!0,resizable:!0},rowBuffer:25,cacheBlockSize:50,maxConcurrentDatasourceRequests:2}},n.styles=[A,L],n.dependencies={"terra-loader":G},l([r({type:Object})],n.prototype,"gridOptions",2),l([r({type:Array})],n.prototype,"columnDefs",2),l([r({type:Array})],n.prototype,"rowData",2),l([r({type:Object})],n.prototype,"datasource",2),l([r({attribute:"height",type:String})],n.prototype,"height",2),l([r({attribute:"row-model-type",type:String})],n.prototype,"rowModelType",2),l([r({attribute:"theme",type:String})],n.prototype,"theme",2),l([r({attribute:"show-loading",type:Boolean})],n.prototype,"showLoading",2),l([I()],n.prototype,"isLoading",2);export{n as a};

package/dist/chunks/chunk.F3BIDTSZ.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.KI3ZCNIO.js";import*as a from"react";import{createComponent as r}from"@lit/react";var t="terra-map";e.define("terra-map");var m=r({tagName:t,elementClass:e,react:a,events:{},displayName:"TerraMap"}),f=m;export{f as a};

package/dist/chunks/chunk.FD2M5I7I.js

@@ -0,0 +1,126 @@
+import{a as $t}from"./chunk.TMWWCJW2.js";import{a as Dt}from"./chunk.MR2JD62K.js";import{a as Ct}from"./chunk.LNBL6PVF.js";import{a as vt}from"./chunk.CIUFRW4X.js";import{a as Vt}from"./chunk.CFCZNULG.js";import{b as wt,c as xt}from"./chunk.5SIVM4DR.js";import{a as St}from"./chunk.E6HNLV32.js";import{b as lt}from"./chunk.UAL5F7OB.js";import{a as bt}from"./chunk.XIGQQUXS.js";import{a as yt}from"./chunk.BQWXD7VN.js";import{c as st}from"./chunk.BWCJXCND.js";import{a as ft}from"./chunk.7G6ZJIAY.js";import{a as gt}from"./chunk.WLKTHXSM.js";import{a as nt}from"./chunk.J5Q4TWEG.js";import{a as pt,b as ut}from"./chunk.4S7M2RKR.js";import{e as m,f as o,g as p,h as S,i as b}from"./chunk.INFVQQSJ.js";import{html as k,nothing as Qt}from"lit";import{property as L,state as w}from"lit/decorators.js";import{Map as Zt,View as te}from"ol";import Lt from"ol/layer/WebGLTile.js";import Et from"ol/layer/Vector.js";import ee from"ol/layer/Graticule.js";import ae from"ol/source/OSM.js";import It from"ol/source/Vector.js";import oe from"ol/format/GeoJSON.js";import{Style as ie,Stroke as Ft}from"ol/style.js";import re from"ol/interaction/Draw.js";import ne from"ol/geom/Point.js";import{getLength as se}from"ol/sphere.js";import le from"ol/Feature.js";import{TaskStatus as H}from"@lit/task";import{cache as ce}from"lit/directives/cache.js";import{toLonLat as Nt,transformExtent as kt}from"ol/proj.js";var C,d,v,R,E,P,I,A,z,B,W,Rt,J,Pt,X,jt,Y,Mt,K,Gt,Q,Tt,Z,At,tt,zt,et,Bt,at,Ot,O,ct,ot,_t,it,Ut,rt,qt,h=class extends ut{constructor(){super(...arguments);p(this,W);p(this,J);p(this,X);p(this,Y);p(this,K);p(this,Q);p(this,Z);p(this,tt);p(this,et);p(this,at);p(this,O);p(this,ot);p(this,it);p(this,rt);this.long_name="";this.colorMapName="viridis";this.opacity=1;this.pixelValue="N/A";this.pixelCoordinates="N/A";this.metadata={};this.toggleState=!1;this.minimized=!1;this.noDataValue=-9999;this.min="0";this.max="1";this.legendValues=[];this.timeAverageMapError=null;p(this,C,void 0);p(this,d,null);p(this,v,null);p(this,R,null);p(this,E,null);p(this,P,null);p(this,I,null);p(this,A,null);this._authController=new St(this);this.colormaps=["jet","hsv","hot","cool","spring","summer","autumn","winter","bone","copper","greys","YIGnBu","greens","YIOrRd","bluered","RdBu","picnic","rainbow","portland","blackbody","earth","electric","viridis","inferno","magma","plasma","warm","cool","bathymetry","cdom","chlorophyll","density","fressurface-blue","freesurface-red","oxygen","par","phase","salinity","temperature","turbidity","velocity-blue","velocity-green","cubhelix"];this.plotData={};this.layout={};this._fetchVariableTask=Ct(this,!1);p(this,z,t=>{let{status:a,code:i,message:e,context:r}=t.detail;this.timeAverageMapError={code:i||String(a),message:e,context:r}});p(this,B,async t=>{var i;if(!o(this,d)){console.warn("Map not initialized, cannot export image");return}let a=((i=t.detail)==null?void 0:i.format)||"png";try{await new Promise(y=>{o(this,d).once("rendercomplete",()=>{y()}),o(this,d).render()});let e=o(this,d).getViewport(),r=o(this,d).getSize();if(!r){console.warn("Map size is not available");return}let n=r[0],s=r[1],l=Array.from(e.querySelectorAll("canvas")),f=Array.from(e.querySelectorAll("svg"));if(l.length===0&&f.length===0){console.warn("Could not find map canvas or SVG elements");return}let g=document.createElement("canvas"),c=g.getContext("2d");if(!c){console.warn("Could not get canvas context");return}let u=80;g.width=n,g.height=s+u,c.fillStyle="#ffffff",c.fillRect(0,0,g.width,g.height);for(let y of l)c.drawImage(y,0,0,y.width,y.height,0,u,n,s);for(let y of f)try{let x=y.cloneNode(!0);x.hasAttribute("width")||x.setAttribute("width",String(n)),x.hasAttribute("height")||x.setAttribute("height",String(s));let D=new XMLSerializer().serializeToString(x),T=new Blob([D],{type:"image/svg+xml;charset=utf-8"}),j=URL.createObjectURL(T),N=new Image;await new Promise((G,ht)=>{N.onload=()=>{c.drawImage(N,0,u,n,s),URL.revokeObjectURL(j),G()},N.onerror=()=>{URL.revokeObjectURL(j),ht(new Error("Failed to load SVG image"))},N.src=j})}catch(x){console.warn("Failed to render SVG layer:",x)}let V=30,F=25;c.fillStyle="#000000",c.font="bold 18px Arial, sans-serif",c.textAlign="left",c.textBaseline="top";let $=b(this,J,Pt).call(this);b(this,X,jt).call(this,c,$,n-40,16).forEach((y,x)=>{c.fillText(y,20,V+x*F)}),await b(this,W,Rt).call(this,c,u);let _=a==="jpg"?"image/jpeg":"image/png",U=a==="jpg"?"jpg":"png",q=a==="jpg"?.92:void 0;g.toBlob(y=>{if(!y){console.warn("Failed to create blob from canvas");return}let x=URL.createObjectURL(y),D=document.createElement("a"),T=this.location?`_${this.location.replace(/,/g,"_")}`:"",j=this.startDate&&this.endDate?`_${this.startDate.split("T")[0]}_to_${this.endDate.split("T")[0]}`:"",G=`${lt(this)||"map"}${T}${j}.${U}`;D.href=x,D.download=G,D.style.display="none",document.body.appendChild(D),D.click(),document.body.removeChild(D),URL.revokeObjectURL(x)},_,q)}catch(e){console.error("Error exporting map as PNG:",e)}})}handlePropertyChange(){!this.startDate||!this.endDate||!this.location||!this.catalogVariable||o(this,C).jobStatusTask.run()}handlePlotOptionsChange(){this.emit("terra-plot-options-change",{detail:{colorMapName:this.colorMapName,opacity:this.opacity}})}connectedCallback(){super.connectedCallback(),this.addEventListener("terra-time-average-map-error",o(this,z)),this.addEventListener("terra-plot-toolbar-export-image",o(this,B))}async firstUpdated(){S(this,C,new $t(this)),this.intializeMap(),this._fetchVariableTask.run()}updated(t){var i,e,r,n;super.updated(t);let a=(e=(i=o(this,C))==null?void 0:i.jobStatusTask)==null?void 0:e.status;if(a===H.PENDING&&this.timeAverageMapError&&(this.timeAverageMapError=null),a===H.ERROR&&!this.timeAverageMapError){let s=(n=(r=o(this,C))==null?void 0:r.jobStatusTask)==null?void 0:n.error;if(s){let l=wt(s);if(l.isCancellation)return;this.timeAverageMapError={code:l.code,message:l.message,context:l.context}}}}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("terra-time-average-map-error",o(this,z)),this.removeEventListener("terra-plot-toolbar-export-image",o(this,B))}async updateGeoTIFFLayer(t){var r;let a=URL.createObjectURL(t),{default:i}=await import("ol/source/GeoTIFF.js"),e=new i({sources:[{url:a,bands:[1],nodata:this.noDataValue}],wrapX:!0,interpolate:!1,normalize:!1});S(this,v,new Lt({source:e})),o(this,d)&&(o(this,d).addLayer(o(this,v)),o(this,R)&&(o(this,d).removeLayer(o(this,R)),S(this,R,null)),await this.addBordersLayerForGeoTIFF(e)),this.metadata=await this.fetchGeotiffMetadata(e),this.long_name=(r=this.metadata.long_name)!=null?r:"",o(this,d)&&o(this,v)&&(this.renderPixelValues(o(this,d),o(this,v)),this.applyColorToLayer(e,this.colorMapName),setTimeout(async()=>{var n;try{let s=await((n=o(this,v).getSource())==null?void 0:n.getView()),l=kt(s.extent,s.projection,o(this,d).getView().getProjection());o(this,d).getView().fit(l,{padding:[50,50,50,50],duration:300})}catch(s){console.warn("Failed to fit map to GeoTIFF extent:",s)}},500))}intializeMap(){var a,i,e;let t=new Lt({source:new ae});if(S(this,A,new ee({strokeStyle:new Ft({color:"rgba(0,0,0,0.2)",width:2,lineDash:[.5,4]}),showLabels:!0,wrapX:!1})),S(this,d,new Zt({target:(i=(a=this.shadowRoot)==null?void 0:a.getElementById("map"))!=null?i:void 0,layers:[t,o(this,A)],view:new te({center:[0,0],zoom:2,projection:"EPSG:3857"})})),o(this,d)){let r=new ResizeObserver(()=>{var s;(s=o(this,d))==null||s.updateSize()}),n=(e=this.shadowRoot)==null?void 0:e.getElementById("map");n&&r.observe(n)}}async addBordersLayerForGeoTIFF(t){if(!o(this,d))return;let a;try{let e=await t.getView();e!=null&&e.extent&&(a=kt(e.extent,e.projection,o(this,d).getView().getProjection()))}catch(e){console.warn("Could not get GeoTIFF extent for border clipping:",e)}let i=new It({url:"https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_10m_admin_0_countries.geojson",format:new oe});S(this,R,new Et({source:i,extent:a,style:new ie({stroke:new Ft({color:"#000000",width:1})})})),o(this,d).addLayer(o(this,R))}async fetchGeotiffMetadata(t){var f;await t.getView();let e=(f=t.sourceImagery_[0][0].fileDirectory)==null?void 0:f.GDAL_METADATA,s=new DOMParser().parseFromString(e,"application/xml").querySelectorAll("Item"),l={};for(let g=0;g<s.length;g++){let c=s[g],u=c.getAttribute("name"),V=c.textContent?c.textContent.trim():"";u&&(l[u]=V)}return console.log("Data obj: ",l),l}renderPixelValues(t,a){t.on("pointermove",i=>{let e=a.getData(i.pixel),r=Nt(i.coordinate);(!e||!(e instanceof Uint8Array||e instanceof Uint8ClampedArray||e instanceof Float32Array)||isNaN(e[0])||e[0]===0)&&(e=null);let n=e?Number(e[0]).toExponential(3):"N/A",s=r.map(l=>l.toFixed(3)).join(", ");this.pixelValue=n,this.pixelCoordinates=s})}getNoDataValue(t){let a=this.noDataValue;return t==null||t.getView().then(()=>{var e,r;let i=t.sourceImagery_[0][0];a=parseFloat((r=(e=i.fileDirectory)==null?void 0:e.GDAL_NODATA)!=null?r:this.noDataValue.toString())}),a}async getMinMax(t){await t.getView();let e=(await t.sourceImagery_[0][0].readRasters({samples:[0]}))[0],r=1/0,n=-1/0;for(let s=0;s<e.length;s++){let l=e[s];!isNaN(l)&&l!=this.getNoDataValue(t)&&(l<r&&(r=l),l>n&&(n=l))}return{min:r,max:n}}async getColorStops(t,a,i,e,r){let n=(i-a)/(e-1),s=new Array(e*2),{default:l}=await import("colormap"),f=l({colormap:t,nshades:e,format:"rgba"}),g=[];r&&f.reverse();for(let c=0;c<e;c++)s[c*2]=a+c*n,s[c*2+1]=f[c],g.push((a+c*n).toExponential(2));return this.generatePalette(f,g,a,i),s}generatePalette(t,a,i,e){this.legendValues=[];for(let r=t.length-1;r>0;r--){let n=parseFloat(a[r]);n>=i&&n<=e&&this.legendValues.push({value:a[r],rgb:t[r]})}this.min=i.toExponential(3),this.max=e.toExponential(3)}async applyColorToLayer(t,a){var n;var{min:i,max:e}=await this.getMinMax(t);let r={color:["case",["==",["band",2],0],[0,0,0,0],["interpolate",["linear"],["band",1],...await this.getColorStops(a,i,e,72,!1)]]};(n=o(this,v))==null||n.setStyle(r)}render(){var t,a,i,e;return k`
+            ${b(this,it,Ut).call(this)?k`
+                      <terra-alert
+                          class="no-data-alert"
+                          variant="danger"
+                          open
+                          closable
+                      >
+                          <terra-icon
+                              slot="icon"
+                              name="outline-exclamation-triangle"
+                              library="heroicons"
+                          ></terra-icon>
+                          The selected variable was not found in the catalog
+                      </terra-alert>
+                  `:""}
+            ${this.timeAverageMapError?k`
+                      <terra-alert
+                          class="error-alert"
+                          variant="danger"
+                          open
+                          closable
+                          @terra-after-hide=${()=>this.timeAverageMapError=null}
+                      >
+                          <terra-icon
+                              slot="icon"
+                              name="outline-exclamation-triangle"
+                              library="heroicons"
+                          ></terra-icon>
+                          ${b(this,rt,qt).call(this,this.timeAverageMapError)}
+                      </terra-alert>
+                  `:""}
+            <div class="toolbar-container">
+                ${ce(this.catalogVariable?k`<terra-plot-toolbar
+                              dataType="geotiff"
+                              .catalogVariable=${this.catalogVariable}
+                              .timeSeriesData=${(t=o(this,C).jobStatusTask)==null?void 0:t.value}
+                              .location=${this.location}
+                              .startDate=${this.startDate}
+                              .endDate=${this.endDate}
+                              .cacheKey=${o(this,C).getCacheKey()}
+                              .variableEntryId=${lt(this)}
+                              @show-opacity-value=${b(this,Y,Mt)}
+                              @show-color-map=${b(this,K,Gt)}
+                              @show-check-box-toggle=${b(this,ot,_t)}
+                              .pixelValue=${this.pixelValue}
+                              .pixelCoordinates=${this.pixelCoordinates}
+                              show-date-range
+                              .colormaps=${this.colormaps}
+                              .colorMapName=${this.colorMapName}
+                              .opacity=${this.opacity}
+                          ></terra-plot-toolbar>`:k`<div class="spacer"></div>`)}
+            </div>
+
+            <div class="map-container">
+                <div id="map">
+                    <div id="settings">
+                        <div>
+                            <strong>Value:</strong>
+                            <span id="pixelValue">${this.pixelValue}</span>
+                        </div>
+
+                        <div>
+                            <strong>Coordinate: </strong>
+                            <span id="cursorCoordinates"
+                                >${this.pixelCoordinates}</span
+                            >
+                        </div>
+                    </div>
+
+                    <div id="legend">
+                        <div class="stats" id="statsMax">${this.max}</div>
+                        <div class="palette">
+                            ${this.legendValues.map(r=>k`
+                                    <div
+                                        class="color-box"
+                                        style="background-color: rgba(${r.rgb})"
+                                        title="${r.value}"
+                                    ></div>
+                                `)}
+                        </div>
+                        <div class="stats" id="statsMin">${this.min}</div>
+                    </div>
+                </div>
+            </div>
+
+            ${this.harmonyJobId?k`
+                      <div class="harmony-job-link">
+                          <a
+                              href=${`https://harmony${this.environment==="uat"?".uat":""}.earthdata.nasa.gov/jobs/${this.harmonyJobId}`}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                          >
+                              Request Status: ${this.harmonyJobId}
+                          </a>
+                      </div>
+                  `:Qt}
+
+            <!-- Floating Popover for Plot -->
+            ${this.toggleState&&this.plotData&&Object.keys(this.plotData).length&&this.layout&&Object.keys(this.layout).length?k`
+                      <div class="plot-popover ${this.minimized?"minimized":""}">
+                          <terra-plot
+                              style="display: ${this.minimized?"none":"block"}"
+                              .data=${this.plotData}
+                              plotTitle="Data Profile"
+                              .layout=${this.layout}
+                          >
+                          </terra-plot>
+
+                          <terra-button
+                              class="minify-btn"
+                              @click=${b(this,et,Bt)}
+                          >
+                              ${this.minimized?"Restore":"Minimize"}
+                          </terra-button>
+                      </div>
+                  `:null}
+
+            <dialog
+                ?open=${((i=(a=o(this,C))==null?void 0:a.jobStatusTask)==null?void 0:i.status)===H.PENDING}
+            >
+                <terra-loader indeterminate variant="orbit"></terra-loader>
+                <p>Plotting ${(e=this.catalogVariable)==null?void 0:e.dataFieldId}&hellip;</p>
+                <terra-button @click=${b(this,Q,Tt)}>Cancel</terra-button>
+            </dialog>
+        `}};C=new WeakMap,d=new WeakMap,v=new WeakMap,R=new WeakMap,E=new WeakMap,P=new WeakMap,I=new WeakMap,A=new WeakMap,z=new WeakMap,B=new WeakMap,W=new WeakSet,Rt=async function(t,a){var U,q;let i=(U=this.shadowRoot)==null?void 0:U.getElementById("legend");if(!i)return;let e=(q=this.shadowRoot)==null?void 0:q.getElementById("map");if(!e)return;let r=i.getBoundingClientRect(),n=e.getBoundingClientRect(),s=r.left-n.left,l=r.top-n.top+a,f=r.width,g=r.height;t.fillStyle="#ffffff",t.fillRect(s,l,f,g),t.strokeStyle="#cccccc",t.lineWidth=1,t.strokeRect(s,l,f,g);let c=window.getComputedStyle(i),u=parseFloat(c.fontSize)||12,V=c.fontFamily||"monospace",F=parseFloat(c.padding)||8,$=i.querySelector("#statsMax");$&&(t.fillStyle="#000000",t.font=`${u}px ${V}`,t.textAlign="center",t.textBaseline="top",t.fillText($.textContent||"",s+f/2,l+F));let M=i.querySelector(".palette");if(M){let y=M.getBoundingClientRect(),x=y.left-n.left,D=y.top-n.top+a,T=y.width,j=Array.from(M.querySelectorAll("div")),N=D;for(let G of j){let dt=G.getBoundingClientRect().height,mt=(G.getAttribute("style")||"").match(/background-color:\s*rgba?\(([^)]+)\)/);if(mt){let Ht=mt[1],[Wt,Jt,Xt,Yt=1]=Ht.split(",").map(Kt=>parseFloat(Kt.trim()));t.fillStyle=`rgba(${Wt}, ${Jt}, ${Xt}, ${Yt})`,t.fillRect(x,N,T,dt)}N+=dt}}let _=i.querySelector("#statsMin");_&&(t.fillStyle="#000000",t.font=`${u}px ${V}`,t.textAlign="center",t.textBaseline="bottom",t.fillText(_.textContent||"",s+f/2,l+g-F))},J=new WeakSet,Pt=function(){if(!this.catalogVariable)return"Time Averaged Map";let t=[];if(t.push("Time Averaged Map of"),this.catalogVariable.dataFieldLongName&&t.push(this.catalogVariable.dataFieldLongName),this.catalogVariable.dataProductTimeInterval&&this.catalogVariable.dataProductTimeInterval.toLowerCase()!=="not applicable"&&t.push(this.catalogVariable.dataProductTimeInterval),this.catalogVariable.dataProductSpatialResolution&&this.catalogVariable.dataProductSpatialResolution.toLowerCase()!=="not applicable"&&t.push(this.catalogVariable.dataProductSpatialResolution),this.catalogVariable.dataProductShortName){let a=`[${this.catalogVariable.dataProductShortName}`;this.catalogVariable.dataProductVersion&&(a+=` v${this.catalogVariable.dataProductVersion}`),a+="]",t.push(a)}if(this.startDate&&this.endDate){let a=st(this.startDate),i=st(this.endDate);t.push(`over ${a} - ${i}`)}return t.join(" ")},X=new WeakSet,jt=function(t,a,i,e){t.font=`bold ${e}px Arial, sans-serif`;let r=a.split(" "),n=[],s=r[0];for(let l=1;l<r.length;l++){let f=r[l];t.measureText(s+" "+f).width<i?s+=" "+f:(n.push(s),s=f)}return n.push(s),n},Y=new WeakSet,Mt=function(t){this.opacity=t.detail,o(this,v)&&o(this,v).setOpacity(this.opacity)},K=new WeakSet,Gt=function(t){let a=t.detail;o(this,v)&&o(this,v).getSource()&&(this.colorMapName=a,this.applyColorToLayer(o(this,v).getSource(),this.colorMapName))},Q=new WeakSet,Tt=function(){var t;(t=o(this,C).jobStatusTask)==null||t.abort("Cancelled time averaged map request")},Z=new WeakSet,At=function(t){let a=se(t),i;return a>100?i=a/1e3/60:i=a/10,Math.max(2,Math.round(i))},tt=new WeakSet,zt=function(t){let a=b(this,Z,At).call(this,t),i=[];for(let e=0;e<=a;e++){let r=e/a;i.push(t.getCoordinateAt(r))}return i},et=new WeakSet,Bt=function(){this.minimized=!this.minimized},at=new WeakSet,Ot=function(){var t;this.toggleState=!1,o(this,d)&&o(this,I)&&o(this,P)&&(o(this,d).removeInteraction(o(this,I)),o(this,d).removeLayer(o(this,P))),(t=o(this,E))==null||t.clear(),S(this,I,null),S(this,P,null),S(this,E,null)},O=new WeakSet,ct=function(t){if(!o(this,d)||!o(this,v))return NaN;let a=o(this,d).getPixelFromCoordinate(t);if(!a)return NaN;let i=o(this,v).getData(a);if(!i)return NaN;if(i instanceof Uint8Array||i instanceof Uint8ClampedArray||i instanceof Float32Array)return isNaN(i[0])?NaN:i[0];if(i instanceof DataView){let e=i.getFloat32(0,!0);return isNaN(e)?NaN:e}return NaN},ot=new WeakSet,_t=function(t){var a=t.detail;a?(this.toggleState=a,S(this,E,new It({wrapX:!1})),S(this,P,new Et({source:o(this,E)})),S(this,I,new re({source:o(this,E),type:"LineString"})),o(this,d)&&(o(this,d).addLayer(o(this,P)),o(this,d).addInteraction(o(this,I)),o(this,I).on("drawend",i=>{var c;let e=i.feature.getGeometry(),r=b(this,tt,zt).call(this,e),n=r.map(u=>new le({geometry:new ne(u)}));(c=o(this,E))==null||c.addFeatures(n);let s=r.map(u=>b(this,O,ct).call(this,u)),l=r.map((u,V)=>V),g=r.map(u=>{let[V,F]=Nt(u),$=b(this,O,ct).call(this,u),M=isNaN($)?"N/A":$.toExponential(4);return[parseFloat(V.toFixed(2)),parseFloat(F.toFixed(2)),M]}).map((u,V)=>{let F=V,$=u[2];return`Index: ${F}<br>Value: ${$}<br>Coordinates: [${u[0]}, ${u[1]}]`});this.plotData=[{x:l,y:s,text:g,hoverinfo:"text",type:"scatter",mode:"lines+markers",line:{color:"blue"}}],this.layout={title:"Data Profile",xaxis:{title:"Point Index"},yaxis:{title:`Cloud Coverage (${this.metadata.units})`,tickformat:".2e"}}}))):b(this,at,Ot).call(this)},it=new WeakSet,Ut=function(){return this._fetchVariableTask.status!==H.COMPLETE?!1:!!(this.collection&&this.variable)&&!this.catalogVariable},rt=new WeakSet,qt=function(t){return xt(t)},h.styles=[pt,Dt],h.dependencies={"terra-button":yt,"terra-icon":ft,"terra-plot-toolbar":Vt,"terra-loader":bt,"terra-plot":vt,"terra-alert":gt},m([L({reflect:!0})],h.prototype,"collection",2),m([L({reflect:!0})],h.prototype,"variable",2),m([L({attribute:"start-date",reflect:!0})],h.prototype,"startDate",2),m([L({attribute:"end-date",reflect:!0})],h.prototype,"endDate",2),m([L({reflect:!0})],h.prototype,"location",2),m([L({attribute:"bearer-token",reflect:!1})],h.prototype,"bearerToken",2),m([L({type:String})],h.prototype,"long_name",2),m([L({type:String,attribute:"color-map-name",reflect:!0})],h.prototype,"colorMapName",2),m([L({type:Number})],h.prototype,"opacity",2),m([w()],h.prototype,"catalogVariable",2),m([w()],h.prototype,"pixelValue",2),m([w()],h.prototype,"pixelCoordinates",2),m([w()],h.prototype,"metadata",2),m([w()],h.prototype,"toggleState",2),m([w()],h.prototype,"minimized",2),m([w()],h.prototype,"noDataValue",2),m([w()],h.prototype,"min",2),m([w()],h.prototype,"max",2),m([w()],h.prototype,"legendValues",2),m([w()],h.prototype,"timeAverageMapError",2),m([w()],h.prototype,"colormaps",2),m([w()],h.prototype,"plotData",2),m([w()],h.prototype,"layout",2),m([w()],h.prototype,"harmonyJobId",2),m([nt(["startDate","endDate","location","catalogVariable"])],h.prototype,"handlePropertyChange",1),m([nt(["colorMapName","opacity"])],h.prototype,"handlePlotOptionsChange",1);export{h as a};

package/dist/chunks/chunk.FEYHI7H6.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.Q3JKJL3Q.js";var s=e;e.define("terra-browse-variables");export{s as a};