@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2-pr.fix-performance-issues.594.c24b644

package/src/components/ProgramControl.tsx

@@ -1,267 +0,0 @@
-import Pause from "@mui/icons-material/Pause"
-import PlayArrow from "@mui/icons-material/PlayArrow"
-import Stop from "@mui/icons-material/Stop"
-import { useTheme } from "@mui/material/styles"
-import Box from "@mui/material/Box"
-import Button from "@mui/material/Button"
-import Typography from "@mui/material/Typography"
-import { observer } from "mobx-react-lite"
-import { useTranslation } from "react-i18next"
-import { externalizeComponent } from "../externalizeComponent"
-
-export enum ProgramState {
-  IDLE = "idle",
-  PREPARING = "preparing",
-  STARTING = "starting",
-  RUNNING = "running",
-  PAUSING = "pausing",
-  PAUSED = "paused",
-  STOPPING = "stopping",
-  COMPLETED = "completed",
-  FAILED = "failed",
-  STOPPED = "stopped",
-  ERROR = "error",
-}
-
-export interface ProgramControlProps {
-  /** The current state of the program control */
-  state: ProgramState
-  /** Callback fired when the run/resume button is clicked */
-  onRun: () => void
-  /** Callback fired when the pause button is clicked (only available in 'with_pause' variant) */
-  onPause?: () => void
-  /** Callback fired when the stop button is clicked */
-  onStop: () => void
-  /**
-   * Function to reset the component from 'stopping' state back to 'idle'.
-   * This must be called manually by the user when requiresManualReset is true.
-   */
-  onReset?: () => void
-  /**
-   * When true, the component will stay in 'stopping' state until onReset is called manually.
-   * When false (default), auto-resets to 'idle' after 2 seconds.
-   */
-  requiresManualReset?: boolean
-  /**
-   * Variant of the component:
-   * - 'with_pause': Shows run/pause/stop buttons (default)
-   * - 'without_pause': Shows only run/stop buttons
-   */
-  variant?: "with_pause" | "without_pause"
-  /** Additional CSS class name */
-  className?: string
-}
-
-interface ButtonConfig {
-  enabled: boolean
-  label: string
-  color: string
-  onClick: () => void
-}
-
-/**
- * A control component for program execution with run, pause, and stop functionality.
- *
- * Features:
- * - State machine with idle, preparing, starting, running, pausing, paused, stopping, completed, failed, stopped, and error states
- * - Two variants: with_pause (3 buttons) and without_pause (2 buttons)
- * - Optional manual reset functionality
- * - Responsive design with 110px circular buttons
- * - Material-UI theming integration
- */
-export const ProgramControl = externalizeComponent(
-  observer(
-    ({
-      state,
-      onRun,
-      onPause,
-      onStop,
-      onReset,
-      requiresManualReset = false,
-      variant = "with_pause",
-      className,
-    }: ProgramControlProps) => {
-      const theme = useTheme()
-      const { t } = useTranslation()
-
-      const getButtonConfigs = (): ButtonConfig[] => {
-        const baseConfigs: Record<string, ButtonConfig> = {
-          run: {
-            enabled:
-              state === ProgramState.IDLE ||
-              state === ProgramState.STOPPED ||
-              state === ProgramState.PAUSED ||
-              state === ProgramState.COMPLETED ||
-              state === ProgramState.FAILED ||
-              state === ProgramState.ERROR,
-            label:
-              state === ProgramState.PAUSED
-                ? t("ProgramControl.Resume.bt")
-                : state === ProgramState.ERROR || state === ProgramState.FAILED
-                  ? t("ProgramControl.Retry.bt")
-                  : t("ProgramControl.Start.bt"),
-            color: theme.palette.success.main,
-            onClick: onRun,
-          },
-          pause: {
-            enabled: state === ProgramState.RUNNING,
-            label: t("ProgramControl.Pause.bt"),
-            color: "#FFFFFF33",
-            onClick: onPause || (() => {}),
-          },
-          stop: {
-            enabled:
-              state === ProgramState.PREPARING ||
-              state === ProgramState.STARTING ||
-              state === ProgramState.RUNNING ||
-              state === ProgramState.PAUSING ||
-              state === ProgramState.PAUSED,
-            label: t("ProgramControl.Stop.bt"),
-            color: theme.palette.error.main,
-            onClick: onStop,
-          },
-        }
-
-        if (variant === "without_pause") {
-          return [baseConfigs.run, baseConfigs.stop]
-        }
-
-        return [baseConfigs.run, baseConfigs.pause, baseConfigs.stop]
-      }
-
-      const getButtonIcon = (index: number) => {
-        const iconProps = { sx: { fontSize: "55px" } }
-
-        if (variant === "without_pause") {
-          return index === 0 ? (
-            <PlayArrow {...iconProps} />
-          ) : (
-            <Stop {...iconProps} />
-          )
-        }
-
-        switch (index) {
-          case 0:
-            return <PlayArrow {...iconProps} />
-          case 1:
-            return <Pause {...iconProps} />
-          case 2:
-            return <Stop {...iconProps} />
-          default:
-            return null
-        }
-      }
-
-      const buttonConfigs = getButtonConfigs()
-
-      return (
-        <Box
-          className={className}
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: 2,
-          }}
-        >
-          <Box
-            sx={{
-              display: "flex",
-              gap: "40px",
-              flexWrap: "wrap",
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            {buttonConfigs.map((config, index) => (
-              <Box
-                key={config.label}
-                sx={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  gap: 1,
-                }}
-              >
-                <Button
-                  variant="contained"
-                  disabled={
-                    !config.enabled ||
-                    state === ProgramState.PREPARING ||
-                    state === ProgramState.STARTING ||
-                    state === ProgramState.PAUSING ||
-                    (state === ProgramState.STOPPING && !requiresManualReset)
-                  }
-                  onClick={config.onClick}
-                  sx={{
-                    width: "88px",
-                    height: "88px",
-                    borderRadius: "88px",
-                    backgroundColor: config.color,
-                    opacity:
-                      config.enabled &&
-                      state !== ProgramState.PREPARING &&
-                      state !== ProgramState.STARTING &&
-                      state !== ProgramState.PAUSING &&
-                      !(state === ProgramState.STOPPING && !requiresManualReset)
-                        ? 1
-                        : 0.3,
-                    "&:hover": {
-                      backgroundColor: config.color,
-                      opacity:
-                        config.enabled &&
-                        state !== ProgramState.PREPARING &&
-                        state !== ProgramState.STARTING &&
-                        state !== ProgramState.PAUSING &&
-                        !(
-                          state === ProgramState.STOPPING &&
-                          !requiresManualReset
-                        )
-                          ? 0.8
-                          : 0.3,
-                    },
-                    "&:disabled": {
-                      backgroundColor: config.color,
-                      opacity: 0.3,
-                    },
-                    minWidth: "88px",
-                    flexShrink: 0,
-                  }}
-                >
-                  {getButtonIcon(index)}
-                </Button>
-
-                <Typography
-                  variant="body1"
-                  sx={{
-                    color:
-                      config.enabled &&
-                      state !== ProgramState.PREPARING &&
-                      state !== ProgramState.STARTING &&
-                      state !== ProgramState.PAUSING &&
-                      !(state === ProgramState.STOPPING && !requiresManualReset)
-                        ? config.color
-                        : theme.palette.text.disabled,
-                    textAlign: "center",
-                    opacity:
-                      config.enabled &&
-                      state !== ProgramState.PREPARING &&
-                      state !== ProgramState.STARTING &&
-                      state !== ProgramState.PAUSING &&
-                      !(state === ProgramState.STOPPING && !requiresManualReset)
-                        ? 1
-                        : 0.3,
-                  }}
-                >
-                  {config.label}
-                </Typography>
-              </Box>
-            ))}
-          </Box>
-        </Box>
-      )
-    },
-  ),
-)
-
-export default ProgramControl

