fix viewer

Author: vincentsarago

.github/workflows/ci.yml

@@ -229,8 +229,8 @@ jobs:
           python -m pip install -r requirements.txt
 
       # Let's wait a bit to make sure package is available on pypi
-      - name: Sleep for 60 seconds
-        run: sleep 60s
+      - name: Sleep for 120 seconds
+        run: sleep 120s
         shell: bash
 
       # Build and Deploy CDK application

CHANGES.md

@@ -1,9 +1,15 @@
 # Release Notes
 
-## 0.9.1 (2022-12-08)
+## Next
+
+### titiler.core
 
 * fix the `wmts.xml` template to work with non-epsg based CRS
 
+### titiler.application
+
+* fix titiler.application viewer when using dataset with band name in metadata
+
 ## 0.9.0 (2022-12-05)
 
 ### titiler.core

src/titiler/application/titiler/application/templates/cog_index.html

@@ -405,9 +405,9 @@
 }
 
 const addHisto3Bands = () => {
-  const r = document.getElementById('r-selector').selectedOptions[0].getAttribute("name")
-  const g = document.getElementById('g-selector').selectedOptions[0].getAttribute("name")
-  const b = document.getElementById('b-selector').selectedOptions[0].getAttribute("name")
+  const r = document.getElementById('r-selector').selectedOptions[0].getAttribute("bname")
+  const g = document.getElementById('g-selector').selectedOptions[0].getAttribute("bname")
+  const b = document.getElementById('b-selector').selectedOptions[0].getAttribute("bname")
 
   const rStats = scope.dataset_statistics[r]
   const gStats = scope.dataset_statistics[g]
@@ -520,7 +520,7 @@
 }
 
 const addHisto1Band = () => {
-  const stats = scope.dataset_statistics[document.getElementById('layer-selector').selectedOptions[0].getAttribute("name")]
+  const stats = scope.dataset_statistics[document.getElementById('layer-selector').selectedOptions[0].getAttribute("bname")]
 
   let counts = stats.histogram[0]
   const sum = counts.reduce(function(a, b){
@@ -743,9 +743,8 @@
       for (var i = 0; i < nbands; i++) {
         let l = document.createElement('option')
         l.setAttribute('bidx', i + 1)
-        let name = band_descr[i][1] || band_descr[i][0]
-        l.setAttribute('name', name)
-        l.text = name
+        l.setAttribute('bname', band_descr[i][0])
+        l.text = band_descr[i][1] || band_descr[i][0]
         layerList.appendChild(l)
       }
 
@@ -754,9 +753,8 @@
       for (var i = 0; i < nbands; i++) {
         let l = document.createElement('option')
         l.setAttribute('bidx', i + 1)
-        let name = band_descr[i][1] || band_descr[i][0]
-        l.setAttribute('name', name)
-        l.text = name
+        l.setAttribute('bname', band_descr[i][0])
+        l.text = band_descr[i][1] || band_descr[i][0]
         if (i === 0) l.selected="selected"
         rList.appendChild(l)
       }
@@ -765,9 +763,8 @@
       for (var i = 0; i < nbands; i++) {
         let l = document.createElement('option')
         l.setAttribute('bidx', i + 1)
-        let name = band_descr[i][1] || band_descr[i][0]
-        l.setAttribute('name', name)
-        l.text = name
+        l.setAttribute('bname', band_descr[i][0])
+        l.text = band_descr[i][1] || band_descr[i][0]
         if (i === 1) l.selected="selected"
         gList.appendChild(l)
       }
@@ -776,9 +773,8 @@
       for (var i = 0; i < nbands; i++) {
         let l = document.createElement('option')
         l.setAttribute('bidx', i + 1)
-        let name = band_descr[i][1] || band_descr[i][0]
-        l.setAttribute('name', name)
-        l.text = name
+        l.setAttribute('bname', band_descr[i][0])
+        l.text = band_descr[i][1] || band_descr[i][0]
         if (band_descr.length > 2 && i === 2) {
           l.selected="selected"
         } else {

src/titiler/application/titiler/application/templates/stac_index.html

@@ -411,6 +411,7 @@
   let indexes_params
   if (document.getElementById("compose-switch").checked === true) {
     asset_params = [r, g, b].map(i => `assets=${i}`).join('&')
+    // When doing assets composition we select the first band (bidx=1)
     indexes_params =  [r, g, b].map(i => `asset_bidx=${i}|1`).join('&')
     params.rescale = `${document.getElementById('data-min').value},${document.getElementById('data-max').value}`
   } else {
@@ -435,14 +436,15 @@
 }
 
 const addHisto3Bands = () => {
-  const r = document.getElementById('r-selector').selectedOptions[0].getAttribute("name")
-  const g = document.getElementById('g-selector').selectedOptions[0].getAttribute("name")
-  const b = document.getElementById('b-selector').selectedOptions[0].getAttribute("name")
+  const r = document.getElementById('r-selector').selectedOptions[0].getAttribute("bname")
+  const g = document.getElementById('g-selector').selectedOptions[0].getAttribute("bname")
+  const b = document.getElementById('b-selector').selectedOptions[0].getAttribute("bname")
 
   let rStats
   let gStats
   let bStats
   if (document.getElementById("compose-switch").checked === true) {
+    // When doing assets composition we select the first band (b1)
     rStats = scope.dataset_statistics[r]['b1']
     gStats = scope.dataset_statistics[g]['b1']
     bStats = scope.dataset_statistics[b]['b1']
@@ -540,7 +542,7 @@
 
 const addHisto1Band = () => {
   const asset = document.getElementById('asset-selector').value
-  const band = document.getElementById('layer-selector').selectedOptions[0].getAttribute("name")
+  const band = document.getElementById('layer-selector').selectedOptions[0].getAttribute("bname")
   const stats = scope.dataset_statistics[asset][band]
 
   let counts = stats.histogram[0]
@@ -749,6 +751,7 @@
   const gList = document.getElementById('g-selector')
   gList.innerHTML = ''
 
+  // Allow assets composition (Asset As Band)
   if (is_checked === true) {
     document.getElementById('asset-selector').classList.add('disabled')
     document.getElementById("asset-selector").disabled = true
@@ -767,7 +770,7 @@
       let l = document.createElement('option')
       l.value = scope.assets[i]
       l.setAttribute('bidx', scope.assets[i])
-      l.setAttribute('name', scope.assets[i])
+      l.setAttribute('bname', scope.assets[i])
       l.text = scope.assets[i]
       if (i === 0) l.selected = "selected"
       rList.appendChild(l)
@@ -777,7 +780,7 @@
       let l = document.createElement('option')
       l.value = scope.assets[i]
       l.setAttribute('bidx', scope.assets[i])
-      l.setAttribute('name', scope.assets[i])
+      l.setAttribute('bname', scope.assets[i])
       l.text = scope.assets[i]
       if (i === 1) l.selected = "selected"
       gList.appendChild(l)
@@ -787,7 +790,7 @@
       let l = document.createElement('option')
       l.value = scope.assets[i]
       l.setAttribute('bidx', scope.assets[i])
-      l.setAttribute('name', scope.assets[i])
+      l.setAttribute('bname', scope.assets[i])
       l.text = scope.assets[i]
       l.selected = "selected"
       bList.appendChild(l)
@@ -814,9 +817,8 @@
     for (var i = 0; i < nbands; i++) {
       let l = document.createElement('option')
       l.setAttribute('bidx', i + 1)
-      let name = band_descr[i][1] || band_descr[i][0]
-      l.setAttribute('name', name)
-      l.text = name
+      l.setAttribute('bname', band_descr[i][0])
+      l.text = band_descr[i][1] || band_descr[i][0]
       layerList.appendChild(l)
     }
 
@@ -825,9 +827,8 @@
     for (var i = 0; i < nbands; i++) {
       let l = document.createElement('option')
       l.setAttribute('bidx', i + 1)
-      let name = band_descr[i][1] || band_descr[i][0]
-      l.setAttribute('name', name)
-      l.text = name
+      l.setAttribute('bname', band_descr[i][0])
+      l.text = band_descr[i][1] || band_descr[i][0]
       if (i === 0) l.selected="selected"
       rList.appendChild(l)
     }
@@ -836,9 +837,8 @@
     for (var i = 0; i < nbands; i++) {
       let l = document.createElement('option')
       l.setAttribute('bidx', i + 1)
-      let name = band_descr[i][1] || band_descr[i][0]
-      l.setAttribute('name', name)
-      l.text = name
+      l.setAttribute('bname', band_descr[i][0])
+      l.text = band_descr[i][1] || band_descr[i][0]
       if (i === 1) l.selected="selected"
       gList.appendChild(l)
     }
@@ -847,9 +847,8 @@
     for (var i = 0; i < nbands; i++) {
       let l = document.createElement('option')
       l.setAttribute('bidx', i + 1)
-      let name = band_descr[i][1] || band_descr[i][0]
-      l.setAttribute('name', name)
-      l.text = name
+      l.setAttribute('bname', band_descr[i][0])
+      l.text = band_descr[i][1] || band_descr[i][0]
       if (band_descr.length > 2 && i === 2) {
           l.selected="selected"
       } else {