terra_ui_components 0.0.66__tar.gz → 0.0.68__tar.gz

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/PKG-INFO

@@ -1,10 +1,10 @@
 Metadata-Version: 2.4
 Name: terra_ui_components
-Version: 0.0.66
+Version: 0.0.68
 Summary: NASA Terra UI Components Library
 License-File: LICENSE.md
 Requires-Python: >=3.8
-Requires-Dist: anywidget
+Requires-Dist: anywidget>=0.9
 Provides-Extra: dev
 Requires-Dist: jupyterlab; extra == 'dev'
 Requires-Dist: watchfiles; extra == 'dev'

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/package-lock.json

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

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/package.json

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

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/pyproject.toml

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

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/scripts/build.js

@@ -112,6 +112,8 @@ async function buildTheSource() {
             ...(await globby('./src/utilities/**/!(*.(style|test)).ts')),
             // Theme stylesheets
             ...(await globby('./src/themes/**/!(*.test).ts')),
+            // React wrappers
+            ...(await globby('./src/react/**/*.ts')),
         ],
         outdir: cdndir,
         chunkNames: 'chunks/[name].[hash]',
@@ -128,10 +130,6 @@ async function buildTheSource() {
         //
         external: alwaysExternal,
         splitting: true,
-        loader: {
-            // Tell esbuild how to handle image files
-            '.tif': 'file', // Treat .tif files as static assets (copy to output directory)
-        },
         plugins: [
             polyfillNode(),
             replace({

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/src/components/browse-variables/browse-variables.component.ts

@@ -401,6 +401,15 @@ export default class TerraBrowseVariables extends TerraElement {
                 <section class="group">
                     <ul class="variable-list">
                         ${this.#controller.variables.map(variable => {
+                            const metadata = [
+                                variable.dataProductInstrumentShortName,
+                                variable.dataProductTimeInterval,
+                                variable.dataFieldUnits,
+                                `[${variable.dataProductShortName}_${variable.dataProductVersion}]`,
+                            ]
+                                .filter(Boolean)
+                                .join(' • ')
+
                             return html`
                                 <li
                                     aria-selected="false"
@@ -440,13 +449,7 @@ export default class TerraBrowseVariables extends TerraElement {
                                             <strong
                                                 >${variable.dataFieldLongName}</strong
                                             ><br />
-                                            <span
-                                                >${variable.dataProductShortName}
-                                                &bull;
-                                                ${variable.dataProductTimeInterval}
-                                                &bull;
-                                                ${variable.dataProductSpatialResolution}</span
-                                            >
+                                            <span>${metadata}</span>
                                         </label>
 
                                         <sl-drawer contained>

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/src/components/browse-variables/browse-variables.types.ts

@@ -65,6 +65,7 @@ export type Variable = {
     dataProductDescriptionUrl: string
     // variable landing page
     dataFieldDescriptionUrl: string
+    dataProductInstrumentShortName: string
 } & Partial<ExampleInitialDates>
 
 export type ExampleInitialDates = {

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/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], any | undefined>
+    fetchCollectionTask: Task<[string, string | undefined], any | undefined>
     searchCmrTask: Task<[string | undefined, string], any | undefined>
     currentJob: SubsetJobStatus | null
 
@@ -35,6 +35,10 @@ 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,
@@ -48,7 +52,10 @@ export class DataSubsetterController {
 
                 return this.#host.collectionWithServices
             },
-            args: (): [string | undefined] => [this.#host.collectionEntryId],
+            args: (): [string | undefined, string | undefined] => [
+                this.#host.collectionEntryId,
+                this.#host.bearerToken,
+            ],
         })
 
         this.searchCmrTask = new Task(host, {

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/src/components/plot-toolbar/plot-toolbar.component.ts

@@ -67,15 +67,28 @@ export default class TerraPlotToolbar extends TerraElement {
     }
 
     render() {
+        const metadata = [
+            this.catalogVariable.dataProductInstrumentShortName,
+            this.catalogVariable.dataProductTimeInterval,
+            `[${this.catalogVariable.dataProductShortName}_${this.catalogVariable.dataProductVersion}]`,
+        ]
+            .filter(Boolean)
+            .filter(value => value.toLowerCase() !== 'not applicable')
+
         return cache(
             !this.catalogVariable
                 ? html`<div class="spacer"></div>`
                 : html` <header>
-                      <slot name="title">
-                          <h2 class="title">
-                              ${this.catalogVariable.dataFieldLongName}
-                          </h2>
-                      </slot>
+                      <div class="title-container">
+                          <slot name="title">
+                              <h2 class="title">
+                                  ${this.catalogVariable.dataFieldLongName}
+                              </h2>
+                          </slot>
+                          <slot name="subtitle">
+                              <h3 class="subtitle">${metadata.join(' • ')}</h3>
+                          </slot>
+                      </div>
 
                       <div class="toggles">
                           <terra-button

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/src/components/plot-toolbar/plot-toolbar.styles.ts

@@ -19,6 +19,13 @@ export default css`
         font-size: 1.25rem;
     }
 
+    .subtitle {
+        font-weight: var(--terra-font-weight-normal);
+        margin: 0;
+        margin-bottom: 0.5em;
+        font-size: 0.875rem;
+    }
+
     .toggles {
         display: flex;
         justify-content: space-between;

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/src/components/time-average-map/time-average-map.component.ts

@@ -1,6 +1,6 @@
 import { html } from 'lit'
 import { property, query, state } from 'lit/decorators.js'
-import { Map, View } from 'ol'
+import { Map, MapBrowserEvent, View } from 'ol'
 import WebGLTileLayer from 'ol/layer/WebGLTile.js'
 import OSM from 'ol/source/OSM.js'
 import GeoTIFF from 'ol/source/GeoTIFF.js'
@@ -18,6 +18,9 @@ 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'
 
 export default class TerraTimeAverageMap extends TerraElement {
     static styles: CSSResultGroup = [componentStyles, styles]
@@ -60,6 +63,53 @@ export default class TerraTimeAverageMap extends TerraElement {
     @state()
     activeMenuItem: any = null
 
+    @state() colormaps = [
+        'jet',
+        'hsv',
+        'hot',
+        'cool',
+        'spring',
+        'summer',
+        'autumn',
+        'winter',
+        'bone',
+        'copper',
+        'greys',
+        'YIGnBu',
+        'greens',
+        'YIOrRd',
+        'bluered',
+        'RdBu',
+        'picnic',
+        'rainbow',
+        'portland',
+        'blackbody',
+        'earth',
+        'electric',
+        'viridis',
+        'inferno',
+        'magma',
+        'plasma',
+        'warm',
+        'cool',
+        'bathymetry',
+        'cdom',
+        'chlorophyll',
+        'density',
+        'fressurface-blue',
+        'freesurface-red',
+        'oxygen',
+        'par',
+        'phase',
+        'salinity',
+        'temperature',
+        'turbidity',
+        'velocity-blue',
+        'velocity-green',
+        'cubhelix',
+    ]
+    @state() colorMapName = 'density'
+
     @watch('activeMenuItem')
     handleFocus(_oldValue: any, newValue: any) {
         if (newValue === null) {
@@ -160,6 +210,72 @@ export default class TerraTimeAverageMap extends TerraElement {
 
         const metadata = await this.fetchGeotiffMetadata(gtSource)
         this.long_name = metadata['long_name'] ?? ''
+
+        if (this.#map && this.#gtLayer) {
+            this.renderPixelValues(this.#map, this.#gtLayer)
+            this.applyColorToLayer(gtSource, 'density')
+            const opacityInput = this.shadowRoot?.getElementById(
+                'opacity-input'
+            ) as HTMLInputElement | null
+            const opacityOutput = this.shadowRoot?.getElementById(
+                'opacity-output'
+            ) as HTMLElement | null
+
+            if (opacityInput && opacityOutput) {
+                const updateOpacity = () => {
+                    const opacity = parseFloat(opacityInput.value)
+                    if (this.#gtLayer) {
+                        this.#gtLayer.setOpacity(opacity)
+                    }
+                    opacityOutput.innerText = opacity.toFixed(2)
+                }
+
+                opacityInput.addEventListener('input', updateOpacity)
+
+                // Initialize output display with default slider value
+                updateOpacity()
+            }
+        }
+    }
+
+    renderPixelValues(map: Map, gtLayer: WebGLTileLayer) {
+        const pixelValueEl = this.shadowRoot?.getElementById('pixelValue')
+        const coordEl = this.shadowRoot?.getElementById('cursorCoordinates')
+
+        map.on('pointermove', (event: MapBrowserEvent) => {
+            const data = gtLayer.getData(event.pixel)
+            const coordinate = toLonLat(event.coordinate)
+            //TODO: Address type script error
+            // @ts-ignore
+            // Set pixel/coordinate display to N/A if the pixel values are zero or NaN
+            if (!data || isNaN(data[0]) || data[0] === 0) {
+                if (pixelValueEl) pixelValueEl.textContent = 'N/A'
+                if (coordEl) coordEl.textContent = 'N/A'
+                return
+            }
+            //TODO: Address type script error
+            // @ts-ignore
+            const val = Number(data[0]).toExponential(4)
+            const coordStr = coordinate.map(c => c.toFixed(3)).join(', ')
+
+            if (pixelValueEl) pixelValueEl.textContent = val
+            if (coordEl) coordEl.textContent = coordStr
+        })
+    }
+
+    // Referencing workshop example from https://openlayers.org/workshop/en/cog/colormap.html
+    getColorStops(name: any, min: any, max: any, steps: any, reverse: any) {
+        const delta = (max - min) / (steps - 1)
+        const stops = new Array(steps * 2)
+        const colors = colormap({ colormap: name, nshades: steps, format: 'rgba' })
+        if (reverse) {
+            colors.reverse()
+        }
+        for (let i = 0; i < steps; i++) {
+            stops[i * 2] = min + i * delta
+            stops[i * 2 + 1] = colors[i]
+        }
+        return stops
     }
 
     intializeMap() {
@@ -175,9 +291,34 @@ export default class TerraTimeAverageMap extends TerraElement {
                 zoom: 2,
                 projection: 'EPSG:3857',
             }),
+            controls: [],
         })
     }
 
+    async getMinMax(gtSource: any) {
+        await gtSource.getView()
+        const gtImage = gtSource.sourceImagery_[0][0]
+
+        // read raster data from band 1
+        const rasterData = await gtImage.readRasters({ samples: [0] })
+        const pixels = rasterData[0]
+
+        let min = Infinity
+        let max = -Infinity
+
+        // Loop through pixels and get min and max values. This gives us a range to determine color mapping styling
+        for (let i = 0; i < pixels.length; i++) {
+            const val = pixels[i]
+            if (!isNaN(val)) {
+                // skip no-data pixels or NaN
+                if (val < min) min = val
+                if (val > max) max = val
+            }
+        }
+
+        return { min, max }
+    }
+
     async fetchGeotiffMetadata(
         gtSource: GeoTIFF
     ): Promise<{ [key: string]: string }> {
@@ -205,6 +346,33 @@ export default class TerraTimeAverageMap extends TerraElement {
         return dataObj
     }
 
+    async applyColorToLayer(gtSource: any, color: String) {
+        var { min, max } = await this.getMinMax(gtSource)
+        let gtStyle = {
+            color: [
+                'case',
+                ['==', ['band', 2], 0],
+                [0, 0, 0, 0],
+                [
+                    'interpolate',
+                    ['linear'],
+                    ['band', 1],
+                    ...this.getColorStops(color, min, max, 72, false),
+                ],
+            ],
+        }
+
+        this.#gtLayer?.setStyle(gtStyle)
+    }
+
+    #onColorMapChange(event: Event) {
+        const selectedColormap = (event.target as HTMLSelectElement).value
+        // Reapply the style with the new colormap
+        if (this.#gtLayer && this.#gtLayer.getSource()) {
+            this.applyColorToLayer(this.#gtLayer.getSource(), selectedColormap)
+        }
+    }
+
     getVariableEntryId() {
         if (!this.collection || !this.variable) {
             return
@@ -230,7 +398,34 @@ export default class TerraTimeAverageMap extends TerraElement {
                     : html`<div class="spacer"></div>`
             )}
 
-            <div id="map"></div>
+            <!-- Display pixels/coordinate/opacity/colormap list in Map  -->
+            <div id="map"">
+              <div id="settings">
+                <div><strong>Value:</strong> <span id="pixelValue">N/A</span></div>
+                <div><strong>Lat,Lon:</strong> <span id="cursorCoordinates">N/A</span></div>
+                <div>
+                  <label>
+                    Layer opacity
+                    <input id="opacity-input" type="range" min="0" max="1" step="0.01" value="1" />
+                    <span id="opacity-output"></span>
+                  </label>
+                  <label>
+                    ColorMap:
+                    <select id="colormap-select" @change=${this.#onColorMapChange}>
+                      ${this.colormaps.map(
+                          cm =>
+                              html` <option
+                                  value="${cm}"
+                                  ?selected=${cm === this.colorMapName}
+                              >
+                                  ${cm}
+                              </option>`
+                      )}
+                    </select>
+                    </label>
+                </div>
+              </div>
+            </div>
         `
     }
 }

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/src/components/time-average-map/time-average-map.controller.ts

@@ -168,7 +168,6 @@ export class TimeAvgMapController {
                     bearerToken: this.#host.bearerToken,
                     environment: this.#host.environment,
                 })
-
                 console.log('Job status', jobStatus)
             } catch (error) {
                 console.error('Error checking harmony job status', error)

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

@@ -0,0 +1,37 @@
+import { css } from 'lit'
+
+export default css`
+    :host {
+        display: block;
+        height: 800px;
+    }
+
+    #map {
+        width: 100%;
+        height: 100%;
+    }
+
+    #settings {
+        position: absolute;
+        bottom: 10px;
+        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;
+    }
+
+    input[type='range'] {
+        vertical-align: middle;
+    }
+`

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/src/components/time-series/time-series.component.ts

@@ -341,12 +341,7 @@ export default class TerraTimeSeries extends TerraElement {
             return
         }
 
-        return [
-            this.catalogVariable.dataFieldLongName,
-            this.catalogVariable.dataFieldUnits,
-        ]
-            .filter(Boolean)
-            .join(', ')
+        return [this.catalogVariable.dataFieldUnits].filter(Boolean).join(', ')
     }
 
     #handlePlotRelayout(e: TerraPlotRelayoutEvent) {

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/src/components/time-series/time-series.controller.ts

@@ -304,7 +304,6 @@ export class TimeSeriesController {
         if (parsedLocation.length === 4) {
             const collection = `${this.host.catalogVariable!.dataProductShortName}_${this.host.catalogVariable!.dataProductVersion}`
             const [w, s, e, n] = parsedLocation
-            console.log('start_date: ', startDate)
             let subsetOptions = {
                 collectionEntryId: collection,
                 variableConceptIds: ['parameter_vars'],

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/src/components/variable-combobox/variable-combobox.component.ts

@@ -516,7 +516,16 @@ export default class TerraVariableCombobox extends TerraElement {
                     pending: () =>
                         html`<li class="updating">Updating List of Variables</li>`,
                     complete: list => {
-                        this.#searchableList = list
+                        //Filter out GPM_3IMERGHH V06 as soon as results arrive
+                        const filtered = list.filter(
+                            item =>
+                                !(
+                                    item.collectionShortName === 'GPM_3IMERGHH' &&
+                                    item.collectionVersion === '06'
+                                )
+                        )
+
+                        this.#searchableList = filtered
 
                         //* @see {@link https://www.fusejs.io/api/options.html}
                         this.#searchEngine = new Fuse(this.#searchableList, {

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/src/lib/graphql-client.ts

@@ -3,7 +3,7 @@ import { CachePersistor } from 'apollo3-cache-persist'
 import localforage from 'localforage'
 
 const CACHE_TIMESTAMP_KEY = 'terra-general-cache-timestamp'
-const CACHE_TTL_MS = 12 * 60 * 60 * 1000 // 12 hours in milliseconds
+const CACHE_TTL_MS = 7 * 24 * 60 * 60 * 1000 // 7 days in milliseconds
 
 localforage.config({
     name: 'terra-general-cache',

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/src/metadata-catalog/queries.ts

@@ -105,6 +105,7 @@ export const GET_VARIABLES = gql`
                 dataFieldUnits
                 dataProductDescriptionUrl
                 dataFieldDescriptionUrl
+                dataProductInstrumentShortName
             }
             facets {
                 category

{terra_ui_components-0.0.66 → terra_ui_components-0.0.68}/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.66/cdn/themes/horizon.css'
+        terraStyles.href = 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.68/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.66/cdn/terra-ui-components-autoloader.js"
+        terraAutoloader.src = "https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.68/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.66/src/components/time-average-map/time-average-map.styles.ts

@@ -1,13 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-    :host {
-        display: block;
-        height: 600px;
-    }
-
-    #map {
-        width: 100%;
-        height: 100%;
-    }
-`