GUUI 3495 review and implement data aware validation rules (#19)

* show an error if user selects invalid dates

* Spatial picker restricts the map if selected spatial area is out of extent

* data-aware componnents: no worning from variable picker when data not overlapping location

* chore: cleanup to get working with feature/prepare-for-contributions

---------

Co-authored-by: Krupa Rami <[email protected]>
Co-authored-by: Jon Carlson <[email protected]>

Author: 3 people

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

@@ -25,6 +25,9 @@ import { getVariableEntryId } from '../../metadata-catalog/utilities.js'
  *
  * @event terra-date-range-change - Emitted whenever the date range of the date slider is updated
  */
+
+type LastChanged = 'variable' | 'location' | undefined
+
 export default class TerraDataRods extends TerraElement {
     static styles: CSSResultGroup = [componentStyles, styles]
     static dependencies = {
@@ -90,8 +93,82 @@ export default class TerraDataRods extends TerraElement {
 
     @state() catalogVariable: Variable
 
+    /**
+     * anytime user selects invalid dates
+     */
+    @state() private dateErrorMessage?: string
+
+    @state() private lastChanged?: LastChanged
+
+    /**
+     * add a warning state
+     */
+    @state() private spatialWarningMessage?: string
+
     _fetchVariableTask = getFetchVariableTask(this)
 
+    get variableBoundingBox() {
+        const variable = this.catalogVariable
+        if (!variable) return undefined
+
+        const {
+            dataProductWest,
+            dataProductSouth,
+            dataProductEast,
+            dataProductNorth,
+        } = variable
+
+        if (
+            dataProductWest == null ||
+            dataProductSouth == null ||
+            dataProductEast == null ||
+            dataProductNorth == null
+        ) {
+            return undefined
+        }
+
+        return `${dataProductWest}, ${dataProductSouth}, ${dataProductEast}, ${dataProductNorth}`
+    }
+
+    private compatibilityWarning() {
+        this.spatialWarningMessage = undefined
+
+        if (!this.catalogVariable || !this.location) return
+
+        const {
+            dataProductWest,
+            dataProductSouth,
+            dataProductEast,
+            dataProductNorth,
+        } = this.catalogVariable
+
+        if (
+            dataProductWest == null ||
+            dataProductSouth == null ||
+            dataProductEast == null ||
+            dataProductNorth == null
+        ) {
+            return
+        }
+
+        const [latStr, lonStr] = this.location.split(',')
+        const lat = Number(latStr)
+        const lon = Number(lonStr)
+
+        const inside =
+            lon >= dataProductWest &&
+            lon <= dataProductEast &&
+            lat >= dataProductSouth &&
+            lat <= dataProductNorth
+
+        if (!inside) {
+            this.spatialWarningMessage =
+                this.lastChanged === 'variable'
+                    ? 'This variable has no data at the selected location.'
+                    : 'The selected location is outside the coverage of this variable.'
+        }
+    }
+
     render() {
         const minDate = this.catalogVariable
             ? getUTCDate(this.catalogVariable.dataProductBeginDateTime)
@@ -101,6 +178,9 @@ export default class TerraDataRods extends TerraElement {
             : undefined
 
         return html`
+            ${this.spatialWarningMessage && this.lastChanged === 'location'
+                ? html`<div class="warning">⚠️ ${this.spatialWarningMessage}</div>`
+                : null}
             <terra-variable-combobox
                 exportparts="base:variable-combobox__base, combobox:variable-combobox__combobox, button:variable-combobox__button, listbox:variable-combobox__listbox"
                 .value=${getVariableEntryId(this)}
@@ -109,8 +189,12 @@ export default class TerraDataRods extends TerraElement {
                 @terra-combobox-change="${this.#handleVariableChange}"
             ></terra-variable-combobox>
 
+            ${this.spatialWarningMessage && this.lastChanged === 'variable'
+                ? html`<div class="warning">⚠️ ${this.spatialWarningMessage}</div>`
+                : null}
             <terra-spatial-picker
                 initial-value=${this.location}
+                .spatialConstraints=${this.variableBoundingBox}
                 exportparts="map:spatial-picker__map, leaflet-bbox:spatial-picker__leaflet-bbox, leaflet-point:spatial-picker__leaflet-point"
                 label="Select Point"
                 @terra-map-change=${this.#handleMapChange}
@@ -120,12 +204,17 @@ export default class TerraDataRods extends TerraElement {
                 variable-entry-id=${getVariableEntryId(this)}
                 start-date=${this.startDate}
                 end-date=${this.endDate}
-                location=${this.location}
+                .location=${this.location ?? undefined}
                 bearer-token=${this.bearerToken}
                 show-citation=${true}
                 @terra-date-range-change=${this.#handleTimeSeriesDateRangeChange}
             >
-              <li slot="help-links"><a href="https://disc.gsfc.nasa.gov/information/tools?title=Hydrology%20Time%20Series">User Guide</a></li>
+                <li slot="help-links">
+                    <a
+                        href="https://disc.gsfc.nasa.gov/information/tools?title=Hydrology%20Time%20Series"
+                        >User Guide</a
+                    >
+                </li>
             </terra-time-series>
 
             <terra-date-range-slider
@@ -135,7 +224,13 @@ export default class TerraDataRods extends TerraElement {
                 start-date=${this.startDate}
                 end-date=${this.endDate}
                 @terra-date-range-change="${this.#handleDateRangeSliderChangeEvent}"
+                @terra-date-selection-invalid="${this.#handleInvalidDateSelection}"
             ></terra-date-range-slider>
+            ${this.dateErrorMessage
+                ? html`<div class="date-error" style="color: red;">
+                      ${this.dateErrorMessage}
+                  </div>`
+                : null}
         `
     }
 
@@ -147,14 +242,35 @@ export default class TerraDataRods extends TerraElement {
         this.endDate = event.detail.endDate
     }
 
+    /**
+     * anytime user selects invalid dates outside variable date range
+     */
+    #handleInvalidDateSelection(event: CustomEvent) {
+        this.dateErrorMessage = event.detail.message
+    }
+
     #handleVariableChange(event: TerraComboboxChangeEvent) {
-        this.variableEntryId = event.detail.entryId
+        const newEntryId = event.detail.entryId
+
+        //Do nothing if this is just initial sync
+        if (newEntryId === this.variableEntryId) {
+            return
+        }
+
+        this.variableEntryId = newEntryId
+        this.location = undefined
+        this.lastChanged = 'variable'
+
+        this.compatibilityWarning()
     }
 
     #handleMapChange(event: TerraMapChangeEvent) {
         if (event.detail.type === MapEventType.POINT) {
             // TODO: we may want to pick a `toFixed()` length in the spatial picker and stick with it.
             this.location = `${event.detail.latLng.lat.toFixed(4)},${event.detail.latLng.lng.toFixed(4)}`
+            this.lastChanged = 'location'
+
+            this.compatibilityWarning()
         }
     }
 

src/components/data-rods/data-rods.styles.ts

@@ -30,4 +30,10 @@ export default css`
     terra-spatial-picker::part(leaflet-edit) {
         display: none;
     }
+
+    .warning {
+        color: #dc2626;
+        font-weight: 500;
+        margin-bottom: 0.25rem;
+    }
 `

src/components/date-picker/date-picker.component.ts

@@ -17,6 +17,7 @@ import TerraButton from '../button/button.component.js'
  *
  * @csspart base - The component's base wrapper.
  * @csspart input - The date input element.
+ * @event terra-date-selection-invalid - Fired when user selects date outside allowed range
  */
 export default class TerraDatePicker extends TerraElement {
     static styles: CSSResultGroup = [componentStyles, styles]
@@ -112,7 +113,31 @@ export default class TerraDatePicker extends TerraElement {
     }
 
     private handleBlur() {
-        this.handleChange(this.flatpickrElement._instance.selectedDates)
+        const selectedDates = this.flatpickrElement._instance.selectedDates
+        const min = this.minDate ? new Date(this.minDate).getTime() : null
+        const max = this.maxDate ? new Date(this.maxDate).getTime() : null
+
+        const isValid = selectedDates.every((date: Date) => {
+            const time = date.getTime()
+            return (!min || time >= min) && (!max || time <= max)
+        })
+
+        if (!isValid) {
+            this.flatpickrElement._instance.clear()
+
+            this.emit(
+                'terra-date-selection-invalid',
+                {
+                    detail: {
+                        message: `You are not allowed to select dates outside ${this.minDate} to ${this.maxDate}.`,
+                    },
+                }
+            )
+
+            return
+        }
+
+        this.handleChange(selectedDates)
     }
 
     render() {
@@ -131,10 +156,10 @@ export default class TerraDatePicker extends TerraElement {
                         .minDate=${this.minDate}
                         .maxDate=${this.maxDate}
                         .defaultDate=${this.range
-                            ? ([this.startDate, this.endDate].filter(
-                                  Boolean
-                              ) as string[])
-                            : this.startDate}
+                ? ([this.startDate, this.endDate].filter(
+                    Boolean
+                ) as string[])
+                : this.startDate}
                         .allowInput=${this.allowInput}
                         .altFormat=${this.altFormat}
                         .altInput=${this.altInput}

src/components/date-picker/date-picker.styles.ts

@@ -89,4 +89,9 @@ export default css`
         white-space: nowrap;
         border: 0;
     }
+    .flatpickr-day.disabled {
+        background: #f0f0f0;
+        color: #ccc;
+        cursor: not-allowed;
+    }
 `