@wandelbots/wandelbots-js-react-components 4.1.1 → 4.2.0-pr.feat-JoggingPanelSupportForLinearAxis.514.bd93b8d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "4.1.1",
+  "version": "4.2.0-pr.feat-JoggingPanelSupportForLinearAxis.514.bd93b8d",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -93,7 +93,7 @@
     "@types/react": "^19.1.8",
     "@types/three": "^0.182.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@wandelbots/nova-js": "^3.5.0",
+    "@wandelbots/nova-js": "^3.5.2",
     "add": "^2.0.6",
     "eslint-plugin-storybook": "^10.1.10",
     "glob": "^13.0.0",
@@ -176,7 +176,7 @@
   "dependencies": {
     "@mui/x-charts": "^8.27.0",
     "@mui/x-data-grid": "^8.27.0",
-    "@wandelbots/nova-js": "3.5.1",
+    "@wandelbots/nova-js": "^3.5.2",
     "axios": "^1.13.2",
     "dotenv": "^17.2.3",
     "i18next-browser-languagedetector": "^8.2.0",

package/src/3d.ts

@@ -14,4 +14,5 @@ export * from "./components/robots/Robot"
 export { defaultGetModel } from "./components/robots/robotModelLogic"
 export * from "./components/robots/SupportedLinearAxis"
 export * from "./components/robots/SupportedRobot"
+export * from "./components/robots/MotionGroupVisualizer"
 

package/src/components/jogging/JoggingJointTab.tsx

@@ -1,10 +1,9 @@
 import { Divider, Stack, Typography, useTheme } from "@mui/material"
-import { radiansToDegrees } from "@wandelbots/nova-js"
 import { observer } from "mobx-react-lite"
 import type { ReactNode } from "react"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
-import { JoggingJointRotationControl } from "./JoggingJointRotationControl"
-import type { JoggingStore } from "./JoggingStore"
+import { JoggingJointValueControl } from "./JoggingJointValueControl"
+import { type JoggingStore, JointCategory } from "./JoggingStore"
 import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
 
 export const JoggingJointTab = observer(
@@ -12,14 +11,22 @@ export const JoggingJointTab = observer(
     const theme = useTheme()
     async function startJointJogging(opts: {
       joint: number
-      direction: "-" | "+"
+      direction: "-" | "+",
     }) {
       await store.activate()
 
       await store.jogger.rotateJoints({
         joint: opts.joint,
         direction: opts.direction,
-        velocityRadsPerSec: store.rotationVelocityRadsPerSec,
+        velocityUnit:
+          store.jointCategory === JointCategory.PRISMATIC
+            ? "mm/s"
+            : "rad/s",
+        velocityValue:
+          store.jointCategory === JointCategory.PRISMATIC
+            ? store.translationVelocityMmPerSec
+            : store.rotationVelocityRadsPerSec,
+
       })
     }
 
@@ -43,14 +50,6 @@ export const JoggingJointTab = observer(
               const jointLimits =
                 store.motionGroupDescription.operation_limits.auto_limits
                   ?.joints?.[joint.index]?.position
-              const lowerLimitDegs =
-                jointLimits?.lower_limit !== undefined
-                  ? radiansToDegrees(jointLimits.lower_limit)
-                  : undefined
-              const upperLimitDegs =
-                jointLimits?.upper_limit !== undefined
-                  ? radiansToDegrees(jointLimits.upper_limit)
-                  : undefined
 
               return (
                 <Stack
@@ -73,16 +72,17 @@ export const JoggingJointTab = observer(
                     </Typography>
                   )}
 
-                  <JoggingJointRotationControl
+                  <JoggingJointValueControl
                     disabled={store.isLocked}
-                    lowerLimitDegs={lowerLimitDegs}
-                    upperLimitDegs={upperLimitDegs}
-                    getValueDegs={() => {
+                    lowerLimit={jointLimits?.lower_limit}
+                    upperLimit={jointLimits?.upper_limit}
+                    useDegree={store.currentMotionType === "rotate"}
+                    getValue={() => {
                       const value =
                         store.jogger.motionStream.rapidlyChangingMotionState
                           .joint_position[joint.index]
                       return value !== undefined
-                        ? radiansToDegrees(value)
+                        ? value
                         : undefined
                     }}
                     startJogging={(direction: "-" | "+") =>

package/src/components/jogging/{JoggingJointRotationControl.tsx → JoggingJointValueControl.tsx}

@@ -1,5 +1,6 @@
 import ChevronLeft from "@mui/icons-material/ChevronLeft"
 import ChevronRight from "@mui/icons-material/ChevronRight"
+import { radiansToDegrees } from "@wandelbots/nova-js"
 import { IconButton, Slider, Typography, useTheme } from "@mui/material"
 import Stack from "@mui/material/Stack"
 import throttle from "lodash-es/throttle"
@@ -9,28 +10,29 @@ import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../../externalizeComponent"
 import { useAnimationFrame } from "../utils/hooks"
 
-type JoggingJointRotationControlProps = {
+type JoggingJointValueControlProps = {
   startJogging: (direction: "-" | "+") => void
   stopJogging: () => void
-  lowerLimitDegs?: number
-  upperLimitDegs?: number
-  getValueDegs: () => number | undefined
-
+  lowerLimit?: number
+  upperLimit?: number
+  useDegree: boolean
+  getValue: () => number | undefined
   disabled?: boolean
 } & React.ComponentProps<typeof Stack>
 
 /** A input widget to control an individual joint */
-export const JoggingJointRotationControl = externalizeComponent(
+export const JoggingJointValueControl = externalizeComponent(
   observer(
     ({
-      startJogging,
-      stopJogging,
-      lowerLimitDegs,
-      upperLimitDegs,
-      getValueDegs,
-      disabled,
-      ...rest
-    }: JoggingJointRotationControlProps) => {
+       startJogging,
+       stopJogging,
+       lowerLimit,
+       upperLimit,
+       useDegree,
+       getValue,
+       disabled,
+       ...rest
+     }: JoggingJointValueControlProps) => {
       const { t } = useTranslation()
       const [currentValue, setCurrentValue] = useState<number | undefined>()
       const theme = useTheme()
@@ -55,11 +57,18 @@ export const JoggingJointRotationControl = externalizeComponent(
       }))
 
       const updateValue = throttle(() => {
-        setCurrentValue(getValueDegs())
+        setCurrentValue(useDegree ? convertToDegree(getValue()) : getValue())
       }, 50)
 
       useAnimationFrame(updateValue)
 
+      function convertToDegree(value: number| undefined){
+        if (value == undefined){
+          return undefined;
+        }
+        return radiansToDegrees(value);
+      }
+
       function onPointerDownMinus(ev: React.PointerEvent) {
         // Stop right click from triggering jog
         if (ev.button === 0) state.startJogging("-")
@@ -90,6 +99,20 @@ export const JoggingJointRotationControl = externalizeComponent(
           return output
         }
       }
+      function formatMm(value: number | undefined, precision = 1) {
+        if (value === undefined || isNaN(value)) return ""
+
+        const output = t("General.mm.variable", {
+          amount: value.toFixed(precision),
+        })
+
+        if (value > 0 && precision === 0) {
+          return `+${output}`
+        } else {
+          return output
+        }
+      }
+
 
       return (
         <Stack
@@ -138,8 +161,8 @@ export const JoggingJointRotationControl = externalizeComponent(
               sx={{
                 pointerEvents: "none",
                 color:
-                  theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
-                    ?.arrowColor,
+                theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
+                  ?.arrowColor,
               }}
             />
           </IconButton>
@@ -171,14 +194,14 @@ export const JoggingJointRotationControl = externalizeComponent(
                   : theme.palette.text.primary,
               }}
             >
-              {formatDegrees(currentValue)}
+              {useDegree ? formatDegrees(currentValue) : formatMm(currentValue)}
             </Typography>
 
             <Slider
               disabled
               aria-label="Joint position"
-              min={lowerLimitDegs}
-              max={upperLimitDegs}
+              min={ useDegree ? convertToDegree(lowerLimit) : lowerLimit}
+              max={ useDegree ? convertToDegree(upperLimit) : upperLimit}
               value={currentValue || 0}
               track={false}
               sx={{
@@ -206,15 +229,15 @@ export const JoggingJointRotationControl = externalizeComponent(
                 },
               }}
               marks={
-                lowerLimitDegs !== undefined &&
-                upperLimitDegs !== undefined && [
+                lowerLimit !== undefined &&
+                upperLimit !== undefined && [
                   {
-                    value: lowerLimitDegs,
-                    label: formatDegrees(lowerLimitDegs, 0),
+                    value: (useDegree ? convertToDegree(lowerLimit) : lowerLimit) as number,
+                    label: useDegree ? formatDegrees(convertToDegree(lowerLimit),0) : formatMm(lowerLimit),
                   },
                   {
-                    value: upperLimitDegs,
-                    label: formatDegrees(upperLimitDegs, 0),
+                    value: (useDegree ? convertToDegree(upperLimit) : upperLimit) as number,
+                    label: useDegree ?  formatDegrees(convertToDegree(upperLimit),0) : formatMm(upperLimit),
                   },
                 ]
               }
@@ -236,8 +259,8 @@ export const JoggingJointRotationControl = externalizeComponent(
               sx={{
                 pointerEvents: "none",
                 color:
-                  theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
-                    ?.arrowColor,
+                theme.componentsExt?.JoggingPanel?.JoggingJoint?.Joint
+                  ?.arrowColor,
               }}
             />
           </IconButton>

package/src/components/jogging/JoggingStore.ts

@@ -40,8 +40,16 @@ export type IncrementJogInProgress = {
   axis: JoggingAxis
 }
 
+export enum JointCategory {
+  REVOLUTE = "REVOLUTE",
+  PRISMATIC = "PRISMATIC",
+}
+
+type TabType = "cartesian" | "joint" | "debug";
+
+
 export class JoggingStore {
-  selectedTabId: "cartesian" | "joint" | "debug" = "cartesian"
+  selectedTabId: TabType = "cartesian";
 
   /**
    * State of the jogging panel. Starts as "inactive"
@@ -298,18 +306,20 @@ export class JoggingStore {
   }
 
   get tabs() {
-    return [
-      {
+    const tempTabs : {id: TabType, label: string}[] = [{
+      id: "joint",
+      label: "Joints",
+    }] ;
+    if(this.isTcpCartesianMoveable){
+      tempTabs.unshift({
         id: "cartesian",
-        label: "cartesian",
-      },
-      {
-        id: "joint",
-        label: "joint",
-      },
-    ] as const
+        label: "Cartesian",
+      })}
+
+    return tempTabs;
   }
 
+
   get incrementOptions() {
     return incrementOptions
   }
@@ -395,8 +405,10 @@ export class JoggingStore {
    */
   get currentMotionType() {
     if (
-      this.selectedTabId === "cartesian" &&
-      this.selectedCartesianMotionType === "translate"
+      (
+        this.selectedTabId === "cartesian" &&
+        this.selectedCartesianMotionType === "translate"
+      ) || this.jointCategory === JointCategory.PRISMATIC
     ) {
       return "translate"
     } else {
@@ -404,6 +416,24 @@ export class JoggingStore {
     }
   }
 
+
+  /*
+  * ToDo replace Hardcoded Models with an api requst that delivers the type (will become part of DH-Parameters)
+  *  Ticket already created
+  * */
+  get jointCategory(): JointCategory {
+    return this.motionGroupDescription.motion_group_model === "ABB_IRT710"
+      ? JointCategory.PRISMATIC
+      : JointCategory.REVOLUTE
+  }
+
+  get isTcpCartesianMoveable(): boolean{
+    if(this.motionGroupDescription.motion_group_model === "ABB_IRT710"){
+      return false;
+    }
+    return true;
+  }
+
   onTabChange(_event: React.SyntheticEvent, newValue: number) {
     const tab = this.tabs[newValue] || this.tabs[0]!
     this.selectedTabId = tab.id

package/src/components/robots/MotionGroupVisualizer.tsx

@@ -0,0 +1,113 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react"
+import { NovaClient } from "@wandelbots/nova-js/v2"
+import type { KinematicModel } from "@wandelbots/nova-api/v2"
+
+import { externalizeComponent } from "../../externalizeComponent"
+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 {
+    instanceUrl,
+    inverseSolver: inverseSolverProp,
+    modelFromController,
+    ...rest
+  } = props
+
+  const [inverseSolver, setInverseSolver] = useState<string | null | undefined>(
+    inverseSolverProp,
+  )
+  const [, forceThreeRerender] = useState<boolean>(false)
+
+  /**
+   * Fetches the kinematic model from the API and saved the inverse_solver property, which defined
+   * whether the motion group should be displayed as a robot or linear axis
+   */
+  const fetchKinematicModel = useCallback(async () => {
+    const nova = new NovaClient({ instanceUrl })
+
+    try {
+      const kinematicModel: KinematicModel =
+        await nova.api.motionGroupModels.getMotionGroupKinematicModel(
+          modelFromController,
+        )
+
+      setInverseSolver(kinematicModel.inverse_solver)
+    } catch (err) {
+      console.warn(
+        `Failed to fetch kinematic model from API for ${modelFromController}, falling back to local config`,
+      )
+    } finally {
+      /**
+       * The following is a workaround to force a rerender of the Three.js scene, due
+       * to a race condition (if the component gets re-initialized, the robot
+       * is rendered with the initial joint position). The forceThreeRerender tells
+       * the Three.JS to re-render with the right joint position
+       *
+       * TODO remove the three rerender function and get rid of the
+       *  stale state condition
+       *  https://wandelbots.atlassian.net/browse/RB-3134
+       */
+      setTimeout(() => forceThreeRerender(true), 0)
+    }
+  }, [modelFromController, instanceUrl])
+
+  /**
+   * Checks the delivered inverseSolver property from the consumer
+   * Defined, Null - carry on with the delivered value - the inverseSolver was fetched via consumer app
+   * Undefined - carry out a request to fetch the inverseSolver value
+   */
+  useEffect(() => {
+    const shouldKinematicBeFetched =
+      inverseSolverProp === undefined && !!modelFromController && !!instanceUrl
+
+    if (shouldKinematicBeFetched) {
+      fetchKinematicModel()
+    }
+  }, [inverseSolverProp, modelFromController, fetchKinematicModel, instanceUrl])
+
+  /**
+   * The turntable models return inverseSolver = null - however these models
+   * should be rendered with SupportedRobot instead of SupportedLinearAxis
+   *
+   * TODO
+   * In the future - this hard coded check would be replaced with a new "type" property
+   * from dh parameters
+   */
+  const isTurnTable = useMemo(() => {
+    return [
+      "KUKA_DKP250",
+      "KUKA_DKP500_2",
+      "YASKAWA_TURN1",
+      "YASKAWA_TURN2",
+      "YASKAWA_TURN3",
+    ].includes(modelFromController)
+  }, [modelFromController])
+
+  if (inverseSolver || isTurnTable) {
+    return (
+      <SupportedRobot
+        instanceUrl={instanceUrl}
+        modelFromController={modelFromController}
+        {...rest}
+      />
+    )
+  }
+
+  if (inverseSolver === null) {
+    return (
+      <SupportedLinearAxis
+        instanceUrl={instanceUrl}
+        modelFromController={modelFromController}
+        {...rest}
+      />
+    )
+  }
+
+  return null
+})

package/src/components/robots/SupportedLinearAxis.tsx

@@ -21,7 +21,8 @@ export type SupportedLinearAxisProps = {
   modelFromController: string
   dhParameters: DHParameter[]
   flangeRef?: React.Ref<THREE.Group>
-  getModel?: (modelFromController: string) => Promise<string> | undefined
+  instanceUrl?: string
+  getModel?: (modelFromController: string, instanceUrl?: string) => Promise<string> | undefined
   postModelRender?: () => void
   transparentColor?: string
 } & ThreeElements["group"]
@@ -35,6 +36,7 @@ export const SupportedLinearAxis = externalizeComponent(
     flangeRef,
     postModelRender,
     transparentColor,
+    instanceUrl,
     ...props
   }: SupportedLinearAxisProps) => {
     const [robotGroup, setRobotGroup] = useState<THREE.Group | null>(null)
@@ -77,7 +79,7 @@ export const SupportedLinearAxis = externalizeComponent(
             >
               <GenericRobot
                 modelURL={(() => {
-                  const result = getModel(modelFromController)
+                  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' })

package/src/components/robots/SupportedRobot.tsx

@@ -22,7 +22,8 @@ export type SupportedRobotProps = {
   modelFromController: string
   dhParameters: DHParameter[]
   flangeRef?: React.Ref<THREE.Group>
-  getModel?: (modelFromController: string) => Promise<string> | undefined
+  instanceUrl?: string
+  getModel?: (modelFromController: string, instanceUrl?: string) => Promise<string> | undefined
   postModelRender?: () => void
   transparentColor?: string
 } & ThreeElements["group"]
@@ -36,6 +37,7 @@ export const SupportedRobot = externalizeComponent(
     flangeRef,
     postModelRender,
     transparentColor,
+    instanceUrl,
     ...props
   }: SupportedRobotProps) => {
     const [robotGroup, setRobotGroup] = useState<THREE.Group | null>(null)
@@ -78,7 +80,7 @@ export const SupportedRobot = externalizeComponent(
             >
               <GenericRobot
                 modelURL={(() => {
-                  const result = getModel(modelFromController)
+                  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' })

package/src/components/robots/robotModelLogic.ts

@@ -40,7 +40,7 @@ export async function revokeAllModelUrls(): Promise<void> {
   modelCache.clear()
 }
 
-export async function defaultGetModel(modelFromController: string): Promise<string> {
+export async function defaultGetModel(modelFromController: string, instanceUrlProp?: string): Promise<string> {
   // Check cache first
   if (modelCache.has(modelFromController)) {
     return modelCache.get(modelFromController)!
@@ -48,7 +48,7 @@ export async function defaultGetModel(modelFromController: string): Promise<stri
   
   // Create the promise and cache it immediately to prevent duplicate calls
   const modelPromise = (async () => {
-    const instanceUrl = import.meta.env.WANDELAPI_BASE_URL    
+    const instanceUrl = instanceUrlProp || import.meta.env.WANDELAPI_BASE_URL
     const nova = new NovaClient({ instanceUrl })
     
     // Configure axios to handle binary responses for GLB files

package/src/core.ts

@@ -3,7 +3,7 @@ export * from "./components/AppHeader"
 export * from "./components/CycleTimer"
 export * from "./components/DataGrid"
 export * from "./components/jogging/JoggingCartesianAxisControl"
-export * from "./components/jogging/JoggingJointRotationControl"
+export * from "./components/jogging/JoggingJointValueControl"
 export * from "./components/jogging/JoggingPanel"
 export { JoggingStore } from "./components/jogging/JoggingStore"
 export * from "./components/jogging/PoseCartesianValues"
@@ -31,3 +31,4 @@ export * from "./lib/motionStateUpdate"
 export * from "./lib/MotionStreamConnection"
 export * from "./themes/themeTypes"
 export { createNovaMuiTheme } from "./themes/theming"
+

package/src/lib/JoggerConnection.test.ts

@@ -77,7 +77,8 @@ test("jog a robot somewhat", async () => {
   await jogger.rotateJoints({
     joint: 0,
     direction: "+",
-    velocityRadsPerSec: 0.1,
+    velocityValue: 0.1,
+    velocityUnit: "rad/s",
   })
 
   await delay(500)
@@ -94,7 +95,8 @@ test("jog a robot somewhat", async () => {
   await jogger.rotateJoints({
     joint: 0,
     direction: "-",
-    velocityRadsPerSec: 0.1,
+    velocityValue: 0.1,
+    velocityUnit: "rad/s",
   })
   await delay(500)
   await jogger.stop()

package/src/lib/JoggerConnection.ts

@@ -280,16 +280,20 @@ export class JoggerConnection {
    * Jogging: Start rotation of a single robot joint at the specified velocity
    */
   async rotateJoints({
-    joint,
-    direction,
-    velocityRadsPerSec,
+                       joint,
+                       direction,
+                       velocityValue,
+                       velocityUnit
+
   }: {
     /** Index of the joint to rotate */
     joint: number
     /** Direction of rotation ("+" or "-") */
     direction: "+" | "-"
-    /** Speed of the rotation in radians per second */
-    velocityRadsPerSec: number
+    /** Speed of the rotation, unit is currently unused, but i wanted it there to raise awareness that not everything here is rad/s*/
+    velocityValue: number
+    velocityUnit:  "mm/s" | "rad/s"
+
   }) {
     if (!this.joggingSocket || this.mode !== "jogging") {
       throw new Error(
@@ -300,7 +304,7 @@ export class JoggerConnection {
     const velocity = new Array(this.numJoints).fill(0)
 
     velocity[joint] =
-      direction === "-" ? -velocityRadsPerSec : velocityRadsPerSec
+      direction === "-" ? - velocityValue : velocityValue
 
     this.joggingSocket.sendJson({
       message_type: "JointVelocityRequest",

package/dist/components/jogging/JoggingJointRotationControl.d.ts

@@ -1,15 +0,0 @@
-import Stack from "@mui/material/Stack";
-type JoggingJointRotationControlProps = {
-    startJogging: (direction: "-" | "+") => void;
-    stopJogging: () => void;
-    lowerLimitDegs?: number;
-    upperLimitDegs?: number;
-    getValueDegs: () => number | undefined;
-    disabled?: boolean;
-} & React.ComponentProps<typeof Stack>;
-/** A input widget to control an individual joint */
-export declare const JoggingJointRotationControl: (({ startJogging, stopJogging, lowerLimitDegs, upperLimitDegs, getValueDegs, disabled, ...rest }: JoggingJointRotationControlProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-export {};
-//# sourceMappingURL=JoggingJointRotationControl.d.ts.map

package/dist/components/jogging/JoggingJointRotationControl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"JoggingJointRotationControl.d.ts","sourceRoot":"","sources":["../../../src/components/jogging/JoggingJointRotationControl.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,qBAAqB,CAAA;AAQvC,KAAK,gCAAgC,GAAG;IACtC,YAAY,EAAE,CAAC,SAAS,EAAE,GAAG,GAAG,GAAG,KAAK,IAAI,CAAA;IAC5C,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,YAAY,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IAEtC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,CAAA;AAEtC,oDAAoD;AACpD,eAAO,MAAM,2BAA2B,oGAUjC,gCAAgC;;CAuNtC,CAAA"}