From 00fbd41402db59a11d7442cc5bdc058c75c02ff1 Mon Sep 17 00:00:00 2001
From: Pete Gadomski <pete.gadomski@gmail.com>
Date: Mon, 6 Oct 2025 17:24:10 -0600
Subject: [PATCH] fix: also set visual when picking items

---
 src/app.tsx | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index b2f1d06..fef0576 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -118,17 +118,7 @@ export default function App() {
     setPicked(undefined);
     setItems(undefined);
     setDatetimeBounds(undefined);
-
-    let cogTileHref = undefined;
-    if (value && value.assets) {
-      for (const asset of Object.values(value.assets)) {
-        if (isCog(asset) && isVisual(asset)) {
-          cogTileHref = asset.href as string;
-          break;
-        }
-      }
-    }
-    setCogTileHref(cogTileHref);
+    setCogTileHref(value && getCogTileHref(value));
 
     if (value && (value.title || value.id)) {
       document.title = "stac-map | " + (value.title || value.id);
@@ -137,6 +127,10 @@ export default function App() {
     }
   }, [value]);
 
+  useEffect(() => {
+    setCogTileHref(picked && getCogTileHref(picked));
+  }, [picked]);
+
   useEffect(() => {
     setPicked(stacGeoparquetItem);
   }, [stacGeoparquetItem]);
@@ -217,3 +211,16 @@ function getInitialHref() {
   }
   return href;
 }
+
+function getCogTileHref(value: StacValue) {
+  let cogTileHref = undefined;
+  if (value.assets) {
+    for (const asset of Object.values(value.assets)) {
+      if (isCog(asset) && isVisual(asset)) {
+        cogTileHref = asset.href as string;
+        break;
+      }
+    }
+  }
+  return cogTileHref;
+}