GUUI 3669 resetting spatial piker should set spatial constraints of the collection (#29)

* Resetting spatial piker sets spatial constraints of the collection instead of null

* Fixed reset all button to reset all selected parameters

* adding alert for giovanni format

* Adding optional close button on datepicker and spatialpicker dropdown

* updating aria-label

---------

Co-authored-by: Krupa Rami <krupa.m.rami@nasa.gov>

Author: KrupaRami

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

@@ -77,6 +77,8 @@ export default class TerraDataAccess extends TerraElement {
     @property({ reflect: true, attribute: 'version' })
     version?: string
 
+    @property({ type: Boolean }) showPanelClose = true
+
     @state()
     private _gridInitialized = false
 
@@ -124,6 +126,8 @@ export default class TerraDataAccess extends TerraElement {
     spatialPickerRef = createRef<TerraSpatialPicker>()
     cloudCoverSliderRef = createRef<TerraSlider>()
     gridRef = createRef<TerraDataGrid<CmrGranule>>()
+    dateDropdownRef = createRef<TerraDropdown>()
+    spatialDropdownRef = createRef<TerraDropdown>()
 
     #controller = new DataAccessController(this)
     #boundHandleCloudCoverClickOutside: ((event: MouseEvent) => void) | null = null
@@ -629,7 +633,7 @@ export default class TerraDataAccess extends TerraElement {
                 </div>
 
                 <div class="toggle-row">
-                    <terra-dropdown>
+                    <terra-dropdown ${ref(this.dateDropdownRef)}>
                         <button
                             slot="trigger"
                             class="filter-btn ${this.startDate && this.endDate
@@ -659,6 +663,20 @@ export default class TerraDataAccess extends TerraElement {
                         </button>
 
                         <div class="datepicker-container">
+                            ${this.showPanelClose
+                                ? html`
+                                     <div class="dropdown-header">
+                                        <button
+                                            class="panel-close"
+                                            @click=${() =>
+                                                this.dateDropdownRef.value?.hide()}
+                                            aria-label="Close"
+                                        >
+                                        ×
+                                        </button>
+                                     </div>
+                                    `
+                                : nothing}
                             <terra-date-picker
                                 ${ref(this.datePickerRef)}
                                 range
@@ -704,6 +722,7 @@ export default class TerraDataAccess extends TerraElement {
                         distance="4"
                         hoist
                         @terra-show=${this.#handleSpatialDropdownShow}
+                        ${ref(this.spatialDropdownRef)}
                     >
                         <div slot="trigger" class="filter">
                             <button
@@ -733,6 +752,20 @@ export default class TerraDataAccess extends TerraElement {
                         </div>
 
                         <div class="spatialpicker-container">
+                            ${this.showPanelClose
+                                ? html`
+                                    <div class="dropdown-header">
+                                        <button
+                                            class="panel-close"
+                                            @click=${() =>
+                                                this.spatialDropdownRef.value?.hide()}
+                                            aria-label="Close"
+                                        >
+                                        ×
+                                        </button>
+                                    </div>
+                                `
+                                : nothing}
                             <terra-spatial-picker
                                 ${ref(this.spatialPickerRef)}
                                 hide-label

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

@@ -337,4 +337,22 @@ export default css`
         left: 50%;
         margin-left: -100px;
     }
+
+    .dropdown-header {
+    display: flex;
+    justify-content: flex-end;
+    padding: 4px 6px;
+    }
+
+    .panel-close {
+        border: none;
+        background: transparent;
+        font-size: 18px;
+        cursor: pointer;
+        line-height: 1;
+    }
+
+    .panel-close:hover {
+        opacity: 0.7;
+    }
 `

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

@@ -627,7 +627,7 @@ export default class TerraDataSubsetter extends TerraElement {
             // Get Data footer
             return html`
                 <div slot="footer" class="footer">
-                    <button class="btn btn-secondary">Reset All</button>
+                    <button class="btn btn-secondary" @click=${this.#resetAllParameters}>Reset All</button>
                     <div>
                         <button class="btn btn-primary" @click=${this.#getData}>
                             Get Data
@@ -780,7 +780,7 @@ export default class TerraDataSubsetter extends TerraElement {
             ${this.dataAccessMode === 'subset' && !this.dialog
                 ? html`
                       <div class="footer">
-                          <button class="btn btn-secondary">Reset All</button>
+                          <button class="btn btn-secondary" @click=${this.#resetAllParameters}>Reset All</button>
                           <div>
                           <button
                               class="btn btn-primary"
@@ -809,6 +809,31 @@ export default class TerraDataSubsetter extends TerraElement {
         `
     }
 
+    #resetAllParameters = () => {
+        // Reset variables
+         this.selectedVariables = []
+
+        // Reset spatial to collection bounds (not null)
+        if (this.#hasSpatialSubset()) {
+            this.#resetSpatialSelection()
+        }
+
+        // Reset date range
+        this.selectedDateRange = {
+            startDate: null,
+            endDate: null,
+        }
+
+        // Clear validation state
+        this.touchedFields = new Set()
+        this.validationError = undefined
+
+        // Collapse variable tree
+        this.expandedVariableGroups = new Set()
+
+        this.requestUpdate()
+    }
+
     #renderSearchForCollection() {
         let placeholder =
             'Search all types of resources (e.g. rainfall, GPM, hurricanes, etc.)'
@@ -1355,8 +1380,37 @@ export default class TerraDataSubsetter extends TerraElement {
         }
     }
 
-    #resetSpatialSelection = () => {
-        this.spatialSelection = null
+   #resetSpatialSelection = () => {
+        const spatial_constraints =
+             this.collectionWithServices?.collection?.SpatialExtent
+                ?.HorizontalSpatialDomain?.Geometry?.BoundingRectangles
+
+        if (!spatial_constraints) {
+            this.spatialSelection = null
+             return
+        }
+
+        type BoundingRect = {
+            WestBoundingCoordinate: number
+            SouthBoundingCoordinate: number
+            EastBoundingCoordinate: number
+            NorthBoundingCoordinate: number
+        }
+
+        const normalized: BoundingRect[] = Array.isArray(spatial_constraints)
+            ? spatial_constraints
+            : [spatial_constraints]
+
+        const rect = normalized[0]
+
+        this.spatialSelection = {
+            w: Number(rect.WestBoundingCoordinate),
+            s: Number(rect.SouthBoundingCoordinate),
+            e: Number(rect.EastBoundingCoordinate),
+            n: Number(rect.NorthBoundingCoordinate),
+        }
+
+        this.#markFieldTouched('spatial')
     }
 
     #renderVariableSelection() {
@@ -1433,6 +1487,18 @@ export default class TerraDataSubsetter extends TerraElement {
                                   Only certain variables are supported for the
                                   selected output format. (Giovanni service)
                               </terra-alert>
+                              <terra-alert
+                                  open
+                                  appearance="white"
+                                  style="margin: 10px 0"
+                              >
+                                  <terra-icon
+                                      slot="icon"
+                                      name="outline-information-circle"
+                                      library="heroicons"
+                                  ></terra-icon>
+                                  User's are allowed to select only one variable for the selected output format. (Giovanni service)
+                              </terra-alert>
                           `
                         : nothing}
                     ${variables.length === 0