@wandelbots/wandelbots-js-react-components 1.11.1 → 1.11.3

package/src/components/jogging/JoggingJointRotationControl.tsx

@@ -7,6 +7,7 @@ import { useAnimationFrame } from "../utils/hooks"
 import { useState } from "react"
 import throttle from "lodash-es/throttle"
 import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../../externalizeComponent"
 
 type JoggingJointRotationControlProps = {
   startJogging: (direction: "-" | "+") => void
@@ -18,195 +19,199 @@ type JoggingJointRotationControlProps = {
   disabled?: boolean
 } & React.ComponentProps<typeof Stack>
 
-export const JoggingJointRotationControl = observer(
-  ({
-    startJogging,
-    stopJogging,
-    lowerLimitDegs,
-    upperLimitDegs,
-    getValueDegs,
-    disabled,
-    ...rest
-  }: JoggingJointRotationControlProps) => {
-    const { t } = useTranslation()
-    const [currentValue, setCurrentValue] = useState<number | undefined>()
-
-    const state = useLocalObservable(() => ({
-      activeJoggingDir: null as "-" | "+" | null,
-
-      startJogging(dir: "-" | "+") {
-        this.activeJoggingDir = dir
-        startJogging(dir)
-      },
-
-      stopJogging() {
-        this.activeJoggingDir = null
-        stopJogging()
-      },
-    }))
-
-    const updateValue = throttle(() => {
-      setCurrentValue(getValueDegs())
-    }, 50)
-
-    useAnimationFrame(updateValue)
-
-    function onPointerDownMinus(ev: React.PointerEvent) {
-      // Stop right click from triggering jog
-      if (ev.button === 0) state.startJogging("-")
-    }
-
-    function onPointerDownPlus(ev: React.PointerEvent) {
-      if (ev.button === 0) state.startJogging("+")
-    }
-
-    function onPointerUp(ev: React.PointerEvent) {
-      state.stopJogging()
-    }
-
-    function onPointerOut(ev: React.PointerEvent) {
-      // Prevent subelements of button from stopping jogging
-      if (ev.target !== ev.currentTarget) return
-
-      state.stopJogging()
-    }
-
-    function formatDegrees(value: number | undefined, precision = 1) {
-      if (value === undefined || isNaN(value)) return ""
-
-      const output = t("General.degree.variable", {
-        amount: value.toFixed(precision),
-      })
-
-      if (value > 0 && precision === 0) {
-        return `+${output}`
-      } else {
-        return output
+export const JoggingJointRotationControl = externalizeComponent(
+  observer(
+    ({
+      startJogging,
+      stopJogging,
+      lowerLimitDegs,
+      upperLimitDegs,
+      getValueDegs,
+      disabled,
+      ...rest
+    }: JoggingJointRotationControlProps) => {
+      const { t } = useTranslation()
+      const [currentValue, setCurrentValue] = useState<number | undefined>()
+
+      const state = useLocalObservable(() => ({
+        activeJoggingDir: null as "-" | "+" | null,
+
+        startJogging(dir: "-" | "+") {
+          this.activeJoggingDir = dir
+          startJogging(dir)
+        },
+
+        stopJogging() {
+          this.activeJoggingDir = null
+          stopJogging()
+        },
+      }))
+
+      const updateValue = throttle(() => {
+        setCurrentValue(getValueDegs())
+      }, 50)
+
+      useAnimationFrame(updateValue)
+
+      function onPointerDownMinus(ev: React.PointerEvent) {
+        // Stop right click from triggering jog
+        if (ev.button === 0) state.startJogging("-")
       }
-    }
-
-    return (
-      <Stack
-        height="64px"
-        width="100%"
-        maxWidth="300px"
-        direction="row"
-        {...rest}
-        sx={{
-          "& .MuiIconButton-root": {
-            width: "52px",
-            color: "white",
-            alignContent: "center",
-            backgroundColor: "#38445A",
-            "&:disabled": {
-              opacity: 0.5,
-              backgroundColor: "#38445A",
-            },
-            "& svg": {
-              width: "42px",
-              height: "42px",
-            },
-          },
-        }}
-      >
-        <IconButton
-          onPointerDown={onPointerDownMinus}
-          onPointerUp={onPointerUp}
-          onPointerOut={onPointerOut}
-          disabled={disabled}
-          sx={{
-            borderRadius: "16px 0px 0px 16px",
-            backgroundColor:
-              state.activeJoggingDir === "-" ? "#495975" : undefined,
-          }}
-        >
-          <ChevronLeft />
-        </IconButton>
 
+      function onPointerDownPlus(ev: React.PointerEvent) {
+        if (ev.button === 0) state.startJogging("+")
+      }
+
+      function onPointerUp(ev: React.PointerEvent) {
+        state.stopJogging()
+      }
+
+      function onPointerOut(ev: React.PointerEvent) {
+        // Prevent subelements of button from stopping jogging
+        if (ev.target !== ev.currentTarget) return
+
+        state.stopJogging()
+      }
+
+      function formatDegrees(value: number | undefined, precision = 1) {
+        if (value === undefined || isNaN(value)) return ""
+
+        const output = t("General.degree.variable", {
+          amount: value.toFixed(precision),
+        })
+
+        if (value > 0 && precision === 0) {
+          return `+${output}`
+        } else {
+          return output
+        }
+      }
+
+      return (
         <Stack
-          flexGrow={1}
-          alignItems="center"
-          justifyContent="center"
+          height="64px"
+          width="100%"
+          maxWidth="300px"
+          direction="row"
+          {...rest}
           sx={{
-            borderStyle: "solid",
-            borderLeftWidth: 0,
-            borderRightWidth: 0,
-            borderTopWidth: "4px",
-            borderBottomWidth: "4px",
-            backgroundColor: "#38445A",
-            borderColor: "#38445A",
-            paddingLeft: "20px",
-            paddingRight: "20px",
-            zIndex: 1,
+            "& .MuiIconButton-root": {
+              width: "52px",
+              color: "white",
+              alignContent: "center",
+              backgroundColor: "#38445A",
+              "&:disabled": {
+                opacity: 0.5,
+                backgroundColor: "#38445A",
+              },
+              "& svg": {
+                width: "42px",
+                height: "42px",
+              },
+            },
           }}
         >
-          <Typography
+          <IconButton
+            onPointerDown={onPointerDownMinus}
+            onPointerUp={onPointerUp}
+            onPointerOut={onPointerOut}
+            disabled={disabled}
             sx={{
-              fontSize: "15px",
-              position: "relative",
-              top: "5px",
-              color: "white",
+              borderRadius: "16px 0px 0px 16px",
+              backgroundColor:
+                state.activeJoggingDir === "-" ? "#495975" : undefined,
             }}
           >
-            {formatDegrees(currentValue)}
-          </Typography>
-
-          <Slider
-            disabled
-            aria-label="Joint position"
-            min={lowerLimitDegs}
-            max={upperLimitDegs}
-            value={currentValue || 0}
-            track={false}
+            <ChevronLeft />
+          </IconButton>
+
+          <Stack
+            flexGrow={1}
+            alignItems="center"
+            justifyContent="center"
             sx={{
-              "& .MuiSlider-mark": {
-                display: "none",
-              },
-              "& .MuiSlider-thumb": {
-                width: "5px",
-                height: "10px",
-                borderRadius: "2px",
-              },
-              "& .MuiSlider-markLabel": {
-                top: "20px",
-                fontSize: "12px",
-                color: "white",
-              },
-              "& .MuiSlider-rail": {
-                backgroundColor: "#1F283A",
-                opacity: 1,
-              },
+              borderStyle: "solid",
+              borderLeftWidth: 0,
+              borderRightWidth: 0,
+              borderTopWidth: "4px",
+              borderBottomWidth: "4px",
+              backgroundColor: "#38445A",
+              borderColor: "#38445A",
+              paddingLeft: "20px",
+              paddingRight: "20px",
+              zIndex: 1,
             }}
-            marks={
-              lowerLimitDegs !== undefined &&
-              upperLimitDegs !== undefined && [
-                {
-                  value: lowerLimitDegs,
-                  label: formatDegrees(lowerLimitDegs, 0),
+          >
+            <Typography
+              sx={{
+                fontSize: "15px",
+                position: "relative",
+                top: "5px",
+                color: "white",
+              }}
+            >
+              {formatDegrees(currentValue)}
+            </Typography>
+
+            <Slider
+              disabled
+              aria-label="Joint position"
+              min={lowerLimitDegs}
+              max={upperLimitDegs}
+              value={currentValue || 0}
+              track={false}
+              sx={{
+                "& .MuiSlider-mark": {
+                  display: "none",
+                },
+                "& .MuiSlider-thumb": {
+                  width: "5px",
+                  height: "10px",
+                  borderRadius: "2px",
+                },
+                "& .MuiSlider-markLabel": {
+                  top: "20px",
+                  fontSize: "12px",
+                  color: "white",
                 },
-                {
-                  value: upperLimitDegs,
-                  label: formatDegrees(upperLimitDegs, 0),
+                "& .MuiSlider-rail": {
+                  backgroundColor: "#1F283A",
+                  opacity: 1,
                 },
-              ]
-            }
-          />
+              }}
+              marks={
+                lowerLimitDegs !== undefined &&
+                upperLimitDegs !== undefined && [
+                  {
+                    value: lowerLimitDegs,
+                    label: formatDegrees(lowerLimitDegs, 0),
+                  },
+                  {
+                    value: upperLimitDegs,
+                    label: formatDegrees(upperLimitDegs, 0),
+                  },
+                ]
+              }
+            />
+          </Stack>
+
+          <IconButton
+            onPointerDown={onPointerDownPlus}
+            onPointerUp={onPointerUp}
+            onPointerOut={onPointerOut}
+            disabled={disabled}
+            sx={{
+              borderRadius: "0px 16px 16px 0px",
+              backgroundColor:
+                state.activeJoggingDir === "+"
+                  ? "#495975 !important"
+                  : "#38445A",
+            }}
+          >
+            <ChevronRight />
+          </IconButton>
         </Stack>
-
-        <IconButton
-          onPointerDown={onPointerDownPlus}
-          onPointerUp={onPointerUp}
-          onPointerOut={onPointerOut}
-          disabled={disabled}
-          sx={{
-            borderRadius: "0px 16px 16px 0px",
-            backgroundColor:
-              state.activeJoggingDir === "+" ? "#495975 !important" : "#38445A",
-          }}
-        >
-          <ChevronRight />
-        </IconButton>
-      </Stack>
-    )
-  },
+      )
+    },
+  ),
 )

package/src/components/jogging/JoggingPanel.tsx

@@ -6,122 +6,138 @@ import { JoggingJointTab } from "./JoggingJointTab"
 import { JoggingStore } from "./JoggingStore"
 import { LoadingCover } from "../LoadingCover"
 import { runInAction } from "mobx"
-import type { NovaClient } from "@wandelbots/wandelbots-js"
+import { NovaClient } from "@wandelbots/wandelbots-js"
+import { externalizeComponent } from "../../externalizeComponent"
 
 export type JoggingPanelProps = {
-  /** Connection to a Nova instance to use for jogging */
-  nova: NovaClient
-  /** Id of the motion group to move e.g. 0@ur5e **/
+  /** 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 components */
+  /** Any children will go at the bottom of the panel under the default contents */
   children?: React.ReactNode
 }
 
-export const JoggingPanel = observer((props: JoggingPanelProps) => {
-  const { nova } = props
+/**
+ * A high-level, opinionated UI panel for jogging a robot using the Wandelbots Platform API
+ */
+export const JoggingPanel = externalizeComponent(
+  observer((props: JoggingPanelProps) => {
+    const nova =
+      props.nova instanceof NovaClient
+        ? props.nova
+        : new NovaClient({ instanceUrl: props.nova })
 
-  const state = useLocalObservable(() => ({
-    joggingStore: null as JoggingStore | null,
-    loadingError: null as unknown | null,
-  }))
+    const state = useLocalObservable(() => ({
+      joggingStore: null as JoggingStore | null,
+      loadingError: null as unknown | null,
+    }))
 
-  async function init() {
-    try {
-      const jogger = await nova.connectJogger(props.motionGroupId)
-      const joggingStore = await JoggingStore.loadFor(jogger)
+    async function init() {
       runInAction(() => {
-        state.joggingStore = joggingStore
+        state.loadingError = null
+        state.joggingStore = null
       })
-      if (props.onSetup) {
-        props.onSetup(joggingStore)
+
+      try {
+        const jogger = await nova.connectJogger(props.motionGroupId)
+        const joggingStore = await JoggingStore.loadFor(jogger)
+        runInAction(() => {
+          state.joggingStore = joggingStore
+        })
+        if (props.onSetup) {
+          props.onSetup(joggingStore)
+        }
+      } catch (err) {
+        state.loadingError = err
       }
-    } catch (err) {
-      state.loadingError = err
     }
-  }
 
-  useEffect(() => {
-    init()
-    return () => {
-      state.joggingStore?.dispose()
-    }
-  }, [])
+    useEffect(() => {
+      init()
+      return () => {
+        state.joggingStore?.dispose()
+      }
+    }, [props.nova])
 
-  // Set correct jogging mode on jogger based on user selections
-  useEffect(() => {
-    if (!state.joggingStore) return
+    // Set correct jogging mode on jogger based on user selections
+    useEffect(() => {
+      if (!state.joggingStore) return
 
-    const {
-      currentTab,
-      selectedTcpId,
-      activeCoordSystemId,
-      selectedDiscreteIncrement,
-    } = state.joggingStore
+      const {
+        currentTab,
+        selectedTcpId,
+        activeCoordSystemId,
+        selectedDiscreteIncrement,
+      } = state.joggingStore
 
-    if (currentTab.id !== "cartesian" && currentTab.id !== "joint") return
+      if (currentTab.id !== "cartesian" && currentTab.id !== "joint") return
 
-    const cartesianJoggingOpts = {
-      tcpId: selectedTcpId,
-      coordSystemId: activeCoordSystemId,
-    }
+      const cartesianJoggingOpts = {
+        tcpId: selectedTcpId,
+        coordSystemId: activeCoordSystemId,
+      }
 
-    if (selectedDiscreteIncrement && currentTab.id === "cartesian") {
-      state.joggingStore.jogger.setJoggingMode(
-        "increment",
-        cartesianJoggingOpts,
-      )
-    } else {
-      state.joggingStore.jogger.setJoggingMode(
-        currentTab.id,
-        cartesianJoggingOpts,
+      if (selectedDiscreteIncrement && currentTab.id === "cartesian") {
+        state.joggingStore.jogger.setJoggingMode(
+          "increment",
+          cartesianJoggingOpts,
+        )
+      } else {
+        state.joggingStore.jogger.setJoggingMode(
+          currentTab.id,
+          cartesianJoggingOpts,
+        )
+      }
+    }, [
+      state.joggingStore?.currentTab,
+      state.joggingStore?.selectedTcpId,
+      state.joggingStore?.activeCoordSystemId,
+      state.joggingStore?.selectedDiscreteIncrement,
+    ])
+
+    if (!state.joggingStore || state.loadingError) {
+      return (
+        <JoggingPanelOuter>
+          <LoadingCover message="Loading jogging" error={state.loadingError} />
+        </JoggingPanelOuter>
       )
     }
-  }, [
-    state.joggingStore?.currentTab,
-    state.joggingStore?.selectedTcpId,
-    state.joggingStore?.activeCoordSystemId,
-    state.joggingStore?.selectedDiscreteIncrement,
-  ])
-
-  if (!state.joggingStore) {
-    return (
-      <JoggingPanelOuter>
-        <LoadingCover message="Loading jogging" error={state.loadingError} />
-      </JoggingPanelOuter>
-    )
-  }
 
-  const { joggingStore: store } = state
+    const { joggingStore: store } = state
 
-  return (
-    <JoggingPanelOuter>
-      <Stack flexGrow={1}>
-        {/* Tab selection */}
-        <Tabs value={store.tabIndex} onChange={store.onTabChange}>
-          {store.tabs.map((tab) => (
-            <Tab
-              key={tab.id}
-              label={tab.label}
-              id={`jogging-tab-${tab.id}`}
-              aria-controls={`jogging-tab-${tab.id}`}
-            />
-          ))}
-        </Tabs>
-
-        {/* Current tab content */}
+    return (
+      <JoggingPanelOuter>
         <Stack flexGrow={1}>
-          {store.currentTab.id === "cartesian" && (
-            <JoggingCartesianTab store={store} />
-          )}
-          {store.currentTab.id === "joint" && <JoggingJointTab store={store} />}
-          {props.children}
+          {/* Tab selection */}
+          <Tabs value={store.tabIndex} onChange={store.onTabChange}>
+            {store.tabs.map((tab) => (
+              <Tab
+                key={tab.id}
+                label={tab.label}
+                id={`jogging-tab-${tab.id}`}
+                aria-controls={`jogging-tab-${tab.id}`}
+              />
+            ))}
+          </Tabs>
+
+          {/* Current tab content */}
+          <Stack flexGrow={1}>
+            {store.currentTab.id === "cartesian" && (
+              <JoggingCartesianTab store={store} />
+            )}
+            {store.currentTab.id === "joint" && (
+              <JoggingJointTab store={store} />
+            )}
+            {props.children}
+          </Stack>
         </Stack>
-      </Stack>
-    </JoggingPanelOuter>
-  )
-})
+      </JoggingPanelOuter>
+    )
+  }),
+)
 
 function JoggingPanelOuter({ children }: { children: React.ReactNode }) {
   return (