Added files from Mishig PR

Co-authored-by: Mishig <dmishig@gmail.com>

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+/public
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

README.md

@@ -0,0 +1,57 @@
+# 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.
+
+## Project Overview
+
+This tool is designed to help robotics researchers and practitioners quickly inspect and understand large, complex datasets. It fetches dataset metadata and episode data (including video and sensor/telemetry data), and provides a unified interface for:
+
+- Navigating between organizations, datasets, and episodes
+- Watching episode videos
+- Exploring synchronized time-series data with interactive charts
+- Paginating through large datasets efficiently
+
+## Key Features
+
+- **Dataset & Episode Navigation:** Quickly jump between organizations, datasets, and episodes using a sidebar and navigation controls.
+- **Synchronized Video & Data:** Video playback is synchronized with interactive data graphs for detailed inspection of sensor and control signals.
+- **Efficient Data Loading:** Uses parquet and JSON loading for large dataset support, with pagination and chunking.
+- **Responsive UI:** Built with React, Next.js, and Tailwind CSS for a fast, modern user experience.
+
+## Technologies Used
+
+- **Next.js** (App Router)
+- **React**
+- **Recharts** (for data visualization)
+- **hyparquet** (for reading Parquet files)
+- **Tailwind CSS** (styling)
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `src/app/page.tsx` or other files in the `src/` directory. The app supports hot-reloading for rapid development.
+
+### Environment Variables
+
+- `DATASET_URL`: (optional) Base URL for dataset hosting (defaults to HuggingFace Datasets).
+
+## Contributing
+
+Contributions, bug reports, and feature requests are welcome! Please open an issue or submit a pull request.
+
+## License
+
+This project is licensed under the MIT License.

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

next.config.ts

@@ -0,0 +1,15 @@
+import type { NextConfig } from "next";
+import packageJson from './package.json';
+
+const nextConfig: NextConfig = {
+
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  generateBuildId: () => packageJson.version,
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "lerobot-viewer",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format": "prettier --write ."
+  },
+  "dependencies": {
+    "hyparquet": "^1.12.1",
+    "next": "15.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "recharts": "^2.15.3"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.1",
+    "prettier": "^3.5.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

src/app/[org]/[dataset]/[episode]/episode-viewer.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { postParentMessageWithParams } from "@/utils/postParentMessage";
+import VideosPlayer from "@/components/videos-player";
+import DataRecharts from "@/components/data-recharts";
+import PlaybackBar from "@/components/playback-bar";
+import { TimeProvider, useTime } from "@/context/time-context";
+import Sidebar from "@/components/side-nav";
+import Loading from "@/components/loading-component";
+
+export default function EpisodeViewer({
+  data,
+  error,
+}: {
+  data?: any;
+  error?: string;
+}) {
+  if (error) {
+    return (
+      <div className="flex h-screen items-center justify-center bg-slate-950 text-red-400">
+        <div className="max-w-xl p-8 rounded bg-slate-900 border border-red-500 shadow-lg">
+          <h2 className="text-2xl font-bold mb-4">Something went wrong</h2>
+          <p className="text-lg font-mono whitespace-pre-wrap mb-4">{error}</p>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <TimeProvider duration={data.duration}>
+      <EpisodeViewerInner data={data} />
+    </TimeProvider>
+  );
+}
+
+function EpisodeViewerInner({ data }: { data: any }) {
+  const {
+    datasetInfo,
+    episodeId,
+    videosInfo,
+    chartDataGroups,
+    episodes,
+    ignoredColumns,
+  } = data;
+
+  const [videosReady, setVideosReady] = useState(!videosInfo.length);
+  const [chartsReady, setChartsReady] = useState(false);
+  const isLoading = !videosReady || !chartsReady;
+
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // State
+  // Use context for time sync
+  const { currentTime, setCurrentTime, setIsPlaying, isPlaying } = useTime();
+
+  // Pagination state
+  const pageSize = 100;
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = Math.ceil(episodes.length / pageSize);
+  const paginatedEpisodes = episodes.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize,
+  );
+
+  // Initialize based on URL time parameter
+  useEffect(() => {
+    const timeParam = searchParams.get("t");
+    if (timeParam) {
+      const timeValue = parseFloat(timeParam);
+      if (!isNaN(timeValue)) {
+        setCurrentTime(timeValue);
+      }
+    }
+  }, []);
+
+  // sync with parent window hf.co/spaces
+  useEffect(() => {
+    postParentMessageWithParams((params: URLSearchParams) => {
+      params.set("path", window.location.pathname + window.location.search);
+    });
+  }, []);
+
+  // Initialize based on URL time parameter
+  useEffect(() => {
+    // Initialize page based on current episode
+    const episodeIndex = episodes.indexOf(episodeId);
+    if (episodeIndex !== -1) {
+      setCurrentPage(Math.floor(episodeIndex / pageSize) + 1);
+    }
+
+    // Add keyboard event listener
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [episodes, episodeId, pageSize, searchParams]);
+
+  // Only update URL ?t= param when the integer second changes
+  const lastUrlSecondRef = useRef<number>(-1);
+  useEffect(() => {
+    if (isPlaying) return;
+    const currentSec = Math.floor(currentTime);
+    if (currentTime > 0 && lastUrlSecondRef.current !== currentSec) {
+      lastUrlSecondRef.current = currentSec;
+      const newParams = new URLSearchParams(searchParams.toString());
+      newParams.set("t", currentSec.toString());
+      // Replace state instead of pushing to avoid navigation stack bloat
+      window.history.replaceState(
+        {},
+        "",
+        `${window.location.pathname}?${newParams.toString()}`,
+      );
+      postParentMessageWithParams((params: URLSearchParams) => {
+        params.set("path", window.location.pathname + window.location.search);
+      });
+    }
+  }, [isPlaying, currentTime, searchParams]);
+
+  // Handle keyboard shortcuts
+  const handleKeyDown = (e: KeyboardEvent) => {
+    const { key } = e;
+
+    if (key === " ") {
+      e.preventDefault();
+      setIsPlaying((prev: boolean) => !prev);
+    } else if (key === "ArrowDown" || key === "ArrowUp") {
+      e.preventDefault();
+      const nextEpisodeId = key === "ArrowDown" ? episodeId + 1 : episodeId - 1;
+      const lowestEpisodeId = episodes[0];
+      const highestEpisodeId = episodes[episodes.length - 1];
+
+      if (
+        nextEpisodeId >= lowestEpisodeId &&
+        nextEpisodeId <= highestEpisodeId
+      ) {
+        router.push(`./episode_${nextEpisodeId}`);
+      }
+    }
+  };
+
+  // Pagination functions
+  const nextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage((prev) => prev + 1);
+    }
+  };
+
+  const prevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage((prev) => prev - 1);
+    }
+  };
+
+  return (
+    <div className="flex h-screen max-h-screen bg-slate-950 text-gray-200">
+      {/* Sidebar */}
+      <Sidebar
+        datasetInfo={datasetInfo}
+        paginatedEpisodes={paginatedEpisodes}
+        episodeId={episodeId}
+        totalPages={totalPages}
+        currentPage={currentPage}
+        prevPage={prevPage}
+        nextPage={nextPage}
+      />
+
+      {/* Content */}
+      <div
+        className={`flex max-h-screen flex-col gap-4 p-4 md:flex-1 relative ${isLoading ? "overflow-hidden" : "overflow-y-auto"}`}
+      >
+        {isLoading && <Loading />}
+
+        <div className="flex items-center justify-start my-4">
+          <a
+            href="https://github.com/huggingface/lerobot"
+            target="_blank"
+            className="block"
+          >
+            <img
+              src="https://github.com/huggingface/lerobot/raw/main/media/lerobot-logo-thumbnail.png"
+              alt="LeRobot Logo"
+              className="w-32"
+            />
+          </a>
+
+          <div>
+            <a
+              href={`https://huggingface.co/datasets/${datasetInfo.repoId}`}
+              target="_blank"
+            >
+              <p className="text-lg font-semibold">{datasetInfo.repoId}</p>
+            </a>
+
+            <p className="font-mono text-lg font-semibold">
+              episode {episodeId}
+            </p>
+          </div>
+        </div>
+
+        {/* Videos */}
+        {videosInfo.length && (
+          <VideosPlayer
+            videosInfo={videosInfo}
+            onVideosReady={() => setVideosReady(true)}
+          />
+        )}
+
+        {/* Graph */}
+        <div className="mb-4">
+          <DataRecharts
+            data={chartDataGroups}
+            onChartsReady={() => setChartsReady(true)}
+          />
+
+          {ignoredColumns.length > 0 && (
+            <p className="mt-2 text-orange-700">
+              Columns{" "}
+              <span className="font-mono">{ignoredColumns.join(", ")}</span> are
+              NOT shown since the visualizer currently does not support 2D or 3D
+              data.
+            </p>
+          )}
+        </div>
+
+        <PlaybackBar />
+      </div>
+    </div>
+  );
+}

