fix lint

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

@@ -1,6 +1,13 @@
 "use client";
 
-import { useState, useEffect, useRef, lazy, Suspense, useCallback } from "react";
+import {
+  useState,
+  useEffect,
+  useRef,
+  lazy,
+  Suspense,
+  useCallback,
+} from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { postParentMessageWithParams } from "@/utils/postParentMessage";
 import { SimpleVideosPlayer } from "@/components/simple-videos-player";

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

@@ -209,7 +209,9 @@ function pickProgressColumn(rows: Record<string, unknown>[]): string | null {
   const candidates = [...preferred, ...additionalProgressColumns];
 
   for (const column of candidates) {
-    const hasFiniteValue = rows.some((row) => toFiniteNumber(row[column]) !== null);
+    const hasFiniteValue = rows.some(
+      (row) => toFiniteNumber(row[column]) !== null,
+    );
     if (hasFiniteValue) {
       return column;
     }
@@ -260,13 +262,17 @@ async function loadEpisodeProgressGroup(
       if (orderedPoints.length === 0) continue;
       orderedPoints.sort((a, b) => a.order - b.order);
 
-      const sampledPoints = evenlySampleArray(orderedPoints, MAX_EPISODE_POINTS);
+      const sampledPoints = evenlySampleArray(
+        orderedPoints,
+        MAX_EPISODE_POINTS,
+      );
       const progressKey = buildProgressSeriesKey(progressColumn);
       const denominator = Math.max(sampledPoints.length - 1, 1);
       const duration = Math.max(episodeDuration, 0);
 
       return sampledPoints.map((point, idx) => ({
-        timestamp: sampledPoints.length === 1 ? 0 : (idx / denominator) * duration,
+        timestamp:
+          sampledPoints.length === 1 ? 0 : (idx / denominator) * duration,
         [progressKey]: point.progress,
       }));
     } catch {

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

@@ -25,11 +25,7 @@ export default async function EpisodePage({
   const episodeNumber = Number(episode.replace(/^episode_/, ""));
   return (
     <Suspense fallback={null}>
-      <EpisodeViewer
-        org={org}
-        dataset={dataset}
-        episodeId={episodeNumber}
-      />
+      <EpisodeViewer org={org} dataset={dataset} episodeId={episodeNumber} />
     </Suspense>
   );
 }

src/components/data-recharts.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { useTime } from "../context/time-context";
 import {
   LineChart,
@@ -20,8 +20,6 @@ type DataGraphProps = {
   onChartsReady?: () => void;
 };
 
-import React, { useMemo } from "react";
-
 const SERIES_NAME_DELIMITER = " | ";
 
 const CHART_COLORS = [
@@ -158,42 +156,45 @@ const SingleDataGraph = React.memo(
     tall?: boolean;
   }) => {
     const { currentTime, setCurrentTime } = useTime();
-    function flattenRow(
-      row: Record<string, number | Record<string, number>>,
-      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}${SERIES_NAME_DELIMITER}${key}`] = value;
-          } else {
-            result[key] = value;
+    const flattenRow = useCallback(
+      (row: Record<string, number | Record<string, number>>, prefix = "") => {
+        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}${SERIES_NAME_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}${SERIES_NAME_DELIMITER}${key}` : key,
+              ),
+            );
           }
-        } else if (
-          value !== null &&
-          typeof value === "object" &&
-          !Array.isArray(value)
-        ) {
-          // If it's an object, recurse
-          Object.assign(
-            result,
-            flattenRow(
-              value,
-              prefix ? `${prefix}${SERIES_NAME_DELIMITER}${key}` : key,
-            ),
-          );
         }
-      }
-      if ("timestamp" in row && typeof row["timestamp"] === "number") {
-        result["timestamp"] = row["timestamp"];
-      }
-      return result;
-    }
+        if ("timestamp" in row && typeof row["timestamp"] === "number") {
+          result["timestamp"] = row["timestamp"];
+        }
+        return result;
+      },
+      [],
+    );
 
     // Flatten all rows for recharts
