@wandelbots/wandelbots-js-react-components 2.32.0-pr.feature-robot-precondition-list.372.5d8a86e → 2.32.0-pr.feature-robot-precondition-list.372.82f340f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.32.0-pr.feature-robot-precondition-list.372.5d8a86e",
+  "version": "2.32.0-pr.feature-robot-precondition-list.372.82f340f",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -139,6 +139,7 @@
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "@mui/x-charts": "^8.9.0",
+    "@mui/x-data-grid": "^8.10.1",
     "@shikijs/monaco": "^3.1.0",
     "i18next-browser-languagedetector": "^8.0.4",
     "lodash-es": "^4.17.21",

package/src/components/RobotCard.tsx

@@ -1,12 +1,4 @@
-import {
-  Box,
-  Button,
-  Card,
-  Divider,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material"
+import { Box, Button, Card, Divider, Typography, useTheme } from "@mui/material"
 import { Bounds, useBounds } from "@react-three/drei"
 import { Canvas } from "@react-three/fiber"
 import type {
@@ -29,24 +21,17 @@ import { Robot } from "./robots/Robot"
 function BoundsRefresher({
   modelRenderTrigger,
   children,
-  isPortrait = false,
 }: {
   modelRenderTrigger: number
   children: React.ReactNode
-  isPortrait?: boolean
 }) {
   const bounds = useBounds()
 
   useEffect(() => {
     if (modelRenderTrigger > 0) {
-      // For portrait mode, use more aggressive fitting
-      if (isPortrait) {
-        bounds.refresh().clip().fit()
-      } else {
-        bounds.refresh().clip().fit()
-      }
+      bounds.refresh().clip().fit()
     }
-  }, [modelRenderTrigger, bounds, isPortrait])
+  }, [modelRenderTrigger, bounds])
 
   return <>{children}</>
 }
@@ -90,6 +75,17 @@ export interface RobotCardProps {
     autoStart?: boolean
     className?: string
   }>
+  /** Callback to receive cycle timer controls for external timer management */
+  onCycleTimerReady?: (controls: {
+    startNewCycle: (maxTimeSeconds: number, elapsedSeconds?: number) => void
+    pause: () => void
+    resume: () => void
+    isPaused: () => boolean
+  }) => void
+  /** Callback fired when a cycle completes (reaches zero) */
+  onCycleEnd?: () => void
+  /** Whether the cycle timer should auto-start when a new cycle is set */
+  cycleTimerAutoStart?: boolean
   /** Additional CSS class name */
   className?: string
 }