src/app/[org]/[dataset]/[episode]/error.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="flex h-screen items-center justify-center bg-slate-950 text-red-400">
+      <div className="max-w-xl p-8 rounded bg-slate-900 border border-red-500 shadow-lg">
+        <h2 className="text-2xl font-bold mb-4">Something went wrong</h2>
+        <p className="text-lg font-mono whitespace-pre-wrap mb-4">
+          {error.message}
+        </p>
+        <button
+          className="mt-4 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+          onClick={() => reset()}
+        >
+          Try Again
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,284 @@
+import {
+  DatasetMetadata,
+  fetchJson,
+  fetchParquetFile,
+  formatStringWithVars,
+  readParquetColumn,
+} from "@/utils/parquetUtils";
+import { pick } from "@/utils/pick";
+import { getDatasetVersion, buildVersionedUrl } from "@/utils/versionUtils";
+
+const DATASET_URL =
+  process.env.DATASET_URL || "https://huggingface.co/datasets";
+
+const SERIES_NAME_DELIMITER = " | ";
+
+export async function getEpisodeData(
+  org: string,
+  dataset: string,
+  episodeId: number,
+) {
+  const repoId = `${org}/${dataset}`;
+  try {
+    const episode_chunk = Math.floor(0 / 1000);
+    
+    // Check for compatible dataset version (v2.1 or v2.0)
+    const version = await getDatasetVersion(repoId);
+    const jsonUrl = buildVersionedUrl(repoId, version, "meta/info.json");
+
+    const info = await fetchJson<DatasetMetadata>(jsonUrl);
+
+    // Dataset information
+    const datasetInfo = {
+      repoId,
+      total_frames: info.total_frames,
+      total_episodes: info.total_episodes,
+      fps: info.fps,
+    };
+
+    // Generate list of episodes
+    const episodes =
+      process.env.EPISODES === undefined
+        ? Array.from(
+            { length: datasetInfo.total_episodes },
+            // episode id starts from 0
+            (_, i) => i,
+          )
+        : process.env.EPISODES
+            .split(/\s+/)
+            .map((x) => parseInt(x.trim(), 10))
+            .filter((x) => !isNaN(x));
+
+    // Videos information
+    const videosInfo = Object.entries(info.features)
+      .filter(([key, value]) => value.dtype === "video")
+      .map(([key, _]) => {
+        const videoPath = formatStringWithVars(info.video_path, {
+          video_key: key,
+          episode_chunk: episode_chunk.toString().padStart(3, "0"),
+          episode_index: episodeId.toString().padStart(6, "0"),
+        });
+        return {
+          filename: key,
+          url: buildVersionedUrl(repoId, version, videoPath),
+        };
+      });
+
+    // Column data
+    const columnNames = Object.entries(info.features)
+      .filter(
+        ([key, value]) =>
+          ["float32", "int32"].includes(value.dtype) &&
+          value.shape.length === 1,
+      )
+      .map(([key, { shape }]) => ({ key, length: shape[0] }));
+
+    // Exclude specific columns
+    const excludedColumns = [
+      "timestamp",
+      "frame_index",
+      "episode_index",
+      "index",
+      "task_index",
+    ];
+    const filteredColumns = columnNames.filter(
+      (column) => !excludedColumns.includes(column.key),
+    );
+    const filteredColumnNames = [
+      "timestamp",
+      ...filteredColumns.map((column) => column.key),
+    ];
+
+    const columns = filteredColumns.map(({ key }) => {
+      let column_names = info.features[key].names;
+      while (typeof column_names === "object") {
+        if (Array.isArray(column_names)) break;
+        column_names = Object.values(column_names ?? {})[0];
+      }
+      return {
+        key,
+        value: Array.isArray(column_names)
+          ? column_names.map((name) => `${key}${SERIES_NAME_DELIMITER}${name}`)
+          : Array.from(
+              { length: columnNames.find((c) => c.key === key)?.length ?? 1 },
+              (_, i) => `${key}${SERIES_NAME_DELIMITER}${i}`,
+            ),
+      };
+    });
+
+    const parquetUrl = buildVersionedUrl(
+      repoId,
+      version,
+      formatStringWithVars(info.data_path, {
+        episode_chunk: episode_chunk.toString().padStart(3, "0"),
+        episode_index: episodeId.toString().padStart(6, "0"),
+      })
+    );
+
+    const arrayBuffer = await fetchParquetFile(parquetUrl);
+    const data = await readParquetColumn(arrayBuffer, filteredColumnNames);
+    // Flatten and map to array of objects for chartData
+    const seriesNames = [
+      "timestamp",
+      ...columns.map(({ value }) => value).flat(),
+    ];
+
+    const chartData = data.map((row) => {
+      const flatRow = row.flat();
+      const obj: Record<string, number> = {};
+      seriesNames.forEach((key, idx) => {
+        obj[key] = flatRow[idx];
+      });
+      return obj;
+    });
+
+    // List of columns that are ignored (e.g., 2D or 3D data)
+    const ignoredColumns = Object.entries(info.features)
+      .filter(
+        ([key, value]) =>
+          ["float32", "int32"].includes(value.dtype) && value.shape.length > 1,
+      )
+      .map(([key]) => key);
+
+    // 1. Group all numeric keys by suffix (excluding 'timestamp')
+    const numericKeys = seriesNames.filter((k) => k !== "timestamp");
+    const suffixGroupsMap: Record<string, string[]> = {};
+    for (const key of numericKeys) {
+      const parts = key.split(SERIES_NAME_DELIMITER);
+      const suffix = parts[1] || parts[0]; // fallback to key if no delimiter
+      if (!suffixGroupsMap[suffix]) suffixGroupsMap[suffix] = [];
+      suffixGroupsMap[suffix].push(key);
+    }
+    const suffixGroups = Object.values(suffixGroupsMap);
+
+    // 2. Compute min/max for each suffix group as a whole
+    const groupStats: Record<string, { min: number; max: number }> = {};
+    suffixGroups.forEach((group) => {
+      let min = Infinity,
+        max = -Infinity;
+      for (const row of chartData) {
+        for (const key of group) {
+          const v = row[key];
+          if (typeof v === "number" && !isNaN(v)) {
+            if (v < min) min = v;
+            if (v > max) max = v;
+          }
+        }
+      }
+      // Use the first key in the group as the group id
+      groupStats[group[0]] = { min, max };
+    });
+
+    // 3. Group suffix groups by similar scale (treat each suffix group as a unit)
+    const scaleGroups: Record<string, string[][]> = {};
+    const used = new Set<string>();
+    const SCALE_THRESHOLD = 2;
+    for (const group of suffixGroups) {
+      const groupId = group[0];
+      if (used.has(groupId)) continue;
+      const { min, max } = groupStats[groupId];
+      if (!isFinite(min) || !isFinite(max)) continue;
+      const logMin = Math.log10(Math.abs(min) + 1e-9);
+      const logMax = Math.log10(Math.abs(max) + 1e-9);
+      const unit: string[][] = [group];
+      used.add(groupId);
+      for (const other of suffixGroups) {
+        const otherId = other[0];
+        if (used.has(otherId) || otherId === groupId) continue;
+        const { min: omin, max: omax } = groupStats[otherId];
+        if (!isFinite(omin) || !isFinite(omax) || omin === omax) continue;
+        const ologMin = Math.log10(Math.abs(omin) + 1e-9);
+        const ologMax = Math.log10(Math.abs(omax) + 1e-9);
+        if (
+          Math.abs(logMin - ologMin) <= SCALE_THRESHOLD &&
+          Math.abs(logMax - ologMax) <= SCALE_THRESHOLD
+        ) {
+          unit.push(other);
+          used.add(otherId);
+        }
+      }
+      scaleGroups[groupId] = unit;
+    }
+
+    // 4. Flatten scaleGroups into chartGroups (array of arrays of keys)
+    const chartGroups: string[][] = Object.values(scaleGroups)
+      .sort((a, b) => b.length - a.length)
+      .flatMap((suffixGroupArr) => {
+        // suffixGroupArr is array of suffix groups (each is array of keys)
+        const merged = suffixGroupArr.flat();
+        if (merged.length > 6) {
+          const subgroups = [];
+          for (let i = 0; i < merged.length; i += 6) {
+            subgroups.push(merged.slice(i, i + 6));
+          }
+          return subgroups;
+        }
+        return [merged];
+      });
+
+    const duration = chartData[chartData.length - 1].timestamp;
+
+    // Utility: group row keys by suffix
+    function groupRowBySuffix(row: Record<string, number>): Record<string, any> {
+      const result: Record<string, any> = {};
+      const suffixGroups: Record<string, Record<string, number>> = {};
+      for (const [key, value] of Object.entries(row)) {
+        if (key === "timestamp") {
+          result["timestamp"] = value;
+          continue;
+        }
+        const parts = key.split(SERIES_NAME_DELIMITER);
+        if (parts.length === 2) {
+          const [prefix, suffix] = parts;
+          if (!suffixGroups[suffix]) suffixGroups[suffix] = {};
+          suffixGroups[suffix][prefix] = value;
+        } else {
+          result[key] = value;
+        }
+      }
+      for (const [suffix, group] of Object.entries(suffixGroups)) {
+        const keys = Object.keys(group);
+        if (keys.length === 1) {
+          // Use the full original name as the key
+          const fullName = `${keys[0]}${SERIES_NAME_DELIMITER}${suffix}`;
+          result[fullName] = group[keys[0]];
+        } else {
+          result[suffix] = group;
+        }
+      }
+      return result;
+    }
+
+    const chartDataGroups = chartGroups.map((group) =>
+      chartData.map((row) => groupRowBySuffix(pick(row, [...group, "timestamp"])))
+    );
+
+    return {
+      datasetInfo,
+      episodeId,
+      videosInfo,
+      chartDataGroups,
+      episodes,
+      ignoredColumns,
+      duration,
+    };
+  } catch (err) {
+    console.error("Error loading episode data:", err);
+    throw err;
+  }
+}
+
+// Safe wrapper for UI error display
+export async function getEpisodeDataSafe(
+  org: string,
+  dataset: string,
+  episodeId: number,
+): Promise<{ data?: any; error?: string }> {
+  try {
+    const data = await getEpisodeData(org, dataset, episodeId);
+    return { data };
+  } catch (err: any) {
+    // Only expose the error message, not stack or sensitive info
+    return { error: err?.message || String(err) || "Unknown error" };
+  }
+}

