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

package/src/components/robots/MotionGroupVisualizer.tsx

@@ -1,71 +1,71 @@
-import React, { useEffect, useMemo, useState } from "react"
 import { JointTypeEnum } from "@wandelbots/nova-js/v2"
+import type React from "react"
+import { useEffect, useMemo, useState } from "react"
 
 import { externalizeComponent } from "../../externalizeComponent"
+import {
+  SupportedLinearAxis,
+  type SupportedLinearAxisProps,
+} from "./SupportedLinearAxis"
 import { SupportedRobot, type SupportedRobotProps } from "./SupportedRobot"
-import { SupportedLinearAxis, type SupportedLinearAxisProps } from "./SupportedLinearAxis"
 
 export type MotionGroupVisualizerProps = {
   instanceUrl: string
   inverseSolver?: string | null
 } & (SupportedRobotProps | SupportedLinearAxisProps)
 
-export const MotionGroupVisualizer: React.FC<MotionGroupVisualizerProps> = externalizeComponent((props: MotionGroupVisualizerProps) => {
-  const {
-    inverseSolver,
-    dhParameters,
-    ...rest
-  } = props
+export const MotionGroupVisualizer: React.FC<MotionGroupVisualizerProps> =
+  externalizeComponent((props: MotionGroupVisualizerProps) => {
+    const { inverseSolver, dhParameters, ...rest } = props
 
-  /**
-   * Joint type to find out - in combination with inverseSolver - whether the
-   * active robot is a turn table
-   */
-  const [jointType, setJointType] = useState<JointTypeEnum>(JointTypeEnum.RevoluteJoint)
-
-  /**
-   * Sets the joint type according to delivered dh parameter type
-   */
-  useEffect(() => {
-    if (dhParameters.length) {
-      setJointType(dhParameters[0].type ?? JointTypeEnum.RevoluteJoint)
-    }
-  }, [dhParameters])
+    /**
+     * Joint type to find out - in combination with inverseSolver - whether the
+     * active robot is a turn table
+     */
+    const [jointType, setJointType] = useState<JointTypeEnum>(
+      JointTypeEnum.RevoluteJoint,
+    )
 
-  /**
-   * The turntable models return inverseSolver = null - however these models
-   * should be rendered with SupportedRobot instead of SupportedLinearAxis
-   */
-  const isTurnTable = useMemo(() => {
-    return inverseSolver === null && jointType === JointTypeEnum.RevoluteJoint
-  }, [inverseSolver, jointType])
+    /**
+     * Sets the joint type according to delivered dh parameter type
+     */
+    useEffect(() => {
+      if (dhParameters.length) {
+        setJointType(dhParameters[0].type ?? JointTypeEnum.RevoluteJoint)
+      }
+    }, [dhParameters])
 
-  /**
-   * Linear axis check
-   */
-  const isLinearAxis = useMemo(() => {
-    return inverseSolver === null && jointType === JointTypeEnum.PrismaticJoint
-  }, [inverseSolver, jointType])
+    /**
+     * The turntable models return inverseSolver = null - however these models
+     * should be rendered with SupportedRobot instead of SupportedLinearAxis
+     */
+    const isTurnTable = useMemo(() => {
+      return inverseSolver === null && jointType === JointTypeEnum.RevoluteJoint
+    }, [inverseSolver, jointType])
 
-  /**
-   * Robot differentiation for readability reasons
-   */
-  const isRobot = useMemo(() => {
-    return !!inverseSolver
-  }, [inverseSolver])
+    /**
+     * Linear axis check
+     */
+    const isLinearAxis = useMemo(() => {
+      return (
+        inverseSolver === null && jointType === JointTypeEnum.PrismaticJoint
+      )
+    }, [inverseSolver, jointType])
 
+    /**
+     * Robot differentiation for readability reasons
+     */
+    const isRobot = useMemo(() => {
+      return !!inverseSolver
+    }, [inverseSolver])
 
-  if (isRobot || isTurnTable) {
-    return (
-      <SupportedRobot dhParameters={dhParameters} {...rest} />
-    )
-  }
+    if (isRobot || isTurnTable) {
+      return <SupportedRobot dhParameters={dhParameters} {...rest} />
+    }
 
-  if(isLinearAxis) {
-    return (
-      <SupportedLinearAxis dhParameters={dhParameters} {...rest} />
-    )
-  }
+    if (isLinearAxis) {
+      return <SupportedLinearAxis dhParameters={dhParameters} {...rest} />
+    }
 
-  return <></>
-})
+    return null
+  })

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