@@ -131,6 +127,9 @@ export const RobotCard = externalizeComponent(
       connectedMotionGroup,
       robotComponent: RobotComponent = Robot,
       cycleTimerComponent: CycleTimerComponent = CycleTimer,
+      onCycleTimerReady,
+      onCycleEnd,
+      cycleTimerAutoStart = true,
       className,
     }: RobotCardProps) => {
       const theme = useTheme()
@@ -146,9 +145,13 @@ export const RobotCard = externalizeComponent(
       }>({ width: 400, height: 600 })
       const [modelRenderTrigger, setModelRenderTrigger] = useState(0)
 
-      // Responsive breakpoints
-      const isExtraSmall = useMediaQuery(theme.breakpoints.down("sm"))
-      const isSmall = useMediaQuery(theme.breakpoints.down("md"))
+      // Store cycle timer controls for external control
+      const cycleControlsRef = useRef<{
+        startNewCycle: (maxTimeSeconds: number, elapsedSeconds?: number) => void
+        pause: () => void
+        resume: () => void
+        isPaused: () => boolean
+      } | null>(null)
 
       // Hook to detect aspect ratio and size changes
       useEffect(() => {
@@ -198,9 +201,9 @@ export const RobotCard = externalizeComponent(
         }
       }, [isDriveToHomePressed, onDriveToHomeRelease])
 
-      // Mock cycle timer controls for now
+      // Store and provide cycle timer controls for external use
       const handleCycleComplete = useCallback(
-        (_controls: {
+        (controls: {
           startNewCycle: (
             maxTimeSeconds: number,
             elapsedSeconds?: number,
@@ -209,10 +212,15 @@ export const RobotCard = externalizeComponent(
           resume: () => void
           isPaused: () => boolean
         }) => {
-          // TODO: Implement cycle timer integration if needed
-          // Controls are available here for future integration
+          // Store the controls for potential future use
+          cycleControlsRef.current = controls
+
+          // Notify parent component that timer controls are ready
+          if (onCycleTimerReady) {
+            onCycleTimerReady(controls)
+          }
         },
-        [],
+        [onCycleTimerReady],
       )
 
       // Determine if robot should be hidden at small sizes to save space
@@ -301,10 +309,7 @@ export const RobotCard = externalizeComponent(
                   >
                     <PresetEnvironment />
                     <Bounds fit clip observe margin={1}>
-                      <BoundsRefresher
-                        modelRenderTrigger={modelRenderTrigger}
-                        isPortrait={false}
-                      >
+                      <BoundsRefresher modelRenderTrigger={modelRenderTrigger}>
                         <group ref={robotRef} scale={robotScale}>
                           <RobotComponent
                             connectedMotionGroup={connectedMotionGroup}
@@ -375,6 +380,8 @@ export const RobotCard = externalizeComponent(
                         variant="small"
                         compact
                         onCycleComplete={handleCycleComplete}
+                        onCycleEnd={onCycleEnd}
+                        autoStart={cycleTimerAutoStart}
                       />
                     </Box>
 
@@ -484,7 +491,6 @@ export const RobotCard = externalizeComponent(
                       <Bounds fit observe margin={1}>
                         <BoundsRefresher
                           modelRenderTrigger={modelRenderTrigger}
-                          isPortrait={true}
                         >
                           <group ref={robotRef} scale={robotScale}>
                             <RobotComponent
@@ -516,6 +522,8 @@ export const RobotCard = externalizeComponent(
                     variant="small"
                     compact
                     onCycleComplete={handleCycleComplete}
+                    onCycleEnd={onCycleEnd}
+                    autoStart={cycleTimerAutoStart}
                   />
 
                   {/* Divider */}

package/src/components/SearchableDataGrid.tsx

@@ -0,0 +1,461 @@
+import ClearIcon from "@mui/icons-material/Clear"
+import FilterListIcon from "@mui/icons-material/FilterList"
+import SearchIcon from "@mui/icons-material/Search"
+import { Box, Divider, Typography } from "@mui/material"
+import {
+  DataGrid,
+  type DataGridProps,
+  FilterPanelTrigger,
+  type GridColDef,
+  type GridRowParams,
+  QuickFilter,
+  QuickFilterClear,
+  QuickFilterControl,
+  QuickFilterTrigger,
+  Toolbar,
+  ToolbarButton,
+} from "@mui/x-data-grid"
+import { observer } from "mobx-react-lite"
+import { useMemo, useState } from "react"
+import { externalizeComponent } from "../externalizeComponent"
+
+export interface SearchableDataGridProps<T = Record<string, unknown>> {
+  /**
+   * Array of data items to display in the grid
+   */
+  data: T[]
+
+  /**
+   * Column definitions for the DataGrid
+   */
+  columns: GridColDef[]
+
+  /**
+   * Function to transform data items into DataGrid rows
+   * Should return an object with an 'id' field and other fields matching column definitions
+   */
+  getRowData: (item: T) => Record<string, unknown> & { id: string | number }
+
+  /**
+   * Callback when a row is clicked
+   */
+  onRowClick?: (item: T, params: GridRowParams) => void
+
+  /**
+   * Currently selected item (for highlighting)
+   */
+  selectedItem?: T | null
+
+  /**
+   * Function to get the ID of an item (used for selection highlighting)
+   */
+  getItemId?: (item: T) => string | number
+
+  /**
+   * Title displayed in the toolbar
+   */
+  title?: string
+
+  /**
+   * Show item count in title
+   * @default true
+   */
+  showCount?: boolean
+
+  /**
+   * Placeholder text for the search input
+   * @default "Search"
+   */
+  searchPlaceholder?: string
+
+  /**
+   * Additional DataGrid props to pass through
+   */
+  dataGridProps?: Partial<DataGridProps>
+
+  /**
+   * Custom toolbar component to replace the default one
+   */
+  CustomToolbar?: React.ComponentType
+
+  /**
+   * Background color for the component
+   * @default "transparent"
+   */
+  backgroundColor?: string
+
+  /**
+   * Select the first item by default
+   * @default false
+   */
+  selectFirstByDefault?: boolean
+}
+
+export const SearchableDataGrid = externalizeComponent(
+  observer(
+    <T,>({
+      data,
+      columns,
+      getRowData,
+      onRowClick,
+      selectedItem,
+      getItemId,
+      title,
+      showCount = true,
+      searchPlaceholder = "Search",
+      dataGridProps,
+      CustomToolbar,
+      backgroundColor = "transparent",
+      selectFirstByDefault = false,
+    }: SearchableDataGridProps<T>) => {
+      // Internal state for selection when not controlled
+      const [internalSelectedItem, setInternalSelectedItem] =
+        useState<T | null>(null)
+
+      // Prepare rows for the DataGrid
+      const rows = useMemo(() => data.map(getRowData), [data, getRowData])
+
+      // Handle default selection - only use if no selectedItem is explicitly provided
+      const effectiveSelectedItem = useMemo(() => {
+        // If selectedItem is explicitly provided, use it (including null)
+        if (selectedItem !== undefined) {
+          return selectedItem
+        }
+        // If we have an internal selection, use it
+        if (internalSelectedItem !== null) {
+          return internalSelectedItem
+        }
+        // Otherwise, use first item if selectFirstByDefault is true
+        if (selectFirstByDefault && data.length > 0) {
+          const firstItem = data[0]
+          // Set internal state to first item on initial load
+          setInternalSelectedItem(firstItem)
+          return firstItem
+        }
+        return null
+      }, [selectFirstByDefault, data, selectedItem, internalSelectedItem])
+
+      // Handle row click
+      const handleRowClick = (params: GridRowParams) => {
+        const item = data.find((item) => {
+          const rowData = getRowData(item)
+          return rowData.id === params.id
+        })
+
+        if (item) {
+          // Update internal selection state if not controlled by props
+          if (selectedItem === undefined) {
+            setInternalSelectedItem(item)
+          }
+
+          // Call the user's onRowClick callback
+          if (onRowClick) {
+            onRowClick(item, params)
+          }
+        }
+      }
+
+      // Get selected row ID for highlighting
+      const selectedRowId = useMemo(() => {
+        if (!effectiveSelectedItem || !getItemId) return null
+        return getItemId(effectiveSelectedItem)
+      }, [effectiveSelectedItem, getItemId])
+
+      // Default toolbar with filter and quick filter
+      function DefaultToolbar() {
+        return (
+          <Toolbar>
+            <Box
+              sx={{
+                display: "flex",
+                width: "100%",
+                gap: 1,
+                p: 1,
+                alignItems: "center",
+              }}
+            >
+              {title && (
+                <Typography
+                  variant="h6"
+                  sx={{
+                    fontWeight: 500,
+                    color: "white",
+                  }}
+                >
+                  {title}
+                  {showCount && ` (${data.length})`}
+                </Typography>
+              )}
+              <Box
+                sx={{
+                  ml: "auto",
+                  display: "flex",
+                  gap: 1,
+                  alignItems: "center",
+                }}
+              >
+                <FilterPanelTrigger
+                  render={
+                    <ToolbarButton aria-label="Show filters">
+                      <FilterListIcon fontSize="small" />
+                    </ToolbarButton>
+                  }
+                />
+                <Divider
+                  orientation="vertical"
+                  flexItem
+                  sx={{
+                    height: "24px",
+                    alignSelf: "center",
+                  }}
+                />
+                <QuickFilter
+                  render={(props, state) => (
+                    <Box
+                      {...props}
+                      sx={{
+                        display: "flex",
+                        overflow: "hidden",
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          borderRadius: state.expanded ? "4px 0 0 4px" : "4px",
+                          borderRight: state.expanded ? "none" : undefined,
+                        }}
+                      >
+                        <QuickFilterTrigger
+                          render={
+                            <ToolbarButton aria-label="Search">
+                              <SearchIcon fontSize="small" />
+                            </ToolbarButton>
+                          }
+                        />
+                      </Box>
+                      <Box
+                        sx={{
+                          display: "flex",
+                          overflow: "hidden",
+                          transition: "all 0.3s ease-in-out",
+                          width: state.expanded ? "192px" : "0px",
+                        }}
+                      >
+                        <Box
+                          sx={{
+                            flex: 1,
+                            "& .MuiInputBase-root": {
+                              height: "32px",
+                              borderRadius:
+                                state.expanded && state.value !== ""
+                                  ? "0"
+                                  : "0 4px 4px 0",
+                            },
+                          }}
+                        >
+                          <QuickFilterControl placeholder={searchPlaceholder} />
+                        </Box>
+                        {state.expanded && state.value !== "" && (
+                          <QuickFilterClear
+                            render={
+                              <Box sx={{ borderRadius: "0 4px 4px 0" }}>
+                                <ToolbarButton aria-label="Clear">
+                                  <ClearIcon fontSize="small" />
+                                </ToolbarButton>
+                              </Box>
+                            }
+                          />
+                        )}
+                      </Box>
+                    </Box>
+                  )}
+                />
+              </Box>
+            </Box>
+          </Toolbar>
+        )
+      }
+
+      const ToolbarComponent = CustomToolbar || DefaultToolbar
+
+      return (
+        <Box
+          sx={{
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            background: "var(--background-paper-elevation-5, #202233)",
+          }}
+        >
+          <DataGrid
+            rows={rows}
+            columns={columns}
+            onRowClick={handleRowClick}
+            disableColumnMenu={false}
+            disableRowSelectionOnClick={true}
+            disableMultipleRowSelection={true}
+            hideFooterSelectedRowCount={true}
+            filterMode="client"
+            sortingOrder={["desc", "asc"]}
+            hideFooter={false}
+            showToolbar={true}
+            slots={{
+              toolbar: ToolbarComponent,
+            }}
+            initialState={{
+              sorting: {
+                sortModel: [],
+              },
+              filter: {
+                filterModel: {
+                  items: [],
+                },
+              },
+              ...dataGridProps?.initialState,
+            }}
+            {...dataGridProps}
+            // Ensure autosize properties are not overridden by dataGridProps
+            autosizeOnMount={dataGridProps?.autosizeOnMount ?? true}
+            autosizeOptions={{
+              includeOutliers: true,
+              includeHeaders: true,
+              expand: true,
+              ...dataGridProps?.autosizeOptions,
+            }}
+            sx={{
+              border: "none",
+              backgroundColor: "transparent",
+              width: "100%",
+              "& .MuiDataGrid-main": {
+                border: "none",
+                backgroundColor: "transparent",
+              },
+              "& .MuiDataGrid-container--top [role=row]": {
+                backgroundColor: "transparent !important",
+              },
+              "& .MuiDataGrid-topContainer": {
+                borderBottom: "none !important",
+              },
+              "& .MuiDataGrid-columnHeaders": {
+                border: "none",
+                borderBottom: "none !important",
+                backgroundColor: "var(--background-paper-elevation-5, #202233)",
+              },
+              "& .MuiDataGrid-row": {
+                cursor: onRowClick ? "pointer" : "default",
+                border: "none",
+                margin: "0px 0",
+                position: "relative",
+                "&:hover": {
+                  backgroundColor: "transparent !important",
+                  "&::before": {
+                    content: '""',
+                    position: "absolute",
+                    top: 0,
+                    left: "16px",
+                    right: "16px",
+                    bottom: 0,
+                    backgroundColor: "action.hover",
+                    borderRadius: "16px",
+                    zIndex: 0,
+                  },
+                },
+                // Disable MUI's built-in selection styling completely
+                "&.Mui-selected": {
+                  backgroundColor: "transparent !important",
+                  "&:hover": {
+                    backgroundColor: "transparent !important",
+                  },
+                },
+                // Highlight selected row with a distinct color using data attribute
+                ...(selectedRowId !== null && {
+                  [`&[data-id="${selectedRowId}"]`]: {
+                    "&::before": {
+                      content: '""',
+                      position: "absolute",
+                      top: 0,
+                      left: "16px",
+                      right: "16px",
+                      bottom: 0,
+                      backgroundColor: "rgba(255, 255, 255, 0.08) !important",
+                      borderRadius: "16px",
+                      zIndex: 0,
+                    },
+                    "&:hover::before": {
+                      backgroundColor: "rgba(255, 255, 255, 0.12) !important",
+                    },
+                  },
+                }),
+              },
+              "& .MuiDataGrid-cell--textLeft": {
+                paddingLeft: "40px",
+              },
+              "& .MuiDataGrid-cell": {
+                border: "none",
+                position: "relative",
+                zIndex: 1,
+                "&:focus": {
+                  outline: "none",
+                },
+                "&:focus-within": {
+                  outline: "none",
+                },
+              },
+              "& .MuiDataGrid-columnHeader": {
+                border: "none",
+                paddingLeft: "40px",
+                paddingRight: "40px",
+                backgroundColor: "transparent !important",
+                "& .MuiDataGrid-columnHeaderTitle": {
+                  color: "rgba(255, 255, 255, 0.6)",
+                },
+              },
+              "& .MuiDataGrid-toolbarContainer": {
+                padding: "8px",
+                border: "none !important",
+                borderBottom: "none !important",
+                "& .MuiBox-root": {
+                  backgroundColor: "transparent !important",
+                },
+                "& .MuiFormControl-root": {
+                  backgroundColor: "transparent !important",
+                },
+                "& .MuiInputBase-root": {
+                  backgroundColor: "transparent !important",
+                },
+                "& *": {
+                  borderBottom: "none !important",
+                },
+              },
+              "& .MuiDataGrid-toolbar": {
+                borderBottom: "none !important",
+              },
+              "& .MuiDataGrid-toolbarFilterList": {
+                border: "none",
+              },
+              "& .MuiDataGrid-withBorderColor": {
+                borderColor: "transparent !important",
+              },
+              "& .MuiDataGrid-columnSeparator": {
+                display: "none",
+              },
+              "& .MuiDataGrid-footerContainer": {
+                display: "none",
+              },
+              "& .MuiDataGrid-filler": {
+                border: "none !important",
+                borderTop: "none !important",
+                borderBottom: "none !important",
+                borderLeft: "none !important",
+                borderRight: "none !important",
+                "--rowBorderColor": "none !important",
+              },
+              ...dataGridProps?.sx,
+            }}
+          />
+        </Box>
+      )
+    },
+  ),
+)
+
+SearchableDataGrid.displayName = "SearchableDataGrid"

package/src/index.ts

@@ -20,6 +20,7 @@ export { defaultGetModel } from "./components/robots/robotModelLogic"
 export * from "./components/robots/SupportedRobot"
 export * from "./components/RobotSetupReadinessIndicator"
 export * from "./components/safetyBar/SafetyBar"
+export * from "./components/SearchableDataGrid"
 export * from "./components/SelectableFab"
 export * from "./components/utils/hooks"
 export * from "./components/utils/interpolation"