Spaces:
Running
Running
File size: 4,613 Bytes
b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 4384839 b7ce6b9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 |
import React, { memo, useMemo } from "react";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
} from "recharts";
import { NonIndexedLeRobotDatasetRow } from "@lerobot/web";
interface TeleoperatorJointGraphProps {
frames: NonIndexedLeRobotDatasetRow[];
refreshTick?: number;
}
const MAX_POINTS = 5000;
export const TeleoperatorJointGraph = memo(function TeleoperatorJointGraph({
frames,
refreshTick,
}: TeleoperatorJointGraphProps) {
// Skip rendering if no frames
if (!frames || frames.length === 0) {
return null;
}
// Use hardcoded joint names that match the LeRobot dataset format
const jointNames = [
"shoulder_pan",
"shoulder_lift",
"elbow_flex",
"wrist_flex",
"wrist_roll",
"gripper",
];
// Generate a color palette for the joints
const colors = [
"#8884d8",
"#82ca9d",
"#ffc658",
"#ff8042",
"#0088fe",
"#00C49F",
"#FFBB28",
"#FF8042",
"#a4de6c",
"#d0ed57",
];
// Prepare data for the chart - handling arrays
const chartData = useMemo(
() =>
frames.map((frame, index) => {
// Create base data point with index
const dataPoint: any = {
name: index,
timestamp: frame.timestamp,
};
// Add action values (assuming action is an array)
if (Array.isArray(frame.action)) {
// Map each array index to the corresponding joint name
jointNames.forEach((jointName, i) => {
if (i < frame.action.length) {
dataPoint[`action_${jointName}`] = frame.action[i];
}
});
}
// Add observation state values (assuming observation.state is an array)
if (Array.isArray(frame["observation.state"])) {
// Map each array index to the corresponding joint name
jointNames.forEach((jointName, i) => {
if (i < frame["observation.state"].length) {
dataPoint[`state_${jointName}`] = frame["observation.state"][i];
}
});
}
return dataPoint;
}),
[frames, refreshTick]
);
const limitedData = useMemo(() => {
if (!chartData) return [] as typeof chartData;
const len = chartData.length;
if (len <= MAX_POINTS) return chartData;
return chartData.slice(len - MAX_POINTS, len);
}, [chartData]);
// Create lines for each joint
const linesToRender = jointNames.flatMap((jointName) => [
{
key: `action_${jointName}`,
dataKey: `action_${jointName}`,
name: `Action: ${jointName}`,
isDotted: true,
},
{
key: `state_${jointName}`,
dataKey: `state_${jointName}`,
name: `State: ${jointName}`,
isDotted: false,
},
]);
return (
<div className="w-full bg-gray-800/50 rounded-md p-4 mb-4">
<h3 className="text-sm font-medium text-gray-300 mb-2">
Joint Positions Over Time
</h3>
<ResponsiveContainer width="100%" height={300}>
<LineChart
data={limitedData}
margin={{
top: 5,
right: 30,
left: 20,
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" stroke="#444" />
<XAxis
dataKey="name"
label={{
value: "Frame Index",
position: "insideBottomRight",
offset: -10,
}}
stroke="#aaa"
/>
<YAxis stroke="#aaa" />
<Tooltip
contentStyle={{ backgroundColor: "#333", borderColor: "#555" }}
labelStyle={{ color: "#eee" }}
itemStyle={{ color: "#eee" }}
/>
<Legend />
{/* Render all lines */}
{linesToRender.map((lineConfig, index) => {
const jointName = lineConfig.dataKey.replace(
/^(action|state)_/,
""
);
const jointIndex = jointNames.indexOf(jointName);
const colorIndex =
jointIndex >= 0 ? jointIndex : index % colors.length;
return (
<Line
key={lineConfig.key}
type="monotone"
dataKey={lineConfig.dataKey}
name={lineConfig.name}
stroke={colors[colorIndex]}
strokeDasharray={lineConfig.isDotted ? "5 5" : undefined}
dot={false}
activeDot={{ r: 4 }}
/>
);
})}
</LineChart>
</ResponsiveContainer>
</div>
);
});
|