terra_ui_components 0.0.87__tar.gz → 0.0.96__tar.gz

{terra_ui_components-0.0.87 → terra_ui_components-0.0.96}/PKG-INFO

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

{terra_ui_components-0.0.87 → terra_ui_components-0.0.96}/docs/pages/components/data-subsetter.md

@@ -62,12 +62,6 @@ The `<terra-data-subsetter>` component provides a complete UI for subsetting and
 </div>
 ```
 
-### Displaying an Existing Job
-
-```html:preview
-<terra-data-subsetter job-id="harmony-job-123456"></terra-data-subsetter>
-```
-
 ## Best Practices
 
 -   Use `collection-entry-id` to pre-select a collection and skip the search UI for a streamlined experience.

{terra_ui_components-0.0.87 → terra_ui_components-0.0.96}/package-lock.json

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

{terra_ui_components-0.0.87 → terra_ui_components-0.0.96}/package.json

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

{terra_ui_components-0.0.87 → terra_ui_components-0.0.96}/pyproject.toml

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

{terra_ui_components-0.0.87 → terra_ui_components-0.0.96}/scripts/bump-python-version.js

@@ -39,37 +39,39 @@ try {
 
     console.log(`Updated base.py version to: ${newVersion}`)
 
-    // 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}`)
+    function updateNotebookVersion(notebookDir) {
+        const notebookFiles = fs
+            .readdirSync(notebookDir)
+            .filter(file => file.endsWith('.ts'))
+
+        for (const notebookFile of notebookFiles) {
+            const notebookPath = path.join(notebookDir, 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}`)
+            }
         }
     }
 
+    // Update notebook files
+    updateNotebookVersion(path.join('src', 'components', 'plot-toolbar', 'notebooks'))
+    updateNotebookVersion(
+        path.join('src', 'components', 'data-subsetter', 'notebooks')
+    )
+
     // 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}`)
-    }
+    execSync('git add src/components/plot-toolbar/notebooks')
+    execSync('git add src/components/data-subsetter/notebooks')
 
     // Amend the previous commit to include the updated versions
     execSync('git commit --amend --no-edit')

{terra_ui_components-0.0.87 → terra_ui_components-0.0.96}/src/components/data-subsetter/data-subsetter.component.ts

@@ -28,6 +28,10 @@ import type { LatLng } from 'leaflet'
 import { MapEventType } from '../map/type.js'
 import { AuthController } from '../../auth/auth.controller.js'
 import TerraLogin from '../login/login.component.js'
