terra_ui_components 0.0.79__tar.gz → 0.0.80__tar.gz

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: terra_ui_components
-Version: 0.0.79
+Version: 0.0.80
 Summary: NASA Terra UI Components Library
 License-File: LICENSE.md
 Requires-Python: >=3.8

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@nasa-terra/components",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@nasa-terra/components",
-      "version": "0.0.79",
+      "version": "0.0.80",
       "license": "MIT",
       "dependencies": {
         "@apollo/client": "^3.13.8",

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nasa-terra/components",
   "description": "A collection of NASA Earthdata components",
-  "version": "0.0.79",
+  "version": "0.0.80",
   "homepage": "https://github.com/nasa/terra-ui-components",
   "author": "NASA GES DISC <https://disc.gsfc.nasa.gov>",
   "license": "MIT",

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/pyproject.toml

@@ -5,7 +5,7 @@ build-backend = "hatchling.build"
 [project]
 name = "terra_ui_components"
 dependencies = ["anywidget>=0.9"]
-version = "0.0.79"
+version = "0.0.80"
 readme = "README.md"
 description = "NASA Terra UI Components Library"
 requires-python = ">=3.8"

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/src/components/browse-variables/browse-variables.component.ts

@@ -256,7 +256,7 @@ export default class TerraBrowseVariables extends TerraElement {
                                                     role="button"
                                                     tabindex="0"
                                                     aria-selected="false"
-                                                    data-facet="disciplines"
+                                                    data-facet=${column.facetKey}
                                                     @click=${this.toggleFacetSelect}
                                                 >
                                                     ${field.name}
@@ -450,11 +450,7 @@ export default class TerraBrowseVariables extends TerraElement {
                                             ><br />
                                             <span
                                                 >${metadata} •
-                                                <a
-                                                    target="_blank"
-                                                    href="${variable.dataProductDescriptionUrl}"
-                                                    >[${variable.dataProductShortName}_${variable.dataProductVersion}]</a
-                                                ></span
+                                                [${variable.dataProductShortName}_${variable.dataProductVersion}]</span
                                             >
                                         </label>
 

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/src/components/browse-variables/browse-variables.controller.ts

@@ -71,7 +71,7 @@ export class BrowseVariablesController {
             return (
                 variableEntryIds.includes(variable.dataFieldId) ||
                 variableEntryIds.includes(
-                    `${variable.dataProductShortName}_${variable.dataProductVersion}_${variable.dataFieldShortName}`
+                    `${variable.dataProductShortName}_${variable.dataProductVersion}_${variable.dataFieldAccessName}`
                 )
             )
         })

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/src/components/date-picker/date-picker.component.ts

@@ -36,7 +36,7 @@ export default class TerraDatePicker extends TerraElement {
     @property({ attribute: 'start-date' }) startDate?: string
     @property({ attribute: 'end-date' }) endDate?: string
     @property({ attribute: 'default-date' }) defaultDate?: string
-    @property({ type: Boolean, attribute: 'allow-input' }) allowInput = false
+    @property({ type: Boolean, attribute: 'allow-input' }) allowInput = true
     @property({ attribute: 'alt-format' }) altFormat = 'F j, Y'
     @property({ type: Boolean, attribute: 'alt-input' }) altInput = false
     @property({ attribute: 'alt-input-class' }) altInputClass = ''

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/src/components/map/leaflet-utils.ts

@@ -66,6 +66,7 @@ export interface MapViewOptions {
     maxZoom: number
     hasCoordTracker?: boolean
     hasNavigation?: boolean
+    staticMode?: boolean
     hideBoundingBoxDrawTool?: boolean
     hidePointSelectionDrawTool?: boolean
     initialValue?: LatLngBoundsExpression
@@ -86,7 +87,7 @@ export class Leaflet {
 
     // map initialization function
     initializeMap(container: HTMLElement, options: MapViewOptions) {
-        this.map = new L.Map(container, {
+        let mapOptions: L.MapOptions = {
             center:
                 options.latitude && options.longitude
                     ? L.latLng(options.latitude, options.longitude)
@@ -95,7 +96,18 @@ export class Leaflet {
             attributionControl: false,
             minZoom: options.minZoom,
             maxZoom: options.maxZoom,
-        })
+        }
+
+        if (options.staticMode) {
+            mapOptions.zoomControl = false
+            mapOptions.doubleClickZoom = false
+            mapOptions.scrollWheelZoom = false
+            mapOptions.dragging = false
+            mapOptions.touchZoom = false
+            mapOptions.boxZoom = false
+        }
+
+        this.map = new L.Map(container, mapOptions)
 
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: options.maxZoom,

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/src/components/map/map.component.ts

@@ -70,6 +70,9 @@ export default class TerraMap extends TerraElement {
     @property({ attribute: 'hide-point-selection', type: Boolean })
     hidePointSelection?: boolean
 
+    @property({ type: Boolean })
+    staticMode?: boolean = false
+
     @property({ type: Array })
     value: any = []
 
@@ -110,6 +113,7 @@ export default class TerraMap extends TerraElement {
             initialValue: this.value,
             hideBoundingBoxDrawTool: this.hideBoundingBoxSelection,
             hidePointSelectionDrawTool: this.hidePointSelection,
+            staticMode: this.staticMode,
         })
 
         this.map.on('draw', (layer: any) => {
@@ -197,10 +201,12 @@ export default class TerraMap extends TerraElement {
 
     render() {
         return html`
-            <!-- select goes here -->
             ${this.hasShapeSelector ? this.selectTemplate() : nothing}
-            <!-- "Map goes here" -->
-            <div part="map" id="map" class="map"></div>
+            <div
+                part="map"
+                id="map"
+                class=${`map ${this.staticMode ? 'static' : ''}`}
+            ></div>
         `
     }
 

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/src/components/map/map.styles.ts

@@ -13,6 +13,10 @@ export default css`
         border: solid 1px var(--terra-map-border-color);
     }
 
+    .map.static .leaflet-control-container {
+        display: none;
+    }
+
     .leaflet-mouse-position-container {
         color: var(--terra-input-color);
         padding: 5px;

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/src/components/plot-toolbar/notebooks/time-averaged-map-notebook.ts

@@ -21,7 +21,7 @@ export function getTimeAveragedMapNotebook(host: TerraPlotToolbar) {
         {
             id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
             cell_type: 'code',
-            source: '%pip install -q "terra_ui_components==0.0.79" "anywidget==0.9.15" "pandas"',
+            source: '%pip install -q "terra_ui_components==0.0.80" "anywidget==0.9.15" "pandas"',
             metadata: {
                 trusted: true,
             },
@@ -37,7 +37,7 @@ export function getTimeAveragedMapNotebook(host: TerraPlotToolbar) {
         {
             id: '870c1384-e706-48ee-ba07-fd552a949869',
             cell_type: 'code',
-            source: `from terra_ui_components import TerraTimeAverageMap\nmap = TerraTimeAverageMap()\nmap.collection='${host.catalogVariable.dataFieldId.replace(`_${host.catalogVariable.dataFieldShortName}`, '')}'\nmap.variable = '${host.catalogVariable.dataFieldShortName}'\nmap.startDate = '${host.startDate}'\nmap.endDate = '${host.endDate}'\nmap.location = '${host.location}'\n\nmap`,
+            source: `from terra_ui_components import TerraTimeAverageMap\nmap = TerraTimeAverageMap()\nmap.collection='${host.catalogVariable.dataFieldId.replace(`_${host.catalogVariable.dataFieldAccessName}`, '')}'\nmap.variable = '${host.catalogVariable.dataFieldAccessName}'\nmap.startDate = '${host.startDate}'\nmap.endDate = '${host.endDate}'\nmap.location = '${host.location}'\n\nmap`,
             metadata: {
                 trusted: true,
             },

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/src/components/plot-toolbar/notebooks/time-series-notebook.ts

@@ -21,7 +21,7 @@ export function getTimeSeriesNotebook(host: TerraPlotToolbar) {
         {
             id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
             cell_type: 'code',
-            source: '%pip install -q "terra_ui_components==0.0.79" "anywidget==0.9.15" "pandas"',
+            source: '%pip install -q "terra_ui_components==0.0.80" "anywidget==0.9.15" "pandas"',
             metadata: {
                 trusted: true,
             },

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/src/components/plot-toolbar/plot-toolbar.component.ts

@@ -14,6 +14,8 @@ import { DB_NAME, getDataByKey, IndexedDbStores } from '../../internal/indexeddb
 import type { VariableDbEntry } from '../time-series/time-series.types.js'
 import TerraButton from '../button/button.component.js'
 import TerraIcon from '../icon/icon.component.js'
+import TerraMap from '../map/map.component.js'
+import { parseBoundingBox } from '../map/leaflet-utils.js'
 import { cache } from 'lit/directives/cache.js'
 import { AuthController } from '../../auth/auth.controller.js'
 import { getTimeAveragedMapNotebook } from './notebooks/time-averaged-map-notebook.js'
@@ -39,6 +41,7 @@ export default class TerraPlotToolbar extends TerraElement {
     static dependencies = {
         'terra-icon': TerraIcon,
         'terra-button': TerraButton,
+        'terra-map': TerraMap,
     }
 
     @property() catalogVariable: Variable
@@ -50,10 +53,20 @@ export default class TerraPlotToolbar extends TerraElement {
     @property() endDate: string
     @property() cacheKey: string
     @property() dataType: DataType
+    @property({ type: Boolean, attribute: 'show-location' }) showLocation: boolean =
+        true
 
     @state()
     activeMenuItem: MenuNames = null
 
+    @state()
+    showLocationTooltip: boolean = false
+
+    @state()
+    locationMapValue: any = []
+
+    #tooltipTimeout: number | null = null
+
     @query('#menu') menu: HTMLMenuElement
 
     _authController = new AuthController(this)
@@ -71,6 +84,42 @@ export default class TerraPlotToolbar extends TerraElement {
         this.activeMenuItem = null
     }
 
+    #handleLocationMouseEnter() {
+        if (this.location && this.location.trim()) {
+            try {
+                this.locationMapValue = parseBoundingBox(this.location.trim())
+                // Add a small delay to prevent flickering
+                this.#tooltipTimeout = window.setTimeout(() => {
+                    this.showLocationTooltip = true
+                }, 150)
+            } catch (error) {
+                console.warn('Failed to parse location for tooltip:', error)
+                // Don't show tooltip if parsing fails
+                this.showLocationTooltip = false
+            }
+        }
+    }
+
+    #handleLocationMouseLeave() {
+        if (this.#tooltipTimeout) {
+            clearTimeout(this.#tooltipTimeout)
+            this.#tooltipTimeout = null
+        }
+        this.showLocationTooltip = false
+    }
+
+    #getLocationIcon() {
+        if (!this.location) return ''
+
+        return html`<terra-icon
+            name="outline-map-pin"
+            library="heroicons"
+            font-size="1em"
+            class="location-icon"
+            label="Point location"
+        ></terra-icon>`
+    }
+
     render() {
         const metadata = [
             this.catalogVariable.dataProductInstrumentShortName,
@@ -100,6 +149,20 @@ export default class TerraPlotToolbar extends TerraElement {
                                           .dataProductShortName}_${this
                                           .catalogVariable.dataProductVersion}]</a
                                   >
+                                  ${this.showLocation
+                                      ? html`• ${this.#getLocationIcon()}
+                                            <span
+                                                class="location-text"
+                                                @mouseenter=${this
+                                                    .#handleLocationMouseEnter}
+                                                @mouseleave=${this
+                                                    .#handleLocationMouseLeave}
+                                                >${this.location.replace(
+                                                    /,/g,
+                                                    ', '
+                                                )}</span
+                                            >`
+                                      : ''}
                               </h3>
                           </slot>
                       </div>
@@ -224,6 +287,22 @@ export default class TerraPlotToolbar extends TerraElement {
                               ${this.#renderJupyterNotebookPanel()}
                           </li>
                       </menu>
+
+                      ${this.showLocationTooltip
+                          ? html`
+                                <div class="location-tooltip">
+                                    <terra-map
+                                        .value=${this.locationMapValue}
+                                        zoom="4"
+                                        has-navigation="false"
+                                        hide-bounding-box-selection="true"
+                                        hide-point-selection="true"
+                                        .staticMode=${true}
+                                        style="width: 300px; height: 200px;"
+                                    ></terra-map>
+                                </div>
+                            `
+                          : ''}
                   </header>`
         )
     }

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/src/components/plot-toolbar/plot-toolbar.styles.ts

@@ -92,4 +92,50 @@ export default css`
     .spacer {
         padding-block: 1.375rem;
     }
+
+    .location-text {
+        cursor: pointer;
+        transition: color 0.2s ease;
+        display: inline-flex;
+        align-items: center;
+    }
+
+    .location-icon {
+        vertical-align: middle;
+        color: var(--terra-color-nasa-blue);
+    }
+
+    .location-text:hover {
+        color: var(--terra-color-nasa-blue);
+    }
+
+    .location-tooltip {
+        position: absolute;
+        top: 100%;
+        left: 50px;
+        z-index: 1001;
+        background: white;
+        border: 1px solid #ccc;
+        border-radius: 0.5em;
+        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+        padding: 0.5em;
+        margin-top: 0.5em;
+        animation: fadeIn 0.2s ease-in-out;
+        min-width: 320px;
+    }
+
+    .location-tooltip terra-map {
+        height: auto !important;
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translateY(-10px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
 `

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/src/components/spatial-picker/spatial-picker.component.ts

@@ -110,12 +110,18 @@ export default class TerraSpatialPicker extends TerraElement {
     @state()
     error: string = ''
 
+    @state()
+    private _popoverFlipped: boolean = false
+
     @query('.spatial-picker__input')
     spatialInput: HTMLInputElement
 
     @query('terra-map')
     map: TerraMap
 
+    @query('.spatial-picker')
+    spatialPicker: HTMLElement
+
     setValue(value: string) {
         try {
             this.mapValue = parseBoundingBox(value)
@@ -149,18 +155,41 @@ export default class TerraSpatialPicker extends TerraElement {
         // Don't hide if clicking within the map component
         const relatedTarget = e.relatedTarget as HTMLElement
         if (!relatedTarget?.closest('terra-map')) {
-            this.isExpanded = false
+            this.close()
         }
     }
 
     private _focus() {
         if (this.showMapOnFocus) {
-            this.isExpanded = true
+            this.open()
         }
     }
 
     private _click() {
-        this.isExpanded = !this.isExpanded
+        if (this.isExpanded) {
+            this.close()
+        } else {
+            this.open()
+        }
+    }
+
+    /**
+     * The spatial picker will either be positioned above or below the input depending on the space available
+     * @returns
+     */
+    private _checkPopoverPosition() {
+        if (this.inline) return
+
+        const viewportHeight = window.innerHeight
+        const pickerRect = this.spatialPicker.getBoundingClientRect()
+        const spaceBelow = viewportHeight - pickerRect.bottom
+        const spaceAbove = pickerRect.top
+
+        if (spaceBelow < 450 && spaceBelow < spaceAbove) {
+            this._popoverFlipped = true
+        } else {
+            this._popoverFlipped = false
+        }
     }
 
     private _emitMapChange() {
@@ -199,6 +228,7 @@ export default class TerraSpatialPicker extends TerraElement {
 
     open() {
         this.isExpanded = true
+        this._checkPopoverPosition()
     }
 
     close() {
@@ -237,11 +267,25 @@ export default class TerraSpatialPicker extends TerraElement {
                 this.initialValue === '' ? [] : parseBoundingBox(this.initialValue)
         }
 
+        // Add resize listener to handle viewport changes
+        window.addEventListener('resize', this._handleResize.bind(this))
+
         setTimeout(() => {
             this.invalidateSize()
         }, 500)
     }
 
+    private _handleResize() {
+        if (this.isExpanded && !this.inline) {
+            this._checkPopoverPosition()
+        }
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback()
+        window.removeEventListener('resize', this._handleResize.bind(this))
+    }
+
     renderMap() {
         return html`<terra-map
             class="${this.inline ? 'inline' : ''}"
@@ -310,6 +354,9 @@ export default class TerraSpatialPicker extends TerraElement {
                     : nothing}
                 ${expanded
                     ? html`<div
+                          class="spatial-picker__map-container ${this._popoverFlipped
+                              ? 'flipped'
+                              : ''}"
                           style="${this.inline
                               ? 'position: static; width: 100%;'
                               : ''}"

{terra_ui_components-0.0.79 → terra_ui_components-0.0.80}/src/components/spatial-picker/spatial-picker.styles.ts

@@ -47,12 +47,23 @@ export default css`
         width: 1.4rem;
     }
 
-    terra-map:not(.inline) {
+    .spatial-picker__map-container {
         position: absolute;
         top: 100%;
         left: 0;
         width: 100%;
         z-index: 200;
+        margin-top: 8px;
+    }
+
+    .spatial-picker__map-container.flipped {
+        top: auto;
+        bottom: 100%;
+        margin-bottom: 8px;
+    }
+
+    terra-map:not(.inline) {
+        width: 100%;
     }
 
     .button-icon {