@wandelbots/wandelbots-js-react-components 2.58.0 → 2.59.0-pr.dev-fix-flaky-task.488.1957fef

package/src/components/robots/robotModelLogic.ts

@@ -1,13 +1,82 @@
+import { NovaClient } from "@wandelbots/nova-js/v2"
 import type { Object3D } from "three"
 import type { GLTF } from "three-stdlib"
-import { version } from "../../../package.json"
 
-export function defaultGetModel(modelFromController: string): string {
-  let useVersion = version
-  if (version.startsWith("0.")) {
-    useVersion = ""
+const modelCache = new Map<string, Promise<string>>()
+
+/**
+ * Revoke a cached model's object URL to prevent memory leaks.
+ * Call this when a component unmounts or no longer needs the model.
+ */
+export async function revokeModelUrl(modelFromController: string): Promise<void> {
+  const urlPromise = modelCache.get(modelFromController)
+  if (!urlPromise) return
+
+  try {
+    const url = await urlPromise
+    URL.revokeObjectURL(url)
+  } catch (e) {
+    // Ignore errors - URL may already be revoked
+  }
+  modelCache.delete(modelFromController)
+}
+
+/**
+ * Revoke all cached model object URLs and clear the cache.
+ * Useful for cleanup on app teardown.
+ */
+export async function revokeAllModelUrls(): Promise<void> {
+  const entries = Array.from(modelCache.entries())
+  await Promise.allSettled(
+    entries.map(async ([key, urlPromise]) => {
+      try {
+        const url = await urlPromise
+        URL.revokeObjectURL(url)
+      } catch (e) {
+        // Ignore errors
+      }
+    })
+  )
+  modelCache.clear()
+}
+
+export async function defaultGetModel(modelFromController: string): Promise<string> {
+  // Check cache first
+  if (modelCache.has(modelFromController)) {
+    return modelCache.get(modelFromController)!
   }
-  return `https://cdn.jsdelivr.net/gh/wandelbotsgmbh/wandelbots-js-react-components${useVersion ? `@${useVersion}` : ""}/public/models/${modelFromController}.glb`
+  
+  // Create the promise and cache it immediately to prevent duplicate calls
+  const modelPromise = (async () => {
+    const instanceUrl = import.meta.env.WANDELAPI_BASE_URL    
+    const nova = new NovaClient({ instanceUrl })
+    
+    // Configure axios to handle binary responses for GLB files
+    const apiInstance = nova.api.motionGroupModels as any
+    if (apiInstance.axios?.interceptors) {
+      apiInstance.axios.interceptors.request.use((config: any) => {
+        if (config.url?.includes('/glb')) {
+          config.responseType = 'blob'
+        }
+        return config
+      })
+    }
+    
+    try {
+      const file = await nova.api.motionGroupModels.getMotionGroupGlbModel(modelFromController)
+      
+      // Create object URL from the file and return it
+      const url = URL.createObjectURL(file)
+      return url
+    } catch (error) {
+      console.error("Failed to fetch model:", error)
+      throw error
+    }
+  })()
+  
+  // Cache the promise
+  modelCache.set(modelFromController, modelPromise)
+  return modelPromise
 }
 
 /**

package/src/components/safetyBar/ControllerTypeIndicator.tsx

@@ -1,5 +1,6 @@
 import { useTheme, type PopoverOrigin } from "@mui/material"
 import { observer } from "mobx-react-lite"
+import { useId } from "react"
 import { Trans, useTranslation } from "react-i18next"
 import ControllerTypePhysicalIcon from "./icons/controller-type-physical.svg"
 import ControllerTypeVirtualIcon from "./icons/controller-type-virtual.svg"
@@ -22,12 +23,13 @@ export const ControllerTypeIndicator = observer(
     compact,
   }: ControllerTypeIndicatorProps) => {
     const theme = useTheme()
+    const componentId = useId()
     const { t } = useTranslation()
 
     if (isVirtual) {
       return (
         <IndicatorWithExplanation
-          id="motion-group-virtual"
+          id={`motion-group-virtual-${componentId}`}
           icon={ControllerTypeVirtualIcon}
           color={theme.palette.tertiary.main}
           name={t("SafetyBar.ControllerType.Virtual.lb")}
@@ -52,7 +54,7 @@ export const ControllerTypeIndicator = observer(
 
     return (
       <IndicatorWithExplanation
-        id="motion-group-physical"
+        id={`motion-group-physical-${componentId}`}
         icon={ControllerTypePhysicalIcon}
         color={theme.palette.primary.main}
         name={t("SafetyBar.ControllerType.Physical.lb")}

package/src/components/safetyBar/OperationModeIndicator.tsx

@@ -1,6 +1,7 @@
 import { useTheme, type PopoverOrigin } from "@mui/material"
-import type { RobotControllerStateOperationModeEnum } from "@wandelbots/nova-js/v1"
+import type { OperationMode } from "@wandelbots/nova-js/v2"
 import { observer } from "mobx-react-lite"
+import { useId } from "react"
 import { Trans, useTranslation } from "react-i18next"
 import OperationModeAutomaticIcon from "./icons/operation-mode-automatic.svg"
 import OperationModeErrorIcon from "./icons/operation-mode-error.svg"
@@ -8,7 +9,7 @@ import OperationModeManualIcon from "./icons/operation-mode-manual.svg"
 import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
 
 interface OperationModeIndicatorProps {
-  operationMode: RobotControllerStateOperationModeEnum
+  operationMode: OperationMode
   anchorOrigin?: PopoverOrigin
   transformOrigin?: PopoverOrigin
   compact: boolean
@@ -23,12 +24,13 @@ export const OperationModeIndicator = observer(
   }: OperationModeIndicatorProps) => {
     const { t } = useTranslation()
     const theme = useTheme()
+    const componentId = useId()
 
     switch (operationMode) {
       case "OPERATION_MODE_AUTO":
         return (
           <IndicatorWithExplanation
-            id="operation-mode-auto"
+            id={`operation-mode-auto-${componentId}`}
             icon={OperationModeAutomaticIcon}
             title={t("SafetyBar.OperationMode.ti")}
             name={t("SafetyBar.OperationMode.Automatic.ti")}
@@ -49,7 +51,7 @@ export const OperationModeIndicator = observer(
       case "OPERATION_MODE_MANUAL_T2": {
         return (
           <IndicatorWithExplanation
-            id="operation-mode-manual"
+            id={`operation-mode-manual-${componentId}`}
             icon={OperationModeManualIcon}
             color={theme.palette.warning.main}
             title={t("SafetyBar.OperationMode.ti")}
@@ -71,7 +73,7 @@ export const OperationModeIndicator = observer(
       default:
         return (
           <IndicatorWithExplanation
-            id="operation-mode-error"
+            id={`operation-mode-error-${componentId}`}
             icon={OperationModeErrorIcon}
             color={theme.palette.warning.main}
             title={t("SafetyBar.OperationMode.ti")}

package/src/components/safetyBar/SafetyBar.tsx

@@ -1,8 +1,5 @@
 import { Divider, Stack, type PopoverOrigin } from "@mui/material"
-import type {
-  RobotControllerStateOperationModeEnum,
-  RobotControllerStateSafetyStateEnum,
-} from "@wandelbots/nova-js/v1"
+import type { OperationMode, SafetyStateType } from "@wandelbots/nova-js/v2"
 import { observer } from "mobx-react-lite"
 import { externalizeComponent } from "../../externalizeComponent"
 import { ControllerTypeIndicator } from "./ControllerTypeIndicator"
@@ -12,8 +9,8 @@ import { SafetyStateIndicator } from "./SafetyStateIndicator"
 export interface SafetyBarProps {
   isVirtual: boolean
   motionGroupId: string
-  operationMode: RobotControllerStateOperationModeEnum
-  safetyState: RobotControllerStateSafetyStateEnum
+  operationMode: OperationMode
+  safetyState: SafetyStateType
   anchorOrigin?: PopoverOrigin
   transformOrigin?: PopoverOrigin
   compact?: boolean

package/src/components/safetyBar/SafetyStateIndicator.tsx

@@ -1,6 +1,7 @@
 import { useTheme, type PopoverOrigin } from "@mui/material"
-import type { RobotControllerStateSafetyStateEnum } from "@wandelbots/nova-js/v1"
+import type { SafetyStateType } from "@wandelbots/nova-js/v2"
 import { observer } from "mobx-react-lite"
+import { useId } from "react"
 import { Trans, useTranslation } from "react-i18next"
 import { assertUnreachable } from "../utils/errorHandling"
 import SafetyStateErrorIcon from "./icons/safety-state-error.svg"
@@ -11,7 +12,7 @@ import SafetyStateStopIcon from "./icons/safety-state-stop.svg"
 import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
 
 interface SafetyStateIndicatorProps {
-  safetyState: RobotControllerStateSafetyStateEnum
+  safetyState: SafetyStateType
   anchorOrigin?: PopoverOrigin
   transformOrigin?: PopoverOrigin
   compact: boolean
@@ -26,13 +27,14 @@ export const SafetyStateIndicator = observer(
   }: SafetyStateIndicatorProps) => {
     const { t } = useTranslation()
     const theme = useTheme()
+    const componentId = useId()
 
     switch (safetyState) {
       // Normal state, robot can move
       case "SAFETY_STATE_NORMAL":
         return (
           <IndicatorWithExplanation
-            id="safety-state-normal"
+            id={`safety-state-normal-${componentId}`}
             title={t("SafetyBar.SafetyState.ti")}
             name={t("SafetyBar.SafetyState.Normal.lb")}
             label={compact ? null : t("SafetyBar.SafetyState.Normal.lb")}
@@ -54,7 +56,7 @@ export const SafetyStateIndicator = observer(
       case "SAFETY_STATE_ROBOT_EMERGENCY_STOP":
         return (
           <IndicatorWithExplanation
-            id="safety-state-estop"
+            id={`safety-state-estop-${componentId}`}
             title={t("SafetyBar.SafetyState.ti")}
             name={t("SafetyBar.SafetyState.Estop.lb")}
             label={compact ? null : t("SafetyBar.SafetyState.Estop.lb")}
@@ -81,7 +83,7 @@ export const SafetyStateIndicator = observer(
       case "SAFETY_STATE_STOP":
         return (
           <IndicatorWithExplanation
-            id="safety-state-stop"
+            id={`safety-state-stop-${componentId}`}
             icon={SafetyStateStopIcon}
             title={t("SafetyBar.SafetyState.ti")}
             name={t("SafetyBar.SafetyState.Stop.lb")}
@@ -108,7 +110,7 @@ export const SafetyStateIndicator = observer(
       case "SAFETY_STATE_VIOLATION":
         return (
           <IndicatorWithExplanation
-            id="safety-state-manual-action-required"
+            id={`safety-state-manual-action-required-${componentId}`}
             icon={SafetyStateManualActionRequiredIcon}
             color={theme.palette.warning.main}
             title={t("SafetyBar.SafetyState.ti")}
@@ -135,7 +137,7 @@ export const SafetyStateIndicator = observer(
       case "SAFETY_STATE_FAULT":
         return (
           <IndicatorWithExplanation
-            id="safety-state-error"
+            id={`safety-state-error-${componentId}`}
             icon={SafetyStateErrorIcon}
             color={theme.palette.error.main}
             title={t("SafetyBar.SafetyState.ti")}

package/src/components/utils/errorHandling.test.ts

@@ -0,0 +1,41 @@
+import axios, { AxiosError, AxiosHeaders } from "axios"
+import { expect, test } from "vitest"
+import { makeErrorMessage } from "./errorHandling"
+
+test("making useful error messages", async () => {
+  // Error objects take the message
+  const someCustomError = new Error("some custom error")
+  expect(makeErrorMessage(someCustomError)).toEqual("some custom error")
+
+  // Strings go through prefixed
+  expect(makeErrorMessage("some string")).toEqual(
+    'Unexpected error: "some string"',
+  )
+
+  // Random objects get serialized
+  expect(makeErrorMessage({ some: "object" })).toEqual(
+    'Unexpected error: {"some":"object"}',
+  )
+
+  // Axios errors with a response should include the response code
+  // and url - but not for 404, we use a friendly message for that
+  try {
+    await axios.get("http://example.com/doesnt-exist")
+    expect(true).toBe(false)
+  } catch (err) {
+    expect(makeErrorMessage(err)).toMatch(
+      "Failed to connect to the server. Please check your internet connection.",
+    )
+  }
+
+  // Not sure how to reproduce CORS errors naturally in vitest environment
+  // so let's create it manually
+  const networkError = new AxiosError("Network Error", "ERR_NETWORK", {
+    url: "http://example.com/some-cors-thing",
+    method: "post",
+    headers: new AxiosHeaders(),
+  })
+  expect(makeErrorMessage(networkError)).toEqual(
+    "Failed to connect to the server. Please check your internet connection.",
+  )
+})

package/src/components/utils/errorHandling.ts

@@ -1,6 +1,10 @@
 import { AxiosError } from "axios"
 import { tryStringifyJson } from "./converters"
 
+// Please note: These helper functions also exist in nova.js
+// (with slightly different formatting), and will be unified
+// at some point in the future.
+
 export function delay(ms: number) {
   return new Promise((resolve) => setTimeout(resolve, ms))
 }

package/src/core.ts

@@ -0,0 +1,33 @@
+// Core components without heavy dependencies (Three.js, Monaco, MUI X)
+export * from "./components/AppHeader"
+export * from "./components/CycleTimer"
+export * from "./components/DataGrid"
+export * from "./components/jogging/JoggingCartesianAxisControl"
+export * from "./components/jogging/JoggingJointRotationControl"
+export * from "./components/jogging/JoggingPanel"
+export { JoggingStore } from "./components/jogging/JoggingStore"
+export * from "./components/jogging/PoseCartesianValues"
+export * from "./components/jogging/PoseJointValues"
+export * from "./components/LoadingCover"
+export * from "./components/LogPanel"
+export { LogStore } from "./components/LogStore"
+export * from "./components/LogViewer"
+export * from "./components/modal/NoMotionGroupModal"
+export * from "./components/ProgramControl"
+export * from "./components/ProgramStateIndicator"
+export * from "./components/RobotListItem"
+export * from "./components/RobotSetupReadinessIndicator"
+export * from "./components/safetyBar/SafetyBar"
+export * from "./components/SelectableFab"
+export * from "./components/TabBar"
+export * from "./components/Timer"
+export * from "./components/utils/hooks"
+export * from "./components/utils/interpolation"
+export * from "./components/VelocitySlider"
+export * from "./i18n/config"
+export * from "./lib/ConnectedMotionGroup"
+export * from "./lib/JoggerConnection"
+export * from "./lib/motionStateUpdate"
+export * from "./lib/MotionStreamConnection"
+export * from "./themes/themeTypes"
+export { createNovaMuiTheme } from "./themes/theming"

package/src/env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+// Ensure ImportMeta.env types from Vite are available to TypeScript.

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

@@ -4,6 +4,9 @@
   "Jogging.Velocity.lb": "Geschwindigkeit",
   "General.degree.variable": "{{amount}}°",
   "General.mm.variable": "{{amount}} mm",
+  "Jogging.Blocked.ti": "Verbindung blockiert",
+  "Jogging.Blocked.lb": "Ein anderer Client kontrolliert das Jogging.",
+  "Jogging.Blocked.Reenable.bt": "Neu verbinden",
   "Jogging.Cartesian.MotionType.lb": "Bewegungstyp",
   "Jogging.Cartesian.Translation.bt": "Translation",
   "Jogging.Cartesian.Rotation.bt": "Rotation",

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

@@ -4,6 +4,9 @@
   "Jogging.Velocity.lb": "Velocity",
   "General.degree.variable": "{{amount}}°",
   "General.mm.variable": "{{amount}} mm",
+  "Jogging.Blocked.ti": "Connection blocked",
+  "Jogging.Blocked.lb": "Another client is currently controlling the jogging.",
+  "Jogging.Blocked.Reenable.bt": "Reconnect",
   "Jogging.Cartesian.MotionType.lb": "Motion type",
   "Jogging.Cartesian.Translation.bt": "Translation",
   "Jogging.Cartesian.Rotation.bt": "Rotation",

package/src/index.ts

@@ -1,43 +1,4 @@
-export { default as CollisionSceneRenderer } from "./components/3d-viewport/collider/CollisionSceneRenderer"
-export * from "./components/3d-viewport/PresetEnvironment"
-export * from "./components/3d-viewport/SafetyZonesRenderer"
-export * from "./components/3d-viewport/TrajectoryRenderer"
-export * from "./components/AppHeader"
-export * from "./components/CycleTimer"
-export * from "./components/Timer"
-export * from "./components/DataGrid"
-export * from "./components/jogging/JoggingCartesianAxisControl"
-export * from "./components/jogging/JoggingJointRotationControl"
-export * from "./components/jogging/JoggingPanel"
-export { JoggingStore } from "./components/jogging/JoggingStore"
-export * from "./components/jogging/PoseCartesianValues"
-export * from "./components/jogging/PoseJointValues"
-export * from "./components/LoadingCover"
-export * from "./components/LogPanel"
-export { LogStore } from "./components/LogStore"
-export * from "./components/LogViewer"
-export * from "./components/modal/NoMotionGroupModal"
-export * from "./components/ProgramControl"
-export * from "./components/ProgramStateIndicator"
-export * from "./components/RobotCard"
-export * from "./components/RobotListItem"
-export * from "./components/robots/AxisConfig"
-export {
-  MANUFACTURER_HOME_CONFIGS,
-  extractManufacturer,
-  getDefaultHomeConfig,
-} from "./components/robots/manufacturerHomePositions"
-export * from "./components/robots/Robot"
-export { defaultGetModel } from "./components/robots/robotModelLogic"
-export * from "./components/robots/SupportedRobot"
-export * from "./components/RobotSetupReadinessIndicator"
-export * from "./components/safetyBar/SafetyBar"
-export * from "./components/SelectableFab"
-export * from "./components/TabBar"
-export * from "./components/utils/hooks"
-export * from "./components/utils/interpolation"
-export * from "./components/VelocitySlider"
-export * from "./components/wandelscript-editor/WandelscriptEditor"
-export * from "./i18n/config"
-export * from "./themes/themeTypes"
-export { createNovaMuiTheme } from "./themes/theming"
+// Re-export all sub-entry points
+export * from "./3d"
+export * from "./core"
+export * from "./wandelscript"