terra_ui_components 0.0.71__tar.gz → 0.0.72__tar.gz

{terra_ui_components-0.0.71 → terra_ui_components-0.0.72}/PKG-INFO

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

{terra_ui_components-0.0.71 → terra_ui_components-0.0.72}/package-lock.json

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

{terra_ui_components-0.0.71 → terra_ui_components-0.0.72}/package.json

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

{terra_ui_components-0.0.71 → terra_ui_components-0.0.72}/pyproject.toml

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

{terra_ui_components-0.0.71 → terra_ui_components-0.0.72}/src/components/data-rods/data-rods.component.ts

@@ -7,8 +7,6 @@ import type { CSSResultGroup } from 'lit'
 import TerraVariableCombobox from '../variable-combobox/variable-combobox.component.js'
 import TerraSpatialPicker from '../spatial-picker/spatial-picker.component.js'
 import TerraDateRangeSlider from '../date-range-slider/date-range-slider.component.js'
-import { Task } from '@lit/task'
-import { GiovanniVariableCatalog } from '../../metadata-catalog/giovanni-variable-catalog.js'
 import type { Variable } from '../browse-variables/browse-variables.types.js'
 import { getUTCDate } from '../../utilities/date.js'
 import type { TerraDateRangeChangeEvent } from '../../events/terra-date-range-change.js'
@@ -16,6 +14,8 @@ import type { TerraComboboxChangeEvent } from '../../events/terra-combobox-chang
 import TerraTimeSeries from '../time-series/time-series.component.js'
 import type { TerraMapChangeEvent } from '../../events/terra-map-change.js'
 import { MapEventType } from '../map/type.js'
+import { getFetchVariableTask } from '../../metadata-catalog/tasks.js'
+import { getVariableEntryId } from '../../metadata-catalog/utilities.js'
 
 /**
  * @summary A component for visualizing Hydrology Data Rods time series using the GES DISC Giovanni API
@@ -90,37 +90,7 @@ export default class TerraDataRods extends TerraElement {
 
     @state() catalogVariable: Variable
 
-    #catalog = new GiovanniVariableCatalog()
-
-    // @ts-expect-error
-    #fetchVariableTask = new Task(this, {
-        task: async (_args, { signal }) => {
-            const variableEntryId = this.#getVariableEntryId()
-
-            console.debug('fetch variable ', variableEntryId)
-
-            if (!variableEntryId) {
-                return
-            }
-
-            const variable = await this.#catalog.getVariable(variableEntryId, {
-                signal,
-            })
-
-            console.debug('found variable ', variable)
-
-            if (!variable) {
-                return
-            }
-
-            this.startDate =
-                this.startDate ?? variable.exampleInitialStartDate?.toISOString()
-            this.endDate =
-                this.endDate ?? variable.exampleInitialEndDate?.toISOString()
-            this.catalogVariable = variable
-        },
-        args: () => [this.variableEntryId, this.collection, this.variable],
-    })
+    _fetchVariableTask = getFetchVariableTask(this)
 
     render() {
         const minDate = this.catalogVariable
@@ -133,7 +103,7 @@ export default class TerraDataRods extends TerraElement {
         return html`
             <terra-variable-combobox
                 exportparts="base:variable-combobox__base, combobox:variable-combobox__combobox, button:variable-combobox__button, listbox:variable-combobox__listbox"
-                .value=${this.#getVariableEntryId()}
+                .value=${getVariableEntryId(this)}
                 .bearerToken=${this.bearerToken ?? null}
                 .useTags=${true}
                 @terra-combobox-change="${this.#handleVariableChange}"
@@ -147,7 +117,7 @@ export default class TerraDataRods extends TerraElement {
             ></terra-spatial-picker>
 
             <terra-time-series
-                variable-entry-id=${this.#getVariableEntryId()}
+                variable-entry-id=${getVariableEntryId(this)}
                 start-date=${this.startDate}
                 end-date=${this.endDate}
                 location=${this.location}
@@ -166,14 +136,6 @@ export default class TerraDataRods extends TerraElement {
         `
     }
 
-    #getVariableEntryId() {
-        if (!this.variableEntryId && !(this.collection && this.variable)) {
-            return
-        }
-
-        return this.variableEntryId ?? `${this.collection}_${this.variable}`
-    }
-
     /**
      * anytime the date range slider changes, update the start and end date
      */

