@wandelbots/wandelbots-js-react-components 2.26.0 → 2.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.26.0",
+  "version": "2.27.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/safetyBar/ControllerTypeIndicator.tsx

@@ -10,6 +10,7 @@ interface ControllerTypeIndicatorProps {
   motionGroupId: string
   anchorOrigin?: PopoverOrigin
   transformOrigin?: PopoverOrigin
+  compact: boolean
 }
 
 export const ControllerTypeIndicator = observer(
@@ -18,6 +19,7 @@ export const ControllerTypeIndicator = observer(
     motionGroupId,
     anchorOrigin,
     transformOrigin,
+    compact,
   }: ControllerTypeIndicatorProps) => {
     const theme = useTheme()
     const { t } = useTranslation()
@@ -29,6 +31,7 @@ export const ControllerTypeIndicator = observer(
           icon={ControllerTypeVirtualIcon}
           color={theme.palette.tertiary.main}
           name={t("SafetyBar.ControllerType.Virtual.lb")}
+          label={compact ? null : t("SafetyBar.ControllerType.Virtual.lb")}
           explanation={
             <Trans
               i18nKey="SafetyBar.MotionGroup.Virtual.Explanation.lb"
@@ -53,6 +56,7 @@ export const ControllerTypeIndicator = observer(
         icon={ControllerTypePhysicalIcon}
         color={theme.palette.primary.main}
         name={t("SafetyBar.ControllerType.Physical.lb")}
+        label={compact ? null : t("SafetyBar.ControllerType.Physical.lb")}
         explanation={
           <Trans
             i18nKey="SafetyBar.MotionGroup.Physical.Explanation.lb"

package/src/components/safetyBar/IndicatorWithExplanation.tsx

@@ -15,6 +15,7 @@ export type IndicatorWithExplanationProps = {
   color: TypographyProps["color"]
   title?: ReactNode
   name: ReactNode
+  label?: ReactNode
   explanation: ReactNode
   literalValue?: string
   anchorOrigin?: PopoverOrigin
@@ -28,6 +29,7 @@ export const IndicatorWithExplanation = observer(
     color,
     title,
     name,
+    label,
     explanation,
     literalValue,
     anchorOrigin,
@@ -56,6 +58,8 @@ export const IndicatorWithExplanation = observer(
           aria-haspopup="true"
           onMouseEnter={state.openPopover}
           onMouseLeave={state.closePopover}
+          direction="row"
+          spacing={1}
           sx={{
             cursor: "pointer",
           }}
@@ -66,6 +70,9 @@ export const IndicatorWithExplanation = observer(
               color,
             }}
           />
+          {label && (<div style={{
+              color,
+            }}>{label}</div>)}
         </Stack>
         <Popover
           id={id}

package/src/components/safetyBar/OperationModeIndicator.tsx

@@ -11,6 +11,7 @@ interface OperationModeIndicatorProps {
   operationMode: RobotControllerStateOperationModeEnum
   anchorOrigin?: PopoverOrigin
   transformOrigin?: PopoverOrigin
+  compact: boolean
 }
 
 export const OperationModeIndicator = observer(
@@ -18,6 +19,7 @@ export const OperationModeIndicator = observer(
     operationMode,
     anchorOrigin,
     transformOrigin,
+    compact
   }: OperationModeIndicatorProps) => {
     const { t } = useTranslation()
     const theme = useTheme()
@@ -30,6 +32,7 @@ export const OperationModeIndicator = observer(
             icon={OperationModeAutomaticIcon}
             title={t("SafetyBar.OperationMode.ti")}
             name={t("SafetyBar.OperationMode.Automatic.ti")}
+            label={compact ? null : t("SafetyBar.OperationMode.Automatic.ti")}
             color={"rgba(255, 255, 255, 0.57)"}
             explanation={
               <Trans i18nKey="SafetyBar.OperationMode.Auto.Explanation.lb">
@@ -51,6 +54,7 @@ export const OperationModeIndicator = observer(
             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
@@ -72,6 +76,7 @@ export const OperationModeIndicator = observer(
             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.

package/src/components/safetyBar/SafetyBar.tsx

@@ -16,40 +16,56 @@ export interface SafetyBarProps {
   safetyState: RobotControllerStateSafetyStateEnum
   anchorOrigin?: PopoverOrigin
   transformOrigin?: PopoverOrigin
+  compact?: boolean
 }
 
 export const SafetyBar = externalizeComponent(
-  observer((props: SafetyBarProps) => {
-    return (
-      <Stack
-        direction="row"
-        gap="8px"
-        alignItems="center"
-        sx={{ height: "24px" }}
-      >
-        <SafetyStateIndicator
-          safetyState={props.safetyState}
-          anchorOrigin={props.anchorOrigin}
-          transformOrigin={props.transformOrigin}
-        />
+  observer(
+    ({
+      isVirtual,
+      motionGroupId,
+      operationMode,
+      safetyState,
+      anchorOrigin,
+      transformOrigin,
+      compact = true,
+    }: SafetyBarProps) => {
+      const gap = compact ? 1 : 2
 
-        <Divider orientation="vertical" flexItem />
+      return (
+        <Stack
+          direction="row"
+          gap={gap}
+          alignItems="center"
+          sx={{ height: "24px" }}
+        >
+          <SafetyStateIndicator
+            safetyState={safetyState}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+            compact={compact}
+          />
 
-        <OperationModeIndicator
-          operationMode={props.operationMode}
-          anchorOrigin={props.anchorOrigin}
-          transformOrigin={props.transformOrigin}
-        />
+          <Divider orientation="vertical" flexItem />
 
-        <Divider orientation="vertical" flexItem />
+          <OperationModeIndicator
+            operationMode={operationMode}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+            compact={compact}
+          />
 
-        <ControllerTypeIndicator
-          isVirtual={props.isVirtual}
-          motionGroupId={props.motionGroupId}
-          anchorOrigin={props.anchorOrigin}
-          transformOrigin={props.transformOrigin}
-        />
-      </Stack>
-    )
-  }),
+          <Divider orientation="vertical" flexItem />
+
+          <ControllerTypeIndicator
+            isVirtual={isVirtual}
+            motionGroupId={motionGroupId}
+            anchorOrigin={anchorOrigin}
+            transformOrigin={transformOrigin}
+            compact={compact}
+          />
+        </Stack>
+      )
+    },
+  ),
 )

package/src/components/safetyBar/SafetyStateIndicator.tsx

@@ -14,6 +14,7 @@ interface SafetyStateIndicatorProps {
   safetyState: RobotControllerStateSafetyStateEnum
   anchorOrigin?: PopoverOrigin
   transformOrigin?: PopoverOrigin
+  compact: boolean
 }
 
 export const SafetyStateIndicator = observer(
@@ -21,6 +22,7 @@ export const SafetyStateIndicator = observer(
     safetyState,
     anchorOrigin,
     transformOrigin,
+    compact,
   }: SafetyStateIndicatorProps) => {
     const { t } = useTranslation()
     const theme = useTheme()
@@ -33,6 +35,7 @@ export const SafetyStateIndicator = observer(
             id="safety-state-normal"
             title={t("SafetyBar.SafetyState.ti")}
             name={t("SafetyBar.SafetyState.Normal.lb")}
+            label={compact ? null :  t("SafetyBar.SafetyState.Normal.lb")}
             icon={SafetyStateNormalIcon}
             color={"rgba(255, 255, 255, 0.57)"}
             explanation={
@@ -41,6 +44,7 @@ export const SafetyStateIndicator = observer(
                 not prevented by this state.
               </Trans>
             }
+
             anchorOrigin={anchorOrigin}
             transformOrigin={transformOrigin}
           />
@@ -54,6 +58,7 @@ export const SafetyStateIndicator = observer(
             id="safety-state-estop"
             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={
@@ -81,6 +86,7 @@ export const SafetyStateIndicator = observer(
             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">
@@ -108,6 +114,7 @@ export const SafetyStateIndicator = observer(
             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
@@ -130,6 +137,7 @@ export const SafetyStateIndicator = observer(
             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.

package/src/i18n/locales/de/translations.json

@@ -17,8 +17,8 @@
   "SafetyBar.ActivationToggle.Activated.bt": "Aktiviert",
   "SafetyBar.ActivationToggle.Activating.bt": "Wird aktiviert…",
   "SafetyBar.ActivationToggle.Deactivating.bt": "Wird deaktiviert…",
-  "SafetyBar.ControllerType.Physical.lb": "Physische Robotersteuerung",
-  "SafetyBar.ControllerType.Virtual.lb": "Virtuelle Robotersteuerung",
+  "SafetyBar.ControllerType.Physical.lb": "Physisch",
+  "SafetyBar.ControllerType.Virtual.lb": "Virtuell",
   "SafetyBar.MotionGroup.Physical.Explanation.lb": "<code>{{motionGroupId}}</code> ist ein physische Robotersteuerung. Für die Bewegung dieses Roboters sind <strong>Sicherheitsmaßnahmen</strong> aktiv.",
   "SafetyBar.MotionGroup.Virtual.Explanation.lb": "<1>{{motionGroupId}}</1> ist eine virtuelle Robotersteuerung ohne physisches Gegenstück. Der Roboter kann ohne Sicherheitsmaßnahmen bewegt werden.",
   "SafetyBar.OperationMode.Auto.Explanation.lb": "Automatischer Betriebsmodus der Robotersteuerung aktiv. Automatisierte Bewegung ohne manuelle Bestätigung freigegeben.",

package/src/i18n/locales/en/translations.json

@@ -18,8 +18,8 @@
   "SafetyBar.ActivationToggle.Activated.bt": "Activated",
   "SafetyBar.ActivationToggle.Activating.bt": "Activating",
   "SafetyBar.ActivationToggle.Deactivating.bt": "Deactivating",
-  "SafetyBar.ControllerType.Physical.lb": "Physical controller",
-  "SafetyBar.ControllerType.Virtual.lb": "Virtual controller",
+  "SafetyBar.ControllerType.Physical.lb": "Physical",
+  "SafetyBar.ControllerType.Virtual.lb": "Virtual",
   "SafetyBar.MotionGroup.Physical.Explanation.lb": "<code>{{motionGroupId}}</code> is a physical robot controller. <strong>Safety precautions</strong> are active for the movement of this robot.",
   "SafetyBar.MotionGroup.Virtual.Explanation.lb": "<1>{{motionGroupId}}</1> is a virtual robot controller with no physical counterpart. It can be freely manipulated without safety precautions.",
   "SafetyBar.OperationMode.Auto.Explanation.lb": "Automatic operation mode active. Automated movement without manual confirmation enabled.",