@wandelbots/wandelbots-js-react-components 5.5.1-pr.fix-standardize-output.591.60112ee → 5.5.1

package/src/components/safetyBar/IndicatorWithExplanation.tsx

@@ -0,0 +1,137 @@
+import Popover, { type PopoverOrigin } from "@mui/material/Popover"
+import Stack from "@mui/material/Stack"
+import SvgIcon from "@mui/material/SvgIcon"
+import Typography, { type TypographyProps } from "@mui/material/Typography"
+import { observer, useLocalObservable } from "mobx-react-lite"
+import type { ElementType, ReactNode } from "react"
+
+export type IndicatorWithExplanationProps = {
+  id: string
+  icon: ElementType
+  color: TypographyProps["color"]
+  title?: ReactNode
+  name: ReactNode
+  label?: ReactNode
+  explanation: ReactNode
+  literalValue?: string
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
+}
+
+export const IndicatorWithExplanation = observer(
+  ({
+    id,
+    icon,
+    color,
+    title,
+    name,
+    label,
+    explanation,
+    literalValue,
+    anchorOrigin,
+    transformOrigin,
+  }: IndicatorWithExplanationProps) => {
+    const state = useLocalObservable(() => ({
+      anchorEl: null as HTMLElement | null,
+
+      get isPopoverOpen() {
+        return !!state.anchorEl
+      },
+
+      openPopover(event: React.MouseEvent<HTMLElement>) {
+        state.anchorEl = event.currentTarget
+      },
+
+      closePopover() {
+        state.anchorEl = null
+      },
+    }))
+
+    return (
+      <>
+        <Stack
+          aria-owns={state.isPopoverOpen ? id : undefined}
+          aria-haspopup="true"
+          onMouseEnter={state.openPopover}
+          onMouseLeave={state.closePopover}
+          direction="row"
+          spacing={1}
+          sx={{
+            cursor: "pointer",
+          }}
+        >
+          <SvgIcon
+            component={icon}
+            sx={{
+              color,
+            }}
+          />
+          {label && (
+            <div
+              style={{
+                color,
+              }}
+            >
+              {label}
+            </div>
+          )}
+        </Stack>
+        <Popover
+          id={id}
+          sx={{
+            pointerEvents: "none",
+          }}
+          open={state.isPopoverOpen}
+          anchorEl={state.anchorEl}
+          anchorOrigin={
+            anchorOrigin ?? {
+              vertical: "bottom",
+              horizontal: "left",
+            }
+          }
+          transformOrigin={
+            transformOrigin ?? {
+              vertical: "top",
+              horizontal: "left",
+            }
+          }
+          onClose={state.closePopover}
+          disableRestoreFocus
+        >
+          <Stack
+            gap="1rem"
+            padding={2}
+            maxWidth="450px"
+            sx={{
+              wordWrap: "break-word",
+            }}
+          >
+            <div>
+              {title && (
+                <Typography component="span" fontSize="14px">
+                  {`${title}: `}
+                </Typography>
+              )}
+              <Typography
+                component="span"
+                color={color}
+                fontWeight="bold"
+                fontSize="14px"
+              >
+                {name}
+              </Typography>
+            </div>
+
+            <Typography fontSize="14px">{explanation}</Typography>
+
+            {literalValue && (
+              <Typography fontSize="12px">{literalValue}</Typography>
+            )}
+          </Stack>
+        </Popover>
+      </>
+    )
+  },
+)
+
+export default IndicatorWithExplanation

package/src/components/safetyBar/OperationModeIndicator.tsx

