@nasa-terra/components 0.0.66 → 0.0.68

package/cdn/chunks/{chunk.MOVW5G4G.js → chunk.37HJNI4K.js}

@@ -9,38 +9,38 @@ import {
 } from "./chunk.CUBZ2AR7.js";
 import {
   TimeAvgMapController
-} from "./chunk.2UIKXGCO.js";
+} from "./chunk.DUUVIZLI.js";
 import {
   time_average_map_styles_default
-} from "./chunk.LS7CBIGK.js";
+} from "./chunk.BBQJZ64A.js";
 import {
   TerraPlotToolbar
-} from "./chunk.FUKHJNAX.js";
+} from "./chunk.XQNQJ73Y.js";
 import {
   AuthController
-} from "./chunk.3MIPIE6V.js";
+} from "./chunk.A5QNIXR4.js";
 import {
   h
-} from "./chunk.EDY6YM3Y.js";
+} from "./chunk.EMLDT66I.js";
 import {
   GiovanniVariableCatalog
-} from "./chunk.E4Y3ZGGY.js";
+} from "./chunk.NDNXLJCK.js";
 import {
   h as h2
 } from "./chunk.3AZLGGEX.js";
 import {
   TerraButton
-} from "./chunk.5JKUUXXD.js";
+} from "./chunk.BXZG34AL.js";
 import {
   TerraIcon
-} from "./chunk.QJ4KM4TA.js";
+} from "./chunk.HVXUUXZ7.js";
 import {
   watch
 } from "./chunk.ZEDYVCUT.js";
 import {
   TerraElement,
   component_styles_default
-} from "./chunk.AOJTBQKP.js";
+} from "./chunk.WXFIXIOS.js";
 import {
   e,
   n,
@@ -56,6 +56,7 @@ import {
   __objRest,
   __privateAdd,
   __privateGet,
+  __privateMethod,
   __privateSet,
   __spreadProps,
   __spreadValues,
@@ -244,6 +245,181 @@ var require_find_tags_by_name = __commonJS({
   }
 });
 
+// node_modules/colormap/colorScale.js
+var require_colorScale = __commonJS({
+  "node_modules/colormap/colorScale.js"(exports14, module) {
+    init_dirname();
+    init_buffer();
+    init_process();
+    module.exports = {
+      "jet": [{ "index": 0, "rgb": [0, 0, 131] }, { "index": 0.125, "rgb": [0, 60, 170] }, { "index": 0.375, "rgb": [5, 255, 255] }, { "index": 0.625, "rgb": [255, 255, 0] }, { "index": 0.875, "rgb": [250, 0, 0] }, { "index": 1, "rgb": [128, 0, 0] }],
+      "hsv": [{ "index": 0, "rgb": [255, 0, 0] }, { "index": 0.169, "rgb": [253, 255, 2] }, { "index": 0.173, "rgb": [247, 255, 2] }, { "index": 0.337, "rgb": [0, 252, 4] }, { "index": 0.341, "rgb": [0, 252, 10] }, { "index": 0.506, "rgb": [1, 249, 255] }, { "index": 0.671, "rgb": [2, 0, 253] }, { "index": 0.675, "rgb": [8, 0, 253] }, { "index": 0.839, "rgb": [255, 0, 251] }, { "index": 0.843, "rgb": [255, 0, 245] }, { "index": 1, "rgb": [255, 0, 6] }],
+      "hot": [{ "index": 0, "rgb": [0, 0, 0] }, { "index": 0.3, "rgb": [230, 0, 0] }, { "index": 0.6, "rgb": [255, 210, 0] }, { "index": 1, "rgb": [255, 255, 255] }],
+      "spring": [{ "index": 0, "rgb": [255, 0, 255] }, { "index": 1, "rgb": [255, 255, 0] }],
+      "summer": [{ "index": 0, "rgb": [0, 128, 102] }, { "index": 1, "rgb": [255, 255, 102] }],
+      "autumn": [{ "index": 0, "rgb": [255, 0, 0] }, { "index": 1, "rgb": [255, 255, 0] }],
+      "winter": [{ "index": 0, "rgb": [0, 0, 255] }, { "index": 1, "rgb": [0, 255, 128] }],
+      "bone": [{ "index": 0, "rgb": [0, 0, 0] }, { "index": 0.376, "rgb": [84, 84, 116] }, { "index": 0.753, "rgb": [169, 200, 200] }, { "index": 1, "rgb": [255, 255, 255] }],
+      "copper": [{ "index": 0, "rgb": [0, 0, 0] }, { "index": 0.804, "rgb": [255, 160, 102] }, { "index": 1, "rgb": [255, 199, 127] }],
+      "greys": [{ "index": 0, "rgb": [0, 0, 0] }, { "index": 1, "rgb": [255, 255, 255] }],
+      "yignbu": [{ "index": 0, "rgb": [8, 29, 88] }, { "index": 0.125, "rgb": [37, 52, 148] }, { "index": 0.25, "rgb": [34, 94, 168] }, { "index": 0.375, "rgb": [29, 145, 192] }, { "index": 0.5, "rgb": [65, 182, 196] }, { "index": 0.625, "rgb": [127, 205, 187] }, { "index": 0.75, "rgb": [199, 233, 180] }, { "index": 0.875, "rgb": [237, 248, 217] }, { "index": 1, "rgb": [255, 255, 217] }],
+      "greens": [{ "index": 0, "rgb": [0, 68, 27] }, { "index": 0.125, "rgb": [0, 109, 44] }, { "index": 0.25, "rgb": [35, 139, 69] }, { "index": 0.375, "rgb": [65, 171, 93] }, { "index": 0.5, "rgb": [116, 196, 118] }, { "index": 0.625, "rgb": [161, 217, 155] }, { "index": 0.75, "rgb": [199, 233, 192] }, { "index": 0.875, "rgb": [229, 245, 224] }, { "index": 1, "rgb": [247, 252, 245] }],
+      "yiorrd": [{ "index": 0, "rgb": [128, 0, 38] }, { "index": 0.125, "rgb": [189, 0, 38] }, { "index": 0.25, "rgb": [227, 26, 28] }, { "index": 0.375, "rgb": [252, 78, 42] }, { "index": 0.5, "rgb": [253, 141, 60] }, { "index": 0.625, "rgb": [254, 178, 76] }, { "index": 0.75, "rgb": [254, 217, 118] }, { "index": 0.875, "rgb": [255, 237, 160] }, { "index": 1, "rgb": [255, 255, 204] }],
+      "bluered": [{ "index": 0, "rgb": [0, 0, 255] }, { "index": 1, "rgb": [255, 0, 0] }],
+      "rdbu": [{ "index": 0, "rgb": [5, 10, 172] }, { "index": 0.35, "rgb": [106, 137, 247] }, { "index": 0.5, "rgb": [190, 190, 190] }, { "index": 0.6, "rgb": [220, 170, 132] }, { "index": 0.7, "rgb": [230, 145, 90] }, { "index": 1, "rgb": [178, 10, 28] }],
+      "picnic": [{ "index": 0, "rgb": [0, 0, 255] }, { "index": 0.1, "rgb": [51, 153, 255] }, { "index": 0.2, "rgb": [102, 204, 255] }, { "index": 0.3, "rgb": [153, 204, 255] }, { "index": 0.4, "rgb": [204, 204, 255] }, { "index": 0.5, "rgb": [255, 255, 255] }, { "index": 0.6, "rgb": [255, 204, 255] }, { "index": 0.7, "rgb": [255, 153, 255] }, { "index": 0.8, "rgb": [255, 102, 204] }, { "index": 0.9, "rgb": [255, 102, 102] }, { "index": 1, "rgb": [255, 0, 0] }],
+      "rainbow": [{ "index": 0, "rgb": [150, 0, 90] }, { "index": 0.125, "rgb": [0, 0, 200] }, { "index": 0.25, "rgb": [0, 25, 255] }, { "index": 0.375, "rgb": [0, 152, 255] }, { "index": 0.5, "rgb": [44, 255, 150] }, { "index": 0.625, "rgb": [151, 255, 0] }, { "index": 0.75, "rgb": [255, 234, 0] }, { "index": 0.875, "rgb": [255, 111, 0] }, { "index": 1, "rgb": [255, 0, 0] }],
+      "portland": [{ "index": 0, "rgb": [12, 51, 131] }, { "index": 0.25, "rgb": [10, 136, 186] }, { "index": 0.5, "rgb": [242, 211, 56] }, { "index": 0.75, "rgb": [242, 143, 56] }, { "index": 1, "rgb": [217, 30, 30] }],
+      "blackbody": [{ "index": 0, "rgb": [0, 0, 0] }, { "index": 0.2, "rgb": [230, 0, 0] }, { "index": 0.4, "rgb": [230, 210, 0] }, { "index": 0.7, "rgb": [255, 255, 255] }, { "index": 1, "rgb": [160, 200, 255] }],
+      "earth": [{ "index": 0, "rgb": [0, 0, 130] }, { "index": 0.1, "rgb": [0, 180, 180] }, { "index": 0.2, "rgb": [40, 210, 40] }, { "index": 0.4, "rgb": [230, 230, 50] }, { "index": 0.6, "rgb": [120, 70, 20] }, { "index": 1, "rgb": [255, 255, 255] }],
+      "electric": [{ "index": 0, "rgb": [0, 0, 0] }, { "index": 0.15, "rgb": [30, 0, 100] }, { "index": 0.4, "rgb": [120, 0, 100] }, { "index": 0.6, "rgb": [160, 90, 0] }, { "index": 0.8, "rgb": [230, 200, 0] }, { "index": 1, "rgb": [255, 250, 220] }],
+      "alpha": [{ "index": 0, "rgb": [255, 255, 255, 0] }, { "index": 1, "rgb": [255, 255, 255, 1] }],
+      "viridis": [{ "index": 0, "rgb": [68, 1, 84] }, { "index": 0.13, "rgb": [71, 44, 122] }, { "index": 0.25, "rgb": [59, 81, 139] }, { "index": 0.38, "rgb": [44, 113, 142] }, { "index": 0.5, "rgb": [33, 144, 141] }, { "index": 0.63, "rgb": [39, 173, 129] }, { "index": 0.75, "rgb": [92, 200, 99] }, { "index": 0.88, "rgb": [170, 220, 50] }, { "index": 1, "rgb": [253, 231, 37] }],
+      "inferno": [{ "index": 0, "rgb": [0, 0, 4] }, { "index": 0.13, "rgb": [31, 12, 72] }, { "index": 0.25, "rgb": [85, 15, 109] }, { "index": 0.38, "rgb": [136, 34, 106] }, { "index": 0.5, "rgb": [186, 54, 85] }, { "index": 0.63, "rgb": [227, 89, 51] }, { "index": 0.75, "rgb": [249, 140, 10] }, { "index": 0.88, "rgb": [249, 201, 50] }, { "index": 1, "rgb": [252, 255, 164] }],
+      "magma": [{ "index": 0, "rgb": [0, 0, 4] }, { "index": 0.13, "rgb": [28, 16, 68] }, { "index": 0.25, "rgb": [79, 18, 123] }, { "index": 0.38, "rgb": [129, 37, 129] }, { "index": 0.5, "rgb": [181, 54, 122] }, { "index": 0.63, "rgb": [229, 80, 100] }, { "index": 0.75, "rgb": [251, 135, 97] }, { "index": 0.88, "rgb": [254, 194, 135] }, { "index": 1, "rgb": [252, 253, 191] }],
+      "plasma": [{ "index": 0, "rgb": [13, 8, 135] }, { "index": 0.13, "rgb": [75, 3, 161] }, { "index": 0.25, "rgb": [125, 3, 168] }, { "index": 0.38, "rgb": [168, 34, 150] }, { "index": 0.5, "rgb": [203, 70, 121] }, { "index": 0.63, "rgb": [229, 107, 93] }, { "index": 0.75, "rgb": [248, 148, 65] }, { "index": 0.88, "rgb": [253, 195, 40] }, { "index": 1, "rgb": [240, 249, 33] }],
+      "warm": [{ "index": 0, "rgb": [125, 0, 179] }, { "index": 0.13, "rgb": [172, 0, 187] }, { "index": 0.25, "rgb": [219, 0, 170] }, { "index": 0.38, "rgb": [255, 0, 130] }, { "index": 0.5, "rgb": [255, 63, 74] }, { "index": 0.63, "rgb": [255, 123, 0] }, { "index": 0.75, "rgb": [234, 176, 0] }, { "index": 0.88, "rgb": [190, 228, 0] }, { "index": 1, "rgb": [147, 255, 0] }],
+      "cool": [{ "index": 0, "rgb": [125, 0, 179] }, { "index": 0.13, "rgb": [116, 0, 218] }, { "index": 0.25, "rgb": [98, 74, 237] }, { "index": 0.38, "rgb": [68, 146, 231] }, { "index": 0.5, "rgb": [0, 204, 197] }, { "index": 0.63, "rgb": [0, 247, 146] }, { "index": 0.75, "rgb": [0, 255, 88] }, { "index": 0.88, "rgb": [40, 255, 8] }, { "index": 1, "rgb": [147, 255, 0] }],
+      "rainbow-soft": [{ "index": 0, "rgb": [125, 0, 179] }, { "index": 0.1, "rgb": [199, 0, 180] }, { "index": 0.2, "rgb": [255, 0, 121] }, { "index": 0.3, "rgb": [255, 108, 0] }, { "index": 0.4, "rgb": [222, 194, 0] }, { "index": 0.5, "rgb": [150, 255, 0] }, { "index": 0.6, "rgb": [0, 255, 55] }, { "index": 0.7, "rgb": [0, 246, 150] }, { "index": 0.8, "rgb": [50, 167, 222] }, { "index": 0.9, "rgb": [103, 51, 235] }, { "index": 1, "rgb": [124, 0, 186] }],
+      "bathymetry": [{ "index": 0, "rgb": [40, 26, 44] }, { "index": 0.13, "rgb": [59, 49, 90] }, { "index": 0.25, "rgb": [64, 76, 139] }, { "index": 0.38, "rgb": [63, 110, 151] }, { "index": 0.5, "rgb": [72, 142, 158] }, { "index": 0.63, "rgb": [85, 174, 163] }, { "index": 0.75, "rgb": [120, 206, 163] }, { "index": 0.88, "rgb": [187, 230, 172] }, { "index": 1, "rgb": [253, 254, 204] }],
+      "cdom": [{ "index": 0, "rgb": [47, 15, 62] }, { "index": 0.13, "rgb": [87, 23, 86] }, { "index": 0.25, "rgb": [130, 28, 99] }, { "index": 0.38, "rgb": [171, 41, 96] }, { "index": 0.5, "rgb": [206, 67, 86] }, { "index": 0.63, "rgb": [230, 106, 84] }, { "index": 0.75, "rgb": [242, 149, 103] }, { "index": 0.88, "rgb": [249, 193, 135] }, { "index": 1, "rgb": [254, 237, 176] }],
+      "chlorophyll": [{ "index": 0, "rgb": [18, 36, 20] }, { "index": 0.13, "rgb": [25, 63, 41] }, { "index": 0.25, "rgb": [24, 91, 59] }, { "index": 0.38, "rgb": [13, 119, 72] }, { "index": 0.5, "rgb": [18, 148, 80] }, { "index": 0.63, "rgb": [80, 173, 89] }, { "index": 0.75, "rgb": [132, 196, 122] }, { "index": 0.88, "rgb": [175, 221, 162] }, { "index": 1, "rgb": [215, 249, 208] }],
+      "density": [{ "index": 0, "rgb": [54, 14, 36] }, { "index": 0.13, "rgb": [89, 23, 80] }, { "index": 0.25, "rgb": [110, 45, 132] }, { "index": 0.38, "rgb": [120, 77, 178] }, { "index": 0.5, "rgb": [120, 113, 213] }, { "index": 0.63, "rgb": [115, 151, 228] }, { "index": 0.75, "rgb": [134, 185, 227] }, { "index": 0.88, "rgb": [177, 214, 227] }, { "index": 1, "rgb": [230, 241, 241] }],
+      "freesurface-blue": [{ "index": 0, "rgb": [30, 4, 110] }, { "index": 0.13, "rgb": [47, 14, 176] }, { "index": 0.25, "rgb": [41, 45, 236] }, { "index": 0.38, "rgb": [25, 99, 212] }, { "index": 0.5, "rgb": [68, 131, 200] }, { "index": 0.63, "rgb": [114, 156, 197] }, { "index": 0.75, "rgb": [157, 181, 203] }, { "index": 0.88, "rgb": [200, 208, 216] }, { "index": 1, "rgb": [241, 237, 236] }],
+      "freesurface-red": [{ "index": 0, "rgb": [60, 9, 18] }, { "index": 0.13, "rgb": [100, 17, 27] }, { "index": 0.25, "rgb": [142, 20, 29] }, { "index": 0.38, "rgb": [177, 43, 27] }, { "index": 0.5, "rgb": [192, 87, 63] }, { "index": 0.63, "rgb": [205, 125, 105] }, { "index": 0.75, "rgb": [216, 162, 148] }, { "index": 0.88, "rgb": [227, 199, 193] }, { "index": 1, "rgb": [241, 237, 236] }],
+      "oxygen": [{ "index": 0, "rgb": [64, 5, 5] }, { "index": 0.13, "rgb": [106, 6, 15] }, { "index": 0.25, "rgb": [144, 26, 7] }, { "index": 0.38, "rgb": [168, 64, 3] }, { "index": 0.5, "rgb": [188, 100, 4] }, { "index": 0.63, "rgb": [206, 136, 11] }, { "index": 0.75, "rgb": [220, 174, 25] }, { "index": 0.88, "rgb": [231, 215, 44] }, { "index": 1, "rgb": [248, 254, 105] }],
+      "par": [{ "index": 0, "rgb": [51, 20, 24] }, { "index": 0.13, "rgb": [90, 32, 35] }, { "index": 0.25, "rgb": [129, 44, 34] }, { "index": 0.38, "rgb": [159, 68, 25] }, { "index": 0.5, "rgb": [182, 99, 19] }, { "index": 0.63, "rgb": [199, 134, 22] }, { "index": 0.75, "rgb": [212, 171, 35] }, { "index": 0.88, "rgb": [221, 210, 54] }, { "index": 1, "rgb": [225, 253, 75] }],
+      "phase": [{ "index": 0, "rgb": [145, 105, 18] }, { "index": 0.13, "rgb": [184, 71, 38] }, { "index": 0.25, "rgb": [186, 58, 115] }, { "index": 0.38, "rgb": [160, 71, 185] }, { "index": 0.5, "rgb": [110, 97, 218] }, { "index": 0.63, "rgb": [50, 123, 164] }, { "index": 0.75, "rgb": [31, 131, 110] }, { "index": 0.88, "rgb": [77, 129, 34] }, { "index": 1, "rgb": [145, 105, 18] }],
+      "salinity": [{ "index": 0, "rgb": [42, 24, 108] }, { "index": 0.13, "rgb": [33, 50, 162] }, { "index": 0.25, "rgb": [15, 90, 145] }, { "index": 0.38, "rgb": [40, 118, 137] }, { "index": 0.5, "rgb": [59, 146, 135] }, { "index": 0.63, "rgb": [79, 175, 126] }, { "index": 0.75, "rgb": [120, 203, 104] }, { "index": 0.88, "rgb": [193, 221, 100] }, { "index": 1, "rgb": [253, 239, 154] }],
+      "temperature": [{ "index": 0, "rgb": [4, 35, 51] }, { "index": 0.13, "rgb": [23, 51, 122] }, { "index": 0.25, "rgb": [85, 59, 157] }, { "index": 0.38, "rgb": [129, 79, 143] }, { "index": 0.5, "rgb": [175, 95, 130] }, { "index": 0.63, "rgb": [222, 112, 101] }, { "index": 0.75, "rgb": [249, 146, 66] }, { "index": 0.88, "rgb": [249, 196, 65] }, { "index": 1, "rgb": [232, 250, 91] }],
+      "turbidity": [{ "index": 0, "rgb": [34, 31, 27] }, { "index": 0.13, "rgb": [65, 50, 41] }, { "index": 0.25, "rgb": [98, 69, 52] }, { "index": 0.38, "rgb": [131, 89, 57] }, { "index": 0.5, "rgb": [161, 112, 59] }, { "index": 0.63, "rgb": [185, 140, 66] }, { "index": 0.75, "rgb": [202, 174, 88] }, { "index": 0.88, "rgb": [216, 209, 126] }, { "index": 1, "rgb": [233, 246, 171] }],
+      "velocity-blue": [{ "index": 0, "rgb": [17, 32, 64] }, { "index": 0.13, "rgb": [35, 52, 116] }, { "index": 0.25, "rgb": [29, 81, 156] }, { "index": 0.38, "rgb": [31, 113, 162] }, { "index": 0.5, "rgb": [50, 144, 169] }, { "index": 0.63, "rgb": [87, 173, 176] }, { "index": 0.75, "rgb": [149, 196, 189] }, { "index": 0.88, "rgb": [203, 221, 211] }, { "index": 1, "rgb": [254, 251, 230] }],
+      "velocity-green": [{ "index": 0, "rgb": [23, 35, 19] }, { "index": 0.13, "rgb": [24, 64, 38] }, { "index": 0.25, "rgb": [11, 95, 45] }, { "index": 0.38, "rgb": [39, 123, 35] }, { "index": 0.5, "rgb": [95, 146, 12] }, { "index": 0.63, "rgb": [152, 165, 18] }, { "index": 0.75, "rgb": [201, 186, 69] }, { "index": 0.88, "rgb": [233, 216, 137] }, { "index": 1, "rgb": [255, 253, 205] }],
+      "cubehelix": [{ "index": 0, "rgb": [0, 0, 0] }, { "index": 0.07, "rgb": [22, 5, 59] }, { "index": 0.13, "rgb": [60, 4, 105] }, { "index": 0.2, "rgb": [109, 1, 135] }, { "index": 0.27, "rgb": [161, 0, 147] }, { "index": 0.33, "rgb": [210, 2, 142] }, { "index": 0.4, "rgb": [251, 11, 123] }, { "index": 0.47, "rgb": [255, 29, 97] }, { "index": 0.53, "rgb": [255, 54, 69] }, { "index": 0.6, "rgb": [255, 85, 46] }, { "index": 0.67, "rgb": [255, 120, 34] }, { "index": 0.73, "rgb": [255, 157, 37] }, { "index": 0.8, "rgb": [241, 191, 57] }, { "index": 0.87, "rgb": [224, 220, 93] }, { "index": 0.93, "rgb": [218, 241, 142] }, { "index": 1, "rgb": [227, 253, 198] }]
+    };
+  }
+});
+
+// node_modules/lerp/index.js
+var require_lerp = __commonJS({
+  "node_modules/lerp/index.js"(exports14, module) {
+    init_dirname();
+    init_buffer();
+    init_process();
+    function lerp3(v0, v1, t5) {
+      return v0 * (1 - t5) + v1 * t5;
+    }
+    module.exports = lerp3;
+  }
+});
+
+// node_modules/colormap/index.js
+var require_colormap = __commonJS({
+  "node_modules/colormap/index.js"(exports14, module) {
+    "use strict";
+    init_dirname();
+    init_buffer();
+    init_process();
+    var colorScale = require_colorScale();
+    var lerp3 = require_lerp();
+    module.exports = createColormap;
+    function createColormap(spec) {
+      var indicies, fromrgba, torgba, nsteps, cmap, colormap2, format2, nshades, colors, alpha, i5;
+      if (!spec)
+        spec = {};
+      nshades = (spec.nshades || 72) - 1;
+      format2 = spec.format || "hex";
+      colormap2 = spec.colormap;
+      if (!colormap2)
+        colormap2 = "jet";
+      if (typeof colormap2 === "string") {
+        colormap2 = colormap2.toLowerCase();
+        if (!colorScale[colormap2]) {
+          throw Error(colormap2 + " not a supported colorscale");
+        }
+        cmap = colorScale[colormap2];
+      } else if (Array.isArray(colormap2)) {
+        cmap = colormap2.slice();
+      } else {
+        throw Error("unsupported colormap option", colormap2);
+      }
+      if (cmap.length > nshades + 1) {
+        throw new Error(
+          colormap2 + " map requires nshades to be at least size " + cmap.length
+        );
+      }
+      if (!Array.isArray(spec.alpha)) {
+        if (typeof spec.alpha === "number") {
+          alpha = [spec.alpha, spec.alpha];
+        } else {
+          alpha = [1, 1];
+        }
+      } else if (spec.alpha.length !== 2) {
+        alpha = [1, 1];
+      } else {
+        alpha = spec.alpha.slice();
+      }
+      indicies = cmap.map(function(c5) {
+        return Math.round(c5.index * nshades);
+      });
+      alpha[0] = Math.min(Math.max(alpha[0], 0), 1);
+      alpha[1] = Math.min(Math.max(alpha[1], 0), 1);
+      var steps = cmap.map(function(c5, i6) {
+        var index = cmap[i6].index;
+        var rgba = cmap[i6].rgb.slice();
+        if (rgba.length === 4 && rgba[3] >= 0 && rgba[3] <= 1) {
+          return rgba;
+        }
+        rgba[3] = alpha[0] + (alpha[1] - alpha[0]) * index;
+        return rgba;
+      });
+      var colors = [];
+      for (i5 = 0; i5 < indicies.length - 1; ++i5) {
+        nsteps = indicies[i5 + 1] - indicies[i5];
+        fromrgba = steps[i5];
+        torgba = steps[i5 + 1];
+        for (var j3 = 0; j3 < nsteps; j3++) {
+          var amt = j3 / nsteps;
+          colors.push([
+            Math.round(lerp3(fromrgba[0], torgba[0], amt)),
+            Math.round(lerp3(fromrgba[1], torgba[1], amt)),
+            Math.round(lerp3(fromrgba[2], torgba[2], amt)),
+            lerp3(fromrgba[3], torgba[3], amt)
+          ]);
+        }
+      }
+      colors.push(cmap[cmap.length - 1].rgb.concat(alpha[1]));
+      if (format2 === "hex")
+        colors = colors.map(rgb2hex);
+      else if (format2 === "rgbaString")
+        colors = colors.map(rgbaStr);
+      else if (format2 === "float")
+        colors = colors.map(rgb2float);
+      return colors;
+    }
+    function rgb2float(rgba) {
+      return [
+        rgba[0] / 255,
+        rgba[1] / 255,
+        rgba[2] / 255,
+        rgba[3]
+      ];
+    }
+    function rgb2hex(rgba) {
+      var dig, hex = "#";
+      for (var i5 = 0; i5 < 3; ++i5) {
+        dig = rgba[i5];
+        dig = dig.toString(16);
+        hex += ("00" + dig).substr(dig.length);
+      }
+      return hex;
+    }
+    function rgbaStr(rgba) {
+      return "rgba(" + rgba.join(",") + ")";
+    }
+  }
+});
+
 // src/components/time-average-map/time-average-map.component.ts
 init_dirname();
 init_buffer();
@@ -2510,6 +2686,18 @@ function createTransformFromCoordinateTransform(coordTransform) {
     }
   );
 }
