@wandelbots/wandelbots-js-react-components 5.1.0 → 5.1.1-pr.feat-RB-3475-data-testid.572.d441fdf

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "5.1.0",
+  "version": "5.1.1-pr.feat-RB-3475-data-testid.572.d441fdf",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/VelocitySlider.tsx

@@ -10,9 +10,10 @@ type VelocitySliderProps = {
   min: number
   max: number
   velocity: number
-  onVelocityChange: (newVelocity: number) => void
+  onVelocityChange: (newVelocity: number, useDegree: boolean) => void
   disabled?: boolean
   renderValue?: (value: number) => ReactNode
+  useDegree: boolean
   store: JoggingStore
 }
 
@@ -25,11 +26,17 @@ export const VelocitySlider = observer((props: VelocitySliderProps) => {
   function onSliderChange(_event: Event, newVelocity: number | number[]) {
     if (newVelocity === props.velocity || !isNumber(newVelocity)) return
 
-    props.onVelocityChange(newVelocity)
+    props.onVelocityChange(newVelocity, props.useDegree)
   }
 
   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,10 +192,24 @@ 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} />
-          <JoggingVelocitySlider store={store} />
+          <JoggingOptions
+            store={store}
+            useDegree={store.selectedCartesianMotionType === "rotate"}
+          />
+
+          <JoggingVelocitySlider
+            store={store}
+            useDegree={store.selectedCartesianMotionType === "rotate"}
+          />
+
           <Divider />
         </Stack>
 
@@ -234,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={
@@ -278,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

@@ -36,8 +36,20 @@ export const JoggingJointTab = observer(
     }
 
     return (
-      <Stack flexGrow={1} gap={2} sx={{ padding: "18px 24px" }}>
-        <JoggingVelocitySlider store={store} />
+      <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
+          }
+        />
+
         <Divider />
 
         <Stack
@@ -45,7 +57,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
@@ -54,6 +71,8 @@ export const JoggingJointTab = observer(
               return (
                 <Stack
                   key={`joint-${joint.index}`}
+                  data-testid={`jogging-joint-tab-${joint.index}`}
+                  aria-label={`jogging-joint-tab-${joint.index}`}
                   direction="row"
                   alignItems="center"
                   justifyContent={"center"}
@@ -73,10 +92,15 @@ export const JoggingJointTab = observer(
                   )}
 
                   <JoggingJointValueControl
+                    data-testid={`jogging-joint-value-control-${joint.index}`}
+                    aria-label={`jogging-joint-value-control-${joint.index}`}
                     disabled={store.isLocked}
                     lowerLimit={jointLimits?.lower_limit}
                     upperLimit={jointLimits?.upper_limit}
-                    useDegree={store.currentMotionType === "rotate"}
+                    useDegree={
+                      store.jointCategory === JointCategory.REVOLUTE
+                    }
+
                     getValue={() => {
                       const value =
                         store.jogger.motionStream.rapidlyChangingMotionState

package/src/components/jogging/JoggingOptions.tsx

@@ -10,7 +10,7 @@ import {
   type OrientationId,
 } from "./JoggingStore"
 
-export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
+export const JoggingOptions = observer(({ store, useDegree }: { store: JoggingStore, useDegree: boolean }) => {
   const { t } = useTranslation()
   const componentId = useId()
   const joggingOptions: React.ReactElement[] = []
@@ -118,9 +118,9 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
           ? null
           : store.discreteIncrementOptions.map((inc) => (
               <MenuItem key={inc.id} value={inc.id}>
-                {store.currentMotionType === "translate"
-                  ? `${inc.mm}mm`
-                  : `${inc.degrees}°`}
+                {useDegree
+                  ? `${inc.degrees}°`
+                  : `${inc.mm}mm`}
               </MenuItem>
             ))}
       </AdornedSelect>,
@@ -130,6 +130,8 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
   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

@@ -46,7 +46,7 @@ export enum JointCategory {
 }
 
 type TabType = "cartesian" | "joint" | "debug";
-
+export type CartesianMotionType = "translate" | "rotate"
 
 export class JoggingStore {
   selectedTabId: TabType = "cartesian";
@@ -96,7 +96,7 @@ export class JoggingStore {
    * When on the cartesian tab, jogging can be either translating or rotating
    * around the TCP.
    */
-  selectedCartesianMotionType: "translate" | "rotate" = "translate"
+  selectedCartesianMotionType: CartesianMotionType = "translate"
 
   /**
    * If the jogger is busy running an incremental jog, this will be set
@@ -379,41 +379,26 @@ export class JoggingStore {
   }
 
   /** Selected velocity in mm/sec or deg/sec */
-  get velocityInDisplayUnits() {
-    return this.currentMotionType === "translate"
-      ? this.translationVelocityMmPerSec
-      : this.rotationVelocityDegPerSec
+  velocityInDisplayUnits(useDegree: boolean) {
+    return useDegree
+      ? this.rotationVelocityDegPerSec
+      : this.translationVelocityMmPerSec
   }
 
+
   /** Minimum selectable velocity in mm/sec or deg/sec */
-  get minVelocityInDisplayUnits() {
-    return this.currentMotionType === "translate"
-      ? this.minTranslationVelocityMmPerSec
-      : this.minRotationVelocityDegPerSec
+  minVelocityInDisplayUnits(useDegree: boolean) {
+    return useDegree
+      ? this.minRotationVelocityDegPerSec
+      : this.minTranslationVelocityMmPerSec
   }
 
-  /** Maximum selectable velocity in mm/sec or deg/sec */
-  get maxVelocityInDisplayUnits() {
-    return this.currentMotionType === "translate"
-      ? this.maxTranslationVelocityMmPerSec
-      : this.maxRotationVelocityDegPerSec
-  }
 
-  /**
-   * For velocity unit purposes, joint and cartesian rotation
-   * are treated as the same type of motion
-   */
-  get currentMotionType() {
-    if (
-      (
-        this.selectedTabId === "cartesian" &&
-        this.selectedCartesianMotionType === "translate"
-      ) || this.jointCategory === JointCategory.PRISMATIC
-    ) {
-      return "translate"
-    } else {
-      return "rotate"
-    }
+  /** Maximum selectable velocity in mm/sec or deg/sec */
+  maxVelocityInDisplayUnits(useDegree: boolean) {
+    return useDegree
+      ? this.maxRotationVelocityDegPerSec
+      : this.maxTranslationVelocityMmPerSec
   }
 
 
@@ -459,15 +444,16 @@ export class JoggingStore {
     this.incrementJogInProgress = incrementJog
   }
 
-  setVelocityFromSlider(velocity: number) {
-    if (this.currentMotionType === "translate") {
-      this.translationVelocityMmPerSec = velocity
-    } else {
+  setVelocityFromSlider(velocity: number,useDegree : boolean ) {
+    if (useDegree) {
       this.rotationVelocityDegPerSec = velocity
+    } else {
+      this.translationVelocityMmPerSec = velocity
     }
   }
 
-  setSelectedCartesianMotionType(type: "translate" | "rotate") {
+
+  setSelectedCartesianMotionType(type: CartesianMotionType) {
     this.selectedCartesianMotionType = type
   }
 

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -1,35 +1,38 @@
-import { observer, useLocalObservable } 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 }: { store: JoggingStore }) => {
+  ({
+     store,
+     useDegree,
+   }: {
+    store: JoggingStore
+    useDegree: boolean
+  }) => {
+
     const { t } = useTranslation()
 
-    const state = useLocalObservable(() => ({
-      get valueLabelFormat() {
-        if (store.currentMotionType === "translate") {
-          return (value: number) =>
-            `v = ${t("Jogging.Cartesian.Translation.velocityMmPerSec.lb", { amount: value })}`
-        } else {
-          return (value: number) =>
-            `ω = ${t("Jogging.Cartesian.Rotation.velocityDegPerSec.lb", { amount: value })}`
-        }
-      },
-    }))
+    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}
-        min={store.minVelocityInDisplayUnits}
-        max={store.maxVelocityInDisplayUnits}
+        velocity={store.velocityInDisplayUnits(useDegree)}
+        min={store.minVelocityInDisplayUnits(useDegree)}
+        max={store.maxVelocityInDisplayUnits(useDegree)}
         onVelocityChange={store.setVelocityFromSlider}
+        useDegree={useDegree}
         disabled={store.isLocked}
         renderValue={(value) => (
           <VelocitySliderLabel
-            value={state.valueLabelFormat(value)}
+            value={valueLabelFormat(value, useDegree)}
             sx={{
               minWidth: "111px",
               span: {