@wandelbots/wandelbots-js-react-components 5.5.1-pr.fix-standardize-output.591.60112ee → 5.5.1

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -0,0 +1,39 @@
+import { observer } from "mobx-react-lite"
+import { useTranslation } from "react-i18next"
+import { VelocitySlider, VelocitySliderLabel } from "../VelocitySlider"
+import type { JoggingStore } from "./JoggingStore"
+
+export const JoggingVelocitySlider = observer(
+  ({ store, useDegree }: { store: JoggingStore; useDegree: boolean }) => {
+    const { t } = useTranslation()
+
+    function valueLabelFormat(value: number, useDegree: boolean): string {
+      return useDegree
+        ? `ω = ${t("Jogging.Cartesian.Rotation.velocityDegPerSec.lb", { amount: value })}`
+        : `v = ${t("Jogging.Cartesian.Translation.velocityMmPerSec.lb", { amount: value })}`
+    }
+
+    return (
+      <VelocitySlider
+        store={store}
+        velocity={store.velocityInDisplayUnits(useDegree)}
+        min={store.minVelocityInDisplayUnits(useDegree)}
+        max={store.maxVelocityInDisplayUnits(useDegree)}
+        onVelocityChange={store.setVelocityFromSlider}
+        useDegree={useDegree}
+        disabled={store.isLocked}
+        renderValue={(value) => (
+          <VelocitySliderLabel
+            value={valueLabelFormat(value, useDegree)}
+            sx={{
+              minWidth: "111px",
+              span: {
+                transform: "translateY(-1.5px)",
+              },
+            }}
+          />
+        )}
+      />
+    )
+  },
+)

package/src/components/jogging/PoseCartesianValues.tsx

@@ -0,0 +1,55 @@
+import Button from "@mui/material/Button"
+import Stack from "@mui/material/Stack"
+import { poseToWandelscriptString, type Pose } from "@wandelbots/nova-js/v2"
+import { observer } from "mobx-react-lite"
+import { useState } from "react"
+import { externalizeComponent } from "../../externalizeComponent"
+import { CopyableText } from "../CopyableText"
+
+export type PoseCartesianValuesProps = {
+  tcpPose: Pose
+  showCopyButton?: boolean
+}
+
+export const PoseCartesianValues = externalizeComponent(
+  observer(({ tcpPose, showCopyButton = false }: PoseCartesianValuesProps) => {
+    const [copyMessage, setCopyMessage] = useState<string | null>(null)
+    const poseString = poseToWandelscriptString(tcpPose)
+
+    const handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(poseString)
+        setCopyMessage("Copied!")
+        setTimeout(() => setCopyMessage(null), 2000)
+      } catch {
+        setCopyMessage("Copy failed")
+        setTimeout(() => setCopyMessage(null), 2000)
+      }
+    }
+
+    return (
+      <Stack
+        direction="row"
+        alignItems="center"
+        spacing={1}
+        sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
+        data-testid="pose-cartesian-values"
+      >
+        <CopyableText value={poseString} />
+        {showCopyButton && (
+          <Button
+            variant="contained"
+            color="secondary"
+            size="small"
+            onClick={handleCopy}
+            sx={{ flexShrink: 0 }}
+          >
+            {copyMessage ? copyMessage : "Copy"}
+          </Button>
+        )}
+      </Stack>
+    )
+  }),
+)
+
+export default PoseCartesianValues

package/src/components/jogging/PoseJointValues.tsx

