@walkthru-earth/objex 1.3.1 → 1.4.0

package/dist/components/viewers/cog/buildRgbLayer.js

@@ -0,0 +1,176 @@
+/**
+ * Layer-construction dispatch for the unified RGB picker.
+ *
+ * Decision rule:
+ *   - All three RGB channels point to the SAME asset → COGLayer. When a
+ *     `preflightGeotiff` is supplied, the per-channel `bandIndex` values are
+ *     translated into a `BandConfig` and run through `selectCogPipeline`,
+ *     which returns a custom `getTileData` / `renderTile` pair that swaps
+ *     bands as requested (the library's COGLayer does not accept a
+ *     `bandConfig` prop, only the resolved pipeline). Without a preflight
+ *     GeoTIFF the layer falls back to the library default pipeline, which
+ *     reads bands 0/1/2 in that order, correct for single-band per-asset
+ *     COGs and for the default natural-color order on pre-baked multi-band
+ *     visuals.
+ *   - Channels point to DIFFERENT assets → MultiCOGLayer with the legacy
+ *     `composite: { r, g, b }` keyed on asset keys. MultiCOGLayer reads band 0
+ *     of each source, per-channel band index is silently ignored on this path
+ *     (library limitation, see spec Known Limitations).
+ *
+ * `buildRgbLayer` ONLY constructs the layer. It does not add overlays,
+ * register cleanup, or touch deck.gl state. Caller owns lifecycle.
+ */
+import { COGLayer, MultiCOGLayer } from '@developmentseed/deck.gl-geotiff';
+import { allChannelsBand0, isSingleAssetComposite } from '@walkthru-earth/objex-utils';
+import { buildBandRenderPipeline, selectCogPipeline } from '../../../utils/cog.js';
+/**
+ * Build the appropriate deck.gl layer for an RGB composite.
+ *
+ * For single-asset composites the band indices flow through `selectCogPipeline`
+ * (when `preflightGeotiff` is provided) into a custom `getTileData` /
+ * `renderTile` pair that honors the requested R/G/B band order. Without a
+ * preflight GeoTIFF the layer uses the library's default pipeline (bands 0/1/2).
+ * For multi-asset composites a warning is logged (once per call) when any
+ * non-band-0 index is requested, since MultiCOGLayer cannot honor it today.
+ */
+export async function buildRgbLayer(opts) {
+    const assetByKey = new Map(opts.assets.map((a) => [a.key, a]));
+    const c = opts.composite;
+    console.debug('[buildRgbLayer]', {
+        id: opts.id,
+        composite: c,
+        single: isSingleAssetComposite(c),
+        assetKeys: opts.assets.map((a) => a.key),
+        hasPreflightGeotiff: !!opts.preflightGeotiff
+    });
+    if (isSingleAssetComposite(c)) {
+        const asset = assetByKey.get(c.r.assetKey);
+        if (!asset)
+            throw new Error(`unknown asset key: ${c.r.assetKey}`);
+        const url = await opts.resolveHref(asset.href);
+        if (opts.signal.aborted)
+            throw new DOMException('Aborted', 'AbortError');
+        const onGeoTIFFLoad = (_g, info) => {
+            opts.onLoad?.({
+                kind: 'cog',
+                bounds: info.geographicBounds
+            });
+        };
+        // Branch on whether we have a pre-opened GeoTIFF.
+        //   - Present: build a per-channel BandConfig from the composite, hand
+        //     it to selectCogPipeline (which inspects sampleFormat / bandCount)
+        //     and spread the resolved {getTileData?, renderTile?} into COGLayer.
+        //     This is the only path that honors a non-default per-channel
+        //     bandIndex on a single-asset multi-band COG (e.g. NAIP NIR-R-G).
+        //   - Absent: fall back to the library's default render pipeline. Bands
+        //     0/1/2 are read in that order, which is correct for single-band
+        //     per-asset COGs (every bandIndex is 0 anyway) and for the default
+        //     natural-color order on pre-baked multi-band visuals.
+        if (opts.preflightGeotiff) {
+            const bandConfig = {
+                mode: 'rgb',
+                rBand: c.r.bandIndex,
+                gBand: c.g.bandIndex,
+                bBand: c.b.bandIndex,
+                band: 0,
+                colorRamp: 'viridis'
+            };
+            console.debug('[buildRgbLayer] cog single-asset with preflight', {
+                id: opts.id,
+                bandConfig,
+                url
+            });
+            const pipeline = selectCogPipeline(opts.preflightGeotiff, {
+                bandConfig,
+                rescale: opts.rescale
+            });
+            const layer = new COGLayer({
+                id: opts.id,
+                geotiff: url,
+                ...pipeline,
+                pool: opts.pool ?? undefined,
+                epsgResolver: opts.epsgResolver,
+                signal: opts.signal,
+                onGeoTIFFLoad
+            });
+            return { kind: 'cog', layer };
+        }
+        console.debug('[buildRgbLayer] cog single-asset (library default pipeline)', {
+            id: opts.id,
+            url
+        });
+        // Fallback: no preflight GeoTIFF supplied. COGLayer's typed prop surface
+        // does not include `renderPipeline` (only `getTileData` + `renderTile`),
+        // so we cannot apply the band render pipeline statically here. Without
+        // a preflight to feed `selectCogPipeline`, we have no way to inspect
+        // sample format / band count up front, so we let the library infer its
+        // own pipeline from the GeoTIFF metadata at load time. Bands 0/1/2 are
+        // read in that order, which is correct for single-band per-asset COGs
+        // (every bandIndex is 0 anyway) and for the default natural-color order
+        // on pre-baked multi-band visuals (NAIP `image`, S2 `visual`).
+        const layer = new COGLayer({
+            id: opts.id,
+            geotiff: url,
+            pool: opts.pool ?? undefined,
+            epsgResolver: opts.epsgResolver,
+            signal: opts.signal,
+            onGeoTIFFLoad
+        });
+        return { kind: 'cog', layer };
+    }
+    if (!allChannelsBand0(c)) {
+        // Library limitation: MultiCOGLayer always reads band 0. Surface a
+        // console warning once per call so the consumer sees that the user's
+        // per-channel band index was dropped.
+        console.warn('[buildRgbLayer] multi-asset composite with non-band-0 indices, band index ignored on multi-asset path');
+    }
+    const sources = {};
+    for (const ref of [c.r, c.g, c.b, c.a].filter((x) => Boolean(x))) {
+        if (sources[ref.assetKey])
+            continue;
+        const asset = assetByKey.get(ref.assetKey);
+        if (!asset) {
+            console.warn('[buildRgbLayer] missing asset for ref', ref);
+            continue;
+        }
+        const url = await opts.resolveHref(asset.href);
+        if (opts.signal.aborted)
+            throw new DOMException('Aborted', 'AbortError');
+        sources[ref.assetKey] = { url };
+    }
+    const compositeSpec = {
+        r: c.r.assetKey,
+        g: c.g.assetKey,
+        b: c.b.assetKey
+    };
+    if (c.a && sources[c.a.assetKey])
+        compositeSpec.a = c.a.assetKey;
+    console.debug('[buildRgbLayer] multicog sources resolved', {
+        sourceKeys: Object.keys(sources),
+        composite: compositeSpec,
+        urls: Object.fromEntries(Object.entries(sources).map(([k, v]) => [k, v.url]))
+    });
+    const layer = new MultiCOGLayer({
+        id: opts.id,
+        sources,
+        composite: compositeSpec,
+        renderPipeline: buildBandRenderPipeline({
+            noDataVal: opts.noDataVal ?? null,
+            rescale: { ...opts.rescale }
+        }),
+        pool: opts.pool ?? undefined,
+        epsgResolver: opts.epsgResolver,
+        signal: opts.signal,
+        onGeoTIFFLoad: (_tiffs, info) => {
+            console.debug('[buildRgbLayer] MultiCOG onGeoTIFFLoad', {
+                id: opts.id,
+                bounds: info.geographicBounds
+            });
+            opts.onLoad?.({
+                kind: 'multicog',
+                bounds: info.geographicBounds
+            });
+        }
+    });
+    return { kind: 'multicog', layer };
+}

