✨ 3D widget and tab for 3D in Workorder app (#774)

- Refactored and simplified ModelViewer component 
- Removed effects and state from most components
- Added lazy loading to support chunking
- Added support for environment variables
- Removed widgets
- Fixed styling
- Optimized viewer performance

.github/workflows/fprd-deploy.yml

@@ -40,4 +40,4 @@ jobs:
         env:
           #Runs out of memory when bundling more apps otherwise even though concurrency is 1
           NODE_OPTIONS: '--max_old_space_size=4096'
-        run: npx turbo run fprd:deploy --since ${{github.event.before}} --concurrency 1 -- --token ${{ steps.get-fusion-token.outputs.token }} --ai '${{secrets.ai}}' --sha '${{github.sha}}'
+        run: npx turbo run fprd:deploy --since ${{github.event.before}} --concurrency 1 -- --token ${{ steps.get-fusion-token.outputs.token }} --ai '${{secrets.ai}}' --modelViewerConfig '${{vars.modelViewerConfig}}' --sha '${{github.sha}}'

.github/workflows/manual-deploy-prod.yml

@@ -54,4 +54,4 @@ jobs:
         env:
           #Runs out of memory when bundling more apps otherwise even though concurrency is 1
           NODE_OPTIONS: '--max_old_space_size=4096'
-        run: npx turbo run fprd:deploy --filter=${{inputs.appKey}} --concurrency 1 -- --token ${{ steps.get-fusion-token.outputs.token }} --ai '${{secrets.ai}}' --sha '${{github.sha}}'
+        run: npx turbo run fprd:deploy --filter=${{inputs.appKey}} --concurrency 1 -- --token ${{ steps.get-fusion-token.outputs.token }} --ai '${{secrets.ai}}' --modelViewerConfig '${{vars.modelViewerConfig}}' --sha '${{github.sha}}'

.github/workflows/manual-deploy.yml

@@ -54,4 +54,4 @@ jobs:
         env:
           #Runs out of memory when bundling more apps otherwise even though concurrency is 1
           NODE_OPTIONS: '--max_old_space_size=4096'
-        run: npx turbo run pr:deploy --filter='${{inputs.category}}' --concurrency 1 -- --token ${{ steps.get-fusion-token.outputs.token }} --ai '${{secrets.ai}}' --sha '${{github.sha}}'
+        run: npx turbo run pr:deploy --filter='${{inputs.category}}' --concurrency 1 -- --token ${{ steps.get-fusion-token.outputs.token }} --ai '${{secrets.ai}}' --modelViewerConfig '${{vars.modelViewerConfig}}' --sha '${{github.sha}}'

.github/workflows/pr-deploy.yml

@@ -47,7 +47,7 @@ jobs:
         env:
           #Runs out of memory when bundling more apps otherwise even though concurrency is 1
           NODE_OPTIONS: '--max_old_space_size=4096'
-        run: npx turbo run pr:deploy --since origin/main  --concurrency 1 -- --token ${{ steps.get-fusion-token.outputs.token }} --pr '${{ github.event.issue.number }}' --ai '${{secrets.ai}}' --sha '${{steps.comment-branch.outputs.head_sha}}'
+        run: npx turbo run pr:deploy --since origin/main  --concurrency 1 -- --token ${{ steps.get-fusion-token.outputs.token }} --pr '${{ github.event.issue.number }}' --ai '${{secrets.ai}}' --modelViewerConfig '${{vars.modelViewerConfig}}' --sha '${{steps.comment-branch.outputs.head_sha}}'
 
       - name: Comment pr
         uses: actions/github-script@v7

apps/workorder/app.config.js

@@ -10,6 +10,14 @@ export default () => ({
   environment: {
     uri: 'https://backend-fusion-data-gateway-test.radix.equinor.com',
     defaultScopes: ['api://ed6de162-dd30-4757-95eb-0ffc8d34fbe0/access_as_user'],
+    modelViewerConfig: {
+      hierarchyClientBaseUrl: 'https://app-echo-hierarchy-dev.azurewebsites.net',
+      hierarchyClientScope: 'ebc04930-bf9c-43e5-98bc-bc90865600b8/user_impersonation',
+      modelClientBaseUrl: 'https://app-echomodeldist-dev.azurewebsites.net',
+      modelClientScope: 'd484c551-acf8-45bc-b1e8-3f4373bd0d42/user_impersonation',
+      echoClientBaseUrl: 'https://dt-echopedia-api-dev.azurewebsites.net',
+      echoClientScope: 'aef35d97-53d4-4fd0-adaf-c5a514b38436/user_impersonation',
+    },
   },
   endpoints: {},
 });

apps/workorder/app.config.local.js

@@ -10,6 +10,14 @@ export default () => ({
   environment: {
     uri: 'https://localhost:7074',
     defaultScopes: ['api://ed6de162-dd30-4757-95eb-0ffc8d34fbe0/access_as_user'],
+    modelViewerConfig: {
+      hierarchyClientBaseUrl: 'https://app-echo-hierarchy-dev.azurewebsites.net',
+      hierarchyClientScope: 'ebc04930-bf9c-43e5-98bc-bc90865600b8/user_impersonation',
+      modelClientBaseUrl: 'https://app-echomodeldist-dev.azurewebsites.net',
+      modelClientScope: 'd484c551-acf8-45bc-b1e8-3f4373bd0d42/user_impersonation',
+      echoClientBaseUrl: 'https://dt-echopedia-api-dev.azurewebsites.net',
+      echoClientScope: 'aef35d97-53d4-4fd0-adaf-c5a514b38436/user_impersonation',
+    },
   },
   endpoints: {},
 });

apps/workorder/vite.config.ts

@@ -1,15 +1,16 @@
 import { defineConfig } from 'vite';
-import EnvironmentPlugin from 'vite-plugin-environment';
+import { InjectProcessPlugin } from '../../patches/3d-patch.ts';
 
 export default defineConfig({
-  plugins: [
-    EnvironmentPlugin({
-      NODE_ENV: 'production',
-    }),
-  ],
   appType: 'custom',
   build: {
     emptyOutDir: true,
+    rollupOptions: {
+      plugins: [InjectProcessPlugin],
+      output: {
+        inlineDynamicImports: true,
+      },
+    },
     lib: {
       entry: './src/main.tsx',
       fileName: 'app-bundle',

github-action/src/releaseMain.ts

@@ -19,14 +19,20 @@ program.name('Release');
 type ReleaseArgs = {
   token: string;
   ai: string;
+  modelViewerConfig: string;
   pr: string;
   sha: string;
 };
+
 program
   .command('release')
   .option('-T, --token <token>', 'azure token')
   .option('-pr, --pr <pr>', 'Pr number')
   .option('-ai, --ai <ai>', 'ai key')
+  .option(
+    '-modelViewerConfig, --modelViewerConfig <modelViewerConfig>',
+    'modelviewer config'
+  )
   .option('-sha, --sha <sha>', 'commit sha')
   .action(async (args) => {
     if (!args.token) {
@@ -61,7 +67,11 @@ export async function release(config: ReleaseArgs) {
 
   await uploadBundle(prodUrl, config.token, pkg.name, zipped);
   await patchAppConfig(
-    { ai: config.ai, commit: config.sha },
+    {
+      ai: config.ai,
+      commit: config.sha,
+      modelViewerConfig: JSON.parse(config.modelViewerConfig),
+    },
     config.token,
     pkg.name,
     prodUrl

github-action/src/releasePr.ts

@@ -18,6 +18,7 @@ program.name('Release');
 type ReleaseArgs = {
   token: string;
   ai: string;
+  modelViewerConfig: string;
   pr: string;
   sha: string;
 };
@@ -27,6 +28,10 @@ program
   .option('-T, --token <token>', 'azure token')
   .option('-pr, --pr <pr>', 'Pr number')
   .option('-ai, --ai <ai>', 'ai key')
+  .option(
+    '-modelViewerConfig, --modelViewerConfig <modelViewerConfig>',
+    'modelviewer config'
+  )
   .option('-sha, --sha <sha>', 'commit sha')
   .action(async (args) => {
     if (!args.token) {
@@ -53,7 +58,12 @@ export async function release(context: ReleaseArgs) {
   }
   await uploadBundle(ciUrl, context.token, r.name, zipped);
   await patchAppConfig(
-    { ai: context.ai, commit: context.sha, pr: context.pr },
+    {
+      ai: context.ai,
+      commit: context.sha,
+      pr: context.pr,
+      modelViewerConfig: JSON.parse(context.modelViewerConfig),
+    },
     context.token,
     r.name,
     ciUrl

github-action/src/utils/patchAppConfig.ts

@@ -21,6 +21,14 @@ export async function getAppConfig(token: string, appKey: string, url: string) {
 type AppConfig = {
   commit: string;
   ai: string;
+  modelViewerConfig: {
+    hierarchyClientBaseUrl: string;
+    hierarchyClientScope: string;
+    modelClientBaseUrl: string;
+    modelClientScope: string;
+    echoClientBaseUrl: string;
+    echoClientScope: string;
+  };
 };
 
 export async function patchAppConfig<T extends Record<PropertyKey, unknown> = {}>(

libs/modelviewer/Readme.md

@@ -39,3 +39,23 @@ sequenceDiagram
 
 
 ```
+
+Get details about a clicked 3D element
+```ts
+
+  useEffect(() => {
+    const callback = async (e: Event) => {
+      const index = (e as Test).detail.treeIndex;
+
+      const data = selectionControls.getNodeFromTreeId(index);
+      console.log({ data });
+    };
+
+    window.addEventListener('selectionStarted', callback);
+
+    return () => {
+      window.removeEventListener('selectionStarted', callback);
+    };
+  }, [selectionControls]);
+```
+

libs/modelviewer/package.json

@@ -12,9 +12,10 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@equinor/echo-3d-viewer": "^0.0.1",
+    "@equinor/echo-3d-viewer": "^0.0.3",
     "@cognite/reveal": "4.2.2",
     "@cognite/sdk": "8.2.0",
+    "throttle-typescript": "^1.1.0",
     "three": "0.154.0",
     "rxjs": "^7.5.7"
   },