{terra_ui_components-0.0.71 → terra_ui_components-0.0.72}/src/components/plot-toolbar/plot-toolbar.component.ts

@@ -15,6 +15,7 @@ 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 { cache } from 'lit/directives/cache.js'
+import { AuthController } from '../../auth/auth.controller.js'
 
 /**
  * @summary Short summary of the component's intended use.
@@ -53,6 +54,8 @@ export default class TerraPlotToolbar extends TerraElement {
 
     @query('#menu') menu: HTMLMenuElement
 
+    _authController = new AuthController(this)
+
     @watch('activeMenuItem')
     handleFocus(_oldValue: MenuNames, newValue: MenuNames) {
         if (newValue === null) {
@@ -408,6 +411,29 @@ export default class TerraPlotToolbar extends TerraElement {
             return
         }
 
+        const handleMessage = (event: any) => {
+            if (event.data?.type !== 'jupyterlite-ready') {
+                return
+            }
+
+            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)
+    }
+
+    #sendDataToJupyterNotebook(jupyterWindow: Window) {
+        console.log('Sending data to JupyterLite...')
+
         // Fetch the time series data from IndexedDB
         getDataByKey<VariableDbEntry>(
             IndexedDbStores.TIME_SERIES,
@@ -416,6 +442,18 @@ export default class TerraPlotToolbar extends TerraElement {
             // we don't have an easy way of knowing when JupyterLite finishes loading, so we'll wait a bit and then post our notebook
             setTimeout(() => {
                 const notebook = [
+                    {
+                        cell_type: 'markdown',
+                        id: '367f56b9-7ca8-4435-9dcc-89bf586f33ab',
+                        metadata: {},
+                        source: [
+                            '### Prerequisites:\n',
+                            '\n',
+                            'This notebook uses the `terra_ui_components` and `anywidget` packages.\n',
+                            '\n',
+                            'After running the `pip install` cell for the first time, please reload the page to ensure the dependencies are active.',
+                        ],
+                    },
                     {
                         id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
                         cell_type: 'code',
@@ -426,6 +464,12 @@ export default class TerraPlotToolbar extends TerraElement {
                         outputs: [],
                         execution_count: null,
                     },
+                    {
+                        cell_type: 'markdown',
+                        id: '35aa4a00-8e2c-4478-9df7-de633fd8f6ce',
+                        metadata: {},
+                        source: ['### Render a point-based time series plot'],
+                    },
                     {
                         id: '870c1384-e706-48ee-ba07-fd552a949869',
                         cell_type: 'code',
@@ -436,6 +480,24 @@ export default class TerraPlotToolbar extends TerraElement {
                         outputs: [],
                         execution_count: null,
                     },
+                    {
+                        cell_type: 'markdown',
+                        id: '25b87ed4-2ad9-4c7d-b851-bc8fea3ded5a',
+                        metadata: {},
+                        source: [
+                            '### Access the time series data\n',
+                            '\n',
+                            'Once the time series runs and you see a plot, you can access the data:',
+                        ],
+                    },
+                    {
+                        cell_type: 'code',
+                        execution_count: null,
+                        id: '6b81a089-884d-4fd7-9d4e-c45a53307c20',
+                        metadata: {},
+                        outputs: [],
+                        source: ['timeseries.data'],
+                    },
                 ]
 
                 jupyterWindow.postMessage(
@@ -446,6 +508,7 @@ export default class TerraPlotToolbar extends TerraElement {
                         timeSeriesData,
                         databaseName: DB_NAME,
                         storeName: IndexedDbStores.TIME_SERIES,
+                        token: this.bearerToken,
                     },
                     '*'
                 )

{terra_ui_components-0.0.71 → terra_ui_components-0.0.72}/src/components/time-average-map/time-average-map.component.ts

@@ -13,14 +13,14 @@ import { TimeAvgMapController } from './time-average-map.controller.js'
 import TerraButton from '../button/button.component.js'
 import TerraIcon from '../icon/icon.component.js'
 import TerraPlotToolbar from '../plot-toolbar/plot-toolbar.component.js'
-import { GiovanniVariableCatalog } from '../../metadata-catalog/giovanni-variable-catalog.js'
-import { Task } from '@lit/task'
 import type { Variable } from '../browse-variables/browse-variables.types.js'
 import { cache } from 'lit/directives/cache.js'
 import { AuthController } from '../../auth/auth.controller.js'
 import { toLonLat } from 'ol/proj.js'
 // @ts-ignore
 import colormap from 'colormap'
+import { getFetchVariableTask } from '../../metadata-catalog/tasks.js'
+import { getVariableEntryId } from '../../metadata-catalog/utilities.js'
 
 export default class TerraTimeAverageMap extends TerraElement {
     static styles: CSSResultGroup = [componentStyles, styles]
@@ -135,7 +135,6 @@ export default class TerraTimeAverageMap extends TerraElement {
     @state() catalogVariable: Variable
 
     #controller: TimeAvgMapController
-    #catalog = new GiovanniVariableCatalog()
     _authController = new AuthController(this)
 
     #map: Map | null = null
@@ -144,36 +143,7 @@ export default class TerraTimeAverageMap extends TerraElement {
     /**
      * anytime the collection or variable changes, we'll fetch the variable from the catalog to get all of it's metadata
      */
