Add top jerky episodes

README.md

@@ -1,6 +1,6 @@
 # LeRobot Dataset Visualizer
 
-LeRobot Dataset Visualizer is a web application for interactive exploration and visualization of robotics datasets, particularly those in the LeRobot format. It enables users to browse, view, and analyze episodes from large-scale robotics datasets, combining synchronized video playback with rich, interactive data graphs.
+LeRobot Dataset Tool and Visualizer is a web application for interactive exploration and visualization of robotics datasets, particularly those in the LeRobot format. It enables users to browse, view, and analyze episodes from large-scale robotics datasets, combining synchronized video playback with rich, interactive data graphs.
 
 ## Project Overview
 

src/app/[org]/[dataset]/[episode]/fetch-data.ts

@@ -1391,6 +1391,11 @@ export type AggAlignment = {
   numPairs: number;
 };
 
+export type JerkyEpisode = {
+  episodeIndex: number;
+  meanAbsDelta: number;
+};
+
 export type CrossEpisodeVarianceData = {
   actionNames: string[];
   timeBins: number[];
@@ -1400,6 +1405,7 @@ export type CrossEpisodeVarianceData = {
   aggVelocity: AggVelocityStat[];
   aggAutocorrelation: AggAutocorrelation | null;
   speedDistribution: SpeedDistEntry[];
+  jerkyEpisodes: JerkyEpisode[];
   multimodality: number[][] | null;
   trajectoryClustering: TrajectoryClustering | null;
   aggAlignment: AggAlignment | null;
@@ -1692,6 +1698,18 @@ export async function loadCrossEpisodeActionVariance(
     return { chartData, suggestedChunk, shortKeys };
   })();
 
+  // Per-episode jerkiness: mean |Δa| across all dimensions
+  const jerkyEpisodes: JerkyEpisode[] = episodeActions.map(({ index, actions: ep }) => {
+    let sum = 0, count = 0;
+    for (let t = 1; t < ep.length; t++) {
+      for (let d = 0; d < actionDim; d++) {
+        sum += Math.abs((ep[t][d] ?? 0) - (ep[t - 1][d] ?? 0));
+        count++;
+      }
+    }
+    return { episodeIndex: index, meanAbsDelta: count > 0 ? sum / count : 0 };
+  }).sort((a, b) => b.meanAbsDelta - a.meanAbsDelta);
+
   // Speed distribution: all episode movement scores (not just lowest 10)
   const speedDistribution: SpeedDistEntry[] = movementScores.map(s => ({
     episodeIndex: s.episodeIndex,
@@ -1967,7 +1985,7 @@ export async function loadCrossEpisodeActionVariance(
   return {
     actionNames, timeBins, variance, numEpisodes: episodeActions.length,
     lowMovementEpisodes, aggVelocity, aggAutocorrelation,
-    speedDistribution, multimodality, trajectoryClustering, aggAlignment,
+    speedDistribution, jerkyEpisodes, multimodality, trajectoryClustering, aggAlignment,
   };
 }
 

src/app/layout.tsx

@@ -5,8 +5,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "LeRobot Dataset Visualizer",
-  description: "Visualization of LeRobot Datasets",
+  title: "LeRobot Dataset Tool and Visualizer",
+  description: "Tool and Visualizer for LeRobot Datasets",
 };
 
 export default function RootLayout({

src/app/page.tsx

@@ -128,7 +128,7 @@ function HomeInner() {
       {/* Centered Content */}
       <div className="relative z-10 h-screen flex flex-col items-center justify-center text-white text-center">
         <h1 className="text-4xl md:text-5xl font-bold mb-6 drop-shadow-lg">
-          LeRobot Dataset Visualizer
+          LeRobot Dataset Tool and Visualizer
         </h1>
         <form onSubmit={handleGo} className="flex gap-2 justify-center mt-6">
           <input

src/components/action-insights-panel.tsx

@@ -10,7 +10,7 @@ import {
   ResponsiveContainer,
   Tooltip,
 } from "recharts";
-import type { CrossEpisodeVarianceData, LowMovementEpisode, AggVelocityStat, AggAutocorrelation, SpeedDistEntry, TrajectoryClustering, AggAlignment } from "@/app/[org]/[dataset]/[episode]/fetch-data";
+import type { CrossEpisodeVarianceData, LowMovementEpisode, AggVelocityStat, AggAutocorrelation, SpeedDistEntry, JerkyEpisode, TrajectoryClustering, AggAlignment } from "@/app/[org]/[dataset]/[episode]/fetch-data";
 
 const DELIMITER = " | ";
 const COLORS = [
@@ -171,7 +171,7 @@ function AutocorrelationSection({ data, fps, agg, numEpisodes }: { data: Record<
 
 // ─── Action Velocity ─────────────────────────────────────────────
 
-function ActionVelocitySection({ data, agg, numEpisodes }: { data: Record<string, number>[]; agg?: AggVelocityStat[]; numEpisodes?: number }) {
+function ActionVelocitySection({ data, agg, numEpisodes, jerkyEpisodes }: { data: Record<string, number>[]; agg?: AggVelocityStat[]; numEpisodes?: number; jerkyEpisodes?: JerkyEpisode[] }) {
   const actionKeys = useMemo(() => (data.length > 0 ? getActionKeys(data[0]) : []), [data]);
 
   const fallbackStats = useMemo(() => {
@@ -299,6 +299,46 @@ function ActionVelocitySection({ data, agg, numEpisodes }: { data: Record<string
         </ul>
         <p className="text-xs text-slate-500 pt-1">{insight.tip}</p>
       </div>
+
+      {jerkyEpisodes && jerkyEpisodes.length > 0 && <JerkyEpisodesList episodes={jerkyEpisodes} />}
+    </div>
+  );
+}
+
+function JerkyEpisodesList({ episodes }: { episodes: JerkyEpisode[] }) {
+  const [showAll, setShowAll] = useState(false);
+  const display = showAll ? episodes : episodes.slice(0, 15);
+
+  return (
+    <div className="bg-slate-900/60 rounded-md px-4 py-3 border border-slate-700/60 space-y-2">
+      <div className="flex items-center justify-between">
+        <p className="text-sm font-medium text-slate-200">
+          Most Jerky Episodes <span className="text-xs text-slate-500 font-normal">sorted by mean |Δa|</span>
+        </p>
+        {episodes.length > 15 && (
+          <button onClick={() => setShowAll(v => !v)} className="text-xs text-slate-400 hover:text-slate-200 transition-colors">
+            {showAll ? "Show top 15" : `Show all ${episodes.length}`}
+          </button>
+        )}
+      </div>
+      <div className="max-h-48 overflow-y-auto">
+        <table className="w-full text-xs">
+          <thead>
+            <tr className="text-slate-500 border-b border-slate-700">
+              <th className="text-left py-1 pr-3">Episode</th>
+              <th className="text-right py-1">Mean |Δa|</th>
+            </tr>
+          </thead>
+          <tbody>
+            {display.map(e => (
+              <tr key={e.episodeIndex} className="border-b border-slate-800/40 text-slate-300">
+                <td className="py-1 pr-3">ep {e.episodeIndex}</td>
+                <td className="py-1 text-right tabular-nums">{e.meanAbsDelta.toFixed(4)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }
@@ -1135,7 +1175,7 @@ const ActionInsightsPanel: React.FC<ActionInsightsPanelProps> = ({
       </div>
 
       <AutocorrelationSection data={flatChartData} fps={fps} agg={showAgg ? crossEpisodeData?.aggAutocorrelation : null} numEpisodes={crossEpisodeData?.numEpisodes} />
-      <ActionVelocitySection data={flatChartData} agg={showAgg ? crossEpisodeData?.aggVelocity : undefined} numEpisodes={crossEpisodeData?.numEpisodes} />
+      <ActionVelocitySection data={flatChartData} agg={showAgg ? crossEpisodeData?.aggVelocity : undefined} numEpisodes={crossEpisodeData?.numEpisodes} jerkyEpisodes={showAgg ? crossEpisodeData?.jerkyEpisodes : undefined} />
 
       {crossEpisodeData?.speedDistribution && crossEpisodeData.speedDistribution.length > 2 && (
         <SpeedVarianceSection distribution={crossEpisodeData.speedDistribution} numEpisodes={crossEpisodeData.numEpisodes} />