+import { TaskStatus } from '@lit/task'
+import TerraLoader from '../loader/loader.component.js'
+import { sendDataToJupyterNotebook } from '../../lib/jupyter.js'
+import { getNotebook } from './notebooks/subsetter-notebook.js'
 
 /**
  * @summary Easily allow users to select, subset, and download NASA Earth science data collections with spatial, temporal, and variable filters.
@@ -50,6 +54,7 @@ export default class TerraDataSubsetter extends TerraElement {
         'terra-icon': TerraIcon,
         'terra-spatial-picker': TerraSpatialPicker,
         'terra-login': TerraLogin,
+        'terra-loader': TerraLoader,
     }
 
     @property({ reflect: true, attribute: 'collection-entry-id' })
@@ -58,6 +63,9 @@ export default class TerraDataSubsetter extends TerraElement {
     @property({ reflect: true, type: Boolean, attribute: 'show-collection-search' })
     showCollectionSearch?: boolean = true
 
+    @property({ reflect: true, type: Boolean, attribute: 'show-history-panel' })
+    showHistoryPanel?: boolean = false
+
     @property({ reflect: true, attribute: 'job-id' })
     jobId?: string
 
@@ -149,6 +157,10 @@ export default class TerraDataSubsetter extends TerraElement {
         if (this.closest('terra-dialog')) {
             this.renderedInDialog = true
         }
+
+        if (this.showHistoryPanel) {
+            this.renderHistoryPanel()
+        }
     }
 
     disconnectedCallback() {
@@ -256,6 +268,10 @@ export default class TerraDataSubsetter extends TerraElement {
             spatialExtent &&
             spatialExtent.HorizontalSpatialDomain?.Geometry?.BoundingRectangles
 
+        if (this.#controller.fetchCollectionTask.status === TaskStatus.PENDING) {
+            return html`<terra-loader indeterminate></terra-loader>`
+        }
+
         return html`
             ${hasSubsetOption && estimates
                 ? this.#renderSizeInfo(estimates)
@@ -1648,50 +1664,15 @@ export default class TerraDataSubsetter extends TerraElement {
     }
 
     #handleJupyterNotebookClick() {
-        const jupyterLiteUrl = 'https://gesdisc.github.io/jupyterlite/lab/index.html'
-        const jupyterWindow = window.open(jupyterLiteUrl, '_blank')
+        const notebook = getNotebook(this)
 
-        if (!jupyterWindow) {
-            console.error('Failed to open JupyterLite!')
-            return
-        }
+        console.log('sending data to JupyterLite')
 
-        // 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 = [
-                {
-                    id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
-                    cell_type: 'code',
-                    source: '%pip install -q "terra_ui_components==0.0.70" "anywidget==0.9.15"',
-                    metadata: {
-                        trusted: true,
-                    },
-                    outputs: [],
-                    execution_count: null,
-                },
-                {
-                    id: '870c1384-e706-48ee-ba07-fd552a949869',
-                    cell_type: 'code',
-                    source: `from terra_ui_components import TerraDataSubsetter\nsubsetter = TerraDataSubsetter()\n\nsubsetter.jobId = '${this.#controller.currentJob?.jobID}'\n\nsubsetter`,
-                    metadata: {
-                        trusted: true,
-                    },
-                    outputs: [],
-                    execution_count: null,
-                },
-            ]
-
-            console.log('posting to JupyterLite ', notebook)
-
-            jupyterWindow.postMessage(
-                {
-                    type: 'load-notebook',
-                    filename: `subset_${this.#controller.currentJob?.jobID}.ipynb`,
-                    notebook,
-                },
-                '*'
-            )
-        }, 500)
+        sendDataToJupyterNotebook('load-notebook', {
+            filename: `subset_${this.#controller.currentJob?.jobID}.ipynb`,
+            notebook,
+            token: this.bearerToken,
+        })
     }
 
     renderHistoryPanel() {
@@ -1709,6 +1690,10 @@ export default class TerraDataSubsetter extends TerraElement {
                 historyPanel.setAttribute('bearer-token', this.bearerToken)
             }
 
+            if (this.environment) {
+                historyPanel.setAttribute('environment', this.environment)
+            }
+
             document.body.appendChild(historyPanel)
         }
     }

{terra_ui_components-0.0.87 → terra_ui_components-0.0.96}/src/components/data-subsetter/data-subsetter.controller.ts

@@ -20,7 +20,7 @@ const JOB_STATUS_POLL_MILLIS = 3000
 
 export class DataSubsetterController {
     jobStatusTask: Task<[], SubsetJobStatus | undefined>
-    fetchCollectionTask: Task<[string, string | undefined], any | undefined>
+    fetchCollectionTask: Task<[string], any | undefined>
     searchCmrTask: Task<[string | undefined, string], any | undefined>
     currentJob: SubsetJobStatus | null
 
@@ -35,16 +35,11 @@ export class DataSubsetterController {
 
         this.fetchCollectionTask = new Task(host, {
             task: async ([collectionEntryId], { signal }) => {
-                if (!this.#host.bearerToken) {
-                    return undefined
-                }
-
                 this.#host.collectionWithServices = collectionEntryId
                     ? await this.#dataService.getCollectionWithAvailableServices(
                           collectionEntryId,
                           {
                               signal,
-                              bearerToken: this.#host.bearerToken,
                               environment: this.#host.environment,
                           }
                       )
@@ -52,10 +47,7 @@ export class DataSubsetterController {
 
                 return this.#host.collectionWithServices
             },
-            args: (): [string | undefined, string | undefined] => [
-                this.#host.collectionEntryId,
-                this.#host.bearerToken,
-            ],
+            args: (): [string | undefined] => [this.#host.collectionEntryId],
         })
 
         this.searchCmrTask = new Task(host, {
@@ -98,9 +90,6 @@ export class DataSubsetterController {
             task: async ([], { signal }) => {
                 let job
 
-                // TODO: can this go elsewhere? Feels like an odd place
-                this.#host.renderHistoryPanel()
-
                 if (this.currentJob?.jobID) {
                     // we already have a job, get it's status
                     job = await this.#dataService.getSubsetJobStatus(

terra_ui_components-0.0.96/src/components/data-subsetter/notebooks/subsetter-notebook.ts

@@ -0,0 +1,58 @@
+import type TerraDataSubsetter from '../data-subsetter.component.js'
+
+export function getNotebook(host: TerraDataSubsetter) {
+    /**
+     * these cells were originally created in a Jupyter Notebook and then imported here.
+     * Note that one of the code cells takes in dynamic data
+     */
+    return [
+        {
+            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',
+            source: '%pip install -q "terra_ui_components==0.0.96" "anywidget==0.9.15"',
+            metadata: {
+                trusted: true,
+            },
+            outputs: [],
+            execution_count: null,
+        },
+        {
+            cell_type: 'markdown',
+            id: '35aa4a00-8e2c-4478-9df7-de633fd8f6ce',
+            metadata: {},
+            source: [`### Render the subsetter`],
+        },
+        {
+            id: '870c1384-e706-48ee-ba07-fd552a949869',
+            cell_type: 'code',
+            source: `from terra_ui_components import TerraDataSubsetter\nsubsetter = TerraDataSubsetter()\n\nsubsetter.collectionEntryId = '${host.collectionEntryId}'\nsubsetter.jobId = '${host.jobId}'\n\nsubsetter`,
+            metadata: {
+                trusted: true,
+            },
+            outputs: [],
+            execution_count: null,
+        },
+        {
+            cell_type: 'markdown',
+            id: '25b87ed4-2ad9-4c7d-b851-bc8fea3ded5a',
+            metadata: {},
+            source: [
+                '### Download the files\n',
+                '\n',
+                'Once the subset job completes, you can download the files:',
+            ],
+        },
+    ]
+}

