Merge pull request #6 from nasa/GUUI-3596-implement-line-segmenting-in-map-component

Implemented scatter plot graph with pixel interpolation

Author: andybabaynasa

package-lock.json

@@ -202,25 +202,25 @@ export default class TerraPlotToolbar extends TerraElement {
                                   <a
                                       target="_blank"
                                       href="${this.catalogVariable
-                                          .dataProductDescriptionUrl}"
+                        .dataProductDescriptionUrl}"
                                       >[${this.catalogVariable
-                                          .dataProductShortName}_${this
-                                          .catalogVariable.dataProductVersion}]</a
+                        .dataProductShortName}_${this
+                            .catalogVariable.dataProductVersion}]</a
                                   >
                                   ${this.showLocation
-                                      ? html`• ${this.#getLocationIcon()}
+                        ? html`• ${this.#getLocationIcon()}
                                             <span
                                                 class="location-text"
                                                 @mouseenter=${this
-                                                    .#handleLocationMouseEnter}
+                                .#handleLocationMouseEnter}
                                                 @mouseleave=${this
-                                                    .#handleLocationMouseLeave}
+                                .#handleLocationMouseLeave}
                                                 >${this.location.replace(
-                                                    /,/g,
-                                                    ', '
-                                                )}</span
+                                    /,/g,
+                                    ', '
+                                )}</span
                                             >`
-                                      : ''}
+                        : ''}
                               </h3>
                           </slot>
                       </div>
@@ -337,12 +337,12 @@ export default class TerraPlotToolbar extends TerraElement {
                           </terra-button>
 
                           ${this.dataType == 'geotiff'
-                              ? html`
+                        ? html`
                                     <terra-button
                                         circle
                                         outline
                                         aria-expanded=${this.activeMenuItem ===
-                                        'GeoTIFF'}
+                            'GeoTIFF'}
                                         aria-controls="menu"
                                         aria-haspopup="true"
                                         class="toggle"
@@ -356,7 +356,7 @@ export default class TerraPlotToolbar extends TerraElement {
                                         ></terra-icon>
                                     </terra-button>
                                 `
-                              : nothing}
+                        : nothing}
                       </div>
 
                       <menu
@@ -410,7 +410,7 @@ export default class TerraPlotToolbar extends TerraElement {
                       </menu>
 
                       ${this.showLocationTooltip
-                          ? html`
+                        ? html`
                                 <div class="location-tooltip">
                                     <terra-map
                                         .value=${this.locationMapValue}
@@ -423,7 +423,7 @@ export default class TerraPlotToolbar extends TerraElement {
                                     ></terra-map>
                                 </div>
                             `
-                          : ''}
+                        : ''}
                   </header>`
         )
     }
@@ -468,13 +468,26 @@ export default class TerraPlotToolbar extends TerraElement {
         )
     }
 
+    #showCheckBoxToggle = (e: Event) => {
+        const checkbox = e.target as HTMLInputElement;
+        const isChecked = checkbox.checked;
+
+        this.dispatchEvent(
+            new CustomEvent('show-check-box-toggle', {
+                detail: isChecked,
+                bubbles: true,
+                composed: true,
+            })
+        )
+    }
+
     #renderGeotiffPanel() {
         return html`
             <h3 class="sr-only">GeoTIFF Settings</h3>
 
             ${this.dataType === 'geotiff'
                 ? html`
-                      <p>Select opacity and apply colormaps</p>
+                      <p>Select opacity,apply colormaps, and toggle draw profile</p>
 
                       <label>
                           Layer opacity
@@ -496,16 +509,25 @@ export default class TerraPlotToolbar extends TerraElement {
                               @change=${this.#onColorMapChange}
                           >
                               ${this.colormaps.map(
-                                  cm =>
-                                      html` <option
+                    cm =>
+                        html` <option
                                           value="${cm}"
                                           ?selected=${cm === this.colorMapName}
                                       >
                                           ${cm}
                                       </option>`
-                              )}
+                )}
                           </select>
                       </label>
+        <label>
+        <input
+          type="checkbox"
+          @change=${this.#showCheckBoxToggle}
+        />
+        <slot>Draw Profile</slot>
+        </label>
+      </label>
+                
                   `
                 : nothing}
         `
@@ -522,7 +544,7 @@ export default class TerraPlotToolbar extends TerraElement {
                 <dt>Variable Shortname</dt>
                 <dd>
                     ${this.catalogVariable.dataFieldShortName ??
-                    this.catalogVariable.dataFieldAccessName}
+            this.catalogVariable.dataFieldAccessName}
                 </dd>
 
                 <dt>Units</dt>
@@ -700,9 +722,9 @@ export default class TerraPlotToolbar extends TerraElement {
             <a
                 href="#"
                 @click=${(e: Event) => {
-                    e.preventDefault()
-                    this.#handleJupyterNotebookClick()
-                }}
+                e.preventDefault()
+                this.#handleJupyterNotebookClick()
+            }}
             >
                 Open in Jupyter Notebook
                 <terra-icon