terra_ui_components 0.0.102__tar.gz → 0.0.103__tar.gz

{terra_ui_components-0.0.102 → terra_ui_components-0.0.103}/PKG-INFO

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

{terra_ui_components-0.0.102 → terra_ui_components-0.0.103}/package-lock.json

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

{terra_ui_components-0.0.102 → terra_ui_components-0.0.103}/package.json

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

{terra_ui_components-0.0.102 → terra_ui_components-0.0.103}/pyproject.toml

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

{terra_ui_components-0.0.102 → terra_ui_components-0.0.103}/src/components/browse-variables/browse-variables.component.ts

@@ -447,7 +447,7 @@ export default class TerraBrowseVariables extends TerraElement {
                                             />
                                             <strong
                                                 >${variable.dataFieldLongName}</strong
-                                            ><br />
+                                            >
                                             <span
                                                 >${metadata} •
                                                 [${variable.dataProductShortName}_${variable.dataProductVersion}]</span
@@ -460,21 +460,19 @@ export default class TerraBrowseVariables extends TerraElement {
                                                 ${variable.dataFieldLongName}
                                             </h4>
                                             <p>
-                                                <strong>Spatial Resolution</strong
-                                                ><br />
+                                                <strong>Spatial Resolution</strong>
                                                 ${variable.dataProductSpatialResolution}
                                             </p>
                                             <p>
-                                                <strong>Temporal Coverage</strong
-                                                ><br />
+                                                <strong>Temporal Coverage</strong>
                                                 ${variable.dataProductBeginDateTime}&puncsp;&ndash;&puncsp;${variable.dataProductEndDateTime}
                                             </p>
                                             <p>
-                                                <strong>Region Coverage</strong><br />
+                                                <strong>Region Coverage</strong>
                                                 ${variable.dataProductWest},${variable.dataProductSouth},${variable.dataProductEast},${variable.dataProductNorth}
                                             </p>
                                             <p>
-                                                <strong>Dataset</strong><br />
+                                                <strong>Dataset</strong>
                                                 ${variable.dataProductShortName}_${variable.dataProductVersion}
                                             </p>
                                         </sl-drawer>

{terra_ui_components-0.0.102 → terra_ui_components-0.0.103}/src/components/browse-variables/browse-variables.styles.ts

@@ -2,14 +2,7 @@ import { css } from 'lit'
 
 export default css`
     :host {
-        --light-blue-color: color-mix(
-            in hsl,
-            var(--terra-color-nasa-blue-tint) 65%,
-            white
-        ); /* this color doesn't exist in HDS, perhaps the design should change? */
-
-        background-color: var(--terra-color-nasa-blue-dark);
-        color: white;
+        background-color: var(--terra-color-carbon-5);
         display: block;
         padding-bottom: 55% !important;
         position: relative;
@@ -17,7 +10,7 @@ export default css`
     }
 
     h3 {
-        color: var(--light-blue-color);
+        color: var(--terra-color-nasa-blue-shade);
         margin-bottom: 1rem;
     }
 
@@ -49,7 +42,7 @@ export default css`
     }
 
     header.search {
-        border-bottom: 1px solid var(--terra-color-nasa-blue-shade);
+        border-bottom: 1px solid var(--terra-color-carbon-30);
         grid-column: span 2;
         padding: 15px;
         padding-bottom: 25px;
@@ -104,17 +97,44 @@ export default css`
     }
 
     .browse-by-category terra-button::part(base) {
-        color: white;
     }
 
     label {
-        color: white;
         display: flex;
-        align-items: center;
+        line-height: var(--terra-line-height-normal);
     }
 
     input[type='radio'] {
+        appearance: none; /* removes OS default styling */
+        -webkit-appearance: none; /* for Safari */
+        -moz-appearance: none; /* for Firefox */
         margin-right: 10px;
+        width: 1em;
+        height: 1em;
+        border: 0.125em solid var(--terra-color-carbon-40);
+        border-radius: 50%;
+        background-color: var(--terra-color-spacesuit-white);
+        cursor: pointer;
+        position: relative; /* for the dot */
+    }
+
+    /* Selected state */
+    input[type='radio']:checked {
+        border-color: var(--terra-color-nasa-blue);
+        background-color: var(--terra-color-spacesuit-white); /* keep white bg */
+    }
+
+    /* Inner dot */
+    input[type='radio']:checked::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0.5em; /* size of the dot */
+        height: 0.5em;
+        background-color: var(--terra-color-nasa-blue);
+        border-radius: 50%; /* makes it circular */
+        transform: translate(-50%, -50%); /* center it */
     }
 
     .variables-container {
@@ -156,6 +176,15 @@ export default css`
         padding: 15px;
     }
 
+    .variables-container aside details {
+        margin-bottom: 0.5rem;
+    }
+
+    summary::marker {
+        color: var(--terra-color-nasa-blue); /* changes the arrow color */
+        cursor: pointer;
+    }
+
     .variables-container main {
         grid-area: main;
         display: grid;
@@ -169,12 +198,66 @@ export default css`
         margin-left: 10px;
     }
 