{terra_ui_components-0.0.87 → terra_ui_components-0.0.96}/src/components/dialog/dialog.component.ts

@@ -5,6 +5,7 @@ import { html } from 'lit'
 import { property, query } from 'lit/decorators.js'
 import type { CSSResultGroup } from 'lit'
 
+// TODO: review commit 8e9cdd43 and move back to modal. We'll need to review anything with a popover (datepicker, spatial picker, etc.) to ensure it works with the new dialog.
 /**
  * @summary Used to create both modal and non-modal dialog boxes.
  * @documentation https://disc.gsfc.nasa.gov/components/dialog
@@ -30,6 +31,10 @@ export default class TerraDialog extends TerraElement {
     @property({ reflect: true })
     width: string = 'fit-content'
 
+    /** used to set the dialog's open state */
+    @property({ type: Boolean, reflect: true })
+    open: boolean = false
+
     /** allow closing the dialog when clicking outside of it */
     @property({ attribute: 'click-outside-to-close', type: Boolean, reflect: true })
     clickOutsideToClose: boolean = true
@@ -39,16 +44,16 @@ export default class TerraDialog extends TerraElement {
     showBackdrop: boolean = true
 
     toggle() {
-        this.dialogEl.open ? this.hide('toggle') : this.show()
+        this.open ? this.hide() : this.show()
     }
 
     show() {
-        this.dialogEl.showModal()
+        this.open = true
         this.emit('terra-dialog-show')
     }
 
-    hide(reason?: string) {
-        this.dialogEl.close(reason)
+    hide() {
+        this.open = false
         this.emit('terra-dialog-hide')
     }
 
@@ -56,18 +61,28 @@ export default class TerraDialog extends TerraElement {
         if (this.clickOutsideToClose) {
             const target = event.target as HTMLElement
 
-            if (target.nodeName === 'DIALOG') {
-                this.hide('backdrop')
+            if (target.classList.contains('dialog-backdrop')) {
+                this.hide()
             }
         }
     }
 
     render() {
         return html`
+            <div
+                class="dialog-backdrop ${this.showBackdrop ? 'visible' : ''} ${this
+                    .open
+                    ? 'active'
+                    : ''} ${this.clickOutsideToClose ? 'clickable' : ''}"
+                part="backdrop"
+                @click=${this.#handleBackdropClick}
+            ></div>
+
             <dialog
                 @click=${this.#handleBackdropClick}
                 aria-modal="true"
                 id=${this.id}
+                ?open=${this.open}
                 part="dialog"
                 role="dialog"
                 style="width: ${this.width}"

{terra_ui_components-0.0.87 → terra_ui_components-0.0.96}/src/components/dialog/dialog.styles.ts

@@ -8,10 +8,36 @@ export default css`
         display: block;
     }
 
-    ::backdrop {
+    .dialog-backdrop {
+        pointer-events: none;
+        position: fixed;
+        top: 0;
+        left: -9999;
+        right: auto;
+        bottom: auto;
+        width: 0;
+        height: 0;
+        z-index: calc(var(--terra-dialog-z-index) - 1);
+        /* TODO: fade in the backdrop */
+    }
+
+    .dialog-backdrop.visible {
         background-color: var(--terra-dialog-backdrop-color);
     }
 
+    .dialog-backdrop.clickable {
+        pointer-events: auto;
+    }
+
+    .dialog-backdrop.active {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: auto;
+        height: auto;
+    }
+
     dialog[open] {
         display: flex;
         align-items: center;

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

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

{terra_ui_components-0.0.87 → terra_ui_components-0.0.96}/src/data-services/harmony-data-service.ts

@@ -39,7 +39,8 @@ export class HarmonyDataService implements DataServiceInterface {
 
         console.log(
             'Getting collection with available services for ',
-            collectionEntryId
+            collectionEntryId,
+            options
         )
 
         const response = await client.query<{
@@ -51,9 +52,6 @@ export class HarmonyDataService implements DataServiceInterface {
             },
             context: {
                 headers: {
-                    ...(options?.bearerToken && {
-                        authorization: options.bearerToken,
-                    }),
                     'x-environment': options?.environment ?? 'prod',
                 },
                 fetchOptions: {

terra_ui_components-0.0.96/src/lib/jupyter.ts

@@ -0,0 +1,30 @@
+const JUPYTER_LITE_URL = 'https://gesdisc.github.io/jupyterlite/lab/index.html'
+
+function openJupyterLiteWindow(
+    readyCb: (event: MessageEvent, window: Window) => void
+) {
+    const jupyterWindow = window.open(JUPYTER_LITE_URL, '_blank')
+
+    if (!jupyterWindow) {
+        console.error('Failed to open JupyterLite!')
+        return
+    }
+
+    window.addEventListener('message', event => readyCb(event, jupyterWindow), {
+        once: true,
+    })
+
+    return jupyterWindow
+}
+
+export function sendDataToJupyterNotebook<D>(type: string, data: D) {
+    openJupyterLiteWindow((event, jupyterWindow) => {
+        if (event.data?.type !== 'jupyterlite-ready') {
+            return
+        }
+
+        console.log('JupyterLite is ready!')
+
+        jupyterWindow.postMessage({ type, ...data }, '*')
+    })
+}

{terra_ui_components-0.0.87 → terra_ui_components-0.0.96}/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.87/cdn/themes/horizon.css'
+        terraStyles.href = 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.96/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.87/cdn/terra-ui-components-autoloader.js"
+        terraAutoloader.src = "https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.96/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.87 → terra_ui_components-0.0.96}/src/utilities/environment.ts

@@ -18,7 +18,6 @@ export function getEnvironment(): Environment {
     const url = window.location.href
     const isUatUrl =
         url.includes('https://uat.') || // e.g. https://uat.urs.earthdata.nasa.gov/
-        url.includes('https://migrate.') || // e.g. https://migrate.earthdata.nasa.gov/
         url.includes('.uat.') || // e.g. https://cmr.uat.earthdata.nasa.gov/
         url.includes('-test.') // e.g. https://uui-test.gesdisc.eosdis.nasa.gov/