-    _fetchVariableTask = new Task(this, {
-        task: async (_args, { signal }) => {
-            const variableEntryId = this.getVariableEntryId()
-
-            if (!variableEntryId) {
-                return
-            }
-
-            console.debug('Fetch variable ', variableEntryId)
-
-            const variable = await this.#catalog.getVariable(variableEntryId, {
-                signal,
-            })
-
-            console.debug('Found variable ', variable)
-
-            if (!variable) {
-                return
-            }
-
-            // if we don't have dates, use the example initial dates, which is the last 7 days of data
-            this.startDate =
-                this.startDate ?? variable.exampleInitialStartDate?.toISOString()
-            this.endDate =
-                this.endDate ?? variable.exampleInitialEndDate?.toISOString()
-
-            this.catalogVariable = variable
-        },
-        args: () => [this.collection, this.variable],
-    })
+    _fetchVariableTask = getFetchVariableTask(this)
 
     async firstUpdated() {
         this.#controller = new TimeAvgMapController(this)
@@ -373,14 +343,6 @@ export default class TerraTimeAverageMap extends TerraElement {
         }
     }
 
-    getVariableEntryId() {
-        if (!this.collection || !this.variable) {
-            return
-        }
-
-        return `${this.collection}_${this.variable}`
-    }
-
     render() {
         return html`
             ${cache(
@@ -393,7 +355,7 @@ export default class TerraTimeAverageMap extends TerraElement {
                           .startDate=${this.startDate}
                           .endDate=${this.endDate}
                           .cacheKey=${this.#controller.getCacheKey()}
-                          .variableEntryId=${this.getVariableEntryId()}
+                          .variableEntryId=${getVariableEntryId(this)}
                       ></terra-plot-toolbar>`
                     : html`<div class="spacer"></div>`
             )}

{terra_ui_components-0.0.71 → terra_ui_components-0.0.72}/src/components/time-series/time-series.component.ts

@@ -8,16 +8,16 @@ import TerraLoader from '../loader/loader.component.js'
 import TerraPlot from '../plot/plot.component.js'
 import { html } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
-import { Task, TaskStatus } from '@lit/task'
+import { TaskStatus } from '@lit/task'
 import { TimeSeriesController } from './time-series.controller.js'
 import type { CSSResultGroup } from 'lit'
 import type { Variable } from '../browse-variables/browse-variables.types.js'
-import { GiovanniVariableCatalog } from '../../metadata-catalog/giovanni-variable-catalog.js'
 import type { TerraPlotRelayoutEvent } from '../../events/terra-plot-relayout.js'
 import { formatDate } from '../../utilities/date.js'
 import TerraPlotToolbar from '../plot-toolbar/plot-toolbar.component.js'
 import { AuthController } from '../../auth/auth.controller.js'
 import { cache } from 'lit/directives/cache.js'
