@wandelbots/wandelbots-js-react-components 5.4.1 → 5.4.2-pr.ci-pr-preview.586.f684aae

package/src/components/jogging/JoggingStore.ts

@@ -1,11 +1,10 @@
 import { tryParseJson } from "@wandelbots/nova-js"
 import {
+  JointTypeEnum,
   type CoordinateSystem,
-  type DHParameter,
+  type KinematicModel,
   type MotionGroupDescription,
   type RobotTcp,
-  type KinematicModel,
-  JointTypeEnum,
 } from "@wandelbots/nova-js/v2"
 import { countBy } from "lodash-es"
 import keyBy from "lodash-es/keyBy"
@@ -43,11 +42,11 @@ export type IncrementJogInProgress = {
   axis: JoggingAxis
 }
 
-type TabType = "cartesian" | "joint" | "debug";
+type TabType = "cartesian" | "joint" | "debug"
 export type CartesianMotionType = "translate" | "rotate"
 
 export class JoggingStore {
-  selectedTabId: TabType = "cartesian";
+  selectedTabId: TabType = "cartesian"
 
   /** Locks to prevent UI interactions during certain operations */
   locks = new Set<string>()
@@ -163,9 +162,10 @@ export class JoggingStore {
       ),
     ])
 
-    const kinematicModel: KinematicModel = await nova.api.motionGroupModels.getMotionGroupKinematicModel(
-      description.motion_group_model,
-    )
+    const kinematicModel: KinematicModel =
+      await nova.api.motionGroupModels.getMotionGroupKinematicModel(
+        description.motion_group_model,
+      )
 
     const tcps = Object.entries(description.tcps || {}).map(([id, tcp]) => ({
       id,
@@ -174,7 +174,13 @@ export class JoggingStore {
       orientation: tcp.pose.orientation as Vector3Simple,
     }))
 
-    return new JoggingStore(jogger, coordinatesystems || [], description, tcps, kinematicModel.inverse_solver)
+    return new JoggingStore(
+      jogger,
+      coordinatesystems || [],
+      description,
+      tcps,
+      kinematicModel.inverse_solver,
+    )
   }
 
   constructor(
@@ -214,6 +220,7 @@ export class JoggingStore {
     this.disposers.push(autorun(() => this.saveToLocalStorage()))
 
     // Assign joggingStore to window
+    // biome-ignore lint/suspicious/noExplicitAny: pre-biome code
     ;(window as any).joggingStore = this
   }
 
@@ -329,7 +336,6 @@ export class JoggingStore {
     return tempTabs
   }
 
-
   get incrementOptions() {
     return incrementOptions
   }
@@ -347,6 +353,7 @@ export class JoggingStore {
   }
 
   get currentTab() {
+    // biome-ignore lint/style/noNonNullAssertion: pre-biome code
     return this.tabsById[this.selectedTabId] || this.tabs[0]!
   }
 
@@ -391,7 +398,6 @@ export class JoggingStore {
       : this.translationVelocityMmPerSec
   }
 
-
   /** Minimum selectable velocity in mm/sec or deg/sec */
   minVelocityInDisplayUnits(useDegree: boolean) {
     return useDegree
@@ -399,7 +405,6 @@ export class JoggingStore {
       : this.minTranslationVelocityMmPerSec
   }
 
-
   /** Maximum selectable velocity in mm/sec or deg/sec */
   maxVelocityInDisplayUnits(useDegree: boolean) {
     return useDegree
@@ -408,6 +413,7 @@ export class JoggingStore {
   }
 
   onTabChange(_event: React.SyntheticEvent, newValue: number) {
+    // biome-ignore lint/style/noNonNullAssertion: pre-biome code
     const tab = this.tabs[newValue] || this.tabs[0]!
     this.selectedTabId = tab.id
   }
@@ -440,7 +446,6 @@ export class JoggingStore {
     }
   }
 
-
   setSelectedCartesianMotionType(type: CartesianMotionType) {
     this.selectedCartesianMotionType = type
   }

package/src/components/jogging/JoggingToggleButtonGroup.tsx

@@ -1,6 +1,6 @@
-import type { ToggleButtonGroupProps } from "@mui/material"
-import { styled, ToggleButtonGroup } from "@mui/material"
-
+import type { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup"
+import { styled } from "@mui/material/styles"
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup"
 export const JoggingToggleButtonGroup: React.ComponentType<ToggleButtonGroupProps> =
   styled(ToggleButtonGroup)(({ theme }) => ({
     "&.MuiToggleButtonGroup-root": {

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -1,17 +1,10 @@
-import { observer} from "mobx-react-lite"
+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
-  }) => {
-
+  ({ store, useDegree }: { store: JoggingStore; useDegree: boolean }) => {
     const { t } = useTranslation()
 
     function valueLabelFormat(value: number, useDegree: boolean): string {
@@ -20,7 +13,6 @@ export const JoggingVelocitySlider = observer(
         : `v = ${t("Jogging.Cartesian.Translation.velocityMmPerSec.lb", { amount: value })}`
     }
 
-
     return (
       <VelocitySlider
         store={store}

package/src/components/jogging/PoseCartesianValues.tsx

@@ -1,4 +1,5 @@
-import { Button, Stack } from "@mui/material"
+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"

package/src/components/jogging/PoseJointValues.tsx

@@ -1,4 +1,5 @@
-import { Button, Stack } from "@mui/material"
+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"

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

@@ -134,4 +134,3 @@ export const linearAxisDescription: MotionGroupDescription = {
   operation_limits: { auto_limits: { joints: [] } },
   dh_parameters: linearAxisDhParameters,
 } as unknown as MotionGroupDescription
-

package/src/components/modal/NoMotionGroupModal.tsx

@@ -1,13 +1,10 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Stack,
-  Typography,
-} from "@mui/material"
-
+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(

package/src/components/robots/DHLinearAxis.tsx

@@ -1,6 +1,8 @@
+/* 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 { useRef } from "react"
 import type * as THREE from "three"
 import { Matrix4, Quaternion, Vector3 } from "three"
 import LinearAxisAnimator from "./LinearAxisAnimator"
@@ -20,25 +22,27 @@ export function DHLinearAxis({
   // 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
-          )
+            (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()
@@ -47,7 +51,9 @@ export function DHLinearAxis({
   }
 
   // Calculate initial TCP position for rendering
-  const initialTcpPosition = calculateTcpPosition(rapidlyChangingMotionState.joint_position)
+  const initialTcpPosition = calculateTcpPosition(
+    rapidlyChangingMotionState.joint_position,
+  )
 
   function setTranslation(joints: THREE.Object3D[], jointValues: number[]) {
     accumulatedMatrix.identity()
@@ -59,19 +65,21 @@ export function DHLinearAxis({
     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
-          )
+            (param.d! +
+              jointValue * (param.reverse_rotation_direction ? -1 : 1)) /
+              1000,
+            0,
+          ),
         )
         .multiply(new Matrix4().makeRotationX(param.alpha!))
-      
+
       accumulatedMatrix.multiply(matrix)
     }
 
@@ -84,45 +92,54 @@ export function DHLinearAxis({
 
     // Update TCP marker
     if (tcpMeshRef.current) {
-      tcpMeshRef.current.position.set(tcpPosition.x, tcpPosition.y, tcpPosition.z)
+      tcpMeshRef.current.position.set(
+        tcpPosition.x,
+        tcpPosition.y,
+        tcpPosition.z,
+      )
     }
 
     // Update TCP line
     if (tcpLineRef.current) {
       const lineGeometry = tcpLineRef.current.geometry
-      if (lineGeometry && lineGeometry.setPositions) {
-        lineGeometry.setPositions([0, 0, 0, tcpPosition.x, tcpPosition.y, tcpPosition.z])
+      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>
-    </>
+    <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>
   )
 }

package/src/components/robots/DHRobot.tsx

@@ -1,3 +1,6 @@
+/* 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"
@@ -99,50 +102,49 @@ export function DHRobot({
   }
 
   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}
-                  key={"mesh_" + index}
-                  position={b}
-                >
-                  <sphereGeometry args={[0.01, 32, 32]} />
-                  <meshStandardMaterial color={"black"} depthTest={true} />
-                </mesh>
-              </group>
-            )
-          })}
-        </group>
-      </RobotAnimator>
-    </>
+    <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>
   )
 }

package/src/components/robots/GenericRobot.tsx

@@ -1,8 +1,8 @@
 import { useGLTF } from "@react-three/drei"
 import type { ThreeElements } from "@react-three/fiber"
-import React, { useCallback, useEffect, useState } from "react"
-import type { Group, Mesh } from "three"
-import { type Object3D } from "three"
+import type React from "react"
+import { useCallback, useEffect, useState } from "react"
+import type { Group, Mesh, Object3D } from "three"
 import { isFlange, parseRobotModel } from "./robotModelLogic"
 
 export type RobotModelProps = {
@@ -20,24 +20,19 @@ function isMesh(node: Object3D): node is Mesh {
 }
 
 // Separate component that only renders when we have a valid URL
-function LoadedRobotModel({ 
-  url, 
-  flangeRef, 
-  postModelRender, 
-  ...props 
-}: { 
+function LoadedRobotModel({
+  url,
+  flangeRef,
+  postModelRender,
+  ...props
+}: {
   url: string
   flangeRef?: React.Ref<Group>
   postModelRender?: () => void
 } & ThreeElements["group"]) {
   const gltfResult = useGLTF(url)
-  let gltf
-  try {
-    const parsed = parseRobotModel(gltfResult, 'robot.glb')
-    gltf = parsed.gltf
-  } catch (err) {
-    throw err;
-  }
+  const parsed = parseRobotModel(gltfResult, "robot.glb")
+  const gltf = parsed.gltf
 
   const groupRef: React.RefCallback<Group> = useCallback(
     (group) => {
@@ -66,7 +61,12 @@ function LoadedRobotModel({
         }
         // Fallback to empty group if geometry is missing
         return (
-          <group name={node.name} key={node.uuid} position={node.position} rotation={node.rotation} />
+          <group
+            name={node.name}
+            key={node.uuid}
+            position={node.position}
+            rotation={node.rotation}
+          />
         )
       } else {
         return (
@@ -82,7 +82,7 @@ function LoadedRobotModel({
         )
       }
     } catch (e) {
-      console.warn('Error rendering node', node.name, e)
+      console.warn("Error rendering node", node.name, e)
       return null
     }
   }
@@ -101,21 +101,21 @@ export function GenericRobot({
   ...props
 }: RobotModelProps) {
   const [resolvedURL, setResolvedURL] = useState<string | null>(null)
-  
+
   useEffect(() => {
     const resolveURL = async () => {
       try {
-        if (typeof modelURL === 'string') {
+        if (typeof modelURL === "string") {
           setResolvedURL(modelURL)
         } else {
           const url = await modelURL
           setResolvedURL(url)
         }
       } catch (error) {
-        console.error('Failed to resolve model URL:', error)
+        console.error("Failed to resolve model URL:", error)
       }
     }
-    
+
     resolveURL()
   }, [modelURL])
 
@@ -123,9 +123,9 @@ export function GenericRobot({
   if (!resolvedURL) {
     return null // Loading state
   }
-  
+
   return (
-    <LoadedRobotModel 
+    <LoadedRobotModel
       url={resolvedURL}
       flangeRef={flangeRef}
       postModelRender={postModelRender}

package/src/components/robots/LinearAxis.tsx

@@ -70,4 +70,3 @@ export function LinearAxis({
 }
 
 export { defaultGetModel }
-

package/src/components/robots/LinearAxisAnimator.tsx

@@ -1,6 +1,7 @@
 import { useFrame, useThree } from "@react-three/fiber"
 import type { DHParameter, MotionGroupState } from "@wandelbots/nova-js/v2"
-import React, { useCallback, useEffect, useRef } from "react"
+import type React from "react"
+import { useCallback, useEffect, useRef } from "react"
 import type { Group, Object3D } from "three"
 import { useAutorun } from "../utils/hooks"
 import { ValueInterpolator } from "../utils/interpolation"
@@ -25,6 +26,7 @@ export default function LinearAxisAnimator({
   const { invalidate } = useThree()
 
   // Initialize interpolator
+  // biome-ignore lint/correctness/useExhaustiveDependencies: pre-biome code
   useEffect(() => {
     const initialJointValues = rapidlyChangingMotionState.joint_position.filter(
       (item) => item !== undefined,
@@ -98,6 +100,7 @@ export default function LinearAxisAnimator({
    * Fire an update joints call on every motion state change.
    * requestAnimationFrame used to avoid blocking main thread
    */
+  // biome-ignore lint/correctness/useExhaustiveDependencies: pre-biome code
   useEffect(() => {
     updateJoints()
   }, [rapidlyChangingMotionState, updateJoints])