terra_ui_components 0.0.131__tar.gz → 0.0.136__tar.gz

{terra_ui_components-0.0.131 → terra_ui_components-0.0.136}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: terra_ui_components
-Version: 0.0.131
+Version: 0.0.136
 Summary: NASA Terra UI Components Library
 License-File: LICENSE.md
 Requires-Python: >=3.8
@@ -61,6 +61,7 @@ Then run the following:
 -   `uv venv` - create a virtual environment (only have to do this the first time)
 -   `source .venv/bin/activate` - activate it
 -   `uv pip install -e ".[dev]"` - install dependencies (see pyproject.toml)
+-   open base.py and point dependencies to localhost (do not commit these changes) TODO: fix this so we auto-detect local development
 -   `npm run start:python` - spins up Jupyter lab and should open the browser for you
 
 For an example of how to use the components in a Jupyter Notebook, open the `/notebooks/playground.ipynb` notebook in Jupyter Lab.

{terra_ui_components-0.0.131 → terra_ui_components-0.0.136}/README.md

@@ -49,6 +49,7 @@ Then run the following:
 -   `uv venv` - create a virtual environment (only have to do this the first time)
 -   `source .venv/bin/activate` - activate it
 -   `uv pip install -e ".[dev]"` - install dependencies (see pyproject.toml)
+-   open base.py and point dependencies to localhost (do not commit these changes) TODO: fix this so we auto-detect local development
 -   `npm run start:python` - spins up Jupyter lab and should open the browser for you
 
 For an example of how to use the components in a Jupyter Notebook, open the `/notebooks/playground.ipynb` notebook in Jupyter Lab.

terra_ui_components-0.0.136/docs/_utilities/code-previews.cjs