+function toLonLat2(coordinate, projection) {
+  const lonLat = transform(
+    coordinate,
+    projection !== void 0 ? projection : "EPSG:3857",
+    "EPSG:4326"
+  );
+  const lon = lonLat[0];
+  if (lon < -180 || lon > 180) {
+    lonLat[0] = modulo(lon + 180, 360) - 180;
+  }
+  return lonLat;
+}
 function equivalent(projection1, projection2) {
   if (projection1 === projection2) {
     return true;
@@ -45477,11 +45665,59 @@ GeoTIFFSource.prototype.getView;
 var GeoTIFF_default = GeoTIFFSource;
 
 // src/components/time-average-map/time-average-map.component.ts
-var _controller, _catalog, _map, _gtLayer;
+var import_colormap = __toESM(require_colormap(), 1);
+var _controller, _catalog, _map, _gtLayer, _onColorMapChange, onColorMapChange_fn;
 var TerraTimeAverageMap = class extends TerraElement {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _onColorMapChange);
     this.activeMenuItem = null;
+    this.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"
+    ];
+    this.colorMapName = "density";
     this.long_name = "";
     __privateAdd(this, _controller, void 0);
     __privateAdd(this, _catalog, new GiovanniVariableCatalog());
@@ -45525,7 +45761,7 @@ var TerraTimeAverageMap = class extends TerraElement {
     this.updateGeoTIFFLayer();
   }
   async updateGeoTIFFLayer() {
-    var _a;
+    var _a, _b, _c;
     await __privateGet(this, _controller).jobStatusTask.run();
     let job_status_value = __privateGet(this, _controller).jobStatusTask.value;
     const blobUrl = URL.createObjectURL(job_status_value);
@@ -45548,6 +45784,63 @@ var TerraTimeAverageMap = class extends TerraElement {
     }
     const metadata = await this.fetchGeotiffMetadata(gtSource);
     this.long_name = (_a = metadata["long_name"]) != null ? _a : "";
+    if (__privateGet(this, _map) && __privateGet(this, _gtLayer)) {
+      this.renderPixelValues(__privateGet(this, _map), __privateGet(this, _gtLayer));
+      this.applyColorToLayer(gtSource, "density");
+      const opacityInput = (_b = this.shadowRoot) == null ? void 0 : _b.getElementById(
+        "opacity-input"
+      );
+      const opacityOutput = (_c = this.shadowRoot) == null ? void 0 : _c.getElementById(
+        "opacity-output"
+      );
+      if (opacityInput && opacityOutput) {
+        const updateOpacity = () => {
+          const opacity = parseFloat(opacityInput.value);
+          if (__privateGet(this, _gtLayer)) {
+            __privateGet(this, _gtLayer).setOpacity(opacity);
+          }
+          opacityOutput.innerText = opacity.toFixed(2);
+        };
+        opacityInput.addEventListener("input", updateOpacity);
+        updateOpacity();
+      }
+    }
+  }
+  renderPixelValues(map, gtLayer) {
+    var _a, _b;
+    const pixelValueEl = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById("pixelValue");
+    const coordEl = (_b = this.shadowRoot) == null ? void 0 : _b.getElementById("cursorCoordinates");
+    map.on("pointermove", (event) => {
+      const data = gtLayer.getData(event.pixel);
+      const coordinate = toLonLat2(event.coordinate);
+      if (!data || 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((c5) => c5.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(name2, min, max, steps, reverse) {
+    const delta = (max - min) / (steps - 1);
+    const stops = new Array(steps * 2);
+    const colors = (0, import_colormap.default)({ colormap: name2, nshades: steps, format: "rgba" });
+    if (reverse) {
+      colors.reverse();
+    }
+    for (let i5 = 0; i5 < steps; i5++) {
+      stops[i5 * 2] = min + i5 * delta;
+      stops[i5 * 2 + 1] = colors[i5];
+    }
+    return stops;
   }
   intializeMap() {
     var _a, _b;
@@ -45561,9 +45854,28 @@ var TerraTimeAverageMap = class extends TerraElement {
         center: [0, 0],
         zoom: 2,
         projection: "EPSG:3857"
-      })
+      }),
+      controls: []
     }));
   }
