@wandelbots/wandelbots-js-react-components 2.54.5-pr.feat-upgrade-jogging-to-v2.404.bbdcc8a → 2.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.54.5-pr.feat-upgrade-jogging-to-v2.404.bbdcc8a",
+  "version": "2.55.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -70,7 +70,7 @@
     "@types/react": "^19.1.8",
     "@types/three": "^0.174.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@wandelbots/nova-js": "3.3.1",
+    "@wandelbots/nova-js": "^2.1.0",
     "add": "^2.0.6",
     "eslint-plugin-storybook": "^10.0.1",
     "glob": "^11.0.1",

package/src/components/3d-viewport/CoordinateSystemTransform.tsx

@@ -1,4 +1,4 @@
-import type { CoordinateSystem } from "@wandelbots/nova-js/v1"
+import type { CoordinateSystem } from "@wandelbots/nova-api/v1"
 import type { ReactNode } from "react"
 import { Quaternion, Vector3 } from "three"
 

package/src/components/3d-viewport/SafetyZonesRenderer.tsx

@@ -1,5 +1,6 @@
 import { type ThreeElements } from "@react-three/fiber"
-import type { Geometry, SafetySetupSafetyZone } from "@wandelbots/nova-js/v1"
+import type { Geometry } from "@wandelbots/nova-api/v1"
+import type { SafetySetupSafetyZone } from "@wandelbots/nova-js/v1"
 import * as THREE from "three"
 import { ConvexGeometry } from "three-stdlib"
 

package/src/components/3d-viewport/collider/ColliderCollection.tsx

@@ -1,5 +1,5 @@
 import type { ThreeElements } from "@react-three/fiber"
