feat: share current viz key (#451)

https://github.com/user-attachments/assets/341713af-1455-47dc-b793-e39dac186259

Author: gadomski

src/components/header.tsx

@@ -40,6 +40,7 @@ export default function Header() {
 
 function ShareButton() {
   const { map } = useMap();
+  const visualization = useStore((store) => store.visualization);
   const [copied, setCopied] = useState(false);
 
   useEffect(() => {
@@ -51,6 +52,7 @@ function ShareButton() {
   async function copyShareUrl() {
     const url = new URL(window.location.href);
     if (map) url.searchParams.set("bbox", getPaddedViewportBbox(map).join(","));
+    if (visualization) url.searchParams.set("viz", visualization);
     await navigator.clipboard.writeText(url.toString());
     setCopied(true);
   }

src/components/url-bootstrap.tsx

@@ -14,6 +14,8 @@ export default function UrlBootstrap({
     if (initial) useStore.getState().setHref(initial);
     const projection = resolveInitialProjection();
     if (projection) useStore.getState().setProjection(projection);
+    const viz = new URLSearchParams(location.search).get("viz");
+    if (viz) useStore.getState().setVisualization(viz);
     return null;
   });
 

src/components/value.tsx

@@ -92,8 +92,8 @@ export default function Value({
     <Stack gap={4}>
       <Stack gap={4}>
         <Stack gap={2}>
-          <Heading>
-            <HStack gap={4}>
+          <Heading lineHeight={"shorter"}>
+            <HStack gap={4} wrap={"wrap"}>
               {getStacTitle(value)}
               {version && <Badge variant={"surface"}>{version}</Badge>}
             </HStack>

src/components/visualization.tsx

@@ -72,21 +72,38 @@ export default function Visualization({
     return createListCollection({ items });
   }, [cogAssets, tilejsonLink, wmtsLink, itemAssetKeys]);
 
-  const [selected, setSelected] = useState<string | undefined>(() => {
+  const visualization = useStore((store) => store.visualization);
+  const setVisualization = useStore((store) => store.setVisualization);
+
+  const validValues = useMemo(
+    () => new Set(collection.items.map((item) => item.value)),
+    [collection]
+  );
+
+  const fallback = useMemo(() => {
     const bestItemKey = pickBestKeyForItems(allItems);
     if (bestItemKey && cogAssets.length === 0 && !tilejsonLink && !wmtsLink) {
       return `items:${bestItemKey}`;
     }
     return collection.items[0]?.value;
-  });
+  }, [allItems, cogAssets, tilejsonLink, wmtsLink, collection]);
+
+  const selected =
+    visualization && validValues.has(visualization) ? visualization : fallback;
+
+  useEffect(() => {
+    if (visualization && validValues.has(visualization)) return;
+    if (fallback && fallback !== visualization) setVisualization(fallback);
+  }, [visualization, validValues, fallback, setVisualization]);
+
   const [enabled, setEnabled] = useState(true);
 
   const firstPage = itemPages[0];
   const [lastFirstPage, setLastFirstPage] = useState(firstPage);
   if (lastFirstPage !== firstPage) {
     setLastFirstPage(firstPage);
     const bestItemKey = pickBestKeyForItems(allItems);
-    if (bestItemKey) setSelected(`items:${bestItemKey}`);
+    if (bestItemKey) setVisualization(`items:${bestItemKey}`);
   }
 
   const setLayer = useStore((store) => store.setLayer);
@@ -181,7 +198,7 @@ export default function Visualization({
             size={"sm"}
             collection={collection}
             value={selected ? [selected] : []}
-            onValueChange={(e) => setSelected(e.value[0])}
+            onValueChange={(e) => setVisualization(e.value[0] ?? null)}
             disabled={!enabled}
           >
             <Select.HiddenSelect />

src/store.ts

@@ -77,6 +77,8 @@ export interface State {
   setAddErrorListener: (addErrorListener: boolean) => void;
   hivePartitioning: boolean;
   setHivePartitioning: (hivePartitioning: boolean) => void;
+  visualization: string | null;
+  setVisualization: (visualization: string | null) => void;
 }
 
 /**
@@ -146,6 +148,8 @@ export const useStore = create<State>()(
       setAddErrorListener: (addErrorListener) => set({ addErrorListener }),
       hivePartitioning: false,
       setHivePartitioning: (hivePartitioning) => set({ hivePartitioning }),
+      visualization: null,
+      setVisualization: (visualization) => set({ visualization }),
     }),
     {
       name: "stac-map-settings",