@@ -0,0 +1,297 @@
+let count = 1
+
+function escapeHtml(str) {
+    return String(str)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+}
+
+/**
+ * Converts Jupyter code block content to a JupyterLite URL.
+ * If the content is already a URL (starts with http:// or https://), returns it as-is.
+ * Otherwise, treats it as code and converts it to a JupyterLite URL with code parameters.
+ */
+function buildJupyterUrl(codeContent) {
+    const trimmed = codeContent.trim()
+
+    // If it's already a URL, use it as-is
+    if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
+        return trimmed
+    }
+
+    // Otherwise, treat it as code and build a JupyterLite URL
+    const baseUrl = 'https://gesdisc.github.io/jupyterlite/repl/index.html'
+    const lines = trimmed.split('\n').filter(line => line.trim().length > 0)
+
+    // Build URL parameters
+    const params = new URLSearchParams()
+    params.set('kernel', 'python')
+    params.set('toolbar', '1')
+    params.set('hideCodeInput', '1')
+
+    // Add each line as a separate code parameter
+    lines.forEach(line => {
+        params.append('code', line.trim())
+    })
+
+    return `${baseUrl}?${params.toString()}`
+}
+
+/**
+ * Turns code fields with the :preview suffix into interactive code previews.
+ */
+module.exports = function (doc, options) {
+    options = {
+        within: 'body', // the element containing the code fields to convert
+        ...options,
+    }
+
+    const within = doc.querySelector(options.within)
+    if (!within) {
+        return doc
+    }
+
+    within.querySelectorAll('[class*=":preview"]').forEach(code => {
+        const pre = code.closest('pre')
+        if (!pre) {
+            return
+        }
+        const adjacentPre =
+            pre.nextElementSibling?.tagName.toLowerCase() === 'pre'
+                ? pre.nextElementSibling
+                : null
+        const reactCode = adjacentPre?.querySelector('code[class$="react"]')
+
+        // Check for Jupyter preview
+        // Option 1: Separate code block with "jupyter" class containing the URL
+        // Check in adjacent pre block first, then check further adjacent blocks
+        let jupyterCode = adjacentPre?.querySelector('code[class*="jupyter"]')
+        let jupyterPre = null
+        if (!jupyterCode && adjacentPre) {
+            // Check next adjacent pre block if first one didn't have Jupyter
+            let nextPre = adjacentPre.nextElementSibling
+            while (nextPre && nextPre.tagName.toLowerCase() === 'pre') {
+                jupyterCode = nextPre.querySelector('code[class*="jupyter"]')
+                if (jupyterCode) {
+                    jupyterPre = nextPre
+                    break
+                }
+                nextPre = nextPre.nextElementSibling
+            }
+        } else if (jupyterCode) {
+            jupyterPre = adjacentPre
+        }
+
+        // Option 2: Check if the current code block is a Jupyter-only preview
+        const isJupyterOnly =
+            code.getAttribute('class').includes('jupyter:preview') ||
+            code.getAttribute('class').includes(':preview:jupyter')
+
+        let jupyterUrl = null
+        let jupyterCodeContent = null // Store original code content for display
+        if (isJupyterOnly) {
+            // Jupyter-only preview: convert content to JupyterLite URL
+            jupyterCodeContent = code.textContent.trim()
+            jupyterUrl = buildJupyterUrl(jupyterCodeContent)
+            jupyterCode = code
+        } else if (jupyterCode) {
+            // Separate Jupyter code block: convert content to JupyterLite URL
+            jupyterCodeContent = jupyterCode.textContent.trim()
+            jupyterUrl = buildJupyterUrl(jupyterCodeContent)
+        }
+
+        const sourceGroupId = `code-preview-source-group-${count}`
+        const isExpanded = code.getAttribute('class').includes(':expanded')
+        const noCodePen = code.getAttribute('class').includes(':no-codepen')
+
+        count++
+
+        const htmlButton = `
+      <button type="button"
+        title="Show HTML code"
+        class="code-preview__button code-preview__button--html"
+      >
+        HTML
+      </button>
+    `
+
+        const reactButton = `
+      <button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
+        React
+      </button>
+    `
+
+        const jupyterButton = `
+      <button type="button" title="Show Jupyter Notebook" class="code-preview__button code-preview__button--jupyter">
+        Jupyter
+      </button>
+    `
+
+        const codePenButton = `
+      <button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
+        <svg
+          width="138"
+          height="26"
+          viewBox="0 0 138 26"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z" />
+        </svg>
+      </button>
+    `
+
+        const htmlPreviewContent = !isJupyterOnly ? code.textContent : ''
+        const jupyterPreviewContent = jupyterUrl
+            ? `<div class="code-preview__jupyter-banner">
+                <p>This is an embedded JupyterLite notebook. Please give it a few seconds to render.</p>
+              </div>
+              <iframe src="${escapeHtml(jupyterUrl)}" style="width: 100%; height: 600px; border: none;"></iframe>`
+            : ''
+
+        const codePreview = `
+      <div class="code-preview ${isExpanded ? 'code-preview--expanded' : ''}" ${jupyterUrl ? 'data-has-jupyter="true"' : ''}>
+        <div class="code-preview__preview">
+          ${
+              !isJupyterOnly
+                  ? `<div class="code-preview__preview-content" data-flavor="html">${htmlPreviewContent}</div>`
+                  : ''
+          }
+          ${
+              jupyterUrl
+                  ? `<div class="code-preview__preview-content" data-flavor="jupyter">${jupyterPreviewContent}</div>`
+                  : ''
+          }
+          <div class="code-preview__resizer">
+            <terra-icon name="solid-bars-4" library="heroicons"></terra-icon>
+          </div>
+        </div>
+
+        <div class="code-preview__source-group" id="${sourceGroupId}">
+          ${
+              !isJupyterOnly
+                  ? `
+            <div class="code-preview__source code-preview__source--html" ${
+                reactCode || jupyterUrl ? 'data-flavor="html"' : ''
+            }>
+              <pre><code class="language-html">${escapeHtml(
+                  code.textContent
+              )}</code></pre>
+            </div>
+          `
+                  : ''
+          }
+
+          ${
+              reactCode
+                  ? `
+            <div class="code-preview__source code-preview__source--react" data-flavor="react">
+              <pre><code class="language-jsx">${escapeHtml(
+                  reactCode.textContent
+              )}</code></pre>
+            </div>
+          `
+                  : ''
+          }
+
+          ${
+              jupyterUrl
+                  ? `
+            <div class="code-preview__source code-preview__source--jupyter" data-flavor="jupyter">
+              <pre><code class="language-python">${escapeHtml(jupyterCodeContent || jupyterUrl)}</code></pre>
+            </div>
+          `
+                  : ''
+          }
+        </div>
+
+        <div class="code-preview__buttons">
+          <button
+            type="button"
+            class="code-preview__button code-preview__toggle"
+            aria-expanded="${isExpanded ? 'true' : 'false'}"
+            aria-controls="${sourceGroupId}"
+          >
+            Source
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </button>
+
+          ${!isJupyterOnly && (reactCode || jupyterUrl) ? ` ${htmlButton} ` : ''}
+          ${reactCode ? reactButton : ''}
+          ${jupyterUrl ? jupyterButton : ''}
+
+          ${noCodePen ? '' : codePenButton}
+        </div>
+      </div>
+    `
+
+        pre.insertAdjacentHTML('afterend', codePreview)
+        pre.remove()
+
+        // Remove pre blocks that were used for React or Jupyter
+        // We remove them so the code (URL) is not visible on the page
+        if (adjacentPre) {
+            const wasUsedForReact = reactCode?.closest('pre')?.isSameNode(adjacentPre)
+            const wasUsedForJupyter =
+                jupyterCode &&
+                !isJupyterOnly &&
+                jupyterCode.closest('pre')?.isSameNode(adjacentPre)
+
+            // Remove adjacentPre if it was used (we've already extracted the code)
+            // Exception: if it has React code, we might need to keep it, but actually we've extracted it too
+            if (wasUsedForReact || wasUsedForJupyter) {
+                adjacentPre.remove()
+            }
+        }
+
+        // Remove Jupyter code block if it was in a separate pre block (not Jupyter-only and not in adjacentPre)
+        // This ensures the URL text is not visible on the page
+        if (jupyterCode && !isJupyterOnly && !code.isSameNode(jupyterCode)) {
+            const jupyterCodePre = jupyterCode.closest('pre')
+            const wasInAdjacentPre =
+                adjacentPre && jupyterCodePre?.isSameNode(adjacentPre)
+
+            // Only remove if it's in a different pre block than adjacentPre (which was already removed above)
+            if (!wasInAdjacentPre && jupyterPre) {
+                jupyterPre.remove()
+            } else if (!wasInAdjacentPre) {
+                // Fallback: remove the pre containing jupyterCode if it wasn't already removed
+                const fallbackPre = jupyterCodePre
+                if (
+                    fallbackPre &&
+                    fallbackPre !== adjacentPre &&
+                    fallbackPre.parentNode
+                ) {
+                    fallbackPre.remove()
+                }
+            }
+        }
+    })
+
+    // Wrap code preview scripts in anonymous functions so they don't run in the global scope
+    doc.querySelectorAll('.code-preview__preview script').forEach(script => {
+        if (script.type === 'module') {
+            // Modules are already scoped
+            script.textContent = script.innerHTML
+        } else {
+            // Wrap non-modules in an anonymous function so they don't run in the global scope
+            script.textContent = `(() => { ${script.innerHTML} })();`
+        }
+    })
+
+    return doc
+}

