Merge branch 'GUUI-3567-clean-up-time-average-map' into staging

Author: joncarlson

src/components/plot-toolbar/plot-toolbar.component.ts

@@ -20,6 +20,7 @@ import { cache } from 'lit/directives/cache.js'
 import { AuthController } from '../../auth/auth.controller.js'
 import { getTimeAveragedMapNotebook } from './notebooks/time-averaged-map-notebook.js'
 import { getTimeSeriesNotebook } from './notebooks/time-series-notebook.js'
+import { nothing } from 'lit'
 
 /**
  * @summary Short summary of the component's intended use.
@@ -55,6 +56,8 @@ export default class TerraPlotToolbar extends TerraElement {
     @property() dataType: DataType
     @property({ type: Boolean, attribute: 'show-location' }) showLocation: boolean =
         true
+    @property({ type: String }) colormap = 'viridis' // default colormap
+    @property({ type: Number }) opacity = 1
 
     @state()
     activeMenuItem: MenuNames = null
@@ -66,6 +69,52 @@ export default class TerraPlotToolbar extends TerraElement {
     locationMapValue: any = []
 
     #tooltipTimeout: number | null = 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'
 
     @query('#menu') menu: HTMLMenuElement
 
@@ -79,7 +128,6 @@ export default class TerraPlotToolbar extends TerraElement {
 
         this.menu.focus()
     }
-
     closeMenu() {
         this.activeMenuItem = null
     }
@@ -250,6 +298,28 @@ export default class TerraPlotToolbar extends TerraElement {
                                   font-size="1.5em"
                               ></terra-icon>
                           </terra-button>
+
+                          ${this.dataType == 'geotiff'
+                              ? html`
+                                    <terra-button
+                                        circle
+                                        outline
+                                        aria-expanded=${this.activeMenuItem ===
+                                        'GeoTIFF'}
+                                        aria-controls="menu"
+                                        aria-haspopup="true"
+                                        class="toggle"
+                                        @mouseenter=${this.#handleActiveMenuItem}
+                                        data-menu-name="GeoTIFF"
+                                    >
+                                        <terra-icon
+                                            name="outline-cog-8-tooth"
+                                            library="heroicons"
+                                            font-size="1.5em"
+                                        ></terra-icon>
+                                    </terra-button>
+                                `
+                              : nothing}
                       </div>
 
                       <menu
@@ -286,6 +356,13 @@ export default class TerraPlotToolbar extends TerraElement {
                           >
                               ${this.#renderJupyterNotebookPanel()}
                           </li>
+
+                          <li
+                              role="menuitem"
+                              ?hidden=${this.activeMenuItem !== 'GeoTIFF'}
+                          >
+                              ${this.#renderGeotiffPanel()}
+                          </li>
                       </menu>
 
                       ${this.showLocationTooltip
@@ -317,12 +394,79 @@ export default class TerraPlotToolbar extends TerraElement {
 
     #handleMenuLeave(event: MouseEvent) {
         // Only close if we're not moving to another element within the component
+        // If the GeoTIFF menu is in use, it will only close if you hover outside of the time average map component
         const relatedTarget = event.relatedTarget as HTMLElement
+
         if (!this.contains(relatedTarget)) {
             this.activeMenuItem = null
         }
     }
 
+    #onShowOpacityChange = (e: Event) => {
+        this.opacity = parseFloat((e.target as HTMLInputElement).value)
+        this.dispatchEvent(
+            new CustomEvent('show-opacity-value', {
+                detail: this.opacity,
+                bubbles: true,
+                composed: true,
+            })
+        )
+    }
+
+    #onColorMapChange = (e: Event) => {
+        this.colorMapName = (e.target as HTMLInputElement).value
+        this.dispatchEvent(
+            new CustomEvent('show-color-map', {
+                detail: this.colorMapName,
+                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>
+
+                      <label>
+                          Layer opacity
+                          <input
+                              type="range"
+                              min="0"
+                              max="1"
+                              step="0.01"
+                              .value=${String(this.opacity)}
+                              @change=${this.#onShowOpacityChange}
+                          />
+                          <span id="opacity-output">${this.opacity.toFixed(2)}</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>
+                  `
+                : nothing}
+        `
+    }
+
     #renderInfoPanel() {
         return html`
             <h3 class="sr-only">Information</h3>

src/components/plot-toolbar/plot-toolbar.styles.ts

@@ -138,4 +138,25 @@ export default css`
             transform: translateY(0);
         }
     }
+
+    #settings {
+        opacity: 0.75;
+        position: absolute;
+        bottom: 150px;
+        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;
+    }
 `

src/components/plot-toolbar/plot-toolbar.types.ts

@@ -1,3 +1,3 @@
-export type MenuNames = 'download' | 'help' | 'information' | 'jupyter' | null
+export type MenuNames = 'download' | 'help' | 'information' | 'jupyter' | 'GeoTIFF' | null
 
 export type DataType = 'csv' | 'geotiff' | null