@wandelbots/wandelbots-js-react-components 3.6.0 → 3.6.1-pr.feat-model-retrieval-from-rdp.463.65f387f

package/dist/wandelscript.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./WandelscriptEditor-Dj7TBCkF.cjs");exports.WandelscriptEditor=t.WandelscriptEditor;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./WandelscriptEditor-D6_vS5Uk.cjs");exports.WandelscriptEditor=t.WandelscriptEditor;
 //# sourceMappingURL=wandelscript.cjs.js.map

package/dist/wandelscript.es.js

@@ -1,4 +1,4 @@
-import { W as t } from "./WandelscriptEditor-DnJvITTA.js";
+import { W as t } from "./WandelscriptEditor-7eN-Yw7m.js";
 export {
   t as WandelscriptEditor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "3.6.0",
+  "version": "3.6.1-pr.feat-model-retrieval-from-rdp.463.65f387f",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -50,7 +50,8 @@
     "ci:test:runner": "wait-on tcp:127.0.0.1:9009 && test-storybook --url http://127.0.0.1:9009 --index-json --browsers chromium",
     "build": "rimraf dist && vite build && tsc --declaration --emitDeclarationOnly",
     "build-storybook": "storybook build",
-    "prepare": "husky || true"
+    "prepare": "husky || true",
+    "td": "tsx scripts/td-wrapper.ts"
   },
   "repository": {
     "type": "git",
@@ -63,6 +64,10 @@
   ],
   "author": "Wandelbots",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=18.14.0",
+    "npm": ">=8.0.0"
+  },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
@@ -77,18 +82,18 @@
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
     "@shikijs/monaco": "^3.1.0",
-    "@storybook/addon-docs": "^10.1.7",
-    "@storybook/react-vite": "^10.1.10",
+    "@storybook/addon-docs": "^10.2.3",
+    "@storybook/react-vite": "^10.2.3",
     "@storybook/test-runner": "^0.24.1",
     "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^19.1.8",
     "@types/three": "^0.182.0",
     "@vitejs/plugin-react": "^4.3.4",
-    "@wandelbots/nova-js": "^3.4.1",
+    "@wandelbots/nova-js": "^3.5.0",
     "add": "^2.0.6",
     "eslint-plugin-storybook": "^10.1.10",
     "glob": "^13.0.0",
@@ -114,11 +119,12 @@
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "^25.0.2",
     "shiki": "^3.1.0",
-    "storybook": "^10.1.11",
-    "storybook-preset-inline-svg": "^1.0.1",
+    "storybook": "^10.2.3",
+    "storybook-preset-inline-svg": "^2.0.0",
     "three": "^0.182.0",
     "three-stdlib": "^2.35.14",
     "ts-dedent": "^2.2.0",
+    "tsx": "^4.21.0",
     "typescript": "^5.8.2",
     "unplugin": "^1.15.0",
     "vite": "^6.2.0",
