feat(viewer): add recorded point colors and trajectory follow

apps/control-station/src/workspaces/Workspaces.tsx

@@ -46,6 +46,7 @@ import {
   type RerunSelection,
   type RerunViewportStatus,
   type RecordedPerceptionLoadState,
+  type RecordedPointColorLoadState,
 } from "../components/RerunViewport";
 import {
   capabilityStatusLabel,
@@ -308,6 +309,7 @@ function SpatialWorkspace({
   const [playbackState, setPlaybackState] = useState<RerunPlaybackState | null>(null);
   const [playbackController, setPlaybackController] = useState<RerunPlaybackController | null>(null);
   const [recordedViewResetGeneration, setRecordedViewResetGeneration] = useState<0 | 1>(0);
+  const [followRecordedTrajectory, setFollowRecordedTrajectory] = useState(false);
   const [perceptionLoad, setPerceptionLoad] = useState<RecordedPerceptionLoadState>({
     phase: "idle",
     receivedBytes: 0,
@@ -316,6 +318,13 @@ function SpatialWorkspace({
     message: "",
   });
   const [perceptionRetryGeneration, setPerceptionRetryGeneration] = useState(0);
+  const [pointColorLoad, setPointColorLoad] = useState<RecordedPointColorLoadState>({
+    phase: "idle",
+    receivedBytes: 0,
+    totalBytes: null,
+    progress: null,
+    message: "",
+  });
   const [showDetections2d, setShowDetections2d] = useState(false);
   const [showSegmentation, setShowSegmentation] = useState(false);
   const [showCuboids3d, setShowCuboids3d] = useState(false);
@@ -437,6 +446,9 @@ function SpatialWorkspace({
       setShowCuboids3d(false);
     }
   }, []);
+  const onPointColorLoadChange = useCallback((next: RecordedPointColorLoadState) => {
+    setPointColorLoad(next);
+  }, []);
 
   useEffect(() => {
     setPerceptionLoad({
@@ -451,6 +463,14 @@ function SpatialWorkspace({
     setShowSegmentation(false);
     setShowCuboids3d(false);
     setRecordedViewResetGeneration(0);
+    setFollowRecordedTrajectory(false);
+    setPointColorLoad({
+      phase: "idle",
+      receivedBytes: 0,
+      totalBytes: null,
+      progress: null,
+      message: "",
+    });
   }, [recordedSource, sourceUrl]);
 
   useEffect(() => {
@@ -470,6 +490,14 @@ function SpatialWorkspace({
     setShowDetections2d(false);
     setShowSegmentation(false);
     setShowCuboids3d(false);
+    setFollowRecordedTrajectory(false);
+    setPointColorLoad({
+      phase: "idle",
+      receivedBytes: 0,
+      totalBytes: null,
+      progress: null,
+      message: "",
+    });
   }, [pointCloudVisible, sourceUrl]);
 
   useEffect(() => {
@@ -586,6 +614,29 @@ function SpatialWorkspace({
               Повторить AI
             </button>
           ) : null}
+          {recordedSource && pointColorLoad.phase === "loading" ? (
+            <div className="spatial-toolbar__perception-status" role="status">
+              <span className="busy-indicator" aria-hidden="true" />
+              <span>{pointColorLoad.message}</span>
+            </div>
+          ) : null}
+          {recordedSource && pointColorLoad.phase === "error" ? (
+            <div className="spatial-toolbar__perception-status" role="status">
+              <span>{pointColorLoad.message}</span>
+            </div>
+          ) : null}
+          {recordedSource && presentedViewerStatus === "ready" ? (
+            <Button
+              size="compact"
+              variant={followRecordedTrajectory ? "primary" : "secondary"}
+              icon={<Icon name="target" />}
+              aria-pressed={followRecordedTrajectory}
+              title="Привязать orbital-пивот к текущему положению рига"
+              onClick={() => setFollowRecordedTrajectory((current) => !current)}
+            >
+              Следовать
+            </Button>
+          ) : null}
           {recordedSource && presentedViewerStatus === "ready" ? (
             <Button
               size="compact"
@@ -630,6 +681,7 @@ function SpatialWorkspace({
               initialPlaybackStartSeconds={initialRecordedPlaybackStartSeconds}
               sceneSettings={sceneSettings}
               recordedViewResetGeneration={recordedViewResetGeneration}
+              recordedFollowTrajectory={followRecordedTrajectory}
               recordedPerceptionLayers={{
                 enabled:
                   recordedPerceptionSupported &&
@@ -642,6 +694,7 @@ function SpatialWorkspace({
               recordedPerceptionRetryGeneration={perceptionRetryGeneration}
               lockPerceptionCameraInteraction={unifiedPerception}
               onPerceptionLoadChange={onPerceptionLoadChange}
+              onPointColorLoadChange={onPointColorLoadChange}
               onStatusChange={onStatusChange}
               onSelectionChange={onSelectionChange}
               onPlaybackChange={onPlaybackChange}