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

package/src/components/RobotCard.tsx

@@ -1,495 +0,0 @@
-import { useTheme } from "@mui/material/styles"
-import Box from "@mui/material/Box"
-import Button from "@mui/material/Button"
-import Card from "@mui/material/Card"
-import Divider from "@mui/material/Divider"
-import Typography from "@mui/material/Typography"
-import { Bounds } from "@react-three/drei"
-import { Canvas } from "@react-three/fiber"
-import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"
-import { observer } from "mobx-react-lite"
-import { useCallback, useEffect, useRef, useState } from "react"
-import { useTranslation } from "react-i18next"
-import type { Group } from "three"
-import { externalizeComponent } from "../externalizeComponent"
-import type { ConnectedMotionGroup } from "../lib/ConnectedMotionGroup"
-import { PresetEnvironment } from "./3d-viewport/PresetEnvironment"
-import type { ProgramState } from "./ProgramControl"
-import { ProgramStateIndicator } from "./ProgramStateIndicator"
-import { Robot } from "./robots/Robot"
-
-export interface RobotCardProps {
-  /** Name of the robot displayed at the top */
-  robotName: string
-  /** Current program state */
-  programState: ProgramState
-  /** Current safety state of the robot controller */
-  safetyState: SafetyStateType
-  /** Current operation mode of the robot controller */
-  operationMode: OperationMode
-  /** Whether the "Drive to Home" button should be enabled */
-  driveToHomeEnabled?: boolean
-  /** Callback fired when "Drive to Home" button is pressed */
-  onDriveToHomePress?: () => void
-  /** Callback fired when "Drive to Home" button is released */
-  onDriveToHomeRelease?: () => void
-  /**
-   * Callback fired when "Drive to Home" button is pressed, with the default home position.
-   * If provided, this will be called instead of onDriveToHomePress, providing the recommended
-   * home position joint configuration based on the robot manufacturer.
-   */
-  onDriveToHomePressWithConfig?: (homePosition: number[]) => void
-  /**
-   * Callback fired when "Drive to Home" button is released after using onDriveToHomePressWithConfig.
-   * If provided, this will be called instead of onDriveToHomeRelease.
-   */
-  onDriveToHomeReleaseWithConfig?: () => void
-  /**
-   * Custom default joint configuration to use if manufacturer-based defaults are not available.
-   * Joint values should be in radians.
-   */
-  defaultJointConfig?: number[]
-  /** Connected motion group for the robot */
-  connectedMotionGroup: ConnectedMotionGroup
-  /** Custom robot component to render (optional, defaults to Robot) */
-  robotComponent?: React.ComponentType<{
-    connectedMotionGroup: ConnectedMotionGroup
-    flangeRef?: React.Ref<Group>
-    postModelRender?: () => void
-    transparentColor?: string
-    getModel?: (modelFromController: string) => Promise<string>
-  }>
-  /** Custom component to render in the content area (optional) */
-  customContentComponent?: React.ComponentType<Record<string, unknown>>
-  /** Additional CSS class name */
-  className?: string
-}
-
-/**
- * A responsive card component that displays a 3D robot with states and controls.
- * The card automatically adapts to its container's size and aspect ratio.
- *
- * Features:
- * - Fully responsive Material-UI Card that adapts to container dimensions
- * - Automatic layout switching based on aspect ratio:
- *   - Portrait mode: Vertical layout with robot in center
- *   - Landscape mode: Horizontal layout with robot on left, content on right (left-aligned)
- * - Responsive 3D robot rendering:
- *   - Scales dynamically with container size
- *   - Hides at very small sizes to preserve usability
- *   - Adaptive margin based on available space
- * - Smart spacing and padding that reduces at smaller sizes
- * - Minimum size constraints for usability while maximizing content density
- * - Robot name displayed in Typography h6 at top-left
- * - Program state indicator below the name
- * - Auto-fitting 3D robot model that scales with container size
- * - Customizable content area for displaying custom React components
- * - Transparent gray divider line
- * - "Drive to Home" button with press-and-hold functionality
- * - Localization support via react-i18next
- * - Material-UI theming integration
- *
- * Usage with custom content:
- * ```tsx
- * // Example custom timer component
- * const CustomTimer = () => (
- *   <Box>
- *     <Typography variant="body1" sx={{ color: "text.secondary" }}>
- *       Runtime
- *     </Typography>
- *     <Typography variant="h6">05:23</Typography>
- *   </Box>
- * )
- *
- * <RobotCard
- *   robotName="UR5e Robot"
- *   programState={ProgramState.RUNNING}
- *   customContentComponent={CustomTimer}
- *   // ... other props
- * />
- * ```
- */
-export const RobotCard = externalizeComponent(
-  observer(
-    ({
-      robotName,
-      programState,
-      safetyState,
-      operationMode,
-      driveToHomeEnabled = false,
-      onDriveToHomePress,
-      onDriveToHomeRelease,
-      connectedMotionGroup,
-      robotComponent: RobotComponent = Robot,
-      customContentComponent: CustomContentComponent,
-      className,
-    }: RobotCardProps) => {
-      const theme = useTheme()
-      const { t } = useTranslation()
-      const [isDriveToHomePressed, setIsDriveToHomePressed] = useState(false)
-      const driveButtonRef = useRef<HTMLButtonElement>(null)
-      const cardRef = useRef<HTMLDivElement>(null)
-      const [isLandscape, setIsLandscape] = useState(false)
-      const [cardSize, setCardSize] = useState<{
-        width: number
-        height: number
-      }>({ width: 400, height: 600 })
-      const [modelRenderTrigger, setModelRenderTrigger] = useState(0)
-
-      // Hook to detect aspect ratio and size changes
-      useEffect(() => {
-        const checkDimensions = () => {
-          if (cardRef.current) {
-            const { offsetWidth, offsetHeight } = cardRef.current
-            setIsLandscape(offsetWidth > offsetHeight)
-            setCardSize({ width: offsetWidth, height: offsetHeight })
-          }
-        }
-
-        // Initial check
-        checkDimensions()
-
-        // Set up ResizeObserver to watch for size changes
-        const resizeObserver = new ResizeObserver(checkDimensions)
-        if (cardRef.current) {
-          resizeObserver.observe(cardRef.current)
-        }
-
-        return () => {
-          resizeObserver.disconnect()
-        }
-      }, [])
-
-      const handleModelRender = useCallback(() => {
-        // Trigger bounds refresh when model renders
-        setModelRenderTrigger((prev) => prev + 1)
-      }, [])
-
-      const handleDriveToHomeMouseDown = useCallback(() => {
-        if (!driveToHomeEnabled || !onDriveToHomePress) return
-        setIsDriveToHomePressed(true)
-        onDriveToHomePress()
-      }, [driveToHomeEnabled, onDriveToHomePress])
-
-      const handleDriveToHomeMouseUp = useCallback(() => {
-        if (!driveToHomeEnabled || !onDriveToHomeRelease) return
-        setIsDriveToHomePressed(false)
-        onDriveToHomeRelease()
-      }, [driveToHomeEnabled, onDriveToHomeRelease])
-
-      const handleDriveToHomeMouseLeave = useCallback(() => {
-        if (isDriveToHomePressed && onDriveToHomeRelease) {
-          setIsDriveToHomePressed(false)
-          onDriveToHomeRelease()
-        }
-      }, [isDriveToHomePressed, onDriveToHomeRelease])
-
-      // Determine if robot should be hidden at small sizes to save space
-      const shouldHideRobot = isLandscape
-        ? cardSize.width < 350
-        : cardSize.height < 200 // Hide robot at height < 200px in portrait
-
-      // Determine if custom content should be hidden when height is too low
-      // Custom content should be hidden BEFORE the robot (at higher threshold)
-      const shouldHideCustomContent = isLandscape
-        ? cardSize.height < 310 // Landscape: hide custom content at height < 310px
-        : cardSize.height < 450 // Portrait: hide custom content at height < 450px
-
-      return (
-        <Card
-          ref={cardRef}
-          className={className}
-          sx={{
-            width: "100%",
-            height: "100%",
-            display: "flex",
-            flexDirection: isLandscape ? "row" : "column",
-            position: "relative",
-            overflow: "hidden",
-            minWidth: { xs: 180, sm: 220, md: 250 },
-            minHeight: isLandscape
-              ? { xs: 200, sm: 240, md: 260 } // Allow runtime hiding at < 283px
-              : { xs: 150, sm: 180, md: 220 }, // Allow progressive hiding in portrait mode
-            border: `1px solid ${theme.palette.divider}`,
-            borderRadius: "18px",
-            boxShadow: "none",
-            backgroundColor:
-              theme.palette.backgroundPaperElevation?.[8] || "#2A2A3F",
-            backgroundImage: "none", // Override any gradient from elevation
-          }}
-        >
-          {isLandscape ? (
-            <>
-              {/* Landscape Layout: Robot on left, content on right */}
-              <Box
-                sx={{
-                  flex: "0 0 50%",
-                  position: "relative",
-                  height: "100%",
-                  minHeight: "100%",
-                  maxHeight: "100%",
-                  borderRadius: 1,
-                  m: { xs: 1.5, sm: 2, md: 3 },
-                  mr: { xs: 0.75, sm: 1, md: 1.5 },
-                  overflow: "hidden", // Prevent content from affecting container size
-                  display: shouldHideRobot ? "none" : "block",
-                }}
-              >
-                {!shouldHideRobot && (
-                  <Canvas
-                    orthographic
-                    camera={{
-                      position: [3, 2, 3],
-                      zoom: 1,
-                    }}
-                    shadows
-                    frameloop="demand"
-                    style={{
-                      borderRadius: theme.shape.borderRadius,
-                      width: "100%",
-                      height: "100%",
-                      background: "transparent",
-                      position: "absolute",
-                      top: 0,
-                      left: 0,
-                    }}
-                    dpr={[1, 2]}
-                    gl={{ alpha: true, antialias: true }}
-                  >
-                    <PresetEnvironment />
-                    <Bounds fit observe margin={1} maxDuration={1}>
-                      <RobotComponent
-                        connectedMotionGroup={connectedMotionGroup}
-                        postModelRender={handleModelRender}
-                      />
-                    </Bounds>
-                  </Canvas>
-                )}
-              </Box>
-
-              {/* Content container on right */}
-              <Box
-                sx={{
-                  flex: shouldHideRobot ? "1" : "1",
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "flex-start",
-                  width: shouldHideRobot ? "100%" : "50%",
-                }}
-              >
-                {/* Header section with robot name and program state */}
-                <Box
-                  sx={{
-                    p: { xs: 1.5, sm: 2, md: 3 },
-                    pb: { xs: 1, sm: 1.5, md: 2 },
-                    textAlign: "left",
-                  }}
-                >
-                  <Typography variant="h6" component="h2" sx={{ mb: 1 }}>
-                    {robotName}
-                  </Typography>
-                  <ProgramStateIndicator
-                    programState={programState}
-                    safetyState={safetyState}
-                    operationMode={operationMode}
-                  />
-                </Box>
-
-                {/* Bottom section with custom content and button */}
-                <Box
-                  sx={{
-                    p: { xs: 1.5, sm: 2, md: 3 },
-                    pt: 0,
-                    flex: "1",
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "space-between",
-                  }}
-                >
-                  {/* Custom content section - hidden if height is too low in landscape mode */}
-                  {!shouldHideCustomContent && CustomContentComponent && (
-                    <Box>
-                      <CustomContentComponent />
-
-                      {/* Divider */}
-                      <Divider
-                        sx={{
-                          mt: 1,
-                          mb: 0,
-                          borderColor: theme.palette.divider,
-                          opacity: 0.5,
-                        }}
-                      />
-                    </Box>
-                  )}
-
-                  <Box
-                    sx={{
-                      mt:
-                        !shouldHideCustomContent && CustomContentComponent
-                          ? "auto"
-                          : 0,
-                    }}
-                  >
-                    {/* Drive to Home button with some space */}
-                    <Box
-                      sx={{
-                        display: "flex",
-                        justifyContent: "flex-start",
-                        mt: { xs: 1, sm: 1.5, md: 2 },
-                        mb: { xs: 0.5, sm: 0.75, md: 1 },
-                      }}
-                    >
-                      <Button
-                        ref={driveButtonRef}
-                        variant="contained"
-                        color="secondary"
-                        size="small"
-                        disabled={!driveToHomeEnabled}
-                        onMouseDown={handleDriveToHomeMouseDown}
-                        onMouseUp={handleDriveToHomeMouseUp}
-                        onMouseLeave={handleDriveToHomeMouseLeave}
-                        onTouchStart={handleDriveToHomeMouseDown}
-                        onTouchEnd={handleDriveToHomeMouseUp}
-                        sx={{
-                          textTransform: "none",
-                          px: 1.5,
-                          py: 0.5,
-                        }}
-                      >
-                        {t("RobotCard.DriveToHome.bt")}
-                      </Button>
-                    </Box>
-                  </Box>
-                </Box>
-              </Box>
-            </>
-          ) : (
-            <>
-              {/* Portrait Layout: Header, Robot, Footer */}
-              <Box
-                sx={{
-                  p: 3,
-                  height: "100%",
-                  display: "flex",
-                  flexDirection: "column",
-                }}
-              >
-                {/* Header section with robot name and program state */}
-                <Box>
-                  <Typography variant="h6" component="h2" sx={{ mb: 1 }}>
-                    {robotName}
-                  </Typography>
-                  <ProgramStateIndicator
-                    programState={programState}
-                    safetyState={safetyState}
-                    operationMode={operationMode}
-                  />
-                </Box>
-
-                {/* 3D Robot viewport in center */}
-                <Box
-                  sx={{
-                    flex: shouldHideRobot ? 0 : 1,
-                    position: "relative",
-                    minHeight: shouldHideRobot
-                      ? 0
-                      : { xs: 120, sm: 150, md: 200 },
-                    height: shouldHideRobot ? 0 : "auto",
-                    borderRadius: 1,
-                    overflow: "hidden",
-                    display: shouldHideRobot ? "none" : "block",
-                  }}
-                >
-                  {!shouldHideRobot && (
-                    <Canvas
-                      orthographic
-                      camera={{
-                        position: [3, 2, 3],
-                        zoom: 1,
-                      }}
-                      shadows
-                      frameloop="demand"
-                      style={{
-                        borderRadius: theme.shape.borderRadius,
-                        width: "100%",
-                        height: "100%",
-                        background: "transparent",
-                        position: "absolute",
-                      }}
-                      dpr={[1, 2]}
-                      gl={{ alpha: true, antialias: true }}
-                    >
-                      <PresetEnvironment />
-                      <Bounds fit clip observe margin={1} maxDuration={1}>
-                        <RobotComponent
-                          connectedMotionGroup={connectedMotionGroup}
-                          postModelRender={handleModelRender}
-                        />
-                      </Bounds>
-                    </Canvas>
-                  )}
-                </Box>
-
-                {/* Bottom section with custom content and button */}
-                <Box>
-                  {/* Custom content section - hidden if height is too low */}
-                  {!shouldHideCustomContent && CustomContentComponent && (
-                    <>
-                      <CustomContentComponent />
-
-                      {/* Divider */}
-                      <Divider
-                        sx={{
-                          mt: 1,
-                          mb: 0,
-                          borderColor: theme.palette.divider,
-                          opacity: 0.5,
-                        }}
-                      />
-                    </>
-                  )}
-
-                  {/* Drive to Home button with some space */}
-                  <Box
-                    sx={{
-                      display: "flex",
-                      justifyContent: "flex-start",
-                      mt:
-                        !shouldHideCustomContent && CustomContentComponent
-                          ? { xs: 1, sm: 2, md: 5 }
-                          : { xs: 0.5, sm: 1, md: 2 },
-                      mb: { xs: 0.5, sm: 0.75, md: 1 },
-                    }}
-                  >
-                    <Button
-                      ref={driveButtonRef}
-                      variant="contained"
-                      color="secondary"
-                      size="small"
-                      disabled={!driveToHomeEnabled}
-                      onMouseDown={handleDriveToHomeMouseDown}
-                      onMouseUp={handleDriveToHomeMouseUp}
-                      onMouseLeave={handleDriveToHomeMouseLeave}
-                      onTouchStart={handleDriveToHomeMouseDown}
-                      onTouchEnd={handleDriveToHomeMouseUp}
-                      sx={{
-                        textTransform: "none",
-                        px: 1.5,
-                        py: 0.5,
-                      }}
-                    >
-                      {t("RobotCard.DriveToHome.bt")}
-                    </Button>
-                  </Box>
-                </Box>
-              </Box>
-            </>
-          )}
-        </Card>
-      )
-    },
-  ),
-)
-
-export default RobotCard

