@wandelbots/wandelbots-js-react-components 1.7.1 → 1.9.0

package/dist/themes/color.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 export declare function ColorSection(props: {
     name: string;
     children: ReactNode;

package/dist/themes/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/themes/color.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAE9D,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAexE;AAED,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,2CAsDrE"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/themes/color.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAGtC,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAsBxE;AAED,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,2CAuDrE"}

package/dist/themes/novaTheme.stories.d.ts

@@ -0,0 +1,5 @@
+import type { Meta } from "@storybook/react";
+declare const ColorPalette: () => import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof ColorPalette>;
+export default meta;
+//# sourceMappingURL=novaTheme.stories.d.ts.map

package/dist/themes/novaTheme.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"novaTheme.stories.d.ts","sourceRoot":"","sources":["../../src/themes/novaTheme.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAY,MAAM,kBAAkB,CAAA;AAItD,QAAA,MAAM,YAAY,+CAuDjB,CAAA;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CASnC,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/themes/theming.d.ts

@@ -0,0 +1,49 @@
+import type { Theme } from "@mui/material/styles";
+/**
+ * A Nova components theme is a collection of Nova-specific settings that is
+ * not specifically MUI-related, but can be used to construct a MUI
+ * theme in turn.
+ *
+ * This object defines the default Nova theme settings, and the structure
+ * of the options here is used to validate alternative themes.
+ */
+export declare const novaDarkTheme: {
+    mode: "dark" | "light";
+    colors: {
+        primary: string;
+        textDefault: string;
+        textSubtle: string;
+        background: {
+            default: string;
+            panel: string;
+        };
+    };
+};
+export type NovaTheme = typeof novaDarkTheme;
+export declare const novaLightTheme: {
+    mode: "light";
+    colors: {
+        primary: string;
+        textDefault: string;
+        textSubtle: string;
+        background: {
+            default: string;
+            panel: string;
+        };
+    };
+};
+/**
+ * Configure a Nova theme with the given options.
+ * If no options are provided, the default dark theme is used.
+ * Otherwise, the default dark or light theme is extended with
+ * the overrides provided as appropriate.
+ */
+export declare function createNovaTheme(opts?: Partial<NovaTheme>): NovaTheme;
+/**
+ * Turn a set of Nova theme settings into a Material UI theme.
+ *
+ * The original Nova settings are available on the resulting MUI
+ * theme object under the `nova` key, if needed.
+ */
+export declare function createMUIThemeFromNova(novaTheme: NovaTheme): Theme;
+//# sourceMappingURL=theming.d.ts.map

package/dist/themes/theming.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theming.d.ts","sourceRoot":"","sources":["../../src/themes/theming.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAA;AAyBjD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa;UACR,MAAM,GAAG,OAAO;;;;;;;;;;CAUjC,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,OAAO,aAAa,CAAA;AAE5C,eAAO,MAAM,cAAc;;;;;;;;;;;CAWN,CAAA;AAErB;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,IAAI,GAAE,OAAO,CAAC,SAAS,CAAM,GAAG,SAAS,CAGxE;AAED;;;;;GAKG;AACH,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,SAAS,GAAG,KAAK,CA6FlE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.7.1",
+  "version": "1.9.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "files": [
     "dist",
@@ -19,7 +19,8 @@
   "types": "./dist/index.d.ts",
   "scripts": {
     "dev": "storybook dev -p 6006 --no-open",
-    "dev:pack": "nodemon -w \".\" -e ts -i *.tgz -i dist -x \"npm run build && npm pack\"",
+    "dev:pack": "nodemon -V -w src -e '*' -x \"npm run build && npm pack\"",
+    "dev:build": "nodemon -V -w src -e '*' -x \"vite build && tsc --declaration --emitDeclarationOnly\"",
     "dev:wbjs": "nodemon --watch $WBJS_PATH -e tgz --exec 'npm install file:$WBJS_PATH && storybook dev -p 6006 --no-open'",
     "tsc": "tsc --pretty --noEmit",
     "test": "npm run build",
@@ -28,7 +29,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/wandelbotsgmbh/wandelui.git"
+    "url": "git+https://github.com/wandelbotsgmbh/wandelbots-js-react-components.git"
   },
   "keywords": [
     "ui",
@@ -46,20 +47,22 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-essentials": "^8.2.7",
-    "@storybook/addon-interactions": "^8.2.7",
-    "@storybook/addon-links": "^8.2.7",
-    "@storybook/blocks": "^8.2.7",
-    "@storybook/react": "^8.2.7",
-    "@storybook/react-vite": "^8.2.7",
-    "@storybook/test": "^8.2.7",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-interactions": "^8.2.9",
+    "@storybook/addon-links": "^8.2.9",
+    "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@storybook/test-runner": "^0.19.1",
     "@svgr/rollup": "^8.1.0",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.3",
+    "@types/three": "^0.167.1",
     "@vitejs/plugin-react": "^4.3.1",
     "nodemon": "^3.1.4",
     "postcss": "^8.4.40",
+    "prettier-eslint": "^16.3.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -70,7 +73,8 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^24.0.0",
-    "storybook": "^8.2.7",
+    "storybook": "^8.2.9",
+    "storybook-dark-mode": "^4.0.2",
     "tslib": "^2.6.3",
     "typescript": "^5.5.4",
     "vite": "^5.3.5",
@@ -84,7 +88,7 @@
     "@react-spring/three": ">=9",
     "@react-three/drei": ">=9",
     "@react-three/fiber": ">=8",
-    "@wandelbots/wandelbots-js": "^1.6.0",
+    "@wandelbots/wandelbots-js": "^1.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "three": ">=0.167",
@@ -96,16 +100,19 @@
     }
   },
   "dependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
     "@monaco-editor/react": "^4.6.0",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@shikijs/monaco": "^1.12.0",
+    "@storybook/addon-onboarding": "^8.2.9",
     "i18next-browser-languagedetector": "^8.0.0",
     "lodash-es": "^4.17.21",
     "mobx": "^6.13.1",
     "mobx-react-lite": "^4.0.7",
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^15.0.0",
-    "shiki": "^1.12.0"
+    "shiki": "^1.12.0",
+    "storybook-preset-inline-svg": "^1.0.1"
   }
 }

