terra_ui_components 0.0.76__tar.gz → 0.0.79__tar.gz

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

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

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

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

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

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

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

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

{terra_ui_components-0.0.76 → terra_ui_components-0.0.79}/scripts/bump-python-version.js

@@ -39,15 +39,43 @@ try {
 
     console.log(`Updated base.py version to: ${newVersion}`)
 
-    // Stage both files
+    // Update notebook files in src/components/plot-toolbar/notebooks/
+    const notebooksDir = path.join('src', 'components', 'plot-toolbar', 'notebooks')
+    const notebookFiles = fs
+        .readdirSync(notebooksDir)
+        .filter(file => file.endsWith('.ts'))
+
+    for (const notebookFile of notebookFiles) {
+        const notebookPath = path.join(notebooksDir, notebookFile)
+        let notebookContent = fs.readFileSync(notebookPath, 'utf8')
+
+        // Replace terra_ui_components==VERSION pattern
+        const updatedContent = notebookContent.replace(
+            /"terra_ui_components==\d+\.\d+\.\d+"/g,
+            `"terra_ui_components==${newVersion}"`
+        )
+
+        if (updatedContent !== notebookContent) {
+            fs.writeFileSync(notebookPath, updatedContent, 'utf8')
+            console.log(`Updated ${notebookFile} version to: ${newVersion}`)
+        }
+    }
+
+    // Stage all updated files
     execSync('git add pyproject.toml')
     execSync(`git add ${basePyPath}`)
 
+    // Stage notebook files if they were updated
+    for (const notebookFile of notebookFiles) {
+        const notebookPath = path.join(notebooksDir, notebookFile)
+        execSync(`git add ${notebookPath}`)
+    }
+
     // Amend the previous commit to include the updated versions
     execSync('git commit --amend --no-edit')
 
     console.log(
-        'Amended commit to include updated pyproject.toml and base.py versions.'
+        'Amended commit to include updated pyproject.toml, base.py, and notebook versions.'
     )
 } catch (error) {
     console.error('Error updating Python version:', error.message)

{terra_ui_components-0.0.76 → terra_ui_components-0.0.79}/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.70" "anywidget==0.9.15" "pandas"',
+            source: '%pip install -q "terra_ui_components==0.0.79" "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.dataProductShortName}_${host.catalogVariable.dataProductVersion}'\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.dataFieldShortName}`, '')}'\nmap.variable = '${host.catalogVariable.dataFieldShortName}'\nmap.startDate = '${host.startDate}'\nmap.endDate = '${host.endDate}'\nmap.location = '${host.location}'\n\nmap`,
             metadata: {
                 trusted: true,
             },

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

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

@@ -420,17 +420,9 @@ export default class TerraPlotToolbar extends TerraElement {
 
             console.log('JupyterLite is ready!')
             this.#sendDataToJupyterNotebook(jupyterWindow)
-
-            window.removeEventListener('message', handleMessage.bind(this))
         }
 
-        window.addEventListener('message', handleMessage.bind(this))
-
-        // fallback option if we don't hear something in 5 seconds
-        setTimeout(() => {
-            console.log('JupyterLite is not ready!')
-            window.removeEventListener('message', handleMessage.bind(this))
-        }, 5000)
+        window.addEventListener('message', handleMessage.bind(this), { once: true })
     }
 
     #sendDataToJupyterNotebook(jupyterWindow: Window) {

{terra_ui_components-0.0.76 → terra_ui_components-0.0.79}/src/components/time-average-map/time-average-map.component.ts

@@ -19,6 +19,7 @@ import { toLonLat } from 'ol/proj.js'
 import { getFetchVariableTask } from '../../metadata-catalog/tasks.js'
 import { getVariableEntryId } from '../../metadata-catalog/utilities.js'
 import colormap from 'colormap'
