@wandelbots/wandelbots-js-react-components 2.27.1-pr.feature-add-program-control-component.367.8730636 → 2.27.1-pr.feature-add-cycle-timer.368.c18c8bd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.27.1-pr.feature-add-program-control-component.367.8730636",
+  "version": "2.27.1-pr.feature-add-cycle-timer.368.c18c8bd",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -140,6 +140,7 @@
   },
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
+    "@mui/x-charts": "^8.9.0",
     "@shikijs/monaco": "^3.1.0",
     "i18next-browser-languagedetector": "^8.0.4",
     "lodash-es": "^4.17.21",

package/src/components/CycleTimer.tsx

@@ -0,0 +1,292 @@
+import { Box, Typography, useTheme } from "@mui/material"
+import { Gauge } from "@mui/x-charts/Gauge"
+import { observer } from "mobx-react-lite"
+import { useCallback, useEffect, useRef, useState } from "react"
+import { useTranslation } from "react-i18next"
+import { externalizeComponent } from "../externalizeComponent"
+
+export interface CycleTimerProps {
+  /** Callback that receives the startNewCycle function for controlling the timer */
+  onCycleComplete: (startNewCycle: (maxTimeSeconds: number) => void) => void
+  /** Callback fired when a cycle actually completes (reaches zero) */
+  onCycleEnd?: () => void
+  /** Whether the timer should start automatically when maxTime is set */
+  autoStart?: boolean
+  /** Visual variant of the timer */
+  variant?: "default" | "small"
+  /** For small variant: whether to show remaining time details (compact hides them) */
+  compact?: boolean
+  /** Additional CSS classes */
+  className?: string
+}
+
+/**
+ * A circular gauge timer component that shows the remaining time of a cycle
+ *
+ * Features:
+ * - Circular gauge with 264px diameter and 40px thickness
+ * - Shows remaining time prominently in the center (60px font)
+ * - Displays "remaining time" label at top and total time at bottom
+ * - Automatically counts down and triggers callback when reaching zero
+ * - Fully localized with i18next
+ * - Material-UI theming integration
+ * - Small variant with animated progress icon (gauge border only) next to text
+ *
+ * @param onCycleComplete - Callback that receives the startNewCycle function for controlling the timer
+ * @param onCycleEnd - Optional callback fired when a cycle actually completes (reaches zero)
+ * @param autoStart - Whether to start timer automatically (default: true)
+ * @param variant - Visual variant: "default" (large gauge) or "small" (animated icon with text)
+ * @param compact - For small variant: whether to hide remaining time details
+ * @param className - Additional CSS classes
+ */
+export const CycleTimer = externalizeComponent(
+  observer(
+    ({
+      onCycleComplete,
+      onCycleEnd,
+      autoStart = true,
+      variant = "default",
+      compact = false,
+      className,
+    }: CycleTimerProps) => {
+      const theme = useTheme()
+      const { t } = useTranslation()
+      const [remainingTime, setRemainingTime] = useState(0)
+      const [maxTime, setMaxTime] = useState(0)
+      const [isRunning, setIsRunning] = useState(false)
+      const intervalRef = useRef<NodeJS.Timeout | null>(null)
+
+      const startNewCycle = useCallback(
+        (maxTimeSeconds: number) => {
+          console.log(`Starting new cycle with ${maxTimeSeconds} seconds`)
+          setMaxTime(maxTimeSeconds)
+          setRemainingTime(maxTimeSeconds)
+          if (autoStart) {
+            console.log("Auto-start enabled, starting timer")
+            setIsRunning(true)
+          } else {
+            console.log("Auto-start disabled, timer set but not started")
+          }
+        },
+        [autoStart],
+      )
+
+      // Call onCycleComplete immediately to provide the startNewCycle function
+      useEffect(() => {
+        let isMounted = true
+        const timeoutId = setTimeout(() => {
+          if (isMounted) {
+            onCycleComplete(startNewCycle)
+          }
+        }, 0)
+
+        return () => {
+          isMounted = false
+          clearTimeout(timeoutId)
+        }
+      }, [onCycleComplete, startNewCycle])
+
+      useEffect(() => {
+        if (isRunning && remainingTime > 0) {
+          intervalRef.current = setInterval(() => {
+            setRemainingTime((prev) => {
+              if (prev <= 1) {
+                setIsRunning(false)
+                // Call onCycleEnd when timer reaches zero to notify about completion
+                if (onCycleEnd) {
+                  setTimeout(() => onCycleEnd(), 0)
+                }
+                console.log("Cycle completed! Timer reached zero.")
+                return 0
+              }
+              return prev - 1
+            })
+          }, 1000)
+        } else {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current)
+            intervalRef.current = null
+          }
+        }
+
+        return () => {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current)
+          }
+        }
+      }, [isRunning, remainingTime, onCycleEnd])
+
+      const formatTime = (seconds: number): string => {
+        const minutes = Math.floor(seconds / 60)
+        const remainingSeconds = seconds % 60
+        return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`
+      }
+
+      const progressValue =
+        maxTime > 0 ? ((maxTime - remainingTime) / maxTime) * 100 : 0
+
+      // Small variant: horizontal layout with gauge icon and text
+      if (variant === "small") {
+        return (
+          <Box
+            className={className}
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              gap: 0.125, // Minimal gap - 1px
+            }}
+          >
+            {/* Animated progress gauge icon */}
+            <Box
+              sx={{
+                position: "relative",
+                width: 40,
+                height: 40,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                borderRadius: "50%",
+                overflow: "visible",
+              }}
+            >
+              <Gauge
+                width={40}
+                height={40}
+                value={progressValue}
+                valueMin={0}
+                valueMax={100}
+                innerRadius="70%"
+                outerRadius="95%"
+                sx={{
+                  [`& .MuiGauge-valueArc`]: {
+                    fill: theme.palette.success.main,
+                  },
+                  [`& .MuiGauge-referenceArc`]: {
+                    fill: theme.palette.success.main,
+                    opacity: 0.3,
+                  },
+                  [`& .MuiGauge-valueText`]: {
+                    display: "none",
+                  },
+                  [`& .MuiGauge-text`]: {
+                    display: "none",
+                  },
+                  [`& text`]: {
+                    display: "none",
+                  },
+                }}
+              />
+            </Box>
+
+            {/* Timer text display */}
+            <Typography
+              variant="body2"
+              sx={{
+                color: theme.palette.text.primary,
+                fontSize: "14px",
+              }}
+            >
+              {compact
+                ? // Compact mode: show only remaining time
+                  formatTime(remainingTime)
+                : // Full mode: show "remaining / total min." format
+                  `${formatTime(remainingTime)} / ${formatTime(maxTime)} ${t("CycleTimer.Min.lb")}`}
+            </Typography>
+          </Box>
+        )
+      }
+
+      // Default variant: large circular gauge with centered content
+      return (
+        <Box
+          className={className}
+          sx={{
+            position: "relative",
+            width: 264,
+            height: 264,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Gauge
+            width={264}
+            height={264}
+            value={progressValue}
+            valueMin={0}
+            valueMax={100}
+            innerRadius="71%"
+            outerRadius="90%"
+            sx={{
+              [`& .MuiGauge-valueArc`]: {
+                fill: theme.palette.success.main,
+              },
+              [`& .MuiGauge-referenceArc`]: {
+                fill: "white",
+                stroke: "transparent",
+              },
+            }}
+          />
+
+          {/* Center content overlay with timer information */}
+          <Box
+            sx={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              width: 187, // 71% of 264 = ~187px inner radius
+              height: 187,
+              borderRadius: "50%",
+              backgroundColor: theme.palette.backgroundPaperElevation?.[8],
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              textAlign: "center",
+              gap: 1,
+            }}
+          >
+            {/* "remaining time" label */}
+            <Typography
+              variant="body2"
+              sx={{
+                fontSize: "12px",
+                color: theme.palette.text.secondary,
+                marginBottom: 0.5,
+              }}
+            >
+              {t("CycleTimer.RemainingTime.lb")}
+            </Typography>
+
+            {/* Main timer display */}
+            <Typography
+              variant="h1"
+              sx={{
+                fontSize: "48px",
+                fontWeight: 500,
+                color: theme.palette.text.primary,
+                lineHeight: 1,
+                marginBottom: 0.5,
+              }}
+            >
+              {formatTime(remainingTime)}
+            </Typography>
+
+            {/* Total time display */}
+            <Typography
+              variant="body2"
+              sx={{
+                fontSize: "12px",
+                color: theme.palette.text.secondary,
+              }}
+            >
+              {t("CycleTimer.Of.lb")} {formatTime(maxTime)}{" "}
+              {t("CycleTimer.Min.lb")}
+            </Typography>
+          </Box>
+        </Box>
+      )
+    },
+  ),
+)

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

@@ -44,8 +44,7 @@
   "Jogging.Cartesian.bt": "Kartesisch",
   "Jogging.Joints.bt": "Gelenke",
   "Jogging.Velocity.bt": "Geschwindigkeit",
-  "ProgramControl.Run.bt": "Starten",
-  "ProgramControl.Resume.bt": "Fortsetzen",
-  "ProgramControl.Pause.bt": "Pausieren",
-  "ProgramControl.Stop.bt": "Stoppen"
+  "CycleTimer.RemainingTime.lb": "Verbleibende Zeit",
+  "CycleTimer.Of.lb": "von",
+  "CycleTimer.Min.lb": "min."
 }

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

@@ -45,8 +45,7 @@
   "Jogging.Cartesian.bt": "Cartesian",
   "Jogging.Joints.bt": "Joints",
   "Jogging.Velocity.bt": "Velocity",
-  "ProgramControl.Run.bt": "Run",
-  "ProgramControl.Resume.bt": "Resume",
-  "ProgramControl.Pause.bt": "Pause",
-  "ProgramControl.Stop.bt": "Stop"
+  "CycleTimer.RemainingTime.lb": "remaining time",
+  "CycleTimer.Of.lb": "of",
+  "CycleTimer.Min.lb": "min."
 }

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from "./components/3d-viewport/PresetEnvironment"
 export * from "./components/3d-viewport/SafetyZonesRenderer"
 export * from "./components/3d-viewport/TrajectoryRenderer"
+export * from "./components/CycleTimer"
 export * from "./components/jogging/JoggingCartesianAxisControl"
 export * from "./components/jogging/JoggingJointRotationControl"
 export * from "./components/jogging/JoggingPanel"
@@ -9,7 +10,6 @@ export * from "./components/jogging/PoseCartesianValues"
 export * from "./components/jogging/PoseJointValues"
 export * from "./components/LoadingCover"
 export * from "./components/modal/NoMotionGroupModal"
-export * from "./components/ProgramControl"
 export * from "./components/robots/AxisConfig"
 export * from "./components/robots/Robot"
 export { defaultGetModel } from "./components/robots/robotModelLogic"

package/dist/components/ProgramControl.d.ts

@@ -1,43 +0,0 @@
-export type ProgramState = "idle" | "running" | "paused" | "stopping";
-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;
-}
-/**
- * A control component for program execution with run, pause, and stop functionality.
- *
- * Features:
- * - State machine with idle, running, paused, and stopping 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 declare const ProgramControl: (({ state, onRun, onPause, onStop, onReset, requiresManualReset, variant, className, }: ProgramControlProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-//# sourceMappingURL=ProgramControl.d.ts.map

package/dist/components/ProgramControl.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProgramControl.d.ts","sourceRoot":"","sources":["../../src/components/ProgramControl.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;AAErE,MAAM,WAAW,mBAAmB;IAClC,+CAA+C;IAC/C,KAAK,EAAE,YAAY,CAAA;IACnB,2DAA2D;IAC3D,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,+FAA+F;IAC/F,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,qDAAqD;IACrD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,GAAG,eAAe,CAAA;IACxC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AASD;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,0FAWpB,mBAAmB;;CAuJzB,CAAA"}

package/src/components/ProgramControl.tsx

@@ -1,217 +0,0 @@
-import { Pause, PlayArrow, Stop } from "@mui/icons-material"
-import { Box, Button, Typography, useTheme } from "@mui/material"
-import { observer } from "mobx-react-lite"
-import { useTranslation } from "react-i18next"
-import { externalizeComponent } from "../externalizeComponent"
-
-export type ProgramState = "idle" | "running" | "paused" | "stopping"
-
-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, running, paused, and stopping 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 === "idle" || state === "paused",
-            label:
-              state === "paused"
-                ? t("ProgramControl.Resume.bt")
-                : t("ProgramControl.Run.bt"),
-            color: theme.palette.success.main,
-            onClick: onRun,
-          },
-          pause: {
-            enabled: state === "running",
-            label: t("ProgramControl.Pause.bt"),
-            color: "#FFFFFF33",
-            onClick: onPause || (() => {}),
-          },
-          stop: {
-            enabled: state === "running" || state === "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 === "stopping" && !requiresManualReset)
-                  }
-                  onClick={config.onClick}
-                  sx={{
-                    width: "110px",
-                    height: "110px",
-                    borderRadius: "110px",
-                    backgroundColor: config.color,
-                    opacity:
-                      config.enabled &&
-                      !(state === "stopping" && !requiresManualReset)
-                        ? 1
-                        : 0.3,
-                    "&:hover": {
-                      backgroundColor: config.color,
-                      opacity:
-                        config.enabled &&
-                        !(state === "stopping" && !requiresManualReset)
-                          ? 0.8
-                          : 0.3,
-                    },
-                    "&:disabled": {
-                      backgroundColor: config.color,
-                      opacity: 0.3,
-                    },
-                    minWidth: "110px",
-                    flexShrink: 0,
-                  }}
-                >
-                  {getButtonIcon(index)}
-                </Button>
-
-                <Typography
-                  variant="body1"
-                  sx={{
-                    color:
-                      config.enabled &&
-                      !(state === "stopping" && !requiresManualReset)
-                        ? config.color
-                        : theme.palette.text.disabled,
-                    textAlign: "center",
-                    opacity:
-                      config.enabled &&
-                      !(state === "stopping" && !requiresManualReset)
-                        ? 1
-                        : 0.3,
-                  }}
-                >
-                  {config.label}
-                </Typography>
-              </Box>
-            ))}
-          </Box>
-        </Box>
-      )
-    },
-  ),
-)