@wandelbots/wandelbots-js-react-components 2.34.0 → 2.34.1-pr.feature-robot-precondition-list.372.c1de8ff

package/src/components/LogPanel.tsx

@@ -0,0 +1,69 @@
+import type { SxProps } from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { useEffect, useMemo, useRef } from "react"
+import { externalizeComponent } from "../externalizeComponent"
+import { LogStore } from "./LogStore"
+import { LogViewer } from "./LogViewer"
+
+export type LogPanelProps = {
+  /** Log store instance to use, or create one automatically if not provided */
+  store?: LogStore
+  /** Height of the component */
+  height?: string | number
+  /** Additional styles */
+  sx?: SxProps
+  /** Ref to the log store for external access */
+  onStoreReady?: (store: LogStore) => void
+}
+
+/**
+ * A complete log panel component with built-in state management.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const [logStore, setLogStore] = useState<LogStore>()
+ *
+ *   return (
+ *     <LogPanel
+ *       height={400}
+ *       onStoreReady={setLogStore}
+ *     />
+ *   )
+ * }
+ *
+ * // Then use the store to add messages
+ * logStore?.addInfo("Operation completed successfully")
+ * logStore?.addError("Something went wrong")
+ * logStore?.addWarning("Warning message")
+ * ```
+ */
+export const LogPanel = externalizeComponent(
+  observer((props: LogPanelProps) => {
+    const { store: externalStore, onStoreReady, ...logViewerProps } = props
+    const onStoreReadyRef = useRef(onStoreReady)
+
+    // Update ref when callback changes
+    useEffect(() => {
+      onStoreReadyRef.current = onStoreReady
+    }, [onStoreReady])
+
+    const store = useMemo(() => {
+      const logStore = externalStore || new LogStore()
+      onStoreReadyRef.current?.(logStore)
+      return logStore
+    }, [externalStore])
+
+    const handleClear = () => {
+      store.clearMessages()
+    }
+
+    return (
+      <LogViewer
+        {...logViewerProps}
+        messages={store.messages}
+        onClear={handleClear}
+      />
+    )
+  }),
+)

package/src/components/LogStore.ts

@@ -0,0 +1,44 @@
+import { action, makeObservable, observable } from "mobx"
+import type { LogLevel, LogMessage } from "./LogViewer"
+
+export class LogStore {
+  messages: LogMessage[] = []
+
+  constructor() {
+    makeObservable(this, {
+      messages: observable,
+      addMessage: action,
+      clearMessages: action,
+    })
+  }
+
+  addMessage = (message: string, level: LogLevel = "info") => {
+    const logMessage: LogMessage = {
+      id: Math.random().toString(36).substring(2, 11),
+      timestamp: new Date(),
+      message,
+      level,
+    }
+    this.messages.push(logMessage)
+  }
+
+  clearMessages = () => {
+    this.messages = []
+  }
+
+  addInfo = (message: string) => {
+    this.addMessage(message, "info")
+  }
+
+  addWarning = (message: string) => {
+    this.addMessage(message, "warning")
+  }
+
+  addError = (message: string) => {
+    this.addMessage(message, "error")
+  }
+
+  addDebug = (message: string) => {
+    this.addMessage(message, "debug")
+  }
+}

package/src/components/LogViewer.tsx