@@ -0,0 +1,54 @@
+import Button from "@mui/material/Button"
+import Stack from "@mui/material/Stack"
+import { observer } from "mobx-react-lite"
+import { useState } from "react"
+import { externalizeComponent } from "../../externalizeComponent"
+import { CopyableText } from "../CopyableText"
+
+export type PoseJointValuesProps = {
+  joints: Array<number>
+  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 handleCopy = async () => {
+      try {
+        await navigator.clipboard.writeText(poseString)
+        setCopyMessage("Copied!")
+        setTimeout(() => setCopyMessage(null), 2000)
+      } catch {
+        setCopyMessage("Copy failed")
+        setTimeout(() => setCopyMessage(null), 2000)
+      }
+    }
+
+    return (
+      <Stack
+        direction="row"
+        alignItems="center"
+        spacing={1}
+        sx={{ flexGrow: 1, minWidth: 0, overflow: "hidden" }}
+        data-testid="pose-joint-values"
+      >
+        <CopyableText value={poseString} />
+        {showCopyButton && (
+          <Button
+            variant="contained"
+            color="secondary"
+            size="small"
+            onClick={handleCopy}
+            sx={{ flexShrink: 0 }}
+          >
+            {copyMessage ? copyMessage : "Copy"}
+          </Button>
+        )}
+      </Stack>
+    )
+  }),
+)
+
+export default PoseJointValues

package/src/components/jogging/__fixtures__/motionStreamMockData.ts

@@ -0,0 +1,136 @@
+/**
+ * Real motion state data captured from websocket connections
+ * to actual robot controllers, converted to MotionGroupState format.
+ */
+import { JointTypeEnum } from "@wandelbots/nova-js/v2"
+import type {
+  MotionGroupState,
+  MotionGroupDescription,
+  DHParameter,
+} from "@wandelbots/nova-js/v2"
+
+// ---------------------------------------------------------------------------
+// UR5e – 6 revolute joints
+// ---------------------------------------------------------------------------
+
+export const ur5eMotionGroupState: MotionGroupState = {
+  motion_group: "0@ur5emock",
+  controller: "ur5emock",
+  joint_position: [
+    0, -1.5709999799728394, -1.5709999799728394, -1.5709999799728394,
+    1.5709999799728394, -1.5709999799728394,
+  ],
+  joint_limit_reached: {
+    limit_reached: [false, false, false, false, false, false],
+  },
+  tcp_pose: {
+    position: [491.9256498952305, -133.27971614361718, 487.42935363090754],
+    orientation: [
+      -3.1413887753705083, -0.0003197791888075772, 0.000959598168759525,
+    ],
+  },
+  tcp: "Flange",
+  flange_pose: {
+    position: [491.9256498952305, -133.27971614361718, 487.42935363090754],
+    orientation: [
+      -3.1413887753705083, -0.0003197791888075772, 0.000959598168759525,
+    ],
+  },
+  coordinate_system: "",
+  standstill: true,
+  sequence_number: 38283,
+  timestamp: "2026-04-24T08:23:04.230859905Z",
+  description_revision: 0,
+}
+
+export const ur5eDhParameters: DHParameter[] = Array.from(
+  { length: 6 },
+  () => ({ type: JointTypeEnum.RevoluteJoint }) as DHParameter,
+)
+
+export const ur5eDescription: MotionGroupDescription = {
+  motion_group_model: "ur5e",
+  cycle_time: 0.004,
+  mounting: {},
+  operation_limits: { auto_limits: { joints: [] } },
+  dh_parameters: ur5eDhParameters,
+} as unknown as MotionGroupDescription
+
+// ---------------------------------------------------------------------------
+// Turn mock – 2 revolute joints
+// ---------------------------------------------------------------------------
+
+export const turnMockMotionGroupState: MotionGroupState = {
+  motion_group: "0@turnmock",
+  controller: "turnmock",
+  joint_position: [0, 0],
+  joint_limit_reached: {
+    limit_reached: [false, false],
+  },
+  tcp_pose: {
+    position: [0, 0, 0],
+    orientation: [0, 0, 0],
+  },
+  tcp: "",
+  flange_pose: {
+    position: [0, 0, 0],
+    orientation: [0, 0, 0],
+  },
+  coordinate_system: "",
+  standstill: true,
+  sequence_number: 31111,
+  timestamp: "2026-04-24T08:26:21.729120996Z",
+  description_revision: 0,
+}
+
+export const turnMockDhParameters: DHParameter[] = Array.from(
+  { length: 2 },
+  () => ({ type: JointTypeEnum.RevoluteJoint }) as DHParameter,
+)
+
+export const turnMockDescription: MotionGroupDescription = {
+  motion_group_model: "turnmock",
+  cycle_time: 0.004,
+  mounting: {},
+  operation_limits: { auto_limits: { joints: [] } },
+  dh_parameters: turnMockDhParameters,
+} as unknown as MotionGroupDescription
+
+// ---------------------------------------------------------------------------
+// Linear axis mock – 1 prismatic joint
+// ---------------------------------------------------------------------------
+
+export const linearAxisMotionGroupState: MotionGroupState = {
+  motion_group: "0@linearaxismock",
+  controller: "linearaxismock",
+  joint_position: [0],
+  joint_limit_reached: {
+    limit_reached: [false],
+  },
+  tcp_pose: {
+    position: [0, 0, 0],
+    orientation: [0, 0, 0],
+  },
+  tcp: "Flange",
+  flange_pose: {
+    position: [0, 0, 0],
+    orientation: [0, 1.5707963267948966, 0],
+  },
+  coordinate_system: "",
+  standstill: true,
+  sequence_number: 40497,
+  timestamp: "2026-04-24T08:27:41.630099378Z",
+  description_revision: 0,
+}
+
+export const linearAxisDhParameters: DHParameter[] = [
+  { type: JointTypeEnum.PrismaticJoint } as DHParameter,
+]
+
+export const linearAxisDescription: MotionGroupDescription = {
+  motion_group_model: "linearaxismock",
+  cycle_time: 0.004,
+  mounting: {},
+  operation_limits: { auto_limits: { joints: [] } },
+  dh_parameters: linearAxisDhParameters,
+} as unknown as MotionGroupDescription

