Bands, composites and downloads

README.md

@@ -32,6 +32,11 @@ click a cell -> its footprint rows (page index) -> the image file on Hugging Fac
   -> samples.js: that row group's thumbnail column -> panel, with acquisition time, cloud cover or orbit, product
 the shown image: Open (full window, zoom and pan) or Show on map (over its footprint, opacity slider): every image
   is 10,680 m square in its UTM zone, centred on the sample's centre_lat, centre_lon, so corners need no band read
+View menu: the stored thumbnail (default), composites (S2: true colour, false colour, SWIR, one stretch for the three
+  bands; S1: VV, VH, VV/VH in dB; DEM: elevation in colour) and every band (grey, 2-98% stretch, value under the
+  cursor in the full window) -> bands.js: the band columns (LZW GeoTIFFs) of the sample's row group, geotiff.js
+Downloads (download.js): the shown band as stored (.tif); every band, the thumbnail and metadata.json (.zip); a
+  Python snippet that reads the same row group from Hugging Face
 in the background: the other datasets' footprints once the first is drawn; after a click, the same cell's samples
   and first thumbnail in the other datasets (kept, so switching dataset shows them at once)
 ```
@@ -44,7 +49,9 @@ in the background: the other datasets' footprints once the first is drawn; after
 | `app.js` | globe, dataset list, loading flag, cursor, selected cell |
 | `footprints.js` | a dataset's footprints: coverage mask, a cell's samples |
 | `samples.js` | one sample's thumbnail from its image file |
-| `parquet.js` | range requests for hyparquet, with bytes and time counted |
+| `bands.js` | a sample's band columns: read, decode (geotiff.js), stretch, composites |
+| `download.js` | band GeoTIFFs as stored, all bands as a zip (fflate), the Python snippet |
+| `parquet.js` | range requests for hyparquet, with bytes and time counted; each file's footer read once |
 | `tiles.js`, `labels.js`, `places.json` | copied from the Climate Globe: cells and tiles, place names |
 | `build_index.py` | Core `metadata.parquet` -> `footprints/<name>.parquet` and `footprints/datasets.json` |
 | `footprints/` | built files, not in git: uploaded to the Space once (S2L2A and S2L1C 32.9 MB each, S1RTC 20.6 MB, DEM 14.5 MB) |

app.js

@@ -5,7 +5,9 @@
 //   click -> cell -> its samples (footprint rows, page index) -> image file on Hugging Face, one row group,
 //     thumbnail column (samples.js) -> panel
 //   cursor -> cell under it -> outline + name, position, whether it has a sample
-//   the shown image -> full window (zoom, pan) or on the map over its footprint (corners from its UTM centre)
+//   the shown image (the stored thumbnail, or a band or composite decoded from the image file, bands.js)
+//     -> full window (zoom, pan, value under the cursor) or on the map over its footprint (corners from its UTM centre)
+//     -> downloads of the bands as stored (download.js)
 
 import * as maplibregl from 'https://cdn.jsdelivr.net/npm/maplibre-gl@6.14.0/dist/maplibre-gl.mjs'
 import { feature } from 'https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/+esm'
@@ -13,6 +15,8 @@ import proj4 from 'https://cdn.jsdelivr.net/npm/proj4@2.12.1/+esm'
 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 { downloadAll, downloadBand, pythonSnippet } from './download.js'
 import { cellAt, cellIndex, renderTile } from './tiles.js'
 
 const $ = id => document.getElementById(id)
@@ -182,6 +186,7 @@ function stopLoader() {
 
 const kb = bytes => (bytes >= 1e6 ? `${(bytes / 1e6).toFixed(1)} MB` : `${Math.round(bytes / 1e3)} KB`)
 const secs = ms => `${(ms / 1000).toFixed(1)} s`
+const reqs = n => `${n} request${n === 1 ? '' : 's'}`
 
 function buildDatasetList(datasets) {
   $('datasets').replaceChildren(...Object.entries(datasets).map(([name, d]) => {
@@ -218,7 +223,7 @@ async function setDataset(name, datasets) {
   if (pick.cell) pickCell()
   map.once('idle', () => {
     if (ticket !== state.loading) return
-    $('stat-footprints').textContent = `${kb(coverage.stats.bytes)} in ${coverage.stats.requests} requests · ${secs(coverage.stats.read)}`
+    $('stat-footprints').textContent = `${kb(coverage.stats.bytes)} in ${reqs(coverage.stats.requests)} · ${secs(coverage.stats.read)}`
     $('stat-samples').textContent = coverage.samples.toLocaleString('en')
     $('stat-draw').textContent = secs(performance.now() - t0)
     document.body.dataset.loaded = name                     // for automated checks
@@ -265,7 +270,7 @@ async function prefetchCell(cell) {
   }
 }
 
-const pick = { cell: null, samples: [], chosen: 0, thumbnail: null, ticket: 0 }
+const pick = { cell: null, samples: [], chosen: 0, thumbnail: null, shown: null, views: [], bands: [], ticket: 0, viewTicket: 0 }
 
 map.on('click', e => {
   if (!onGlobe(e.point, e.lngLat)) return
@@ -286,7 +291,7 @@ $('pick-clear').addEventListener('click', () => {
 /** The selected cell in the shown dataset: its samples, then the first one's thumbnail. */
 async function pickCell() {
   const ticket = ++pick.ticket, { row, col } = pick.cell, name = state.name
-  pick.samples = []; pick.thumbnail = null
+  pick.samples = []; pick.thumbnail = null; pick.shown = null; pick.viewTicket++
   showThumbnail(null, 'Looking up the cell…'); showOnMap()
   $('choices').replaceChildren(); $('pick-meta').replaceChildren(); $('pick-stats').textContent = ''
   let samples
@@ -311,8 +316,8 @@ async function pickCell() {
 }
 
 async function choose(i) {
-  const ticket = ++pick.ticket, sample = pick.samples[i], info = state.info
-  pick.chosen = i
+  const ticket = ++pick.ticket, sample = pick.samples[i], info = state.info, name = state.name
+  pick.chosen = i; pick.shown = null; pick.bands = []; pick.views = []; pick.viewTicket++
   for (const [k, b] of [...$('choices').children].entries()) b.setAttribute('aria-pressed', String(k === i))
   meta(sample, null, info)
   showThumbnail(null, 'Loading the thumbnail…')
@@ -320,10 +325,12 @@ async function choose(i) {
     const [loading, fresh] = thumbnailOf(state.name, sample), t = await loading
     if (ticket !== pick.ticket) return
     pick.thumbnail = { ...t, sample }
+    pick.shown = { src: t.src, values: null, sample, label: 'Thumbnail' }
     showThumbnail(t.src)
     showOnMap()
     meta(sample, t.productId, info)
-    $('pick-stats').textContent = `Thumbnail: ${kb(t.stats.bytes)} in ${t.stats.requests} requests · ${secs(t.stats.read)}` +
+    buildViews(name, info, sample, ticket)
+    $('pick-stats').textContent = `Thumbnail: ${kb(t.stats.bytes)} in ${reqs(t.stats.requests)} · ${secs(t.stats.read)}` +
       (fresh ? '' : ' (loaded before)')
     prefetchCell(pick.cell)
   } catch (error) {
@@ -334,6 +341,8 @@ async function choose(i) {
 function showThumbnail(src, note = '') {
   $('thumb').hidden = !src
   $('image-actions').hidden = !src
+  $('download-actions').hidden = !src
+  if (!src) $('view-row').hidden = true
   if (src) $('thumb').src = src
   $('thumb-note').textContent = src ? '' : note
 }
@@ -352,9 +361,9 @@ function corners(s) {
   return [[x - HALF, y + HALF], [x + HALF, y + HALF], [x + HALF, y - HALF], [x - HALF, y - HALF]].map(p => utm.inverse(p))
 }
 
-/** The shown thumbnail over its footprint when "Show on map" is ticked; otherwise none. */
+/** The shown image over its footprint when "Show on map" is ticked; otherwise none. */
 function showOnMap() {
-  const t = pick.thumbnail, on = $('on-map').checked && t && pick.cell
+  const t = pick.shown, on = $('on-map').checked && t && pick.cell
   if (map.getLayer('sample')) map.removeLayer('sample')
   if (map.getSource('sample')) map.removeSource('sample')
   if (!on) return
@@ -366,7 +375,86 @@ $('on-map').addEventListener('change', showOnMap)
 $('opacity').addEventListener('input', () => {
   if (map.getLayer('sample')) map.setPaintProperty('sample', 'raster-opacity', Number($('opacity').value) / 100)
 })
-window.sampleCorners = () => (pick.thumbnail ? corners(pick.thumbnail.sample) : null)     // for automated checks
+window.sampleCorners = () => (pick.shown ? corners(pick.shown.sample) : null)             // for automated checks
+
+// ---- views: the stored thumbnail, composites and single bands ------------------------------------------------
+//   the menu lists the image file's band columns; a chosen view is decoded once and kept (renders)
+
+const renders = new Map()                                 // "<dataset>/<part>/<row>/<view>" -> rendered view
+
+async function buildViews(name, info, sample, ticket) {
+  try {
+    const bands = await bandNames(info, sample)
+    if (ticket !== pick.ticket) return
+    pick.bands = bands; pick.views = views(name, bands)
+    $('view').replaceChildren(new Option('Thumbnail (stored)', 'thumbnail'), ...pick.views.map(v => new Option(v.label, v.id)))
+    $('view').value = 'thumbnail'; $('view-row').hidden = false
+    updateDownloads()
+  } catch { /* no menu: the thumbnail stays */ }
+}
+
+$('view').addEventListener('change', () => showView($('view').value))
+
+async function showView(id) {
+  const t = pick.thumbnail, ticket = ++pick.viewTicket
+  if (!t) return
+  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 }))
+  try {
+    const r = await renders.get(key)
+    if (ticket !== pick.viewTicket) return
+    pick.shown = { ...r, sample: t.sample, label: view.label }
+    refreshShown()
+    $('pick-stats').textContent = `${view.label}: ${kb(r.stats.bytes)} in ${reqs(r.stats.requests)} · ${secs(r.stats.read)}` +
+      (fresh ? '' : ' (loaded before)')
+  } catch (error) {
+    if (ticket === pick.viewTicket) $('pick-stats').textContent = `Could not load ${view.label}: ${error.message}`
+  }
+}
+
+function refreshShown() {
+  showThumbnail(pick.shown.src)
+  showOnMap()
+  if (!$('lightbox').hidden) openImage()
+  updateDownloads()
+}
+
+// ---- downloads ---------------------------------------------------------------------------------------------
+
+const shownBand = () => (pick.shown && pick.bands.includes(pick.shown.label) ? pick.shown.label : null)
+
+function updateDownloads() {
+  const band = shownBand()
+  $('dl-band').disabled = !band
+  $('dl-band').textContent = band ? `Download ${band} (.tif)` : 'Download band (.tif)'
+  $('dl-band').title = band ? `${band} as stored: a GeoTIFF` : 'Choose a single band under View'
+  $('dl-all').disabled = !pick.bands.length
+}
+
+async function downloading(button, job) {
+  const label = button.textContent
+  button.disabled = true; button.textContent = 'Preparing…'
+  try {
+    const stats = await job()
+    $('pick-stats').textContent = `Downloaded: ${kb(stats.bytes)} read in ${reqs(stats.requests)} · ${secs(stats.read)}`
+  } catch (error) {
+    $('pick-stats').textContent = `Could not download: ${error.message}`
+  } finally { button.textContent = label; updateDownloads() }
+}
+
+$('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-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
+  try { await navigator.clipboard.writeText(code); $('pick-stats').textContent = 'Python copied to the clipboard' }
+  catch { window.prompt('Python that reads this sample:', code) }
+})
 
 // ---- the shown image in the full window -----------------------------------------------------------------------
 //   opens fitted to the window; scroll zooms about the cursor, drag pans, Esc or Close closes
@@ -374,11 +462,12 @@ window.sampleCorners = () => (pick.thumbnail ? corners(pick.thumbnail.sample) :
 const view = { scale: 1, x: 0, y: 0, drag: null }
 
 function openImage() {
-  if (!pick.thumbnail) return
+  if (!pick.shown) return
   const img = $('lightbox-img')
-  img.src = pick.thumbnail.src
-  $('lightbox-title').textContent = `${pick.cell.name} · ${state.info.label}` +
-    (pick.thumbnail.sample.timestamp ? ` · ${when(pick.thumbnail.sample.timestamp)}` : '')
+  img.src = pick.shown.src
+  $('lightbox-value').textContent = ''
+  $('lightbox-title').textContent = `${pick.cell.name} · ${state.info.label} · ${pick.shown.label}` +
+    (pick.shown.sample.timestamp ? ` · ${when(pick.shown.sample.timestamp)}` : '')
   $('lightbox').hidden = false
   img.decode().then(() => {
     const w = innerWidth, h = innerHeight - 44, s = Math.min(w / img.naturalWidth, h / img.naturalHeight)
@@ -406,6 +495,14 @@ $('lightbox').addEventListener('pointerdown', e => {
   $('lightbox').classList.add('dragging'); $('lightbox').setPointerCapture(e.pointerId)
 })
 $('lightbox').addEventListener('pointermove', e => {
+  const v = pick.shown?.values
+  if (v) {                                                   // value under the cursor (single bands, elevation)
+    const k = v.width / pick.shown.size, x = Math.floor(((e.clientX - view.x) / view.scale) * k)
+    const y = Math.floor(((e.clientY - view.y) / view.scale) * k)
+    const inside = x >= 0 && y >= 0 && x < v.width && y < v.values.length / v.width
+    const value = inside ? v.values[y * v.width + x] : NaN
+    $('lightbox-value').textContent = inside && Number.isFinite(value) ? `· pixel ${x}, ${y}: ${+value.toFixed(3)}${v.unit ? ` ${v.unit}` : ''}` : ''
+  }
   if (!view.drag) return
   view.x = e.clientX - view.drag[0]; view.y = e.clientY - view.drag[1]; place()
 })

bands.js

@@ -0,0 +1,128 @@
+// A sample's bands: read from its image file on Hugging Face, decoded and drawn in the browser.
+//
+//   image file row group (one per sample) -> band column = the original GeoTIFF bytes (LZW; kept for download)
+//     -> geotiff.js -> values (S2: uint16 at 10, 20 or 60 m; S1: float32 linear backscatter at 7.5 m; DEM: float32 m)
+//     -> a view: one band in grey (2-98% stretch), or a composite of three (S2: one stretch for the three) -> PNG
+//   Every band of a sample covers the same 10,680 m square, so bands of different resolutions are combined by
+//   sampling each at the composite's pixel positions (nearest).
+
+import { fromArrayBuffer } from 'https://cdn.jsdelivr.net/npm/geotiff@2.1.3/+esm'
+import { compressors, newStats, openFile, parquetRead } from './parquet.js'
+import { imageUrl } from './samples.js'
+
+const NOT_BANDS = new Set(['product_id', 'grid_cell', 'product_datetime', 'thumbnail', 'compressed'])
+
+/** The views offered for a dataset: composites first, then every band of its image files. */
+export function views(name, bands) {
+  const composites = {
+    S2L2A: [['True colour (B04, B03, B02)', ['B04', 'B03', 'B02']], ['False colour (B08, B04, B03)', ['B08', 'B04', 'B03']],
+      ['SWIR (B12, B8A, B04)', ['B12', 'B8A', 'B04']]],
+    S1RTC: [['VV, VH, VV/VH (dB)', ['vv', 'vh', 'ratio']]],
+    DEM: [['Elevation (colour)', ['DEM']]],
+  }
+  composites.S2L1C = composites.S2L2A
+  return [...(composites[name] ?? []).map(([label, use]) => ({ id: `rgb:${use.join(',')}`, label, use })),
+    ...bands.map(b => ({ id: b, label: b, use: [b] }))]
+}
+
+const raw = new Map()                      // "<url>#<row group>/<band>" -> GeoTIFF bytes
+
+/** The band columns of a sample's image file (every column holding a raster). */
+export async function bandNames(info, sample) {
+  const { metadata } = await openFile(imageUrl(info, sample.part), newStats())
+  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}`
+  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)
+    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]) } })
+  }
+  stats.read = performance.now() - stats.t0
+  return [Object.fromEntries(bands.map(b => [b, raw.get(key(b))])), stats]
+}
+
+/** Values of one GeoTIFF: {width, height, values (typed array), noData}. */
+async function decode(bytes) {
+  const tiff = await fromArrayBuffer(bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength))
+  const image = await tiff.getImage(), [values] = await image.readRasters()
+  return { width: image.getWidth(), height: image.getHeight(), values, noData: image.getGDALNoData() }
+}
+
+/** 2nd and 98th percentile of the finite values (and not noData), from a sample of 100,000 pixels. */
+function stretch(values, noData) {
+  const step = Math.max(1, Math.floor(values.length / 100000)), picked = []
+  for (let i = 0; i < values.length; i += step) {
+    const v = values[i]
+    if (Number.isFinite(v) && v !== noData) picked.push(v)
+  }
+  if (!picked.length) return [0, 1]
+  picked.sort((a, b) => a - b)
+  const lo = picked[Math.floor(picked.length * 0.02)], hi = picked[Math.floor(picked.length * 0.98)]
+  return hi > lo ? [lo, hi] : [lo, lo + 1]
+}
+
+const dB = v => (v > 0 ? 10 * Math.log10(v) : NaN)
+const TERRAIN = [[0, [26, 102, 51]], [0.3, [127, 176, 82]], [0.55, [222, 207, 140]], [0.8, [153, 102, 51]], [1, [250, 250, 250]]]
+
+function terrain(t) {
+  for (let k = 1; k < TERRAIN.length; k++) {
+    const [t1, c1] = TERRAIN[k], [t0, c0] = TERRAIN[k - 1]
+    if (t <= t1) { const f = (t - t0) / (t1 - t0); return c0.map((c, i) => c + f * (c1[i] - c)) }
+  }
+  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) {
+  const needed = [...new Set(view.use.flatMap(b => (b === 'ratio' ? ['vv', 'vh'] : [b])))]
+  const [bytes, stats] = await readBands(info, sample, needed)
+  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
+    const k = band.width / size
+    return band.values[Math.floor(y * k) * band.width + Math.floor(x * k)]
+  }
+  const channel = name => {
+    if (name === 'ratio') {
+      const vv = bands.vv, vh = bands.vh, out = new Float32Array(size * size)
+      for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) out[y * size + x] = dB(at(vv, x, y)) - dB(at(vh, x, y))
+      return { width: size, values: out, noData: null }
+    }
+    const b = bands[name]
+    if (!s1) return b
+    const out = new Float32Array(b.values.length)                       // S1: linear backscatter -> dB
+    for (let i = 0; i < out.length; i++) out[i] = dB(b.values[i])
+    return { width: b.width, values: out, noData: null }
+  }
+  const chans = view.use.map(channel), own = chans.map(c => stretch(c.values, c.noData))
+  // S2 composites: one stretch for the three bands (reflectances on one scale), so colours keep their balance;
+  // S1: each channel its own (VV, VH and their ratio are different quantities)
+  const joint = !s1 && chans.length === 3 ? [Math.min(...own.map(r => r[0])), Math.max(...own.map(r => r[1]))] : null
+  const ranges = joint ? own.map(() => joint) : own
+  const canvas = new OffscreenCanvas(size, size), ctx = canvas.getContext('2d'), img = ctx.createImageData(size, size)
+  const elevation = view.id === 'rgb:DEM'
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const o = (y * size + x) * 4
+      const t = chans.map((c, k) => {
+        const v = at(c, x, y), [lo, hi] = ranges[k]
+        return Number.isFinite(v) && v !== c.noData ? Math.min(Math.max((v - lo) / (hi - lo), 0), 1) : NaN
+      })
+      if (t.some(Number.isNaN)) { img.data[o + 3] = 0; continue }
+      const rgb = elevation ? terrain(t[0]) : chans.length === 1 ? [t[0] * 255, t[0] * 255, t[0] * 255] : t.map(v => v * 255)
+      img.data[o] = rgb[0]; img.data[o + 1] = rgb[1]; img.data[o + 2] = rgb[2]; img.data[o + 3] = 255
+    }
+  }
+  ctx.putImageData(img, 0, 0)
+  const src = URL.createObjectURL(await canvas.convertToBlob({ type: 'image/png' }))
+  const single = view.use.length === 1 && !elevation ? chans[0] : elevation ? bands.DEM : null
+  stats.read = performance.now() - stats.t0
+  return { src, size, values: single && { width: single.width, values: single.values, unit: s1 ? 'dB' : elevation ? 'm' : '' }, stats }
+}