package/src/components/ProgramStateIndicator.tsx

@@ -1,195 +0,0 @@
-import { useTheme } from "@mui/material/styles"
-import Chip from "@mui/material/Chip"
-import Typography from "@mui/material/Typography"
-import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"
-import { observer } from "mobx-react-lite"
-import { useTranslation } from "react-i18next"
-import { externalizeComponent } from "../externalizeComponent"
-import { ProgramState } from "./ProgramControl"
-
-export interface ProgramStateIndicatorProps {
-  /** The current state of the program */
-  programState: ProgramState
-  /** The current safety state of the robot controller */
-  safetyState: SafetyStateType
-  /** The current operation mode of the robot controller */
-  operationMode: OperationMode
-  /** Additional CSS class name */
-  className?: string
-}
-
-/**
- * A state indicator component that displays the current program execution state
- * combined with robot controller safety and operation mode states.
- *
- * Features:
- * - Combines program state with safety and operation mode states
- * - Color-coded based on state severity (success, warning, error)
- * - Rendered as Material-UI filled chip
- * - Localization support via react-i18next
- */
-export const ProgramStateIndicator = externalizeComponent(
-  observer(
-    ({
-      programState,
-      safetyState,
-      operationMode,
-      className,
-    }: ProgramStateIndicatorProps) => {
-      const theme = useTheme()
-      const { t } = useTranslation()
-
-      const getStateInfo = () => {
-        // First check for emergency stop or critical safety states
-        if (
-          safetyState === "SAFETY_STATE_DEVICE_EMERGENCY_STOP" ||
-          safetyState === "SAFETY_STATE_ROBOT_EMERGENCY_STOP" ||
-          safetyState === "SAFETY_STATE_STOP_0" ||
-          safetyState === "SAFETY_STATE_STOP_1" ||
-          safetyState === "SAFETY_STATE_STOP_2" ||
-          safetyState === "SAFETY_STATE_PROTECTIVE_STOP" ||
-          safetyState === "SAFETY_STATE_STOP" ||
-          safetyState === "SAFETY_STATE_REDUCED" ||
-          safetyState === "SAFETY_STATE_MASTERING" ||
-          safetyState === "SAFETY_STATE_CONFIRM_SAFETY" ||
-          safetyState === "SAFETY_STATE_OPERATOR_SAFETY" ||
-          safetyState === "SAFETY_STATE_RECOVERY" ||
-          safetyState === "SAFETY_STATE_VIOLATION"
-        ) {
-          return {
-            label: t("ProgramStateIndicator.EStop.lb"),
-            color: theme.palette.error.main,
-          }
-        }
-
-        // Check for error states
-        if (
-          safetyState === "SAFETY_STATE_UNKNOWN" ||
-          safetyState === "SAFETY_STATE_FAULT"
-        ) {
-          return {
-            label: t("ProgramStateIndicator.Error.lb"),
-            color: theme.palette.error.main,
-          }
-        }
-
-        // For normal safety states, check program state
-        if (safetyState === "SAFETY_STATE_NORMAL") {
-          switch (programState) {
-            case ProgramState.PREPARING:
-              return {
-                label: t("ProgramStateIndicator.Preparing.lb"),
-                color: theme.palette.warning.main,
-              }
-            case ProgramState.STARTING:
-              return {
-                label: t("ProgramStateIndicator.Starting.lb"),
-                color: theme.palette.warning.main,
-              }
-            case ProgramState.RUNNING:
-              return {
-                label: t("ProgramStateIndicator.Running.lb"),
-                color: theme.palette.success.main,
-              }
-            case ProgramState.PAUSING:
-              return {
-                label: t("ProgramStateIndicator.Pausing.lb"),
-                color: theme.palette.warning.main,
-              }
-            case ProgramState.PAUSED:
-              return {
-                label: t("ProgramStateIndicator.Paused.lb"),
-                color: theme.palette.grey[600],
-              }
-            case ProgramState.STOPPING:
-              return {
-                label: t("ProgramStateIndicator.Stopping.lb"),
-                color: theme.palette.warning.main,
-              }
-            case ProgramState.COMPLETED:
-              return {
-                label: t("ProgramStateIndicator.Completed.lb"),
-                color: theme.palette.success.main,
-              }
-            case ProgramState.FAILED:
-              return {
-                label: t("ProgramStateIndicator.Failed.lb"),
-                color: theme.palette.error.main,
-              }
-            case ProgramState.STOPPED:
-              return {
-                label: t("ProgramStateIndicator.Stopped.lb"),
-                color: theme.palette.warning.main,
-              }
-            case ProgramState.ERROR:
-              return {
-                label: t("ProgramStateIndicator.Error.lb"),
-                color: theme.palette.error.main,
-              }
-            default:
-              return {
-                label: t("ProgramStateIndicator.Ready.lb"),
-                color: theme.palette.success.main,
-              }
-          }
-        }
-
-        // Default fallback
-        return {
-          label: t("ProgramStateIndicator.Idle.lb"),
-          color: theme.palette.grey[600],
-        }
-      }
-
-      const { label, color } = getStateInfo()
-
-      // Add operation mode suffix if not automatic
-      const getOperationModeText = () => {
-        switch (operationMode) {
-          case "OPERATION_MODE_AUTO":
-            return t("ProgramStateIndicator.Auto.lb")
-          case "OPERATION_MODE_MANUAL":
-            return t("ProgramStateIndicator.Manual.lb")
-          case "OPERATION_MODE_MANUAL_T1":
-            return t("ProgramStateIndicator.ManualT1.lb")
-          case "OPERATION_MODE_MANUAL_T2":
-            return t("ProgramStateIndicator.ManualT2.lb")
-          default:
-            return t("ProgramStateIndicator.Auto.lb") // Default to Auto for unknown modes
-        }
-      }
-
-      const fullLabel = `${label} / ${getOperationModeText()}`
-
-      return (
-        <Chip
-          className={className}
-          label={
-            <Typography
-              variant="body2"
-              sx={{
-                fontSize: "0.75rem", // Smaller than body2
-                lineHeight: 1.2,
-              }}
-            >
-              {fullLabel}
-            </Typography>
-          }
-          variant="filled"
-          sx={{
-            backgroundColor: color,
-            color: theme.palette.getContrastText(color),
-            fontWeight: 500,
-            height: "auto",
-            "& .MuiChip-label": {
-              paddingX: 1.5,
-              paddingY: 0.5,
-            },
-          }}
-        />
-      )
-    },
-  ),
-)
-
-export default ProgramStateIndicator