package/src/components/RobotListItem.tsx

@@ -1,155 +0,0 @@
-import ErrorIcon from "@mui/icons-material/Error"
-import { useTheme } from "@mui/material/styles"
-import Box from "@mui/material/Box"
-import Divider from "@mui/material/Divider"
-import Typography from "@mui/material/Typography"
-import { observer } from "mobx-react-lite"
-import type { ComponentType } from "react"
-import { externalizeComponent } from "../externalizeComponent"
-import { RobotIcon } from "../icons"
-import {
-  RobotSetupReadinessIndicator,
-  RobotSetupReadinessState,
-} from "./RobotSetupReadinessIndicator"
-
-export interface RobotListItemProps {
-  /** The name of the robot */
-  robotName: string
-  /** The type/model of the robot (will try to derive from nova if not provided) */
-  robotType?: string
-  /** The current setup readiness state of the robot */
-  setupState: RobotSetupReadinessState
-  /**
-   * Component to render for the precondition indicator.
-   * Defaults to RobotSetupReadinessIndicator.
-   * Pass null or undefined to hide the indicator.
-   */
-  PreconditionComponent?: ComponentType<{
-    setupState: RobotSetupReadinessState
-  }> | null
-  /** Additional CSS class name */
-  className?: string
-}
-
-/**
- * A list item component that displays robot information and setup readiness state.
- *
- * Features:
- * - Shows robot name, type, and customizable precondition component
- * - Color-coded icon based on readiness state (robot icon for ready, warning for issues)
- * - Styled with consistent border, background, and spacing
- * - Responsive layout with proper spacing and alignment
- * - Flexible precondition component that can be customized or hidden
- */
-export const RobotListItem = externalizeComponent(
-  observer(
-    ({
-      robotName,
-      robotType,
-      setupState,
-      PreconditionComponent = RobotSetupReadinessIndicator,
-      className,
-    }: RobotListItemProps) => {
-      const theme = useTheme()
-
-      // Use provided robot type or default
-      const displayRobotType = robotType || "Robot"
-
-      const isReady = setupState === RobotSetupReadinessState.READY
-
-      return (
-        <Box
-          className={className}
-          sx={{
-            border: `1px solid ${theme.palette.divider}`,
-            background:
-              theme.palette.backgroundPaperElevation?.[8] || "#292B3F",
-            borderRadius: "8px",
-            padding: "20px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            opacity: 1,
-          }}
-        >
-          <Box
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              gap: 2,
-              flex: 1,
-            }}
-          >
-            {/* Robot/Warning Icon */}
-            {isReady ? (
-              <Box
-                sx={{
-                  fontSize: 24,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  width: 24,
-                  height: 24,
-                  "& svg": {
-                    fill: `${theme.palette.primary.main} !important`,
-                  },
-                  "& svg path": {
-                    fill: `${theme.palette.primary.main} !important`,
-                  },
-                }}
-              >
-                <RobotIcon />
-              </Box>
-            ) : (
-              <ErrorIcon
-                sx={{
-                  color: theme.palette.error.main,
-                  fontSize: 24,
-                }}
-              />
-            )}
-
-            {/* Robot Name */}
-            <Typography
-              variant="body1"
-              sx={{
-                fontWeight: 500,
-                color: theme.palette.text.primary,
-              }}
-            >
-              {robotName}
-            </Typography>
-
-            {/* Divider */}
-            <Divider
-              orientation="vertical"
-              flexItem
-              sx={{
-                backgroundColor: theme.palette.text.secondary,
-                opacity: 0.3,
-                width: "1px",
-              }}
-            />
-
-            {/* Robot Type */}
-            <Typography
-              variant="body2"
-              sx={{
-                color: theme.palette.text.secondary,
-              }}
-            >
-              {displayRobotType}
-            </Typography>
-          </Box>
-
-          {/* Setup Readiness Indicator */}
-          {PreconditionComponent && (
-            <PreconditionComponent setupState={setupState} />
-          )}
-        </Box>
-      )
-    },
-  ),
-)
-
-export default RobotListItem