@wandelbots/wandelbots-js-react-components 5.5.1-pr.fix-standardize-output.591.1380385 → 5.5.1

package/src/components/jogging/JoggingPanel.tsx

@@ -0,0 +1,204 @@
+import MoveIcon from "@mui/icons-material/OpenWith"
+import ShareIcon from "@mui/icons-material/Share"
+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"
+import { observer, useLocalObservable } from "mobx-react-lite"
+import { useEffect } from "react"
+import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../../externalizeComponent"
+import { JoggerConnection } from "../../lib/JoggerConnection"
+import { LoadingCover } from "../LoadingCover"
+import { JoggingBlocked } from "./JoggingBlocked"
+import { JoggingCartesianTab } from "./JoggingCartesianTab"
+import { JoggingJointTab } from "./JoggingJointTab"
+import { JoggingStore } from "./JoggingStore"
+
+export type JoggingPanelTabId = "cartesian" | "joint"
+
+export type JoggingPanelProps = {
+  /** Either an existing NovaClient or the base url of a deployed Nova instance */
+  nova: NovaClient | string
+  /** Id of the motion group to move e.g. 0@ur5e */
+  motionGroupId: string
+  /** Callback with the jogging panel's state store for further customization/config */
+  onSetup?: (store: JoggingStore) => void
+  /** Any children will go at the bottom of the panel under the default contents */
+  children?: React.ReactNode
+  /** Set this to true to disable jogging UI temporarily e.g. when a program is executing */
+  locked?: boolean
+  sx?: SxProps
+
+  /**
+   * To preserve state while the jogging panel is hidden, you can create and pass a
+   * JoggingStore here and it will be used instead of creating a new one.
+   */
+  store?: JoggingStore
+}
+
+/**
+ * A high-level, opinionated UI panel for jogging a robot using the Wandelbots Platform API
+ */
+export const JoggingPanel = externalizeComponent(
+  observer((props: JoggingPanelProps) => {
+    const nova = isString(props.nova)
+      ? new NovaClient({ instanceUrl: props.nova })
+      : props.nova
+
+    const state = useLocalObservable(() => ({
+      joggingStore: null as JoggingStore | null,
+      loadingError: null as unknown | null,
+    }))
+
+    async function init() {
+      runInAction(() => {
+        state.loadingError = null
+        state.joggingStore = null
+      })
+
+      try {
+        let joggingStore = props.store
+        if (!joggingStore) {
+          const jogger = await JoggerConnection.open(nova, props.motionGroupId)
+          joggingStore = await JoggingStore.loadFor(jogger)
+        }
+        runInAction(() => {
+          state.joggingStore = joggingStore
+        })
+        if (props.onSetup) {
+          props.onSetup(joggingStore)
+        }
+      } catch (err) {
+        state.loadingError = err
+      }
+    }
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: pre-biome code
+    useEffect(() => {
+      init()
+      return props.store
+        ? () => null
+        : () => {
+            state.joggingStore?.dispose()
+          }
+    }, [props.store, props.nova, props.motionGroupId])
+
+    useEffect(() => {
+      const store = state.joggingStore
+      if (!store) return
+
+      if (props.locked) {
+        store.lock("external")
+      } else {
+        store.unlock("external")
+      }
+    }, [state.joggingStore, props.locked])
+
+    return (
+      <Stack
+        data-testid="jogging-panel"
+        aria-label="jogging-panel"
+        sx={{
+          maxWidth: "460px",
+          minWidth: "320px",
+          position: "relative",
+          ...props.sx,
+        }}
+      >
+        {state.joggingStore ? (
+          <JoggingPanelInner store={state.joggingStore}>
+            {props.children}
+          </JoggingPanelInner>
+        ) : (
+          <LoadingCover message="Loading jogging" error={state.loadingError} />
+        )}
+      </Stack>
+    )
+  }),
+)
+
+const JoggingPanelInner = observer(
+  ({
+    store,
+    children,
+  }: {
+    store: JoggingStore
+    children?: React.ReactNode
+    childrenJoint?: React.ReactNode
+  }) => {
+    const { t } = useTranslation()
+
+    function renderTabContent() {
+      if (store.currentTab.id === "cartesian") {
+        return (
+          <JoggingCartesianTab store={store}>{children}</JoggingCartesianTab>
+        )
+      } else if (store.currentTab.id === "joint") {
+        return <JoggingJointTab store={store}>{children}</JoggingJointTab>
+      }
+    }
+
+    return (
+      <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"
+        >
+          {store.tabs.map((tab) => {
+            const label =
+              tab.label === "Cartesian"
+                ? t("Jogging.Cartesian.bt")
+                : t("Jogging.Joints.bt")
+
+            const icon =
+              tab.label === "cartesian" ? (
+                <MoveIcon fontSize="small" sx={{ mr: 1 }} />
+              ) : (
+                <ShareIcon fontSize="small" sx={{ mr: 1 }} />
+              )
+
+            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">
+                      {icon}
+                      {label}
+                    </Stack>
+                  ) : (
+                    label
+                  )
+                }
+                id={`jogging-tab-${tab.id}`}
+                aria-controls={`jogging-tab-${tab.id}`}
+              />
+            )
+          })}
+        </Tabs>
+        {/* Current tab content */}
+        <Stack
+          flexGrow={1}
+          position="relative"
+          sx={{ overflowY: "auto", overflowX: "hidden" }}
+        >
+          {renderTabContent()}
+        </Stack>
+        {/* Overlay when jogging connection is blocked */}
+        {store.blocked && <JoggingBlocked store={store} />}
+      </Stack>
+    )
+  },
+)
+
+export default JoggingPanel