-    const chartData = useMemo(() => data.map((row) => flattenRow(row)), [data]);
+    const chartData = useMemo(
+      () => data.map((row) => flattenRow(row)),
+      [data, flattenRow],
+    );
     const [dataKeys, setDataKeys] = useState<string[]>([]);
     const [visibleKeys, setVisibleKeys] = useState<string[]>([]);
 
@@ -205,25 +206,27 @@ const SingleDataGraph = React.memo(
       setVisibleKeys(keys);
     }, [chartData]);
 
-    // Parse dataKeys into groups (dot notation)
-    const groups: Record<string, string[]> = {};
-    const singles: string[] = [];
-    dataKeys.forEach((key) => {
-      const parts = key.split(SERIES_NAME_DELIMITER);
-      if (parts.length > 1) {
-        const group = parts[0];
-        if (!groups[group]) groups[group] = [];
-        groups[group].push(key);
-      } else {
-        singles.push(key);
-      }
-    });
+    const { groups, singles, groupColorMap } = useMemo(() => {
+      const grouped: Record<string, string[]> = {};
+      const singleList: string[] = [];
+      dataKeys.forEach((key) => {
+        const parts = key.split(SERIES_NAME_DELIMITER);
+        if (parts.length > 1) {
+          const group = parts[0];
+          if (!grouped[group]) grouped[group] = [];
+          grouped[group].push(key);
+        } else {
+          singleList.push(key);
+        }
+      });
 
-    const allGroups = [...Object.keys(groups), ...singles];
-    const groupColorMap: Record<string, string> = {};
-    allGroups.forEach((group, idx) => {
-      groupColorMap[group] = CHART_COLORS[idx % CHART_COLORS.length];
-    });
+      const allGroups = [...Object.keys(grouped), ...singleList];
+      const colorMap: Record<string, string> = {};
+      allGroups.forEach((group, idx) => {
+        colorMap[group] = CHART_COLORS[idx % CHART_COLORS.length];
+      });
+      return { groups: grouped, singles: singleList, groupColorMap: colorMap };
+    }, [dataKeys]);
 
     // Find the closest data point to the current time for highlighting
     const findClosestDataIndex = (time: number) => {
@@ -254,26 +257,6 @@ const SingleDataGraph = React.memo(
       );
       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(SERIES_NAME_DELIMITER);
-        if (parts.length > 1) {
-          const group = parts[0];
-          if (!groups[group]) groups[group] = [];
-          groups[group].push(key);
-        } else {
-          singles.push(key);
-        }
-      });
-
-      const allGroups = [...Object.keys(groups), ...singles];
-      const groupColorMap: Record<string, string> = {};
-      allGroups.forEach((group, idx) => {
-        groupColorMap[group] = CHART_COLORS[idx % CHART_COLORS.length];
-      });
-
       const isGroupChecked = (group: string) =>
         groups[group].every((k) => visibleKeys.includes(k));
       const isGroupIndeterminate = (group: string) =>

src/components/urdf-viewer.tsx

@@ -542,7 +542,10 @@ export default function URDFViewer({
 
   const [selectedGroup, setSelectedGroup] = useState(defaultGroup);
   useEffect(() => setSelectedGroup(defaultGroup), [defaultGroup]);
-  const selectedColumns = columnGroups[selectedGroup] ?? [];
+  const selectedColumns = useMemo(
+    () => columnGroups[selectedGroup] ?? [],
+    [columnGroups, selectedGroup],
+  );
 
   // Joint mapping
   const autoMapping = useMemo(
@@ -640,7 +643,7 @@ export default function URDFViewer({
       }
     }
     return values;
-  }, [chartData, frame, mapping, totalFrames, urdfJointNames]);
+  }, [chartData, frame, gripperRanges, mapping, totalFrames, urdfJointNames]);
 
   const currentTime = totalFrames > 0 ? (frame / fps).toFixed(2) : "0.00";
   const totalTime = (totalFrames / fps).toFixed(2);