download.js

@@ -0,0 +1,56 @@
+// Downloads of the selected sample: the bands exactly as stored (GeoTIFF bytes from the image file, not re-encoded).
+//
+//   one band   -> <cell>_<dataset>_<time>_<band>.tif
+//   all bands  -> <cell>_<dataset>_<time>.zip: every band's .tif, the thumbnail, metadata.json (where it came from)
+//   Python     -> a snippet that reads the same row group from Hugging Face (copied to the clipboard)
+
+import { zipSync } from 'https://cdn.jsdelivr.net/npm/fflate@0.8.2/+esm'
+import { bandNames, readBands } from './bands.js'
+import { imageUrl } from './samples.js'
+
+const stem = (cell, name, sample) => [cell, name, sample.timestamp].filter(Boolean).join('_')
+
+function save(blob, filename) {
+  const a = document.createElement('a')
+  a.href = URL.createObjectURL(blob); a.download = filename
+  document.body.append(a); a.click(); a.remove()
+  setTimeout(() => URL.revokeObjectURL(a.href), 10_000)
+}
+
+/** One band's GeoTIFF, as stored. */
+export async function downloadBand(info, name, cell, sample, band) {
+  const [bytes, stats] = await readBands(info, sample, [band])
+  save(new Blob([bytes[band]], { type: 'image/tiff' }), `${stem(cell, name, sample)}_${band}.tif`)
+  return stats
+}
+
+/** 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) {
+  const bands = await bandNames(info, sample)
+  const [bytes, stats] = await readBands(info, sample, bands)
+  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())
+  const png = thumb[0] === 0x89 && thumb[1] === 0x50
+  entries[`${base}_thumbnail.${png ? 'png' : 'jpg'}`] = thumb
+  const meta = { grid_cell: cell, dataset: `Major-TOM/Core-${name}`, product_id: productId, timestamp: sample.timestamp ?? null,
+    cloud_cover: sample.cloud_cover ?? null, orbit_state: sample.orbit_state ?? null, epsg: sample.epsg,
+    centre_lat: sample.centre_lat, centre_lon: sample.centre_lon, source_file: imageUrl(info, sample.part),
+    row_group: sample.parquet_row, bands }
+  entries['metadata.json'] = new TextEncoder().encode(JSON.stringify(meta, null, 1) + '\n')
+  save(new Blob([zipSync(entries, { level: 0 })], { type: 'application/zip' }), `${base}.zip`)
+  return stats
+}
+
+/** Python that reads the same sample from Hugging Face (one row group of the image file). */
+export function pythonSnippet(info, name, cell, sample, bands) {
+  return `import fsspec
+import pyarrow.parquet as pq
+
+url = "${imageUrl(info, sample.part)}"
+with fsspec.open(url, "rb") as f:                      # reads only the parts of the file needed
+    row = pq.ParquetFile(f).read_row_group(${sample.parquet_row}, columns=${JSON.stringify(bands)})
+# ${cell}, Major-TOM/Core-${name}: each band is a GeoTIFF, e.g.
+# from rasterio.io import MemoryFile; MemoryFile(row["${bands[0]}"][0].as_py()).open().read(1)
+`
+}

