terra_ui_components 0.0.120__tar.gz → 0.0.123__tar.gz

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/PKG-INFO

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

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/package-lock.json

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

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/package.json

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

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/pyproject.toml

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

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/src/components/data-subsetter/notebooks/subsetter-notebook.ts

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

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/src/components/date-picker/date-picker.component.ts

@@ -1478,6 +1478,7 @@ export default class TerraDatePicker extends TerraElement {
                                   distance="4"
                                   @terra-show=${this.handleDropdownShow}
                                   @terra-hide=${this.handleDropdownHide}
+                                  hoist
                               >
                                   <terra-input
                                       slot="trigger"
@@ -1499,6 +1500,7 @@ export default class TerraDatePicker extends TerraElement {
                                   distance="4"
                                   @terra-show=${this.handleDropdownShow}
                                   @terra-hide=${this.handleDropdownHide}
+                                  hoist
                               >
                                   <terra-input
                                       slot="trigger"
@@ -1524,6 +1526,7 @@ export default class TerraDatePicker extends TerraElement {
                               distance="4"
                               @terra-show=${this.handleDropdownShow}
                               @terra-hide=${this.handleDropdownHide}
+                              hoist
                           >
                               <terra-input
                                   slot="trigger"

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/src/components/date-picker/date-picker.styles.ts

@@ -14,6 +14,10 @@ export default css`
         position: relative;
     }
 
+    terra-dropdown {
+        width: 100%;
+    }
+
     /* Styles for dropdown panel content */
     terra-dropdown::part(panel) {
         padding: 0;
@@ -203,7 +207,7 @@ export default css`
         align-items: center;
         gap: var(--terra-spacing-2x-small);
         padding: var(--terra-spacing-x-small) var(--terra-spacing-small);
-        background: var(--terra-color-carbon-5);
+        background: var(--terra-input-background-color);
         border: var(--terra-input-border-width) solid var(--terra-input-border-color);
         border-radius: var(--terra-border-radius-medium);
         font-size: var(--terra-font-size-small);
@@ -215,7 +219,7 @@ export default css`
     }
 
     .calendar__month-button:hover {
-        background: var(--terra-color-carbon-10);
+        background: var(--terra-input-background-color-hover);
         border-color: var(--terra-input-border-color-hover);
     }
 
@@ -334,12 +338,12 @@ export default css`
     }
 
     .calendar__year-spinner:hover {
-        background: var(--terra-color-carbon-20);
-        color: var(--terra-input-icon-color-hover);
+        background: var(--terra-color-carbon-10);
+        color: var(--terra-color-carbon-90);
     }
 
     .calendar__year-spinner:active {
-        background: var(--terra-color-carbon-30);
+        background: var(--terra-color-carbon-20);
     }
 
     .calendar__nav {

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/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.120" "anywidget==0.9.15" "pandas" "rasterio" "matplotlib"',
+            source: '%pip install -q "terra_ui_components==0.0.123" "anywidget==0.9.15" "pandas" "rasterio" "matplotlib"',
             metadata: {
                 trusted: true,
             },

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/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.120" "anywidget==0.9.15" "pandas"',
+            source: '%pip install -q "terra_ui_components==0.0.123" "anywidget==0.9.15" "pandas"',
             metadata: {
                 trusted: true,
             },

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/src/components/spatial-picker/spatial-picker.component.ts

@@ -105,6 +105,9 @@ export default class TerraSpatialPicker extends TerraElement {
     @property({ attribute: 'show-map-on-focus', type: Boolean })
     showMapOnFocus: boolean = false
 
+    @property({ attribute: 'url-state', type: Boolean })
+    urlState: boolean = false
+
     @state()
     mapValue: any
 
@@ -295,6 +298,10 @@ export default class TerraSpatialPicker extends TerraElement {
     }
 
     private _updateURLParam(value: string | null) {
+        if (!this.urlState) {
+            return
+        }
+
         const url = new URL(window.location.href)
         if (value) {
             url.searchParams.set('spatial', value)
@@ -343,7 +350,7 @@ export default class TerraSpatialPicker extends TerraElement {
         const urlParams = new URLSearchParams(window.location.search)
         const spatialParam = urlParams.get('spatial')
 
-        if (spatialParam) {
+        if (spatialParam && this.urlState) {
             this.initialValue = spatialParam
             this.mapValue = parseBoundingBox(spatialParam)
             if (this.terraInput) {

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/src/components/time-average-map/time-average-map.component.ts

@@ -2,8 +2,12 @@ import { html } from 'lit'
 import { property, state } from 'lit/decorators.js'
 import { Map, MapBrowserEvent, View } from 'ol'
 import WebGLTileLayer from 'ol/layer/WebGLTile.js'
+import VectorLayer from 'ol/layer/Vector.js'
 import OSM from 'ol/source/OSM.js'
+import VectorSource from 'ol/source/Vector.js'
+import GeoJSON from 'ol/format/GeoJSON.js'
 import type GeoTIFF from 'ol/source/GeoTIFF.js'
+import { Style, Stroke } from 'ol/style.js'
 import TerraElement from '../../internal/terra-element.js'
 import componentStyles from '../../styles/component.styles.js'
 import styles from './time-average-map.styles.js'
@@ -47,6 +51,7 @@ export default class TerraTimeAverageMap extends TerraElement {
     #controller: TimeAvgMapController
     #map: Map | null = null
     #gtLayer: WebGLTileLayer | null = null
+    #bordersLayer: VectorLayer<VectorSource> | null = null
 
     _authController = new AuthController(this)
 
@@ -147,6 +152,14 @@ export default class TerraTimeAverageMap extends TerraElement {
 
         if (this.#map) {
             this.#map.addLayer(this.#gtLayer)
+
+            if (this.#bordersLayer) {
+                this.#map.removeLayer(this.#bordersLayer)
+                this.#bordersLayer = null
+            }
+
+            // Add borders/coastlines layer on top of the GeoTIFF layer
+            await this.addBordersLayerForGeoTIFF(gtSource)
         }
 
         const metadata = await this.fetchGeotiffMetadata(gtSource)
@@ -209,6 +222,45 @@ export default class TerraTimeAverageMap extends TerraElement {
         }
     }
 
+    async addBordersLayerForGeoTIFF(gtSource: GeoTIFF) {
+        if (!this.#map) {
+            return
+        }
+
+        // Get the GeoTIFF extent to clip borders rendering
+        let geoTiffExtent: number[] | undefined
+        try {
+            const view = await gtSource.getView()
+            if (view?.extent) {
+                geoTiffExtent = transformExtent(
+                    view.extent,
+                    view.projection!,
+                    this.#map.getView().getProjection()
+                )
+            }
+        } catch (error) {
+            console.warn('Could not get GeoTIFF extent for border clipping:', error)
+        }
+
+        const vectorSource = new VectorSource({
+            url: 'https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_10m_admin_0_countries.geojson',
+            format: new GeoJSON(),
+        })
+
+        this.#bordersLayer = new VectorLayer({
+            source: vectorSource,
+            extent: geoTiffExtent,
+            style: new Style({
+                stroke: new Stroke({
+                    color: '#000000',
+                    width: 1,
+                }),
+            }),
+        })
+
+        this.#map.addLayer(this.#bordersLayer)
+    }
+
     async fetchGeotiffMetadata(
         gtSource: GeoTIFF
     ): Promise<{ [key: string]: string }> {

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/src/terra_ui_components/base.py

@@ -16,12 +16,12 @@ class TerraBaseWidget(anywidget.AnyWidget):
         return f"""
         const terraStyles = document.createElement('link')
         terraStyles.rel = 'stylesheet'
-        terraStyles.href = 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.120/cdn/themes/horizon.css'
+        terraStyles.href = 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.123/cdn/themes/horizon.css'
         //terraStyles.href = "http://localhost:4000/dist/themes/horizon.css"
         document.head.appendChild(terraStyles)
 
         const terraAutoloader = document.createElement('script')
-        terraAutoloader.src = "https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.120/cdn/terra-ui-components-autoloader.js"
+        terraAutoloader.src = "https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.123/cdn/terra-ui-components-autoloader.js"
         //terraAutoloader.src = "http://localhost:4000/dist/terra-ui-components-autoloader.js"
         terraAutoloader.type = 'module'
         document.head.appendChild(terraAutoloader)

{terra_ui_components-0.0.120 → terra_ui_components-0.0.123}/src/themes/horizon.css

@@ -748,7 +748,10 @@
 @media (prefers-color-scheme: dark) {
     body.terra-prefers-color-scheme :root,
     body.terra-prefers-color-scheme :host,
-    body.terra-prefers-color-scheme {
+    body.terra-prefers-color-scheme,
+    .terra-prefers-color-scheme :root,
+    .terra-prefers-color-scheme :host,
+    .terra-prefers-color-scheme {
         color-scheme: dark;
 
         /* Primary Palette changes for dark mode */
@@ -784,7 +787,13 @@
         --terra-button-page-link-text-color: var(--terra-color-spacesuit-white);
 
         /* Input Styles */
+        --terra-input-background-color: var(--terra-color-carbon-10);
+        --terra-input-background-color-hover: var(--terra-color-carbon-10);
+        --terra-input-background-color-focus: var(--terra-color-carbon-10);
         --terra-input-border-color: var(--terra-color-carbon-60);
+        --terra-input-color: var(--terra-color-carbon-90);
+        --terra-input-color-hover: var(--terra-color-carbon-90);
+        --terra-input-color-focus: var(--terra-color-carbon-90);
 
         /* Map Component */
         --terra-map-background-color: var(--terra-color-carbon-10);
@@ -1022,6 +1031,14 @@
     --terra-tabs-track-color: var(--terra-color-carbon-20);
 }
 
+/* Site header - ensures the site header immediately renders and doesn't wait for web component to load */
+terra-site-header {
+    display: block;
+    background-color: var(--terra-color-carbon-black);
+    color: var(--terra-color-spacesuit-white);
+    height: 88px;
+}
+
 /* Toast stack - appears outside of a component so needs it's own styles */
 .terra-toast-stack {
     position: fixed;