@@ -0,0 +1,370 @@
+import {
+  ContentCopy,
+  DescriptionOutlined as DocumentIcon,
+  ExpandLess,
+  ExpandMore,
+} from "@mui/icons-material"
+import type { SxProps } from "@mui/material"
+import {
+  Box,
+  Button,
+  IconButton,
+  Paper,
+  Typography,
+  useTheme,
+} from "@mui/material"
+import { observer } from "mobx-react-lite"
+import { useEffect, useRef, useState } from "react"
+import { externalizeComponent } from "../externalizeComponent"
+
+export type LogLevel = "info" | "error" | "warning" | "debug"
+
+export type LogMessage = {
+  id: string
+  timestamp: Date
+  message: string
+  level: LogLevel
+}
+
+export type LogViewerProps = {
+  /** Log messages to display */
+  messages: LogMessage[]
+  /** Callback when clear button is clicked */
+  onClear?: () => void
+  /** Height of the component */
+  height?: string | number
+  /** Additional styles */
+  sx?: SxProps
+}
+
+/**
+ * Utility function to create a log message
+ */
+export const createLogMessage = (
+  message: string,
+  level: LogLevel,
+  id?: string,
+): LogMessage => ({
+  id: id || `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+  timestamp: new Date(),
+  message,
+  level,
+})
+
+/**
+ * Utility function to create a debug log message
+ */
+export const createDebugMessage = (message: string, id?: string): LogMessage =>
+  createLogMessage(message, "debug", id)
+
+/**
+ * Utility function to create an info log message
+ */
+export const createInfoMessage = (message: string, id?: string): LogMessage =>
+  createLogMessage(message, "info", id)
+
+/**
+ * Utility function to create a warning log message
+ */
+export const createWarningMessage = (
+  message: string,
+  id?: string,
+): LogMessage => createLogMessage(message, "warning", id)
+
+/**
+ * Utility function to create an error log message
+ */
+export const createErrorMessage = (message: string, id?: string): LogMessage =>
+  createLogMessage(message, "error", id)
+
+/**
+ * A log viewer component that displays timestamped log messages with different levels.
+ * Features a header with document icon and clear button, and scrollable message area.
+ */
+export const LogViewer = externalizeComponent(
+  observer((props: LogViewerProps) => {
+    const { messages = [], onClear, height = 400, sx } = props
+    const theme = useTheme()
+    const scrollContainerRef = useRef<HTMLDivElement>(null)
+
+    // Auto-scroll to bottom when new messages are added
+    useEffect(() => {
+      if (messages.length === 0) return
+
+      const scrollContainer = scrollContainerRef.current
+      if (!scrollContainer) return
+
+      // Use a timeout to scroll after the DOM updates
+      const timeoutId = setTimeout(() => {
+        // Scroll the container to the bottom, not the entire browser
+        scrollContainer.scrollTop = scrollContainer.scrollHeight
+      }, 10)
+
+      return () => clearTimeout(timeoutId)
+    }, [messages.length])
+
+    const formatTimestamp = (timestamp: Date) => {
+      return timestamp.toLocaleTimeString("en-US", {
+        hour12: false,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      })
+    }
+
+    const getMessageColor = (level: LogLevel) => {
+      switch (level) {
+        case "error":
+          return theme.palette.error.main
+        case "warning":
+          return theme.palette.warning.main
+        case "info":
+          return theme.palette.info.main
+        case "debug":
+          return theme.palette.text.disabled
+        default:
+          return theme.palette.text.secondary
+      }
+    }
+
+    // Component for individual log messages with expand/copy functionality
+    const LogMessage = ({ message }: { message: LogMessage }) => {
+      const [isExpanded, setIsExpanded] = useState(false)
+      const [copyTooltip, setCopyTooltip] = useState(false)
+      const [isHovered, setIsHovered] = useState(false)
+      const isLongMessage = message.message.length > 150
+
+      const handleCopy = async () => {
+        try {
+          await navigator.clipboard.writeText(message.message)
+          setCopyTooltip(true)
+          setTimeout(() => setCopyTooltip(false), 2000)
+        } catch (err) {
+          console.error("Failed to copy message:", err)
+        }
+      }
+
+      const displayMessage =
+        isLongMessage && !isExpanded
+          ? message.message.substring(0, 150) + "..."
+          : message.message
+
+      return (
+        <Box
+          key={message.id}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          sx={{
+            display: "flex",
+            gap: 1,
+            fontFamily: "monospace",
+            flexDirection: "column",
+            "&:hover": {
+              backgroundColor: theme.palette.action.hover,
+            },
+            borderRadius: "4px",
+            padding: "2px 4px",
+            margin: "-2px -4px",
+          }}
+        >
+          <Box sx={{ display: "flex", gap: 1 }}>
+            {/* Timestamp */}
+            <Typography
+              component="span"
+              sx={{
+                fontWeight: 400,
+                fontSize: "12px",
+                lineHeight: "18px",
+                letterSpacing: "0.4px",
+                color: theme.palette.text.disabled,
+                whiteSpace: "nowrap",
+                flexShrink: 0,
+              }}
+            >
+              [{formatTimestamp(message.timestamp)}]
+            </Typography>
+
+            {/* Message */}
+            <Typography
+              component="span"
+              sx={{
+                fontWeight: 400,
+                fontSize: "12px",
+                lineHeight: "18px",
+                letterSpacing: "0.4px",
+                color: getMessageColor(message.level),
+                wordBreak: "break-word",
+                overflowWrap: "anywhere",
+                hyphens: "auto",
+                flex: 1,
+                whiteSpace: "pre-wrap",
+              }}
+            >
+              {displayMessage}
+            </Typography>
+
+            {/* Action buttons - only visible on hover */}
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "flex-start",
+                gap: 0.5,
+                opacity: isHovered ? 1 : 0,
+                transition: "opacity 0.2s ease-in-out",
+                visibility: isHovered ? "visible" : "hidden",
+              }}
+            >
+              <IconButton
+                size="small"
+                onClick={handleCopy}
+                sx={{
+                  padding: "2px",
+                  color: theme.palette.text.secondary,
+                  "&:hover": {
+                    backgroundColor: theme.palette.action.hover,
+                  },
+                }}
+                title={copyTooltip ? "Copied!" : "Copy message"}
+              >
+                <ContentCopy sx={{ fontSize: 12 }} />
+              </IconButton>
+
+              {isLongMessage && (
+                <IconButton
+                  size="small"
+                  onClick={() => setIsExpanded(!isExpanded)}
+                  sx={{
+                    padding: "2px",
+                    color: theme.palette.text.secondary,
+                    "&:hover": {
+                      backgroundColor: theme.palette.action.hover,
+                    },
+                  }}
+                  title={isExpanded ? "Collapse" : "Expand"}
+                >
+                  {isExpanded ? (
+                    <ExpandLess sx={{ fontSize: 12 }} />
+                  ) : (
+                    <ExpandMore sx={{ fontSize: 12 }} />
+                  )}
+                </IconButton>
+              )}
+            </Box>
+          </Box>
+        </Box>
+      )
+    }
+
+    return (
+      <Paper
+        sx={{
+          backgroundColor:
+            theme.palette.backgroundPaperElevation?.[2] || "#171927",
+          backgroundImage: "none", // Override any gradient from elevation
+          height,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          ...sx,
+        }}
+      >
+        {/* Header */}
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            padding: "12px 16px",
+          }}
+        >
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <DocumentIcon
+              sx={{
+                fontSize: 16,
+                color: theme.palette.action.active,
+                opacity: 0.56,
+              }}
+            />
+            <Typography
+              sx={{
+                fontWeight: 500,
+                fontSize: "14px",
+                lineHeight: "143%",
+                letterSpacing: "0.17px",
+                color: theme.palette.text.primary,
+              }}
+            >
+              Log
+            </Typography>
+          </Box>
+          <Button
+            onClick={onClear}
+            variant="text"
+            sx={{
+              fontWeight: 500,
+              fontSize: "13px",
+              lineHeight: "22px",
+              letterSpacing: "0.46px",
+              color: theme.palette.primary.main,
+              textTransform: "none",
+              minWidth: "auto",
+              padding: "4px 8px",
+              "&:hover": {
+                backgroundColor: theme.palette.primary.main + "14", // 8% opacity
+              },
+            }}
+          >
+            Clear
+          </Button>
+        </Box>
+
+        {/* Messages Container */}
+        <Box
+          ref={scrollContainerRef}
+          sx={{
+            flex: 1,
+            overflow: "auto",
+            padding: "8px 16px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "2px",
+            // Custom scrollbar styling to keep it consistently dark
+            scrollbarWidth: "thin",
+            scrollbarColor: `${theme.palette.divider} transparent`,
+            "&::-webkit-scrollbar": {
+              width: "6px",
+            },
+            "&::-webkit-scrollbar-track": {
+              background: "transparent",
+            },
+            "&::-webkit-scrollbar-thumb": {
+              backgroundColor: theme.palette.divider,
+              borderRadius: "3px",
+              "&:hover": {
+                backgroundColor: theme.palette.divider,
+              },
+            },
+          }}
+        >
+          {messages.length === 0 ? (
+            <Typography
+              sx={{
+                color: theme.palette.text.disabled,
+                fontSize: "12px",
+                fontStyle: "italic",
+                textAlign: "center",
+                marginTop: 2,
+              }}
+            >
+              No log messages
+            </Typography>
+          ) : (
+            messages.map((message) => (
+              <LogMessage key={message.id} message={message} />
+            ))
+          )}
+        </Box>
+      </Paper>
+    )
+  }),
+)

package/src/components/ProgramControl.tsx

@@ -4,7 +4,13 @@ import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../externalizeComponent"
 
-export type ProgramState = "idle" | "running" | "paused" | "stopping"
+export enum ProgramState {
+  IDLE = "idle",
+  RUNNING = "running",
+  PAUSED = "paused",
+  STOPPING = "stopping",
+  ERROR = "error",
+}
 
 export interface ProgramControlProps {
   /** The current state of the program control */
@@ -46,7 +52,7 @@ interface ButtonConfig {
  * A control component for program execution with run, pause, and stop functionality.
  *
  * Features:
- * - State machine with idle, running, paused, and stopping states
+ * - State machine with idle, running, paused, stopping, and error states
  * - Two variants: with_pause (3 buttons) and without_pause (2 buttons)
  * - Optional manual reset functionality
  * - Responsive design with 110px circular buttons
@@ -70,22 +76,28 @@ export const ProgramControl = externalizeComponent(
       const getButtonConfigs = (): ButtonConfig[] => {
         const baseConfigs: Record<string, ButtonConfig> = {
           run: {
-            enabled: state === "idle" || state === "paused",
+            enabled:
+              state === ProgramState.IDLE ||
+              state === ProgramState.PAUSED ||
+              state === ProgramState.ERROR,
             label:
-              state === "paused"
+              state === ProgramState.PAUSED
                 ? t("ProgramControl.Resume.bt")
-                : t("ProgramControl.Start.bt"),
+                : state === ProgramState.ERROR
+                  ? t("ProgramControl.Retry.bt")
+                  : t("ProgramControl.Start.bt"),
             color: theme.palette.success.main,
             onClick: onRun,
           },
           pause: {
-            enabled: state === "running",
+            enabled: state === ProgramState.RUNNING,
             label: t("ProgramControl.Pause.bt"),
             color: "#FFFFFF33",
             onClick: onPause || (() => {}),
           },
           stop: {
-            enabled: state === "running" || state === "paused",
+            enabled:
+              state === ProgramState.RUNNING || state === ProgramState.PAUSED,
             label: t("ProgramControl.Stop.bt"),
             color: theme.palette.error.main,
             onClick: onStop,
@@ -157,7 +169,7 @@ export const ProgramControl = externalizeComponent(
                   variant="contained"
                   disabled={
                     !config.enabled ||
-                    (state === "stopping" && !requiresManualReset)
+                    (state === ProgramState.STOPPING && !requiresManualReset)
                   }
                   onClick={config.onClick}
                   sx={{
@@ -167,14 +179,17 @@ export const ProgramControl = externalizeComponent(
                     backgroundColor: config.color,
                     opacity:
                       config.enabled &&
-                      !(state === "stopping" && !requiresManualReset)
+                      !(state === ProgramState.STOPPING && !requiresManualReset)
                         ? 1
                         : 0.3,
                     "&:hover": {
                       backgroundColor: config.color,
                       opacity:
                         config.enabled &&
-                        !(state === "stopping" && !requiresManualReset)
+                        !(
+                          state === ProgramState.STOPPING &&
+                          !requiresManualReset
+                        )
                           ? 0.8
                           : 0.3,
                     },
@@ -194,13 +209,13 @@ export const ProgramControl = externalizeComponent(
                   sx={{
                     color:
                       config.enabled &&
-                      !(state === "stopping" && !requiresManualReset)
+                      !(state === ProgramState.STOPPING && !requiresManualReset)
                         ? config.color
                         : theme.palette.text.disabled,
                     textAlign: "center",
                     opacity:
                       config.enabled &&
-                      !(state === "stopping" && !requiresManualReset)
+                      !(state === ProgramState.STOPPING && !requiresManualReset)
                         ? 1
                         : 0.3,
                   }}

package/src/components/ProgramStateIndicator.tsx

@@ -1,4 +1,4 @@
-import { Chip, useTheme } from "@mui/material"
+import { Chip, Typography, useTheme } from "@mui/material"
 import type {
   RobotControllerStateOperationModeEnum,
   RobotControllerStateSafetyStateEnum,
@@ -6,7 +6,7 @@ import type {
 import { observer } from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import { externalizeComponent } from "../externalizeComponent"
-import type { ProgramState } from "./ProgramControl"
+import { ProgramState } from "./ProgramControl"
 
 export interface ProgramStateIndicatorProps {
   /** The current state of the program */
@@ -77,22 +77,27 @@ export const ProgramStateIndicator = externalizeComponent(
         // For normal safety states, check program state
         if (safetyState === "SAFETY_STATE_NORMAL") {
           switch (programState) {
-            case "running":
+            case ProgramState.RUNNING:
               return {
                 label: t("ProgramStateIndicator.Running.lb"),
                 color: theme.palette.success.main,
               }
-            case "paused":
+            case ProgramState.PAUSED:
               return {
                 label: t("ProgramStateIndicator.Paused.lb"),
                 color: theme.palette.grey[600],
               }
-            case "stopping":
+            case ProgramState.STOPPING:
               return {
                 label: t("ProgramStateIndicator.Stopped.lb"),
                 color: theme.palette.error.main,
               }
-            case "idle":
+            case ProgramState.ERROR:
+              return {
+                label: t("ProgramStateIndicator.Error.lb"),
+                color: theme.palette.error.main,
+              }
+            case ProgramState.IDLE:
             default:
               return {
                 label: t("ProgramStateIndicator.Ready.lb"),
@@ -131,14 +136,26 @@ export const ProgramStateIndicator = externalizeComponent(
       return (
         <Chip
           className={className}
-          label={fullLabel}
+          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: 2,
+              paddingX: 1.5,
+              paddingY: 0.5,
             },
           }}
         />