Add dataset switcher dropdown

Introduce src/datasets.js as the single place to register datasets.
Each entry is either { source: "local", path } or { source: "hf",
dataset, config?, split? }. Switching the dropdown tears down the old
DataSource, reloads data, and picks a new random star — the rest of the
UI is identical regardless of source type.

The dropdown is hidden when only one dataset is configured so it
doesn't clutter the header for single-dataset setups.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: nabeelre

src/App.jsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from "react";
 import { createDataSource } from "./data";
-import { config } from "./config";
+import { DATASETS } from "./datasets.js";
 import LightCurvePlot from "./components/LightCurvePlot.jsx";
 
 export default function App() {
+  const [dataset, setDataset] = useState(DATASETS[0]);
   const [info, setInfo] = useState(null);
   const [rows, setRows] = useState([]);
   const [error, setError] = useState(null);
@@ -12,13 +13,21 @@ export default function App() {
 
   useEffect(() => {
     let cancelled = false;
-    const ds = createDataSource();
+    setLoading(true);
+    setError(null);
+    setRows([]);
+    setInfo(null);
+    setSelectedIdx(null);
+
+    const ds = createDataSource(dataset);
     Promise.all([ds.getInfo(), ds.getRows({ offset: 0, length: 200 })])
       .then(([info, rows]) => {
         if (cancelled) return;
         setInfo(info);
         setRows(rows);
-        setSelectedIdx(Math.floor(Math.random() * rows.length));
+        if (rows.length > 0) {
+          setSelectedIdx(Math.floor(Math.random() * rows.length));
+        }
       })
       .catch((err) => {
         if (cancelled) return;
@@ -28,40 +37,59 @@ export default function App() {
         if (cancelled) return;
         setLoading(false);
       });
+
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [dataset]);
 
   const pickRandom = () =>
     setSelectedIdx(Math.floor(Math.random() * rows.length));
 
   const selectedRow = selectedIdx !== null ? rows[selectedIdx] : null;
 
-  if (loading) return <div className="app"><p>Loading…</p></div>;
-  if (error) return <div className="app"><p className="error">Error: {error}</p></div>;
-
   return (
     <div className="app">
       <header>
         <div className="header-row">
           <div>
             <h1>StarEmbed Explorer</h1>
             <p className="meta">
-              Source: <code>{config.dataSource}</code>
-              {" · "}
-              {info?.numRows ?? rows.length} sources
-              {" · "}
-              g_PTF + R_PTF
+              {info
+                ? `${info.numRows ?? rows.length} sources · ${dataset.source === "hf" ? dataset.dataset : dataset.path}`
+                : " "}
             </p>
           </div>
-          <button className="random-btn" onClick={pickRandom}>
-            ⚄ Random star
-          </button>
+          <div className="header-controls">
+            {DATASETS.length > 1 && (
+              <select
+                className="dataset-select"
+                value={dataset.id}
+                onChange={(e) =>
+                  setDataset(DATASETS.find((d) => d.id === e.target.value))
+                }
+              >
+                {DATASETS.map((d) => (
+                  <option key={d.id} value={d.id}>
+                    {d.label}
+                  </option>
+                ))}
+              </select>
+            )}
+            <button
+              className="random-btn"
+              onClick={pickRandom}
+              disabled={rows.length === 0}
+            >
+              ⚄ Random star
+            </button>
+          </div>
         </div>
       </header>
 
-      {selectedRow && <SourceDetail row={selectedRow} />}
+      {loading && <p className="status-msg">Loading…</p>}
+      {error && <p className="error">Error: {error}</p>}
+      {!loading && !error && selectedRow && <SourceDetail row={selectedRow} />}
     </div>
   );
 }

src/data/index.js

@@ -2,11 +2,24 @@ import { config } from "../config.js";
 import { LocalDataSource } from "./LocalDataSource.js";
 import { HFDataSource } from "./HFDataSource.js";
 
-export function createDataSource() {
-  if (config.dataSource === "hf") {
-    return new HFDataSource(config.hf);
+/**
+ * Create a DataSource from a dataset descriptor (from src/datasets.js).
+ * Falls back to the env-var config when called with no argument.
+ */
+export function createDataSource(descriptor) {
+  if (descriptor) {
+    return descriptor.source === "hf"
+      ? new HFDataSource({
+          dataset: descriptor.dataset,
+          config: descriptor.config ?? "default",
+          split: descriptor.split ?? "train",
+        })
+      : new LocalDataSource({ path: descriptor.path });
   }
-  return new LocalDataSource(config.local);
+  // Env-var fallback (production builds / CI)
+  return config.dataSource === "hf"
+    ? new HFDataSource(config.hf)
+    : new LocalDataSource(config.local);
 }
 
 export { DataSource } from "./DataSource.js";

src/datasets.js

@@ -0,0 +1,29 @@
+/**
+ * All datasets available in the dropdown.
+ * The first entry is selected on load.
+ *
+ * Local entry:
+ *   { id, label, source: "local", path }
+ *   path is relative to public/ (same as VITE_LOCAL_DATA_PATH)
+ *
+ * HuggingFace entry:
+ *   { id, label, source: "hf", dataset, config?, split? }
+ *   dataset is "username/repo-name" on the HF Hub
+ */
+export const DATASETS = [
+  {
+    id: "ptf-north-local",
+    label: "PTF North — local",
+    source: "local",
+    path: "data/ptf_north.jsonl",
+  },
+  // Example HuggingFace entry — fill in dataset and uncomment to enable:
+  // {
+  //   id: "ptf-north-hf",
+  //   label: "PTF North — HuggingFace",
+  //   source: "hf",
+  //   dataset: "your-username/ptf-north",
+  //   config: "default",
+  //   split: "train",
+  // },
+];

src/index.css

@@ -29,6 +29,29 @@ body,
   margin-bottom: 1.5rem;
 }
 
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.dataset-select {
+  padding: 0.45rem 0.7rem;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background: #fff;
+  font-size: 0.875rem;
+  color: #333;
+  cursor: pointer;
+  max-width: 260px;
+}
+
+.dataset-select:focus {
+  outline: none;
+  border-color: #3a7cbf;
+  box-shadow: 0 0 0 2px rgba(58, 124, 191, 0.15);
+}
+
 .app header h1 {
   margin: 0 0 0.2rem;
   font-size: 1.4rem;
@@ -185,6 +208,11 @@ body,
   font-style: italic;
 }
 
+.status-msg {
+  color: #888;
+  padding: 0.5rem 0;
+}
+
 .error {
   color: #b00020;
   background: #fde7ea;