terra_ui_components 0.0.75__tar.gz → 0.0.76__tar.gz

{terra_ui_components-0.0.75 → terra_ui_components-0.0.76}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: terra_ui_components
-Version: 0.0.75
+Version: 0.0.76
 Summary: NASA Terra UI Components Library
 License-File: LICENSE.md
 Requires-Python: >=3.8

{terra_ui_components-0.0.75 → terra_ui_components-0.0.76}/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@nasa-terra/components",
-  "version": "0.0.75",
+  "version": "0.0.76",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@nasa-terra/components",
-      "version": "0.0.75",
+      "version": "0.0.76",
       "license": "MIT",
       "dependencies": {
         "@apollo/client": "^3.13.8",

{terra_ui_components-0.0.75 → terra_ui_components-0.0.76}/package.json

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

{terra_ui_components-0.0.75 → terra_ui_components-0.0.76}/pyproject.toml

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

terra_ui_components-0.0.76/src/components/plot-toolbar/notebooks/time-averaged-map-notebook.ts

@@ -0,0 +1,66 @@
+import type TerraPlotToolbar from '../plot-toolbar.component.js'
+
+export function getTimeAveragedMapNotebook(host: TerraPlotToolbar) {
+    /**
+     * these cells were originally created in a Jupyter Notebook and then imported here.
+     * Note that one of the code cells takes in dynamic data
+     */
+    return [
+        {
+            cell_type: 'markdown',
+            id: '367f56b9-7ca8-4435-9dcc-89bf586f33ab',
+            metadata: {},
+            source: [
+                '### Prerequisites:\n',
+                '\n',
+                'This notebook uses the `terra_ui_components`, `anywidget`, and `pandas` packages.\n',
+                '\n',
+                'After running the `pip install` cell for the first time, please reload the page to ensure the dependencies are active.',
+            ],
+        },
+        {
+            id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
+            cell_type: 'code',
+            source: '%pip install -q "terra_ui_components==0.0.70" "anywidget==0.9.15" "pandas"',
+            metadata: {
+                trusted: true,
+            },
+            outputs: [],
+            execution_count: null,
+        },
+        {
+            cell_type: 'markdown',
+            id: '35aa4a00-8e2c-4478-9df7-de633fd8f6ce',
+            metadata: {},
+            source: ['### Render an area-averaged map'],
+        },
+        {
+            id: '870c1384-e706-48ee-ba07-fd552a949869',
+            cell_type: 'code',
+            source: `from terra_ui_components import TerraTimeAverageMap\nmap = TerraTimeAverageMap()\nmap.collection='${host.catalogVariable.dataProductShortName}_${host.catalogVariable.dataProductVersion}'\nmap.variable = '${host.catalogVariable.dataFieldShortName}'\nmap.startDate = '${host.startDate}'\nmap.endDate = '${host.endDate}'\nmap.location = '${host.location}'\n\nmap`,
+            metadata: {
+                trusted: true,
+            },
+            outputs: [],
+            execution_count: null,
+        },
+        {
+            cell_type: 'markdown',
+            id: '25b87ed4-2ad9-4c7d-b851-bc8fea3ded5a',
+            metadata: {},
+            source: [
+                '### Access the map GeoTIFF data\n',
+                '\n',
+                'Once the map renders, you can access the data:',
+            ],
+        },
+        {
+            cell_type: 'code',
+            execution_count: null,
+            id: '6b81a089-884d-4fd7-9d4e-c45a53307c20',
+            metadata: {},
+            outputs: [],
+            source: ['map.data'],
+        },
+    ]
+}

terra_ui_components-0.0.76/src/components/plot-toolbar/notebooks/time-series-notebook.ts

@@ -0,0 +1,76 @@
+import type TerraPlotToolbar from '../plot-toolbar.component.js'
+
+export function getTimeSeriesNotebook(host: TerraPlotToolbar) {
+    /**
+     * these cells were originally created in a Jupyter Notebook and then imported here.
+     * Note that one of the code cells takes in dynamic data
+     */
+    return [
+        {
+            cell_type: 'markdown',
+            id: '367f56b9-7ca8-4435-9dcc-89bf586f33ab',
+            metadata: {},
+            source: [
+                '### Prerequisites:\n',
+                '\n',
+                'This notebook uses the `terra_ui_components`, `anywidget`, and `pandas` packages.\n',
+                '\n',
+                'After running the `pip install` cell for the first time, please reload the page to ensure the dependencies are active.',
+            ],
+        },
+        {
+            id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
+            cell_type: 'code',
+            source: '%pip install -q "terra_ui_components==0.0.70" "anywidget==0.9.15" "pandas"',
+            metadata: {
+                trusted: true,
+            },
+            outputs: [],
+            execution_count: null,
+        },
+        {
+            cell_type: 'markdown',
+            id: '35aa4a00-8e2c-4478-9df7-de633fd8f6ce',
+            metadata: {},
+            source: [
+                `### Render ${host.location.split(',').length > 2 ? 'an area-averaged' : 'a point-based'} time series plot`,
+            ],
+        },
+        {
+            id: '870c1384-e706-48ee-ba07-fd552a949869',
+            cell_type: 'code',
+            source: `from terra_ui_components import TerraTimeSeries\ntimeseries = TerraTimeSeries()\n\ntimeseries.variableEntryId = '${host.variableEntryId}'\ntimeseries.startDate = '${host.startDate}'\ntimeseries.endDate = '${host.endDate}'\ntimeseries.location = '${host.location}'\n\ntimeseries`,
+            metadata: {
+                trusted: true,
+            },
+            outputs: [],
+            execution_count: null,
+        },
+        {
+            cell_type: 'markdown',
+            id: '25b87ed4-2ad9-4c7d-b851-bc8fea3ded5a',
+            metadata: {},
+            source: [
+                '### Access the time series data\n',
+                '\n',
+                'Once the time series runs and you see a plot, you can access the data:',
+            ],
+        },
+        {
+            cell_type: 'code',
+            execution_count: null,
+            id: '6b81a089-884d-4fd7-9d4e-c45a53307c20',
+            metadata: {},
+            outputs: [],
+            source: [
+                'import pandas as pd\n',
+                'if getattr(timeseries, "data", None):\n',
+                '    df = pd.DataFrame(timeseries.data)\n',
+                "    df['timestamp'] = pd.to_datetime(df['timestamp'])\n",
+                "    df['value'] = pd.to_numeric(df['value'])\n",
+                '    print(df.dtypes)\n',
+                '    print(df.head())',
+            ],
+        },
+    ]
+}

{terra_ui_components-0.0.75 → terra_ui_components-0.0.76}/src/components/plot-toolbar/plot-toolbar.component.ts

@@ -16,6 +16,8 @@ import TerraButton from '../button/button.component.js'
 import TerraIcon from '../icon/icon.component.js'
 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'
 
 /**
  * @summary Short summary of the component's intended use.
@@ -432,7 +434,15 @@ export default class TerraPlotToolbar extends TerraElement {
     }
 
     #sendDataToJupyterNotebook(jupyterWindow: Window) {
-        console.log('Sending data to JupyterLite...')
+        if (this.dataType === 'geotiff') {
+            this.#sendMapDataToJupyterNotebook(jupyterWindow)
+        } else {
+            this.#sendTimeSeriesDataToJupyterNotebook(jupyterWindow)
+        }
+    }
+
+    #sendTimeSeriesDataToJupyterNotebook(jupyterWindow: Window) {
+        console.log('Sending time series data to JupyterLite...')
 
         // Fetch the time series data from IndexedDB
         getDataByKey<VariableDbEntry>(
@@ -441,77 +451,12 @@ export default class TerraPlotToolbar extends TerraElement {
         ).then(timeSeriesData => {
             // we don't have an easy way of knowing when JupyterLite finishes loading, so we'll wait a bit and then post our notebook
             setTimeout(() => {
-                const notebook = [
-                    {
-                        cell_type: 'markdown',
-                        id: '367f56b9-7ca8-4435-9dcc-89bf586f33ab',
-                        metadata: {},
-                        source: [
-                            '### Prerequisites:\n',
-                            '\n',
-                            'This notebook uses the `terra_ui_components` and `anywidget` packages.\n',
-                            '\n',
-                            'After running the `pip install` cell for the first time, please reload the page to ensure the dependencies are active.',
-                        ],
-                    },
-                    {
-                        id: '2733501b-0de4-4067-8aff-864e1b4c76cb',
-                        cell_type: 'code',
-                        source: '%pip install -q "terra_ui_components==0.0.70" "anywidget==0.9.15" "pandas"',
-                        metadata: {
-                            trusted: true,
-                        },
-                        outputs: [],
-                        execution_count: null,
-                    },
-                    {
-                        cell_type: 'markdown',
-                        id: '35aa4a00-8e2c-4478-9df7-de633fd8f6ce',
-                        metadata: {},
-                        source: ['### Render a point-based time series plot'],
-                    },
-                    {
-                        id: '870c1384-e706-48ee-ba07-fd552a949869',
-                        cell_type: 'code',
-                        source: `from terra_ui_components import TerraTimeSeries\ntimeseries = TerraTimeSeries()\n\ntimeseries.variableEntryId = '${this.variableEntryId}'\ntimeseries.startDate = '${this.startDate}'\ntimeseries.endDate = '${this.endDate}'\ntimeseries.location = '${this.location}'\n\ntimeseries`,
-                        metadata: {
-                            trusted: true,
-                        },
-                        outputs: [],
-                        execution_count: null,
-                    },
-                    {
-                        cell_type: 'markdown',
-                        id: '25b87ed4-2ad9-4c7d-b851-bc8fea3ded5a',
-                        metadata: {},
-                        source: [
-                            '### Access the time series data\n',
-                            '\n',
-                            'Once the time series runs and you see a plot, you can access the data:',
-                        ],
-                    },
-                    {
-                        cell_type: 'code',
-                        execution_count: null,
-                        id: '6b81a089-884d-4fd7-9d4e-c45a53307c20',
-                        metadata: {},
-                        outputs: [],
-                        source: [
-                            'import pandas as pd\n',
-                            'if getattr(timeseries, "data", None):\n',
-                            '    df = pd.DataFrame(timeseries.data)\n',
-                            "    df['timestamp'] = pd.to_datetime(df['timestamp'])\n",
-                            "    df['value'] = pd.to_numeric(df['value'])\n",
-                            '    print(df.dtypes)\n',
-                            '    print(df.head())',
-                        ],
-                    },
-                ]
+                const notebook = getTimeSeriesNotebook(this)
 
                 jupyterWindow.postMessage(
                     {
                         type: 'load-notebook',
-                        filename: `${encodeURIComponent(this.variableEntryId ?? 'plot')}.ipynb`,
+                        filename: `${encodeURIComponent(this.variableEntryId ?? 'plot')}-timeseries.ipynb`,
                         notebook,
                         timeSeriesData,
                         databaseName: DB_NAME,
@@ -524,6 +469,33 @@ export default class TerraPlotToolbar extends TerraElement {
         })
     }
 
+    #sendMapDataToJupyterNotebook(jupyterWindow: Window) {
+        console.log('Sending map data to JupyterLite...')
+
+        // Fetch the time series data from IndexedDB
+        getDataByKey<Blob>(IndexedDbStores.TIME_AVERAGE_MAP, this.cacheKey).then(
+            blob => {
+                // we don't have an easy way of knowing when JupyterLite finishes loading, so we'll wait a bit and then post our notebook
+                setTimeout(() => {
+                    const notebook = getTimeAveragedMapNotebook(this)
+
+                    jupyterWindow.postMessage(
+                        {
+                            type: 'load-notebook',
+                            filename: `${encodeURIComponent(this.variableEntryId ?? 'plot')}-map.ipynb`,
+                            notebook,
+                            blob,
+                            databaseName: DB_NAME,
+                            storeName: IndexedDbStores.TIME_AVERAGE_MAP,
+                            token: this.bearerToken,
+                        },
+                        '*'
+                    )
+                }, 500)
+            }
+        )
+    }
+
     #downloadPNG(_event: Event) {
         downloadImage(this.plot!.base, {
             filename: this.catalogVariable!.dataFieldId,

{terra_ui_components-0.0.75 → terra_ui_components-0.0.76}/src/components/time-average-map/time-average-map.component.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit'
-import { property, query, state } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 import { Map, MapBrowserEvent, View } from 'ol'
 import WebGLTileLayer from 'ol/layer/WebGLTile.js'
 import OSM from 'ol/source/OSM.js'
@@ -8,7 +8,6 @@ import TerraElement from '../../internal/terra-element.js'
 import componentStyles from '../../styles/component.styles.js'
 import styles from './time-average-map.styles.js'
 import type { CSSResultGroup } from 'lit'
-import { watch } from '../../internal/watch.js'
 import { TimeAvgMapController } from './time-average-map.controller.js'
 import TerraButton from '../button/button.component.js'
 import TerraIcon from '../icon/icon.component.js'
@@ -17,10 +16,9 @@ import type { Variable } from '../browse-variables/browse-variables.types.js'
 import { cache } from 'lit/directives/cache.js'
 import { AuthController } from '../../auth/auth.controller.js'
 import { toLonLat } from 'ol/proj.js'
-// @ts-ignore
-import colormap from 'colormap'
 import { getFetchVariableTask } from '../../metadata-catalog/tasks.js'
 import { getVariableEntryId } from '../../metadata-catalog/utilities.js'
+import colormap from 'colormap'
 
 export default class TerraTimeAverageMap extends TerraElement {
     static styles: CSSResultGroup = [componentStyles, styles]
@@ -60,9 +58,13 @@ export default class TerraTimeAverageMap extends TerraElement {
     })
     location?: string
 
+    @property({ type: String }) long_name = ''
+
     @state()
     activeMenuItem: any = null
 
+    @state() catalogVariable: Variable
+
     @state() colormaps = [
         'jet',
         'hsv',
@@ -109,41 +111,17 @@ export default class TerraTimeAverageMap extends TerraElement {
         'cubhelix',
     ]
     @state() colorMapName = 'density'
-
-    @watch('activeMenuItem')
-    handleFocus(_oldValue: any, newValue: any) {
-        if (newValue === null) {
-            return
-        }
-
-        this.menu.focus()
-    }
-
-    /**
-     * The token to be used for authentication with remote servers.
-     * The component provides the header "Authorization: Bearer" (the request header and authentication scheme).
-     * The property's value will be inserted after "Bearer" (the authentication scheme).
-     */
-    @property({ attribute: 'bearer-token', reflect: false })
-    bearerToken: string
-
-    @property({ type: String })
-    long_name = ''
-
-    @query('#menu') menu: HTMLMenuElement
-
-    @state() catalogVariable: Variable
-
+    // Private fields
     #controller: TimeAvgMapController
-    _authController = new AuthController(this)
-
     #map: Map | null = null
     #gtLayer: WebGLTileLayer | null = null
+    // Auth Controller
+    _authController = new AuthController(this)
 
     /**
      * anytime the collection or variable changes, we'll fetch the variable from the catalog to get all of it's metadata
      */
-    _fetchVariableTask = getFetchVariableTask(this)
+    _fetchVariableTask = getFetchVariableTask(this, false)
 
     async firstUpdated() {
         this.#controller = new TimeAvgMapController(this)
@@ -153,6 +131,7 @@ export default class TerraTimeAverageMap extends TerraElement {
     }
 
     async updateGeoTIFFLayer() {
+        await this._fetchVariableTask.run()
         await this.#controller.jobStatusTask.run()
         // The task returns the blob upon completion
         let job_status_value = this.#controller.jobStatusTask.value
@@ -183,7 +162,8 @@ export default class TerraTimeAverageMap extends TerraElement {
 
         if (this.#map && this.#gtLayer) {
             this.renderPixelValues(this.#map, this.#gtLayer)
-            this.applyColorToLayer(gtSource, 'density')
+            this.applyColorToLayer(gtSource, 'density') // Initial color for layer is density
+
             const opacityInput = this.shadowRoot?.getElementById(
                 'opacity-input'
             ) as HTMLInputElement | null
@@ -208,46 +188,6 @@ export default class TerraTimeAverageMap extends TerraElement {
         }
     }
 
-    renderPixelValues(map: Map, gtLayer: WebGLTileLayer) {
-        const pixelValueEl = this.shadowRoot?.getElementById('pixelValue')
-        const coordEl = this.shadowRoot?.getElementById('cursorCoordinates')
-
-        map.on('pointermove', (event: MapBrowserEvent) => {
-            const data = gtLayer.getData(event.pixel)
-            const coordinate = toLonLat(event.coordinate)
-            //TODO: Address type script error
-            // @ts-ignore
-            // Set pixel/coordinate display to N/A if the pixel values are zero or NaN
-            if (!data || isNaN(data[0]) || data[0] === 0) {
-                if (pixelValueEl) pixelValueEl.textContent = 'N/A'
-                if (coordEl) coordEl.textContent = 'N/A'
-                return
-            }
-            //TODO: Address type script error
-            // @ts-ignore
-            const val = Number(data[0]).toExponential(4)
-            const coordStr = coordinate.map(c => c.toFixed(3)).join(', ')
-
-            if (pixelValueEl) pixelValueEl.textContent = val
-            if (coordEl) coordEl.textContent = coordStr
-        })
-    }
-
-    // Referencing workshop example from https://openlayers.org/workshop/en/cog/colormap.html
-    getColorStops(name: any, min: any, max: any, steps: any, reverse: any) {
-        const delta = (max - min) / (steps - 1)
-        const stops = new Array(steps * 2)
-        const colors = colormap({ colormap: name, nshades: steps, format: 'rgba' })
-        if (reverse) {
-            colors.reverse()
-        }
-        for (let i = 0; i < steps; i++) {
-            stops[i * 2] = min + i * delta
-            stops[i * 2 + 1] = colors[i]
-        }
-        return stops
-    }
-
     intializeMap() {
         const baseLayer = new WebGLTileLayer({
             source: new OSM() as any,
@@ -265,30 +205,6 @@ export default class TerraTimeAverageMap extends TerraElement {
         })
     }
 
-    async getMinMax(gtSource: any) {
-        await gtSource.getView()
-        const gtImage = gtSource.sourceImagery_[0][0]
-
-        // read raster data from band 1
-        const rasterData = await gtImage.readRasters({ samples: [0] })
-        const pixels = rasterData[0]
-
-        let min = Infinity
-        let max = -Infinity
-
-        // Loop through pixels and get min and max values. This gives us a range to determine color mapping styling
-        for (let i = 0; i < pixels.length; i++) {
-            const val = pixels[i]
-            if (!isNaN(val)) {
-                // skip no-data pixels or NaN
-                if (val < min) min = val
-                if (val > max) max = val
-            }
-        }
-
-        return { min, max }
-    }
-
     async fetchGeotiffMetadata(
         gtSource: GeoTIFF
     ): Promise<{ [key: string]: string }> {
@@ -316,6 +232,73 @@ export default class TerraTimeAverageMap extends TerraElement {
         return dataObj
     }
 
+    renderPixelValues(map: Map, gtLayer: WebGLTileLayer) {
+        const pixelValueEl = this.shadowRoot?.getElementById('pixelValue')
+        const coordEl = this.shadowRoot?.getElementById('cursorCoordinates')
+
+        map.on('pointermove', (event: MapBrowserEvent) => {
+            const data = gtLayer.getData(event.pixel)
+            const coordinate = toLonLat(event.coordinate)
+
+            if (
+                !data ||
+                !(
+                    data instanceof Uint8Array ||
+                    data instanceof Uint8ClampedArray ||
+                    data instanceof Float32Array
+                ) ||
+                isNaN(data[0]) ||
+                data[0] === 0
+            ) {
+                if (pixelValueEl) pixelValueEl.textContent = 'N/A'
+                if (coordEl) coordEl.textContent = 'N/A'
+                return
+            }
+            const val = Number(data[0]).toExponential(4)
+            const coordStr = coordinate.map(c => c.toFixed(3)).join(', ')
+
+            if (pixelValueEl) pixelValueEl.textContent = val
+            if (coordEl) coordEl.textContent = coordStr
+        })
+    }
+    async getMinMax(gtSource: any) {
+        await gtSource.getView()
+        const gtImage = gtSource.sourceImagery_[0][0]
+
+        // read raster data from band 1
+        const rasterData = await gtImage.readRasters({ samples: [0] })
+        const pixels = rasterData[0]
+
+        let min = Infinity
+        let max = -Infinity
+
+        // Loop through pixels and get min and max values. This gives us a range to determine color mapping styling
+        for (let i = 0; i < pixels.length; i++) {
+            const val = pixels[i]
+            if (!isNaN(val)) {
+                // skip no-data pixels or NaN
+                if (val < min) min = val
+                if (val > max) max = val
+            }
+        }
+
+        return { min, max }
+    }
+    // Referencing workshop example from https://openlayers.org/workshop/en/cog/colormap.html
+    getColorStops(name: any, min: any, max: any, steps: any, reverse: any) {
+        const delta = (max - min) / (steps - 1)
+        const stops = new Array(steps * 2)
+        const colors = colormap({ colormap: name, nshades: steps, format: 'rgba' })
+        if (reverse) {
+            colors.reverse()
+        }
+        for (let i = 0; i < steps; i++) {
+            stops[i * 2] = min + i * delta
+            stops[i * 2 + 1] = colors[i]
+        }
+        return stops
+    }
+
     async applyColorToLayer(gtSource: any, color: String) {
         var { min, max } = await this.getMinMax(gtSource)
         let gtStyle = {
@@ -334,10 +317,9 @@ export default class TerraTimeAverageMap extends TerraElement {
 
         this.#gtLayer?.setStyle(gtStyle)
     }
-
     #onColorMapChange(event: Event) {
         const selectedColormap = (event.target as HTMLSelectElement).value
-        // Reapply the style with the new colormap
+        // Reapply the style with the new colormap to the layer
         if (this.#gtLayer && this.#gtLayer.getSource()) {
             this.applyColorToLayer(this.#gtLayer.getSource(), selectedColormap)
         }
@@ -360,33 +342,48 @@ export default class TerraTimeAverageMap extends TerraElement {
                     : html`<div class="spacer"></div>`
             )}
 
-            <!-- Display pixels/coordinate/opacity/colormap list in Map  -->
-            <div id="map"">
-              <div id="settings">
-                <div><strong>Value:</strong> <span id="pixelValue">N/A</span></div>
-                <div><strong>Lat,Lon:</strong> <span id="cursorCoordinates">N/A</span></div>
-                <div>
-                  <label>
-                    Layer opacity
-                    <input id="opacity-input" type="range" min="0" max="1" step="0.01" value="1" />
-                    <span id="opacity-output"></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>
+            <div id="map">
+                <!-- Settings for pixel value, coordinates, opacity, and colormap -->
+                <div id="settings">
+                    <div>
+                        <strong>Value:</strong> <span id="pixelValue">N/A</span>
+                    </div>
+                    <div>
+                        <strong>Coordinate: </strong>
+                        <span id="cursorCoordinates">N/A</span>
+                    </div>
+
+                    <label>
+                        Layer opacity
+                        <input
+                            id="opacity-input"
+                            type="range"
+                            min="0"
+                            max="1"
+                            step="0.01"
+                            value="1"
+                        />
+                        <span id="opacity-output"></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>
                 </div>
-              </div>
             </div>
         `
     }