+import { watch } from '../../internal/watch.js'
 
 export default class TerraTimeAverageMap extends TerraElement {
     static styles: CSSResultGroup = [componentStyles, styles]
@@ -123,19 +124,30 @@ export default class TerraTimeAverageMap extends TerraElement {
      */
     _fetchVariableTask = getFetchVariableTask(this, false)
 
+    @watch(['startDate', 'endDate', 'location', 'catalogVariable'])
+    handlePropertyChange() {
+        if (
+            !this.startDate ||
+            !this.endDate ||
+            !this.location ||
+            !this.catalogVariable
+        ) {
+            return
+        }
+
+        this.#controller.jobStatusTask.run()
+    }
+
     async firstUpdated() {
         this.#controller = new TimeAvgMapController(this)
         // Initialize the base layer open street map
         this.intializeMap()
-        this.updateGeoTIFFLayer()
+        this._fetchVariableTask.run()
     }
 
-    async updateGeoTIFFLayer() {
-        await this._fetchVariableTask.run()
-        await this.#controller.jobStatusTask.run()
+    async updateGeoTIFFLayer(blob: Blob) {
         // The task returns the blob upon completion
-        let job_status_value = this.#controller.jobStatusTask.value
-        const blobUrl = URL.createObjectURL(job_status_value)
+        const blobUrl = URL.createObjectURL(blob)
 
         const gtSource = new GeoTIFF({
             sources: [
@@ -201,7 +213,6 @@ export default class TerraTimeAverageMap extends TerraElement {
                 zoom: 2,
                 projection: 'EPSG:3857',
             }),
-            controls: [],
         })
     }
 

{terra_ui_components-0.0.76 → terra_ui_components-0.0.79}/src/components/time-average-map/time-average-map.controller.ts

@@ -76,7 +76,9 @@ export class TimeAvgMapController {
                             'Returning existing map blob from cache',
                             cacheKey
                         )
-                        this.blobUrl = existing.blob
+
+                        this.#updateGeoTIFFLayer(existing.blob)
+
                         return existing.blob
                     }
 
@@ -103,17 +105,6 @@ export class TimeAvgMapController {
                             environment: this.#host.environment,
                         }
                     )
-                    this.blobUrl = blob
-
-                    this.#host.emit('terra-time-average-map-data-change', {
-                        detail: {
-                            data: blob,
-                            variable: this.#host.catalogVariable!,
-                            startDate: formatDate(this.#host.startDate!),
-                            endDate: formatDate(this.#host.endDate!),
-                            location: this.#host.location!,
-                        },
-                    })
 
                     // Store in cache
                     await storeDataByKey(IndexedDbStores.TIME_AVERAGE_MAP, cacheKey, {
@@ -123,6 +114,8 @@ export class TimeAvgMapController {
                         blob,
                     })
 
+                    this.#updateGeoTIFFLayer(blob)
+
                     return blob
                 } catch (err) {
                     const error_msg = `Failed to create subset job: ${err}`
@@ -135,6 +128,22 @@ export class TimeAvgMapController {
         })
     }
 
+    #updateGeoTIFFLayer(blob: Blob) {
+        this.blobUrl = blob
+
+        this.#host.emit('terra-time-average-map-data-change', {
+            detail: {
+                data: blob,
+                variable: this.#host.catalogVariable!,
+                startDate: formatDate(this.#host.startDate!),
+                endDate: formatDate(this.#host.endDate!),
+                location: this.#host.location!,
+            },
+        })
+
+        this.#host.updateGeoTIFFLayer(blob)
+    }
+
     render(renderFunctions: StatusRenderer<any>) {
         return this.jobStatusTask.render(renderFunctions)
     }

terra_ui_components-0.0.79/src/components/time-average-map/time-average-map.styles.ts