package/src/components/3d-viewport/SafetyZonesRenderer.tsx

@@ -1,5 +1,5 @@
-import { SafetySetupSafetyZone } from "@wandelbots/wandelbots-js"
-import { Geometry } from "@wandelbots/wandelbots-api-client"
+import type { SafetySetupSafetyZone } from "@wandelbots/wandelbots-js"
+import type { Geometry } from "@wandelbots/wandelbots-api-client"
 import * as THREE from "three"
 import { ConvexGeometry } from "three-stdlib"
 import { type GroupProps } from "@react-three/fiber"

package/src/components/CopyableText.tsx

@@ -0,0 +1,30 @@
+import { Chip, InputLabel } from "@mui/material"
+import { forwardRef } from "react"
+
+export const CopyableText = forwardRef(
+  (
+    {
+      label,
+      value,
+    }: {
+      label?: string
+      value: string
+    },
+    ref: React.ForwardedRef<HTMLPreElement>,
+  ) => {
+    return (
+      <>
+        {label && <InputLabel>{label}</InputLabel>}
+        <Chip
+          ref={ref}
+          sx={{
+            fontSize: "14px",
+            opacity: 0.8,
+            marginTop: "4px !important",
+          }}
+          value={value}
+        />
+      </>
+    )
+  },
+)

package/src/components/LoadingButton.stories.tsx

@@ -1,35 +1,29 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { LoadingButton } from "./LoadingButton";
-import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react"
+import { LoadingButton } from "./LoadingButton"
+import { useState } from "react"
 import { PlayArrow } from "@mui/icons-material"
 
 async function delay(ms: number) {
   return new Promise<void>((resolve) => {
     setTimeout(() => {
-      resolve();
-    }, ms);
-  });
+      resolve()
+    }, ms)
+  })
 }
 
 const DemoLoader = (props: React.ComponentProps<typeof LoadingButton>) => {
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, setIsLoading] = useState(false)
 
   async function doThing() {
-    setIsLoading(true);
+    setIsLoading(true)
     try {
-      await delay(1000);
+      await delay(1000)
     } finally {
-      setIsLoading(false);
+      setIsLoading(false)
     }
   }
 