@@ -0,0 +1,98 @@
+import { useTheme } from "@mui/material/styles"
+import type { PopoverOrigin } from "@mui/material/Popover"
+import type { OperationMode } from "@wandelbots/nova-js/v2"
+import { observer } from "mobx-react-lite"
+import { useId } from "react"
+import { Trans, useTranslation } from "react-i18next"
+import OperationModeAutomaticIcon from "./icons/operation-mode-automatic.svg"
+import OperationModeErrorIcon from "./icons/operation-mode-error.svg"
+import OperationModeManualIcon from "./icons/operation-mode-manual.svg"
+import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
+
+interface OperationModeIndicatorProps {
+  operationMode: OperationMode
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
+  compact: boolean
+}
+
+export const OperationModeIndicator = observer(
+  ({
+    operationMode,
+    anchorOrigin,
+    transformOrigin,
+    compact,
+  }: OperationModeIndicatorProps) => {
+    const { t } = useTranslation()
+    const theme = useTheme()
+    const componentId = useId()
+
+    switch (operationMode) {
+      case "OPERATION_MODE_AUTO":
+        return (
+          <IndicatorWithExplanation
+            id={`operation-mode-auto-${componentId}`}
+            icon={OperationModeAutomaticIcon}
+            title={t("SafetyBar.OperationMode.ti")}
+            name={t("SafetyBar.OperationMode.Automatic.ti")}
+            label={compact ? null : t("SafetyBar.OperationMode.Automatic.ti")}
+            color={theme.palette.text.secondary}
+            explanation={
+              <Trans i18nKey="SafetyBar.OperationMode.Auto.Explanation.lb">
+                The robot controller is in automatic operation mode. Automated
+                movement without manual confirmation is possible in this mode.
+              </Trans>
+            }
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+          />
+        )
+      case "OPERATION_MODE_MANUAL":
+      case "OPERATION_MODE_MANUAL_T1":
+      case "OPERATION_MODE_MANUAL_T2": {
+        return (
+          <IndicatorWithExplanation
+            id={`operation-mode-manual-${componentId}`}
+            icon={OperationModeManualIcon}
+            color={theme.palette.warning.main}
+            title={t("SafetyBar.OperationMode.ti")}
+            name={t("SafetyBar.OperationMode.Manual.lb")}
+            label={compact ? null : t("SafetyBar.OperationMode.Manual.lb")}
+            explanation={
+              <Trans i18nKey="SafetyBar.OperationMode.Manual.Explanation.lb">
+                The robot controller is in manual operation mode. On a physical
+                robot, this generally indicates that an enabling switch must be
+                held for the robot to move successfully.
+              </Trans>
+            }
+            literalValue={operationMode}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+          />
+        )
+      }
+      default:
+        return (
+          <IndicatorWithExplanation
+            id={`operation-mode-error-${componentId}`}
+            icon={OperationModeErrorIcon}
+            color={theme.palette.warning.main}
+            title={t("SafetyBar.OperationMode.ti")}
+            name={t("SafetyBar.OperationMode.Error.lb")}
+            label={compact ? null : t("SafetyBar.OperationMode.Error.lb")}
+            explanation={
+              <Trans i18nKey="SafetyBar.OperationMode.Error.Explanation.lb">
+                The robot controller has entered an unexpected operation mode.
+                Motion group movement may not be possible.
+              </Trans>
+            }
+            literalValue={operationMode}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+          />
+        )
+    }
+  },
+)
+
+export default OperationModeIndicator

package/src/components/safetyBar/SafetyBar.tsx