@@ -25,7 +25,7 @@ describe("RobotAnimator", () => {
     // Test that the component accepts different numbers of DH parameters
     const mockMotionState4Joints: MotionGroupState = {
       joint_position: [0.1, 0.2, 0.3, 0.4],
-    } as any
+    } as unknown as MotionGroupState
 
     const mockDHParameters4Joints: DHParameter[] = [
       { theta: 0, reverse_rotation_direction: false },
@@ -36,7 +36,7 @@ describe("RobotAnimator", () => {
 
     const mockMotionState7Joints: MotionGroupState = {
       joint_position: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7],
-    } as any
+    } as unknown as MotionGroupState
 
     const mockDHParameters7Joints: DHParameter[] = Array(7).fill({
       theta: 0,

package/src/components/robots/RobotAnimator.tsx

@@ -1,6 +1,7 @@
 import { useFrame, useThree } from "@react-three/fiber"
 import type { DHParameter, MotionGroupState } from "@wandelbots/nova-js/v2"
-import React, { useEffect, useRef, useCallback } 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 RobotAnimator({
   const { invalidate } = useThree()
 
   // Initialize interpolator
+  // biome-ignore lint/correctness/useExhaustiveDependencies: pre-biome code
   useEffect(() => {
     const initialJointValues = rapidlyChangingMotionState.joint_position.filter(
       (item) => item !== undefined,
@@ -96,6 +98,7 @@ export default function RobotAnimator({
    * 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])

package/src/components/robots/SupportedLinearAxis.tsx

@@ -22,7 +22,10 @@ export type SupportedLinearAxisProps = {
   dhParameters: DHParameter[]
   flangeRef?: React.Ref<THREE.Group>
   instanceUrl?: string
-  getModel?: (modelFromController: string, instanceUrl?: string) => Promise<string> | undefined
+  getModel?: (
+    modelFromController: string,
+    instanceUrl?: string,
+  ) => Promise<string> | undefined
   postModelRender?: () => void
   transparentColor?: string
 } & ThreeElements["group"]
@@ -81,8 +84,12 @@ export const SupportedLinearAxis = externalizeComponent(
                 modelURL={(() => {
                   const result = getModel(modelFromController, instanceUrl)
                   if (!result) {
-                    const mockBlob = new Blob([], { type: 'model/gltf-binary' })
-                    const mockFile = new File([mockBlob], `${modelFromController}.glb`, { type: 'model/gltf-binary' })
+                    const mockBlob = new Blob([], { type: "model/gltf-binary" })
+                    const mockFile = new File(
+                      [mockBlob],
+                      `${modelFromController}.glb`,
+                      { type: "model/gltf-binary" },
+                    )
                     return Promise.resolve(URL.createObjectURL(mockFile))
                   }
                   return result

package/src/components/robots/SupportedRobot.tsx

@@ -23,7 +23,10 @@ export type SupportedRobotProps = {
   dhParameters: DHParameter[]
   flangeRef?: React.Ref<THREE.Group>
   instanceUrl?: string
-  getModel?: (modelFromController: string, instanceUrl?: string) => Promise<string> | undefined
+  getModel?: (
+    modelFromController: string,
+    instanceUrl?: string,
+  ) => Promise<string> | undefined
   postModelRender?: () => void
   transparentColor?: string
 } & ThreeElements["group"]
@@ -82,8 +85,12 @@ export const SupportedRobot = externalizeComponent(
                 modelURL={(() => {
                   const result = getModel(modelFromController, instanceUrl)
                   if (!result) {
-                    const mockBlob = new Blob([], { type: 'model/gltf-binary' })
-                    const mockFile = new File([mockBlob], `${modelFromController}.glb`, { type: 'model/gltf-binary' })
+                    const mockBlob = new Blob([], { type: "model/gltf-binary" })
+                    const mockFile = new File(
+                      [mockBlob],
+                      `${modelFromController}.glb`,
+                      { type: "model/gltf-binary" },
+                    )
                     return Promise.resolve(URL.createObjectURL(mockFile))
                   }
                   return result

package/src/components/robots/robotModelLogic.ts

@@ -8,7 +8,9 @@ const modelCache = new Map<string, Promise<string>>()
  * Revoke a cached model's object URL to prevent memory leaks.
  * Call this when a component unmounts or no longer needs the model.
  */
-export async function revokeModelUrl(modelFromController: string): Promise<void> {
+export async function revokeModelUrl(
+  modelFromController: string,
+): Promise<void> {
   const urlPromise = modelCache.get(modelFromController)
   if (!urlPromise) return
 
@@ -35,36 +37,45 @@ export async function revokeAllModelUrls(): Promise<void> {
       } catch (e) {
         // Ignore errors
       }
-    })
+    }),
   )
   modelCache.clear()
 }
 
-export async function defaultGetModel(modelFromController: string, instanceUrlProp?: string): Promise<string> {
+export async function defaultGetModel(
+  modelFromController: string,
+  instanceUrlProp?: string,
+): Promise<string> {
   // Check cache first
   if (modelCache.has(modelFromController)) {
+    // biome-ignore lint/style/noNonNullAssertion: pre-biome code
     return modelCache.get(modelFromController)!
   }
-  
+
   // Create the promise and cache it immediately to prevent duplicate calls
   const modelPromise = (async () => {
     const instanceUrl = instanceUrlProp || import.meta.env.WANDELAPI_BASE_URL
     const nova = new NovaClient({ instanceUrl })
-    
+
     // Configure axios to handle binary responses for GLB files
+    // biome-ignore lint/suspicious/noExplicitAny: pre-biome code
     const apiInstance = nova.api.motionGroupModels as any
     if (apiInstance.axios?.interceptors) {
+      // biome-ignore lint/suspicious/noExplicitAny: pre-biome code
       apiInstance.axios.interceptors.request.use((config: any) => {
-        if (config.url?.includes('/glb')) {
-          config.responseType = 'blob'
+        if (config.url?.includes("/glb")) {
+          config.responseType = "blob"
         }
         return config
       })
     }
-    
+
     try {
-      const file = await nova.api.motionGroupModels.getMotionGroupGlbModel(modelFromController)
-      
+      const file =
+        await nova.api.motionGroupModels.getMotionGroupGlbModel(
+          modelFromController,
+        )
+
       // Create object URL from the file and return it
       const url = URL.createObjectURL(file)
       return url
@@ -73,7 +84,7 @@ export async function defaultGetModel(modelFromController: string, instanceUrlPr
       throw error
     }
   })()
-  
+
   // Cache the promise
   modelCache.set(modelFromController, modelPromise)
   return modelPromise

package/src/components/safetyBar/ControllerTypeIndicator.tsx

@@ -1,4 +1,5 @@
-import { useTheme, type PopoverOrigin } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import type { PopoverOrigin } from "@mui/material/Popover"
 import { observer } from "mobx-react-lite"
 import { useId } from "react"
 import { Trans, useTranslation } from "react-i18next"

package/src/components/safetyBar/IndicatorWithExplanation.tsx

@@ -1,11 +1,7 @@
-import {
-  Popover,
-  Stack,
-  SvgIcon,
-  Typography,
-  type PopoverOrigin,
-  type TypographyProps,
-} from "@mui/material"
+import Popover, { type PopoverOrigin } from "@mui/material/Popover"
+import Stack from "@mui/material/Stack"
+import SvgIcon from "@mui/material/SvgIcon"
+import Typography, { type TypographyProps } from "@mui/material/Typography"
 import { observer, useLocalObservable } from "mobx-react-lite"
 import type { ElementType, ReactNode } from "react"
 
@@ -70,9 +66,15 @@ export const IndicatorWithExplanation = observer(
               color,
             }}
           />
-          {label && (<div style={{
-              color,
-            }}>{label}</div>)}
+          {label && (
+            <div
+              style={{
+                color,
+              }}
+            >
+              {label}
+            </div>
+          )}
         </Stack>
         <Popover
           id={id}

package/src/components/safetyBar/OperationModeIndicator.tsx

@@ -1,4 +1,5 @@
-import { useTheme, type PopoverOrigin } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import type { PopoverOrigin } from "@mui/material/Popover"
 import type { OperationMode } from "@wandelbots/nova-js/v2"
 import { observer } from "mobx-react-lite"
 import { useId } from "react"

package/src/components/safetyBar/SafetyBar.tsx

@@ -1,4 +1,6 @@
-import { Divider, Stack, type PopoverOrigin } from "@mui/material"
+import Divider from "@mui/material/Divider"
+import type { PopoverOrigin } from "@mui/material/Popover"
+import Stack from "@mui/material/Stack"
 import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"
 import { observer } from "mobx-react-lite"
 import { externalizeComponent } from "../../externalizeComponent"

package/src/components/safetyBar/SafetyStateIndicator.tsx

@@ -1,4 +1,5 @@
-import { useTheme, type PopoverOrigin } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import type { PopoverOrigin } from "@mui/material/Popover"
 import type { SafetyStateType } from "@wandelbots/nova-js/v2"
 import { observer } from "mobx-react-lite"
 import { useId } from "react"

package/src/components/utils/converters.ts

@@ -1,5 +1,5 @@
-import * as THREE from "three"
 import type { DHParameter } from "@wandelbots/nova-js/v2"
+import * as THREE from "three"
 
 export interface CoplanarityResult {
   isCoplanar: boolean
@@ -14,7 +14,7 @@ export function degreesToRadians(degrees: number): number {
   return degrees * (Math.PI / 180)
 }
 
-export function tryParseJson(json: unknown): any {
+export function tryParseJson(json: unknown): unknown {
   try {
     return JSON.parse(json as string)
   } catch {
@@ -30,7 +30,9 @@ export function tryStringifyJson(json: unknown): string | undefined {
   }
 }
 
-export function orientationToQuaternion(orientation: THREE.Vector3): THREE.Quaternion {
+export function orientationToQuaternion(
+  orientation: THREE.Vector3,
+): THREE.Quaternion {
   const angle = orientation.length()
   const quaternion = new THREE.Quaternion()
   if (angle > 1e-6) {
@@ -46,7 +48,7 @@ export function dhParametersToPlaneSize(dhParameters: DHParameter[]) {
     return defaultPlaneSize
   }
   const reachRadiusM = dhParameters.reduce((sum, p) => {
-    return sum + (Math.abs(p.a ?? 0) / 1000) + (Math.abs(p.d ?? 0) / 1000)
+    return sum + Math.abs(p.a ?? 0) / 1000 + Math.abs(p.d ?? 0) / 1000
   }, 0)
   const size = reachRadiusM * 2
   if (!Number.isFinite(size) || size <= 0) {
@@ -55,8 +57,9 @@ export function dhParametersToPlaneSize(dhParameters: DHParameter[]) {
   return size
 }
 
-
-export function verticesToCoplanarity(vertices: THREE.Vector3[]): CoplanarityResult {
+export function verticesToCoplanarity(
+  vertices: THREE.Vector3[],
+): CoplanarityResult {
   if (vertices.length < 3) {
     console.log("Not enough vertices to define a plane")
     return { isCoplanar: false }
@@ -84,4 +87,4 @@ export function verticesToCoplanarity(vertices: THREE.Vector3[]): CoplanarityRes
   }
 
   return { isCoplanar: true, normal }
-}
+}

package/src/components/utils/errorHandling.ts

@@ -22,7 +22,7 @@ export function makeShortErrorMessage(err: unknown) {
 }
 
 export function assertUnreachable(x: never, msg: string): never {
-  throw new Error(msg + ` ${JSON.stringify(x)}`)
+  throw new Error(`${msg} ${JSON.stringify(x)}`)
 }
 
 export function makeErrorMessage(err: unknown) {

package/src/components/utils/hooks.tsx

@@ -5,6 +5,7 @@ import { useEffect, type EffectCallback } from "react"
  * Run code once on component mount. Shorthand for useEffect(effect, []).
  */
 export function useMounted(effect: EffectCallback) {
+  // biome-ignore lint/correctness/useExhaustiveDependencies: pre-biome code
   useEffect(effect, [])
 }