index.html

@@ -87,10 +87,15 @@
   .image-actions button { font: inherit; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px;
     background: var(--surface); color: var(--ink); cursor: pointer; }
   .image-actions button:hover { border-color: var(--mt-blue); color: var(--mt-blue); }
+  .image-actions button:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line); color: var(--ink); }
   .image-actions label { display: flex; align-items: center; gap: 6px; color: var(--ink-2); cursor: pointer; }
   .image-actions input[type=checkbox], .image-actions input[type=range] { accent-color: var(--mt-blue); }
   .image-actions input[type=range] { width: 90px; }
   .image-actions[hidden] { display: none; }
+  .view-row { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 13px; color: var(--ink-2); }
+  .view-row select { flex: 1; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
+    color: var(--ink); font: 13px var(--sans); }
+  .view-row[hidden] { display: none; }
   #lightbox { position: fixed; inset: 0; z-index: 10; background: rgba(17,24,39,.88); overflow: hidden; cursor: grab;
     touch-action: none; }
   #lightbox[hidden] { display: none; }
@@ -174,12 +179,18 @@
       <div class="pick-head"><h2>Selected cell</h2><button id="pick-clear" class="link">Clear</button></div>
       <div class="pick-name"><b id="pick-cell"></b><span id="pick-pos"></span></div>
       <div id="choices"></div>