@@ -0,0 +1,72 @@
+import Divider from "@mui/material/Divider"
+import type { PopoverOrigin } from "@mui/material/Popover"
+import Stack from "@mui/material/Stack"
+import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"
+import { observer } from "mobx-react-lite"
+import { externalizeComponent } from "../../externalizeComponent"
+import { ControllerTypeIndicator } from "./ControllerTypeIndicator"
+import { OperationModeIndicator } from "./OperationModeIndicator"
+import { SafetyStateIndicator } from "./SafetyStateIndicator"
+
+export interface SafetyBarProps {
+  isVirtual: boolean
+  motionGroupId: string
+  operationMode: OperationMode
+  safetyState: SafetyStateType
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
+  compact?: boolean
+}
+
+export const SafetyBar = externalizeComponent(
+  observer(
+    ({
+      isVirtual,
+      motionGroupId,
+      operationMode,
+      safetyState,
+      anchorOrigin,
+      transformOrigin,
+      compact = true,
+    }: SafetyBarProps) => {
+      const gap = compact ? 1 : 2
+
+      return (
+        <Stack
+          direction="row"
+          gap={gap}
+          alignItems="center"
+          sx={{ height: "24px" }}
+        >
+          <SafetyStateIndicator
+            safetyState={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+            compact={compact}
+          />
+
+          <Divider orientation="vertical" flexItem />
+
+          <OperationModeIndicator
+            operationMode={operationMode}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+            compact={compact}
+          />
+
+          <Divider orientation="vertical" flexItem />
+
+          <ControllerTypeIndicator
+            isVirtual={isVirtual}
+            motionGroupId={motionGroupId}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+            compact={compact}
+          />
+        </Stack>
+      )
+    },
+  ),
+)
+
+export default SafetyBar

package/src/components/safetyBar/SafetyStateIndicator.tsx

@@ -0,0 +1,163 @@
+import { useTheme } from "@mui/material/styles"
+import type { PopoverOrigin } from "@mui/material/Popover"
+import type { SafetyStateType } from "@wandelbots/nova-js/v2"
+import { observer } from "mobx-react-lite"
+import { useId } from "react"
+import { Trans, useTranslation } from "react-i18next"
+import { assertUnreachable } from "../utils/errorHandling"
+import SafetyStateErrorIcon from "./icons/safety-state-error.svg"
+import SafetyStateEstopIcon from "./icons/safety-state-estop.svg"
+import SafetyStateManualActionRequiredIcon from "./icons/safety-state-manual-action-required.svg"
+import SafetyStateNormalIcon from "./icons/safety-state-normal.svg"
+import SafetyStateStopIcon from "./icons/safety-state-stop.svg"
+import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
+
+interface SafetyStateIndicatorProps {
+  safetyState: SafetyStateType
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
+  compact: boolean
+}
+
+export const SafetyStateIndicator = observer(
+  ({
+    safetyState,
+    anchorOrigin,
+    transformOrigin,
+    compact,
+  }: SafetyStateIndicatorProps) => {
+    const { t } = useTranslation()
+    const theme = useTheme()
+    const componentId = useId()
+
+    switch (safetyState) {
+      // Normal state, robot can move
+      case "SAFETY_STATE_NORMAL":
+        return (
+          <IndicatorWithExplanation
+            id={`safety-state-normal-${componentId}`}
+            title={t("SafetyBar.SafetyState.ti")}
+            name={t("SafetyBar.SafetyState.Normal.lb")}
+            label={compact ? null : t("SafetyBar.SafetyState.Normal.lb")}
+            icon={SafetyStateNormalIcon}
+            color={theme.palette.text.secondary}
+            explanation={
+              <Trans i18nKey="SafetyBar.SafetyState.Normal.Explanation.lb">
+                The robot controller is in a normal safety state. Movement is
+                not prevented by this state.
+              </Trans>
+            }
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+          />
+        )
+
+      // Estop
+      case "SAFETY_STATE_DEVICE_EMERGENCY_STOP":
+      case "SAFETY_STATE_ROBOT_EMERGENCY_STOP":
+        return (
+          <IndicatorWithExplanation
+            id={`safety-state-estop-${componentId}`}
+            title={t("SafetyBar.SafetyState.ti")}
+            name={t("SafetyBar.SafetyState.Estop.lb")}
+            label={compact ? null : t("SafetyBar.SafetyState.Estop.lb")}
+            icon={SafetyStateEstopIcon}
+            color={theme.palette.error.main}
+            explanation={
+              <Trans i18nKey="SafetyBar.StopState.Estop.Explanation.lb">
+                An emergency stop of the robot controller has been triggered.
+                Movement of the robot is no longer possible until the estop is
+                released.
+              </Trans>
+            }
+            literalValue={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+          />
+        )
+
+      // General stop
+      case "SAFETY_STATE_STOP_0":
+      case "SAFETY_STATE_STOP_1":
+      case "SAFETY_STATE_STOP_2":
+      case "SAFETY_STATE_PROTECTIVE_STOP":
+      case "SAFETY_STATE_STOP":
+        return (
+          <IndicatorWithExplanation
+            id={`safety-state-stop-${componentId}`}
+            icon={SafetyStateStopIcon}
+            title={t("SafetyBar.SafetyState.ti")}
+            name={t("SafetyBar.SafetyState.Stop.lb")}
+            label={compact ? null : t("SafetyBar.SafetyState.Stop.lb")}
+            color={theme.palette.warning.main}
+            explanation={
+              <Trans i18nKey="SafetyBar.SafetyState.Stop.Explanation.lb">
+                The robot controller has entered a stop state. Movement is no
+                longer possible until the stop state is resolved.
+              </Trans>
+            }
+            literalValue={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+          />
+        )
+
+      // Manual action required
+      case "SAFETY_STATE_REDUCED":
+      case "SAFETY_STATE_MASTERING":
+      case "SAFETY_STATE_CONFIRM_SAFETY":
+      case "SAFETY_STATE_OPERATOR_SAFETY":
+      case "SAFETY_STATE_RECOVERY":
+      case "SAFETY_STATE_VIOLATION":
+        return (
+          <IndicatorWithExplanation
+            id={`safety-state-manual-action-required-${componentId}`}
+            icon={SafetyStateManualActionRequiredIcon}
+            color={theme.palette.warning.main}
+            title={t("SafetyBar.SafetyState.ti")}
+            name={t("SafetyBar.SafetyState.ManualActionRequired.lb")}
+            label={
+              compact
+                ? null
+                : t("SafetyBar.SafetyState.ManualActionRequired.lb")
+            }
+            explanation={
+              <Trans i18nKey="SafetyBar.SafetyState.ManualActionRequired.Explanation.lb">
+                The robot controller has entered a safety state requiring manual
+                action to resolve.
+              </Trans>
+            }
+            literalValue={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+          />
+        )
+
+      // Error
+      case "SAFETY_STATE_UNKNOWN":
+      case "SAFETY_STATE_FAULT":
+        return (
+          <IndicatorWithExplanation
+            id={`safety-state-error-${componentId}`}
+            icon={SafetyStateErrorIcon}
+            color={theme.palette.error.main}
+            title={t("SafetyBar.SafetyState.ti")}
+            name={t("SafetyBar.SafetyState.Error.lb")}
+            label={compact ? null : t("SafetyBar.SafetyState.Error.lb")}
+            explanation={
+              <Trans i18nKey="SafetyBar.SafetyState.Error.Explanation.lb">
+                The robot controller has entered an unexpected safety state.
+              </Trans>
+            }
+            literalValue={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+          />
+        )
+      default:
+        assertUnreachable(safetyState, `Unknown safety state ${safetyState}`)
+    }
+  },
+)
+
+export default SafetyStateIndicator

package/src/components/safetyBar/icons/controller-type-physical.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M5.248 21c-.334 0-.619-.116-.853-.35a1.153 1.153 0 0 1-.351-.848c0-.333.117-.616.351-.85.234-.233.519-.35.853-.35H7.24L4.558 9.87a2.881 2.881 0 0 1-1.126-1.042A2.77 2.77 0 0 1 3 7.317c0-.793.28-1.467.838-2.023a2.774 2.774 0 0 1 2.033-.834 2.71 2.71 0 0 1 1.728.585c.494.389.832.887 1.014 1.493h3.58V5.239c0-.22.076-.406.226-.555a.76.76 0 0 1 .558-.224c.136 0 .263.035.381.104.118.07.209.167.273.292v.14l1.835-1.702a.979.979 0 0 1 .52-.279.881.881 0 0 1 .58.091l4.01 1.85a.74.74 0 0 1 .36.364.537.537 0 0 1-.002.474.592.592 0 0 1-.366.323.657.657 0 0 1-.477-.039l-3.858-1.774L13.76 6.59v1.454l2.473 2.233 3.858-1.774a.648.648 0 0 1 .485-.03.571.571 0 0 1 .358.314.513.513 0 0 1 .01.482.79.79 0 0 1-.367.357l-4.011 1.882a.881.881 0 0 1-.58.09.979.979 0 0 1-.52-.278L13.63 9.638v.14a.92.92 0 0 1-.273.275.665.665 0 0 1-.381.12.76.76 0 0 1-.558-.224.752.752 0 0 1-.225-.555V8.096h-3.58a2.82 2.82 0 0 1-.215.54 2.552 2.552 0 0 1-.323.479l5.139 9.488h2.673c.335 0 .62.116.854.35.234.233.35.516.35.849 0 .332-.116.615-.35.849a1.167 1.167 0 0 1-.854.349H5.248Zm.623-12.385c.362 0 .67-.126.924-.378a1.25 1.25 0 0 0 .38-.92 1.25 1.25 0 0 0-.38-.92 1.261 1.261 0 0 0-.924-.379 1.26 1.26 0 0 0-.925.379 1.25 1.25 0 0 0-.38.92c0 .36.127.667.38.92.254.252.562.378.925.378Z"/></svg>

package/src/components/safetyBar/icons/controller-type-virtual.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="m13.37 9.12 1.69 1.69 2.99-2.99-3.73-3.73-.95-.95-7.66 7.66-.95.95 3.99 3.99v3.44h7.55v-3.55l-4.72-4.72 1.79-1.79Zm-.91-2.99.91-.91 2.6 2.6-.91.91-2.6-2.6Zm-2.25 10.24h3.74l-1.34-1.34-.04-.04h-2.5l-3.25-3.25 4.59-4.59.92.92L9.5 10.9l5.33 5.33v1.48H10.2v-1.35l.01.01ZM2 2v4.99h1.41V3.4h3.58V2H2ZM22.21 2h-4.98v1.41h3.59v3.58h1.4V2h-.01ZM20.81 20.65h-3.58v1.4h4.98v-4.99h-1.4v3.59ZM3.4 17.06H2v4.98h4.99v-1.4H3.4v-3.58Z"/></svg>

package/src/components/safetyBar/icons/index.ts

@@ -0,0 +1,10 @@
+export { default as ControllerTypePhysicalIcon } from "./controller-type-physical.svg"
+export { default as ControllerTypeVirtualIcon } from "./controller-type-virtual.svg"
+export { default as OperationModeAutomaticIcon } from "./operation-mode-automatic.svg"
+export { default as OperationModeErrorIcon } from "./operation-mode-error.svg"
+export { default as OperationModeManualIcon } from "./operation-mode-manual.svg"
+export { default as SafetyStateErrorIcon } from "./safety-state-error.svg"
+export { default as SafetyStateEstopIcon } from "./safety-state-estop.svg"
+export { default as SafetyStateManualActionRequiredIcon } from "./safety-state-manual-action-required.svg"
+export { default as SafetyStateNormalIcon } from "./safety-state-normal.svg"
+export { default as SafetyStateStopIcon } from "./safety-state-stop.svg"

package/src/components/safetyBar/icons/operation-mode-automatic.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.306 2.768c0-.424.344-.768.768-.768h.406C19.53 2 22 4.551 22 7.699c0 3.237-2.51 5.587-5.31 5.703-.84 1.595-2.478 2.677-4.36 2.677a4.845 4.845 0 0 1-3.146-1.163c-.6 1.783 0 3.922 1.79 4.99 1.929 1.149 4.395.467 5.508-1.524l.212-.378a.75.75 0 1 1 1.308.732l-.231.414c-1.524 2.725-4.9 3.66-7.54 2.085-2.716-1.618-3.432-5.037-2.129-7.599a5.22 5.22 0 0 1-.73-2.677c0-2.192 1.335-4.063 3.212-4.793-1.195-1.427-3.29-1.96-5.08-.892-1.928 1.15-2.589 3.696-1.475 5.687l.231.413a.75.75 0 0 1-1.308.732l-.212-.377c-1.524-2.726-.62-6.211 2.02-7.785 2.716-1.619 5.943-.55 7.44 1.897l.13-.001c2.739 0 4.96 2.292 4.96 5.12 0 .284-.023.563-.066.834 1.795-.354 3.288-1.96 3.288-4.095 0-2.3-1.805-4.163-4.032-4.163h-.406a.768.768 0 0 1-.768-.768Zm.496 8.191c0 .286-.033.564-.094.831a3.62 3.62 0 0 1-.672 1.415 3.425 3.425 0 0 1-2.706 1.338 3.402 3.402 0 0 1-2.384-.98 3.598 3.598 0 0 1-.852-1.306 3.677 3.677 0 0 1-.235-1.298c0-1.623 1.046-2.994 2.48-3.435a3.37 3.37 0 0 1 1.522-.107c1.665.264 2.94 1.75 2.94 3.542Z" /></svg>

package/src/components/safetyBar/icons/operation-mode-error.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.763 16.432 13.516 5.864c-.674-1.152-2.358-1.152-3.049 0l-6.23 10.568C3.563 17.567 4.405 19 5.753 19H18.23c1.364 0 2.206-1.432 1.532-2.568ZM12 8.498c.539 0 .96.428.96.938v.066l-.32 4.708a.639.639 0 0 1-.64.592.639.639 0 0 1-.64-.592l-.32-4.708A.953.953 0 0 1 12 8.498Zm0 8.79c-.556 0-1.01-.444-1.01-.987 0-.544.454-.988 1.01-.988s1.01.444 1.01.988c0 .542-.454.987-1.01.987Z" fill="#fff" fill-opacity=".56"/></svg>

package/src/components/safetyBar/icons/operation-mode-manual.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.953 5.09a1.497 1.497 0 0 0-1.653-.518l-1.35.43a1.504 1.504 0 0 0-1.726-.376L2.858 6.97c-.736.321-1.06 1.155-.726 1.862.334.707 1.202 1.02 1.937.698l4.27-1.865 1.466 1.973v.402c0 .873-.627 1.63-1.512 1.827l-2.56.567c-1.329.295-2.27 1.431-2.27 2.74v.107c0 .26.22.469.489.469h11.117c1.329 0 2.618.435 3.656 1.233l1.665 1.28A1 1 0 0 0 22 17.47V11.062c0-.312-.108-.616-.308-.863l-3.415-4.218a1.5 1.5 0 0 0-1.618-.471l-.378.12-.866-.475a1.516 1.516 0 0 0-1.188-.114l-1.06.338-.214-.289Z"/></svg>

package/src/components/safetyBar/icons/safety-state-error.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19.763 16.432 13.516 5.864c-.674-1.152-2.358-1.152-3.049 0l-6.23 10.568C3.563 17.567 4.405 19 5.753 19H18.23c1.364 0 2.206-1.432 1.532-2.568ZM12 8.498c.539 0 .96.428.96.938v.066l-.32 4.708a.639.639 0 0 1-.64.592.639.639 0 0 1-.64-.592l-.32-4.708A.953.953 0 0 1 12 8.498Zm0 8.79c-.556 0-1.01-.444-1.01-.987 0-.544.454-.988 1.01-.988s1.01.444 1.01.988c0 .542-.454.987-1.01.987Z"/></svg>

package/src/components/safetyBar/icons/safety-state-estop.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M10.24 10.636 12 13.764l1.76-3.128h-3.52Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18.364 12a6.364 6.364 0 1 1-12.728 0 6.364 6.364 0 0 1 12.728 0ZM7.909 9.273 12 16.546l4.09-7.273H7.91Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-1.364 0a8.636 8.636 0 1 1-17.273 0 8.636 8.636 0 0 1 17.273 0Z"/></svg>

package/src/components/safetyBar/icons/safety-state-manual-action-required.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.057 15.115c-1.681 0-3.111-.59-4.29-1.768C3.59 12.17 3 10.74 3 9.057c0-.29.021-.582.064-.876a4.1 4.1 0 0 1 .214-.844.78.78 0 0 1 .273-.36c.115-.077.244-.133.389-.168a.857.857 0 0 1 .437.008c.146.04.28.12.4.24l2.806 2.787 2.26-2.261-2.775-2.786a.903.903 0 0 1-.241-.405.875.875 0 0 1-.008-.442 1.13 1.13 0 0 1 .174-.389.82.82 0 0 1 .355-.273c.268-.107.548-.182.838-.224.29-.043.581-.064.871-.064 1.682 0 3.112.59 4.29 1.768 1.179 1.178 1.768 2.608 1.768 4.29 0 .444-.042.858-.126 1.241-.084.384-.21.755-.377 1.113l5.726 5.692A2.2 2.2 0 0 1 21 18.721a2.2 2.2 0 0 1-.662 1.617A2.2 2.2 0 0 1 18.72 21a2.173 2.173 0 0 1-1.617-.679l-5.692-5.709c-.372.161-.75.285-1.133.372-.383.087-.79.13-1.222.13Z" fill="#fff" fill-opacity=".56"/></svg>

package/src/components/safetyBar/icons/safety-state-normal.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7c0 .283.092.517.275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2c1.383 0 2.683.263 3.9.788a10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z" /></svg>

package/src/components/safetyBar/icons/safety-state-stop.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M9 16h6c.283 0 .52-.096.713-.287A.968.968 0 0 0 16 15V9a.967.967 0 0 0-.287-.713A.968.968 0 0 0 15 8H9a.968.968 0 0 0-.713.287A.968.968 0 0 0 8 9v6c0 .283.096.52.287.713.192.191.43.287.713.287Zm3 6a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12c0-1.383.263-2.683.788-3.9a10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2c1.383 0 2.683.263 3.9.788a10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"/></svg>

package/src/components/utils/converters.ts

@@ -0,0 +1,90 @@
+import type { DHParameter } from "@wandelbots/nova-js/v2"
+import * as THREE from "three"
+
+export interface CoplanarityResult {
+  isCoplanar: boolean
+  normal?: THREE.Vector3
+}
+
+export function radiansToDegree(radians: number): number {
+  return radians * (180 / Math.PI)
+}
+
+export function degreesToRadians(degrees: number): number {
+  return degrees * (Math.PI / 180)
+}
+
+export function tryParseJson(json: unknown): unknown {
+  try {
+    return JSON.parse(json as string)
+  } catch {
+    return undefined
+  }
+}
+
+export function tryStringifyJson(json: unknown): string | undefined {
+  try {
+    return JSON.stringify(json)
+  } catch {
+    return undefined
+  }
+}
+
+export function orientationToQuaternion(
+  orientation: THREE.Vector3,
+): THREE.Quaternion {
+  const angle = orientation.length()
+  const quaternion = new THREE.Quaternion()
+  if (angle > 1e-6) {
+    const axis = orientation.clone().normalize()
+    quaternion.setFromAxisAngle(axis, angle)
+  }
+  return quaternion
+}
+
+export function dhParametersToPlaneSize(dhParameters: DHParameter[]) {
+  const defaultPlaneSize = 5
+  if (!dhParameters || dhParameters.length === 0) {
+    return defaultPlaneSize
+  }
+  const reachRadiusM = dhParameters.reduce((sum, p) => {
+    return sum + Math.abs(p.a ?? 0) / 1000 + Math.abs(p.d ?? 0) / 1000
+  }, 0)
+  const size = reachRadiusM * 2
+  if (!Number.isFinite(size) || size <= 0) {
+    return defaultPlaneSize
+  }
+  return size
+}
+
+export function verticesToCoplanarity(
+  vertices: THREE.Vector3[],
+): CoplanarityResult {
+  if (vertices.length < 3) {
+    console.log("Not enough vertices to define a plane")
+    return { isCoplanar: false }
+  }
+
+  // Convert Vector3d to THREE.Vector3
+  const v0 = new THREE.Vector3(vertices[0].x, vertices[0].y, vertices[0].z)
+  const v1 = new THREE.Vector3(vertices[1].x, vertices[1].y, vertices[1].z)
+  const v2 = new THREE.Vector3(vertices[2].x, vertices[2].y, vertices[2].z)
+
+  const vector1 = new THREE.Vector3().subVectors(v1, v0)
+  const vector2 = new THREE.Vector3().subVectors(v2, v0)
+  const normal = new THREE.Vector3().crossVectors(vector1, vector2).normalize()
+
+  // Check if all remaining vertices lie on the same plane
+  for (let i = 3; i < vertices.length; i++) {
+    const vi = new THREE.Vector3(vertices[i].x, vertices[i].y, vertices[i].z)
+    const vector = new THREE.Vector3().subVectors(vi, v0)
+    const dotProduct = normal.dot(vector)
+    if (Math.abs(dotProduct) > 1e-6) {
+      // Allowing a small tolerance
+      console.log("Vertices are not on the same plane")
+      return { isCoplanar: false }
+    }
+  }
+
+  return { isCoplanar: true, normal }
+}

package/src/components/utils/errorHandling.test.ts

@@ -0,0 +1,41 @@
+import axios, { AxiosError, AxiosHeaders } from "axios"
+import { expect, test } from "vitest"
+import { makeErrorMessage } from "./errorHandling"
+
+test("making useful error messages", async () => {
+  // Error objects take the message
+  const someCustomError = new Error("some custom error")
+  expect(makeErrorMessage(someCustomError)).toEqual("some custom error")
+
+  // Strings go through prefixed
+  expect(makeErrorMessage("some string")).toEqual(
+    'Unexpected error: "some string"',
+  )
+
+  // Random objects get serialized
+  expect(makeErrorMessage({ some: "object" })).toEqual(
+    'Unexpected error: {"some":"object"}',
+  )
+
+  // Axios errors with a response should include the response code
+  // and url - but not for 404, we use a friendly message for that
+  try {
+    await axios.get("http://example.com/doesnt-exist")
+    expect(true).toBe(false)
+  } catch (err) {
+    expect(makeErrorMessage(err)).toMatch(
+      "Failed to connect to the server. Please check your internet connection.",
+    )
+  }
+
+  // Not sure how to reproduce CORS errors naturally in vitest environment
+  // so let's create it manually
+  const networkError = new AxiosError("Network Error", "ERR_NETWORK", {
+    url: "http://example.com/some-cors-thing",
+    method: "post",
+    headers: new AxiosHeaders(),
+  })
+  expect(makeErrorMessage(networkError)).toEqual(
+    "Failed to connect to the server. Please check your internet connection.",
+  )
+})