package/src/components/jogging/JoggingStore.ts

@@ -0,0 +1,485 @@
+import { tryParseJson } from "@wandelbots/nova-js"
+import {
+  JointTypeEnum,
+  type CoordinateSystem,
+  type KinematicModel,
+  type MotionGroupDescription,
+  type RobotTcp,
+} from "@wandelbots/nova-js/v2"
+import { countBy } from "lodash-es"
+import keyBy from "lodash-es/keyBy.js"
+import uniqueId from "lodash-es/uniqueId.js"
+import { autorun, makeAutoObservable, type IReactionDisposer } from "mobx"
+import type {
+  JoggerConnection,
+  JoggerOrientation,
+  Vector3Simple,
+} from "../../lib/JoggerConnection"
+
+const discreteIncrementOptions = [
+  { id: "0.1", mm: 0.1, degrees: 0.05 },
+  { id: "1", mm: 1, degrees: 0.5 },
+  { id: "5", mm: 5, degrees: 2.5 },
+  { id: "10", mm: 10, degrees: 5 },
+]
+
+const incrementOptions = [
+  { id: "continuous" },
+  ...discreteIncrementOptions,
+] as const
+
+export type JoggingAxis = "x" | "y" | "z"
+export type JoggingDirection = "+" | "-"
+export type DiscreteIncrementOption = (typeof discreteIncrementOptions)[number]
+export type IncrementOption = (typeof incrementOptions)[number]
+export type IncrementOptionId = IncrementOption["id"]
+
+export const ORIENTATION_IDS = ["coordsys", "tool"]
+export type OrientationId = (typeof ORIENTATION_IDS)[number]
+
+export type IncrementJogInProgress = {
+  direction: JoggingDirection
+  axis: JoggingAxis
+}
+
+type TabType = "cartesian" | "joint" | "debug"
+export type CartesianMotionType = "translate" | "rotate"
+
+export class JoggingStore {
+  selectedTabId: TabType = "cartesian"
+
+  /** Locks to prevent UI interactions during certain operations */
+  locks = new Set<string>()
+
+  /** Block jogging UI interactions when connection is taken by another jogger */
+  blocked: boolean = false
+
+  /**
+   * Id of selected coordinate system from among those defined on the API side
+   */
+  selectedCoordSystemId: string = "world"
+
+  /** Id of selected tool center point from among the options available on the robot */
+  selectedTcpId: string = ""
+
+  /**
+   * Whether the user is jogging in the coordinate system or tool orientation.
+   * When in tool orientation, the robot moves in a direction relative to the
+   * attached tool rotation.
+   */
+  selectedOrientation: OrientationId = "coordsys"
+
+  /**
+   * Id of selected increment amount for jogging. Options are defined by robot pad.
+   * When non-continuous, jogging moves the robot by a fixed number of mm or degrees
+   * each time the button is pressed, for extra precision
+   */
+  selectedIncrementId: IncrementOptionId = "continuous"
+
+  /**
+   * When on the cartesian tab, jogging can be either translating or rotating
+   * around the TCP.
+   */
+  selectedCartesianMotionType: CartesianMotionType = "translate"
+
+  /**
+   * If the jogger is busy running an incremental jog, this will be set
+   * with the information about the motion
+   */
+  incrementJogInProgress: IncrementJogInProgress | null = null
+
+  /** How fast the robot goes when doing cartesian translate jogging in mm/s */
+  translationVelocityMmPerSec: number = 10
+  /** How fast the robot goes when doing cartesian or joint rotation jogging in °/s */
+  rotationVelocityDegPerSec: number = 1
+
+  /** Minimum translation velocity user can choose on the velocity slider in °/s */
+  minTranslationVelocityMmPerSec: number = 5
+  /** Maximum translation velocity user can choose on the velocity slider in °/s */
+  maxTranslationVelocityMmPerSec: number = 250
+
+  /** Minimum rotation velocity user can choose on the velocity slider in °/s */
+  minRotationVelocityDegPerSec: number = 1
+  /** Maximum rotation velocity user can choose on the velocity slider in °/s */
+  maxRotationVelocityDegPerSec: number = 60
+
+  /** Whether to show the coordinate system select dropdown in the UI */
+  showCoordSystemSelect: boolean = false
+
+  /** Whether to show the TCP select dropdown in the UI */
+  showTcpSelect: boolean = true
+
+  /** Whether to show the orientation select dropdown in the UI */
+  showOrientationSelect: boolean = true
+
+  /** Whether to show the increment select dropdown in the UI */
+  showIncrementSelect: boolean = true
+
+  /** Whether to show icons in the jogging tabs */
+  showTabIcons: boolean = false
+
+  /** Whether to show the label to the right of the velocity slider */
+  showVelocitySliderLabel: boolean = true
+
+  /** Whether to show the legend before the slider */
+  showVelocityLegend: boolean = false
+
+  /** Whether to show the legend before the joints */
+  showJointsLegend: boolean = false
+
+  disposers: IReactionDisposer[] = []
+
+  /**
+   * 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
+   */
+  static async loadFor(jogger: JoggerConnection) {
+    const { nova } = jogger
+
+    // Find out what TCPs this motion group has (we need it for jogging)
+    const [coordinatesystems, description] = await Promise.all([
+      // Fetch coord systems so user can select between them
+      nova.api.controller.listCoordinateSystems(
+        jogger.motionStream.controllerId,
+        "ROTATION_VECTOR",
+      ),
+
+      // Same for TCPs and other info from description
+      nova.api.motionGroup.getMotionGroupDescription(
+        jogger.motionStream.controllerId,
+        jogger.motionGroupId,
+      ),
+    ])
+
+    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,
+      position: tcp.pose.position as Vector3Simple,
+      orientation: tcp.pose.orientation as Vector3Simple,
+    }))
+
+    return new JoggingStore(
+      jogger,
+      coordinatesystems || [],
+      description,
+      tcps,
+      kinematicModel.inverse_solver,
+    )
+  }
+
+  constructor(
+    readonly jogger: JoggerConnection,
+    readonly coordSystems: CoordinateSystem[],
+    readonly motionGroupDescription: MotionGroupDescription,
+    readonly tcps: RobotTcp[],
+    readonly inverseSolverValue: string | null | undefined,
+  ) {
+    // TODO workaround for default coord system on backend having a canonical id
+    // of empty string. Can remove when fixed on API side
+    for (const cs of coordSystems) {
+      if (cs.coordinate_system === "") {
+        cs.coordinate_system = "world"
+        break
+      }
+    }
+    this.selectedCoordSystemId = coordSystems[0]?.coordinate_system || "world"
+    this.selectedTcpId = tcps[0]?.id || ""
+    this.inverseSolver = inverseSolverValue
+    this.jointType =
+      motionGroupDescription?.dh_parameters?.[0]?.type ??
+      JointTypeEnum.RevoluteJoint
+
+    // Make all properties observable and actions auto-bound
+    makeAutoObservable(this, {}, { autoBind: true })
+
+    // Register blocked watching
+    this.jogger.onBlocked = () => {
+      this.block()
+    }
+
+    // Load user settings from local storage if available
+    this.loadFromLocalStorage()
+
+    // Automatically save user settings to local storage when save changes
+    this.disposers.push(autorun(() => this.saveToLocalStorage()))
+
+    // Assign joggingStore to window
+    // biome-ignore lint/suspicious/noExplicitAny: pre-biome code
+    ;(window as any).joggingStore = this
+  }
+
+  dispose() {
+    for (const dispose of this.disposers) {
+      dispose()
+    }
+    this.jogger.dispose()
+  }
+
+  get coordSystemCountByName() {
+    return countBy(this.coordSystems, (cs) => cs.name)
+  }
+
+  async deactivate() {
+    if (this.jogger.mode === "jogging") {
+      return this.jogger.stop()
+    }
+  }
+
+  /** Activate the jogger with current settings */
+  async activate() {
+    if (this.currentTab.id === "cartesian") {
+      if (
+        this.jogger.tcp !== this.selectedTcpId ||
+        this.jogger.orientation !== this.selectedOrientation
+      ) {
+        this.jogger.setOptions({
+          tcp: this.selectedTcpId,
+          orientation: this.selectedOrientation as JoggerOrientation,
+        })
+      }
+
+      if (this.activeDiscreteIncrement) {
+        this.jogger.setJoggingMode("trajectory")
+      } else {
+        this.jogger.setJoggingMode("jogging")
+      }
+    } else {
+      this.jogger.setJoggingMode("jogging")
+    }
+
+    return this.jogger
+  }
+
+  loadFromLocalStorage() {
+    const save = tryParseJson(localStorage.getItem("joggingToolStore"))
+    if (!save) return
+
+    if (this.tabsById[save.selectedTabId]) {
+      this.selectedTabId = save.selectedTabId
+    }
+
+    if (this.coordSystemsById[save.selectedCoordSystemId]) {
+      this.selectedCoordSystemId = save.selectedCoordSystemId
+    }
+
+    if (this.tcpsById[save.selectedTcpId]) {
+      this.selectedTcpId = save.selectedTcpId
+    }
+
+    if (this.incrementOptionsById[save.selectedIncrementId]) {
+      this.selectedIncrementId = save.selectedIncrementId
+    }
+
+    if (["translate", "rotate"].includes(save.selectedCartesianMotionType)) {
+      this.selectedCartesianMotionType = save.selectedCartesianMotionType
+    }
+
+    if (["coordsys", "tool"].includes(save.selectedOrientation)) {
+      this.selectedOrientation = save.selectedOrientation
+    }
+  }
+
+  saveToLocalStorage() {
+    localStorage.setItem(
+      "joggingToolStore",
+      JSON.stringify(this.localStorageSave),
+    )
+  }
+
+  get isLocked() {
+    return this.locks.size > 0
+  }
+
+  get localStorageSave() {
+    return {
+      selectedTabId: this.selectedTabId,
+      selectedCoordSystemId: this.selectedCoordSystemId,
+      selectedTcpId: this.selectedTcpId,
+      selectedOrientation: this.selectedOrientation,
+      selectedIncrementId: this.selectedIncrementId,
+      selectedCartesianMotionType: this.selectedCartesianMotionType,
+    }
+  }
+
+  get tabs() {
+    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 cartesian tab when the solver is null this means, it cannot get jogged cartesian
+    if (this.inverseSolver !== null) {
+      tempTabs.unshift({
+        id: "cartesian",
+        label: "Cartesian",
+      })
+    }
+
+    return tempTabs
+  }
+
+  get incrementOptions() {
+    return incrementOptions
+  }
+
+  get discreteIncrementOptions() {
+    return discreteIncrementOptions
+  }
+
+  get incrementOptionsById() {
+    return keyBy(this.incrementOptions, (o) => o.id)
+  }
+
+  get tabsById() {
+    return keyBy(this.tabs, (t) => t.id)
+  }
+
+  get currentTab() {
+    // biome-ignore lint/style/noNonNullAssertion: pre-biome code
+    return this.tabsById[this.selectedTabId] || this.tabs[0]!
+  }
+
+  get tabIndex() {
+    return this.tabs.indexOf(this.currentTab)
+  }
+
+  get coordSystemsById() {
+    return keyBy(this.coordSystems, (cs) => cs.coordinate_system)
+  }
+
+  /**
+   * The id of the coordinate system to use for jogging.
+   * If in tool orientation, this is set to "tool", not the
+   * selected coordinate system.
+   */
+  get activeCoordSystemId() {
+    return this.selectedOrientation === "tool"
+      ? "tool"
+      : this.selectedCoordSystemId
+  }
+
+  get tcpsById() {
+    return keyBy(this.tcps, (tcp) => tcp.id)
+  }
+
+  get activeDiscreteIncrement() {
+    return this.selectedOrientation === "tool"
+      ? undefined
+      : discreteIncrementOptions.find((d) => d.id === this.selectedIncrementId)
+  }
+
+  /** The selected rotation velocity converted to radians per second */
+  get rotationVelocityRadsPerSec() {
+    return (this.rotationVelocityDegPerSec * Math.PI) / 180
+  }
+
+  /** Selected velocity in mm/sec or deg/sec */
+  velocityInDisplayUnits(useDegree: boolean) {
+    return useDegree
+      ? this.rotationVelocityDegPerSec
+      : this.translationVelocityMmPerSec
+  }
+
+  /** Minimum selectable velocity in mm/sec or deg/sec */
+  minVelocityInDisplayUnits(useDegree: boolean) {
+    return useDegree
+      ? this.minRotationVelocityDegPerSec
+      : this.minTranslationVelocityMmPerSec
+  }
+
+  /** Maximum selectable velocity in mm/sec or deg/sec */
+  maxVelocityInDisplayUnits(useDegree: boolean) {
+    return useDegree
+      ? this.maxRotationVelocityDegPerSec
+      : this.maxTranslationVelocityMmPerSec
+  }
+
+  onTabChange(_event: React.SyntheticEvent, newValue: number) {
+    // biome-ignore lint/style/noNonNullAssertion: pre-biome code
+    const tab = this.tabs[newValue] || this.tabs[0]!
+    this.selectedTabId = tab.id
+  }
+
+  setSelectedCoordSystemId(id: string) {
+    this.selectedCoordSystemId = id
+  }
+
+  setSelectedTcpId(id: string) {
+    this.selectedTcpId = id
+  }
+
+  setSelectedOrientation(orientation: OrientationId) {
+    this.selectedOrientation = orientation
+  }
+
+  setSelectedIncrementId(id: IncrementOptionId) {
+    this.selectedIncrementId = id
+  }
+
+  setCurrentIncrementJog(incrementJog: IncrementJogInProgress | null) {
+    this.incrementJogInProgress = incrementJog
+  }
+
+  setVelocityFromSlider(velocity: number, useDegree: boolean) {
+    if (useDegree) {
+      this.rotationVelocityDegPerSec = velocity
+    } else {
+      this.translationVelocityMmPerSec = velocity
+    }
+  }
+
+  setSelectedCartesianMotionType(type: CartesianMotionType) {
+    this.selectedCartesianMotionType = type
+  }
+
+  lock(id: string) {
+    this.locks.add(id)
+  }
+
+  unlock(id: string) {
+    this.locks.delete(id)
+  }
+
+  block() {
+    this.blocked = true
+  }
+
+  unblock() {
+    this.blocked = false
+    if (this.jogger.mode === "jogging") {
+      this.jogger.initializeJoggingWebsocket()
+    }
+  }
+
+  /** Lock the UI until the given async callback resolves */
+  async withMotionLock(fn: () => Promise<void>) {
+    const lockId = uniqueId()
+    this.lock(lockId)
+
+    try {
+      return await fn()
+    } finally {
+      this.unlock(lockId)
+    }
+  }
+}
+
+export default JoggingStore

package/src/components/jogging/JoggingToggleButtonGroup.tsx

@@ -0,0 +1,25 @@
+import type { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup"
+import { styled } from "@mui/material/styles"
+import ToggleButtonGroup from "@mui/material/ToggleButtonGroup"
+export const JoggingToggleButtonGroup: React.ComponentType<ToggleButtonGroupProps> =
+  styled(ToggleButtonGroup)(({ theme }) => ({
+    "&.MuiToggleButtonGroup-root": {
+      background: theme.palette.backgroundPaperElevation?.[8],
+      borderRadius: "8px",
+      padding: "4px",
+      gap: "4px",
+      button: {
+        border: "none",
+        borderRadius: "4px",
+        flex: "1 1 0px",
+        minWidth: 0,
+        "&.MuiToggleButtonGroup-firstButton": {
+          borderRadius: "8px 4px 4px 8px",
+        },
+
+        "&.MuiToggleButtonGroup-lastButton": {
+          borderRadius: "4px 8px 8px 4px",
+        },
+      },
+    },
+  }))