-import type { Collider } from "@wandelbots/nova-js/v1"
+import type { Collider } from "@wandelbots/nova-api/v1"
 import ColliderElement from "./ColliderElement"
 
 export type MeshChildrenProvider = (

package/src/components/3d-viewport/collider/ColliderElement.tsx

@@ -1,4 +1,4 @@
-import type { Collider } from "@wandelbots/nova-js/v1"
+import type { Collider } from "@wandelbots/nova-api/v1"
 import type React from "react"
 import * as THREE from "three"
 import { colliderShapeToBufferGeometry } from "./colliderShapeToBufferGeometry"

package/src/components/3d-viewport/collider/CollisionSceneRenderer.tsx

@@ -1,4 +1,4 @@
-import type { CollisionScene } from "@wandelbots/nova-js/v1"
+import type { CollisionScene } from "@wandelbots/nova-api/v1"
 import ColliderCollection, {
   type MeshChildrenProvider,
 } from "./ColliderCollection"

package/src/components/3d-viewport/collider/colliderShapeToBufferGeometry.ts

@@ -1,4 +1,4 @@
-import type { ColliderShape } from "@wandelbots/nova-js/v1"
+import type { ColliderShape } from "@wandelbots/nova-api/v1"
 import * as THREE from "three"
 import { ConvexGeometry } from "three-stdlib"
 

package/src/components/ProgramStateIndicator.tsx

@@ -1,5 +1,8 @@
 import { Chip, Typography, useTheme } from "@mui/material"
-import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"
+import type {
+  RobotControllerStateOperationModeEnum,
+  RobotControllerStateSafetyStateEnum,
+} from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../externalizeComponent"
@@ -9,9 +12,9 @@ export interface ProgramStateIndicatorProps {
   /** The current state of the program */
   programState: ProgramState
   /** The current safety state of the robot controller */
-  safetyState: SafetyStateType
+  safetyState: RobotControllerStateSafetyStateEnum
   /** The current operation mode of the robot controller */
-  operationMode: OperationMode
+  operationMode: RobotControllerStateOperationModeEnum
   /** Additional CSS class name */
   className?: string
 }

package/src/components/RobotCard.tsx

@@ -1,13 +1,16 @@
 import { Box, Button, Card, Divider, Typography, useTheme } from "@mui/material"
 import { Bounds } from "@react-three/drei"
 import { Canvas } from "@react-three/fiber"
-import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"
+import type {
+  ConnectedMotionGroup,
+  RobotControllerStateOperationModeEnum,
+  RobotControllerStateSafetyStateEnum,
+} from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import type { Group } from "three"
 import { externalizeComponent } from "../externalizeComponent"
-import type { ConnectedMotionGroup } from "../lib/ConnectedMotionGroup"
 import { PresetEnvironment } from "./3d-viewport/PresetEnvironment"
 import type { ProgramState } from "./ProgramControl"
 import { ProgramStateIndicator } from "./ProgramStateIndicator"
@@ -19,9 +22,9 @@ export interface RobotCardProps {
   /** Current program state */
   programState: ProgramState
   /** Current safety state of the robot controller */
-  safetyState: SafetyStateType
+  safetyState: RobotControllerStateSafetyStateEnum
   /** Current operation mode of the robot controller */
-  operationMode: OperationMode
+  operationMode: RobotControllerStateOperationModeEnum
   /** Whether the "Drive to Home" button should be enabled */
   driveToHomeEnabled?: boolean
   /** Callback fired when "Drive to Home" button is pressed */

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -6,18 +6,13 @@ import {
   useTheme,
   type Theme,
 } from "@mui/material"
-import {
-  degreesToRadians,
-  radiansToDegrees,
-  XYZ_TO_VECTOR,
-} from "@wandelbots/nova-js"
+import { degreesToRadians, radiansToDegrees } from "@wandelbots/nova-js"
 import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import XAxisIcon from "../../icons/axis-x.svg"
 import YAxisIcon from "../../icons/axis-y.svg"
 import ZAxisIcon from "../../icons/axis-z.svg"
 import RotationIcon from "../../icons/rotation.svg"
-import type { Vector3Simple } from "../../lib/JoggerConnection"
 import { useReaction } from "../utils/hooks"
 import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
@@ -61,7 +56,7 @@ export const JoggingCartesianTab = observer(
       () => {
         store.jogger.motionStream.motionStateSocket.changeUrl(
           store.jogger.nova.makeWebsocketURL(
-            `/controllers/${store.jogger.motionStream.controllerId}/motion-groups/${store.jogger.motionGroupId}/state-stream?tcp=${store.selectedTcpId}`,
+            `/motion-groups/${store.jogger.motionGroupId}/state-stream?tcp=${store.selectedTcpId}&response_coordinate_system=${store.selectedCoordSystemId}`,
           ),
         )
       },
@@ -75,8 +70,8 @@ export const JoggingCartesianTab = observer(
       const jogger = await store.activate()
 
       const tcpPose = jogger.motionStream.rapidlyChangingMotionState.tcp_pose
-      const jointPosition = jogger.motionStream.rapidlyChangingMotionState
-        .joint_position as Vector3Simple
+      const jointPosition =
+        jogger.motionStream.rapidlyChangingMotionState.state.joint_position
       if (!tcpPose) return
 
       await store.withMotionLock(async () => {
@@ -122,13 +117,13 @@ export const JoggingCartesianTab = observer(
       }
 
       if (opts.motionType === "translate") {
-        await store.jogger.translateTCP({
+        await store.jogger.startTCPTranslation({
           axis: opts.axis,
           direction: opts.direction,
           velocityMmPerSec: store.translationVelocityMmPerSec,
         })
       } else {
-        await store.jogger.rotateTCP({
+        await store.jogger.startTCPRotation({
           axis: opts.axis,
           direction: opts.direction,
           velocityRadsPerSec: store.rotationVelocityRadsPerSec,
@@ -194,7 +189,10 @@ export const JoggingCartesianTab = observer(
     return (
       <Stack flexGrow={1} gap={2} sx={{ padding: "18px 24px" }}>
         <Stack gap={2}>
+          {/* Jogging options */}
           <JoggingOptions store={store} />
+
+          {/* Velocity slider */}
           <JoggingVelocitySlider store={store} />
           <Divider />
         </Stack>
@@ -259,7 +257,7 @@ export const JoggingCartesianTab = observer(
                   getDisplayedValue={() =>
                     formatMM(
                       store.jogger.motionStream.rapidlyChangingMotionState
-                        .tcp_pose?.position?.[XYZ_TO_VECTOR[axis.id]] || 0,
+                        .tcp_pose?.position[axis.id] || 0,
                     )
                   }
                   startJogging={(direction: "-" | "+") =>
@@ -303,7 +301,7 @@ export const JoggingCartesianTab = observer(
                   getDisplayedValue={() =>
                     formatDegrees(
                       store.jogger.motionStream.rapidlyChangingMotionState
-                        .tcp_pose?.orientation?.[XYZ_TO_VECTOR[axis.id]] || 0,
+                        .tcp_pose?.orientation?.[axis.id] || 0,
                     )
                   }
                   startJogging={(direction: "-" | "+") =>

package/src/components/jogging/JoggingJointLimitDetector.tsx

@@ -17,14 +17,14 @@ export const JoggingJointLimitDetector = ({
   const { t } = useTranslation()
 
   const [jointLimitsReached, setJointLimitsReached] = useState(
-    store.jogger.motionStream.rapidlyChangingMotionState
+    store.jogger.motionStream.rapidlyChangingMotionState.state
       .joint_limit_reached.limit_reached,
   )
   const jointLimitsReachedRef = useRef(jointLimitsReached)
 
   useAnimationFrame(() => {
     const newLimitsReached =
-      store.jogger.motionStream.rapidlyChangingMotionState
+      store.jogger.motionStream.rapidlyChangingMotionState.state
         .joint_limit_reached.limit_reached
 
     if (!isEqual(jointLimitsReachedRef.current, newLimitsReached)) {

package/src/components/jogging/JoggingJointTab.tsx

@@ -16,7 +16,7 @@ export const JoggingJointTab = observer(
     }) {
       await store.activate()
 
-      await store.jogger.rotateJoints({
+      await store.jogger.startJointRotation({
         joint: opts.joint,
         direction: opts.direction,
         velocityRadsPerSec: store.rotationVelocityRadsPerSec,
@@ -42,8 +42,7 @@ export const JoggingJointTab = observer(
           <Stack alignItems="center" gap="24px">
             {store.jogger.motionStream.joints.map((joint) => {
               const jointLimits =
-                store.motionGroupDescription.operation_limits.auto_limits
-                  ?.joints?.[joint.index]?.position
+                store.motionGroupSpec.mechanical_joint_limits?.[joint.index]
               const lowerLimitDegs =
                 jointLimits?.lower_limit !== undefined
                   ? radiansToDegrees(jointLimits.lower_limit)
@@ -81,7 +80,7 @@ export const JoggingJointTab = observer(
                     getValueDegs={() => {
                       const value =
                         store.jogger.motionStream.rapidlyChangingMotionState
-                          .joint_position[joint.index]
+                          .state.joint_position.joints[joint.index]
                       return value !== undefined
                         ? radiansToDegrees(value)
                         : undefined

package/src/components/jogging/JoggingPanel.tsx

@@ -1,16 +1,14 @@
 import MoveIcon from "@mui/icons-material/OpenWith"
 import ShareIcon from "@mui/icons-material/Share"
 import { Stack, Tab, Tabs, type SxProps } from "@mui/material"
-import { NovaClient } from "@wandelbots/nova-js/v2"
+import { NovaClient } from "@wandelbots/nova-js/v1"
 import { isString } from "lodash-es"
 import { runInAction } from "mobx"
 import { observer, useLocalObservable } from "mobx-react-lite"
 import { useEffect } from "react"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../../externalizeComponent"
-import { JoggerConnection } from "../../lib/JoggerConnection"
 import { LoadingCover } from "../LoadingCover"
-import { JoggingBlocked } from "./JoggingBlocked"
 import { JoggingCartesianTab } from "./JoggingCartesianTab"
 import { JoggingJointTab } from "./JoggingJointTab"
 import { JoggingStore } from "./JoggingStore"
@@ -60,7 +58,7 @@ export const JoggingPanel = externalizeComponent(
       try {
         let joggingStore = props.store
         if (!joggingStore) {
-          const jogger = await JoggerConnection.open(nova, props.motionGroupId)
+          const jogger = await nova.connectJogger(props.motionGroupId)
           joggingStore = await JoggingStore.loadFor(jogger)
         }
         runInAction(() => {
@@ -183,6 +181,7 @@ const JoggingPanelInner = observer(
             )
           })}
         </Tabs>
+
         {/* Current tab content */}
         <Stack
           flexGrow={1}
@@ -191,8 +190,6 @@ const JoggingPanelInner = observer(
         >
           {renderTabContent()}
         </Stack>
-        {/* Overlay when jogging connection is blocked */}
-        {store.blocked && <JoggingBlocked store={store} />}
       </Stack>
     )
   },

package/src/components/jogging/JoggingStore.ts

@@ -1,18 +1,14 @@
 import { tryParseJson } from "@wandelbots/nova-js"
 import type {
   CoordinateSystem,
-  MotionGroupDescription,
+  JoggerConnection,
+  MotionGroupSpecification,
   RobotTcp,
-} from "@wandelbots/nova-js/v2"
+} from "@wandelbots/nova-js/v1"
 import { countBy } from "lodash-es"
 import keyBy from "lodash-es/keyBy"
 import uniqueId from "lodash-es/uniqueId"
 import { autorun, makeAutoObservable, type IReactionDisposer } from "mobx"
-import type {
-  JoggerConnection,
-  JoggerOrientation,
-  Vector3Simple,
-} from "../../lib/JoggerConnection"
 
 const discreteIncrementOptions = [
   { id: "0.1", mm: 0.1, degrees: 0.05 },
@@ -59,9 +55,6 @@ export class JoggingStore {
   /** Locks to prevent UI interactions during certain operations */
   locks = new Set<string>()
 
-  /** Block jogging UI interactions when connection is taken by another jogger */
-  blocked: boolean = false
-
   /**
    * Id of selected coordinate system from among those defined on the API side
    */
@@ -112,7 +105,7 @@ export class JoggingStore {
   maxRotationVelocityDegPerSec: number = 60
 
   /** Whether to show the coordinate system select dropdown in the UI */
-  showCoordSystemSelect: boolean = false
+  showCoordSystemSelect: boolean = true
 
   /** Whether to show the TCP select dropdown in the UI */
   showTcpSelect: boolean = true
@@ -145,34 +138,34 @@ export class JoggingStore {
     const { nova } = jogger
 
     // Find out what TCPs this motion group has (we need it for jogging)
-    const [coordinatesystems, description] = await Promise.all([
-      // Fetch coord systems so user can select between them
-      nova.api.controller.listCoordinateSystems(
-        jogger.motionStream.controllerId,
-        "ROTATION_VECTOR",
-      ),
-
-      // Same for TCPs and other info from description
-      nova.api.motionGroup.getMotionGroupDescription(
-        jogger.motionStream.controllerId,
-        jogger.motionGroupId,
-      ),
-    ])
-
-    const tcps = Object.entries(description.tcps || {}).map(([id, tcp]) => ({
-      id,
-      readable_name: tcp.name,
-      position: tcp.pose.position as Vector3Simple,
-      orientation: tcp.pose.orientation as Vector3Simple,
-    }))
-
-    return new JoggingStore(jogger, coordinatesystems || [], description, tcps)
+    const [motionGroupSpec, { coordinatesystems }, { tcps }] =
+      await Promise.all([
+        nova.api.motionGroupInfos.getMotionGroupSpecification(
+          jogger.motionGroupId,
+        ),
+
+        // Fetch coord systems so user can select between them
+        nova.api.coordinateSystems.listCoordinateSystems("ROTATION_VECTOR"),
+
+        // Same for TCPs
+        nova.api.motionGroupInfos.listTcps(
+          jogger.motionGroupId,
+          "ROTATION_VECTOR",
+        ),
+      ])
+
+    return new JoggingStore(
+      jogger,
+      motionGroupSpec,
+      coordinatesystems || [],
+      tcps || [],
+    )
   }
 
   constructor(
     readonly jogger: JoggerConnection,
+    readonly motionGroupSpec: MotionGroupSpecification,
     readonly coordSystems: CoordinateSystem[],
-    readonly motionGroupDescription: MotionGroupDescription,
     readonly tcps: RobotTcp[],
   ) {
     // TODO workaround for default coord system on backend having a canonical id
@@ -186,21 +179,13 @@ export class JoggingStore {
     this.selectedCoordSystemId = coordSystems[0]?.coordinate_system || "world"
     this.selectedTcpId = tcps[0]?.id || ""
 
-    // Make all properties observable and actions auto-bound
     makeAutoObservable(this, {}, { autoBind: true })
 
-    // Register blocked watching
-    this.jogger.onBlocked = () => {
-      this.block()
-    }
-
     // Load user settings from local storage if available
     this.loadFromLocalStorage()
 
     // Automatically save user settings to local storage when save changes
     this.disposers.push(autorun(() => this.saveToLocalStorage()))
-
-    // Assign joggingStore to window
     ;(window as any).joggingStore = this
   }
 
@@ -216,31 +201,30 @@ export class JoggingStore {
   }
 
   async deactivate() {
-    if (this.jogger.mode === "jogging") {
-      return this.jogger.stop()
+    const websocket = this.jogger.activeWebsocket
+
+    this.jogger.setJoggingMode("increment")
+
+    if (websocket) {
+      await websocket.closed()
     }
   }
 
   /** Activate the jogger with current settings */
   async activate() {
     if (this.currentTab.id === "cartesian") {
-      if (
-        this.jogger.tcp !== this.selectedTcpId ||
-        this.jogger.orientation !== this.selectedOrientation
-      ) {
-        this.jogger.setOptions({
-          tcp: this.selectedTcpId,
-          orientation: this.selectedOrientation as JoggerOrientation,
-        })
+      const cartesianJoggingOpts = {
+        tcpId: this.selectedTcpId,
+        coordSystemId: this.activeCoordSystemId,
       }
 
       if (this.activeDiscreteIncrement) {
-        this.jogger.setJoggingMode("trajectory")
+        this.jogger.setJoggingMode("increment", cartesianJoggingOpts)
       } else {
-        this.jogger.setJoggingMode("jogging")
+        this.jogger.setJoggingMode("cartesian", cartesianJoggingOpts)
       }
     } else {
-      this.jogger.setJoggingMode("jogging")
+      this.jogger.setJoggingMode("joint")
     }
 
     return this.jogger
@@ -449,17 +433,6 @@ export class JoggingStore {
     this.locks.delete(id)
   }
 
-  block() {
-    this.blocked = true
-  }
-
-  unblock() {
-    this.blocked = false
-    if (this.jogger.mode === "jogging") {
-      this.jogger.initializeJoggingWebsocket()
-    }
-  }
-
   /** Lock the UI until the given async callback resolves */
   async withMotionLock(fn: () => Promise<void>) {
     const lockId = uniqueId()

package/src/components/jogging/PoseCartesianValues.tsx

@@ -1,12 +1,13 @@
 import { Button, Stack } from "@mui/material"
-import { poseToWandelscriptString, type Pose } from "@wandelbots/nova-js/v2"
+import { poseToWandelscriptString } from "@wandelbots/nova-js"
+import type { TcpPose } from "@wandelbots/nova-js/v1"
 import { observer } from "mobx-react-lite"
 import { useState } from "react"
 import { externalizeComponent } from "../../externalizeComponent"
 import { CopyableText } from "../CopyableText"
 
 export type PoseCartesianValuesProps = {
-  tcpPose: Pose
+  tcpPose: TcpPose
   showCopyButton?: boolean
 }
 
@@ -43,7 +44,7 @@ export const PoseCartesianValues = externalizeComponent(
             onClick={handleCopy}
             sx={{ flexShrink: 0 }}
           >
-            {copyMessage ? copyMessage : "Copy"}
+            { copyMessage ? copyMessage : "Copy"}
           </Button>
         )}
       </Stack>

package/src/components/jogging/PoseJointValues.tsx

@@ -1,18 +1,19 @@
 import { Button, Stack } from "@mui/material"
+import type { Joints } from "@wandelbots/nova-api/v1"
 import { observer } from "mobx-react-lite"
 import { useState } from "react"
 import { externalizeComponent } from "../../externalizeComponent"
 import { CopyableText } from "../CopyableText"
 
 export type PoseJointValuesProps = {
-  joints: Array<number>
+  joints: Joints
   showCopyButton?: boolean
 }
 
 export const PoseJointValues = externalizeComponent(
   observer(({ joints, showCopyButton = false }: PoseJointValuesProps) => {
     const [copyMessage, setCopyMessage] = useState<string | null>(null)
-    const poseString = `[${joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
+    const poseString = `[${joints.joints.map((j: number) => parseFloat(j.toFixed(4))).join(", ")}]`
 
     const handleCopy = async () => {
       try {
@@ -42,7 +43,7 @@ export const PoseJointValues = externalizeComponent(
             onClick={handleCopy}
             sx={{ flexShrink: 0 }}
           >
-            {copyMessage ? copyMessage : "Copy"}
+            { copyMessage ? copyMessage : "Copy"}
           </Button>
         )}
       </Stack>

package/src/components/robots/DHRobot.tsx

@@ -1,5 +1,5 @@
 import { Line } from "@react-three/drei"
-import type { DHParameter } from "@wandelbots/nova-js/v2"
+import type { DHParameter } from "@wandelbots/nova-api/v1"
 import React, { useRef } from "react"
 import type * as THREE from "three"
 import { Matrix4, Quaternion, Vector3 } from "three"
@@ -113,7 +113,8 @@ export function DHRobot({
           {dhParameters!.map((param, index) => {
             const { a, b } = getLinePoints(
               param,
-              rapidlyChangingMotionState.joint_position[index] ?? 0,
+              rapidlyChangingMotionState.state.joint_position.joints[index] ??
+                0,
             )
             const jointName = `dhrobot_J0${index}`
             return (

package/src/components/robots/Robot.tsx

@@ -1,7 +1,7 @@
 import type { ThreeElements } from "@react-three/fiber"
 
+import type { ConnectedMotionGroup } from "@wandelbots/nova-js/v1"
 import type { Group } from "three"
-import type { ConnectedMotionGroup } from "../../lib/ConnectedMotionGroup"
 import { defaultGetModel } from "./robotModelLogic"
 import { SupportedRobot } from "./SupportedRobot"
 

package/src/components/robots/RobotAnimator.test.tsx

@@ -1,4 +1,7 @@
-import type { DHParameter, MotionGroupState } from "@wandelbots/nova-api/v2"
+import type {
+  DHParameter,
+  MotionGroupStateResponse,
+} from "@wandelbots/nova-api/v1"
 import { describe, expect, it, vi } from "vitest"
 import RobotAnimator from "./RobotAnimator"
 
@@ -23,8 +26,12 @@ describe("RobotAnimator", () => {
 
   it("should handle props with different numbers of joints", () => {
     // Test that the component accepts different numbers of DH parameters
-    const mockMotionState4Joints: MotionGroupState = {
-      joint_position: [0.1, 0.2, 0.3, 0.4],
+    const mockMotionState4Joints: MotionGroupStateResponse = {
+      state: {
+        joint_position: {
+          joints: [0.1, 0.2, 0.3, 0.4],
+        },
+      },
     } as any
 
     const mockDHParameters4Joints: DHParameter[] = [
@@ -34,8 +41,12 @@ describe("RobotAnimator", () => {
       { theta: 0, reverse_rotation_direction: false },
     ]
 
-    const mockMotionState7Joints: MotionGroupState = {
-      joint_position: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7],
+    const mockMotionState7Joints: MotionGroupStateResponse = {
+      state: {
+        joint_position: {
+          joints: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7],
+        },
+      },
     } as any
 
     const mockDHParameters7Joints: DHParameter[] = Array(7).fill({
@@ -52,7 +63,9 @@ describe("RobotAnimator", () => {
       }
       // Verify props are correctly typed
       expect(props4.dhParameters).toHaveLength(4)
-      expect(props4.rapidlyChangingMotionState.joint_position).toHaveLength(4)
+      expect(
+        props4.rapidlyChangingMotionState.state.joint_position.joints,
+      ).toHaveLength(4)
     }).not.toThrow()
 
     expect(() => {
@@ -62,7 +75,9 @@ describe("RobotAnimator", () => {
         children: null,
       }
       expect(props7.dhParameters).toHaveLength(7)
-      expect(props7.rapidlyChangingMotionState.joint_position).toHaveLength(7)
+      expect(
+        props7.rapidlyChangingMotionState.state.joint_position.joints,
+      ).toHaveLength(7)
     }).not.toThrow()
   })
 

package/src/components/robots/RobotAnimator.tsx

@@ -1,5 +1,8 @@
 import { useFrame, useThree } from "@react-three/fiber"
-import type { DHParameter, MotionGroupState } from "@wandelbots/nova-js/v2"
+import type {
+  DHParameter,
+  MotionGroupStateResponse,
+} from "@wandelbots/nova-api/v1"
 import React, { useEffect, useRef } from "react"
 import type { Group, Object3D } from "three"
 import { useAutorun } from "../utils/hooks"
@@ -7,7 +10,7 @@ import { ValueInterpolator } from "../utils/interpolation"
 import { collectJoints } from "./robotModelLogic"
 
 type RobotAnimatorProps = {
-  rapidlyChangingMotionState: MotionGroupState
+  rapidlyChangingMotionState: MotionGroupStateResponse
   dhParameters: DHParameter[]
   onRotationChanged?: (joints: Object3D[], jointValues: number[]) => void
   children: React.ReactNode
@@ -26,9 +29,10 @@ export default function RobotAnimator({
 
   // Initialize interpolator
   useEffect(() => {
-    const initialJointValues = rapidlyChangingMotionState.joint_position.filter(
-      (item) => item !== undefined,
-    )
+    const initialJointValues =
+      rapidlyChangingMotionState.state.joint_position.joints.filter(
+        (item) => item !== undefined,
+      )
 
     interpolatorRef.current = new ValueInterpolator(initialJointValues, {
       tension: 120, // Controls spring stiffness - higher values create faster, more responsive motion
@@ -87,9 +91,10 @@ export default function RobotAnimator({
   }
 
   useAutorun(() => {
-    const newJointValues = rapidlyChangingMotionState.joint_position.filter(
-      (item) => item !== undefined,
-    )
+    const newJointValues =
+      rapidlyChangingMotionState.state.joint_position.joints.filter(
+        (item) => item !== undefined,
+      )
 
     requestAnimationFrame(() => updateJoints(newJointValues))
   })