src/app/[org]/[dataset]/[episode]/page.tsx

@@ -0,0 +1,28 @@
+import EpisodeViewer from "./episode-viewer";
+import { getEpisodeDataSafe } from "./fetch-data";
+
+export const dynamic = "force-dynamic";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ org: string; dataset: string; episode: string }>;
+}) {
+  const { org, dataset, episode } = await params;
+  return {
+    title: `${org}/${dataset} | episode ${episode}`,
+  };
+}
+
+export default async function EpisodePage({
+  params,
+}: {
+  params: Promise<{ org: string; dataset: string; episode: string }>;
+}) {
+  // episode is like 'episode_1'
+  const { org, dataset, episode } = await params;
+  // fetchData should be updated if needed to support this path pattern
+  const episodeNumber = Number(episode.replace(/^episode_/, ""));
+  const { data, error } = await getEpisodeDataSafe(org, dataset, episodeNumber);
+  return <EpisodeViewer data={data} error={error} />;
+}

src/app/[org]/[dataset]/page.tsx

@@ -0,0 +1,15 @@
+import { redirect } from "next/navigation";
+
+export default async function DatasetRootPage({
+  params,
+}: {
+  params: Promise<{ org: string; dataset: string }>;
+}) {
+  const { org, dataset } = await params;
+  const episodeN = process.env.EPISODES
+    ?.split(/\s+/)
+    .map((x) => parseInt(x.trim(), 10))
+    .filter((x) => !isNaN(x))[0] ?? 0;
+
+  redirect(`/${org}/${dataset}/episode_${episodeN}`);
+}

src/app/explore/explore-grid.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import Link from "next/link";
+
+import { useRouter, useSearchParams } from "next/navigation";
+import { postParentMessageWithParams } from "@/utils/postParentMessage";
+
+type ExploreGridProps = {
+  datasets: Array<{ id: string; videoUrl: string | null }>;
+  currentPage: number;
+  totalPages: number;
+};
+
+export default function ExploreGrid({
+  datasets,
+  currentPage,
+  totalPages,
+}: ExploreGridProps) {
+  // sync with parent window hf.co/spaces
+  useEffect(() => {
+    postParentMessageWithParams((params: URLSearchParams) => {
+      params.set("path", window.location.pathname + window.location.search);
+    });
+  }, []);
+
+  // Create an array of refs for each video
+  const videoRefs = useRef<(HTMLVideoElement | null)[]>([]);
+
+  return (
+    <main className="p-8">
+      <h1 className="text-2xl font-bold mb-6">Explore LeRobot Datasets</h1>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+        {datasets.map((ds, idx) => (
+          <Link
+            key={ds.id}
+            href={`/${ds.id}`}
+            className="relative border rounded-lg p-4 bg-white shadow hover:shadow-lg transition overflow-hidden h-48 flex items-end group"
+            onMouseEnter={() => {
+              const vid = videoRefs.current[idx];
+              if (vid) vid.play();
+            }}
+            onMouseLeave={() => {
+              const vid = videoRefs.current[idx];
+              if (vid) {
+                vid.pause();
+                vid.currentTime = 0;
+              }
+            }}
+          >
+            <video
+              ref={(el) => {
+                videoRefs.current[idx] = el;
+              }}
+              src={ds.videoUrl || undefined}
+              className="absolute top-0 left-0 w-full h-full object-cover object-center z-0"
+              loop
+              muted
+              playsInline
+              preload="metadata"
+              onTimeUpdate={(e) => {
+                const vid = e.currentTarget;
+                if (vid.currentTime >= 15) {
+                  vid.pause();
+                  vid.currentTime = 0;
+                }
+              }}
+            />
+            <div className="absolute top-0 left-0 w-full h-full bg-black/40 z-10 pointer-events-none" />
+            <div className="relative z-20 font-mono text-blue-100 break-all text-sm bg-black/60 backdrop-blur px-2 py-1 rounded shadow">
+              {ds.id}
+            </div>
+          </Link>
+        ))}
+      </div>
+      <div className="flex justify-center mt-8 gap-4">
+        {currentPage > 1 && (
+          <button
+            className="px-6 py-2 bg-gray-600 text-white rounded shadow hover:bg-gray-700 transition"
+            onClick={() => {
+              const params = new URLSearchParams(window.location.search);
+              params.set("p", (currentPage - 1).toString());
+              window.location.search = params.toString();
+            }}
+          >
+            Previous
+          </button>
+        )}
+        {currentPage < totalPages && (
+          <button
+            className="px-6 py-2 bg-blue-600 text-white rounded shadow hover:bg-blue-700 transition"
+            onClick={() => {
+              const params = new URLSearchParams(window.location.search);
+              params.set("p", (currentPage + 1).toString());
+              window.location.search = params.toString();
+            }}
+          >
+            Next
+          </button>
+        )}
+      </div>
+    </main>
+  );
+}

src/app/explore/page.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import ExploreGrid from "./explore-grid";
+import {
+  DatasetMetadata,
+  fetchJson,
+  formatStringWithVars,
+} from "@/utils/parquetUtils";
+import { getDatasetVersion, buildVersionedUrl } from "@/utils/versionUtils";
+
+export default async function ExplorePage({
+  searchParams,
+}: {
+  searchParams: { p?: string };
+}) {
+  let datasets: any[] = [];
+  let currentPage = 1;
+  let totalPages = 1;
+  try {
+    const res = await fetch(
+      "https://huggingface.co/api/datasets?sort=lastModified&filter=LeRobot",
+      {
+        cache: "no-store",
+      },
+    );
+    if (!res.ok) throw new Error("Failed to fetch datasets");
+    const data = await res.json();
+    const allDatasets = data.datasets || data;
+    // Use searchParams from props
+    const page = parseInt(searchParams?.p || "1", 10);
+    const perPage = 30;
+
+    currentPage = page;
+    totalPages = Math.ceil(allDatasets.length / perPage);
+
+    const startIdx = (currentPage - 1) * perPage;
+    const endIdx = startIdx + perPage;
+    datasets = allDatasets.slice(startIdx, endIdx);
+  } catch (e) {
+    return <div className="p-8 text-red-600">Failed to load datasets.</div>;
+  }
+
+  // Fetch episode 0 data for each dataset
+  const datasetWithVideos = (
+    await Promise.all(
+      datasets.map(async (ds: any) => {
+        try {
+          const [org, dataset] = ds.id.split("/");
+          const repoId = `${org}/${dataset}`;
+          
+          // Try to get compatible version, but don't fail the entire page if incompatible
+          let version: string;
+          try {
+            version = await getDatasetVersion(repoId);
+          } catch (err) {
+            // Dataset is not compatible, skip it silently
+            console.warn(`Skipping incompatible dataset ${repoId}: ${err instanceof Error ? err.message : err}`);
+            return null;
+          }
+          
+          const jsonUrl = buildVersionedUrl(repoId, version, "meta/info.json");
+          const info = await fetchJson<DatasetMetadata>(jsonUrl);
+          const videoEntry = Object.entries(info.features).find(
+            ([key, value]) => value.dtype === "video",
+          );
+          let videoUrl: string | null = null;
+          if (videoEntry) {
+            const [key] = videoEntry;
+            const videoPath = formatStringWithVars(info.video_path, {
+              video_key: key,
+              episode_chunk: "0".padStart(3, "0"),
+              episode_index: "0".padStart(6, "0"),
+            });
+            const url = buildVersionedUrl(repoId, version, videoPath);
+            // Check if videoUrl exists (status 200)
+            try {
+              const headRes = await fetch(url, { method: "HEAD" });
+              if (headRes.ok) {
+                videoUrl = url;
+              }
+            } catch (e) {
+              // If fetch fails, videoUrl remains null
+            }
+          }
+          return videoUrl ? { id: repoId, videoUrl } : null;
+        } catch (err) {
+          console.error(
+            `Failed to fetch or parse dataset info for ${ds.id}:`,
+            err,
+          );
+          return null;
+        }
+      }),
+    )
+  ).filter(Boolean) as { id: string; videoUrl: string | null }[];
+
+  return (
+    <ExploreGrid
+      datasets={datasetWithVideos}
+      currentPage={currentPage}
+      totalPages={totalPages}
+    />
+  );
+}