{terra_ui_components-0.0.131 → terra_ui_components-0.0.136}/docs/assets/scripts/code-previews.js

@@ -45,28 +45,43 @@
     }
 
     function setFlavor(newFlavor) {
-        flavor = ['html', 'react'].includes(newFlavor) ? newFlavor : 'html'
+        flavor = ['html', 'react', 'jupyter'].includes(newFlavor) ? newFlavor : 'html'
         sessionStorage.setItem('flavor', flavor)
 
         // Set the flavor class on the body
         document.documentElement.classList.toggle('flavor-html', flavor === 'html')
         document.documentElement.classList.toggle('flavor-react', flavor === 'react')
+        document.documentElement.classList.toggle(
+            'flavor-jupyter',
+            flavor === 'jupyter'
+        )
     }
 
     function syncFlavor() {
         setFlavor(getFlavor())
 
         document.querySelectorAll('.code-preview__button--html').forEach(preview => {
-            if (flavor === 'html') {
-                preview.classList.add('code-preview__button--selected')
-            }
+            preview.classList.toggle(
+                'code-preview__button--selected',
+                flavor === 'html'
+            )
         })
 
         document.querySelectorAll('.code-preview__button--react').forEach(preview => {
-            if (flavor === 'react') {
-                preview.classList.add('code-preview__button--selected')
-            }
+            preview.classList.toggle(
+                'code-preview__button--selected',
+                flavor === 'react'
+            )
         })
+
+        document
+            .querySelectorAll('.code-preview__button--jupyter')
+            .forEach(preview => {
+                preview.classList.toggle(
+                    'code-preview__button--selected',
+                    flavor === 'jupyter'
+                )
+            })
     }
 
     const componentsVersion = document.documentElement.getAttribute(
@@ -147,6 +162,9 @@
             // Show React
             setFlavor('react')
             toggleSource(codeBlock, true)
+        } else if (button?.classList.contains('code-preview__button--jupyter')) {
+            setFlavor('jupyter')
+            //toggleSource(codeBlock, true)
         } else if (button?.classList.contains('code-preview__toggle')) {
             // Toggle source
             toggleSource(codeBlock)
@@ -164,6 +182,10 @@
                 'code-preview__button--selected',
                 flavor === 'react'
             )
