@walkthru-earth/objex 1.3.0 → 1.4.0

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

@@ -0,0 +1,243 @@
+<script lang="ts">
+import {
+	type FacetSet,
+	type FacetState,
+	formatDate,
+	hasActiveFilters
+} from '@walkthru-earth/objex-utils';
+import type { Snippet } from 'svelte';
+import { t } from '../../../i18n/index.svelte.js';
+import { RangeSlider } from '../../ui/slider/index.js';
+
+/**
+ * Auto-faceted filter panel. Reads a `FacetSet` derived from the loaded
+ * item views and renders only the controls that have variance for *this*
+ * dataset. Currently surfaces:
+ *   - Datetime range slider with histogram (when `facets.datetime` set)
+ *   - Numeric range sliders for cloud cover / GSD (when present)
+ *   - Enum chip lists for collection / platform / constellation /
+ *     instruments / asset roles (when ≥2 distinct values)
+ *
+ * Mode awareness: this component does NOT push down to the API itself,
+ * the parent decides whether the current `state` should be applied
+ * client-side via `applyFacets` or translated to native query params via
+ * `toNativeQuery`. We just edit `state` and emit `onChange`.
+ */
+let {
+	facets,
+	state,
+	onChange,
+	onClose,
+	onReset,
+	footer
+}: {
+	facets: FacetSet;
+	state: FacetState;
+	onChange: (next: FacetState) => void;
+	onClose: () => void;
+	onReset: () => void;
+	/** Optional footer slot for fetch options (timeRange, itemLimit, mode label). */
+	footer?: Snippet;
+} = $props();
+
+const NUMERIC_LABEL_KEYS: Record<string, string> = {
+	cloudCover: 'stac.cloudCover',
+	gsd: 'stac.gsd'
+};
+
+const ENUM_LABEL_KEYS: Record<string, string> = {
+	collection: 'stac.collection',
+	platform: 'stac.platform',
+	constellation: 'stac.constellation',
+	instruments: 'stac.instruments',
+	assetRoles: 'stac.assetRoles'
+};
+
+function setDatetime(next: [number, number]): void {
+	if (!facets.datetime) return;
+	const minMs = Date.parse(facets.datetime.min);
+	const maxMs = Date.parse(facets.datetime.max);
+	const lo = next[0] <= minMs ? undefined : new Date(next[0]).toISOString();
+	const hi = next[1] >= maxMs ? undefined : new Date(next[1]).toISOString();
+	onChange({
+		...state,
+		datetime: lo || hi ? { min: lo, max: hi } : undefined
+	});
+}
+
+function setNumeric(
+	field: string,
+	next: [number, number],
+	facetMin: number,
+	facetMax: number
+): void {
+	const lo = next[0] <= facetMin ? undefined : next[0];
+	const hi = next[1] >= facetMax ? undefined : next[1];
+	const numeric = { ...(state.numeric ?? {}) };
+	if (lo == null && hi == null) {
+		delete (numeric as Record<string, unknown>)[field];
+	} else {
+		(numeric as Record<string, unknown>)[field] = { min: lo, max: hi };
+	}
+	onChange({
+		...state,
+		numeric: Object.keys(numeric).length > 0 ? numeric : undefined
+	});
+}
+
+function toggleEnum(field: string, value: string): void {
+	const enums = { ...(state.enums ?? {}) };
+	const current = (enums as Record<string, string[] | undefined>)[field] ?? [];
+	const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];
+	if (next.length === 0) {
+		delete (enums as Record<string, unknown>)[field];
+	} else {
+		(enums as Record<string, unknown>)[field] = next;
+	}
+	onChange({
+		...state,
+		enums: Object.keys(enums).length > 0 ? enums : undefined
+	});
+}
+
+function isEnumActive(field: string, value: string): boolean {
+	const list = (state.enums as Record<string, string[] | undefined> | undefined)?.[field];
+	return Array.isArray(list) && list.includes(value);
+}
+
+const datetimeBounds = $derived(
+	facets.datetime
+		? ([Date.parse(facets.datetime.min), Date.parse(facets.datetime.max)] as [number, number])
+		: null
+);
+
+const datetimeValue = $derived.by((): [number, number] | null => {
+	if (!datetimeBounds) return null;
+	const [lo, hi] = datetimeBounds;
+	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 fmtDate(ms: number): string {
+	if (!Number.isFinite(ms)) return '-';
+	return formatDate(ms);
+}
+
+function fmtNumber(n: number): string {
+	if (!Number.isFinite(n)) return '-';
+	if (Math.abs(n) >= 100) return Math.round(n).toString();
+	return n.toFixed(2);
+}
+
+const active = $derived(hasActiveFilters(state));
+</script>
+
+<div
+	class="pointer-events-auto absolute inset-x-0 bottom-0 z-20 flex max-h-[70vh] flex-col gap-3 overflow-hidden rounded-t-xl border border-border bg-card/95 p-3 text-xs text-card-foreground shadow-lg backdrop-blur-sm sm:inset-x-auto sm:bottom-auto sm:end-2 sm:top-12 sm:max-h-[calc(100%-3.5rem)] sm:w-[min(360px,calc(100%-1rem))] sm:rounded-md"
+>
+	<header class="flex items-center justify-between gap-2">
+		<div class="flex items-center gap-2">
+			<span class="font-medium">{t('stac.filters')}</span>
+			<span class="text-[10px] text-muted-foreground tabular-nums">
+				{t('stac.facetTotal', { count: facets.total })}
+			</span>
+		</div>
+		<div class="flex items-center gap-1">
+			{#if active}
+				<button
+					class="rounded border border-input px-1.5 py-0.5 text-[10px] hover:bg-accent"
+					onclick={onReset}
+				>
+					{t('stac.resetFilters')}
+				</button>
+			{/if}
+			<button
+				class="inline-flex min-h-9 min-w-9 items-center justify-center rounded p-0.5 text-base text-muted-foreground hover:bg-accent hover:text-card-foreground sm:min-h-0 sm:min-w-0 sm:text-xs"
+				onclick={onClose}
+				aria-label={t('stac.close')}
+				style="touch-action: manipulation;"
+			>
+				&times;
+			</button>
+		</div>
+	</header>
+
+	<div class="overflow-y-auto pr-1">
+		{#if !facets.datetime && facets.numeric.length === 0 && facets.enums.length === 0}
+			<div class="text-[10px] text-muted-foreground">{t('stac.facetNoneAvailable')}</div>
+		{/if}
+
+		{#if facets.datetime && datetimeBounds && datetimeValue}
+			<section class="mb-3">
+				<div class="mb-1 flex items-baseline justify-between">
+					<span class="text-muted-foreground">{t('stac.filterDatetime')}</span>
+					<span class="text-[10px] tabular-nums text-muted-foreground">
+						{facets.datetime.count}
+					</span>
+				</div>
+				<RangeSlider
+					min={datetimeBounds[0]}
+					max={datetimeBounds[1]}
+					value={datetimeValue}
+					step={86_400_000}
+					histogram={facets.datetime.bins}
+					formatLabel={fmtDate}
+					onValueCommit={setDatetime}
+				/>
+			</section>
+		{/if}
+
+		{#each facets.numeric as facet (facet.field)}
+			{@const stateRange = state.numeric?.[facet.field]}
+			{@const lo = stateRange?.min ?? facet.min}
+			{@const hi = stateRange?.max ?? facet.max}
+			<section class="mb-3">
+				<div class="mb-1 flex items-baseline justify-between">
+					<span class="text-muted-foreground">{t(NUMERIC_LABEL_KEYS[facet.field] ?? facet.field)}</span>
+					<span class="text-[10px] tabular-nums text-muted-foreground">{facet.count}</span>
+				</div>
+				<RangeSlider
+					min={facet.min}
+					max={facet.max}
+					value={[lo, hi]}
+					step={Math.max((facet.max - facet.min) / 200, 0.01)}
+					formatLabel={fmtNumber}
+					onValueCommit={(next) => setNumeric(facet.field, next, facet.min, facet.max)}
+				/>
+			</section>
+		{/each}
+
+		{#each facets.enums as facet (facet.field)}
+			<section class="mb-3">
+				<div class="mb-1 text-muted-foreground">
+					{t(ENUM_LABEL_KEYS[facet.field] ?? facet.field)}
+				</div>
+				<div class="flex flex-wrap gap-1">
+					{#each facet.values as entry (entry.value)}
+						{@const on = isEnumActive(facet.field, entry.value)}
+						<button
+							type="button"
+							class="rounded-full border px-2 py-0.5 text-[10px] transition-colors"
+							class:border-primary={on}
+							class:bg-primary={on}
+							class:text-primary-foreground={on}
+							class:border-input={!on}
+							class:hover:bg-accent={!on}
+							onclick={() => toggleEnum(facet.field, entry.value)}
+						>
+							{entry.value}
+							<span class="ms-1 text-[9px] opacity-70 tabular-nums">{entry.count}</span>
+						</button>
+					{/each}
+				</div>
+			</section>
+		{/each}
+
+		{#if footer}
+			<div class="mt-2 border-t border-border pt-3">
+				{@render footer()}
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,14 @@
+import { type FacetSet, type FacetState } from '@walkthru-earth/objex-utils';
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    facets: FacetSet;
+    state: FacetState;
+    onChange: (next: FacetState) => void;
+    onClose: () => void;
+    onReset: () => void;
+    /** Optional footer slot for fetch options (timeRange, itemLimit, mode label). */
+    footer?: Snippet;
+};
+declare const StacFilterPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type StacFilterPanel = ReturnType<typeof StacFilterPanel>;
+export default StacFilterPanel;

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

@@ -0,0 +1,223 @@
+<script lang="ts">
+import type { StacItemView } from '@walkthru-earth/objex-utils';
+import { copyToClipboard, formatDate, jsonReplacerBigInt } from '@walkthru-earth/objex-utils';
+import { onDestroy } from 'svelte';
+import { t } from '../../../i18n/index.svelte.js';
+
+/**
+ * Right-side slide-over showing a single STAC item's metadata, asset
+ * table, and (collapsible) raw JSON. Rendered when the parent has a
+ * non-null `selectedView`. The "x" button calls `onClose` so the parent
+ * can clear `selectedId` and trigger a footprint-layer refresh.
+ *
+ * Asset hrefs are presigned via the parent's `presign` callback before
+ * being shown to the user (the "Open" link). Without that, a click on
+ * an `s3://` href on a private bucket would 403, and an absolute
+ * `https://` href that belongs to the user's own bucket would lose its
+ * SigV4 query string. Same helper the strip and mosaic use, so the
+ * presign cache is shared and warm.
+ */
+let {
+	view,
+	presign,
+	onClose,
+	onFlyTo
+}: {
+	view: StacItemView;
+	presign: (href: string) => Promise<string>;
+	onClose: () => void;
+	onFlyTo?: () => void;
+} = $props();
+
+let showRaw = $state(false);
+let copyLabel = $state<string | null>(null);
+// Per-href resolved URL for the asset Open links, fetched on click. We
+// don't pre-resolve every asset because most users only open one or two
+// per item, and presigning is async + sometimes signs a remote endpoint.
+let resolved = $state<Record<string, string>>({});
+const inflight = new Set<string>();
+
+function formatDt(iso: string | null): string {
+	if (!iso) return '-';
+	const t = Date.parse(iso);
+	return Number.isFinite(t) ? formatDate(t) : iso;
+}
+
+async function openAsset(href: string): Promise<void> {
+	let url = resolved[href];
+	if (!url && !inflight.has(href)) {
+		inflight.add(href);
+		try {
+			url = await presign(href);
+			resolved = { ...resolved, [href]: url };
+		} catch {
+			url = href;
+		} finally {
+			inflight.delete(href);
+		}
+	}
+	if (url) window.open(url, '_blank', 'noopener,noreferrer');
+}
+
+async function copyId(): Promise<void> {
+	if (await copyToClipboard(view.id)) {
+		copyLabel = t('stac.copied');
+		setTimeout(() => {
+			copyLabel = null;
+		}, 1200);
+	}
+}
+
+async function copyJson(): Promise<void> {
+	const json = JSON.stringify(view.raw, jsonReplacerBigInt, 2);
+	if (await copyToClipboard(json)) {
+		copyLabel = t('stac.copied');
+		setTimeout(() => {
+			copyLabel = null;
+		}, 1200);
+	}
+}
+
+onDestroy(() => {
+	resolved = {};
+	copyLabel = null;
+});
+
+const assets = $derived(Object.entries(view.raw.assets ?? {}));
+</script>
+
+<aside
+	class="pointer-events-auto absolute inset-x-0 bottom-0 z-20 flex max-h-[65vh] flex-col gap-2 overflow-hidden rounded-t-xl border border-border bg-card/95 p-3 text-xs text-card-foreground shadow-lg backdrop-blur-sm sm:inset-x-auto sm:bottom-auto sm:end-2 sm:top-12 sm:max-h-[calc(100%-3.5rem)] sm:w-[min(360px,calc(100%-1rem))] sm:rounded-md"
+>
+	<header class="flex items-start justify-between gap-2">
+		<div class="min-w-0 flex-1">
+			<div class="truncate font-medium" title={view.id}>{view.id}</div>
+			{#if view.collection}
+				<div class="truncate text-[10px] text-muted-foreground">{view.collection}</div>
+			{/if}
+		</div>
+		<div class="flex items-center gap-1">
+			{#if onFlyTo && view.bbox}
+				<button
+					class="rounded border border-input px-1.5 py-0.5 text-[10px] hover:bg-accent"
+					onclick={onFlyTo}
+					title={t('stac.flyTo')}
+				>
+					{t('stac.flyTo')}
+				</button>
+			{/if}
+			<button
+				class="rounded border border-input px-1.5 py-0.5 text-[10px] hover:bg-accent"
+				onclick={copyId}
+			>
+				{copyLabel ?? t('stac.copyId')}
+			</button>
+			<button
+				class="inline-flex min-h-9 min-w-9 items-center justify-center rounded p-0.5 text-base text-muted-foreground hover:bg-accent hover:text-card-foreground sm:min-h-0 sm:min-w-0 sm:text-xs"
+				onclick={onClose}
+				aria-label={t('stac.close')}
+				style="touch-action: manipulation;"
+			>
+				&times;
+			</button>
+		</div>
+	</header>
+
+	<div class="overflow-y-auto">
+		<dl class="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1">
+			<dt class="text-muted-foreground">{t('stac.datetime')}</dt>
+			<dd class="tabular-nums">{formatDt(view.datetime)}</dd>
+			{#if view.endDatetime}
+				<dt class="text-muted-foreground">{t('stac.endDatetime')}</dt>
+				<dd class="tabular-nums">{formatDt(view.endDatetime)}</dd>
+			{/if}
+			{#if view.cloudCover != null}
+				<dt class="text-muted-foreground">{t('stac.cloudCover')}</dt>
+				<dd class="tabular-nums">{view.cloudCover.toFixed(1)}%</dd>
+			{/if}
+			{#if view.gsd != null}
+				<dt class="text-muted-foreground">{t('stac.gsd')}</dt>
+				<dd class="tabular-nums">{view.gsd} m</dd>
+			{/if}
+			{#if view.platform}
+				<dt class="text-muted-foreground">{t('stac.platform')}</dt>
+				<dd>{view.platform}</dd>
+			{/if}
+			{#if view.constellation}
+				<dt class="text-muted-foreground">{t('stac.constellation')}</dt>
+				<dd>{view.constellation}</dd>
+			{/if}
+			{#if view.instruments.length > 0}
+				<dt class="text-muted-foreground">{t('stac.instruments')}</dt>
+				<dd>{view.instruments.join(', ')}</dd>
+			{/if}
+			{#if view.epsg != null}
+				<dt class="text-muted-foreground">{t('stac.epsg')}</dt>
+				<dd class="tabular-nums">EPSG:{view.epsg}</dd>
+			{/if}
+			{#if view.bbox}
+				<dt class="text-muted-foreground">{t('mapInfo.bounds')}</dt>
+				<dd class="tabular-nums text-[10px]">
+					W {view.bbox[0].toFixed(3)}, S {view.bbox[1].toFixed(3)}<br />
+					E {view.bbox[2].toFixed(3)}, N {view.bbox[3].toFixed(3)}
+				</dd>
+			{/if}
+		</dl>
+
+		{#if assets.length > 0}
+			<div class="mt-3">
+				<div class="mb-1 text-muted-foreground">
+					{t('stac.assets', { count: assets.length })}
+				</div>
+				<ul class="space-y-1">
+					{#each assets as [key, asset] (key)}
+						<li class="rounded border border-border px-1.5 py-1">
+							<div class="flex items-center justify-between gap-2">
+								<span class="truncate font-medium">{key}</span>
+								<button
+									class="rounded border border-input px-1.5 py-0.5 text-[10px] hover:bg-accent"
+									onclick={() => void openAsset(asset.href)}
+								>
+									{t('stac.assetOpen')}
+								</button>
+							</div>
+							{#if asset.title}
+								<div class="truncate text-[10px] text-muted-foreground">{asset.title}</div>
+							{/if}
+							{#if asset.type}
+								<div class="truncate text-[10px] text-muted-foreground">{asset.type}</div>
+							{/if}
+							{#if Array.isArray(asset.roles) && asset.roles.length > 0}
+								<div class="mt-0.5 flex flex-wrap gap-1">
+									{#each asset.roles as role (role)}
+										<span class="rounded bg-muted px-1 text-[9px] text-muted-foreground">{role}</span>
+									{/each}
+								</div>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+
+		<div class="mt-3 border-t border-border pt-2">
+			<button
+				class="text-[10px] text-muted-foreground hover:text-card-foreground"
+				onclick={() => (showRaw = !showRaw)}
+			>
+				{showRaw ? t('stac.hideRaw') : t('stac.showRaw')}
+			</button>
+			{#if showRaw}
+				<div class="mt-1 flex justify-end">
+					<button
+						class="rounded border border-input px-1.5 py-0.5 text-[10px] hover:bg-accent"
+						onclick={copyJson}
+					>
+						{copyLabel ?? t('stac.copyJson')}
+					</button>
+				</div>
+				<pre class="mt-1 max-h-72 overflow-auto rounded bg-muted p-2 font-mono text-[10px] leading-tight">{JSON.stringify(view.raw, jsonReplacerBigInt, 2)}</pre>
+			{/if}
+		</div>
+	</div>
+</aside>

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

@@ -0,0 +1,10 @@
+import type { StacItemView } from '@walkthru-earth/objex-utils';
+type $$ComponentProps = {
+    view: StacItemView;
+    presign: (href: string) => Promise<string>;
+    onClose: () => void;
+    onFlyTo?: () => void;
+};
+declare const StacItemInspector: import("svelte").Component<$$ComponentProps, {}, "">;
+type StacItemInspector = ReturnType<typeof StacItemInspector>;
+export default StacItemInspector;