src/app/globals.css

@@ -0,0 +1,46 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.video-background {
+  @apply fixed top-0 right-0 bottom-0 left-0 -z-10 overflow-hidden w-screen h-screen;
+}
+.video-background iframe {
+  @apply absolute top-1/2 left-1/2 border-0 pointer-events-none bg-black;
+  width: 100vw;
+  height: 100vh;
+  transform: translate(-50%, -50%);
+}
+@media (min-aspect-ratio: 16/9) {
+  .video-background iframe {
+    height: 56.25vw;
+  }
+}
+@media (max-aspect-ratio: 16/9) {
+  .video-background iframe {
+    width: 177.78vh;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "LeRobot Dataset Visualizer",
+  description: "Visualization of LeRobot Datasets",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,182 @@
+"use client";
+import { useEffect, useRef } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useSearchParams } from "next/navigation";
+
+export default function Home() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  // Handle redirects with useEffect instead of direct redirect
+  useEffect(() => {
+    // Redirect to the first episode of the dataset if REPO_ID is defined
+    if (process.env.REPO_ID) {
+      const episodeN = process.env.EPISODES
+        ?.split(/\s+/)
+        .map((x) => parseInt(x.trim(), 10))
+        .filter((x) => !isNaN(x))[0] ?? 0;
+
+      router.push(`/${process.env.REPO_ID}/episode_${episodeN}`);
+      return;
+    }
+    
+    // sync with hf.co/spaces URL params
+    if (searchParams.get('path')) {
+      router.push(searchParams.get('path')!);
+      return;
+    }
+
+    // legacy sync with hf.co/spaces URL params
+    let redirectUrl: string | null = null;
+    if (searchParams.get('dataset') && searchParams.get('episode')) {
+      redirectUrl = `/${searchParams.get('dataset')}/episode_${searchParams.get('episode')}`;
+    } else if (searchParams.get('dataset')) {
+      redirectUrl = `/${searchParams.get('dataset')}`;
+    }
+
+    if (redirectUrl && searchParams.get('t')) {
+      redirectUrl += `?t=${searchParams.get('t')}`;
+    }
+
+    if (redirectUrl) {
+      router.push(redirectUrl);
+      return;
+    }
+  }, [searchParams, router]);
+
+  const playerRef = useRef<any>(null);
+
+  useEffect(() => {
+    // Load YouTube IFrame API if not already present
+    if (!(window as any).YT) {
+      const tag = document.createElement("script");
+      tag.src = "https://www.youtube.com/iframe_api";
+      document.body.appendChild(tag);
+    }
+    let interval: NodeJS.Timeout;
+    (window as any).onYouTubeIframeAPIReady = () => {
+      playerRef.current = new (window as any).YT.Player("yt-bg-player", {
+        videoId: "Er8SPJsIYr0",
+        playerVars: {
+          autoplay: 1,
+          mute: 1,
+          controls: 0,
+          showinfo: 0,
+          modestbranding: 1,
+          rel: 0,
+          loop: 1,
+          fs: 0,
+          playlist: "Er8SPJsIYr0",
+          start: 0,
+        },
+        events: {
+          onReady: (event: any) => {
+            event.target.playVideo();
+            event.target.mute();
+            interval = setInterval(() => {
+              const t = event.target.getCurrentTime();
+              if (t >= 60) {
+                event.target.seekTo(0);
+              }
+            }, 500);
+          },
+        },
+      });
+    };
+    return () => {
+      if (interval) clearInterval(interval);
+      if (playerRef.current && playerRef.current.destroy)
+        playerRef.current.destroy();
+    };
+  }, []);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleGo = (e: React.FormEvent) => {
+    e.preventDefault();
+    const value = inputRef.current?.value.trim();
+    if (value) {
+      router.push(value);
+    }
+  };
+
+  return (
+    <div className="relative h-screen w-screen overflow-hidden">
+      {/* YouTube Video Background */}
+      <div className="video-background">
+        <div id="yt-bg-player" />
+      </div>
+      {/* Overlay */}
+      <div className="fixed top-0 right-0 bottom-0 left-0 bg-black/60 -z-0" />
+      {/* 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
+        </h1>
+        <a
+          href="https://x.com/RemiCadene/status/1825455895561859185"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-sky-400 font-medium text-lg underline mb-8 inline-block hover:text-sky-300 transition-colors"
+        >
+          create & train your own robots
+        </a>
+        <form onSubmit={handleGo} className="flex gap-2 justify-center mt-6">
+          <input
+            ref={inputRef}
+            type="text"
+            placeholder="Enter dataset id (e.g. lerobot/visualize_dataset)"
+            className="px-4 py-2 rounded-md text-base text-white border-white border-1 focus:outline-none min-w-[220px] shadow-md"
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                // Prevent double submission if form onSubmit also fires
+                e.preventDefault();
+                handleGo(e as any);
+              }
+            }}
+          />
+          <button
+            type="submit"
+            className="px-5 py-2 rounded-md bg-sky-400 text-black font-semibold text-base hover:bg-sky-300 transition-colors shadow-md"
+          >
+            Go
+          </button>
+        </form>
+        {/* Example Datasets */}
+        <div className="mt-8">
+          <div className="font-semibold mb-2 text-lg">Example Datasets:</div>
+          <div className="flex flex-col gap-2 items-center">
+            {[
+              "lerobot/aloha_static_cups_open",
+              "lerobot/columbia_cairlab_pusht_real",
+              "lerobot/taco_play",
+            ].map((ds) => (
+              <button
+                key={ds}
+                type="button"
+                className="px-4 py-2 rounded bg-slate-700 text-sky-200 hover:bg-sky-700 hover:text-white transition-colors shadow"
+                onClick={() => {
+                  if (inputRef.current) {
+                    inputRef.current.value = ds;
+                    inputRef.current.focus();
+                  }
+                  router.push(ds);
+                }}
+              >
+                {ds}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        <Link
+          href="/explore"
+          className="inline-block px-6 py-3 mt-8 rounded-md bg-sky-500 text-white font-semibold text-lg shadow-lg hover:bg-sky-400 transition-colors"
+        >
+          Explore Open Datasets
+        </Link>
+      </div>
+    </div>
+  );
+}

src/components/data-recharts.tsx

@@ -0,0 +1,343 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTime } from "../context/time-context";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+} from "recharts";
+
+type DataGraphProps = {
+  data: Array<Array<Record<string, number>>>;
+  onChartsReady?: () => void;
+};
+
+import React, { useMemo } from "react";
+
+export const DataRecharts = React.memo(
+  ({ data, onChartsReady }: DataGraphProps) => {
+    // Shared hoveredTime for all graphs
+    const [hoveredTime, setHoveredTime] = useState<number | null>(null);
+
+    if (!Array.isArray(data) || data.length === 0) return null;
+
+    useEffect(() => {
+      if (typeof onChartsReady === "function") {
+        onChartsReady();
+      }
+    }, [onChartsReady]);
+
+    return (
+      <div className="grid md:grid-cols-2 grid-cols-1 gap-4">
+        {data.map((group, idx) => (
+          <SingleDataGraph
+            key={idx}
+            data={group}
+            hoveredTime={hoveredTime}
+            setHoveredTime={setHoveredTime}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+
+const NESTED_KEY_DELIMITER = ",";
+
+const SingleDataGraph = React.memo(
+  ({
+    data,
+    hoveredTime,
+    setHoveredTime,
+  }: {
+    data: Array<Record<string, number>>;
+    hoveredTime: number | null;
+    setHoveredTime: (t: number | null) => void;
+  }) => {
+    const { currentTime, setCurrentTime } = useTime();
+    function flattenRow(row: Record<string, any>, prefix = ""): Record<string, number> {
+      const result: Record<string, number> = {};
+      for (const [key, value] of Object.entries(row)) {
+        // Special case: if this is a group value that is a primitive, assign to prefix.key
+        if (typeof value === "number") {
+          if (prefix) {
+            result[`${prefix}${NESTED_KEY_DELIMITER}${key}`] = value;
+          } else {
+            result[key] = value;
+          }
+        } else if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+          // If it's an object, recurse
+          Object.assign(result, flattenRow(value, prefix ? `${prefix}${NESTED_KEY_DELIMITER}${key}` : key));
+        }
+      }
+      // Always keep timestamp at top level if present
+      if ("timestamp" in row) {
+        result["timestamp"] = row["timestamp"];
+      }
+      return result;
+    }
+
+    // Flatten all rows for recharts
+    const chartData = useMemo(() => data.map(row => flattenRow(row)), [data]);
+    const [dataKeys, setDataKeys] = useState<string[]>([]);
+    const [visibleKeys, setVisibleKeys] = useState<string[]>([]);
+
+    useEffect(() => {
+      if (!chartData || chartData.length === 0) return;
+      // Get all keys except timestamp from the first row
+      const keys = Object.keys(chartData[0]).filter((k) => k !== "timestamp");
+      setDataKeys(keys);
+      setVisibleKeys(keys);
+    }, [chartData]);
+
+    // Parse dataKeys into groups (dot notation)
+    const groups: Record<string, string[]> = {};
+    const singles: string[] = [];
+    dataKeys.forEach((key) => {
+      const parts = key.split(NESTED_KEY_DELIMITER);
+      if (parts.length > 1) {
+        const group = parts[0];
+        if (!groups[group]) groups[group] = [];
+        groups[group].push(key);
+      } else {
+        singles.push(key);
+      }
+    });
+
+    // Assign a color per group (and for singles)
+    const allGroups = [...Object.keys(groups), ...singles];
+    const groupColorMap: Record<string, string> = {};
+    allGroups.forEach((group, idx) => {
+      groupColorMap[group] = `hsl(${idx * (360 / allGroups.length)}, 100%, 50%)`;
+    });
+
+    // Find the closest data point to the current time for highlighting
+    const findClosestDataIndex = (time: number) => {
+      if (!chartData.length) return 0;
+      // Find the index of the first data point whose timestamp is >= time (ceiling)
+      const idx = chartData.findIndex((point) => point.timestamp >= time);
+      if (idx !== -1) return idx;
+      // If all timestamps are less than time, return the last index
+      return chartData.length - 1;
+    };
+
+    const handleMouseLeave = () => {
+      setHoveredTime(null);
+    };
+
+    const handleClick = (data: any) => {
+      if (data && data.activePayload && data.activePayload.length) {
+        const timeValue = data.activePayload[0].payload.timestamp;
+        setCurrentTime(timeValue);
+      }
+    };
+
+    // Custom legend to show current value next to each series
+    const CustomLegend = () => {
+      const closestIndex = findClosestDataIndex(
+        hoveredTime != null ? hoveredTime : currentTime,
+      );
+      const currentData = chartData[closestIndex] || {};
+
+      // Parse dataKeys into groups (dot notation)
+      const groups: Record<string, string[]> = {};
+      const singles: string[] = [];
+      dataKeys.forEach((key) => {
+        const parts = key.split(NESTED_KEY_DELIMITER);
+        if (parts.length > 1) {
+          const group = parts[0];
+          if (!groups[group]) groups[group] = [];
+          groups[group].push(key);
+        } else {
+          singles.push(key);
+        }
+      });
+
+      // Assign a color per group (and for singles)
+      const allGroups = [...Object.keys(groups), ...singles];
+      const groupColorMap: Record<string, string> = {};
+      allGroups.forEach((group, idx) => {
+        groupColorMap[group] = `hsl(${idx * (360 / allGroups.length)}, 100%, 50%)`;
+      });
+
+      const isGroupChecked = (group: string) => groups[group].every(k => visibleKeys.includes(k));
+      const isGroupIndeterminate = (group: string) => groups[group].some(k => visibleKeys.includes(k)) && !isGroupChecked(group);
+
+      const handleGroupCheckboxChange = (group: string) => {
+        if (isGroupChecked(group)) {
+          // Uncheck all children
+          setVisibleKeys((prev) => prev.filter(k => !groups[group].includes(k)));
+        } else {
+          // Check all children
+          setVisibleKeys((prev) => Array.from(new Set([...prev, ...groups[group]])));
+        }
+      };
+
+      const handleCheckboxChange = (key: string) => {
+        setVisibleKeys((prev) =>
+          prev.includes(key) ? prev.filter((k) => k !== key) : [...prev, key]
+        );
+      };
+
+      return (
+        <div className="grid grid-cols-[repeat(auto-fit,250px)] gap-4 mx-8">
+          {/* Grouped keys */}
+          {Object.entries(groups).map(([group, children]) => {
+            const color = groupColorMap[group];
+            return (
+              <div key={group} className="mb-2">
+                <label className="flex gap-2 cursor-pointer select-none font-semibold">
+                  <input
+                    type="checkbox"
+                    checked={isGroupChecked(group)}
+                    ref={el => { if (el) el.indeterminate = isGroupIndeterminate(group); }}
+                    onChange={() => handleGroupCheckboxChange(group)}
+                    className="size-3.5 mt-1"
+                    style={{ accentColor: color }}
+                  />
+                  <span className="text-sm w-40 text-white">{group}</span>
+                </label>
+                <div className="pl-7 flex flex-col gap-1 mt-1">
+                  {children.map((key) => (
+                    <label key={key} className="flex gap-2 cursor-pointer select-none">
+                      <input
+                        type="checkbox"
+                        checked={visibleKeys.includes(key)}
+                        onChange={() => handleCheckboxChange(key)}
+                        className="size-3.5 mt-1"
+                        style={{ accentColor: color }}
+                      />
+                      <span className={`text-xs break-all w-36 ${visibleKeys.includes(key) ? "text-white" : "text-gray-400"}`}>{key.slice(group.length + 1)}</span>
+                      <span className={`text-xs font-mono ml-auto ${visibleKeys.includes(key) ? "text-orange-300" : "text-gray-500"}`}>
+                        {typeof currentData[key] === "number" ? currentData[key].toFixed(2) : "--"}
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+          {/* Singles (non-grouped) */}
+          {singles.map((key) => {
+            const color = groupColorMap[key];
+            return (
+              <label key={key} className="flex gap-2 cursor-pointer select-none">
+                <input
+                  type="checkbox"
+                  checked={visibleKeys.includes(key)}
+                  onChange={() => handleCheckboxChange(key)}
+                  className="size-3.5 mt-1"
+                  style={{ accentColor: color }}
+                />
+                <span className={`text-sm break-all w-40 ${visibleKeys.includes(key) ? "text-white" : "text-gray-400"}`}>{key}</span>
+                <span className={`text-sm font-mono ml-auto ${visibleKeys.includes(key) ? "text-orange-300" : "text-gray-500"}`}>
+                  {typeof currentData[key] === "number" ? currentData[key].toFixed(2) : "--"}
+                </span>
+              </label>
+            );
+          })}
+        </div>
+      );
+    };
+
+    return (
+      <div className="w-full">
+        <div className="w-full h-80" onMouseLeave={handleMouseLeave}>
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart
+              data={chartData}
+              syncId="episode-sync"
+              margin={{ top: 24, right: 16, left: 0, bottom: 16 }}
+              onClick={handleClick}
+              onMouseMove={(state: any) => {
+                setHoveredTime(
+                  state?.activePayload?.[0]?.payload?.timestamp ??
+                    state?.activeLabel ??
+                    null,
+                );
+              }}
+              onMouseLeave={handleMouseLeave}
+            >
+              <CartesianGrid strokeDasharray="3 3" stroke="#444" />
+              <XAxis
+                dataKey="timestamp"
+                label={{
+                  value: "time",
+                  position: "insideBottomLeft",
+                  fill: "#cbd5e1",
+                }}
+                domain={[
+                  chartData.at(0)?.timestamp ?? 0,
+                  chartData.at(-1)?.timestamp ?? 0,
+                ]}
+                ticks={useMemo(
+                  () =>
+                    Array.from(
+                      new Set(chartData.map((d) => Math.ceil(d.timestamp))),
+                    ),
+                  [chartData],
+                )}
+                stroke="#cbd5e1"
+                minTickGap={20} // Increased for fewer ticks
+                allowDataOverflow={true}
+              />
+              <YAxis
+                domain={["auto", "auto"]}
+                stroke="#cbd5e1"
+                interval={0}
+                allowDataOverflow={true}
+              />
+
+              <Tooltip
+                content={() => null}
+                active={true}
+                isAnimationActive={false}
+                defaultIndex={
+                  !hoveredTime ? findClosestDataIndex(currentTime) : undefined
+                }
+              />
+
+              {/* Render lines for visible dataKeys only */}
+              {dataKeys.map((key) => {
+                // Use group color for all keys in a group
+                const group = key.includes(NESTED_KEY_DELIMITER) ? key.split(NESTED_KEY_DELIMITER)[0] : key;
+                const color = groupColorMap[group];
+                let strokeDasharray: string | undefined = undefined;
+                if (groups[group] && groups[group].length > 1) {
+                  const idxInGroup = groups[group].indexOf(key);
+                  if (idxInGroup > 0) strokeDasharray = "5 5";
+                }
+                return (
+                  visibleKeys.includes(key) && (
+                    <Line
+                      key={key}
+                      type="monotone"
+                      dataKey={key}
+                      name={key}
+                      stroke={color}
+                      strokeDasharray={strokeDasharray}
+                      dot={false}
+                      activeDot={false}
+                      strokeWidth={1.5}
+                      isAnimationActive={false}
+                    />
+                  )
+                );
+              })}
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+        <CustomLegend />
+      </div>
+    );
+  },
+); // End React.memo
+
+SingleDataGraph.displayName = "SingleDataGraph";
+DataRecharts.displayName = "DataGraph";
+export default DataRecharts;

src/components/loading-component.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+export default function Loading() {
+  return (
+    <div
+      className="absolute inset-0 flex flex-col items-center justify-center bg-slate-950/70 z-10 text-slate-100 animate-fade-in"
+      tabIndex={-1}
+      aria-modal="true"
+      role="dialog"
+    >
+      <svg
+        className="animate-spin mb-8"
+        width="64"
+        height="64"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <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>
+      <h1 className="text-2xl font-bold mb-2">Loading...</h1>
+      <p className="text-slate-400">preparing data & videos</p>
+    </div>
+  );
+}

src/components/playback-bar.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import { useTime } from "../context/time-context";
+import {
+  FaPlay,
+  FaPause,
+  FaBackward,
+  FaForward,
+  FaUndoAlt,
+  FaArrowDown,
+  FaArrowUp,
+} from "react-icons/fa";
+
+import { debounce } from "@/utils/debounce";
+
+const PlaybackBar: React.FC = () => {
+  const { duration, isPlaying, setIsPlaying, currentTime, setCurrentTime } =
+    useTime();
+
+  const sliderActiveRef = React.useRef(false);
+  const wasPlayingRef = React.useRef(false);
+  const [sliderValue, setSliderValue] = React.useState(currentTime);
+
+  // Only update sliderValue from context if not dragging
+  React.useEffect(() => {
+    if (!sliderActiveRef.current) {
+      setSliderValue(currentTime);
+    }
+  }, [currentTime]);
+
+  const updateTime = debounce((t: number) => {
+    setCurrentTime(t);
+  }, 200);
+
+  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const t = Number(e.target.value);
+    setSliderValue(t);
+    updateTime(t);
+  };
+
+  const handleSliderMouseDown = () => {
+    sliderActiveRef.current = true;
+    wasPlayingRef.current = isPlaying;
+    setIsPlaying(false);
+  };
+
+  const handleSliderMouseUp = () => {
+    sliderActiveRef.current = false;
+    setCurrentTime(sliderValue); // Snap to final value
+    if (wasPlayingRef.current) {
+      setIsPlaying(true);
+    }
+    // If it was paused before, keep it paused
+  };
+
+  return (
+    <div className="flex items-center gap-4 w-full max-w-4xl mx-auto sticky bottom-0 bg-slate-900/95 px-4 py-3 rounded-3xl mt-auto">
+      <button
+        title="Jump backward 5 seconds"
+        onClick={() => setCurrentTime(Math.max(0, currentTime - 5))}
+        className="text-2xl hidden md:block"
+      >
+        <FaBackward size={24} />
+      </button>
+      <button
+        className={`text-3xl transition-transform ${isPlaying ? "scale-90 opacity-60" : "scale-110"}`}
+        title="Play. Toggle with Space"
+        onClick={() => setIsPlaying(true)}
+        style={{ display: isPlaying ? "none" : "inline-block" }}
+      >
+        <FaPlay size={24} />
+      </button>
+      <button
+        className={`text-3xl transition-transform ${!isPlaying ? "scale-90 opacity-60" : "scale-110"}`}
+        title="Pause. Toggle with Space"
+        onClick={() => setIsPlaying(false)}
+        style={{ display: !isPlaying ? "none" : "inline-block" }}
+      >
+        <FaPause size={24} />
+      </button>
+      <button
+        title="Jump forward 5 seconds"
+        onClick={() => setCurrentTime(Math.min(duration, currentTime + 5))}
+        className="text-2xl hidden md:block"
+      >
+        <FaForward size={24} />
+      </button>
+      <button
+        title="Rewind from start"
+        onClick={() => setCurrentTime(0)}
+        className="text-2xl hidden md:block"
+      >
+        <FaUndoAlt size={24} />
+      </button>
+      <input
+        type="range"
+        min={0}
+        max={duration}
+        step={0.01}
+        value={sliderValue}
+        onChange={handleSliderChange}
+        onMouseDown={handleSliderMouseDown}
+        onMouseUp={handleSliderMouseUp}
+        onTouchStart={handleSliderMouseDown}
+        onTouchEnd={handleSliderMouseUp}
+        className="flex-1 mx-2 accent-orange-500 focus:outline-none focus:ring-0"
+        aria-label="Seek video"
+      />
+      <span className="w-16 text-right tabular-nums text-xs text-slate-200 shrink-0">
+        {Math.floor(sliderValue)} / {Math.floor(duration)}
+      </span>
+
+      <div className="text-xs text-slate-300 select-none ml-8 flex-col gap-y-0.5 hidden md:flex">
+        <p>
+          <span className="inline-flex items-center gap-1 font-mono align-middle">
+            <span className="px-2 py-0.5 rounded border border-slate-400 bg-slate-800 text-slate-200 text-xs shadow-inner">
+              Space
+            </span>
+          </span>{" "}
+          to pause/unpause
+        </p>
+        <p>
+          <span className="inline-flex items-center gap-1 font-mono align-middle">
+            <FaArrowUp size={14} />/<FaArrowDown size={14} />
+          </span>{" "}
+          to previous/next episode
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default PlaybackBar;

src/components/side-nav.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+import Link from "next/link";
+import React from "react";
+
+interface SidebarProps {
+  datasetInfo: any;
+  paginatedEpisodes: any[];
+  episodeId: any;
+  totalPages: number;
+  currentPage: number;
+  prevPage: () => void;
+  nextPage: () => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({
+  datasetInfo,
+  paginatedEpisodes,
+  episodeId,
+  totalPages,
+  currentPage,
+  prevPage,
+  nextPage,
+}) => {
+  const [sidebarVisible, setSidebarVisible] = React.useState(true);
+  const toggleSidebar = () => setSidebarVisible((prev) => !prev);
+
+  const sidebarRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!sidebarVisible) return;
+    function handleClickOutside(event: MouseEvent) {
+      // If click is outside the sidebar nav
+      if (
+        sidebarRef.current &&
+        !sidebarRef.current.contains(event.target as Node)
+      ) {
+        setTimeout(() => setSidebarVisible(false), 500);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [sidebarVisible]);
+
+  return (
+    <div className="flex z-10 min-h-screen absolute md:static" ref={sidebarRef}>
+      <nav
+        className={`shrink-0 overflow-y-auto bg-slate-900 p-5 break-words md:max-h-screen w-60 md:shrink ${
+          !sidebarVisible ? "hidden" : ""
+        }`}
+        aria-label="Sidebar navigation"
+      >
+        <ul>
+          <li>Number of samples/frames: {datasetInfo.total_frames}</li>
+          <li>Number of episodes: {datasetInfo.total_episodes}</li>
+          <li>Frames per second: {datasetInfo.fps}</li>
+        </ul>
+
+        <p>Episodes:</p>
+
+        {/* episodes menu for medium & large screens */}
+        <div className="ml-2 block">
+          <ul>
+            {paginatedEpisodes.map((episode) => (
+              <li key={episode} className="mt-0.5 font-mono text-sm">
+                <Link
+                  href={`./episode_${episode}`}
+                  className={`underline ${episode === episodeId ? "-ml-1 font-bold" : ""}`}
+                >
+                  Episode {episode}
+                </Link>
+              </li>
+            ))}
+          </ul>
+
+          {totalPages > 1 && (
+            <div className="mt-3 flex items-center text-xs">
+              <button
+                onClick={prevPage}
+                className={`mr-2 rounded bg-slate-800 px-2 py-1 ${
+                  currentPage === 1 ? "cursor-not-allowed opacity-50" : ""
+                }`}
+                disabled={currentPage === 1}
+              >
+                « Prev
+              </button>
+              <span className="mr-2 font-mono">
+                {currentPage} / {totalPages}
+              </span>
+              <button
+                onClick={nextPage}
+                className={`rounded bg-slate-800 px-2 py-1 ${
+                  currentPage === totalPages
+                    ? "cursor-not-allowed opacity-50"
+                    : ""
+                }`}
+                disabled={currentPage === totalPages}
+              >
+                Next »
+              </button>
+            </div>
+          )}
+        </div>
+      </nav>
+      {/* Toggle sidebar button */}
+      <button
+        className="mx-1 flex items-center opacity-50 hover:opacity-100 focus:outline-none focus:ring-0"
+        onClick={toggleSidebar}
+        title="Toggle sidebar"
+      >
+        <div className="h-10 w-2 rounded-full bg-slate-500"></div>
+      </button>
+    </div>
+  );
+};
+
+export default Sidebar;

src/components/videos-player.tsx

@@ -0,0 +1,343 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useTime } from "../context/time-context";
+import { FaExpand, FaCompress, FaTimes, FaEye } from "react-icons/fa";
+
+type VideoInfo = {
+  filename: string;
+  url: string;
+};
+
+type VideoPlayerProps = {
+  videosInfo: VideoInfo[];
+  onVideosReady?: () => void;
+};
+
+export const VideosPlayer = ({
+  videosInfo,
+  onVideosReady,
+}: VideoPlayerProps) => {
+  const { currentTime, setCurrentTime, isPlaying, setIsPlaying } = useTime();
+  const videoRefs = useRef<HTMLVideoElement[]>([]);
+  // Hidden/enlarged state and hidden menu
+  const [hiddenVideos, setHiddenVideos] = useState<string[]>([]);
+  // Find the index of the first visible (not hidden) video
+  const firstVisibleIdx = videosInfo.findIndex(
+    (video) => !hiddenVideos.includes(video.filename),
+  );
+  // Count of visible videos
+  const visibleCount = videosInfo.filter(
+    (video) => !hiddenVideos.includes(video.filename),
+  ).length;
+  const [enlargedVideo, setEnlargedVideo] = useState<string | null>(null);
+  // Track previous hiddenVideos for comparison
+  const prevHiddenVideosRef = useRef<string[]>([]);
+  const videoContainerRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  const [showHiddenMenu, setShowHiddenMenu] = useState(false);
+  const hiddenMenuRef = useRef<HTMLDivElement | null>(null);
+  const showHiddenBtnRef = useRef<HTMLButtonElement | null>(null);
+  const [videoCodecError, setVideoCodecError] = useState(false);
+
+  // Initialize video refs
+  useEffect(() => {
+    videoRefs.current = videoRefs.current.slice(0, videosInfo.length);
+  }, [videosInfo]);
+
+  // When videos get unhidden, start playing them if it was playing
+  useEffect(() => {
+    // Find which videos were just unhidden
+    const prevHidden = prevHiddenVideosRef.current;
+    const newlyUnhidden = prevHidden.filter(
+      (filename) => !hiddenVideos.includes(filename),
+    );
+    if (newlyUnhidden.length > 0) {
+      videosInfo.forEach((video, idx) => {
+        if (newlyUnhidden.includes(video.filename)) {
+          const ref = videoRefs.current[idx];
+          if (ref) {
+            ref.currentTime = currentTime;
+            if (isPlaying) {
+              ref.play().catch(() => {});
+            }
+          }
+        }
+      });
+    }
+    prevHiddenVideosRef.current = hiddenVideos;
+  }, [hiddenVideos, isPlaying, videosInfo, currentTime]);
+
+  // Check video codec support
+  useEffect(() => {
+    const checkCodecSupport = () => {
+      const dummyVideo = document.createElement("video");
+      const canPlayVideos = dummyVideo.canPlayType(
+        'video/mp4; codecs="av01.0.05M.08"',
+      );
+      setVideoCodecError(!canPlayVideos);
+    };
+
+    checkCodecSupport();
+  }, []);
+
+  // Handle play/pause
+  useEffect(() => {
+    videoRefs.current.forEach((video) => {
+      if (video) {
+        if (isPlaying) {
+          video.play().catch((e) => console.error("Error playing video:", e));
+        } else {
+          video.pause();
+        }
+      }
+    });
+  }, [isPlaying]);
+
+  // Minimize enlarged video on Escape key
+  useEffect(() => {
+    if (!enlargedVideo) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setEnlargedVideo(null);
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    // Scroll enlarged video into view
+    const ref = videoContainerRefs.current[enlargedVideo];
+    if (ref) {
+      ref.scrollIntoView();
+    }
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [enlargedVideo]);
+
+  // Close hidden videos dropdown on outside click
+  useEffect(() => {
+    if (!showHiddenMenu) return;
+    function handleClick(e: MouseEvent) {
+      const menu = hiddenMenuRef.current;
+      const btn = showHiddenBtnRef.current;
+      if (
+        menu &&
+        !menu.contains(e.target as Node) &&
+        btn &&
+        !btn.contains(e.target as Node)
+      ) {
+        setShowHiddenMenu(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [showHiddenMenu]);
+
+  // Close dropdown if no hidden videos
+  useEffect(() => {
+    if (hiddenVideos.length === 0 && showHiddenMenu) {
+      setShowHiddenMenu(false);
+    }
+    // Minimize if enlarged video is hidden
+    if (enlargedVideo && hiddenVideos.includes(enlargedVideo)) {
+      setEnlargedVideo(null);
+    }
+  }, [hiddenVideos, showHiddenMenu, enlargedVideo]);
+
+  // Sync video times
+  useEffect(() => {
+    videoRefs.current.forEach((video) => {
+      if (video && Math.abs(video.currentTime - currentTime) > 0.2) {
+        video.currentTime = currentTime;
+      }
+    });
+  }, [currentTime]);
+
+  // Handle time update
+  const handleTimeUpdate = (e: React.SyntheticEvent<HTMLVideoElement>) => {
+    const video = e.target as HTMLVideoElement;
+    if (video && video.duration) {
+      setCurrentTime(video.currentTime);
+    }
+  };
+
+  // Handle video ready
+  useEffect(() => {
+    let videosReadyCount = 0;
+    const onCanPlayThrough = () => {
+      videosReadyCount += 1;
+      if (videosReadyCount === videosInfo.length) {
+        if (typeof onVideosReady === "function") {
+          onVideosReady();
+          setIsPlaying(true);
+        }
+      }
+    };
+
+    videoRefs.current.forEach((video) => {
+      if (video) {
+        // If already ready, call the handler immediately
+        if (video.readyState >= 4) {
+          onCanPlayThrough();
+        } else {
+          video.addEventListener("canplaythrough", onCanPlayThrough);
+        }
+      }
+    });
+
+    return () => {
+      videoRefs.current.forEach((video) => {
+        if (video) {
+          video.removeEventListener("canplaythrough", onCanPlayThrough);
+        }
+      });
+    };
+  }, []);
+
+  return (
+    <>
+      {/* Error message */}
+      {videoCodecError && (
+        <div className="font-medium text-orange-700">
+          <p>
+            Videos could NOT play because{" "}
+            <a
+              href="https://en.wikipedia.org/wiki/AV1"
+              target="_blank"
+              className="underline"
+            >
+              AV1
+            </a>{" "}
+            decoding is not available on your browser.
+          </p>
+          <ul className="list-inside list-decimal">
+            <li>
+              If iPhone:{" "}
+              <span className="italic">
+                It is supported with A17 chip or higher.
+              </span>
+            </li>
+            <li>
+              If Mac with Safari:{" "}
+              <span className="italic">
+                It is supported on most browsers except Safari with M1 chip or
+                higher and on Safari with M3 chip or higher.
+              </span>
+            </li>
+            <li>
+              Other:{" "}
+              <span className="italic">
+                Contact the maintainers on LeRobot discord channel:
+              </span>
+              <a
+                href="https://discord.com/invite/s3KuuzsPFb"
+                target="_blank"
+                className="underline"
+              >
+                https://discord.com/invite/s3KuuzsPFb
+              </a>
+            </li>
+          </ul>
+        </div>
+      )}
+
+      {/* Show Hidden Videos Button */}
+      {hiddenVideos.length > 0 && (
+        <div className="relative">
+          <button
+            ref={showHiddenBtnRef}
+            className="flex items-center gap-2 rounded bg-slate-800 px-3 py-2 text-sm text-slate-100 hover:bg-slate-700 border border-slate-500"
+            onClick={() => setShowHiddenMenu((prev) => !prev)}
+          >
+            <FaEye /> Show Hidden Videos ({hiddenVideos.length})
+          </button>
+          {showHiddenMenu && (
+            <div
+              ref={hiddenMenuRef}
+              className="absolute left-0 mt-2 w-max rounded border border-slate-500 bg-slate-900 shadow-lg p-2 z-50"
+            >
+              <div className="mb-2 text-xs text-slate-300">
+                Restore hidden videos:
+              </div>
+              {hiddenVideos.map((filename) => (
+                <button
+                  key={filename}
+                  className="block w-full text-left px-2 py-1 rounded hover:bg-slate-700 text-slate-100"
+                  onClick={() =>
+                    setHiddenVideos((prev: string[]) =>
+                      prev.filter((v: string) => v !== filename),
+                    )
+                  }
+                >
+                  {filename}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Videos */}
+      <div className="flex flex-wrap gap-x-2 gap-y-6">
+        {videosInfo.map((video, idx) => {
+          if (hiddenVideos.includes(video.filename) || videoCodecError)
+            return null;
+          const isEnlarged = enlargedVideo === video.filename;
+          return (
+            <div
+              key={video.filename}
+              ref={(el) => {
+                videoContainerRefs.current[video.filename] = el;
+              }}
+              className={`${isEnlarged ? "z-40 fixed inset-0 bg-black bg-opacity-90 flex flex-col items-center justify-center" : "max-w-96"}`}
+              style={isEnlarged ? { height: "100vh", width: "100vw" } : {}}
+            >
+              <p className="truncate w-full rounded-t-xl bg-gray-800 px-2 text-sm text-gray-300 flex items-center justify-between">
+                <span>{video.filename}</span>
+                <span className="flex gap-1">
+                  <button
+                    title={isEnlarged ? "Minimize" : "Enlarge"}
+                    className="ml-2 p-1 hover:bg-slate-700 rounded focus:outline-none focus:ring-0"
+                    onClick={() =>
+                      setEnlargedVideo(isEnlarged ? null : video.filename)
+                    }
+                  >
+                    {isEnlarged ? <FaCompress /> : <FaExpand />}
+                  </button>
+                  <button
+                    title="Hide Video"
+                    className="ml-1 p-1 hover:bg-slate-700 rounded focus:outline-none focus:ring-0"
+                    onClick={() =>
+                      setHiddenVideos((prev: string[]) => [
+                        ...prev,
+                        video.filename,
+                      ])
+                    }
+                    disabled={visibleCount === 1}
+                  >
+                    <FaTimes />
+                  </button>
+                </span>
+              </p>
+              <video
+                ref={(el) => {
+                  if (el) videoRefs.current[idx] = el;
+                }}
+                muted
+                loop
+                className={`w-full object-contain ${isEnlarged ? "max-h-[90vh] max-w-[90vw]" : ""}`}
+                onTimeUpdate={
+                  idx === firstVisibleIdx ? handleTimeUpdate : undefined
+                }
+                style={isEnlarged ? { zIndex: 41 } : {}}
+              >
+                <source src={video.url} type="video/mp4" />
+                Your browser does not support the video tag.
+              </video>
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export default VideosPlayer;

src/context/time-context.tsx

@@ -0,0 +1,64 @@
+import React, {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  useCallback,
+} from "react";
+
+// The shape of our context
+type TimeContextType = {
+  currentTime: number;
+  setCurrentTime: (t: number) => void;
+  subscribe: (cb: (t: number) => void) => () => void;
+  isPlaying: boolean;
+  setIsPlaying: React.Dispatch<React.SetStateAction<boolean>>;
+  duration: number;
+  setDuration: React.Dispatch<React.SetStateAction<number>>;
+};
+
+const TimeContext = createContext<TimeContextType | undefined>(undefined);
+
+export const useTime = () => {
+  const ctx = useContext(TimeContext);
+  if (!ctx) throw new Error("useTime must be used within a TimeProvider");
+  return ctx;
+};
+
+export const TimeProvider: React.FC<{
+  children: React.ReactNode;
+  duration: number;
+}> = ({ children, duration: initialDuration }) => {
+  const [currentTime, setCurrentTime] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [duration, setDuration] = useState(initialDuration);
+  const listeners = useRef<Set<(t: number) => void>>(new Set());
+
+  // Call this to update time and notify all listeners
+  const updateTime = useCallback((t: number) => {
+    setCurrentTime(t);
+    listeners.current.forEach((fn) => fn(t));
+  }, []);
+
+  // Components can subscribe to time changes (for imperative updates)
+  const subscribe = useCallback((cb: (t: number) => void) => {
+    listeners.current.add(cb);
+    return () => listeners.current.delete(cb);
+  }, []);
+
+  return (
+    <TimeContext.Provider
+      value={{
+        currentTime,
+        setCurrentTime: updateTime,
+        subscribe,
+        isPlaying,
+        setIsPlaying,
+        duration,
+        setDuration,
+      }}
+    >
+      {children}
+    </TimeContext.Provider>
+  );
+};

src/utils/debounce.ts

@@ -0,0 +1,10 @@
+export function debounce<F extends (...args: any[]) => any>(
+  func: F,
+  waitFor: number,
+): (...args: Parameters<F>) => void {
+  let timeoutId: number;
+  return (...args: Parameters<F>) => {
+    clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => func(...args), waitFor);
+  };
+}

src/utils/parquetUtils.ts

@@ -0,0 +1,97 @@
+import { parquetRead } from "hyparquet";
+
+export interface DatasetMetadata {
+  codebase_version: string;
+  robot_type: string;
+  total_episodes: number;
+  total_frames: number;
+  total_tasks: number;
+  total_videos: number;
+  total_chunks: number;
+  chunks_size: number;
+  fps: number;
+  splits: Record<string, string>;
+  data_path: string;
+  video_path: string;
+  features: Record<
+    string,
+    {
+      dtype: string;
+      shape: any[];
+      names: any[] | Record<string, any> | null;
+      info?: Record<string, any>;
+    }
+  >;
+}
+
+export async function fetchJson<T>(url: string): Promise<T> {
+  const res = await fetch(url);
+  if (!res.ok) {
+    throw new Error(
+      `Failed to fetch JSON ${url}: ${res.status} ${res.statusText}`,
+    );
+  }
+  return res.json() as Promise<T>;
+}
+
+export function formatStringWithVars(
+  format: string,
+  vars: Record<string, any>,
+): string {
+  return format.replace(/{(\w+)(?::\d+d)?}/g, (_, key) => vars[key]);
+}
+
+// Fetch and parse the Parquet file
+export async function fetchParquetFile(url: string): Promise<ArrayBuffer> {
+  const res = await fetch(url);
+  return res.arrayBuffer();
+}
+
+// Read specific columns from the Parquet file
+export async function readParquetColumn(
+  fileBuffer: ArrayBuffer,
+  columns: string[],
+): Promise<any[]> {
+  return new Promise((resolve) => {
+    parquetRead({
+      file: fileBuffer,
+      columns,
+      onComplete: (data: any[]) => resolve(data),
+    });
+  });
+}
+
+// Convert a 2D array to a CSV string
+export function arrayToCSV(data: (number | string)[][]): string {
+  return data.map((row) => row.join(",")).join("\n");
+}
+
+// Get rows from the current frame data
+export function getRows(currentFrameData: any[], columns: any[]) {
+  if (!currentFrameData || currentFrameData.length === 0) {
+    return [];
+  }
+
+  const rows = [];
+  const nRows = Math.max(...columns.map((column) => column.value.length));
+  let rowIndex = 0;
+
+  while (rowIndex < nRows) {
+    const row = [];
+    // number of states may NOT match number of actions. In this case, we null-pad the 2D array
+    const nullCell = { isNull: true };
+    // row consists of [state value, action value]
+    let idx = rowIndex;
+
+    for (const column of columns) {
+      const nColumn = column.value.length;
+      row.push(rowIndex < nColumn ? currentFrameData[idx] : nullCell);
+      idx += nColumn; // because currentFrameData = [state0, state1, ..., stateN, action0, action1, ..., actionN]
+    }
+
+    rowIndex += 1;
+    rows.push(row);
+  }
+
+  return rows;
+}

src/utils/pick.ts

@@ -0,0 +1,19 @@
+/**
+ * Return copy of object, only keeping whitelisted properties.
+ *
+ * This doesn't add {p: undefined} anymore, for props not in the o object.
+ */
+export function pick<T, K extends keyof T>(
+  o: T,
+  props: K[] | ReadonlyArray<K>,
+): Pick<T, K> {
+  // inspired by stackoverflow.com/questions/25553910/one-liner-to-take-some-properties-from-object-in-es-6
+  return Object.assign(
+    {},
+    ...props.map((prop) => {
+      if (o[prop] !== undefined) {
+        return { [prop]: o[prop] };
+      }
+    }),
+  );
+}

src/utils/postParentMessage.ts

@@ -0,0 +1,12 @@
+// Utility to post a message to the parent window with custom URLSearchParams
+export function postParentMessageWithParams(
+  setParams: (params: URLSearchParams) => void,
+) {
+  const parentOrigin = "https://huggingface.co";
+  const searchParams = new URLSearchParams();
+  setParams(searchParams);
+  window.parent.postMessage(
+    { queryString: searchParams.toString() },
+    parentOrigin,
+  );
+}

src/utils/versionUtils.ts

@@ -0,0 +1,85 @@
+/**
+ * Utility functions for checking dataset version compatibility
+ */
+
+const DATASET_URL = process.env.DATASET_URL || "https://huggingface.co/datasets";
+
+/**
+ * Checks if a specific version/branch exists for a dataset
+ */
+async function checkVersionExists(repoId: string, version: string): Promise<boolean> {
+  try {
+    const testUrl = `${DATASET_URL}/${repoId}/resolve/${version}/meta/info.json`;
+    
+    // Try a simple GET request with a timeout
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+    
+    const response = await fetch(testUrl, { 
+      method: "GET",
+      cache: "no-store",
+      signal: controller.signal
+    });
+    
+    clearTimeout(timeoutId);
+    
+    // Check if it's a successful response
+    if (response.ok) {
+      // Try to parse a bit of the JSON to make sure it's valid
+      try {
+        const text = await response.text();
+        const data = JSON.parse(text);
+        return !!data.features; // Only return true if it has features
+      } catch (parseError) {
+        return false;
+      }
+    }
+    
+    return false;
+  } catch (error) {
+    return false;
+  }
+}
+
+/**
+ * Determines the best available version for a dataset.
+ * Prefers v2.1, falls back to v2.0, or throws an error if neither exists.
+ */
+export async function getDatasetVersion(repoId: string): Promise<string> {
+  // Check for v2.1 first
+  if (await checkVersionExists(repoId, "v2.1")) {
+    return "v2.1";
+  }
+  
+  // Fall back to v2.0
+  if (await checkVersionExists(repoId, "v2.0")) {
+    return "v2.0";
+  }
+  
+  // If neither v2.1 nor v2.0 exists, throw an error
+  throw new Error(
+    `Dataset ${repoId} is not compatible with this visualizer. ` +
+    "This tool only works with dataset version 2.x (v2.1 or v2.0). " +
+    "Please use a compatible dataset version."
+  );
+}
+
+/**
+ * Constructs a versioned URL for dataset resources
+ */
+export function buildVersionedUrl(repoId: string, version: string, path: string): string {
+  return `${DATASET_URL}/${repoId}/resolve/${version}/${path}`;
+}
+
+/**
+ * Debug function to test version checking manually
+ */
+export async function testVersionCheck(repoId: string): Promise<void> {
+  console.log(`Testing version check for: ${repoId}`);
+  try {
+    const version = await getDatasetVersion(repoId);
+    console.log(`Success! Best version found: ${version}`);
+  } catch (error) {
+    console.error(`Failed:`, error);
+  }
+}

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}