@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2-pr.fix-performance-issues.594.c24b644

package/src/components/jogging/JoggingPanel.tsx

@@ -1,204 +0,0 @@
-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

@@ -1,485 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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",
-        },
-      },
-    },
-  }))