Add panorama previews and repair beta export rendering

components/DraftEditor.tsx

@@ -5,6 +5,7 @@ import { api } from "./StartGame";
 import type { DatasetManifest } from "@/shared/protocol";
 import type { ProcessingJob } from "@/shared/processing-progress";
 import { ProcessingProgress } from "./ProcessingProgress";
+import { PanoramaPreview } from "./PanoramaPreview";
 type Draft = {
   id: string;
   name: string;
@@ -25,6 +26,7 @@ export function DraftEditor({ id }: { id: string }) {
     [error, setError] = useState(""),
     [message, setMessage] = useState(""),
     [busy, setBusy] = useState(false);
+  const [preview, setPreview] = useState<string | null>(null);
   useEffect(() => {
     let disposed = false;
     let timer: ReturnType<typeof setTimeout>;
@@ -55,6 +57,7 @@ export function DraftEditor({ id }: { id: string }) {
   async function save(submit = false) {
     setBusy(true);
     setError("");
+    setMessage("");
     try {
       await api(
         "datasets/" + id,
@@ -147,32 +150,47 @@ export function DraftEditor({ id }: { id: string }) {
       </p>
       <div className="preview-grid">
         {draft.previews.map((p) => (
-          <label key={p.id}>
-            <input
-              type="checkbox"
-              checked={selected.includes(p.id)}
-              disabled={!editable}
-              onChange={(e) =>
-                setSelected((s) =>
-                  e.target.checked
-                    ? [...s, p.id]
-                    : s.filter((id) => id !== p.id),
-                )
-              }
-            />
-            {p.image && (
-              <Image
-                src={p.image}
-                width={512}
-                height={512}
-                alt={`Viewpoint ${p.id}`}
-                unoptimized
+          <div className="preview-tile" key={p.id}>
+            <label>
+              <input
+                type="checkbox"
+                checked={selected.includes(p.id)}
+                disabled={!editable || busy}
+                aria-label={`Keep location ${p.id}`}
+                onChange={(e) =>
+                  setSelected((s) =>
+                    e.target.checked
+                      ? [...s, p.id]
+                      : s.filter((id) => id !== p.id),
+                  )
+                }
               />
+              {p.image && (
+                <Image
+                  src={p.image}
+                  width={512}
+                  height={512}
+                  alt={`Viewpoint ${p.id}`}
+                  unoptimized
+                />
+              )}
+              <span>{p.id}</span>
+            </label>
+            {p.image && (
+              <button className="button full" onClick={() => setPreview(p.id)}>
+                Look around
+              </button>
             )}
-            <span>{p.id}</span>
-          </label>
+          </div>
         ))}
       </div>
+      {preview && (
+        <PanoramaPreview
+          endpoint={`datasets/${id}/panoramas`}
+          initialId={preview}
+          onClose={() => setPreview(null)}
+        />
+      )}
       {editable && (
         <div className="inline-actions">
           <button