-  return (
-    <LoadingButton
-      loading={isLoading}
-      onClick={doThing}
-      {...props}
-    />
-  );
+  return <LoadingButton loading={isLoading} onClick={doThing} {...props} />
 }
 
 const meta: Meta<typeof LoadingButton> = {
@@ -44,18 +38,17 @@ const meta: Meta<typeof LoadingButton> = {
   argTypes: {
     loadingPosition: {
       options: ["center", "start", "end"],
-      control: { type: 'select' },
+      control: { type: "select" },
     },
     variant: {
       options: ["contained", "outlined", "text"],
-      control: { type: 'select' },
-    }
+      control: { type: "select" },
+    },
   },
   render: (props) => {
-    return <DemoLoader {...props} />;
-  }
-};
-export default meta;
+    return <DemoLoader {...props} />
+  },
+}
+export default meta
 
-export const Default: StoryObj<typeof LoadingButton> = {
-};
+export const Default: StoryObj<typeof LoadingButton> = {}

package/src/components/ThemeSelect.tsx

@@ -1,7 +1,6 @@
 // TODO implement this as part of theme?
 
-import { useThemeColors } from "../themes/wbTheme"
-import { Select, type SxProps } from "@mui/material"
+import { Select, useTheme, type SxProps } from "@mui/material"
 import { defaultsDeep } from "lodash-es"
 
 type ThemeSelectProps = {
@@ -9,10 +8,10 @@ type ThemeSelectProps = {
 } & React.ComponentProps<typeof Select>
 
 export const ThemeSelect = ({ kind, sx, ...rest }: ThemeSelectProps) => {
-  const colors = useThemeColors()
+  const theme = useTheme()
 
   let style: SxProps = defaultsDeep(sx, {
-    backgroundColor: colors.selectBackground,
+    backgroundColor: theme.palette.background.default,
     borderRadius: "10px",
     borderStyle: "none",
     color: "currentColor",

package/src/components/VelocitySlider.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { VelocitySlider } from "./VelocitySlider";
-import { useArgs } from "@storybook/preview-api";
+import type { Meta, StoryObj } from "@storybook/react"
+import { VelocitySlider } from "../index"
+import { useArgs } from "@storybook/preview-api"
 
 const meta: Meta<typeof VelocitySlider> = {
   component: VelocitySlider,
@@ -12,21 +12,16 @@ const meta: Meta<typeof VelocitySlider> = {
     disabled: false,
   },
   render: function Component(args) {
-    const [, setArgs] = useArgs();
+    const [, setArgs] = useArgs()
 
     function onVelocityChange(newVelocity: number) {
-      args.onVelocityChange?.(newVelocity);
-      setArgs({ velocity: newVelocity });
+      args.onVelocityChange?.(newVelocity)
+      setArgs({ velocity: newVelocity })
     }
 
-    return <VelocitySlider
-      {...args} 
-      onVelocityChange={onVelocityChange}
-    />;
+    return <VelocitySlider {...args} onVelocityChange={onVelocityChange} />
   },
+}
+export default meta
 
-};
-export default meta;
-
-export const Default: StoryObj<typeof VelocitySlider> = {
-};
+export const Default: StoryObj<typeof VelocitySlider> = {}

package/src/components/VelocitySlider.tsx

@@ -1,7 +1,7 @@
 import Slider from "@mui/material/Slider"
 import { isNumber } from "lodash-es"
 import { observer } from "mobx-react-lite"
-import { Typography } from "@mui/material"
+import { Stack, Typography, useTheme } from "@mui/material"
 
 type VelocitySliderProps = {
   min: number
@@ -14,7 +14,10 @@ type VelocitySliderProps = {
 
 /** A slider for controlling the movement velocity of a robot */
 export const VelocitySlider = observer((props: VelocitySliderProps) => {
-  const valueLabelFormat = props.valueLabelFormat || ((value: number) => `${value}`)
+  const theme = useTheme()
+
+  const valueLabelFormat =
+    props.valueLabelFormat || ((value: number) => `${value}`)
 
   function onSliderChange(_event: Event, newVelocity: number | number[]) {
     if (newVelocity === props.velocity || !isNumber(newVelocity)) return
@@ -28,6 +31,8 @@ export const VelocitySlider = observer((props: VelocitySliderProps) => {
         sx={{
           textAlign: "center",
           fontSize: "15px",
+          opacity: 0.8,
+          color: theme.palette.text.primary,
         }}
       >
         {valueLabelFormat(props.velocity)}

package/src/components/jogging/JoggingCartesianAxisControl.stories.tsx

@@ -1,8 +1,8 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl";
-import { useRef, useState } from "react";
-import { useAnimationFrame } from "../utils/hooks";
-import { useArgs } from "@storybook/preview-api";
+import type { Meta, StoryObj } from "@storybook/react"
+import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
+import { useRef } from "react"
+import { useAnimationFrame } from "../utils/hooks"
+import { useArgs } from "@storybook/preview-api"
 
 const meta: Meta<typeof JoggingCartesianAxisControl> = {
   component: JoggingCartesianAxisControl,
@@ -13,29 +13,29 @@ const meta: Meta<typeof JoggingCartesianAxisControl> = {
     disabled: false,
   },
   render: function Component(args) {
-    const [, setArgs] = useArgs();
+    const [, setArgs] = useArgs()
 
-    const joggingDirRef = useRef<"+" | "-" | null>(null);
-    const joggingValueRef = useRef(0);
+    const joggingDirRef = useRef<"+" | "-" | null>(null)
+    const joggingValueRef = useRef(0)
 
     useAnimationFrame(() => {
       if (joggingDirRef.current === "+") {
-        joggingValueRef.current += 1;
+        joggingValueRef.current += 1
       } else if (joggingDirRef.current === "-") {
-        joggingValueRef.current -= 1;
+        joggingValueRef.current -= 1
       }
     })
 
-    return <JoggingCartesianAxisControl
-      {...args} 
-      startJogging={(direction) => joggingDirRef.current = direction} 
-      stopJogging={() => joggingDirRef.current = null}
-      getDisplayedValue={() => joggingValueRef.current.toString()}
-    />;
+    return (
+      <JoggingCartesianAxisControl
+        {...args}
+        startJogging={(direction) => (joggingDirRef.current = direction)}
+        stopJogging={() => (joggingDirRef.current = null)}
+        getDisplayedValue={() => joggingValueRef.current.toString()}
+      />
+    )
   },
+}
+export default meta
 
-};
-export default meta;
-
-export const Default: StoryObj<typeof JoggingCartesianAxisControl> = {
-};
+export const Default: StoryObj<typeof JoggingCartesianAxisControl> = {}

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -84,7 +84,7 @@ export const JoggingCartesianAxisControl = observer(
             alignItems="center"
             justifyItems="center"
             spacing={1}
-            sx={{ userSelect: "none" }}
+            sx={{ userSelect: "none", color: "white" }}
           >
             {label}
           </Stack>

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -6,7 +6,7 @@ import {
 } from "@mui/material"
 import { observer } from "mobx-react-lite"
 import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
-import { radiansToDegrees } from "@wandelbots/wandelbots-js"
+import { degreesToRadians, radiansToDegrees } from "@wandelbots/wandelbots-js"
 import { useTranslation } from "react-i18next"
 import RotationIcon from "../../icons/rotation.svg"
 import XAxisIcon from "../../icons/axis-x.svg"
@@ -41,7 +41,9 @@ export const JoggingCartesianTab = observer(
       () => [store.selectedCoordSystemId, store.selectedTcpId],
       () => {
         store.jogger.motionStream.motionStateSocket.changeUrl(
-          store.jogger.nova.makeWebsocketURL(`/motion-groups/${store.jogger.motionGroupId}/state-stream?tcp=${store.selectedTcpId}&response_coordinate_system=${store.selectedCoordSystemId}`)
+          store.jogger.nova.makeWebsocketURL(
+            `/motion-groups/${store.jogger.motionGroupId}/state-stream?tcp=${store.selectedTcpId}&response_coordinate_system=${store.selectedCoordSystemId}`,
+          ),
         )
       },
       { fireImmediately: true } as any,
@@ -51,31 +53,33 @@ export const JoggingCartesianTab = observer(
       opts: JoggingCartesianOpts,
       increment: DiscreteIncrementOption,
     ) {
-      const tcpPose = store.jogger.motionStream.rapidlyChangingMotionState.tcp_pose
+      const tcpPose =
+        store.jogger.motionStream.rapidlyChangingMotionState.tcp_pose
       const jointPosition =
-        store.jogger.motionStream.rapidlyChangingMotionState.state.joint_position
+        store.jogger.motionStream.rapidlyChangingMotionState.state
+          .joint_position
       if (!tcpPose) return
 
-      // await robotPad.withMotionLock(async () => {
-      //   await jogger.runIncrementalCartesianMotion({
-      //     currentTcpPose: tcpPose,
-      //     currentJoints: jointPosition,
-      //     coordSystemId: store.selectedCoordSystemId,
-      //     velocityInRelevantUnits: store.velocityInCurrentUnits,
-      //     axis: opts.axis,
-      //     direction: opts.direction,
-      //     motion:
-      //       store.selectedCartesianMotionType === "translate"
-      //         ? {
-      //             type: "translate",
-      //             distanceMm: increment.mm,
-      //           }
-      //         : {
-      //             type: "rotate",
-      //             distanceRads: degreesToRadians(increment.degrees),
-      //           },
-      //   })
-      // })
+      await store.withMotionLock(async () => {
+        await store.jogger.runIncrementalCartesianMotion({
+          currentTcpPose: tcpPose,
+          currentJoints: jointPosition,
+          coordSystemId: store.selectedCoordSystemId,
+          velocityInRelevantUnits: store.velocityInCurrentUnits,
+          axis: opts.axis,
+          direction: opts.direction,
+          motion:
+            store.selectedCartesianMotionType === "translate"
+              ? {
+                  type: "translate",
+                  distanceMm: increment.mm,
+                }
+              : {
+                  type: "rotate",
+                  distanceRads: degreesToRadians(increment.degrees),
+                },
+        })
+      })
     }
 
     async function startCartesianJogging(opts: JoggingCartesianOpts) {
@@ -97,7 +101,6 @@ export const JoggingCartesianTab = observer(
           direction: opts.direction,
           velocityRadsPerSec: store.rotationVelocityRadsPerSec,
         })
-
       }
     }
 
@@ -141,26 +144,19 @@ export const JoggingCartesianTab = observer(
 
     return (
       <Stack>
-        {/* Jogging options */}
-        <JoggingOptions store={store} />
-
         {/* Show Wandelscript string for the current coords */}
         <JoggingCartesianValues store={store} />
 
-        {/* Translate or rotate toggle */}
-        <Stack alignItems="center" marginTop="1rem">
+        {/* Jogging options */}
+        <JoggingOptions store={store} />
+
+        <Stack width="80%" maxWidth="296px" margin="auto" marginTop="24px">
+          {/* Translate or rotate toggle */}
           <ToggleButtonGroup
             value={store.selectedCartesianMotionType}
             onChange={onMotionTypeChange}
             exclusive
             aria-label={t("Jogging.Cartesian.MotionType.lb")}
-            sx={{
-              "& > button": {
-                borderRadius: "8px",
-                textTransform: "none",
-                padding: "4px 30px",
-              },
-            }}
           >
             <ToggleButton value="translate">
               {t("Jogging.Cartesian.Translation.bt")}
@@ -169,9 +165,7 @@ export const JoggingCartesianTab = observer(
               {t("Jogging.Cartesian.Rotation.bt")}
             </ToggleButton>
           </ToggleButtonGroup>
-        </Stack>
 
-        <Stack width="80%" maxWidth="296px" margin="auto">
           {/* Cartesian translate jogging */}
           {store.selectedCartesianMotionType === "translate" &&
             axisList.map((axis) => (
@@ -197,9 +191,8 @@ export const JoggingCartesianTab = observer(
                 }
                 getDisplayedValue={() =>
                   formatMM(
-                    store.jogger.motionStream.rapidlyChangingMotionState.tcp_pose?.position[
-                      axis.id
-                    ] || 0,
+                    store.jogger.motionStream.rapidlyChangingMotionState
+                      .tcp_pose?.position[axis.id] || 0,
                   )
                 }
                 startJogging={(direction: "-" | "+") =>
@@ -238,8 +231,8 @@ export const JoggingCartesianTab = observer(
                 }
                 getDisplayedValue={() =>
                   formatDegrees(
-                    store.jogger.motionStream.rapidlyChangingMotionState.tcp_pose
-                      ?.orientation?.[axis.id] || 0,
+                    store.jogger.motionStream.rapidlyChangingMotionState
+                      .tcp_pose?.orientation?.[axis.id] || 0,
                   )
                 }
                 startJogging={(direction: "-" | "+") =>