+            cb.querySelector('.code-preview__button--jupyter')?.classList.toggle(
+                'code-preview__button--selected',
+                flavor === 'jupyter'
+            )
         })
     })
 

{terra_ui_components-0.0.131 → terra_ui_components-0.0.136}/docs/assets/styles/code-previews.css

@@ -101,7 +101,8 @@
 }
 
 .code-preview__button--html,
-.code-preview__button--react {
+.code-preview__button--react,
+.code-preview__button--jupyter {
     width: 70px;
     display: flex;
     place-items: center;
@@ -163,7 +164,7 @@
     transform: rotate(180deg);
 }
 
-/* We can apply data-flavor="html|react" to any element on the page to toggle it when the flavor changes */
+/* We can apply data-flavor="html|react|jupyter" to any element on the page to toggle it when the flavor changes */
 .flavor-html [data-flavor]:not([data-flavor='html']) {
     display: none;
 }
@@ -171,3 +172,42 @@
 .flavor-react [data-flavor]:not([data-flavor='react']) {
     display: none;
 }
+
+.flavor-jupyter [data-flavor]:not([data-flavor='jupyter']) {
+    display: none;
+}
+
+/* Preview content switching */
+.code-preview__preview-content {
+    width: 100%;
+}
+
+.code-preview__preview-content:not([data-flavor='html']):not(
+        [data-flavor='jupyter']
+    ) {
+    display: none;
+}
+
+/* Jupyter banner styling */
+.code-preview__jupyter-banner {
+    background-color: var(--terra-color-primary-50);
+    border: 1px solid var(--terra-color-primary-200);
+    border-radius: 3px;
+    padding: 0.75rem 1rem;
+    margin-bottom: 1rem;
+}
+
+.code-preview__jupyter-banner p {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--terra-color-primary-700);
+    line-height: 1.5;
+}
+
+/* Jupyter iframe styling - only in preview area */
+.code-preview__preview-content[data-flavor='jupyter'] iframe {
+    width: 100%;
+    height: 600px;
+    border: none;
+    display: block;
+}

terra_ui_components-0.0.136/docs/pages/components/earthdata-login.md

@@ -0,0 +1,18 @@
+---
+meta:
+    title: Earthdata Login
+    description:
+layout: component
+---
+
+```html:preview
+<terra-earthdata-login></terra-earthdata-login>
+```
+
+```jupyter
+%pip install -q "terra_ui_components" "anywidget"
+from terra_ui_components import TerraEarthdataLogin
+TerraEarthdataLogin()
+```
+
+[component-metadata:terra-earthdata-login]

{terra_ui_components-0.0.131 → terra_ui_components-0.0.136}/docs/pages/components/login.md

@@ -3,6 +3,7 @@ meta:
     title: Login
     description:
 layout: component
+sidebarSection: Hidden
 ---
 
 ```html:preview
@@ -12,4 +13,11 @@ layout: component
 </terra-login>
 ```
 
+```jupyter
+%pip install -q "terra_ui_components" "anywidget"
+from terra_ui_components import TerraLogin
+login = TerraLogin()
+login
+```
+
 [component-metadata:terra-login]

{terra_ui_components-0.0.131 → terra_ui_components-0.0.136}/docs/pages/components/time-average-map.md

@@ -39,5 +39,9 @@ layout: component
     document.querySelector('terra-time-average-map').addEventListener('terra-time-average-map-data-change', (e) => {
         console.log('caught! ', e)
     })
