@wandelbots/wandelbots-js-react-components 5.1.1 → 5.2.0-pr.fix-RB-3135-dhparam-type-check.571.bb107d7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "5.1.1",
+  "version": "5.2.0-pr.fix-RB-3135-dhparam-type-check.571.bb107d7",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/VelocitySlider.tsx

@@ -30,7 +30,13 @@ export const VelocitySlider = observer((props: VelocitySliderProps) => {
   }
 
   return (
-    <Stack direction="row" gap={2} alignItems="center">
+    <Stack
+      direction="row"
+      gap={2}
+      alignItems="center"
+      data-testid="velocity-slider"
+      aria-label="velocity-slider"
+    >
       {store.showVelocityLegend && (
         <Typography
           sx={{

package/src/components/jogging/JoggingBlocked.tsx

@@ -8,6 +8,8 @@ export const JoggingBlocked = observer(({ store }: { store: JoggingStore }) => {
 
   return (
     <Backdrop
+      data-testid="jogging-blocked"
+      aria-label="jogging-blocked"
       open={true}
       sx={{
         position: "absolute",

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -137,7 +137,12 @@ export const JoggingCartesianAxisControl = externalizeComponent(
       }
 
       return (
-        <Stack height="64px" direction="row" justifyContent="center" {...rest}>
+        <Stack
+          height="64px"
+          direction="row"
+          justifyContent="center"
+          {...rest}
+        >
           <IconButton
             disabled={disabled}
             disableRipple

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -192,7 +192,13 @@ export const JoggingCartesianTab = observer(
     }
 
     return (
-      <Stack flexGrow={1} gap={2} sx={{ padding: "18px 24px" }}>
+      <Stack
+        data-testid="jogging-cartesian-tab"
+        aria-label="jogging-cartesian-tab"
+        flexGrow={1}
+        gap={2}
+        sx={{ padding: "18px 24px" }}
+      >
         <Stack gap={2}>
           <JoggingOptions
             store={store}
@@ -242,6 +248,8 @@ export const JoggingCartesianTab = observer(
               axisList.map((axis) => (
                 <JoggingCartesianAxisControl
                   key={axis.id}
+                  data-testid={`jogging-cartesian-axis-control-${axis.id}`}
+                  aria-label={`jogging-cartesian-axis-control-${axis.id}`}
                   colors={axis.colors}
                   disabled={store.isLocked}
                   activeJoggingDirection={
@@ -286,6 +294,8 @@ export const JoggingCartesianTab = observer(
               axisList.map((axis) => (
                 <JoggingCartesianAxisControl
                   key={axis.id}
+                  data-testid={`jogging-cartesian-axis-control-${axis.id}`}
+                  aria-label={`jogging-cartesian-axis-control-${axis.id}`}
                   colors={axis.colors}
                   disabled={store.isLocked}
                   activeJoggingDirection={

package/src/components/jogging/JoggingJointLimitDetector.tsx

@@ -1,4 +1,5 @@
 import { Typography } from "@mui/material"
+import { observer } from "mobx-react-lite"
 import isEqual from "lodash-es/isEqual"
 import { useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -9,7 +10,7 @@ import type { JoggingStore } from "./JoggingStore"
  * Monitors the active robot motion state and displays a message if
  * any joint limits are reached.
  */
-export const JoggingJointLimitDetector = ({
+export const JoggingJointLimitDetector = observer(({
   store,
 }: {
   store: JoggingStore
@@ -40,6 +41,8 @@ export const JoggingJointLimitDetector = ({
 
   return (
     <Typography
+      data-testid="jogging-joint-limit-detector"
+      aria-label="jogging-joint-limit-detector"
       color="error"
       sx={{
         margin: "0.5rem 1rem",
@@ -53,4 +56,4 @@ export const JoggingJointLimitDetector = ({
       })}
     </Typography>
   )
-}
+})

package/src/components/jogging/JoggingJointTab.tsx

@@ -3,8 +3,9 @@ import { observer } from "mobx-react-lite"
 import type { ReactNode } from "react"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
 import { JoggingJointValueControl } from "./JoggingJointValueControl"
-import { type JoggingStore, JointCategory } from "./JoggingStore"
+import { type JoggingStore } from "./JoggingStore"
 import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
+import { JointTypeEnum } from "@wandelbots/nova-js/v2"
 
 export const JoggingJointTab = observer(
   ({ store, children }: { store: JoggingStore; children: ReactNode }) => {
@@ -19,11 +20,11 @@ export const JoggingJointTab = observer(
         joint: opts.joint,
         direction: opts.direction,
         velocityUnit:
-          store.jointCategory === JointCategory.PRISMATIC
+          store.jointType === JointTypeEnum.PrismaticJoint
             ? "mm/s"
             : "rad/s",
         velocityValue:
-          store.jointCategory === JointCategory.PRISMATIC
+          store.jointType === JointTypeEnum.PrismaticJoint
             ? store.translationVelocityMmPerSec
             : store.rotationVelocityRadsPerSec,
 
@@ -36,11 +37,17 @@ export const JoggingJointTab = observer(
     }
 
     return (
-      <Stack flexGrow={1} gap={2} sx={{ padding: "18px 24px" }}>
+      <Stack
+        data-testid="jogging-joint-tab"
+        aria-label="jogging-joint-tab"
+        flexGrow={1}
+        gap={2}
+        sx={{ padding: "18px 24px" }}
+      >
         <JoggingVelocitySlider
           store={store}
           useDegree={
-            store.jointCategory === JointCategory.REVOLUTE
+            store.jointType === JointTypeEnum.RevoluteJoint
           }
         />
 
@@ -51,7 +58,12 @@ export const JoggingJointTab = observer(
           alignItems="stretch"
           sx={{ flexGrow: "1" }}
         >
-          <Stack alignItems="center" gap="24px">
+          <Stack
+            data-testid="jogging-joint-value-controls-wrapper"
+            aria-label="jogging-joint-value-controls-wrapper"
+            alignItems="center"
+            gap="24px"
+          >
             {store.jogger.motionStream.joints.map((joint) => {
               const jointLimits =
                 store.motionGroupDescription.operation_limits.auto_limits
@@ -60,6 +72,8 @@ export const JoggingJointTab = observer(
               return (
                 <Stack
                   key={`joint-${joint.index}`}
+                  data-testid={`jogging-joint-value-control-${joint.index}`}
+                  aria-label={`jogging-joint-value-control-${joint.index}`}
                   direction="row"
                   alignItems="center"
                   justifyContent={"center"}
@@ -83,7 +97,7 @@ export const JoggingJointTab = observer(
                     lowerLimit={jointLimits?.lower_limit}
                     upperLimit={jointLimits?.upper_limit}
                     useDegree={
-                      store.jointCategory === JointCategory.REVOLUTE
+                      store.jointType === JointTypeEnum.RevoluteJoint
                     }
 
                     getValue={() => {

package/src/components/jogging/JoggingOptions.tsx

@@ -130,6 +130,8 @@ export const JoggingOptions = observer(({ store, useDegree }: { store: JoggingSt
   return (
     <Box
       component="div"
+      data-testid="jogging-options"
+      aria-label="jogging-options"
       sx={{
         display: "grid",
         gap: "16px",

package/src/components/jogging/JoggingPanel.tsx

@@ -96,6 +96,8 @@ export const JoggingPanel = externalizeComponent(
 
     return (
       <Stack
+        data-testid="jogging-panel"
+        aria-label="jogging-panel"
         sx={{
           maxWidth: "460px",
           minWidth: "320px",
@@ -147,6 +149,8 @@ const JoggingPanelInner = observer(
       <Stack flexGrow={1} sx={{ overflow: "hidden" }}>
         {/* Tab selection */}
         <Tabs
+          data-testid="jogging-tabs"
+          aria-label="jogging-tabs"
           value={store.tabIndex}
           onChange={store.onTabChange}
           variant="fullWidth"
@@ -167,6 +171,8 @@ const JoggingPanelInner = observer(
             return (
               <Tab
                 key={tab.id}
+                data-testid={`jogging-tab-${tab.id}`}
+                aria-label={`jogging-tab-${tab.id}`}
                 label={
                   store.showTabIcons ? (
                     <Stack direction="row" alignItems="center">

package/src/components/jogging/JoggingStore.ts

@@ -1,8 +1,11 @@
 import { tryParseJson } from "@wandelbots/nova-js"
-import type {
-  CoordinateSystem,
-  MotionGroupDescription,
-  RobotTcp,
+import {
+  type CoordinateSystem,
+  type DHParameter,
+  type MotionGroupDescription,
+  type RobotTcp,
+  type KinematicModel,
+  JointTypeEnum,
 } from "@wandelbots/nova-js/v2"
 import { countBy } from "lodash-es"
 import keyBy from "lodash-es/keyBy"
@@ -40,30 +43,12 @@ export type IncrementJogInProgress = {
   axis: JoggingAxis
 }
 
-export enum JointCategory {
-  REVOLUTE = "REVOLUTE",
-  PRISMATIC = "PRISMATIC",
-}
-
 type TabType = "cartesian" | "joint" | "debug";
 export type CartesianMotionType = "translate" | "rotate"
 
 export class JoggingStore {
   selectedTabId: TabType = "cartesian";
 
-  /**
-   * State of the jogging panel. Starts as "inactive"
-   */
-  activationState: "inactive" | "loading" | "active" = "inactive"
-
-  /**
-   * If an error occurred connecting to the jogging websocket
-   */
-  activationError: unknown | null = null
-
-  /** To avoid activation race conditions */
-  activationCounter: number = 0
-
   /** Locks to prevent UI interactions during certain operations */
   locks = new Set<string>()
 
@@ -145,6 +130,19 @@ export class JoggingStore {
 
   disposers: IReactionDisposer[] = []
 
+  dhParameters: DHParameter[] = []
+
+  /**
+   * Inverse solver from the kinematic model of the motion group to determine, which tabs should be rendered
+   */
+  inverseSolver: string | null | undefined = undefined
+
+  /**
+   * Joint type to determine, whether the active robot should be displayed as Robot or Linear Axis and what tabs
+   * should be rendered by the JoggingPanel component.
+   */
+  jointType: JointTypeEnum = JointTypeEnum.RevoluteJoint
+
   /**
    * Load a jogging store with the relevant data it needs
    * from the backend
@@ -167,6 +165,10 @@ export class JoggingStore {
       ),
     ])
 
+    const kinematicModel: KinematicModel = await nova.api.motionGroupModels.getMotionGroupKinematicModel(
+      description.motion_group_model,
+    )
+
     const tcps = Object.entries(description.tcps || {}).map(([id, tcp]) => ({
       id,
       readable_name: tcp.name,
@@ -174,7 +176,7 @@ export class JoggingStore {
       orientation: tcp.pose.orientation as Vector3Simple,
     }))
 
-    return new JoggingStore(jogger, coordinatesystems || [], description, tcps)
+    return new JoggingStore(jogger, coordinatesystems || [], description, tcps, kinematicModel)
   }
 
   constructor(
@@ -182,6 +184,7 @@ export class JoggingStore {
     readonly coordSystems: CoordinateSystem[],
     readonly motionGroupDescription: MotionGroupDescription,
     readonly tcps: RobotTcp[],
+    readonly kinematicModel: KinematicModel,
   ) {
     // TODO workaround for default coord system on backend having a canonical id
     // of empty string. Can remove when fixed on API side
@@ -193,6 +196,10 @@ export class JoggingStore {
     }
     this.selectedCoordSystemId = coordSystems[0]?.coordinate_system || "world"
     this.selectedTcpId = tcps[0]?.id || ""
+    this.inverseSolver = this.kinematicModel.inverse_solver
+    this.jointType =
+      motionGroupDescription?.dh_parameters?.[0]?.type ??
+      JointTypeEnum.RevoluteJoint
 
     // Make all properties observable and actions auto-bound
     makeAutoObservable(this, {}, { autoBind: true })
@@ -306,17 +313,25 @@ export class JoggingStore {
   }
 
   get tabs() {
-    const tempTabs : {id: TabType, label: string}[] = [{
-      id: "joint",
-      label: "Joints",
-    }] ;
-    if(this.isTcpCartesianMoveable){
+    const tempTabs: { id: TabType; label: string }[] = [
+      {
+        id: "joint",
+        label: "Joints",
+      },
+    ]
+    // show the cartesian tab only : 1. when there is a solver or 2. when no solver could be loaded ( as a default )
+    // do not show the cartesia tab when the solver is null this means, it cannot get jogged cartesian
+    if (
+      this.inverseSolver === undefined ||
+      this.inverseSolver !== null
+    ) {
       tempTabs.unshift({
         id: "cartesian",
         label: "Cartesian",
-      })}
+      })
+    }
 
-    return tempTabs;
+    return tempTabs
   }
 
 
@@ -348,10 +363,6 @@ export class JoggingStore {
     return keyBy(this.coordSystems, (cs) => cs.coordinate_system)
   }
 
-  get selectedCoordSystem() {
-    return this.coordSystemsById[this.selectedCoordSystemId]
-  }
-
   /**
    * The id of the coordinate system to use for jogging.
    * If in tool orientation, this is set to "tool", not the
@@ -401,24 +412,6 @@ export class JoggingStore {
       : this.maxTranslationVelocityMmPerSec
   }
 
-
-  /*
-  * ToDo replace Hardcoded Models with an api request 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
@@ -444,7 +437,7 @@ export class JoggingStore {
     this.incrementJogInProgress = incrementJog
   }
 
-  setVelocityFromSlider(velocity: number,useDegree : boolean ) {
+  setVelocityFromSlider(velocity: number, useDegree: boolean) {
     if (useDegree) {
       this.rotationVelocityDegPerSec = velocity
     } else {

package/src/components/robots/MotionGroupVisualizer.tsx

@@ -25,10 +25,6 @@ export const MotionGroupVisualizer: React.FC<MotionGroupVisualizerProps> = exter
 
   /**
    * Sets the joint type according to delivered dh parameter type
-   *
-   * TODO as soon as V2 api migration is done, the setting of the default RevoluteJoint value should be
-   *  deleted, cause the type property is expected to be always delivered. It is not the case in the V1 at the
-   *  moment.
    */
   useEffect(() => {
     if (dhParameters.length) {