Polish UI: rename, side-by-side plots, larger markers, random star button

- Rename app to "StarEmbed Explorer"
- Show raw and phase-folded light curves simultaneously side by side
- Double marker size (4 → 8) for better legibility
- Add "Random" button in source panel toolbar to jump to a random source

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

Author: nabeelre

src/App.jsx

@@ -11,7 +11,6 @@ export default function App() {
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(true);
   const [selectedIdx, setSelectedIdx] = useState(null);
-  const [plotMode, setPlotMode] = useState("raw");
   const [classFilter, setClassFilter] = useState("");
   const [page, setPage] = useState(0);
 
@@ -54,7 +53,7 @@ export default function App() {
   return (
     <div className="app">
       <header>
-        <h1>PTF Variable Star Explorer</h1>
+        <h1>StarEmbed Explorer</h1>
         <p className="meta">
           Source: <code>{config.dataSource}</code>
           {" · "}
@@ -78,6 +77,13 @@ export default function App() {
               }}
             />
             <span className="count-badge">{filteredRows.length}</span>
+            <button
+              className="random-btn"
+              onClick={() => setSelectedIdx(Math.floor(Math.random() * rows.length))}
+              title="Jump to a random source"
+            >
+              ⚄ Random
+            </button>
           </div>
 
           <div className="table-scroll">
@@ -96,10 +102,7 @@ export default function App() {
                   <tr
                     key={row.sourceid}
                     className={idx === selectedIdx ? "selected" : ""}
-                    onClick={() => {
-                      setSelectedIdx(idx);
-                      setPlotMode("raw");
-                    }}
+                    onClick={() => setSelectedIdx(idx)}
                   >
                     <td className="mono">{row.sourceid}</td>
                     <td>
@@ -134,11 +137,7 @@ export default function App() {
 
         <section className="detail-panel">
           {selectedRow ? (
-            <SourceDetail
-              row={selectedRow}
-              plotMode={plotMode}
-              onPlotModeChange={setPlotMode}
-            />
+            <SourceDetail row={selectedRow} />
           ) : (
             <p className="empty-hint">← Select a source to explore its light curve.</p>
           )}
@@ -148,7 +147,7 @@ export default function App() {
   );
 }
 
-function SourceDetail({ row, plotMode, onPlotModeChange }) {
+function SourceDetail({ row }) {
   const g = row.lightcurve.g_PTF;
   const R = row.lightcurve.R_PTF;
   const gGood = g?.goodflag?.filter((f) => f === 1).length ?? 0;
@@ -190,24 +189,16 @@ function SourceDetail({ row, plotMode, onPlotModeChange }) {
         <MetaItem label="R obs (good)" value={`${R?.length ?? 0} (${RGood})`} />
       </div>
 
-      <div className="plot-controls">
-        <button
-          className={plotMode === "raw" ? "active" : ""}
-          onClick={() => onPlotModeChange("raw")}
-        >
-          Raw
-        </button>
-        <button
-          className={plotMode === "folded" ? "active" : ""}
-          onClick={() => onPlotModeChange("folded")}
-          disabled={!row.period}
-          title={!row.period ? "No period available" : `Fold at P = ${row.period} d`}
-        >
-          Phase-folded
-        </button>
+      <div className="plot-row">
+        <div className="plot-col">
+          <p className="plot-label">Raw</p>
+          <LightCurvePlot row={row} mode="raw" />
+        </div>
+        <div className="plot-col">
+          <p className="plot-label">Phase-folded {row.period ? `(P = ${row.period.toFixed(4)} d)` : ""}</p>
+          <LightCurvePlot row={row} mode="folded" />
+        </div>
       </div>
-
-      <LightCurvePlot row={row} mode={plotMode} />
     </div>
   );
 }

src/components/LightCurvePlot.jsx

@@ -30,7 +30,7 @@ function buildTrace(bandKey, bandData, mode, period) {
     type: "scatter",
     mode: "markers",
     name: BANDS[bandKey].label,
-    marker: { color: BANDS[bandKey].color, size: 4, opacity: 0.8 },
+    marker: { color: BANDS[bandKey].color, size: 8, opacity: 0.8 },
   };
 }
 

src/index.css

@@ -236,41 +236,45 @@ body,
   color: #222;
 }
 
-/* ── Plot controls ────────────────────────────────────────── */
+/* ── Side-by-side plots ───────────────────────────────────── */
 
-.plot-controls {
+.plot-row {
   display: flex;
-  gap: 0.4rem;
-  margin-bottom: 0.5rem;
+  gap: 0.75rem;
+}
+
+.plot-col {
+  flex: 1;
+  min-width: 0;
+}
+
+.plot-label {
+  margin: 0 0 0.2rem;
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
-.plot-controls button {
-  padding: 0.3rem 0.9rem;
+/* ── Random button ────────────────────────────────────────── */
+
+.random-btn {
+  padding: 0.3rem 0.7rem;
   border: 1px solid #ccc;
   border-radius: 4px;
   background: #fff;
   cursor: pointer;
-  font-size: 0.875rem;
+  font-size: 0.8rem;
+  white-space: nowrap;
   color: #444;
-  transition: background 0.08s, border-color 0.08s;
 }
 
-.plot-controls button:hover:not(:disabled) {
+.random-btn:hover {
   background: #f0f6ff;
   border-color: #3a7cbf;
 }
 
-.plot-controls button.active {
-  background: #3a7cbf;
-  border-color: #3a7cbf;
-  color: #fff;
-}
-
-.plot-controls button:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
 /* ── Shared atoms ─────────────────────────────────────────── */
 
 .mono {