+import { getFetchVariableTask } from '../../metadata-catalog/tasks.js'
 
 /**
  * @summary A component for visualizing time series data using the GES DISC Giovanni API.
@@ -120,39 +120,9 @@ export default class TerraTimeSeries extends TerraElement {
     @state()
     estimatedDataPoints = 0
 
-    #catalog = new GiovanniVariableCatalog()
     _authController = new AuthController(this)
 
-    // @ts-expect-error
-    #fetchVariableTask = new Task(this, {
-        task: async (_args, { signal }) => {
-            const variableEntryId = this.getVariableEntryId()
-
-            console.debug('fetch variable ', variableEntryId)
-
-            if (!variableEntryId) {
-                return
-            }
-
-            const variable = await this.#catalog.getVariable(variableEntryId, {
-                signal,
-            })
-
-            console.debug('found variable ', variable)
-
-            if (!variable) {
-                return
-            }
-
-            this.startDate =
-                this.startDate ?? variable.exampleInitialStartDate?.toISOString()
-            this.endDate =
-                this.endDate ?? variable.exampleInitialEndDate?.toISOString()
-
-            this.catalogVariable = variable
-        },
-        args: () => [this.variableEntryId, this.collection, this.variable],
-    })
+    _fetchVariableTask = getFetchVariableTask(this)
 
     connectedCallback(): void {
         super.connectedCallback()
@@ -328,14 +298,6 @@ export default class TerraTimeSeries extends TerraElement {
         `
     }
 
-    getVariableEntryId() {
-        if (!this.variableEntryId && !(this.collection && this.variable)) {
-            return
-        }
-
-        return this.variableEntryId ?? `${this.collection}_${this.variable}`
-    }
-
     #getYAxisLabel() {
         if (!this.catalogVariable) {
             return

{terra_ui_components-0.0.71 → terra_ui_components-0.0.72}/src/internal/terra-element.ts

@@ -87,6 +87,7 @@ export default class TerraElement extends LitElement {
     @property() dir: string
     @property() lang: string
     @property() environment?: Environment = getEnvironment()
+    @property() bearerToken?: string
 
     /** Emits a custom event with more convenient defaults. */
     emit<T extends string & keyof EventTypesWithoutRequiredDetail>(

terra_ui_components-0.0.72/src/metadata-catalog/tasks.ts

@@ -0,0 +1,38 @@
+import { Task } from '@lit/task'
+import { GiovanniVariableCatalog } from './giovanni-variable-catalog.js'
+import type { HostWithMaybeProperties } from './types.js'
+import { getVariableEntryId } from './utilities.js'
+
+export function getFetchVariableTask(host: HostWithMaybeProperties) {
+    const catalog = new GiovanniVariableCatalog() // TODO: replace this with a factory call when we switch to CMR
+
+    return new Task(host, {
+        task: async (_args, { signal }) => {
+            const variableEntryId = getVariableEntryId(host)
+
+            console.debug('fetch variable ', variableEntryId)
+
+            if (!variableEntryId) {
+                return
+            }
+
+            const variable = await catalog.getVariable(variableEntryId, {
+                signal,
+            })
+
+            console.debug('found variable ', variable)
+
+            if (!variable) {
+                return
+            }
+
+            host.startDate =
+                host.startDate ?? variable.exampleInitialStartDate?.toISOString()
+            host.endDate =
+                host.endDate ?? variable.exampleInitialEndDate?.toISOString()
+            host.catalogVariable = variable
+            host.variableEntryId = variableEntryId
+        },
+        args: () => [host.variableEntryId, host.collection, host.variable],
+    })
+}

{terra_ui_components-0.0.71 → terra_ui_components-0.0.72}/src/metadata-catalog/types.ts

@@ -1,3 +1,4 @@
+import type { ReactiveControllerHost } from 'lit'
 import type { Variable } from '../components/browse-variables/browse-variables.types.js'
 
 export type SearchOptions = {
@@ -79,3 +80,12 @@ export type GetVariablesResponse = {
     variables: Variable[]
     facets: GiovanniFacet[]
 }
+
+export type HostWithMaybeProperties = ReactiveControllerHost & {
+    variableEntryId?: string
+    collection?: string
+    variable?: string
+    startDate?: string
+    endDate?: string
+    catalogVariable?: Variable
+}

terra_ui_components-0.0.72/src/metadata-catalog/utilities.ts

@@ -0,0 +1,9 @@
+import type { HostWithMaybeProperties } from './types.js'
+
+export function getVariableEntryId(host: HostWithMaybeProperties) {
+    if (!host.variableEntryId && !(host.collection && host.variable)) {
+        return
+    }
+
+    return host.variableEntryId ?? `${host.collection}_${host.variable}`
+}

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