@wandelbots/wandelbots-js-react-components 1.14.0 → 1.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.14.0",
+  "version": "1.15.1",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -104,7 +104,7 @@
     "@mui/icons-material": "^5.16.7",
     "@mui/lab": "^5.0.0-alpha.173",
     "@shikijs/monaco": "^1.16.1",
-    "@wandelbots/wandelbots-js": "^1.8.6",
+    "@wandelbots/wandelbots-js": "^1.9.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "lodash-es": "^4.17.21",
     "mobx": "^6.13.1",

package/src/components/TransparentOverlay.tsx

@@ -0,0 +1,24 @@
+import { Stack } from "@mui/material"
+import React from "react"
+
+export const TransparentOverlay = (
+  props: React.ComponentProps<typeof Stack>,
+) => {
+  return (
+    <Stack
+      position="absolute"
+      left={0}
+      top={0}
+      width="100%"
+      height="100%"
+      alignItems="center"
+      justifyContent="center"
+      sx={{
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        backdropFilter: "blur(10px)",
+        zIndex: 100,
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -18,7 +18,6 @@ import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
 import { useReaction } from "../utils/hooks"
 import { JoggingCartesianValues } from "./JoggingCartesianValues"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
-import { useEffect } from "react"
 
 type JoggingCartesianOpts = {
   axis: "x" | "y" | "z"
@@ -50,31 +49,6 @@ export const JoggingCartesianTab = observer(
       { fireImmediately: true } as any,
     )
 
-    useEffect(() => {
-      // Start in increment mode with no websockets open
-      store.jogger.setJoggingMode("increment")
-
-      window.addEventListener("blur", disconnectJogger)
-
-      return () => {
-        window.removeEventListener("blur", disconnectJogger)
-      }
-    }, [])
-
-    async function connectJogger() {
-      store.jogger.setJoggingMode(
-        store.activeDiscreteIncrement ? "increment" : "cartesian",
-        {
-          tcpId: store.selectedTcpId,
-          coordSystemId: store.activeCoordSystemId,
-        },
-      )
-    }
-
-    async function disconnectJogger() {
-      store.jogger.setJoggingMode("increment")
-    }
-
     async function runIncrementalCartesianJog(
       opts: JoggingCartesianOpts,
       increment: DiscreteIncrementOption,
@@ -111,8 +85,6 @@ export const JoggingCartesianTab = observer(
     async function startCartesianJogging(opts: JoggingCartesianOpts) {
       if (store.isLocked) return
 
-      connectJogger()
-
       if (store.activeDiscreteIncrement) {
         return runIncrementalCartesianJog(opts, store.activeDiscreteIncrement)
       }
@@ -171,7 +143,7 @@ export const JoggingCartesianTab = observer(
     }
 
     return (
-      <Stack onMouseEnter={connectJogger} onMouseLeave={disconnectJogger}>
+      <Stack>
         {/* Show Wandelscript string for the current coords */}
         <JoggingCartesianValues store={store} />
 

package/src/components/jogging/JoggingJointTab.tsx

@@ -9,25 +9,6 @@ import { useEffect } from "react"
 
 export const JoggingJointTab = observer(
   ({ store }: { store: JoggingStore }) => {
-    useEffect(() => {
-      // Start in increment mode with no websockets open
-      store.jogger.setJoggingMode("increment")
-
-      window.addEventListener("blur", disconnectJogger)
-
-      return () => {
-        window.removeEventListener("blur", disconnectJogger)
-      }
-    }, [])
-
-    async function connectJogger() {
-      store.jogger.setJoggingMode("joint")
-    }
-
-    async function disconnectJogger() {
-      store.jogger.setJoggingMode("increment")
-    }
-
     async function startJointJogging(opts: {
       joint: number
       direction: "-" | "+"
@@ -44,7 +25,7 @@ export const JoggingJointTab = observer(
     }
 
     return (
-      <Stack onMouseEnter={connectJogger} onMouseLeave={disconnectJogger}>
+      <Stack>
         <JoggingJointValues store={store} />
         <Stack>
           {store.jogger.motionStream.joints.map((joint) => {

package/src/components/jogging/JoggingJointValues.tsx

@@ -15,7 +15,7 @@ export const JoggingJointValues = observer(
       const { joints } =
         store.jogger.motionStream.rapidlyChangingMotionState.state
           .joint_position
-      return `{${joints.map((j) => parseFloat(j.toFixed(4))).join(", ")}}`
+      return `[${joints.map((j) => parseFloat(j.toFixed(4))).join(", ")}]`
     }
 
     useAnimationFrame(() => {

package/src/components/jogging/JoggingPanel.tsx

@@ -1,14 +1,16 @@
-import { Paper, Stack, Tab, Tabs } from "@mui/material"
+import { Button, Paper, Stack, Tab, Tabs } from "@mui/material"
 import { observer, useLocalObservable } from "mobx-react-lite"
 import { useEffect } from "react"
 import { JoggingCartesianTab } from "./JoggingCartesianTab"
 import { JoggingJointTab } from "./JoggingJointTab"
 import { JoggingStore } from "./JoggingStore"
 import { LoadingCover } from "../LoadingCover"
+import { TransparentOverlay } from "../TransparentOverlay"
 import { runInAction } from "mobx"
 import { NovaClient } from "@wandelbots/wandelbots-js"
 import { externalizeComponent } from "../../externalizeComponent"
 import { isString } from "lodash-es"
+import { useReaction } from "../utils/hooks"
 
 export type JoggingPanelProps = {
   /** Either an existing NovaClient or the base url of a deployed Nova instance */
@@ -19,6 +21,8 @@ export type JoggingPanelProps = {
   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
 }
 
 /**
@@ -62,101 +66,142 @@ export const JoggingPanel = externalizeComponent(
       }
     }, [props.nova])
 
-    // Set correct jogging mode on jogger based on user selections
     useEffect(() => {
-      if (!state.joggingStore) return
+      const store = state.joggingStore
+      if (!store) return
 
-      const {
-        currentTab,
-        selectedTcpId,
-        activeCoordSystemId,
-        activeDiscreteIncrement,
-      } = state.joggingStore
+      if (props.locked) {
+        store.locks.add("external")
+      } else {
+        store.locks.delete("external")
+      }
+    }, [props.locked])
 
-      if (currentTab.id !== "cartesian" && currentTab.id !== "joint") return
+    return (
+      <Stack
+        sx={{
+          maxWidth: "460px",
+          minWidth: "350px",
+          overflowY: "auto",
+          position: "relative",
+          height: "100%",
+        }}
+      >
+        <Paper
+          sx={{
+            height: "100%",
+          }}
+        >
+          {state.joggingStore ? (
+            <JoggingPanelInner store={state.joggingStore}>
+              {props.children}
+            </JoggingPanelInner>
+          ) : (
+            <LoadingCover
+              message="Loading jogging"
+              error={state.loadingError}
+            />
+          )}
+        </Paper>
+      </Stack>
+    )
+  }),
+)
 
-      const cartesianJoggingOpts = {
-        tcpId: selectedTcpId,
-        coordSystemId: activeCoordSystemId,
+const JoggingPanelInner = observer(
+  ({
+    store,
+    children,
+  }: {
+    store: JoggingStore
+    children?: React.ReactNode
+  }) => {
+    // Jogger is only active as long as the tab is focused
+    useEffect(() => {
+      window.addEventListener("blur", store.deactivate)
+
+      return () => {
+        window.removeEventListener("blur", store.deactivate)
       }
+    })
+
+    // Update jogging mode on jogger based on user selections
+    useReaction(
+      () => [
+        store.currentTab,
+        store.selectedTcpId,
+        store.activeCoordSystemId,
+        store.activeDiscreteIncrement,
+      ],
+      () => {
+        if (store.activationState === "active") store.activate()
+      },
+    )
 
-      if (activeDiscreteIncrement && currentTab.id === "cartesian") {
-        state.joggingStore.jogger.setJoggingMode(
-          "increment",
-          cartesianJoggingOpts,
+    function renderOverlay() {
+      if (store.activationState === "inactive" && !store.activationError) {
+        return (
+          <TransparentOverlay>
+            <Button
+              color="primary"
+              variant="contained"
+              onClick={store.activate}
+              disabled={store.isLocked}
+            >
+              Activate jogging
+            </Button>
+          </TransparentOverlay>
         )
-      } else {
-        state.joggingStore.jogger.setJoggingMode(
-          currentTab.id,
-          cartesianJoggingOpts,
+      } else if (store.activationState === "loading" || store.activationError) {
+        return (
+          <TransparentOverlay>
+            <LoadingCover
+              message="Activating jogging"
+              error={store.activationError}
+            />
+          </TransparentOverlay>
         )
       }
-    }, [
-      state.joggingStore?.currentTab,
-      state.joggingStore?.selectedTcpId,
-      state.joggingStore?.activeCoordSystemId,
-      state.joggingStore?.activeDiscreteIncrement,
-    ])
-
-    if (!state.joggingStore || state.loadingError) {
-      return (
-        <JoggingPanelOuter>
-          <LoadingCover message="Loading jogging" error={state.loadingError} />
-        </JoggingPanelOuter>
-      )
     }
 
-    const { joggingStore: store } = state
+    function renderTabContent() {
+      if (store.currentTab.id === "cartesian") {
+        return (
+          <>
+            <JoggingCartesianTab store={store} />
+            {children}
+          </>
+        )
+      } else if (store.currentTab.id === "joint") {
+        return (
+          <>
+            <JoggingJointTab store={store} />
+            {children}
+          </>
+        )
+      }
+    }
 
     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 */}
-          <Stack flexGrow={1}>
-            {store.currentTab.id === "cartesian" && (
-              <JoggingCartesianTab store={store} />
-            )}
-            {store.currentTab.id === "joint" && (
-              <JoggingJointTab store={store} />
-            )}
-            {props.children}
-          </Stack>
+      <Stack flexGrow={1} height="100%">
+        {/* 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} position="relative">
+          {renderOverlay()}
+          {renderTabContent()}
         </Stack>
-      </JoggingPanelOuter>
+      </Stack>
     )
-  }),
+  },
 )
-
-function JoggingPanelOuter({ children }: { children: React.ReactNode }) {
-  return (
-    <Stack
-      sx={{
-        maxWidth: "460px",
-        minWidth: "350px",
-        overflowY: "auto",
-        position: "relative",
-        height: "100%",
-      }}
-    >
-      <Paper
-        sx={{
-          height: "100%",
-        }}
-      >
-        {children}
-      </Paper>
-    </Stack>
-  )
-}

package/src/components/jogging/JoggingStore.tsx

@@ -1,6 +1,11 @@
 import keyBy from "lodash-es/keyBy"
 import uniqueId from "lodash-es/uniqueId"
-import { autorun, makeAutoObservable, type IReactionDisposer } from "mobx"
+import {
+  autorun,
+  makeAutoObservable,
+  runInAction,
+  type IReactionDisposer,
+} from "mobx"
 import type {
   CoordinateSystem,
   JoggerConnection,
@@ -28,6 +33,16 @@ export type IncrementOptionId = IncrementOption["id"]
 export class JoggingStore {
   selectedTabId: "cartesian" | "joint" | "debug" = "cartesian"
 
+  /**
+   * State of the jogging panel. Starts as "inactive"
+   */
+  activationState: "inactive" | "loading" | "active" = "inactive"
+
+  /**
+   * If an error occurred connecting to the jogging websocket
+   */
+  activationError: unknown | null = null
+
   /** Locks to prevent UI interactions during certain operations */
   locks = new Set<string>()
 
@@ -145,6 +160,68 @@ export class JoggingStore {
     this.jogger.dispose()
   }
 
+  async deactivate() {
+    if (this.activationState === "inactive") return
+    const websocket = this.jogger.activeWebsocket
+
+    this.activationState = "inactive"
+    this.jogger.setJoggingMode("increment")
+
+    if (websocket) {
+      await websocket.closed()
+    }
+  }
+
+  /** Activate the jogger with current settings */
+  async activate() {
+    const {
+      currentTab,
+      selectedTcpId,
+      activeCoordSystemId,
+      activeDiscreteIncrement,
+      jogger,
+    } = this
+
+    if (this.activationState === "loading") return
+
+    runInAction(() => {
+      this.activationState = "loading"
+      this.activationError = null
+    })
+
+    if (currentTab.id === "cartesian") {
+      const cartesianJoggingOpts = {
+        tcpId: selectedTcpId,
+        coordSystemId: activeCoordSystemId,
+      }
+
+      if (activeDiscreteIncrement) {
+        jogger.setJoggingMode("increment", cartesianJoggingOpts)
+      } else {
+        jogger.setJoggingMode("cartesian", cartesianJoggingOpts)
+      }
+    } else {
+      jogger.setJoggingMode("joint")
+    }
+
+    if (jogger.activeWebsocket) {
+      try {
+        jogger.stop()
+        await jogger.activeWebsocket.nextMessage()
+      } catch (err) {
+        runInAction(() => {
+          this.activationState = "inactive"
+          this.activationError = err
+        })
+        return
+      }
+    }
+
+    runInAction(() => {
+      this.activationState = "active"
+    })
+  }
+
   loadFromLocalStorage() {
     const save = tryParseJson(localStorage.getItem("joggingToolStore"))
     if (!save) return
@@ -241,6 +318,11 @@ export class JoggingStore {
     return this.coordSystemsById[this.selectedCoordSystemId]
   }
 
+  /**
+   * 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"