@@ -0,0 +1,341 @@
+import { css } from 'lit'
+
+export default css`
+    :host {
+        display: block;
+        height: 800px;
+    }
+
+    #map {
+        position: relative;
+        width: 100%;
+        height: 100%;
+    }
+
+    #settings {
+        opacity: 0.75;
+        position: absolute;
+        bottom: 150px;
+        left: 10px;
+        background: rgba(255, 255, 255, 0.9);
+        padding: 8px 10px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-family: monospace;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+        z-index: 10;
+        pointer-events: auto;
+    }
+
+    label {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    :root,
+    :host {
+        --ol-background-color: white;
+        --ol-accent-background-color: #f5f5f5;
+        --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
+        --ol-partial-background-color: rgba(255, 255, 255, 0.75);
+        --ol-foreground-color: #333333;
+        --ol-subtle-foreground-color: #666666;
+        --ol-brand-color: #00aaff;
+    }
+
+    .ol-box {
+        box-sizing: border-box;
+        border-radius: 2px;
+        border: 1.5px solid var(--ol-background-color);
+        background-color: var(--ol-partial-background-color);
+    }
+
+    .ol-mouse-position {
+        top: 8px;
+        right: 8px;
+        position: absolute;
+    }
+
+    .ol-scale-line {
+        background: var(--ol-partial-background-color);
+        border-radius: 4px;
+        bottom: 8px;
+        left: 8px;
+        padding: 2px;
+        position: absolute;
+    }
+
+    .ol-scale-line-inner {
+        border: 1px solid var(--ol-subtle-foreground-color);
+        border-top: none;
+        color: var(--ol-foreground-color);
+        font-size: 10px;
+        text-align: center;
+        margin: 1px;
+        will-change: contents, width;
+        transition: all 0.25s;
+    }
+
+    .ol-scale-bar {
+        position: absolute;
+        bottom: 8px;
+        left: 8px;
+    }
+
+    .ol-scale-bar-inner {
+        display: flex;
+    }
+
+    .ol-scale-step-marker {
+        width: 1px;
+        height: 15px;
+        background-color: var(--ol-foreground-color);
+        float: right;
+        z-index: 10;
+    }
+
+    .ol-scale-step-text {
+        position: absolute;
+        bottom: -5px;
+        font-size: 10px;
+        z-index: 11;
+        color: var(--ol-foreground-color);
+        text-shadow:
+            -1.5px 0 var(--ol-partial-background-color),
+            0 1.5px var(--ol-partial-background-color),
+            1.5px 0 var(--ol-partial-background-color),
+            0 -1.5px var(--ol-partial-background-color);
+    }
+
+    .ol-scale-text {
+        position: absolute;
+        font-size: 12px;
+        text-align: center;
+        bottom: 25px;
+        color: var(--ol-foreground-color);
+        text-shadow:
+            -1.5px 0 var(--ol-partial-background-color),
+            0 1.5px var(--ol-partial-background-color),
+            1.5px 0 var(--ol-partial-background-color),
+            0 -1.5px var(--ol-partial-background-color);
+    }
+
+    .ol-scale-singlebar {
+        position: relative;
+        height: 10px;
+        z-index: 9;
+        box-sizing: border-box;
+        border: 1px solid var(--ol-foreground-color);
+    }
+
+    .ol-scale-singlebar-even {
+        background-color: var(--ol-subtle-foreground-color);
+    }
+
+    .ol-scale-singlebar-odd {
+        background-color: var(--ol-background-color);
+    }
+
+    .ol-unsupported {
+        display: none;
+    }
+
+    .ol-viewport,
+    .ol-unselectable {
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    .ol-viewport canvas {
+        all: unset;
+        overflow: hidden;
+    }
+
+    .ol-viewport {
+        touch-action: pan-x pan-y;
+    }
+
+    .ol-selectable {
+        -webkit-touch-callout: default;
+        -webkit-user-select: text;
+        -moz-user-select: text;
+        user-select: text;
+    }
+
+    .ol-grabbing {
+        cursor: -webkit-grabbing;
+        cursor: -moz-grabbing;
+        cursor: grabbing;
+    }
+
+    .ol-grab {
+        cursor: move;
+        cursor: -webkit-grab;
+        cursor: -moz-grab;
+        cursor: grab;
+    }
+
+    .ol-control {
+        position: absolute;
+        background-color: var(--ol-subtle-background-color);
+        border-radius: 4px;
+    }
+
+    .ol-zoom {
+        top: 0.5em;
+        left: 0.5em;
+    }
+
+    .ol-rotate {
+        top: 0.5em;
+        right: 0.5em;
+        transition:
+            opacity 0.25s linear,
+            visibility 0s linear;
+    }
+
+    .ol-rotate.ol-hidden {
+        opacity: 0;
+        visibility: hidden;
+        transition:
+            opacity 0.25s linear,
+            visibility 0s linear 0.25s;
+    }
+
+    .ol-zoom-extent {
+        top: 4.643em;
+        left: 0.5em;
+    }
+
+    .ol-full-screen {
+        right: 0.5em;
+        top: 0.5em;
+    }
+
+    .ol-control button {
+        display: block;
+        margin: 1px;
+        padding: 0;
+        color: var(--ol-subtle-foreground-color);
+        font-weight: bold;
+        text-decoration: none;
+        font-size: inherit;
+        text-align: center;
+        height: 1.375em;
+        width: 1.375em;
+        line-height: 0.4em;
+        background-color: var(--ol-background-color);
+        border: none;
+        border-radius: 2px;
+    }
+
+    .ol-control button::-moz-focus-inner {
+        border: none;
+        padding: 0;
+    }
+
+    .ol-zoom-extent button {
+        line-height: 1.4em;
+    }
+
+    .ol-compass {
+        display: block;
+        font-weight: normal;
+        will-change: transform;
+    }
+
+    .ol-touch .ol-control button {
+        font-size: 1.5em;
+    }
+
+    .ol-touch .ol-zoom-extent {
+        top: 5.5em;
+    }
+
+    .ol-control button:hover,
+    .ol-control button:focus {
+        text-decoration: none;
+        outline: 1px solid var(--ol-subtle-foreground-color);
+        color: var(--ol-foreground-color);
+    }
+
+    .ol-zoom .ol-zoom-in {
+        border-radius: 2px 2px 0 0;
+    }
+
+    .ol-zoom .ol-zoom-out {
+        border-radius: 0 0 2px 2px;
+    }
+
+    .ol-attribution {
+        display: none !important;
+    }
+
+    .ol-zoomslider {
+        top: 4.5em;
+        left: 0.5em;
+        height: 200px;
+    }
+
+    .ol-zoomslider button {
+        position: relative;
+        height: 10px;
+    }
+
+    .ol-touch .ol-zoomslider {
+        top: 5.5em;
+    }
+
+    .ol-overviewmap {
+        left: 0.5em;
+        bottom: 0.5em;
+    }
+
+    .ol-overviewmap.ol-uncollapsible {
+        bottom: 0;
+        left: 0;
+        border-radius: 0 4px 0 0;
+    }
+
+    .ol-overviewmap .ol-overviewmap-map,
+    .ol-overviewmap button {
+        display: block;
+    }
+
+    .ol-overviewmap .ol-overviewmap-map {
+        border: 1px solid var(--ol-subtle-foreground-color);
+        height: 150px;
+        width: 150px;
+    }
+
+    .ol-overviewmap:not(.ol-collapsed) button {
+        bottom: 0;
+        left: 0;
+        position: absolute;
+    }
+
+    .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
+    .ol-overviewmap.ol-uncollapsible button {
+        display: none;
+    }
+
+    .ol-overviewmap:not(.ol-collapsed) {
+        background: var(--ol-subtle-background-color);
+    }
+
+    .ol-overviewmap-box {
+        border: 1.5px dotted var(--ol-subtle-foreground-color);
+    }
+
+    .ol-overviewmap .ol-overviewmap-box:hover {
+        cursor: move;
+    }
+
+    .ol-overviewmap .ol-viewport:hover {
+        cursor: pointer;
+    }
+`

{terra_ui_components-0.0.76 → terra_ui_components-0.0.79}/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.76/cdn/themes/horizon.css'
+        terraStyles.href = 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.79/cdn/themes/horizon.css'
         //terraStyles.href = "https://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.76/cdn/terra-ui-components-autoloader.js"
+        terraAutoloader.src = "https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.79/cdn/terra-ui-components-autoloader.js"
         //terraAutoloader.src = "https://localhost:4000/dist/terra-ui-components-autoloader.js"
         terraAutoloader.type = 'module'
         document.head.appendChild(terraAutoloader)

terra_ui_components-0.0.76/src/components/time-average-map/time-average-map.styles.ts

@@ -1,35 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-    :host {
-        display: block;
-        height: 800px;
-    }
-
-    #map {
-        position: relative;
-        width: 100%;
-        height: 100%;
-    }
-
-    #settings {
-        opacity: 0.75;
-        position: absolute;
-        bottom: 150px;
-        left: 10px;
-        background: rgba(255, 255, 255, 0.9);
-        padding: 8px 10px;
-        border-radius: 4px;
-        font-size: 12px;
-        font-family: monospace;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-        z-index: 10;
-        pointer-events: auto;
-    }
-
-    label {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-`