@wandelbots/wandelbots-js-react-components 2.33.0-pr.feature-robot-precondition-list.372.e4998c8 → 2.33.0-pr.feature-robot-precondition-list.372.c924328

package/src/components/RobotCard.tsx

@@ -1,5 +1,5 @@
 import { Box, Button, Card, Divider, Typography, useTheme } from "@mui/material"
-import { Bounds, useBounds } from "@react-three/drei"
+import { Bounds } from "@react-three/drei"
 import { Canvas } from "@react-three/fiber"
 import type {
   ConnectedMotionGroup,
@@ -17,25 +17,6 @@ import type { ProgramState } from "./ProgramControl"
 import { ProgramStateIndicator } from "./ProgramStateIndicator"
 import { Robot } from "./robots/Robot"
 
-// Component to refresh bounds when model renders
-function BoundsRefresher({
-  modelRenderTrigger,
-  children,
-}: {
-  modelRenderTrigger: number
-  children: React.ReactNode
-}) {
-  const bounds = useBounds()
-
-  useEffect(() => {
-    if (modelRenderTrigger > 0) {
-      bounds.refresh().clip().fit()
-    }
-  }, [modelRenderTrigger, bounds])
-
-  return <>{children}</>
-}
-
 export interface RobotCardProps {
   /** Name of the robot displayed at the top */
   robotName: string
@@ -51,6 +32,22 @@ export interface RobotCardProps {
   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) */
@@ -136,7 +133,6 @@ export const RobotCard = externalizeComponent(
       const { t } = useTranslation()
       const [isDriveToHomePressed, setIsDriveToHomePressed] = useState(false)
       const driveButtonRef = useRef<HTMLButtonElement>(null)
-      const robotRef = useRef<Group>(null)
       const cardRef = useRef<HTMLDivElement>(null)
       const [isLandscape, setIsLandscape] = useState(false)
       const [cardSize, setCardSize] = useState<{
@@ -224,29 +220,15 @@ export const RobotCard = externalizeComponent(
       )
 
       // Determine if robot should be hidden at small sizes to save space
-      // Less aggressive hiding for portrait mode since robot is in center
       const shouldHideRobot = isLandscape
-        ? cardSize.width < 350 || cardSize.height < 250 // Aggressive for landscape
-        : cardSize.width < 250 || cardSize.height < 180 // Less aggressive for portrait
-
-      // Calculate responsive robot scale based on card size and orientation
-      const getRobotScale = () => {
-        if (shouldHideRobot) return 0
-
-        if (isLandscape) {
-          // More aggressive scaling for landscape since robot is on side
-          if (cardSize.width < 450) return 0.8
-          if (cardSize.width < 550) return 0.9
-          return 1
-        } else {
-          // Less aggressive scaling for portrait since robot is central
-          if (cardSize.width < 300) return 0.8
-          if (cardSize.width < 400) return 0.9
-          return 1
-        }
-      }
+        ? cardSize.width < 390 || cardSize.height < 250 // Hide robot when width < 390px in landscape
+        : cardSize.height < 350 // Hide robot at height < 200px in portrait
 
-      const robotScale = getRobotScale()
+      // Determine if runtime view should be hidden when height is too low
+      // Runtime should be hidden BEFORE the robot (at higher threshold)
+      const shouldHideRuntime = isLandscape
+        ? cardSize.height < 283 // Landscape: hide runtime at height < 283px
+        : cardSize.height < 450 // Portrait: hide runtime much earlier at height < 450px
 
       return (
         <Card
@@ -261,8 +243,8 @@ export const RobotCard = externalizeComponent(
             overflow: "hidden",
             minWidth: { xs: 180, sm: 220, md: 250 },
             minHeight: isLandscape
-              ? { xs: 160, sm: 200, md: 250 }
-              : { xs: 200, sm: 280, md: 350 },
+              ? { 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",
@@ -290,9 +272,10 @@ export const RobotCard = externalizeComponent(
               >
                 {!shouldHideRobot && (
                   <Canvas
+                    orthographic
                     camera={{
-                      position: [4, 4, 4], // Move camera further back for orthographic view
-                      fov: 15, // Low FOV for near-orthographic projection
+                      position: [3, 2, 3],
+                      zoom: 1,
                     }}
                     shadows
                     frameloop="demand"
@@ -310,14 +293,10 @@ export const RobotCard = externalizeComponent(
                   >
                     <PresetEnvironment />
                     <Bounds fit clip observe margin={1}>
-                      <BoundsRefresher modelRenderTrigger={modelRenderTrigger}>
-                        <group ref={robotRef} scale={robotScale}>
-                          <RobotComponent
-                            connectedMotionGroup={connectedMotionGroup}
-                            postModelRender={handleModelRender}
-                          />
-                        </group>
-                      </BoundsRefresher>
+                      <RobotComponent
+                        connectedMotionGroup={connectedMotionGroup}
+                        postModelRender={handleModelRender}
+                      />
                     </Bounds>
                   </Canvas>
                 )}
@@ -362,42 +341,45 @@ export const RobotCard = externalizeComponent(
                     justifyContent: "space-between",
                   }}
                 >
-                  <Box>
-                    {/* Runtime display */}
-                    <Typography
-                      variant="body1"
-                      sx={{
-                        mb: 0,
-                        color: theme.palette.text.secondary,
-                        textAlign: "left",
-                      }}
-                    >
-                      {t("RobotCard.Runtime.lb")}
-                    </Typography>
+                  {/* Runtime view - hidden if height is too low in landscape mode */}
+                  {!shouldHideRuntime && (
+                    <Box>
+                      {/* Runtime display */}
+                      <Typography
+                        variant="body1"
+                        sx={{
+                          mb: 0,
+                          color: theme.palette.text.secondary,
+                          textAlign: "left",
+                        }}
+                      >
+                        {t("RobotCard.Runtime.lb")}
+                      </Typography>
 
-                    {/* Compact cycle time component directly below runtime */}
-                    <Box sx={{ textAlign: "left" }}>
-                      <CycleTimerComponent
-                        variant="small"
-                        compact
-                        onCycleComplete={handleCycleComplete}
-                        onCycleEnd={onCycleEnd}
-                        autoStart={cycleTimerAutoStart}
+                      {/* Compact cycle time component directly below runtime */}
+                      <Box sx={{ textAlign: "left" }}>
+                        <CycleTimerComponent
+                          variant="small"
+                          compact
+                          onCycleComplete={handleCycleComplete}
+                          onCycleEnd={onCycleEnd}
+                          autoStart={cycleTimerAutoStart}
+                        />
+                      </Box>
+
+                      {/* Divider */}
+                      <Divider
+                        sx={{
+                          mt: 1,
+                          mb: 0,
+                          borderColor: theme.palette.divider,
+                          opacity: 0.5,
+                        }}
                       />
                     </Box>
+                  )}
 
-                    {/* Divider */}
-                    <Divider
-                      sx={{
-                        mt: 1,
-                        mb: 0,
-                        borderColor: theme.palette.divider,
-                        opacity: 0.5,
-                      }}
-                    />
-                  </Box>
-
-                  <Box sx={{ mt: "auto" }}>
+                  <Box sx={{ mt: !shouldHideRuntime ? "auto" : 0 }}>
                     {/* Drive to Home button with some space */}
                     <Box
                       sx={{
@@ -470,9 +452,10 @@ export const RobotCard = externalizeComponent(
                 >
                   {!shouldHideRobot && (
                     <Canvas
+                      orthographic
                       camera={{
-                        position: [3, 3, 3], // Closer camera position for portrait to make robot larger
-                        fov: 20, // Slightly higher FOV for portrait to fill better
+                        position: [3, 2, 3],
+                        zoom: 1,
                       }}
                       shadows
                       frameloop="demand"
@@ -482,24 +465,16 @@ export const RobotCard = externalizeComponent(
                         height: "100%",
                         background: "transparent",
                         position: "absolute",
-                        top: 0,
-                        left: 0,
                       }}
                       dpr={[1, 2]}
                       gl={{ alpha: true, antialias: true }}
                     >
                       <PresetEnvironment />
-                      <Bounds fit observe margin={1}>
-                        <BoundsRefresher
-                          modelRenderTrigger={modelRenderTrigger}
-                        >
-                          <group ref={robotRef} scale={robotScale}>
-                            <RobotComponent
-                              connectedMotionGroup={connectedMotionGroup}
-                              postModelRender={handleModelRender}
-                            />
-                          </group>
-                        </BoundsRefresher>
+                      <Bounds fit clip observe margin={1}>
+                        <RobotComponent
+                          connectedMotionGroup={connectedMotionGroup}
+                          postModelRender={handleModelRender}
+                        />
                       </Bounds>
                     </Canvas>
                   )}
@@ -507,42 +482,49 @@ export const RobotCard = externalizeComponent(
 
                 {/* Bottom section with runtime, cycle time, and button */}
                 <Box>
-                  {/* Runtime display */}
-                  <Typography
-                    variant="body1"
-                    sx={{
-                      mb: 0,
-                      color: theme.palette.text.secondary,
-                    }}
-                  >
-                    {t("RobotCard.Runtime.lb")}
-                  </Typography>
+                  {/* Runtime view - hidden based on shouldHideRuntime */}
+                  {!shouldHideRuntime && (
+                    <>
+                      {/* Runtime display */}
+                      <Typography
+                        variant="body1"
+                        sx={{
+                          mb: 0,
+                          color: theme.palette.text.secondary,
+                        }}
+                      >
+                        {t("RobotCard.Runtime.lb")}
+                      </Typography>
 
-                  {/* Compact cycle time component directly below runtime */}
-                  <CycleTimerComponent
-                    variant="small"
-                    compact
-                    onCycleComplete={handleCycleComplete}
-                    onCycleEnd={onCycleEnd}
-                    autoStart={cycleTimerAutoStart}
-                  />
+                      {/* Compact cycle time component directly below runtime */}
+                      <CycleTimerComponent
+                        variant="small"
+                        compact
+                        onCycleComplete={handleCycleComplete}
+                        onCycleEnd={onCycleEnd}
+                        autoStart={cycleTimerAutoStart}
+                      />
 
-                  {/* Divider */}
-                  <Divider
-                    sx={{
-                      mt: 1,
-                      mb: 0,
-                      borderColor: theme.palette.divider,
-                      opacity: 0.5,
-                    }}
-                  />
+                      {/* 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: { xs: 1, sm: 2, md: 5 },
+                      mt: !shouldHideRuntime
+                        ? { xs: 1, sm: 2, md: 5 }
+                        : { xs: 2, sm: 3, md: 4 }, // More margin when runtime is hidden
                       mb: { xs: 0.5, sm: 0.75, md: 1 },
                     }}
                   >

package/src/components/robots/manufacturerHomePositions.ts

@@ -0,0 +1,76 @@
+import { Manufacturer } from "@wandelbots/nova-api/v1"
+
+/**
+ * Default home configs for different robot manufacturers.
+ * These joint configurations represent safe home configs for each manufacturer's robots.
+ * All angles are in radians.
+ */
+export const MANUFACTURER_HOME_CONFIGS: Record<Manufacturer, number[]> = {
+  [Manufacturer.Abb]: [0.0, 0.0, 0.0, 0.0, Math.PI / 2, 0.0, 0.0],
+  [Manufacturer.Fanuc]: [0.0, 0.0, 0.0, 0.0, -Math.PI / 2, 0.0, 0.0],
+  [Manufacturer.Yaskawa]: [0.0, 0.0, 0.0, 0.0, -Math.PI / 2, 0.0, 0.0],
+  [Manufacturer.Kuka]: [
+    0.0,
+    -Math.PI / 2,
+    Math.PI / 2,
+    0.0,
+    Math.PI / 2,
+    0.0,
+    0.0,
+  ],
+  [Manufacturer.Universalrobots]: [
+    0.0,
+    -Math.PI / 2,
+    -Math.PI / 2,
+    -Math.PI / 2,
+    Math.PI / 2,
+    -Math.PI / 2,
+    0.0,
+  ],
+}
+
+/**
+ * Extracts manufacturer from modelFromController string.
+ * @param modelFromController - String in format "Manufacturer_ModelName"
+ * @returns Manufacturer enum value or null if not recognized
+ */
+export function extractManufacturer(
+  modelFromController: string,
+): Manufacturer | null {
+  const [manufacturerString] = modelFromController.split("_")
+
+  // Handle the mapping from string to enum
+  switch (manufacturerString) {
+    case "ABB":
+      return Manufacturer.Abb
+    case "FANUC":
+      return Manufacturer.Fanuc
+    case "YASKAWA":
+      return Manufacturer.Yaskawa
+    case "KUKA":
+      return Manufacturer.Kuka
+    case "UniversalRobots":
+      return Manufacturer.Universalrobots
+    default:
+      return null
+  }
+}
+
+/**
+ * Gets the default home config for a robot based on its model identifier.
+ * @param modelFromController - String in format "Manufacturer_ModelName"
+ * @param defaultJointConfig - Optional custom default configuration to use if manufacturer not found
+ * @returns Array of joint positions in radians, or null if no configuration available
+ */
+export function getDefaultHomeConfig(
+  modelFromController: string,
+  defaultJointConfig?: number[],
+): number[] | null {
+  const manufacturer = extractManufacturer(modelFromController)
+
+  if (manufacturer && manufacturer in MANUFACTURER_HOME_CONFIGS) {
+    return MANUFACTURER_HOME_CONFIGS[manufacturer]
+  }
+
+  return defaultJointConfig || null
+}

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

@@ -49,6 +49,7 @@
   "CycleTimer.Time.lb": "{{time}} min.",
   "ProgramControl.Start.bt": "Start",
   "ProgramControl.Resume.bt": "Weiter",
+  "ProgramControl.Retry.bt": "Wiederholen",
   "ProgramControl.Pause.bt": "Pause",
   "ProgramControl.Stop.bt": "Stopp",
   "ProgramStateIndicator.Running.lb": "In Betrieb",

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

@@ -50,6 +50,7 @@
   "CycleTimer.Time.lb": "{{time}} min.",
   "ProgramControl.Start.bt": "Start",
   "ProgramControl.Resume.bt": "Resume",
+  "ProgramControl.Retry.bt": "Retry",
   "ProgramControl.Pause.bt": "Pause",
   "ProgramControl.Stop.bt": "Stop",
   "ProgramStateIndicator.Running.lb": "Running",

package/src/index.ts

@@ -20,6 +20,11 @@ export * from "./components/ProgramStateIndicator"
 export * from "./components/RobotCard"
 export * from "./components/RobotListItem"
 export * from "./components/robots/AxisConfig"
+export {
+  extractManufacturer,
+  getDefaultHomeConfig,
+  MANUFACTURER_HOME_CONFIGS,
+} from "./components/robots/manufacturerHomePositions"
 export * from "./components/robots/Robot"
 export { defaultGetModel } from "./components/robots/robotModelLogic"
 export * from "./components/robots/SupportedRobot"

package/src/themes/createDarkTheme.ts

@@ -109,6 +109,80 @@ export function createDarkTheme(): Theme {
             scrollbarWidth: "thin",
             scrollbarColor: `${baseTheme.palette.divider} transparent`,
           },
+
+          // Global styles for DataGrid filter popup
+          ".MuiDataGrid-panelContent": {
+            borderRadius: "16px !important",
+            "& .MuiPaper-root": {
+              borderRadius: "16px !important",
+            },
+          },
+          ".MuiDataGrid-filterForm": {
+            borderRadius: "16px !important",
+            "& .MuiInputBase-root": {
+              borderRadius: "16px !important",
+              "& fieldset": {
+                borderRadius: "16px !important",
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderRadius: "16px !important",
+              },
+            },
+            "& .MuiTextField-root": {
+              "& .MuiInputBase-root": {
+                borderRadius: "16px !important",
+                "& fieldset": {
+                  borderRadius: "16px !important",
+                },
+                "& .MuiOutlinedInput-notchedOutline": {
+                  borderRadius: "16px !important",
+                },
+              },
+            },
+          },
+          ".MuiDataGrid-filterFormValueInput": {
+            "& .MuiInputBase-root": {
+              borderRadius: "16px !important",
+              "& fieldset": {
+                borderRadius: "16px !important",
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderRadius: "16px !important",
+              },
+            },
+          },
+        },
+      },
+      MuiDataGrid: {
+        styleOverrides: {
+          root: {
+            // Main DataGrid styling can go here if needed
+          },
+          panelContent: {
+            borderRadius: "16px !important",
+          },
+          filterForm: {
+            "& .MuiInputBase-root": {
+              borderRadius: "10px !important",
+              "& fieldset": {
+                borderRadius: "10px !important",
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderRadius: "10px !important",
+              },
+            },
+          },
+          filterFormValueInput: {
+            "& .MuiInputBase-root": {
+              borderRadius: "10px !important",
+              "& fieldset": {
+                borderRadius: "10px !important",
+              },
+              "& .MuiOutlinedInput-notchedOutline": {
+                borderRadius: "10px !important",
+              },
+            },
+          },
         },
       },
       MuiButton: {
@@ -287,5 +361,5 @@ export function createDarkTheme(): Theme {
         },
       },
     },
-  }
+  } as Theme
 }