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

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 (

package/src/components/modal/NoMotionGroupModal.tsx

@@ -8,6 +8,7 @@ import {
   Typography,
 } from "@mui/material"
 import { observer } from "mobx-react-lite"
+import { externalizeComponent } from "../../externalizeComponent"
 
 function getBaseUrl(): string {
   const currentUrl = window.location.href
@@ -17,70 +18,77 @@ function getBaseUrl(): string {
   )
 }
 
-export const NoMotionGroupModal = observer((baseUrl: string = getBaseUrl()) => {
-  return (
-    <Dialog
-      aria-labelledby="no-motion-group-modal-title"
-      open={true}
-      fullWidth
-      sx={{
-        "& .MuiModal-backdrop": {
-          backdropFilter: "blur(10px)",
-        },
-        "& .MuiDialog-paper": {
-          "::before": {
-            content: '""',
-            height: "8px",
-            width: "100%",
-            background: "linear-gradient(90deg, #FF0E65 0%, #47D3FF 100%)",
-          },
-          background: "#101629",
-        },
-      }}
-    >
-      <DialogTitle id="no-motion-group-modal-title">
-        No motion group found
-      </DialogTitle>
-
-      <DialogContent
+export const NoMotionGroupModal = externalizeComponent(
+  observer((baseUrl: string = getBaseUrl()) => {
+    return (
+      <Dialog
+        aria-labelledby="no-motion-group-modal-title"
+        open={true}
+        fullWidth
         sx={{
-          marginTop: "3rem",
-          marginBottom: "1.5rem",
-          textAlign: "center",
+          "& .MuiModal-backdrop": {
+            backdropFilter: "blur(10px)",
+          },
+          "& .MuiDialog-paper": {
+            "::before": {
+              content: '""',
+              height: "8px",
+              width: "100%",
+              background: "linear-gradient(90deg, #FF0E65 0%, #47D3FF 100%)",
+            },
+            background: "#101629",
+          },
         }}
       >
-        <Typography color="#fff">Found no devices to connect to.</Typography>
-        <Typography color="#fff">
-          Please ensure a motion group has been created.
-        </Typography>
-      </DialogContent>
+        <DialogTitle id="no-motion-group-modal-title">
+          No motion group found
+        </DialogTitle>
 
-      <DialogActions>
-        <Stack width="100%" maxWidth="300px" margin="auto" marginBottom="2rem">
-          <Button
-            href={`${baseUrl}/settings`}
-            variant="contained"
-            sx={{
-              borderRadius: "8px",
-              width: "100%",
-            }}
-          >
-            Go to settings app
-          </Button>
-          <Button
-            href={`${baseUrl}`}
-            variant="text"
-            sx={{
-              marginTop: "1rem",
-              color: "#fff",
-              textDecoration: "underline",
-              fontSize: "0.75rem",
-            }}
+        <DialogContent
+          sx={{
+            marginTop: "3rem",
+            marginBottom: "1.5rem",
+            textAlign: "center",
+          }}
+        >
+          <Typography color="#fff">Found no devices to connect to.</Typography>
+          <Typography color="#fff">
+            Please ensure a motion group has been created.
+          </Typography>
+        </DialogContent>
+
+        <DialogActions>
+          <Stack
+            width="100%"
+            maxWidth="300px"
+            margin="auto"
+            marginBottom="2rem"
           >
-            Back to Homescreen
-          </Button>
-        </Stack>
-      </DialogActions>
-    </Dialog>
-  )
-})
+            <Button
+              href={`${baseUrl}/settings`}
+              variant="contained"
+              sx={{
+                borderRadius: "8px",
+                width: "100%",
+              }}
+            >
+              Go to settings app
+            </Button>
+            <Button
+              href={`${baseUrl}`}
+              variant="text"
+              sx={{
+                marginTop: "1rem",
+                color: "#fff",
+                textDecoration: "underline",
+                fontSize: "0.75rem",
+              }}
+            >
+              Back to Homescreen
+            </Button>
+          </Stack>
+        </DialogActions>
+      </Dialog>
+    )
+  }),
+)