@walkthru-earth/objex 1.2.1 → 1.3.1

package/dist/components/viewers/CogViewer.svelte

@@ -11,12 +11,14 @@ import {
 	type BandConfig,
 	buildDataTypeLabel,
 	type CogInfo,
+	type CustomTileData,
 	clampBounds,
 	cleanupNativeBitmap,
 	createEpsgResolver,
 	DEFAULT_RESCALE,
 	defaultBandConfig,
 	fitCogBounds,
+	HISTOGRAM_BIN_COUNT,
 	inspectCogTags,
 	needsCustomPipelineForConfig,
 	normalizeCogGeotiff,
@@ -41,6 +43,8 @@ let showControls = $state(false);
 let bounds = $state<[number, number, number, number] | undefined>();
 let cogInfo = $state<CogInfo | null>(null);
 let bandConfig = $state<BandConfig | null>(null);
+let histogram = $state.raw<Uint32Array | null>(null);
+let histogramTick = $state(0);
 let rescale = $state<RescaleConfig>({ ...DEFAULT_RESCALE });
 // Palette-indexed COGs render through the library's Colormap module; a GPU
 // rescale at that stage is cosmetic and would confuse the legend. Keep the
@@ -58,16 +62,19 @@ let sampleFormatRef = 1;
 let isTiledRef = true;
 let clickHandlerRef: ((e: maplibregl.MapMouseEvent) => void) | null = null;
 let resolvedHttpsUrl: string | null = null;
-// True when the library-default uint pipeline will run. LinearRescale only
-// operates on already-normalized RGB 0..1, so the slider is meaningful only
-// here, and only for non-palette data (palette renders through Colormap).
-// `needsCustomPipelineForConfig` only touches read-only tags on the GeoTIFF,
-// safe to call outside reactive tracking.
+// LinearRescale operates on a 0..1 scalar. Two cases expose a meaningful
+// slider: (1) the library-default uint RGB pipeline (scales `color.rgb`
+// before presentation), and (2) our custom single-band CPU + GPU Colormap
+// path (scales `color.r` before the ramp sample). Palette COGs hide the
+// slider, the embedded ColorMap tag already bakes the display colors.
+// `needsCustomPipelineForConfig` only touches read-only tags, safe to call
+// outside reactive tracking.
 const rescaleApplicable = $derived.by(() => {
 	if (!cogInfo || !bandConfig || isPaletteIndexed) return false;
 	const g = geotiffRef;
 	if (!g) return false;
-	return !needsCustomPipelineForConfig(g, bandConfig);
+	if (!needsCustomPipelineForConfig(g, bandConfig)) return true;
+	return bandConfig.mode === 'single';
 });
 // Tracks whether the camera has already been framed for the current tab.
 // Prevents fitCogBounds from resetting the user's view when the band/style
@@ -110,6 +117,8 @@ $effect(() => {
 		error = null;
 		cogInfo = null;
 		bandConfig = null;
+		histogram = null;
+		histogramTick = 0;
 		rescale = { ...DEFAULT_RESCALE };
 		isPaletteIndexed = false;
 		pixelValue = null;
@@ -274,7 +283,10 @@ function buildAndAddLayer(
 
 	const cogInput = preflightGeotiff ?? resolvedHttpsUrl ?? '';
 
-	const layer = new COGLayer({
+	// Cast: `onViewportLoad` is forwarded by our pnpm patch to the inner
+	// TileLayer, but COGLayer's generated .d.ts does not expose it.
+	// biome-ignore lint/suspicious/noExplicitAny: upstream prop not yet in types
+	const cogProps: any = {
 		// Stable id per tab so rebuilds on band/style change don't force deck.gl
 		// to treat this as a brand-new layer and drop cached tile state.
 		id: `cog-layer-${tab.id}`,
@@ -283,6 +295,15 @@ function buildAndAddLayer(
 		epsgResolver,
 		signal,
 		...customProps,
+		// COG-native histogram: sum `content.histogram` over tiles currently
+		// visible in the viewport. Fires after every pan/zoom settles and
+		// reuses deck.gl's tile cache for free, cached tiles still carry
+		// their per-tile histogram so no rebake is needed on revisit.
+		onViewportLoad: (visibleTiles: unknown) => {
+			aggregateVisibleHistogram(
+				visibleTiles as ReadonlyArray<{ content?: unknown } | null | undefined>
+			);
+		},
 		onGeoTIFFLoad: (
 			loadedTiff: GeoTIFF,
 			{
@@ -329,7 +350,8 @@ function buildAndAddLayer(
 			}
 			loading = false;
 		}
-	});
+	};
+	const layer = new COGLayer(cogProps);
 
 	const overlay = new MapboxOverlay({
 		interleaved: false,
@@ -346,10 +368,54 @@ function buildAndAddLayer(
 	map.addControl(overlay as unknown as maplibregl.IControl);
 }
 
+// ─── Viewport-scoped histogram aggregation ───────────────────────
+
+/**
+ * Sum per-tile histograms from tiles currently visible in the viewport. COG
+ * pyramid semantics map cleanly: zoomed out → a handful of low-res overview
+ * tiles cover the whole scene; zoomed in → only the tiles intersecting the
+ * AOI are decoded. deck.gl reuses its tile cache on revisits so each cached
+ * tile still carries `content.histogram`, no rebake needed.
+ */
+function aggregateVisibleHistogram(
+	visibleTiles: ReadonlyArray<{ content?: unknown } | null | undefined>
+): void {
+	if (!visibleTiles || visibleTiles.length === 0) {
+		histogram = null;
+		histogramTick++;
+		return;
+	}
+	const summed = new Uint32Array(HISTOGRAM_BIN_COUNT);
+	let found = false;
+	for (const tile of visibleTiles) {
+		// COGLayer wraps our baker's return as `{data, forwardTransform,
+		// inverseTransform}` in `_getTileData`, so the histogram lives at
+		// `content.data.histogram`. MosaicLayer's sub-COGs follow the same
+		// shape. Fall back to `content.histogram` for future-proofing if
+		// upstream ever stops wrapping.
+		const content = tile?.content as
+			| { data?: CustomTileData; histogram?: Uint32Array }
+			| null
+			| undefined;
+		const bins = content?.data?.histogram ?? content?.histogram;
+		if (!bins || bins.length !== HISTOGRAM_BIN_COUNT) continue;
+		for (let i = 0; i < HISTOGRAM_BIN_COUNT; i++) summed[i] += bins[i];
+		found = true;
+	}
+	histogram = found ? summed : null;
+	histogramTick++;
+}
+
 // ─── Rebuild layer on band config change ─────────────────────────
 
 function handleConfigChange(newConfig: BandConfig) {
 	bandConfig = newConfig;
+	// Only the single-band CPU baker emits `onHistogram`. Clear the buffer on
+	// every mode/band change so (a) switching back to RGB hides stale bars
+	// that the rescale slider would otherwise draw on top of, and (b) picking
+	// a different single band starts a fresh distribution.
+	histogram = null;
+	histogramTick = 0;
 	if (!mapRef || !geotiffRef || !isTiledRef) return;
 
 	// Remove old overlay
@@ -486,6 +552,7 @@ onDestroy(cleanup);
 				{rescale}
 				rescaleApplicable={rescaleApplicable}
 				onRescaleChange={handleRescaleChange}
+				{histogram}
 			/>
 		{/if}
 

package/dist/components/viewers/MultiCogViewer.svelte

@@ -0,0 +1,416 @@
+<script lang="ts">
+import { MapboxOverlay } from '@deck.gl/mapbox';
+import { MultiCOGLayer } from '@developmentseed/deck.gl-geotiff';
+import { DecoderPool } from '@developmentseed/geotiff';
+import type maplibregl from 'maplibre-gl';
+import { onDestroy, untrack } from 'svelte';
+import { t } from '../../i18n/index.svelte.js';
+import { getAdapter } from '../../storage/index.js';
+import { buildProviderBaseUrl, type ProviderId } from '../../storage/providers.js';
+import { connectionStore } from '../../stores/connections.svelte.js';
+import { tabResources } from '../../stores/tab-resources.svelte.js';
+import type { Tab } from '../../types.js';
+import {
+	buildBandRenderPipeline,
+	clampBounds,
+	cleanupNativeBitmap,
+	createEpsgResolver,
+	fitCogBounds,
+	type RescaleConfig
+} from '../../utils/cog.js';
+import {
+	type BandMap,
+	type BandSlot,
+	extractSentinelBandAssets,
+	hasRgbBands,
+	isStacItem,
+	type StacItem,
+	type StacRoutableKind
+} from '../../utils/stac.js';
+import { buildHttpsUrlAsync } from '../../utils/url.js';
+import CogControls from './CogControls.svelte';
+import MapContainer from './map/MapContainer.svelte';
+
+interface Preset {
+	id: string;
+	labelKey: string;
+	composite: { r: BandSlot; g: BandSlot; b: BandSlot };
+}
+
+const PRESETS: Preset[] = [
+	{
+		id: 'true-color',
+		labelKey: 'map.multiCogPreset.trueColor',
+		composite: { r: 'red', g: 'green', b: 'blue' }
+	},
+	{
+		id: 'false-color-ir',
+		labelKey: 'map.multiCogPreset.falseColorIR',
+		composite: { r: 'nir', g: 'red', b: 'green' }
+	},
+	{
+		id: 'swir',
+		labelKey: 'map.multiCogPreset.swir',
+		composite: { r: 'swir2', g: 'swir1', b: 'red' }
+	},
+	{
+		id: 'vegetation',
+		labelKey: 'map.multiCogPreset.vegetation',
+		composite: { r: 'nir', g: 'swir1', b: 'red' }
+	},
+	{
+		id: 'agriculture',
+		labelKey: 'map.multiCogPreset.agriculture',
+		composite: { r: 'swir1', g: 'nir', b: 'blue' }
+	}
+];
+
+let { tab, classified }: { tab: Tab; classified?: StacRoutableKind } = $props();
+
+let loading = $state(true);
+let error = $state<string | null>(null);
+let showControls = $state(false);
+let bounds = $state<[number, number, number, number] | undefined>();
+let activePresetId = $state<string>('true-color');
+// Sentinel-2 L2A reflectance is scaled uint16 (raw / 10000 = reflectance).
+// After the default uint normalization the slider operates on 0..1, so 0.3
+// keeps typical land surfaces in the visible range without clipping.
+let rescale = $state<RescaleConfig>({ min: 0, max: 0.3 });
+
+let bandMap = $state.raw<BandMap>({});
+let abortController = new AbortController();
+let mapRef: maplibregl.Map | null = null;
+let overlayRef: MapboxOverlay | null = null;
+let hasFittedOnce = false;
+let presignCache = new Map<string, Promise<string>>();
+let loadGen = 0;
+let layerVersion = 0;
+let rebuildTimer: number | null = null;
+let lastRebuildAt = 0;
+
+// Throttle rebuilds so the rescale slider (oninput, fires per pixel of drag)
+// doesn't spawn N overlapping buildAndAddLayer calls that each addControl a
+// new MapboxOverlay, leaking every overlay but the last.
+const REBUILD_INTERVAL_MS = 750;
+
+let pool: DecoderPool | null = new DecoderPool();
+const epsgResolver = createEpsgResolver();
+
+const activePreset = $derived(PRESETS.find((p) => p.id === activePresetId) ?? PRESETS[0]);
+const availablePresets = $derived(
+	PRESETS.filter((p) => bandMap[p.composite.r] && bandMap[p.composite.g] && bandMap[p.composite.b])
+);
+
+$effect(() => {
+	if (!tab) return;
+	tab.id;
+	untrack(() => {
+		resetViewer();
+		if (mapRef) void loadItem(mapRef);
+	});
+});
+
+function resetViewer(): void {
+	abortController.abort();
+	abortController = new AbortController();
+	if (rebuildTimer != null) {
+		clearTimeout(rebuildTimer);
+		rebuildTimer = null;
+	}
+	lastRebuildAt = 0;
+	layerVersion = 0;
+	if (mapRef) cleanupNativeBitmap(mapRef);
+	if (mapRef && overlayRef) {
+		try {
+			mapRef.removeControl(overlayRef as unknown as maplibregl.IControl);
+		} catch {
+			/* already destroyed */
+		}
+	}
+	overlayRef = null;
+	bandMap = {};
+	presignCache = new Map();
+	loading = true;
+	error = null;
+	bounds = undefined;
+	activePresetId = 'true-color';
+	rescale = { min: 0, max: 0.3 };
+	hasFittedOnce = false;
+	showControls = false;
+}
+
+function scheduleLayerRebuild(map: maplibregl.Map, signal: AbortSignal): void {
+	if (rebuildTimer != null || signal.aborted) return;
+	const elapsed = performance.now() - lastRebuildAt;
+	const delay = lastRebuildAt === 0 ? 0 : Math.max(0, REBUILD_INTERVAL_MS - elapsed);
+	rebuildTimer = window.setTimeout(() => {
+		rebuildTimer = null;
+		if (signal.aborted) return;
+		lastRebuildAt = performance.now();
+		void buildAndAddLayer(map, ++layerVersion, signal);
+	}, delay);
+}
+
+function onMapReady(map: maplibregl.Map): void {
+	mapRef = map;
+	void loadItem(map);
+}
+
+function extractConnectionKey(href: string): string | null {
+	const conn = tab.connectionId ? connectionStore.getById(tab.connectionId) : undefined;
+	if (!conn) return null;
+	const base = buildProviderBaseUrl(
+		conn.provider as ProviderId,
+		conn.endpoint,
+		conn.bucket,
+		conn.region
+	).replace(/\/$/, '');
+	if (!base) return null;
+	const prefix = `${base}/`;
+	if (!href.startsWith(prefix)) return null;
+	return href.slice(prefix.length);
+}
+
+function presignHref(href: string): Promise<string> {
+	let cached = presignCache.get(href);
+	if (!cached) {
+		if (/^https?:\/\//i.test(href)) {
+			// Absolute URLs that belong to the tab's own bucket still need SigV4
+			// presigning on private buckets — `new URL(rel, base)` strips the
+			// base's query string when absolutizing band hrefs, so the signature
+			// is lost and the bare URL 403s.
+			const key = extractConnectionKey(href);
+			if (key !== null) {
+				cached = buildHttpsUrlAsync({ ...tab, path: key } as Tab).catch(() => href);
+			} else {
+				cached = Promise.resolve(href);
+			}
+		} else {
+			cached = buildHttpsUrlAsync({ ...tab, path: href } as Tab).catch(() => href);
+		}
+		presignCache.set(href, cached);
+	}
+	return cached;
+}
+
+async function loadItem(map: maplibregl.Map): Promise<void> {
+	const gen = ++loadGen;
+	const signal = abortController.signal;
+	try {
+		let item: StacItem | null = null;
+		if (classified && classified.kind === 'item') {
+			item = classified.item;
+		} else {
+			const adapter = getAdapter(tab.source, tab.connectionId);
+			const data = await adapter.read(tab.path, undefined, undefined, signal);
+			if (gen !== loadGen || signal.aborted) return;
+			const parsed = JSON.parse(new TextDecoder().decode(data));
+			if (!isStacItem(parsed)) {
+				error = t('map.multiCogMissingBands');
+				loading = false;
+				return;
+			}
+			item = parsed as StacItem;
+		}
+		if (!item) {
+			error = t('map.multiCogMissingBands');
+			loading = false;
+			return;
+		}
+
+		const bands = extractSentinelBandAssets(item);
+		if (!hasRgbBands(bands)) {
+			error = t('map.multiCogMissingBands');
+			loading = false;
+			return;
+		}
+		bandMap = bands;
+
+		if (Array.isArray(item.bbox) && item.bbox.length >= 4) {
+			const clamped = clampBounds({
+				west: Number(item.bbox[0]),
+				south: Number(item.bbox[1]),
+				east: Number(item.bbox[2]),
+				north: Number(item.bbox[3])
+			});
+			bounds = [clamped.west, clamped.south, clamped.east, clamped.north];
+			if (!hasFittedOnce) {
+				fitCogBounds(map, clamped);
+				hasFittedOnce = true;
+			}
+		}
+
+		await buildAndAddLayer(map, ++layerVersion, signal);
+	} catch (err) {
+		if (gen !== loadGen) return;
+		if (signal.aborted) return;
+		if (err instanceof DOMException && err.name === 'AbortError') return;
+		error = err instanceof Error ? err.message : String(err);
+		loading = false;
+	}
+}
+
+async function buildAndAddLayer(
+	map: maplibregl.Map,
+	version: number,
+	signal: AbortSignal
+): Promise<void> {
+	const composite = activePreset.composite;
+	const sources: Record<string, { url: string }> = {};
+	for (const slot of [composite.r, composite.g, composite.b]) {
+		const href = bandMap[slot];
+		if (!href) continue;
+		const url = await presignHref(href);
+		if (version !== layerVersion || signal.aborted) return;
+		sources[slot] = { url };
+	}
+
+	const layer = new MultiCOGLayer({
+		id: `multicog-${tab.id}-v${version}`,
+		sources,
+		composite: { r: composite.r, g: composite.g, b: composite.b },
+		renderPipeline: buildBandRenderPipeline({ noDataVal: 0, rescale: { ...rescale } }),
+		pool: pool ?? undefined,
+		epsgResolver,
+		signal,
+		onGeoTIFFLoad: (_tiffs, { geographicBounds }) => {
+			if (version !== layerVersion || signal.aborted) return;
+			const clamped = clampBounds(geographicBounds);
+			if (!hasFittedOnce) {
+				bounds = [clamped.west, clamped.south, clamped.east, clamped.north];
+				fitCogBounds(map, clamped);
+				hasFittedOnce = true;
+			}
+			loading = false;
+		}
+	});
+
+	if (overlayRef) {
+		overlayRef.setProps({ layers: [layer] });
+		return;
+	}
+
+	const overlay = new MapboxOverlay({
+		interleaved: false,
+		layers: [layer],
+		onError: (err: Error) => {
+			if (signal.aborted) return;
+			if (!error) {
+				error = err?.message || String(err);
+				loading = false;
+			}
+		}
+	});
+	overlayRef = overlay;
+	map.addControl(overlay as unknown as maplibregl.IControl);
+}
+
+function setPreset(id: string): void {
+	activePresetId = id;
+	if (mapRef) scheduleLayerRebuild(mapRef, abortController.signal);
+}
+
+function handleRescaleChange(next: RescaleConfig): void {
+	rescale = next;
+	if (mapRef) scheduleLayerRebuild(mapRef, abortController.signal);
+}
+
+function cleanup(): void {
+	abortController.abort();
+	if (rebuildTimer != null) {
+		clearTimeout(rebuildTimer);
+		rebuildTimer = null;
+	}
+	if (mapRef && overlayRef) {
+		try {
+			mapRef.removeControl(overlayRef as unknown as maplibregl.IControl);
+		} catch {
+			/* already removed */
+		}
+	}
+	if (mapRef) cleanupNativeBitmap(mapRef);
+	mapRef = null;
+	overlayRef = null;
+	bandMap = {};
+	presignCache.clear();
+	const maybeDestroy = pool as unknown as { destroy?: () => void; terminate?: () => void } | null;
+	if (maybeDestroy?.destroy) {
+		try {
+			maybeDestroy.destroy();
+		} catch {
+			/* ignore */
+		}
+	} else if (maybeDestroy?.terminate) {
+		try {
+			maybeDestroy.terminate();
+		} catch {
+			/* ignore */
+		}
+	}
+	pool = null;
+}
+
+$effect(() => {
+	const id = tab.id;
+	const unregister = tabResources.register(id, cleanup);
+	return unregister;
+});
+onDestroy(cleanup);
+</script>
+
+<div class="relative flex h-full overflow-hidden">
+	<div class="flex-1">
+		<MapContainer {onMapReady} {bounds} />
+	</div>
+
+	<div class="pointer-events-none absolute left-2 top-2 z-10 flex flex-col gap-1">
+		{#if loading}
+			<div class="rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm">
+				{t('map.loadingCog')}
+			</div>
+		{/if}
+		{#if error}
+			<div class="pointer-events-auto max-w-sm rounded bg-red-900/80 px-2 py-1 text-xs text-red-200">
+				{error}
+			</div>
+		{/if}
+	</div>
+
+	{#if !error && availablePresets.length > 0}
+		<div class="absolute right-2 top-2 z-10 flex items-center gap-1">
+			<label class="flex items-center gap-1 rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm">
+				<span class="text-muted-foreground">{t('map.multiCogPreset.label')}</span>
+				<select
+					class="rounded border border-border bg-background px-1 py-0.5 text-xs"
+					value={activePresetId}
+					onchange={(e) => setPreset((e.target as HTMLSelectElement).value)}
+				>
+					{#each availablePresets as p}
+						<option value={p.id}>{t(p.labelKey)}</option>
+					{/each}
+				</select>
+			</label>
+			<button
+				class="rounded bg-card/80 px-2 py-1 text-xs text-card-foreground backdrop-blur-sm hover:bg-card"
+				class:ring-1={showControls}
+				class:ring-primary={showControls}
+				onclick={() => {
+					showControls = !showControls;
+				}}
+			>
+				{t('cog.style')}
+			</button>
+		</div>
+
+		{#if showControls}
+			<CogControls
+				mode="multi"
+				bandCount={3}
+				onConfigChange={() => {}}
+				{rescale}
+				rescaleApplicable={true}
+				onRescaleChange={handleRescaleChange}
+			/>
+		{/if}
+	{/if}
+</div>

package/dist/components/viewers/MultiCogViewer.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Tab } from '../../types.js';
+import { type StacRoutableKind } from '../../utils/stac.js';
+type $$ComponentProps = {
+    tab: Tab;
+    classified?: StacRoutableKind;
+};
+declare const MultiCogViewer: import("svelte").Component<$$ComponentProps, {}, "">;
+type MultiCogViewer = ReturnType<typeof MultiCogViewer>;
+export default MultiCogViewer;

package/dist/components/viewers/StacMapViewer.svelte

@@ -2,7 +2,7 @@
 import type { Tab } from '../../types';
 import { buildHttpsUrlAsync } from '../../utils/url.js';
 
-let { tab }: { tab: Tab } = $props();
+let { tab, variant = 'stac-map' }: { tab: Tab; variant?: 'stac-map' | 'stac-browser' } = $props();
 
 let fileUrl = $state('');
 
@@ -19,9 +19,23 @@ $effect(() => {
 	};
 });
 
-const iframeSrc = $derived(
-	fileUrl ? `https://developmentseed.org/stac-map?href=${encodeURIComponent(fileUrl)}` : ''
-);
+const iframeSrc = $derived.by(() => {
+	if (!fileUrl) return '';
+	if (variant === 'stac-browser') {
+		// Radiant Earth STAC Browser is a Vue Router SPA. Its
+		// `#/external/<url>` route takes the catalog URL verbatim, splitting on
+		// `/`. Feeding it an `encodeURIComponent`-encoded URL makes the router
+		// hand `https%3A%2F%2F…` to `new URL()`, which reads the collapsed
+		// authority as a malformed port and throws
+		// `Port "%2F%2Fstorage.googleapis.com%2F…" is not a valid port`.
+		// Only escape the `#` character (which would otherwise terminate the
+		// hash route) so the rest of the URL flows through intact.
+		return `https://radiantearth.github.io/stac-browser/#/external/${fileUrl.replace(/#/g, '%23')}`;
+	}
+	return `https://developmentseed.org/stac-map?href=${encodeURIComponent(fileUrl)}`;
+});
+
+const iframeTitle = $derived(variant === 'stac-browser' ? 'STAC Browser' : 'stac-map');
 </script>
 
 <div class="relative flex h-full overflow-hidden">
@@ -29,7 +43,7 @@ const iframeSrc = $derived(
 		<iframe
 			src={iframeSrc}
 			class="h-full w-full border-0"
-			title="STAC Map"
+			title={iframeTitle}
 			allow="fullscreen"
 		></iframe>
 	{/if}

package/dist/components/viewers/StacMapViewer.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Tab } from '../../types';
 type $$ComponentProps = {
     tab: Tab;
+    variant?: 'stac-map' | 'stac-browser';
 };
 declare const StacMapViewer: import("svelte").Component<$$ComponentProps, {}, "">;
 type StacMapViewer = ReturnType<typeof StacMapViewer>;