Subsetter testing improvements and fixes (#30)

* bugfix: spatial constraints not ready

* 0.0.152

* bugfix: add debugging

* 0.0.153

* bugfix: more debugging

* 0.0.154

* remove debugging

* 0.0.155

* remove watch

* 0.0.156

* resolve issues

* 0.0.157

* Filter out non-configured giovanni variables

* 0.0.158

* handle groups in giovanni variable names

* 0.0.159

* drop help icons and update text

* 0.0.160

* feature: datepicker sidebar slots

* feature(badge): add info variant

* feature(dialog): borders

* 0.0.161

* include composed-offset-position

* 0.0.162

* feature(date-picker): switch to 24 hour time, clean up date handling and add tests

* feature(date-picker): preserve time

* 0.0.163

* fix warning about datepicker using inefficient updates

* 0.0.164

* feature(date-picker): attempt to fix additional day

* chore: formatting

* 0.0.165

* feature: add clear functionality

* 0.0.166

* feature(subsetter): add long name and units to variable list

* feature(subsetter): handle no granules and fix dialog sizing

* handle loading and error states for collection

* feature(date-picker): allow end of day to be customized

* 0.0.167

* multiple variable plot support (#31)

Author: joncarlson

docs/pages/components/data-subsetter.md

@@ -45,7 +45,19 @@ The `<terra-data-subsetter>` component provides a complete UI for subsetting and
 ### Basic Usage
 
 ```html:preview
-<terra-data-subsetter short-name="OMAERO" version="003"></terra-data-subsetter>
+<terra-data-subsetter short-name="M2I3NPASM" version="5.12.4"></terra-data-subsetter>
+```
+
+### Giovanni services for CSV and TIFF outputs
+
+```html:preview
+<terra-data-subsetter short-name="FLDAS_NOAHMP001_G_CA_D" version="001"></terra-data-subsetter>
+```
+
+### Error handling for collections with no granules
+
+```html:preview
+<terra-data-subsetter short-name="XAERDT_L2_MODIS_Aqua" version="1"></terra-data-subsetter>
 ```
 
 ### No collection (enables Collection search)

docs/pages/components/time-series.md

@@ -64,6 +64,26 @@ By default, the time series component automatically fetches new data when users
 </terra-login>
 ```
 
+## Plot Multiple Variables
+
+Use `variable-entry-ids` to request and render multiple variables in one chart. Each variable is fetched and cached independently, and each response is plotted as its own line.
+
+```html:preview
+<terra-login style="width: 100%">
+    <span slot="loading">Loading...please wait</span>
+
+    <terra-time-series
+        slot="logged-in"
+        variable-entry-ids='["GPM_3IMERGDF_07_precipitation", "GPM_3IMERGDE_07_precipitation"]'
+        start-date="01/01/2019"
+        end-date="03/01/2019"
+        location="62,5,95,40"
+    ></terra-time-series>
+
+    <p slot="logged-out">Please login to view this plot</p>
+</terra-login>
+```
+
 ```jsx:react
 import TerraTimeSeries from '@nasa-terra/components/dist/react/time-series'
 

package-lock.json

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

package.json

@@ -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.166/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.167/cdn/')`
 
         // Reconstruct the file: CSS import at top, then existing content with setBasePath import and call inserted
         const newLines = [...lines]

packages/create-terra-ui-app/boilerplates/nextjs/framework.js

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

pyproject.toml

@@ -39,6 +39,7 @@ import TerraButton from '../button/button.component.js'
 import type { TerraSelectEvent } from '../../events/terra-select.js'
 import { getDataAccessNotebook } from './notebooks/data-access-notebook.js'
 import { sendDataToJupyterNotebook } from '../../lib/jupyter.js'
+import TerraAlert from '../alert/alert.component.js'
 
 /**
  * @summary Discover and export collection granules with search, temporal, spatial, and cloud cover filters.
@@ -69,6 +70,7 @@ export default class TerraDataAccess extends TerraElement {
         'terra-menu-item': TerraMenuItem,
         'terra-button': TerraButton,
         'terra-data-grid': TerraDataGrid,
+        'terra-alert': TerraAlert,
     }
 
     @property({ reflect: true, attribute: 'short-name' })
@@ -615,6 +617,18 @@ export default class TerraDataAccess extends TerraElement {
     }
 
     render() {
+        if (this.#controller.sampling?.firstGranules.count === 0) {
+            return html`
+                <terra-alert variant="warning" open appearance="white">
+                    <strong>No granules found.</strong>
+                    <p>
+                        This collection does not have any granules available to access
+                        or subset.
+                    </p>
+                </terra-alert>
+            `
+        }
+
         return html`
             <div class="filters-compact">
                 <div class="search-row">

src/components/data-access/data-access.component.ts

@@ -175,11 +175,12 @@ export class DataAccessController {
     }
 
     get granuleMaxDate() {
-        if (!this.#sampling?.lastGranules) {
+        const granules = this.#sampling?.lastGranules?.items
+
+        if (!granules?.length) {
             return null
         }
 
-        const granules = this.#sampling.lastGranules.items
         return (
             granules[granules.length - 1].temporalExtent?.rangeDateTime
                 ?.endingDateTime ?? null

src/components/data-access/data-access.controller.ts

@@ -24,7 +24,10 @@ import {
 } from '../../utilities/mimetypes.js'
 import { watch } from '../../internal/watch.js'
 import { debounce } from '../../internal/debounce.js'
-import type { CmrSearchResult } from '../../metadata-catalog/types.js'
+import type {
+    CmrSearchResult,
+    VariableDetails,
+} from '../../metadata-catalog/types.js'
 import type { LatLng, LatLngBounds } from 'leaflet'
 import { MapEventType } from '../map/type.js'
 import { AuthController } from '../../auth/auth.controller.js'
@@ -109,6 +112,9 @@ export default class TerraDataSubsetter extends TerraElement {
     @state()
     collectionWithServices?: CollectionWithAvailableServices
 
+    @state()
+    variableDetails?: Array<VariableDetails>
+
     @state()
     selectedVariables: Variable[] = []
 
@@ -317,15 +323,6 @@ export default class TerraDataSubsetter extends TerraElement {
             this.collectionWithServices?.collection?.EntryTitle ?? 'Download Data'
 
         if (!this.collectionWithServices) {
-            if (this.controller.fetchCollectionTask.status === TaskStatus.PENDING) {
-                return html`
-                    <div class="loading-collection">
-                        <terra-loader indeterminate variant="small"></terra-loader>
-                        <span>Loading</span>
-                    </div>
-                `
-            }
-
             if (this.controller.fetchCollectionTask.status === TaskStatus.ERROR) {
                 return html`
                     <terra-alert open variant="danger" appearance="white">
@@ -579,10 +576,11 @@ export default class TerraDataSubsetter extends TerraElement {
                                       </terra-menu>
                                   </terra-dropdown>
 
+                                  <!--
                                   <terra-button
                                       outline
                                       @click=${() =>
-                                          this.#handleJupyterNotebookClick()}
+                                      this.#handleJupyterNotebookClick()}
                                   >
                                       <terra-icon
                                           name="outline-code-bracket"
@@ -592,6 +590,7 @@ export default class TerraDataSubsetter extends TerraElement {
                                       ></terra-icon>
                                       Open in Jupyter Notebook
                                   </terra-button>
+                                    -->
                               </div>
                           `
                         : nothing}
@@ -1058,6 +1057,11 @@ export default class TerraDataSubsetter extends TerraElement {
     }
 
     #renderOutputFormatSelection() {
+        // TODO: refactor component to use output formats from individual services, then each service can have a map of output format friendly names
+        const hasGiovanniService = this.collectionWithServices?.services?.some(
+            s => s.name.indexOf('giovanni') !== -1
+        )
+
         return html`
             <terra-accordion>
                 <div slot="summary">
@@ -1068,7 +1072,12 @@ export default class TerraDataSubsetter extends TerraElement {
                     slot="summary-right"
                     style="display: flex; align-items: center; gap: 10px;"
                 >
-                    <span>${getFriendlyNameForMimeType(this.selectedFormat)}</span>
+                    <span
+                        >${getFriendlyNameForMimeType(
+                            this.selectedFormat,
+                            hasGiovanniService
+                        )}</span
+                    >
 
                     <button class="reset-btn" @click=${this.#resetFormatSelection}>
                         Reset
@@ -1109,7 +1118,10 @@ export default class TerraDataSubsetter extends TerraElement {
                                         @change=${() =>
                                             (this.selectedFormat = format)}
                                     />
-                                    ${getFriendlyNameForMimeType(format)}
+                                    ${getFriendlyNameForMimeType(
+                                        format,
+                                        hasGiovanniService
+                                    )}
                                 </label>
                             `
                         )
@@ -1168,8 +1180,11 @@ export default class TerraDataSubsetter extends TerraElement {
                         end-label="End Date"
                         .minDate=${this.granuleMinDate ?? defaultStartDate}
                         .maxDate=${this.granuleMaxDate ?? defaultEndDate}
-                        .startDate=${this.selectedDateRange.startDate}
-                        .endDate=${this.selectedDateRange.endDate}
+                        .startDate=${this.selectedDateRange.startDate ??
+                        this.granuleMinDate}
+                        .endDate=${this.selectedDateRange.endDate ??
+                        this.granuleMaxDate}
+                        .useEndOfDay=${this.#isGiovanniFormat() ? false : true}
                         @terra-date-range-change=${this.#handleDateChange}
                     ></terra-date-picker>
                 </div>
@@ -1654,6 +1669,15 @@ export default class TerraDataSubsetter extends TerraElement {
                     const groupPath = [...path, key].join('/')
                     if (value.__isLeaf) {
                         // Leaf node (variable)
+                        // Look up the long name from variableDetails
+                        const variableDetail = this.variableDetails?.find(
+                            d =>
+                                d.name === value.__variable.name &&
+                                d.longName !== value.__variable.name // if the long name is the same as the variable name, we'll just use the variable name
+                        )
+                        const variableName = variableDetail?.longName
+                            ? `${key} = ${variableDetail.longName}${variableDetail.units ? ` (${variableDetail.units})` : ''}`
+                            : key
                         return html`
                             <div class="option-row">
                                 <label class="checkbox-option">
@@ -1671,7 +1695,7 @@ export default class TerraDataSubsetter extends TerraElement {
                                                 value.__variable
                                             )}
                                     />
-                                    <span>${key}</span>
+                                    <span>${variableName}</span>
                                 </label>
                             </div>
                         `
@@ -2063,10 +2087,11 @@ export default class TerraDataSubsetter extends TerraElement {
                                             </terra-menu>
                                         </terra-dropdown>
 
+                                        <!--
                                         <terra-button
                                             outline
                                             @click=${() =>
-                                                this.#handleJupyterNotebookClick()}
+                                            this.#handleJupyterNotebookClick()}
                                         >
                                             <terra-icon
                                                 name="outline-code-bracket"
@@ -2076,7 +2101,7 @@ export default class TerraDataSubsetter extends TerraElement {
                                             ></terra-icon>
                                             Open in Jupyter Notebook
                                         </terra-button>
-                                    </div>
+--></div>
                                 `
                               : nothing}
                           ${this.controller.currentJob!.status === 'running'
@@ -2536,6 +2561,10 @@ export default class TerraDataSubsetter extends TerraElement {
     }
 
     #renderDataAccessModeSelection() {
+        if (!this.controller.hasGranules) {
+            return nothing
+        }
+
         return html`
             <div class="mode-selection">
                 <div class="mode-options">

src/components/data-subsetter/data-subsetter.component.ts

@@ -16,6 +16,7 @@ import Fuse from 'fuse.js'
 import type {
     CmrSamplingOfGranules,
     MetadataCatalogInterface,
+    VariableDetails,
 } from '../../metadata-catalog/types.js'
 import { CmrCatalog } from '../../metadata-catalog/cmr-catalog.js'
 import { convertVariableEntryIdToGiovanniFormat } from '../../utilities/giovanni.js'
@@ -28,6 +29,7 @@ export class DataSubsetterController {
     searchCmrTask: Task<[string | undefined, string], any | undefined>
     samplingTask: Task<[string | undefined], CmrSamplingOfGranules | undefined>
     giovanniConfiguredVariablesTask: Task<[], Set<string> | undefined>
+    variableDetailsTask: Task<[string | undefined], VariableDetails[] | undefined>
     currentJob: SubsetJobStatus | null
 
     #host: ReactiveControllerHost & TerraDataSubsetter
@@ -52,11 +54,44 @@ export class DataSubsetterController {
                       )
                     : undefined
 
+                // Trigger variable details fetch when collection is fetched
+                if (this.#host.collectionWithServices?.conceptId) {
+                    this.variableDetailsTask.run()
+                }
+
                 return this.#host.collectionWithServices
             },
             args: (): [string | undefined] => [this.#host.collectionEntryId],
         })
 
+        this.variableDetailsTask = new Task(host, {
+            task: async ([conceptId], { signal }) => {
+                if (!conceptId) {
+                    this.#host.variableDetails = undefined
+                    return undefined
+                }
+
+                try {
+                    const details = await this.#metadataCatalog.getVariablesDetails(
+                        conceptId,
+                        {
+                            signal,
+                        }
+                    )
+
+                    this.#host.variableDetails = details?.collection?.variables?.items
+                    return this.#host.variableDetails
+                } catch (error) {
+                    console.warn('Failed to fetch variable details:', error)
+                    return undefined
+                }
+            },
+            args: (): [string | undefined] => [
+                this.#host.collectionWithServices?.conceptId,
+            ],
+            autoRun: false,
+        })
+
         this.searchCmrTask = new Task(host, {
             task: async ([searchQuery, searchType], { signal }) => {
                 if (!searchQuery) {
@@ -399,6 +434,13 @@ export class DataSubsetterController {
         return labels
     }
 
+    get hasGranules() {
+        return (
+            this.#sampling?.firstGranules?.count &&
+            this.#sampling.firstGranules.count > 0
+        )
+    }
+
     get granuleMinDate() {
         if (!this.#sampling?.firstGranules) {
             return null
@@ -411,11 +453,12 @@ export class DataSubsetterController {
     }
 
     get granuleMaxDate() {
-        if (!this.#sampling?.lastGranules) {
+        const granules = this.#sampling?.lastGranules?.items
+
+        if (!granules?.length) {
             return null
         }
 
-        const granules = this.#sampling.lastGranules.items
         return (
             granules[granules.length - 1].temporalExtent?.rangeDateTime
                 ?.endingDateTime ?? null