+  async getMinMax(gtSource) {
+    await gtSource.getView();
+    const gtImage = gtSource.sourceImagery_[0][0];
+    const rasterData = await gtImage.readRasters({ samples: [0] });
+    const pixels = rasterData[0];
+    let min = Infinity;
+    let max = -Infinity;
+    for (let i5 = 0; i5 < pixels.length; i5++) {
+      const val = pixels[i5];
+      if (!isNaN(val)) {
+        if (val < min)
+          min = val;
+        if (val > max)
+          max = val;
+      }
+    }
+    return { min, max };
+  }
   async fetchGeotiffMetadata(gtSource) {
     var _a;
     await gtSource.getView();
@@ -45585,6 +45897,24 @@ var TerraTimeAverageMap = class extends TerraElement {
     console.log("Data obj: ", dataObj);
     return dataObj;
   }
+  async applyColorToLayer(gtSource, color) {
+    var _a;
+    var { min, max } = await this.getMinMax(gtSource);
+    let gtStyle = {
+      color: [
+        "case",
+        ["==", ["band", 2], 0],
+        [0, 0, 0, 0],
+        [
+          "interpolate",
+          ["linear"],
+          ["band", 1],
+          ...this.getColorStops(color, min, max, 72, false)
+        ]
+      ]
+    };
+    (_a = __privateGet(this, _gtLayer)) == null ? void 0 : _a.setStyle(gtStyle);
+  }
   getVariableEntryId() {
     if (!this.collection || !this.variable) {
       return;
@@ -45607,7 +45937,33 @@ var TerraTimeAverageMap = class extends TerraElement {
                       ></terra-plot-toolbar>` : x`<div class="spacer"></div>`
     )}
 
-            <div id="map"></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=${__privateMethod(this, _onColorMapChange, onColorMapChange_fn)}>
+                      ${this.colormaps.map(
+      (cm) => x` <option
+                                  value="${cm}"
+                                  ?selected=${cm === this.colorMapName}
+                              >
+                                  ${cm}
+                              </option>`
+    )}
+                    </select>
+                    </label>
+                </div>
+              </div>
+            </div>
         `;
   }
 };
@@ -45615,6 +45971,13 @@ _controller = new WeakMap();
 _catalog = new WeakMap();
 _map = new WeakMap();
 _gtLayer = new WeakMap();
+_onColorMapChange = new WeakSet();
+onColorMapChange_fn = function(event) {
+  const selectedColormap = event.target.value;
+  if (__privateGet(this, _gtLayer) && __privateGet(this, _gtLayer).getSource()) {
+    this.applyColorToLayer(__privateGet(this, _gtLayer).getSource(), selectedColormap);
+  }
+};
 TerraTimeAverageMap.styles = [component_styles_default, time_average_map_styles_default];
 TerraTimeAverageMap.dependencies = {
   "terra-button": TerraButton,
@@ -45647,6 +46010,12 @@ __decorateClass([
 __decorateClass([
   r()
 ], TerraTimeAverageMap.prototype, "activeMenuItem", 2);
+__decorateClass([
+  r()
+], TerraTimeAverageMap.prototype, "colormaps", 2);
+__decorateClass([
+  r()
+], TerraTimeAverageMap.prototype, "colorMapName", 2);
 __decorateClass([
   watch("activeMenuItem")
 ], TerraTimeAverageMap.prototype, "handleFocus", 1);

package/cdn/chunks/chunk.3GLMJLNY.js

@@ -0,0 +1,139 @@
+// src/components/loader/loader.styles.ts
+import { css } from "lit";
+var loader_styles_default = css`
+    :host {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100px;
+    }
+
+    .loader {
+        position: relative;
+        width: var(--size);
+        height: var(--size);
+    }
+
+    /* Loader variations */
+
+    .loader--large {
+        --size: 52px;
+        --stroke-width: 3.5px;
+    }
+
+    .loader--small {
+        --size: 30px;
+        --stroke-width: 3.5px;
+    }
+
+    .loader--orbit {
+        --size: 100px;
+    }
+
+    .planet {
+        fill: var(--terra-color-carbon-20);
+        cx: 80px;
+        cy: 80px;
+        r: 50px;
+    }
+
+    .moon {
+        fill: var(--terra-color-nasa-blue);
+        r: 5.5px;
+    }
+
+    #orbit {
+        /* total length of orbit ellipse = 298.2393493652344 */
+        stroke: var(--terra-color-nasa-blue);
+        stroke-width: 2.5px;
+        stroke-dasharray: 250 48;
+        fill: none;
+    }
+
+    svg {
+        width: var(--size);
+        height: var(--size);
+    }
+
+    .percent {
+        display: block;
+        width: var(--size);
+        position: absolute;
+        top: calc((var(--size) / 2) - 10px);
+        padding-left: 4px;
+        letter-spacing: 0.1rem;
+        text-align: center;
+    }
+
+    .circular-progress {
+        --progress: 0; /* added this so I can try to reference it and change the value. This value drives the rest of the calcultations */
+        --half-size: calc(var(--size) / 2);
+        --radius: calc((var(--size) - var(--stroke-width)) / 2);
+        --circumference: calc(var(--radius) * pi * 2);
+        --dash: calc(
+            (var(--progress) * var(--circumference)) / 100
+        ); /* Calculate the length of the dash based on the progress percentage */
+        --indeterminate-dash: calc(
+            (25 * var(--circumference)) / 100
+        ); /* force progress to 25% for an indeterminate loader */
+    }
+
+    .circular-progress circle {
+        cx: var(--half-size);
+        cy: var(--half-size);
+        r: var(--radius);
+        stroke-width: var(--stroke-width);
+        fill: none;
+        stroke-linecap: round;
+    }
+
+    .circular-progress circle.bg {
+        stroke: var(--terra-color-carbon-20);
+    }
+
+    .circular-progress circle.fg {
+        transform: rotate(-90deg);
+        transform-origin: var(--half-size) var(--half-size);
+        stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
+        transition: stroke-dasharray 0.3s linear 0s; /* Defines how --dash value changes to stroke-dasharray are animated */
+        stroke: var(--terra-color-nasa-blue);
+    }
+
+    .circular-progress.indeterminate circle.fg {
+        stroke-dasharray: var(--indeterminate-dash)
+            calc(var(--circumference) - var(--indeterminate-dash));
+        animation: 0.8s spin infinite;
+        animation-timing-function: linear;
+        transform-origin: 50% 50%;
+    }
+
+    @keyframes dash {
+        from {
+            stroke-dashoffset: 300;
+        }
+        to {
+            stroke-dashoffset: 0;
+        }
+    }
+
+    @keyframes spin {
+        from {
+            transform: rotate(-90deg);
+        }
+
+        to {
+            transform: rotate(270deg);
+        }
+    }
+
+    @property --progress {
+        /* Registers and describes the custom property and variable with the browser. */
+        syntax: '<number>';
+        inherits: false;
+        initial-value: 0;
+    }
+`;
+
+export {
+  loader_styles_default
+};