+      <label class="view-row" id="view-row" hidden>View <select id="view" aria-label="Band or composite"></select></label>
       <div id="thumb-wrap"><img id="thumb" alt="Thumbnail of the selected sample" hidden><span id="thumb-note"></span></div>
       <div class="image-actions" id="image-actions" hidden>
         <button id="open-image">Open</button>
         <label><input type="checkbox" id="on-map"> Show on map</label>
         <label>Opacity <input type="range" id="opacity" min="0" max="100" value="100" aria-label="Opacity on the map"></label>
       </div>
+      <div class="image-actions" id="download-actions" hidden>
+        <button id="dl-band" title="The shown band as stored: a GeoTIFF">Download band (.tif)</button>
+        <button id="dl-all" title="Every band as stored, the thumbnail and metadata.json">All bands (.zip)</button>
+        <button id="dl-python" title="Python that reads this sample from Hugging Face">Copy Python</button>
+      </div>
       <dl id="pick-meta"></dl>
       <div class="tiny" id="pick-stats"></div>
     </section>
@@ -214,7 +225,7 @@
 
 <div id="lightbox" hidden role="dialog" aria-label="Selected image">
   <img id="lightbox-img" alt="">
-  <div id="lightbox-bar"><span id="lightbox-title"></span><span>scroll to zoom · drag to pan · Esc to close
+  <div id="lightbox-bar"><span><span id="lightbox-title"></span> <span id="lightbox-value"></span></span><span>scroll to zoom · drag to pan · Esc to close
     <button id="lightbox-close">Close</button></span></div>
 </div>
 
