Loading flag for band views and downloads

app.js

@@ -16,6 +16,7 @@ import { DATASETS, loadCoverage, samplesAt } from './footprints.js'
 import { placeLabels } from './labels.js'
 import { imageUrl, loadThumbnail } from './samples.js'
 import { bandNames, render, views } from './bands.js'
+import { newStats } from './parquet.js'
 import { downloadAll, downloadBand, pythonSnippet } from './download.js'
 import { cellAt, cellIndex, renderTile } from './tiles.js'
 
@@ -401,10 +402,11 @@ async function showView(id) {
   if (id === 'thumbnail') { pick.shown = { src: t.src, values: null, sample: t.sample, label: 'Thumbnail' }; refreshShown(); return }
   const view = pick.views.find(v => v.id === id), key = `${state.name}/${t.sample.part}/${t.sample.parquet_row}/${id}`
   $('pick-stats').textContent = `Loading ${view.label}…`
-  const fresh = !renders.has(key)
-  if (fresh) renders.set(key, render(state.info, t.sample, view).catch(e => { renders.delete(key); throw e }))
+  const fresh = !renders.has(key), stats = newStats()
+  if (fresh) renders.set(key, render(state.info, t.sample, view, stats).catch(e => { renders.delete(key); throw e }))
+  const stop = fresh ? followLoad(`${view.label} · ${pick.cell.name}`, stats) : () => {}
   try {
-    const r = await renders.get(key)
+    const r = await renders.get(key).finally(stop)
     if (ticket !== pick.viewTicket) return
     pick.shown = { ...r, sample: t.sample, label: view.label }
     refreshShown()
@@ -415,6 +417,17 @@ async function showView(id) {
   }
 }
 
+/** The loading flag over the map while a band read runs: bytes of the expected total, then its phase (decoding).
+ *  Returns the function that ends it. */
+function followLoad(text, stats) {
+  startLoader(text)
+  const timer = setInterval(() => {
+    loaderProgress(stats.bytes, stats.expected)
+    if (stats.phase) $('loader-phase').textContent = stats.phase
+  }, 120)
+  return () => { clearInterval(timer); stopLoader() }
+}
+
 function refreshShown() {
   showThumbnail(pick.shown.src)
   showOnMap()
@@ -447,8 +460,13 @@ async function downloading(button, job) {
 
 $('dl-band').addEventListener('click', () => downloading($('dl-band'),
   () => downloadBand(state.info, state.name, pick.cell.name, pick.thumbnail.sample, shownBand())))
-$('dl-all').addEventListener('click', () => downloading($('dl-all'),
-  () => downloadAll(state.info, state.name, pick.cell.name, pick.thumbnail.sample, pick.thumbnail.src, pick.thumbnail.productId)))
+$('dl-all').addEventListener('click', () => downloading($('dl-all'), async () => {
+  const stats = newStats(), stop = followLoad(`All bands · ${pick.cell.name} · for download`, stats)
+  try {
+    return await downloadAll(state.info, state.name, pick.cell.name, pick.thumbnail.sample, pick.thumbnail.src,
+      pick.thumbnail.productId, stats)
+  } finally { stop() }
+}))
 $('dl-python').addEventListener('click', async () => {
   const code = pythonSnippet(state.info, state.name, pick.cell.name, pick.thumbnail.sample, pick.bands.length ? pick.bands : ['thumbnail'])
   window.lastSnippet = code                                                         // for automated checks

bands.js

@@ -33,14 +33,18 @@ export async function bandNames(info, sample) {
   return metadata.schema.slice(1).map(c => c.name).filter(n => !NOT_BANDS.has(n))
 }
 
-/** The GeoTIFF bytes of `bands` of one sample (read once, then kept): {name: Uint8Array}, and the read's stats. */
-export async function readBands(info, sample, bands) {
-  const stats = newStats(), url = imageUrl(info, sample.part), key = b => `${url}#${sample.parquet_row}/${b}`
+/** The GeoTIFF bytes of `bands` of one sample (read once, then kept): {name: Uint8Array}, and the read's stats.
+ *  stats.expected: the bytes the missing columns take in the row group (for a progress display), set before reading. */
+export async function readBands(info, sample, bands, stats = newStats()) {
+  const url = imageUrl(info, sample.part), key = b => `${url}#${sample.parquet_row}/${b}`
   const missing = bands.filter(b => !raw.has(key(b)))
   if (missing.length) {
     const { file, metadata } = await openFile(url, stats)
     let rowStart = 0
     for (let g = 0; g < sample.parquet_row; g++) rowStart += Number(metadata.row_groups[g].num_rows)
+    stats.expected = metadata.row_groups[sample.parquet_row].columns
+      .filter(c => missing.includes(c.meta_data.path_in_schema[0]))
+      .reduce((sum, c) => sum + Number(c.meta_data.total_compressed_size), 0)
     await parquetRead({ file, metadata, compressors, columns: missing, rowStart, rowEnd: rowStart + 1, rowFormat: 'object',
       utf8: false, onComplete(rows) { for (const b of missing) raw.set(key(b), rows[0][b]) } })
   }
@@ -79,10 +83,12 @@ function terrain(t) {
   return TERRAIN.at(-1)[1]
 }
 
-/** One view of a sample as a PNG object URL: {src, size, values (single band: for the cursor), stats}. */
-export async function render(info, sample, view) {
+/** One view of a sample as a PNG object URL: {src, size, values (single band: for the cursor), stats}.
+ *  stats (passed in to follow progress): bytes as they arrive, expected, then phase 'Decoding'. */
+export async function render(info, sample, view, stats = newStats()) {
   const needed = [...new Set(view.use.flatMap(b => (b === 'ratio' ? ['vv', 'vh'] : [b])))]
-  const [bytes, stats] = await readBands(info, sample, needed)
+  const [bytes] = await readBands(info, sample, needed, stats)
+  stats.phase = 'Decoding'
   const bands = Object.fromEntries(await Promise.all(needed.map(async b => [b, await decode(bytes[b])])))
   const size = Math.max(...needed.map(b => bands[b].width))
   const s1 = 'vv' in bands, at = (band, x, y) => {             // value at composite pixel (x, y), nearest

download.js

@@ -25,9 +25,9 @@ export async function downloadBand(info, name, cell, sample, band) {
 }
 
 /** Every band, the thumbnail and metadata.json, in one zip (stored, not recompressed: the GeoTIFFs are LZW). */
-export async function downloadAll(info, name, cell, sample, thumbnailSrc, productId) {
+export async function downloadAll(info, name, cell, sample, thumbnailSrc, productId, stats) {
   const bands = await bandNames(info, sample)
-  const [bytes, stats] = await readBands(info, sample, bands)
+  const [bytes] = await readBands(info, sample, bands, stats)
   const base = stem(cell, name, sample), entries = {}
   for (const b of bands) entries[`${base}_${b}.tif`] = bytes[b]
   const thumb = new Uint8Array(await (await fetch(thumbnailSrc)).arrayBuffer())