+    .facet label {
+        align-items: center; /* vertical alignment */
+        line-height: var(--terra-line-height-loose);
+    }
+
+    .facet label input[type='checkbox'] {
+        appearance: none; /* removes OS default styling */
+        -webkit-appearance: none; /* for Safari */
+        -moz-appearance: none; /* for Firefox */
+        width: 1em;
+        height: 1em;
+        border: 0.125em solid var(--terra-color-carbon-40);
+        border-radius: 0.25em;
+        background-color: var(--terra-color-spacesuit-white);
+        cursor: pointer;
+        position: relative;
+    }
+
+    .facet label input[type='checkbox']:checked {
+        background-color: var(--terra-color-nasa-blue);
+        accent-color: var(--terra-color-nasa-blue);
+    }
+
+    /* Draw the checkmark */
+    .facet label input[type='checkbox']:checked::before,
+    .facet label input[type='checkbox']:checked::after {
+        content: '';
+        position: absolute;
+        height: 2px; /* thickness of the line */
+        background-color: white; /* checkmark color */
+        transform-origin: left center;
+    }
+
+    /* First stroke of the checkmark */
+    .facet label input[type='checkbox']:checked::before {
+        width: 0.37em;
+        top: 38%;
+        left: 23%;
+        transform: rotate(45deg);
+    }
+
+    /* Second stroke of the checkmark */
+    .facet label input[type='checkbox']:checked::after {
+        width: 0.58em;
+        top: 60%;
+        left: 45%;
+        transform: rotate(-49deg);
+    }
+
     .variable-list {
         margin: 0;
         padding: 0;
     }
 
     .variable-list-item {
+        border: 0.0625em var(--terra-color-nasa-blue-tint) solid;
+        border-radius: 0.25em;
+        background-color: var(--terra-color-carbon-10);
+        padding: 0.5em 1em;
+        margin-bottom: 8px;
     }
 
     .variable-list-item::marker {
@@ -201,7 +284,8 @@ export default css`
 
     .variable label {
         cursor: pointer;
-        display: block;
+        display: flex;
+        flex-direction: column;
         font-weight: 400;
     }
 
@@ -229,15 +313,19 @@ export default css`
     }
 
     .variable sl-drawer::part(panel) {
-        background-color: var(--terra-color-nasa-blue-shade);
-        border: 0.0625em solid var(--terra-color-carbon-10);
+        background-color: var(--terra-color-blue-light);
+        border: 0.0625em solid var(--terra-color-nasa-blue-shade);
+        border-radius: 0.25em;
+        padding: 0.5em 1em;
+        box-shadow: 0 0.125em 0.25em rgb(0 0 0 / 0.075);
         left: auto;
         right: 0;
         top: 4.25rem;
     }
 
     .variable sl-drawer::part(body) {
-        padding-block-end: 6em;
+        /*padding-block-end: 6em;*/
+        line-height: var(--terra-line-height-dense);
     }
 
     .variable sl-drawer > * {
@@ -247,6 +335,11 @@ export default css`
     .variable sl-drawer h4 {
         font-weight: 400;
     }
+    .variable sl-drawer p {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 1em;
+    }
 
     .variable-details-button {
         position: static;
@@ -254,6 +347,10 @@ export default css`
 
     .variable-details-button::part(base) {
         border-color: transparent;
-        color: var(--spacesuit-white);
+        color: var(--terra-color-nasa-blue);
+    }
+
+    .variable-details-button:hover::part(base) {
+        color: var(--terra-color-spacesuit-white);
     }
 `

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

{terra_ui_components-0.0.102 → terra_ui_components-0.0.103}/src/components/login/login.component.ts

@@ -28,6 +28,22 @@ export default class TerraLogin extends TerraElement {
     @property({ attribute: 'button-label' })
     buttonLabel: string = 'Earthdata Login'
 
+    /**
+     * The message to show when the user is logged in
+     * You can use the following placeholders:
+     * {username} - The username of the user
+     * {first_name} - The first name of the user
+     * {last_name} - The last name of the user
+     */
+    @property({ attribute: 'logged-in-message' })
+    loggedInMessage?: string
+
+    @property({ attribute: 'logged-out-message' })
+    loggedOutMessage?: string
+
+    @property({ attribute: 'loading-message' })
+    loadingMessage?: string
+
     #authController = new AuthController(this)
 
     login() {
@@ -48,19 +64,28 @@ export default class TerraLogin extends TerraElement {
 
             return html`${template
                 ? template.content.cloneNode(true)
-                : html`<slot
-                      name="logged-in"
-                      .user=${this.#authController.state.user}
-                  ></slot>`}`
+                : html`<slot name="logged-in" .user=${this.#authController.state.user}
+                      >${this.#applyUserToMessage(this.loggedInMessage)}</slot
+                  >`}`
         }
 
         if (this.#authController.state.isLoading) {
             // we don't know yet if the user is logged in or out, so show the loading slot
-            return html`<slot name="loading"></slot>`
+            return html`<slot name="loading">${this.loadingMessage}</slot>`
         }
 
         // user is definitely logged out, show the login button
-        return html` <slot name="logged-out"></slot
+        return html` <slot name="logged-out">${this.loggedOutMessage}</slot
             ><terra-button @click=${this.login}> ${this.buttonLabel}</terra-button>`
     }
+
+    #applyUserToMessage(message?: string) {
+        return (message ?? '')
+            .replace('{username}', this.#authController.state.user?.uid ?? '')
+            .replace(
+                '{first_name}',
+                this.#authController.state.user?.first_name ?? ''
+            )
+            .replace('{last_name}', this.#authController.state.user?.last_name ?? '')
+    }
 }

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

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

{terra_ui_components-0.0.102 → terra_ui_components-0.0.103}/src/declaration.d.ts

@@ -5,6 +5,11 @@ declare module '*.css' {
     export default styles
 }
 
+declare module 'colormap' {
+    function colormap(options: any): string[]
+    export = colormap
+}
+
 declare namespace Chai {
     interface Assertion {
         // chai-a11y-axe returns a promise-like object and should be awaited but the types are incorrect

{terra_ui_components-0.0.102 → terra_ui_components-0.0.103}/src/internal/terra-element.ts

@@ -181,7 +181,14 @@ export default class TerraElement extends LitElement {
                 // This really shouldn't happen normally. Most websites/apps will be using the same environment.
                 // The docs site is an exception, as we allow for switching between UAT and PROD.
                 purgeGraphQLCache()
-                authService.logout()
+
+                if (
+                    localStorage.getItem('terra-environment') !==
+                    event.detail.environment
+                ) {
+                    authService.logout()
+                }
+
                 this.environment = event.detail.environment
             }
         )

{terra_ui_components-0.0.102 → terra_ui_components-0.0.103}/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.102/cdn/themes/horizon.css'
+        terraStyles.href = 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.103/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.102/cdn/terra-ui-components-autoloader.js"
+        terraAutoloader.src = "https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.103/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.103/src/terra_ui_components/login/login.py

@@ -0,0 +1,67 @@
+import importlib.metadata
+import traitlets
+from ..base import TerraBaseWidget
+
+try:
+    __version__ = importlib.metadata.version("terra_login")
+except importlib.metadata.PackageNotFoundError:
+    __version__ = "unknown"
+
+
+class TerraLogin(TerraBaseWidget):
+    _esm = TerraBaseWidget.get_autoloader() + """
+    function render({ model, el }) {
+        // create an instance of the component
+        let component = document.createElement('terra-login')
+        
+        /**
+         * Set initial property values
+         * NOTE: In reality, we won't need to have the ability to set EVERY property in a Jupyter Notebook, feel free to remove the ones that don't make sense
+         *
+         * model.get() pulls from the Jupyter notebooks state. We'll use the state to set the initial value for each property
+         */
+        component.buttonLabel = model.get('buttonLabel')
+        component.loggedInMessage = model.get('loggedInMessage')
+        component.loggedOutMessage = model.get('loggedOutMessage')
+        component.loadingMessage = model.get('loadingMessage')
+
+        /**
+         * add the component to the cell
+         * it should now be visible in the notebook!
+         */
+        el.appendChild(component)
+
+
+        /**
+         * Set up property change handlers
+         * This way if someone in the Jupyter Notebook changes the property externally, we reflect the change
+         * back to the component.
+         * 
+         * If this isn't here, the component can't be changed after it's initial render
+         */
+        model.on('change:buttonLabel', () => {
+            component.buttonLabel = model.get('buttonLabel')
+        })
+        model.on('change:loggedInMessage', () => {
+            component.loggedInMessage = model.get('loggedInMessage')
+        })
+        model.on('change:loggedOutMessage', () => {
+            component.loggedOutMessage = model.get('loggedOutMessage')
+        })
+        model.on('change:loadingMessage', () => {
+            component.loadingMessage = model.get('loadingMessage')
+        })
+    }
+
+    export default { render };
+    """
+
+    # Component properties
+    # While we have properties in the component, we also need to tell Python about them as well.
+    # Again, you don't technically need all these. If Jupyter Notebooks don't need access to them, you can remove them from here
+    buttonLabel = traitlets.Unicode('').tag(sync=True)
+    loggedInMessage = traitlets.Unicode(
+        'You are logged in as {username}').tag(sync=True)
+    loggedOutMessage = traitlets.Unicode('').tag(sync=True)
+    loadingMessage = traitlets.Unicode(
+        'Please wait while we check if you are logged in...').tag(sync=True)

{terra_ui_components-0.0.102 → terra_ui_components-0.0.103}/src/themes/horizon.css

@@ -29,7 +29,6 @@
     --terra-color-nasa-red-shade: hsla(357, 99%, 36%, 1);
     --terra-color-nasa-blue-tint: hsla(212, 100%, 58%, 1);
     --terra-color-nasa-blue-shade: hsla(218, 86%, 31%, 1);
-    --terra-color-nasa-blue-dark: hsla(214, 52%, 24.5%, 1);
 
     /* Additional Colors 
      * International Orange and Active Green are colors that are used sparingly and intentionally.
@@ -40,6 +39,8 @@
     --terra-color-active-green: hsla(145, 67%, 57%, 1);
     --terra-color-active-green-tint: hsl(145, 52%, 64%, 1);
     --terra-color-active-green-shade: hsla(144, 75%, 38%, 1);
+    --terra-color-nasa-blue-dark: hsla(214, 52%, 24.5%, 1);
+    --terra-color-blue-light: hsla(218, 62%, 85%, 1);
 
     /* Neutrals
      * Neutrals have varying degrees of value that allow for the appropriate levels of contrast across the system. 

terra_ui_components-0.0.102/src/terra_ui_components/login/login.py

@@ -1,57 +0,0 @@
-import importlib.metadata
-from ..base import TerraBaseWidget
-
-try:
-    __version__ = importlib.metadata.version("terra_login")
-except importlib.metadata.PackageNotFoundError:
-    __version__ = "unknown"
-
-
-class TerraLogin(TerraBaseWidget):
-    _esm = (
-        TerraBaseWidget.get_autoloader()
-        + """
-    function render({ model, el }) {
-        // create an instance of the component
-        let component = document.createElement('terra-login')
-
-        /**
-         * Set initial property values
-         * NOTE: In reality, we won't need to have the ability to set EVERY property in a Jupyter Notebook, feel free to remove the ones that don't make sense
-         *
-         * model.get() pulls from the Jupyter notebooks state. We'll use the state to set the initial value for each property
-         */
-        component.attr = model.get('attr')
-
-        /**
-         * add the component to the cell
-         * it should now be visible in the notebook!
-         */
-        el.appendChild(component)
-
-
-        /**
-         * Set up property change handlers
-         * This way if someone in the Jupyter Notebook changes the property externally, we reflect the change
-         * back to the component.
-         *
-         * If this isn't here, the component can't be changed after it's initial render
-         */
-        model.on('change:attr', () => {
-            component.attr = model.get('attr')
-        })
-
-        /**
-         * Add event listeners.
-         * These are used to communicate back to the Jupyter notebook
-         */
-        component.addEventListener('terra-login', (e) => {
-            // Placeholder for event handling, you'll need to provide your own functionality here
-            model.set('terra-login_triggered', true)
-            model.save_changes()
-        })
-    }
-
-    export default { render };
-    """
-    )