+
+    document.querySelector('terra-time-average-map').addEventListener('terra-plot-options-change', (e) => {
+        console.log('caught! ', e)
+    })
 </script>
 ```

{terra_ui_components-0.0.131 → terra_ui_components-0.0.136}/package-lock.json

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

{terra_ui_components-0.0.131 → terra_ui_components-0.0.136}/package.json

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

{terra_ui_components-0.0.131 → terra_ui_components-0.0.136}/packages/create-terra-ui-app/boilerplates/nextjs/framework.js

@@ -67,7 +67,7 @@ export async function create(nextTask, outputDir, boilerplatesDir, appName) {
             "import { setBasePath } from '@nasa-terra/components/dist/utilities/base-path.js'"
 
         // Create the setBasePath call with comments (with newline before it)
-        const setBasePathCall = `\n/**\n * Sets the base path to the Terra UI CDN\n *\n * If you'd rather host the assets locally, you should setup a build task to copy the assets locally and\n * set the base path to your local public folder\n * (see https://terra-ui.netlify.app/frameworks/react/#installation for more information)\n */\nsetBasePath('https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.131/cdn/')`
+        const setBasePathCall = `\n/**\n * Sets the base path to the Terra UI CDN\n *\n * If you'd rather host the assets locally, you should setup a build task to copy the assets locally and\n * set the base path to your local public folder\n * (see https://terra-ui.netlify.app/frameworks/react/#installation for more information)\n */\nsetBasePath('https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.136/cdn/')`
 
         // Reconstruct the file: CSS import at top, then existing content with setBasePath import and call inserted
         const newLines = [...lines]

{terra_ui_components-0.0.131 → terra_ui_components-0.0.136}/pyproject.toml

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

{terra_ui_components-0.0.131 → terra_ui_components-0.0.136}/src/auth/auth.controller.ts

@@ -1,10 +1,11 @@
 import { Task } from '@lit/task'
 import type { StatusRenderer } from '@lit/task'
 import type { ReactiveControllerHost } from 'lit'
-import { authService, type AuthState } from './auth.service.js'
+import { authService, type AuthState, type User } from './auth.service.js'
 
 export class AuthController<C> {
     task: Task<[], AuthState>
+    loginTask: Task<[string, string], User | null>
     private unsubscribe?: () => void
 
     #host: ReactiveControllerHost & C
@@ -44,6 +45,14 @@ export class AuthController<C> {
             args: (): any => [],
             autoRun: true,
         })
+
+        this.loginTask = new Task(this.#host, {
+            task: async ([username, password]) => {
+                return await this.#loginWithCredentials(username, password)
+            },
+            args: (): any => [],
+            autoRun: false,
+        })
     }
 
     get state() {
@@ -68,4 +77,8 @@ export class AuthController<C> {
             this.unsubscribe()
         }
     }
+
+    #loginWithCredentials(username: string, password: string) {
+        return authService.loginWithCredentials(username, password)
+    }
 }

{terra_ui_components-0.0.131 → terra_ui_components-0.0.136}/src/auth/auth.service.ts

@@ -141,7 +141,15 @@ class AuthService {
         try {
             // if the environment is UAT, we need to add the environment to the URL
             const environment = getEnvironment()
-            const url = `${AUTH_URL}/user${environment === Environment.UAT ? '?environment=uat' : ''}`
+            const params = new URLSearchParams()
+
+            params.set('client_id', 'terra-earthdata-oauth-client')
+
+            if (environment === Environment.UAT) {
+                params.set('environment', 'uat')
+            }
+
+            const url = `${AUTH_URL}/user?${params.toString()}`
 
             // get user info from the auth service
             const response = await fetch(url, {
@@ -196,6 +204,53 @@ class AuthService {
         window.location.href = `${AUTH_URL}/login?redirect_uri=${window.location.href}${getEnvironment() === Environment.UAT ? '&environment=uat' : ''}`
     }
 
+    async loginWithCredentials(username: string, password: string) {
+        const url = `${AUTH_URL}/login`
+
+        // Clear any previous errors before attempting login
+        this.setState({ error: null, isLoading: true })
+
+        const response = await fetch(url, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                Authorization: `Basic ${btoa(`${username}:${password}`)}`,
+            },
+        })
+
+        if (!response.ok) {
+            // Try to parse error response
+            let errorMessage = response.statusText ?? 'Failed to login'
+
+            try {
+                const errorData = await response.json()
+                // Prefer error_description if available, otherwise use error field
+                errorMessage =
+                    errorData.error_description || errorData.error || errorMessage
+            } catch {
+                // If JSON parsing fails, use the status text
+            }
+
+            // Set error in auth state
+            this.setState({
+                error: errorMessage,
+                isLoading: false,
+            })
+
+            throw new Error(errorMessage)
+        }
+
+        const data = await response.json()
+
+        this.setState({
+            ...this.authState,
+            token: data.access_token,
+            error: null,
+        })
+
+        return this.authenticate()
+    }
+
     logout(): void {
         localStorage.removeItem(TOKEN_KEY)
         this.setState({