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

package/src/components/jogging/JoggingOptions.tsx

@@ -1,4 +1,5 @@
-import { Box, MenuItem } from "@mui/material"
+import Box from "@mui/material/Box"
+import MenuItem from "@mui/material/MenuItem"
 import { observer } from "mobx-react-lite"
 import { useId } from "react"
 import { useTranslation } from "react-i18next"
@@ -10,150 +11,153 @@ import {
   type OrientationId,
 } from "./JoggingStore"
 
-export const JoggingOptions = observer(({ store, useDegree }: { store: JoggingStore, useDegree: boolean }) => {
-  const { t } = useTranslation()
-  const componentId = useId()
-  const joggingOptions: React.ReactElement[] = []
+export const JoggingOptions = observer(
+  ({ store, useDegree }: { store: JoggingStore; useDegree: boolean }) => {
+    const { t } = useTranslation()
+    const componentId = useId()
+    const joggingOptions: React.ReactElement[] = []
 
-  function translateOrientation(orientation: OrientationId): string {
-    switch (orientation) {
-      case "coordsys":
-        return t("Jogging.Orientation.coordsys")
-      case "tool":
-        return t("Jogging.Orientation.tool")
-      default:
-        return orientation
+    function translateOrientation(orientation: OrientationId): string {
+      switch (orientation) {
+        case "coordsys":
+          return t("Jogging.Orientation.coordsys")
+        case "tool":
+          return t("Jogging.Orientation.tool")
+        default:
+          return orientation
+      }
     }
-  }
 
-  if (store.showCoordSystemSelect) {
-    joggingOptions.push(
-      <AdornedSelect
-        key="coord"
-        labelId={`jogging-coord-select-${componentId}`}
-        labelValue={t("Jogging.CoordinateSystem.hlb")}
-        value={store.selectedCoordSystemId}
-        size="small"
-        variant="filled"
-        displayEmpty={true}
-        onChange={(event) =>
-          store.setSelectedCoordSystemId(event.target.value as string)
-        }
-        disabled={store.isLocked}
-      >
-        {store.coordSystems.map((cs) => (
-          <MenuItem key={cs.coordinate_system} value={cs.coordinate_system}>
-            {cs.name && store.coordSystemCountByName[cs.name] > 1
-              ? `${cs.name} / ${cs.coordinate_system}`
-              : cs.name || cs.coordinate_system}
-          </MenuItem>
-        ))}
-      </AdornedSelect>,
-    )
-  }
+    if (store.showCoordSystemSelect) {
+      joggingOptions.push(
+        <AdornedSelect
+          key="coord"
+          labelId={`jogging-coord-select-${componentId}`}
+          labelValue={t("Jogging.CoordinateSystem.hlb")}
+          value={store.selectedCoordSystemId}
+          size="small"
+          variant="filled"
+          displayEmpty={true}
+          onChange={(event) =>
+            store.setSelectedCoordSystemId(event.target.value as string)
+          }
+          disabled={store.isLocked}
+        >
+          {store.coordSystems.map((cs) => (
+            <MenuItem key={cs.coordinate_system} value={cs.coordinate_system}>
+              {cs.name && store.coordSystemCountByName[cs.name] > 1
+                ? `${cs.name} / ${cs.coordinate_system}`
+                : cs.name || cs.coordinate_system}
+            </MenuItem>
+          ))}
+        </AdornedSelect>,
+      )
+    }
 
-  if (store.showTcpSelect) {
-    joggingOptions.push(
-      <AdornedSelect
-        key="tcp"
-        labelId={`jogging-tcp-select-${componentId}`}
-        labelValue="TCP"
-        value={store.selectedTcpId}
-        size="small"
-        variant="filled"
-        onChange={(event) =>
-          store.setSelectedTcpId(event.target.value as string)
-        }
-        disabled={store.isLocked}
-      >
-        {store.tcps.map((tcp) => (
-          <MenuItem key={tcp.id} value={tcp.id}>
-            {tcp.id}
-          </MenuItem>
-        ))}
-      </AdornedSelect>,
-    )
-  }
+    if (store.showTcpSelect) {
+      joggingOptions.push(
+        <AdornedSelect
+          key="tcp"
+          labelId={`jogging-tcp-select-${componentId}`}
+          labelValue="TCP"
+          value={store.selectedTcpId}
+          size="small"
+          variant="filled"
+          onChange={(event) =>
+            store.setSelectedTcpId(event.target.value as string)
+          }
+          disabled={store.isLocked}
+        >
+          {store.tcps.map((tcp) => (
+            <MenuItem key={tcp.id} value={tcp.id}>
+              {tcp.id}
+            </MenuItem>
+          ))}
+        </AdornedSelect>,
+      )
+    }
 
-  if (store.showOrientationSelect) {
-    joggingOptions.push(
-      <AdornedSelect
-        key="orientation"
-        labelValue={t("Jogging.Cartesian.Orientation.lb")}
-        labelId={`orientation-select-${componentId}`}
-        value={store.selectedOrientation}
-        onChange={(event) =>
-          store.setSelectedOrientation(event.target.value as OrientationId)
-        }
-        disabled={store.isLocked}
-      >
-        {ORIENTATION_IDS.map((orientationId) => (
-          <MenuItem key={orientationId} value={orientationId}>
-            {translateOrientation(orientationId)}
+    if (store.showOrientationSelect) {
+      joggingOptions.push(
+        <AdornedSelect
+          key="orientation"
+          labelValue={t("Jogging.Cartesian.Orientation.lb")}
+          labelId={`orientation-select-${componentId}`}
+          value={store.selectedOrientation}
+          onChange={(event) =>
+            store.setSelectedOrientation(event.target.value as OrientationId)
+          }
+          disabled={store.isLocked}
+        >
+          {ORIENTATION_IDS.map((orientationId) => (
+            <MenuItem key={orientationId} value={orientationId}>
+              {translateOrientation(orientationId)}
+            </MenuItem>
+          ))}
+        </AdornedSelect>,
+      )
+    }
+
+    if (store.showIncrementSelect) {
+      joggingOptions.push(
+        <AdornedSelect
+          key="increment"
+          labelValue={t("Jogging.Increment.hlb")}
+          labelId={`jogging-increment-select-${componentId}`}
+          size="small"
+          variant="filled"
+          value={store.activeDiscreteIncrement?.id || "continuous"}
+          onChange={(event) =>
+            store.setSelectedIncrementId(
+              event.target.value as IncrementOptionId,
+            )
+          }
+          disabled={store.isLocked}
+        >
+          <MenuItem key="continuous" value="continuous">
+            {t("Jogging.Increment.Continuous.dd")}
           </MenuItem>
-        ))}
-      </AdornedSelect>,
-    )
-  }
 
-  if (store.showIncrementSelect) {
-    joggingOptions.push(
-      <AdornedSelect
-        key="increment"
-        labelValue={t("Jogging.Increment.hlb")}
-        labelId={`jogging-increment-select-${componentId}`}
-        size="small"
-        variant="filled"
-        value={store.activeDiscreteIncrement?.id || "continuous"}
-        onChange={(event) =>
-          store.setSelectedIncrementId(event.target.value as IncrementOptionId)
-        }
-        disabled={store.isLocked}
-      >
-        <MenuItem key="continuous" value="continuous">
-          {t("Jogging.Increment.Continuous.dd")}
-        </MenuItem>
+          {store.selectedOrientation === "tool"
+            ? null
+            : store.discreteIncrementOptions.map((inc) => (
+                <MenuItem key={inc.id} value={inc.id}>
+                  {useDegree ? `${inc.degrees}°` : `${inc.mm}mm`}
+                </MenuItem>
+              ))}
+        </AdornedSelect>,
+      )
+    }
 
-        {store.selectedOrientation === "tool"
-          ? null
-          : store.discreteIncrementOptions.map((inc) => (
-              <MenuItem key={inc.id} value={inc.id}>
-                {useDegree
-                  ? `${inc.degrees}°`
-                  : `${inc.mm}mm`}
-              </MenuItem>
-            ))}
-      </AdornedSelect>,
+    return (
+      <Box
+        component="div"
+        data-testid="jogging-options"
+        aria-label="jogging-options"
+        sx={{
+          display: "grid",
+          gap: "16px",
+          gridTemplateColumns: "1fr 1fr",
+          gridAutoRows: "min-content",
+          "& label": { opacity: 0.7, fontSize: "12px", marginBottom: "4px" },
+        }}
+      >
+        {joggingOptions.map((select, idx) => (
+          <Box
+            // biome-ignore lint/suspicious/noArrayIndexKey: pre-biome code
+            key={idx}
+            sx={{
+              gridColumn:
+                joggingOptions.length % 2 === 1 &&
+                idx === joggingOptions.length - 1
+                  ? "span 2"
+                  : "auto",
+            }}
+          >
+            {select}
+          </Box>
+        ))}
+      </Box>
     )
-  }
-
-  return (
-    <Box
-      component="div"
-      data-testid="jogging-options"
-      aria-label="jogging-options"
-      sx={{
-        display: "grid",
-        gap: "16px",
-        gridTemplateColumns: "1fr 1fr",
-        gridAutoRows: "min-content",
-        "& label": { opacity: 0.7, fontSize: "12px", marginBottom: "4px" },
-      }}
-    >
-      {joggingOptions.map((select, idx) => (
-        <Box
-          key={idx}
-          sx={{
-            gridColumn:
-              joggingOptions.length % 2 === 1 &&
-              idx === joggingOptions.length - 1
-                ? "span 2"
-                : "auto",
-          }}
-        >
-          {select}
-        </Box>
-      ))}
-    </Box>
-  )
-})
+  },
+)

package/src/components/jogging/JoggingPanel.test.tsx

@@ -1,30 +1,28 @@
 import { render, screen, within } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { describe, expect, it, vi, beforeEach } from "vitest"
-import { JointTypeEnum } from "@wandelbots/nova-js/v2"
 import type {
   CoordinateSystem,
   MotionGroupDescription,
   MotionGroupState,
   RobotTcp,
-  DHParameter,
 } from "@wandelbots/nova-js/v2"
-import { JoggingStore } from "./JoggingStore"
-import { JoggingJointTab } from "./JoggingJointTab"
-import { JoggingCartesianTab } from "./JoggingCartesianTab"
+import { JointTypeEnum } from "@wandelbots/nova-js/v2"
 import { I18nextProvider } from "react-i18next"
+import { beforeEach, describe, expect, it, vi } from "vitest"
 import { i18n } from "../../i18n/config"
-import { JoggerConnection } from "../../lib/JoggerConnection"
 import type { JoggerConnection as JoggerConnectionType } from "../../lib/JoggerConnection"
+import { JoggerConnection } from "../../lib/JoggerConnection"
 import type { MotionStreamConnection } from "../../lib/MotionStreamConnection"
 import {
-  ur5eMotionGroupState,
-  ur5eDescription,
-  turnMockMotionGroupState,
-  turnMockDescription,
-  linearAxisMotionGroupState,
   linearAxisDescription,
+  linearAxisMotionGroupState,
+  turnMockDescription,
+  turnMockMotionGroupState,
+  ur5eDescription,
+  ur5eMotionGroupState,
 } from "./__fixtures__/motionStreamMockData"
+import { JoggingCartesianTab } from "./JoggingCartesianTab"
+import { JoggingJointTab } from "./JoggingJointTab"
+import { JoggingStore } from "./JoggingStore"
 
 // ---------- helpers ----------
 
@@ -36,8 +34,8 @@ function createMockMotionStream(
   const jointPositions = motionGroupState.joint_position as number[]
 
   return {
-    nova: {} as any,
-    controller: { controller: motionGroupState.controller } as any,
+    nova: {},
+    controller: { controller: motionGroupState.controller },
     motionGroup: {
       ...motionGroupState,
       tcp: tcpOverride,
@@ -48,7 +46,7 @@ function createMockMotionStream(
       addEventListener: vi.fn(),
       changeUrl: vi.fn(),
       close: vi.fn(),
-    } as any,
+    },
     rapidlyChangingMotionState: { ...motionGroupState },
     motionGroupId: motionGroupState.motion_group,
     controllerId: motionGroupState.controller,
@@ -86,7 +84,10 @@ function createJoggingStore(opts: {
   description: MotionGroupDescription
   inverseSolver?: string | null | undefined
 }): JoggingStore {
-  const motionStream = createMockMotionStream(opts.motionGroupState, opts.description)
+  const motionStream = createMockMotionStream(
+    opts.motionGroupState,
+    opts.description,
+  )
   const jogger = createMockJogger(motionStream)
 
   const coordSystems: CoordinateSystem[] = [
@@ -150,7 +151,7 @@ describe("JoggingPanel", () => {
     it("hides Cartesian tab when inverseSolver is null (explicitly no solver)", () => {
       const store = createUr5eStore(null)
       expect(store.tabs).toHaveLength(1)
-      expect(store.tabs[0]!.id).toBe("joint")
+      expect(store.tabs[0]?.id).toBe("joint")
       expect(store.tabs.map((t) => t.id)).not.toContain("cartesian")
     })
 
@@ -183,15 +184,9 @@ describe("JoggingPanel", () => {
     })
 
     it("displays 6 joint controls in the joint tab", () => {
-      renderWithI18n(
-        <JoggingJointTab store={store}>
-          <></>
-        </JoggingJointTab>,
-      )
+      renderWithI18n(<JoggingJointTab store={store}></JoggingJointTab>)
 
-      const wrapper = screen.getByTestId(
-        "jogging-joint-value-controls-wrapper",
-      )
+      const wrapper = screen.getByTestId("jogging-joint-value-controls-wrapper")
       for (let i = 0; i < 6; i++) {
         expect(
           within(wrapper).getByTestId(`jogging-joint-value-control-${i}`),
@@ -200,31 +195,17 @@ describe("JoggingPanel", () => {
     })
 
     it("renders the joint tab", () => {
-      renderWithI18n(
-        <JoggingJointTab store={store}>
-          <></>
-        </JoggingJointTab>,
-      )
+      renderWithI18n(<JoggingJointTab store={store}></JoggingJointTab>)
       expect(screen.getByTestId("jogging-joint-tab")).toBeInTheDocument()
     })
 
     it("renders the cartesian tab with translate/rotate toggle", () => {
-      renderWithI18n(
-        <JoggingCartesianTab store={store}>
-          <></>
-        </JoggingCartesianTab>,
-      )
-      expect(
-        screen.getByTestId("jogging-cartesian-tab"),
-      ).toBeInTheDocument()
+      renderWithI18n(<JoggingCartesianTab store={store}></JoggingCartesianTab>)
+      expect(screen.getByTestId("jogging-cartesian-tab")).toBeInTheDocument()
     })
 
     it("shows X, Y, Z axis controls in cartesian tab", () => {
-      renderWithI18n(
-        <JoggingCartesianTab store={store}>
-          <></>
-        </JoggingCartesianTab>,
-      )
+      renderWithI18n(<JoggingCartesianTab store={store}></JoggingCartesianTab>)
       for (const axis of ["x", "y", "z"]) {
         expect(
           screen.getByTestId(`jogging-cartesian-axis-control-${axis}`),
@@ -256,25 +237,18 @@ describe("JoggingPanel", () => {
 
     it("only shows joint tab (no cartesian) when solver is null", () => {
       expect(store.tabs).toHaveLength(1)
-      expect(store.tabs[0]!.id).toBe("joint")
+      expect(store.tabs[0]?.id).toBe("joint")
     })
 
     it("uses mm/s as velocity unit for prismatic joints", () => {
-      const useDegree =
-        store.jointType === JointTypeEnum.RevoluteJoint
+      const useDegree = store.jointType === JointTypeEnum.RevoluteJoint
       expect(useDegree).toBe(false)
     })
 
     it("renders 1 joint control for single-axis prismatic group", () => {
-      renderWithI18n(
-        <JoggingJointTab store={store}>
-          <></>
-        </JoggingJointTab>,
-      )
+      renderWithI18n(<JoggingJointTab store={store}></JoggingJointTab>)
 
-      const wrapper = screen.getByTestId(
-        "jogging-joint-value-controls-wrapper",
-      )
+      const wrapper = screen.getByTestId("jogging-joint-value-controls-wrapper")
       expect(
         within(wrapper).getByTestId("jogging-joint-value-control-0"),
       ).toBeInTheDocument()
@@ -302,15 +276,9 @@ describe("JoggingPanel", () => {
     })
 
     it("displays exactly 2 joint controls", () => {
-      renderWithI18n(
-        <JoggingJointTab store={store}>
-          <></>
-        </JoggingJointTab>,
-      )
+      renderWithI18n(<JoggingJointTab store={store}></JoggingJointTab>)
 
-      const wrapper = screen.getByTestId(
-        "jogging-joint-value-controls-wrapper",
-      )
+      const wrapper = screen.getByTestId("jogging-joint-value-controls-wrapper")
       expect(
         within(wrapper).getByTestId("jogging-joint-value-control-0"),
       ).toBeInTheDocument()
@@ -398,6 +366,7 @@ describe("JoggingPanel", () => {
 
     it("falls back to first tab when selected tab is invalid", () => {
       const store = createUr5eStore(null)
+      // biome-ignore lint/suspicious/noExplicitAny: intentionally setting invalid tab id to test fallback
       store.selectedTabId = "cartesian" as any
       expect(store.currentTab.id).toBe("joint")
     })
@@ -509,11 +478,7 @@ describe("JoggingPanel", () => {
       })
       store.showJointsLegend = true
 
-      renderWithI18n(
-        <JoggingJointTab store={store}>
-          <></>
-        </JoggingJointTab>,
-      )
+      renderWithI18n(<JoggingJointTab store={store}></JoggingJointTab>)
 
       expect(screen.getByText("G1")).toBeInTheDocument()
       expect(screen.getByText("G2")).toBeInTheDocument()
@@ -526,11 +491,7 @@ describe("JoggingPanel", () => {
       })
       store.showJointsLegend = false
 
-      renderWithI18n(
-        <JoggingJointTab store={store}>
-          <></>
-        </JoggingJointTab>,
-      )
+      renderWithI18n(<JoggingJointTab store={store}></JoggingJointTab>)
 
       expect(screen.queryByText("G1")).not.toBeInTheDocument()
     })
@@ -540,7 +501,10 @@ describe("JoggingPanel", () => {
 
   describe("Dispose", () => {
     it("disposes the jogger connection when store is disposed", () => {
-      const motionStream = createMockMotionStream(ur5eMotionGroupState, ur5eDescription)
+      const motionStream = createMockMotionStream(
+        ur5eMotionGroupState,
+        ur5eDescription,
+      )
       const jogger = createMockJogger(motionStream)
 
       const store = new JoggingStore(
@@ -597,10 +561,18 @@ describe("JoggingPanel", () => {
     it("minVelocityInDisplayUnits and maxVelocityInDisplayUnits return correct bounds", () => {
       const store = createUr5eStore("solver")
 
-      expect(store.minVelocityInDisplayUnits(false)).toBe(store.minTranslationVelocityMmPerSec)
-      expect(store.maxVelocityInDisplayUnits(false)).toBe(store.maxTranslationVelocityMmPerSec)
-      expect(store.minVelocityInDisplayUnits(true)).toBe(store.minRotationVelocityDegPerSec)
-      expect(store.maxVelocityInDisplayUnits(true)).toBe(store.maxRotationVelocityDegPerSec)
+      expect(store.minVelocityInDisplayUnits(false)).toBe(
+        store.minTranslationVelocityMmPerSec,
+      )
+      expect(store.maxVelocityInDisplayUnits(false)).toBe(
+        store.maxTranslationVelocityMmPerSec,
+      )
+      expect(store.minVelocityInDisplayUnits(true)).toBe(
+        store.minRotationVelocityDegPerSec,
+      )
+      expect(store.maxVelocityInDisplayUnits(true)).toBe(
+        store.maxRotationVelocityDegPerSec,
+      )
     })
   })
 
@@ -608,37 +580,58 @@ describe("JoggingPanel", () => {
 
   describe("JoggerConnection TCP resolution", () => {
     it("6-joint revolute defaults to 'Flange' TCP from motionGroup.tcp", () => {
-      const ms = createMockMotionStream(ur5eMotionGroupState, ur5eDescription, "Flange")
+      const ms = createMockMotionStream(
+        ur5eMotionGroupState,
+        ur5eDescription,
+        "Flange",
+      )
       const jogger = new JoggerConnection(ms)
       expect(jogger.tcp).toBe("Flange")
     })
 
     it("1-joint prismatic without motionGroup.tcp gets undefined (NO_TCP)", () => {
-      const ms = createMockMotionStream(linearAxisMotionGroupState, linearAxisDescription)
+      const ms = createMockMotionStream(
+        linearAxisMotionGroupState,
+        linearAxisDescription,
+      )
       const jogger = new JoggerConnection(ms)
       expect(jogger.tcp).toBeUndefined()
     })
 
     it("1-joint prismatic with motionGroup.tcp keeps tcp", () => {
-      const ms = createMockMotionStream(linearAxisMotionGroupState, linearAxisDescription, "PrismaticTCP")
+      const ms = createMockMotionStream(
+        linearAxisMotionGroupState,
+        linearAxisDescription,
+        "PrismaticTCP",
+      )
       const jogger = new JoggerConnection(ms)
       expect(jogger.tcp).toBe("PrismaticTCP")
     })
 
     it("2-joint revolute without motionGroup.tcp gets undefined (NO_TCP)", () => {
-      const ms = createMockMotionStream(turnMockMotionGroupState, turnMockDescription)
+      const ms = createMockMotionStream(
+        turnMockMotionGroupState,
+        turnMockDescription,
+      )
       const jogger = new JoggerConnection(ms)
       expect(jogger.tcp).toBeUndefined()
     })
 
     it("explicit tcp option overrides any default", () => {
-      const ms = createMockMotionStream(linearAxisMotionGroupState, linearAxisDescription)
+      const ms = createMockMotionStream(
+        linearAxisMotionGroupState,
+        linearAxisDescription,
+      )
       const jogger = new JoggerConnection(ms, { tcp: "MyCustomTool" })
       expect(jogger.tcp).toBe("MyCustomTool")
     })
 
     it("6-joint revolute with explicit tcp option uses the provided value", () => {
-      const ms = createMockMotionStream(ur5eMotionGroupState, ur5eDescription, "Flange")
+      const ms = createMockMotionStream(
+        ur5eMotionGroupState,
+        ur5eDescription,
+        "Flange",
+      )
       const jogger = new JoggerConnection(ms, { tcp: "GripperTCP" })
       expect(jogger.tcp).toBe("GripperTCP")
     })
@@ -650,4 +643,3 @@ describe("JoggingPanel", () => {
     })
   })
 })
-

package/src/components/jogging/JoggingPanel.tsx

@@ -1,6 +1,9 @@
 import MoveIcon from "@mui/icons-material/OpenWith"
 import ShareIcon from "@mui/icons-material/Share"
-import { Stack, Tab, Tabs, type SxProps } from "@mui/material"
+import type { SxProps } from "@mui/material/styles"
+import Stack from "@mui/material/Stack"
+import Tab from "@mui/material/Tab"
+import Tabs from "@mui/material/Tabs"
 import { NovaClient } from "@wandelbots/nova-js/v2"
 import { isString } from "lodash-es"
 import { runInAction } from "mobx"
@@ -74,6 +77,7 @@ export const JoggingPanel = externalizeComponent(
       }
     }
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies: pre-biome code
     useEffect(() => {
       init()
       return props.store
@@ -106,10 +110,9 @@ export const JoggingPanel = externalizeComponent(
         }}
       >
         {state.joggingStore ? (
-          <JoggingPanelInner
-            store={state.joggingStore}
-            children={props.children}
-          ></JoggingPanelInner>
+          <JoggingPanelInner store={state.joggingStore}>
+            {props.children}
+          </JoggingPanelInner>
         ) : (
           <LoadingCover message="Loading jogging" error={state.loadingError} />
         )}
@@ -132,16 +135,10 @@ const JoggingPanelInner = observer(
     function renderTabContent() {
       if (store.currentTab.id === "cartesian") {
         return (
-          <>
-            <JoggingCartesianTab store={store}>{children}</JoggingCartesianTab>
-          </>
+          <JoggingCartesianTab store={store}>{children}</JoggingCartesianTab>
         )
       } else if (store.currentTab.id === "joint") {
-        return (
-          <>
-            <JoggingJointTab store={store}>{children}</JoggingJointTab>
-          </>
-        )
+        return <JoggingJointTab store={store}>{children}</JoggingJointTab>
       }
     }