Sync from huggingface/lerobot-dataset-visualizer via hub-sync

src/components/action-insights-panel.tsx

@@ -20,6 +20,7 @@ import type {
   JerkyEpisode,
   AggAlignment,
 } from "@/app/[org]/[dataset]/[episode]/fetch-data";
+import { InlineLoading, PageHeader, Switch } from "@/components/ui";
 
 const FullscreenCtx = React.createContext(false);
 const useIsFullscreen = () => React.useContext(FullscreenCtx);
@@ -860,24 +861,7 @@ function VarianceHeatmap({
         <h3 className="text-sm font-semibold text-slate-200 mb-2">
           Cross-Episode Action Variance
         </h3>
-        <div className="flex items-center gap-2 text-slate-400 text-sm py-8 justify-center">
-          <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-            />
-          </svg>
-          Loading cross-episode data (sampled up to 500 episodes)…
-        </div>
+        <InlineLoading label="Loading cross-episode data…" />
       </div>
     );
   }
@@ -1600,40 +1584,19 @@ function ActionInsightsPanel({
   const showAgg = mode === "dataset" && !!crossEpisodeData;
 
   return (
-    <div className="w-full max-w-5xl mx-auto py-6 space-y-8">
-      <div className="flex items-center justify-between flex-wrap gap-4">
-        <div>
-          <h2 className="text-xl font-bold text-slate-100">Action Insights</h2>
-          <p className="text-sm text-slate-400 mt-1">
-            Data-driven analysis to guide action chunking, data quality
-            assessment, and training configuration.
-          </p>
-        </div>
-        <div className="flex items-center gap-3 shrink-0">
-          <span
-            className={`text-sm ${mode === "episode" ? "text-slate-100 font-medium" : "text-slate-500"}`}
-          >
-            Current Episode
-          </span>
-          <button
-            onClick={() =>
-              setMode((m) => (m === "episode" ? "dataset" : "episode"))
-            }
-            className={`relative inline-flex items-center w-9 h-5 rounded-full transition-colors shrink-0 ${mode === "dataset" ? "bg-cyan-500" : "bg-white/10"}`}
-            aria-label="Toggle episode/dataset scope"
-          >
-            <span
-              className={`inline-block w-3.5 h-3.5 bg-white rounded-full transition-transform ${mode === "dataset" ? "translate-x-[18px]" : "translate-x-[3px]"}`}
-            />
-          </button>
-          <span
-            className={`text-sm ${mode === "dataset" ? "text-slate-100 font-medium" : "text-slate-500"}`}
-          >
-            All Episodes
-            {crossEpisodeData ? ` (${crossEpisodeData.numEpisodes})` : ""}
-          </span>
-        </div>
-      </div>
+    <div className="w-full max-w-5xl mx-auto py-6 space-y-6">
+      <PageHeader
+        title="Action Insights"
+        description="Data-driven analysis to guide action chunking, data quality assessment, and training configuration."
+      >
+        <Switch
+          checked={mode === "dataset"}
+          onChange={(all) => setMode(all ? "dataset" : "episode")}
+          offLabel="Current Episode"
+          onLabel={`All Episodes${crossEpisodeData ? ` (${crossEpisodeData.numEpisodes})` : ""}`}
+          ariaLabel="Toggle episode/dataset scope"
+        />
+      </PageHeader>
 
       <FullscreenWrapper>
         <AutocorrelationSection

src/components/filtering-panel.tsx

@@ -12,6 +12,7 @@ import {
   ActionVelocitySection,
   FullscreenWrapper,
 } from "@/components/action-insights-panel";
+import { InlineLoading, PageHeader } from "@/components/ui";
 
 // ─── Shared small components ─────────────────────────────────────
 
@@ -359,14 +360,11 @@ function FilteringPanel({
   onViewFlaggedEpisodes,
 }: FilteringPanelProps) {
   return (
-    <div className="w-full max-w-5xl mx-auto py-6 space-y-8">
-      <div>
-        <h2 className="text-xl font-bold text-slate-100">Filtering</h2>
-        <p className="text-sm text-slate-400 mt-1">
-          Identify and flag problematic episodes for removal. Flagged episodes
-          appear in the sidebar and can be exported as a CLI command.
-        </p>
-      </div>
+    <div className="w-full max-w-5xl mx-auto py-6 space-y-6">
+      <PageHeader
+        title="Filtering"
+        description="Identify and flag problematic episodes for removal. Flagged episodes appear in the sidebar and can be exported as a CLI command."
+      />
 
       <FlaggedIdsCopyBar
         repoId={repoId}
@@ -379,28 +377,7 @@ function FilteringPanel({
 
       {crossEpisodeLoading && (
         <div className="bg-[var(--surface-1)]/60 rounded-lg p-5 border border-white/10">
-          <div className="flex items-center gap-2 text-slate-400 text-sm py-4 justify-center">
-            <svg
-              className="animate-spin h-4 w-4"
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <circle
-                className="opacity-25"
-                cx="12"
-                cy="12"
-                r="10"
-                stroke="currentColor"
-                strokeWidth="4"
-              />
-              <path
-                className="opacity-75"
-                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-              />
-            </svg>
-            Loading cross-episode data…
-          </div>
+          <InlineLoading label="Loading cross-episode data…" />
         </div>
       )}
 

src/components/overview-panel.tsx

@@ -8,6 +8,7 @@ import type {
 } from "@/app/[org]/[dataset]/[episode]/fetch-data";
 import { useFlaggedEpisodes } from "@/context/flagged-episodes-context";
 import { proxyHfUrl } from "@/utils/auth";
+import { InlineLoading, PageHeader, Switch } from "@/components/ui";
 
 const PAGE_SIZE = 48;
 
@@ -152,26 +153,7 @@ export default function OverviewPanel({
   );
 
   if (loading || !data) {
-    return (
-      <div className="flex items-center gap-2 text-slate-400 text-sm py-12 justify-center">
-        <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          />
-        </svg>
-        Loading episode frames…
-      </div>
-    );
+    return <InlineLoading label="Loading episode frames…" />;
   }
 
   const allFrames = data.framesByCamera[selectedCamera] ?? [];
@@ -207,15 +189,11 @@ export default function OverviewPanel({
   const pageFrames = frames.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
 
   return (
-    <div className="w-full max-w-7xl mx-auto py-6 space-y-5">
-      <div>
-        <h2 className="text-xl font-bold text-slate-100">Frames</h2>
-        <p className="text-sm text-slate-400 mt-1">
-          Use first/last frame views to spot episodes with bad end states or
-          other anomalies. Hover over a thumbnail and click the flag icon to
-          mark episodes with wrong outcomes for review.
-        </p>
-      </div>
+    <div className="w-full max-w-5xl mx-auto py-6 space-y-6">
+      <PageHeader
+        title="Frames"
+        description="Use first/last frame views to spot episodes with bad end states or other anomalies. Hover over a thumbnail and click the flag icon to mark episodes with wrong outcomes for review."
+      />
 
       {/* Controls row */}
       <div className="flex items-center justify-between flex-wrap gap-4">
@@ -267,27 +245,13 @@ export default function OverviewPanel({
           )}
 
           {/* First / Last toggle */}
-          <div className="flex items-center gap-3">
-            <span
-              className={`text-sm ${!showLast ? "text-slate-100 font-medium" : "text-slate-500"}`}
-            >
-              First Frame
-            </span>
-            <button
-              onClick={() => setShowLast((v) => !v)}
-              className={`relative inline-flex items-center w-9 h-5 rounded-full transition-colors shrink-0 ${showLast ? "bg-cyan-500" : "bg-white/10"}`}
-              aria-label="Toggle first/last frame"
-            >
-              <span
-                className={`inline-block w-3.5 h-3.5 bg-white rounded-full transition-transform ${showLast ? "translate-x-[18px]" : "translate-x-[3px]"}`}
-              />
-            </button>
-            <span
-              className={`text-sm ${showLast ? "text-slate-100 font-medium" : "text-slate-500"}`}
-            >
-              Last Frame
-            </span>
-          </div>
+          <Switch
+            checked={showLast}
+            onChange={setShowLast}
+            offLabel="First Frame"
+            onLabel="Last Frame"
+            ariaLabel="Toggle first/last frame"
+          />
         </div>
 
         {/* Pagination */}

src/components/stats-panel.tsx

@@ -5,6 +5,7 @@ import type {
   EpisodeLengthStats,
   CameraInfo,
 } from "@/app/[org]/[dataset]/[episode]/fetch-data";
+import { InlineLoading, PageHeader, StatCard } from "@/components/ui";
 
 interface StatsPanelProps {
   datasetInfo: DatasetDisplayInfo;
@@ -108,15 +109,6 @@ function EpisodeLengthHistogram({
   );
 }
 
-function Card({ label, value }: { label: string; value: string | number }) {
-  return (
-    <div className="bg-[var(--surface-1)]/60 rounded-lg p-4 border border-white/10">
-      <p className="text-xs text-slate-400 uppercase tracking-wide">{label}</p>
-      <p className="text-xl font-bold tabular-nums mt-1">{value}</p>
-    </div>
-  );
-}
-
 function StatsPanel({
   datasetInfo,
   episodeLengthStats,
@@ -125,34 +117,36 @@ function StatsPanel({
   const els = episodeLengthStats;
 
   return (
-    <div className="w-full max-w-4xl mx-auto py-6 space-y-8">
-      <div>
-        <h2 className="text-xl text-slate-100">
-          <span className="font-bold">Dataset Statistics:</span>{" "}
-          <span className="font-normal text-slate-400">
-            {datasetInfo.repoId}
-          </span>
-        </h2>
-      </div>
+    <div className="w-full max-w-5xl mx-auto py-6 space-y-6">
+      <PageHeader
+        title="Statistics"
+        description={`Size, cameras and episode lengths of ${datasetInfo.repoId}.`}
+      />
 
       {/* Overview cards */}
       <div className="grid grid-cols-3 gap-4">
-        <Card label="Robot Type" value={datasetInfo.robot_type ?? "unknown"} />
-        <Card label="Dataset Version" value={datasetInfo.codebase_version} />
-        <Card label="Tasks" value={datasetInfo.total_tasks} />
+        <StatCard
+          label="Robot Type"
+          value={datasetInfo.robot_type ?? "unknown"}
+        />
+        <StatCard
+          label="Dataset Version"
+          value={datasetInfo.codebase_version}
+        />
+        <StatCard label="Tasks" value={datasetInfo.total_tasks} />
       </div>
 
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <Card
+        <StatCard
           label="Total Frames"
           value={datasetInfo.total_frames.toLocaleString()}
         />
-        <Card
+        <StatCard
           label="Total Episodes"
           value={datasetInfo.total_episodes.toLocaleString()}
         />
-        <Card label="FPS" value={datasetInfo.fps} />
-        <Card
+        <StatCard label="FPS" value={datasetInfo.fps} />
+        <StatCard
           label="Total Recording Time"
           value={formatTotalTime(datasetInfo.total_frames, datasetInfo.fps)}
         />
@@ -166,46 +160,17 @@ function StatsPanel({
           </h3>
           <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
             {datasetInfo.cameras.map((cam: CameraInfo) => (
-              <div
+              <StatCard
                 key={cam.name}
-                className="bg-[var(--surface-0)]/50 rounded-md p-3"
-              >
-                <p
-                  className="text-xs text-slate-400 mb-1 truncate"
-                  title={cam.name}
-                >
-                  {cam.name}
-                </p>
-                <p className="text-base font-bold tabular-nums">
-                  {cam.width}×{cam.height}
-                </p>
-              </div>
+                label={cam.name}
+                value={`${cam.width}×${cam.height}`}
+              />
             ))}
           </div>
         </div>
       )}
 
-      {/* Loading spinner for async stats */}
-      {loading && (
-        <div className="flex items-center gap-2 text-slate-400 text-sm py-4">
-          <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-            />
-          </svg>
-          Computing episode statistics…
-        </div>
-      )}
+      {loading && <InlineLoading label="Computing episode statistics…" />}
 
       {/* Episode length section */}
       {els && (
@@ -215,21 +180,24 @@ function StatsPanel({
               Episode Lengths
             </h3>
             <div className="grid grid-cols-3 md:grid-cols-5 gap-4 mb-4">
-              <Card
+              <StatCard
                 label="Shortest"
                 value={formatSeconds(els.shortestEpisodes[0]?.lengthSeconds)}
               />
               {/* longestEpisodes is sorted longest first. */}
-              <Card
+              <StatCard
                 label="Longest"
                 value={formatSeconds(els.longestEpisodes[0]?.lengthSeconds)}
               />
-              <Card label="Mean" value={formatSeconds(els.meanEpisodeLength)} />
-              <Card
+              <StatCard
+                label="Mean"
+                value={formatSeconds(els.meanEpisodeLength)}
+              />
+              <StatCard
                 label="Median"
                 value={formatSeconds(els.medianEpisodeLength)}
               />
-              <Card
+              <StatCard
                 label="Std Dev"
                 value={formatSeconds(els.stdEpisodeLength)}
               />

src/components/ui.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import React from "react";
+
+/**
+ * Shared building blocks for the analysis tabs (Statistics, Filtering, Frames, Action Insights), so
+ * their headings, cards, loading states and toggles look the same everywhere.
+ */
+
+/** Tab title and one-line description, with an optional control on the right. */
+export function PageHeader({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: React.ReactNode;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className="flex items-start justify-between flex-wrap gap-4">
+      <div className="min-w-0">
+        <h2 className="text-xl font-semibold text-slate-100">{title}</h2>
+        {description && (
+          <p className="text-sm text-slate-400 mt-1">{description}</p>
+        )}
+      </div>
+      {children && <div className="shrink-0">{children}</div>}
+    </div>
+  );
+}
+
+/** A labelled number: the label styled like the sidebar's, the value large and tabular. */
+export function StatCard({
+  label,
+  value,
+}: {
+  label: string;
+  value: React.ReactNode;
+}) {
+  return (
+    <div className="rounded-lg border border-white/10 bg-[var(--surface-1)]/60 px-4 py-3 min-w-0">
+      <p
+        className="text-[10px] uppercase tracking-wide text-slate-500 truncate"
+        title={label}
+      >
+        {label}
+      </p>
+      <p className="text-lg font-semibold text-slate-100 tabular mt-1 truncate">
+        {value}
+      </p>
+    </div>
+  );
+}
+
+export function Spinner({ className = "h-4 w-4" }: { className?: string }) {
+  return (
+    <svg
+      className={`animate-spin ${className}`}
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      />
+    </svg>
+  );
+}
+
+/** A spinner with a label, for a section that is still loading. */
+export function InlineLoading({ label }: { label: string }) {
+  return (
+    <div
+      className="flex items-center justify-center gap-2 py-8 text-sm text-slate-400"
+      role="status"
+    >
+      <Spinner />
+      {label}
+    </div>
+  );
+}
+
+/** Two-state switch with a label on each side; the active side is highlighted. */
+export function Switch({
+  checked,
+  onChange,
+  offLabel,
+  onLabel,
+  ariaLabel,
+}: {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  offLabel: React.ReactNode;
+  onLabel: React.ReactNode;
+  ariaLabel: string;
+}) {
+  const labelClass = (active: boolean) =>
+    `text-sm ${active ? "text-slate-100 font-medium" : "text-slate-500"}`;
+  return (
+    <div className="flex items-center gap-3">
+      <span className={labelClass(!checked)}>{offLabel}</span>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={ariaLabel}
+        onClick={() => onChange(!checked)}
+        className={`relative inline-flex items-center w-9 h-5 rounded-full transition-colors shrink-0 ${checked ? "bg-cyan-500" : "bg-white/10"}`}
+      >
+        <span
+          className={`inline-block w-3.5 h-3.5 bg-white rounded-full transition-transform ${checked ? "translate-x-[18px]" : "translate-x-[3px]"}`}
+        />
+      </button>
+      <span className={labelClass(checked)}>{onLabel}</span>
+    </div>
+  );
+}