@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2-pr.fix-performance-issues.594.c24b644

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -1,39 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,136 +0,0 @@
-/**
- * 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

@@ -1,91 +0,0 @@
-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

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

package/src/components/robots/DHLinearAxis.tsx

@@ -1,147 +0,0 @@
-/* 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

@@ -1,152 +0,0 @@
-/* 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