@@ -223,7 +234,7 @@
   // carry the signature are let through there: modules imported by other modules would not. So every file of the app
   // is asked for with it (an import map, then app.js). With no signature (public Space, local) nothing changes.
   {
-    const sign = location.search, files = ['app.js', 'footprints.js', 'samples.js', 'parquet.js', 'tiles.js', 'labels.js']
+    const sign = location.search, files = ['app.js', 'footprints.js', 'samples.js', 'bands.js', 'download.js', 'parquet.js', 'tiles.js', 'labels.js']
     const url = file => new URL(file, location.href).href.split('?')[0]
     const map = document.createElement('script')
     map.type = 'importmap'

parquet.js

@@ -1,6 +1,7 @@
 // Remote Parquet files over HTTP range requests, with the bytes, requests and network time each read costs
 // (as climate-globe/data.js).
 
+import { parquetMetadataAsync } from 'https://cdn.jsdelivr.net/npm/hyparquet@1.31.4/+esm'
 export { parquetMetadataAsync, parquetRead } from 'https://cdn.jsdelivr.net/npm/hyparquet@1.31.4/+esm'
 export { compressors } from 'https://cdn.jsdelivr.net/npm/hyparquet-compressors@1.1.2/+esm'
 
@@ -29,11 +30,27 @@ export async function countedFile(url, stats, tailSize = TAIL) {
   const range = r.headers.get('content-range')                                    // "bytes a-b/size"; absent if whole
   const byteLength = range ? Number(range.split('/')[1]) : tail.byteLength
   const tailStart = byteLength - tail.byteLength
-  return {
-    byteLength,
+  const file = {
+    byteLength, stats,                                   // stats: the read being counted, set again by openFile
     async slice(start, end = byteLength) {
       if (start >= tailStart) return tail.slice(start - tailStart, end - tailStart)
-      return (await rangeGet(url, `${start}-${end - 1}`, stats))[1]
+      return (await rangeGet(url, `${start}-${end - 1}`, file.stats))[1]
     },
   }
+  return file
+}
+
+const opened = new Map()                       // URL -> {file, metadata}: a file's footer is read once per page
+
+/** A remote file and its metadata, opened once; later reads are counted in `stats`. */
+export async function openFile(url, stats) {
+  if (!opened.has(url)) {
+    opened.set(url, (async () => {
+      const file = await countedFile(url, stats)
+      return { file, metadata: await parquetMetadataAsync(file, { initialFetchSize: TAIL }) }
+    })().catch(e => { opened.delete(url); throw e }))
+  }
+  const found = await opened.get(url)
+  found.file.stats = stats
+  return found
 }

samples.js

@@ -1,21 +1,18 @@
 // One Core sample from its image file on Hugging Face: the row group that holds it, thumbnail column only.
 //
 //   footprint row (part, parquet_row) -> <images>/part_NNNNN.parquet (one row group per sample)
-//     -> footer (kept per file: 0.2-1.5 MB) -> that row group's thumbnail (and product_id where the file has it)
+//     -> footer (read once per file, parquet.js openFile: 0.2-1.5 MB) -> that row group's thumbnail (and product_id where the file has it)
 //     -> an object URL for <img>
 
-import { compressors, countedFile, newStats, parquetMetadataAsync, parquetRead, TAIL } from './parquet.js'
-
-const footers = new Map()                         // image file URL -> its metadata, after the first read
+import { compressors, newStats, openFile, parquetRead } from './parquet.js'
 
 export const imageUrl = (info, part) => `${info.images}part_${String(part).padStart(5, '0')}.parquet`
 
 /** The thumbnail of one sample: {src (object URL), productId, url, stats}. */
 export async function loadThumbnail(info, sample) {
   const stats = newStats(), url = imageUrl(info, sample.part)
-  const file = await countedFile(url, stats, footers.has(url) ? 8 : TAIL)           // 8 bytes: the size only
-  if (!footers.has(url)) footers.set(url, await parquetMetadataAsync(file, { initialFetchSize: TAIL }))
-  const metadata = footers.get(url), names = metadata.schema.slice(1).map(c => c.name)
+  const { file, metadata } = await openFile(url, stats)                          // footer read once per file
+  const names = metadata.schema.slice(1).map(c => c.name)
   let rowStart = 0
   for (let g = 0; g < sample.parquet_row; g++) rowStart += Number(metadata.row_groups[g].num_rows)
   const columns = ['thumbnail', ...(names.includes('product_id') ? ['product_id'] : [])]