@@ -168,14 +174,18 @@
     }
   },
   "dependencies": {
-    "@mui/x-charts": "8.24.0",
-    "@mui/x-data-grid": "8.24.0",
-    "i18next-browser-languagedetector": "^8.0.4",
+    "@mui/x-charts": "^8.27.0",
+    "@mui/x-data-grid": "^8.27.0",
+    "@wandelbots/nova-js": "3.5.0",
+    "axios": "^1.13.2",
+    "dotenv": "^17.2.3",
+    "i18next-browser-languagedetector": "^8.2.0",
     "lodash-es": "^4.17.21",
     "mobx": "^6.13.6",
     "mobx-react-lite": "^4.1.0",
     "react-error-boundary": "^6.0.3",
-    "react-i18next": "^16.5.2"
+    "react-i18next": "^16.5.2",
+    "username": "^7.0.0"
   },
   "overrides": {
     "storybook": "$storybook"

package/src/components/RobotCard.tsx

@@ -52,7 +52,7 @@ export interface RobotCardProps {
     flangeRef?: React.Ref<Group>
     postModelRender?: () => void
     transparentColor?: string
-    getModel?: (modelFromController: string) => string
+    getModel?: (modelFromController: string) => Promise<string>
   }>
   /** Custom component to render in the content area (optional) */
   customContentComponent?: React.ComponentType<Record<string, unknown>>

package/src/components/robots/GenericRobot.tsx

@@ -1,12 +1,12 @@
 import { useGLTF } from "@react-three/drei"
 import type { ThreeElements } from "@react-three/fiber"
-import React, { useCallback } from "react"
+import React, { useCallback, useEffect, useState } from "react"
 import type { Group, Mesh } from "three"
 import { type Object3D } from "three"
 import { isFlange, parseRobotModel } from "./robotModelLogic"
 
 export type RobotModelProps = {
-  modelURL: string
+  modelURL: string | Promise<string>
   /**
    * Called after a robot model has been loaded and
    * rendered into the threejs scene
@@ -19,16 +19,25 @@ function isMesh(node: Object3D): node is Mesh {
   return node.type === "Mesh"
 }
 
-export function GenericRobot({
-  modelURL,
-  flangeRef,
-  postModelRender,
-  ...props
-}: RobotModelProps) {
-  const { gltf } = parseRobotModel(
-    useGLTF(modelURL),
-    modelURL.split("/").pop() || modelURL,
-  )
+// Separate component that only renders when we have a valid URL
+function LoadedRobotModel({ 
+  url, 
+  flangeRef, 
+  postModelRender, 
+  ...props 
+}: { 
+  url: string
+  flangeRef?: React.Ref<Group>
+  postModelRender?: () => void
+} & ThreeElements["group"]) {
+  const gltfResult = useGLTF(url)
+  let gltf
+  try {
+    const parsed = parseRobotModel(gltfResult, 'robot.glb')
+    gltf = parsed.gltf
+  } catch (err) {
+    throw err;
+  }
 
   const groupRef: React.RefCallback<Group> = useCallback(
     (group) => {
@@ -36,33 +45,45 @@ export function GenericRobot({
         postModelRender()
       }
     },
-    [modelURL],
+    [postModelRender],
   )
 
   function renderNode(node: Object3D): React.ReactNode {
-    if (isMesh(node)) {
-      return (
-        <mesh
-          name={node.name}
-          key={node.uuid}
-          geometry={node.geometry}
-          material={node.material}
-          position={node.position}
-          rotation={node.rotation}
-        />
-      )
-    } else {
-      return (
-        <group
-          name={node.name}
-          key={node.uuid}
-          position={node.position}
-          rotation={node.rotation}
-          ref={isFlange(node) ? flangeRef : undefined}
-        >
-          {node.children.map(renderNode)}
-        </group>
-      )
+    try {
+      if (isMesh(node)) {
+        // Defensive: only render mesh if geometry exists
+        if ((node as Mesh).geometry) {
+          return (
+            <mesh
+              name={node.name}
+              key={node.uuid}
+              geometry={(node as Mesh).geometry}
+              material={(node as Mesh).material}
+              position={node.position}
+              rotation={node.rotation}
+            />
+          )
+        }
+        // Fallback to empty group if geometry is missing
+        return (
+          <group name={node.name} key={node.uuid} position={node.position} rotation={node.rotation} />
+        )
+      } else {
+        return (
+          <group
+            name={node.name}
+            key={node.uuid}
+            position={node.position}
+            rotation={node.rotation}
+            ref={isFlange(node) ? flangeRef : undefined}
+          >
+            {node.children.map(renderNode)}
+          </group>
+        )
+      }
+    } catch (e) {
+      console.warn('Error rendering node', node.name, e)
+      return null
     }
   }
 
@@ -72,3 +93,43 @@ export function GenericRobot({
     </group>
   )
 }
+
+export function GenericRobot({
+  modelURL,
+  flangeRef,
+  postModelRender,
+  ...props
+}: RobotModelProps) {
+  const [resolvedURL, setResolvedURL] = useState<string | null>(null)
+  
+  useEffect(() => {
+    const resolveURL = async () => {
+      try {
+        if (typeof modelURL === 'string') {
+          setResolvedURL(modelURL)
+        } else {
+          const url = await modelURL
+          setResolvedURL(url)
+        }
+      } catch (error) {
+        console.error('Failed to resolve model URL:', error)
+      }
+    }
+    
+    resolveURL()
+  }, [modelURL])
+
+  // Don't render until we have a resolved URL
+  if (!resolvedURL) {
+    return null // Loading state
+  }
+  
+  return (
+    <LoadedRobotModel 
+      url={resolvedURL}
+      flangeRef={flangeRef}
+      postModelRender={postModelRender}
+      {...props}
+    />
+  )
+}

package/src/components/robots/Robot.tsx

@@ -7,7 +7,7 @@ import { SupportedRobot } from "./SupportedRobot"
 
 export type RobotProps = {
   connectedMotionGroup: ConnectedMotionGroup
-  getModel?: (modelFromController: string) => string
+  getModel?: (modelFromController: string) => Promise<string>
   flangeRef?: React.Ref<Group>
   transparentColor?: string
   postModelRender?: () => void
@@ -51,3 +51,5 @@ export function Robot({
     />
   )
 }
+
+export { defaultGetModel }

package/src/components/robots/RobotAnimator.test.tsx

@@ -1,4 +1,4 @@
-import type { DHParameter, MotionGroupState } from "@wandelbots/nova-api/v2"
+import type { DHParameter, MotionGroupState } from "@wandelbots/nova-js/v2"
 import { describe, expect, it, vi } from "vitest"
 import RobotAnimator from "./RobotAnimator"
 

package/src/components/robots/SupportedRobot.tsx

@@ -22,7 +22,7 @@ export type SupportedRobotProps = {
   modelFromController: string
   dhParameters: DHParameter[]
   flangeRef?: React.Ref<THREE.Group>
-  getModel?: (modelFromController: string) => string
+  getModel?: (modelFromController: string) => Promise<string> | undefined
   postModelRender?: () => void
   transparentColor?: string
 } & ThreeElements["group"]
@@ -67,7 +67,7 @@ export const SupportedRobot = externalizeComponent(
         fallback={dhrobot}
         onError={(err) => {
           // Missing model; show the fallback for now
-          console.error(err)
+          console.warn(err)
         }}
       >
         <Suspense fallback={dhrobot}>
@@ -77,7 +77,15 @@ export const SupportedRobot = externalizeComponent(
               dhParameters={dhParameters}
             >
               <GenericRobot
-                modelURL={getModel(modelFromController)}
+                modelURL={(() => {
+                  const result = getModel(modelFromController)
+                  if (!result) {
+                    const mockBlob = new Blob([], { type: 'model/gltf-binary' })
+                    const mockFile = new File([mockBlob], `${modelFromController}.glb`, { type: 'model/gltf-binary' })
+                    return Promise.resolve(URL.createObjectURL(mockFile))
+                  }
+                  return result
+                })()}
                 postModelRender={postModelRender}
                 flangeRef={flangeRef}
                 {...props}

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/env.d.ts

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

package/src/lib/JoggerConnection.ts

@@ -390,14 +390,14 @@ export class JoggerConnection {
     axis: "x" | "y" | "z"
     direction: "-" | "+"
     motion:
-      | {
-          type: "rotate"
-          distanceRads: number
-        }
-      | {
-          type: "translate"
-          distanceMm: number
-        }
+    | {
+      type: "rotate"
+      distanceRads: number
+    }
+    | {
+      type: "translate"
+      distanceMm: number
+    }
   }) {
     const commands: MotionCommand[] = []
 
@@ -559,8 +559,8 @@ export class JoggerConnection {
         } else {
           throw new Error(
             result?.add_trajectory_error?.message ||
-              result?.message ||
-              "Failed to execute trajectory, unknown error",
+            result?.message ||
+            "Failed to execute trajectory, unknown error",
           )
         }
       }

package/src/lib/MotionStreamConnection.ts

@@ -31,7 +31,7 @@ export class MotionStreamConnection {
     const controller =
       await nova.api.controller.getCurrentRobotControllerState(controllerId)
     const motionGroup = controller?.motion_groups.find(
-      (mg) => mg.motion_group === motionGroupId,
+      (mg: MotionGroupState) => mg.motion_group === motionGroupId,
     )
     if (!controller || !motionGroup) {
       throw new Error(

package/dist/LoadingCover-r2yhJZF9.cjs

@@ -1,2 +0,0 @@
-"use strict";const t=require("./index-DxwppshT.cjs"),n=require("@mui/material"),x=require("lodash-es"),a=require("react");function l(e){try{return JSON.stringify(e)}catch{return}}function m(e,s){throw new Error(s+` ${JSON.stringify(e)}`)}function g(e){var s,r,o,i;return e instanceof t.AxiosError&&e.code==="ERR_NETWORK"?"Failed to connect to the server. Please check your internet connection.":e instanceof t.AxiosError&&e.response?`${(s=e.response)==null?void 0:s.status} ${(r=e.response)==null?void 0:r.statusText} from ${(o=e.response)==null?void 0:o.config.url}: ${JSON.stringify((i=e.response)==null?void 0:i.data)}`:e instanceof Error?e.message:`Unexpected error: ${l(e)||e}`}const d=e=>{const s=e.softTimeout||3e3,[r,o]=a.useState(!1),i=n.useTheme();return a.useEffect(()=>{const u=setTimeout(()=>{o(!0)},s);return()=>clearTimeout(u)}),t.jsxRuntimeExports.jsx(n.Stack,{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",sx:{color:i.palette.text.primary},children:e.error?t.jsxRuntimeExports.jsx(c,{loadingMessage:e.message,error:e.error}):t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsx(n.CircularProgress,{sx:{marginBottom:"24px"}}),!!e.message&&t.jsxRuntimeExports.jsx("div",{children:e.message}),t.jsxRuntimeExports.jsx(n.Stack,{sx:{visibility:r?"visible":"hidden",marginTop:"1rem",color:i.palette.text.secondary},children:"This is taking longer than expected..."})]})})},c=e=>{const s=g(e.error),r=e.error instanceof Error?e.error.stack:null,o=n.useTheme();return t.jsxRuntimeExports.jsxs(n.Stack,{sx:{maxHeight:"100%",maxWidth:"min(100%, 800px)",padding:2,overflow:"auto",color:o.palette.error.main,"& pre":{whiteSpace:"pre-wrap",wordBreak:"break-word",paddingBottom:"3rem"}},children:[(e.loadingMessage?`Error while ${x.lowerFirst(n.capitalize(e.loadingMessage))} - `:"")+s,t.jsxRuntimeExports.jsx("br",{}),r&&t.jsxRuntimeExports.jsx("pre",{children:r})]})};exports.LoadingCover=d;exports.LoadingErrorMessage=c;exports.assertUnreachable=m;
-//# sourceMappingURL=LoadingCover-r2yhJZF9.cjs.map

package/dist/WandelscriptEditor-Dj7TBCkF.cjs

@@ -1,2 +0,0 @@
-"use strict";var w=Object.create;var p=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var v=(e,t,n,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of f(t))!b.call(e,i)&&i!==n&&p(e,i,{get:()=>t[i],enumerable:!(s=k(t,i))||s.enumerable});return e};var c=(e,t,n)=>(n=e!=null?w(x(e)):{},v(t||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e));const r=require("./index-DxwppshT.cjs"),u=require("react"),T=require("@mui/material"),y=require("./LoadingCover-r2yhJZF9.cjs"),C={$schema:"https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",name:"wandelscript",patterns:[{include:"#keywords"},{include:"#strings"},{include:"#comments"},{include:"#functions"}],repository:{keywords:{patterns:[{name:"keyword.control.flow.wandelscript",match:"\\b(move|via|to|interrupt|def|False|True|for|if|else|elif|while|return|switch|activate|deactivate|print|and|or|not)\\b"}]},strings:{name:"string.quoted.double.wandelscript",begin:'"',end:'"',patterns:[{name:"constant.character.escape.wandelscript",match:"\\\\."}]},comments:{patterns:[{begin:"#",beginCaptures:{0:{name:"punctuation.definition.comment.wandelscript"}},end:"$",name:"comment.line.number-sign.wandelscript"}]},functions:{patterns:[{match:"[a-zA-Z_-]+\\(",name:"entity.name.function.wandelscript"}]}},scopeName:"source.wandelscript"},E=u.lazy(()=>import("@monaco-editor/react"));let l=null;async function S(){if(!l){const[{createHighlighter:e},{shikiToMonaco:t}]=await Promise.all([import("shiki"),import("@shikijs/monaco")]);l={shiki:await e({langs:[C],themes:["dark-plus","light-plus"]}),shikiToMonaco:t}}return l}const j=r.externalizeComponent(e=>{const t=T.useTheme(),[n,s]=u.useState("dark-plus"),i=t.palette.mode==="dark"?"dark-plus":"light-plus";async function g(a){var m,d;a.languages.register({id:"wandelscript"}),a.languages.setLanguageConfiguration("wandelscript",{comments:{lineComment:"#"},brackets:[["(",")"],["[","]"]],autoClosingPairs:[{open:"[",close:"]"},{open:"(",close:")"}],surroundingPairs:[{open:"[",close:"]"},{open:"(",close:")"}]});const{shiki:o,shikiToMonaco:h}=await S();h(o,a),a.editor.defineTheme(i,((d=(m=t.componentsExt)==null?void 0:m.WandelscriptEditor)==null?void 0:d.monacoTheme)??{base:t.palette.mode==="dark"?"vs-dark":"vs",inherit:!0,rules:[],colors:{}}),e.monacoSetup&&e.monacoSetup(a),s(i)}return r.jsxRuntimeExports.jsx(u.Suspense,{fallback:r.jsxRuntimeExports.jsx(y.LoadingCover,{}),children:r.jsxRuntimeExports.jsx(E,{value:e.code,onMount:(a,o)=>{g(o)},onChange:e.onChange,defaultLanguage:"wandelscript",theme:n,options:{minimap:{enabled:!1},wordWrap:"on",automaticLayout:!0,...e.monacoOptions}})})});exports.WandelscriptEditor=j;
-//# sourceMappingURL=WandelscriptEditor-Dj7TBCkF.cjs.map