package/src/components/modal/NoMotionGroupModal.tsx

@@ -0,0 +1,91 @@
+import Button from "@mui/material/Button"
+import Dialog from "@mui/material/Dialog"
+import DialogActions from "@mui/material/DialogActions"
+import DialogContent from "@mui/material/DialogContent"
+import DialogTitle from "@mui/material/DialogTitle"
+import Stack from "@mui/material/Stack"
+import Typography from "@mui/material/Typography"
+function getBaseUrl(): string {
+  const currentUrl = window.location.href
+  return currentUrl.substring(
+    0,
+    currentUrl.indexOf("/", currentUrl.indexOf("//") + 2),
+  )
+}
+
+export type NoMotionGroupModalProps = {
+  baseUrl: string
+}
+
+export function NoMotionGroupModal({
+  baseUrl = getBaseUrl(),
+  ...props
+}: NoMotionGroupModalProps) {
+  return (
+    <Dialog
+      aria-labelledby="no-motion-group-modal-title"
+      open={true}
+      fullWidth
+      sx={{
+        "& .MuiModal-backdrop": {
+          backdropFilter: "blur(10px)",
+        },
+        "& .MuiDialog-paper": {
+          "::before": {
+            content: '""',
+            height: "8px",
+            width: "100%",
+            background: "linear-gradient(90deg, #FF0E65 0%, #47D3FF 100%)",
+          },
+          background: "#101629",
+        },
+      }}
+    >
+      <DialogTitle id="no-motion-group-modal-title">
+        No motion group found
+      </DialogTitle>
+
+      <DialogContent
+        sx={{
+          marginTop: "3rem",
+          marginBottom: "1.5rem",
+          textAlign: "center",
+        }}
+      >
+        <Typography color="#fff">Found no devices to connect to.</Typography>
+        <Typography color="#fff">
+          Please ensure a motion group has been created.
+        </Typography>
+      </DialogContent>
+
+      <DialogActions>
+        <Stack width="100%" maxWidth="300px" margin="auto" marginBottom="2rem">
+          <Button
+            href={`${baseUrl}/settings`}
+            variant="contained"
+            sx={{
+              borderRadius: "8px",
+              width: "100%",
+            }}
+          >
+            Go to settings app
+          </Button>
+          <Button
+            href={`${baseUrl}`}
+            variant="text"
+            sx={{
+              marginTop: "1rem",
+              color: "#fff",
+              textDecoration: "underline",
+              fontSize: "0.75rem",
+            }}
+          >
+            Back to Homescreen
+          </Button>
+        </Stack>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+export default NoMotionGroupModal

package/src/components/robots/AxisConfig.ts

@@ -0,0 +1,3 @@
+export type AxisConfig = number[]
+
+export const defaultAxisConfig: AxisConfig = Array(6).fill(2 * Math.PI)

package/src/components/robots/DHLinearAxis.tsx

@@ -0,0 +1,147 @@
+/* biome-ignore-all lint/style/noNonNullAssertion: pre-biome code */
+/* biome-ignore-all lint/suspicious/noExplicitAny: pre-biome code */
+
+import { Line } from "@react-three/drei"
+import { useRef } from "react"
+import type * as THREE from "three"
+import { Matrix4, Quaternion, Vector3 } from "three"
+import LinearAxisAnimator from "./LinearAxisAnimator"
+import type { DHLinearAxisProps } from "./SupportedLinearAxis"
+
+export function DHLinearAxis({
+  rapidlyChangingMotionState,
+  dhParameters,
+  ...props
+}: DHLinearAxisProps) {
+  // reused in every update
+  const accumulatedMatrix = new Matrix4()
+
+  const tcpMeshRef = useRef<THREE.Mesh | null>(null)
+  const tcpLineRef = useRef<any>(null)
+
+  // Calculate initial TCP position
+  function calculateTcpPosition(jointValues: number[]): Vector3 {
+    const tempMatrix = new Matrix4()
+
+    for (let i = 0; i < dhParameters.length; i++) {
+      const param = dhParameters[i]
+      const jointValue = jointValues[i] ?? 0
+
+      const matrix = new Matrix4()
+        .makeRotationY(param.theta!) // Base rotation (if any)
+        .multiply(
+          new Matrix4().makeTranslation(
+            param.a! / 1000,
+            (param.d! +
+              jointValue * (param.reverse_rotation_direction ? -1 : 1)) /
+              1000,
+            0,
+          ),
+        ) // Translate along X by a, and Y by d + joint_position
+        .multiply(new Matrix4().makeRotationX(param.alpha!)) // Rotate around X
+
+      tempMatrix.multiply(matrix)
+    }
+
+    const position = new Vector3()
+    const quaternion = new Quaternion()
+    const scale = new Vector3()
+    tempMatrix.decompose(position, quaternion, scale)
+    return position
+  }
+
+  // Calculate initial TCP position for rendering
+  const initialTcpPosition = calculateTcpPosition(
+    rapidlyChangingMotionState.joint_position,
+  )
+
+  function setTranslation(joints: THREE.Object3D[], jointValues: number[]) {
+    accumulatedMatrix.identity()
+
+    let tcpPosition = new Vector3()
+
+    // Process all joints based on dhParameters length, not joints array
+    // Since we're using DHLinearAxis directly without a model, we don't have joint objects
+    for (let jointIndex = 0; jointIndex < dhParameters.length; jointIndex++) {
+      const jointValue = jointValues[jointIndex] ?? 0
+      const param = dhParameters[jointIndex]
+
+      // Calculate and accumulate transformation
+      const matrix = new Matrix4()
+        .makeRotationY(param.theta!) // Base rotation (if any)
+        .multiply(
+          new Matrix4().makeTranslation(
+            param.a! / 1000,
+            (param.d! +
+              jointValue * (param.reverse_rotation_direction ? -1 : 1)) /
+              1000,
+            0,
+          ),
+        )
+        .multiply(new Matrix4().makeRotationX(param.alpha!))
+
+      accumulatedMatrix.multiply(matrix)
+    }
+
+    // Get final TCP position from accumulated matrix
+    const position = new Vector3()
+    const quaternion = new Quaternion()
+    const scale = new Vector3()
+    accumulatedMatrix.decompose(position, quaternion, scale)
+    tcpPosition = position
+
+    // Update TCP marker
+    if (tcpMeshRef.current) {
+      tcpMeshRef.current.position.set(
+        tcpPosition.x,
+        tcpPosition.y,
+        tcpPosition.z,
+      )
+    }
+
+    // Update TCP line
+    if (tcpLineRef.current) {
+      const lineGeometry = tcpLineRef.current.geometry
+      if (lineGeometry?.setPositions) {
+        lineGeometry.setPositions([
+          0,
+          0,
+          0,
+          tcpPosition.x,
+          tcpPosition.y,
+          tcpPosition.z,
+        ])
+      }
+    }
+  }
+
+  return (
+    <LinearAxisAnimator
+      rapidlyChangingMotionState={rapidlyChangingMotionState}
+      dhParameters={dhParameters}
+      onTranslationChanged={setTranslation}
+    >
+      <group {...props} name="Scene">
+        {/* Base (origin) - Green sphere representing initial previous position */}
+        <mesh name="Base" position={[0, 0, 0]}>
+          <sphereGeometry args={[0.02, 32, 32]} />
+          <meshStandardMaterial color={"green"} depthTest={true} />
+        </mesh>
+        {/* Line from Base to TCP */}
+        <Line
+          ref={tcpLineRef}
+          points={[new Vector3(0, 0, 0), initialTcpPosition]}
+          color={"White"}
+          lineWidth={5}
+        />
+        {/* TCP (Tool Center Point) - Red sphere that shows final position */}
+        <mesh ref={tcpMeshRef} name="TCP" position={initialTcpPosition}>
+          <sphereGeometry args={[0.025, 32, 32]} />
+          <meshStandardMaterial color={"red"} depthTest={true} />
+        </mesh>
+      </group>
+    </LinearAxisAnimator>
+  )
+}
+
+export default DHLinearAxis

package/src/components/robots/DHRobot.tsx

@@ -0,0 +1,152 @@
+/* biome-ignore-all lint/style/noNonNullAssertion: pre-biome code */
+/* biome-ignore-all lint/suspicious/noExplicitAny: pre-biome code */
+
+import { Line } from "@react-three/drei"
+import type { DHParameter } from "@wandelbots/nova-js/v2"
+import React, { useRef } from "react"
+import type * as THREE from "three"
+import { Matrix4, Quaternion, Vector3 } from "three"
+import type { LineGeometry } from "three/examples/jsm/lines/LineGeometry.js"
+import RobotAnimator from "./RobotAnimator"
+import type { DHRobotProps } from "./SupportedRobot"
+
+const CHILD_LINE = "line"
+const CHILD_MESH = "mesh"
+
+export function DHRobot({
+  rapidlyChangingMotionState,
+  dhParameters,
+  ...props
+}: DHRobotProps) {
+  // reused in every update
+  const accumulatedMatrix = new Matrix4()
+
+  // Store direct references to avoid searching by name
+  const lineRefs = useRef<any[]>([])
+  const meshRefs = useRef<(THREE.Mesh | null)[]>([])
+
+  // Initialize refs array when dhParameters change
+  React.useEffect(() => {
+    lineRefs.current = new Array(dhParameters.length).fill(null)
+    meshRefs.current = new Array(dhParameters.length).fill(null)
+  }, [dhParameters.length])
+
+  // Updates accumulatedMatrix with every execution
+  // Reset the matrix to identity if you start a new position update
+  function getLinePoints(
+    dhParameter: DHParameter,
+    jointRotation: number,
+  ): {
+    a: THREE.Vector3
+    b: THREE.Vector3
+  } {
+    const position = new Vector3()
+    const quaternion = new Quaternion()
+    const scale = new Vector3()
+    accumulatedMatrix.decompose(position, quaternion, scale)
+    const prevPosition = position.clone() // Update the previous position
+
+    const matrix = new Matrix4()
+      .makeRotationY(
+        dhParameter.theta! +
+          jointRotation * (dhParameter.reverse_rotation_direction ? -1 : 1),
+      ) // Rotate around Z
+      .multiply(new Matrix4().makeTranslation(0, dhParameter.d! / 1000, 0)) // Translate along Z
+      .multiply(new Matrix4().makeTranslation(dhParameter.a! / 1000, 0, 0)) // Translate along X
+      .multiply(new Matrix4().makeRotationX(dhParameter.alpha!)) // Rotate around X
+
+    // Accumulate transformations
+    accumulatedMatrix.multiply(matrix)
+    accumulatedMatrix.decompose(position, quaternion, scale)
+    return { a: prevPosition, b: position }
+  }
+
+  function setJointLineRotation(
+    jointIndex: number,
+    line: any, // Use any for drei Line component
+    mesh: THREE.Mesh,
+    jointValue: number,
+  ) {
+    if (!dhParameters) {
+      return
+    }
+
+    const dh_parameter = dhParameters[jointIndex]
+    if (!dh_parameter) {
+      return
+    }
+
+    const { a, b } = getLinePoints(dh_parameter, jointValue)
+    const lineGeometry = line.geometry as LineGeometry
+    lineGeometry.setPositions([a.toArray(), b.toArray()].flat())
+
+    mesh.position.set(b.x, b.y, b.z)
+  }
+
+  function setRotation(joints: THREE.Object3D[], jointValues: number[]) {
+    accumulatedMatrix.identity()
+
+    // Use direct refs instead of searching by name
+    for (
+      let jointIndex = 0;
+      jointIndex < Math.min(joints.length, jointValues.length);
+      jointIndex++
+    ) {
+      const line = lineRefs.current[jointIndex]
+      const mesh = meshRefs.current[jointIndex]
+
+      if (line && mesh) {
+        setJointLineRotation(jointIndex, line, mesh, jointValues[jointIndex]!)
+      }
+    }
+  }
+
+  return (
+    <RobotAnimator
+      rapidlyChangingMotionState={rapidlyChangingMotionState}
+      dhParameters={dhParameters}
+      onRotationChanged={setRotation}
+    >
+      <group {...props} name="Scene">
+        <mesh>
+          <sphereGeometry args={[0.01, 32, 32]} />
+          <meshStandardMaterial color={"black"} depthTest={true} />
+        </mesh>
+        {dhParameters?.map((param, index) => {
+          const { a, b } = getLinePoints(
+            param,
+            rapidlyChangingMotionState.joint_position[index] ?? 0,
+          )
+          const jointName = `dhrobot_J0${index}`
+          return (
+            <group name={jointName} key={jointName}>
+              <Line
+                ref={(ref) => {
+                  lineRefs.current[index] = ref
+                }}
+                name={CHILD_LINE}
+                points={[a, b]}
+                color={"white"}
+                lineWidth={5}
+              />
+              <mesh
+                ref={(ref) => {
+                  meshRefs.current[index] = ref
+                }}
+                name={CHILD_MESH}
+                // biome-ignore lint/suspicious/noArrayIndexKey: pre-biome code
+                key={`mesh_${index}`}
+                position={b}
+              >
+                <sphereGeometry args={[0.01, 32, 32]} />
+                <meshStandardMaterial color={"black"} depthTest={true} />
+              </mesh>
+            </group>
+          )
+        })}
+      </group>
+    </RobotAnimator>
+  )
+}
+
+export default DHRobot