package/dist/components/viewers/map/AttributeTable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 import XIcon from '@lucide/svelte/icons/x';
-import { formatValue } from '../../../utils/format.js';
+import { formatValue } from '@walkthru-earth/objex-utils';
 
 let {
 	feature = null,

package/dist/components/viewers/map/MapContainer.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
+import { resolveBasemap } from '@walkthru-earth/objex-utils';
 import { onDestroy } from 'svelte';
 import { t } from '../../../i18n/index.svelte.js';
+import { appConfig } from '../../../stores/config.svelte.js';
 import { settings } from '../../../stores/settings.svelte.js';
 
 const MAP_STYLES = {
@@ -37,11 +39,34 @@ let {
 	bounds?: [number, number, number, number];
 } = $props();
 
-const resolvedStyle = $derived(style ?? MAP_STYLES[settings.resolved]);
+function toMapStyle(variant: 'light' | 'dark'): string | maplibregl.StyleSpecification {
+	const bm = resolveBasemap(appConfig.value, variant, settings.basemapId);
+	if (!bm) return MAP_STYLES[variant];
+	if (bm.type === 'raster') {
+		return {
+			version: 8,
+			sources: {
+				'objex-basemap': { type: 'raster', tiles: [bm.url], tileSize: 256 }
+			},
+			layers: [{ id: 'objex-basemap', type: 'raster', source: 'objex-basemap' }]
+		};
+	}
+	return bm.url;
+}
+
+const resolvedBasemap = $derived(
+	style ? undefined : resolveBasemap(appConfig.value, settings.resolved, settings.basemapId)
+);
+const resolvedStyle = $derived(style ?? toMapStyle(settings.resolved));
+// Stable identity for style-swap comparison: a raster StyleSpecification is a
+// fresh object on every derive, so compare by basemap id + variant instead.
+const styleKey = $derived(
+	style ? 'custom' : `${resolvedBasemap?.id ?? 'fallback'}:${settings.resolved}`
+);
 
 let containerEl: HTMLDivElement | undefined = $state();
 let map: maplibregl.Map | null = null;
-let currentStyleUrl: string | maplibregl.StyleSpecification | null = null;
+let currentStyleKey: string | null = null;
 let currentZoom = $state(2);
 let webglLost = $state(false);
 
@@ -56,7 +81,7 @@ function initMap() {
 		zoom
 	});
 
-	currentStyleUrl = resolvedStyle;
+	currentStyleKey = styleKey;
 
 	map.addControl(
 		new maplibregl.NavigationControl({ showCompass: true, visualizePitch: true }),
@@ -117,12 +142,13 @@ $effect(() => {
 	}
 });
 
-// React to theme changes — swap basemap style
+// React to theme / basemap changes — swap basemap style
 $effect(() => {
-	const newStyle = resolvedStyle;
-	if (map && currentStyleUrl !== newStyle && !style) {
-		currentStyleUrl = newStyle;
-		map.setStyle(newStyle);
+	const nextKey = styleKey;
+	const nextStyle = resolvedStyle;
+	if (map && currentStyleKey !== nextKey && !style) {
+		currentStyleKey = nextKey;
+		map.setStyle(nextStyle);
 	}
 });
 
@@ -132,11 +158,11 @@ onDestroy(() => {
 });
 </script>
 
-<div class="relative h-full w-full">
-	<div bind:this={containerEl} class="h-full w-full"></div>
+<div class="relative h-full w-full" style="touch-action: pan-x pan-y;">
+	<div bind:this={containerEl} class="h-full w-full" style="touch-action: none;"></div>
 	<!-- Zoom level indicator — positioned above nav controls -->
 	<div
-		class="pointer-events-none absolute bottom-[10rem] right-[10px] z-10 flex size-[29px] items-center justify-center rounded-full border border-zinc-300 bg-white shadow-sm dark:border-zinc-600 dark:bg-zinc-800"
+		class="pointer-events-none absolute bottom-[7rem] right-[10px] z-10 flex size-[29px] items-center justify-center rounded-full border border-zinc-300 bg-white shadow-sm dark:border-zinc-600 dark:bg-zinc-800 sm:bottom-[10rem]"
 	>
 		<span class="text-[10px] font-semibold tabular-nums text-zinc-600 dark:text-zinc-300">
 			{currentZoom.toFixed(1)}

package/dist/components/viewers/pmtiles/PmtilesArchiveView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+import { formatFileSize } from '@walkthru-earth/objex-utils';
 import type { PMTiles } from 'pmtiles';
 import { tileIdToZxy } from 'pmtiles';
 import {
@@ -8,7 +9,6 @@ import {
 	ResizablePaneGroup
 } from '../../ui/resizable/index.js';
 import { t } from '../../../i18n/index.svelte.js';
-import { formatFileSize } from '../../../utils/format.js';
 import type { PmtilesMetadata } from '../../../utils/pmtiles';
 import { highlightCode } from '../../../utils/shiki';
 

package/dist/components/viewers/pmtiles/PmtilesTileInspector.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
 import XIcon from '@lucide/svelte/icons/x';
+import { formatFileSize } from '@walkthru-earth/objex-utils';
 import type { PMTiles } from 'pmtiles';
 import { onDestroy } from 'svelte';
 import { t } from '../../../i18n/index.svelte.js';
-import { formatFileSize } from '../../../utils/format.js';
 import type { PmtilesMetadata } from '../../../utils/pmtiles';
 import {
 	type DecodedTile,

package/dist/components/viewers/stac/StacDatetimeBar.svelte

@@ -0,0 +1,175 @@
+<script lang="ts">
+import type { DatetimeFacet, FacetState } from '@walkthru-earth/objex-utils';
+import { formatDate } from '@walkthru-earth/objex-utils';
+import { t } from '../../../i18n/index.svelte.js';
+import { RangeSlider } from '../../ui/slider/index.js';
+
+/**
+ * Datetime range picker that sits above the item strip. Replaces the older
+ * preset dropdown ("last 7 days / 30 days / ...") with a continuous slider
+ * over the loaded items' min/max datetime, plus two `<input type="date">`
+ * fields for exact start / end picking. The histogram of loaded items is
+ * drawn behind the slider so the user can see where data is dense.
+ *
+ * State flows one-way: this component reads `facet` (built from the loaded
+ * items) and `state.datetime`, and emits `onChange(next)` with the merged
+ * `FacetState`. The parent decides how to apply it (push-down vs client-side).
+ *
+ * **Bbox scoping**: The parent (`StacMosaicViewer`) builds `facet` from
+ * `committedViews`, which is bbox-scoped in `api` and `parquet` modes (those
+ * sources push the viewport bbox to the server / SQL). So in viewport modes
+ * the histogram always reflects "what's available in the current bbox" and
+ * a pan triggers a fresh build via `reloadViewport()`. In `static` mode the
+ * histogram is global to the catalog by design (see the parent's `facets`
+ * derivation comment for why we do not client-side clip there).
+ */
+let {
+	facet,
+	state,
+	onChange
+}: {
+	/** DatetimeFacet built from the loaded items, or null when no datetime variance. */
+	facet: DatetimeFacet | null;
+	state: FacetState;
+	onChange: (next: FacetState) => void;
+} = $props();
+
+const bounds = $derived(
+	facet ? ([Date.parse(facet.min), Date.parse(facet.max)] as [number, number]) : null
+);
+
+const sliderValue = $derived.by((): [number, number] | null => {
+	if (!bounds) return null;
+	const [lo, hi] = bounds;
+	const stateLo = state.datetime?.min ? Date.parse(state.datetime.min) : lo;
+	const stateHi = state.datetime?.max ? Date.parse(state.datetime.max) : hi;
+	return [Number.isFinite(stateLo) ? stateLo : lo, Number.isFinite(stateHi) ? stateHi : hi];
+});
+
+function emit(min: string | undefined, max: string | undefined): void {
+	onChange({
+		...state,
+		datetime: min || max ? { min, max } : undefined
+	});
+}
+
+function setSlider(next: [number, number]): void {
+	if (!bounds) return;
+	const lo = next[0] <= bounds[0] ? undefined : new Date(next[0]).toISOString();
+	const hi = next[1] >= bounds[1] ? undefined : new Date(next[1]).toISOString();
+	emit(lo, hi);
+}
+
+/** ISO 8601 → `YYYY-MM-DD` for `<input type="date">` value. */
+function isoToDateInput(iso: string | undefined): string {
+	if (!iso) return '';
+	const t = Date.parse(iso);
+	if (!Number.isFinite(t)) return '';
+	return new Date(t).toISOString().slice(0, 10);
+}
+
+/** `<input type="date">` value → ISO 8601 (start of UTC day for min, end for max). */
+function dateInputToIso(value: string, kind: 'min' | 'max'): string | undefined {
+	if (!value) return undefined;
+	const stamp = kind === 'min' ? `${value}T00:00:00.000Z` : `${value}T23:59:59.999Z`;
+	const t = Date.parse(stamp);
+	return Number.isFinite(t) ? new Date(t).toISOString() : undefined;
+}
+
+function onMinInput(e: Event): void {
+	const v = (e.target as HTMLInputElement).value;
+	emit(dateInputToIso(v, 'min'), state.datetime?.max);
+}
+
+function onMaxInput(e: Event): void {
+	const v = (e.target as HTMLInputElement).value;
+	emit(state.datetime?.min, dateInputToIso(v, 'max'));
+}
+
+function clearRange(): void {
+	emit(undefined, undefined);
+}
+
+/** `YYYY-MM-DD` for today (UTC) — used as the max-input default. */
+function todayDateInput(): string {
+	return new Date().toISOString().slice(0, 10);
+}
+
+// Display defaults when the user has not set a filter yet:
+//   - min input falls back to the earliest datetime in the loaded data
+//     (`facet.min`), so the input hints at the available range instead of
+//     showing `mm / dd / yyyy`.
+//   - max input falls back to "today" so the visible window always extends
+//     to "now" regardless of whether items in the current viewport are
+//     stale. Both fallbacks are display-only — the actual `state.datetime`
+//     stays undefined until the user picks a value, so an empty `state`
+//     means "no filter" not "filter by today".
+const minInputValue = $derived(
+	isoToDateInput(state.datetime?.min) || (facet ? isoToDateInput(facet.min) : '')
+);
+const maxInputValue = $derived(isoToDateInput(state.datetime?.max) || todayDateInput());
+const isActive = $derived(Boolean(state.datetime?.min || state.datetime?.max));
+
+function fmtDate(ms: number): string {
+	if (!Number.isFinite(ms)) return '-';
+	return formatDate(ms);
+}
+
+const granularityLabel = $derived.by((): string | null => {
+	if (!facet) return null;
+	const word = t(`stac.granularity.${facet.granularity}`);
+	return t('stac.granularityLabel', { granularity: word });
+});
+</script>
+
+<div
+	class="pointer-events-auto flex flex-col gap-1.5 rounded-md border border-border bg-card/90 px-3 py-2 text-xs text-card-foreground shadow backdrop-blur-sm"
+>
+	<div class="flex flex-wrap items-center justify-between gap-2">
+		<span class="font-medium">{t('stac.filterDatetime')}</span>
+		<div class="flex flex-wrap items-center gap-1.5">
+			<input
+				type="date"
+				value={minInputValue}
+				onchange={onMinInput}
+				class="min-h-8 rounded border border-input bg-background px-2 py-1 text-xs tabular-nums sm:min-h-0 sm:px-1.5 sm:py-0.5 sm:text-[11px]"
+				aria-label={t('stac.filterDatetime')}
+			/>
+			<span class="text-muted-foreground">&rarr;</span>
+			<input
+				type="date"
+				value={maxInputValue}
+				onchange={onMaxInput}
+				class="min-h-8 rounded border border-input bg-background px-2 py-1 text-xs tabular-nums sm:min-h-0 sm:px-1.5 sm:py-0.5 sm:text-[11px]"
+				aria-label={t('stac.filterDatetime')}
+			/>
+			{#if isActive}
+				<button
+					type="button"
+					class="inline-flex min-h-8 items-center rounded border border-input px-2 py-1 text-xs hover:bg-accent sm:min-h-0 sm:px-1.5 sm:py-0.5 sm:text-[10px]"
+					style="touch-action: manipulation;"
+					onclick={clearRange}
+				>
+					{t('stac.resetFilters')}
+				</button>
+			{/if}
+		</div>
+	</div>
+
+	{#if facet && bounds && sliderValue}
+		<RangeSlider
+			min={bounds[0]}
+			max={bounds[1]}
+			value={sliderValue}
+			step={86_400_000}
+			histogram={facet.bins}
+			formatLabel={fmtDate}
+			onValueCommit={setSlider}
+		/>
+		{#if granularityLabel}
+			<div class="text-[10px] text-muted-foreground">{granularityLabel}</div>
+		{/if}
+	{:else}
+		<div class="text-[10px] text-muted-foreground">{t('stac.facetNoneAvailable')}</div>
+	{/if}
+</div>

package/dist/components/viewers/stac/StacDatetimeBar.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { DatetimeFacet, FacetState } from '@walkthru-earth/objex-utils';
+type $$ComponentProps = {
+    /** DatetimeFacet built from the loaded items, or null when no datetime variance. */
+    facet: DatetimeFacet | null;
+    state: FacetState;
+    onChange: (next: FacetState) => void;
+};
+declare const StacDatetimeBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type StacDatetimeBar = ReturnType<typeof StacDatetimeBar>;
+export default StacDatetimeBar;