🎁 Enable 3D in Pipetest sidesheet (#975)

* Added 3d to pipetest app

apps/piping/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/piping/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/piping/vite.config.ts

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

libs/pipingapp/package.json

@@ -14,6 +14,7 @@
     "@cc-components/shared": "workspace:^",
     "@cc-components/sharedcomponents": "workspace:^",
     "@cc-components/pipingshared": "workspace:^",
-    "@cc-components/pipingsidesheet": "workspace:^"
+    "@cc-components/pipingsidesheet": "workspace:^",
+    "@cc-components/modelviewer": "workspace:^"
   }
 }

libs/pipingapp/src/lib/config/frameworkConfig.ts

@@ -5,6 +5,7 @@ import {
 import { enableContext } from '@equinor/fusion-framework-react-module-context';
 import buildQuery from 'odata-query';
 import { enableAgGrid } from '@equinor/fusion-framework-module-ag-grid';
+import { ModelViewerEnvConfig, enableModelViewer } from '@cc-components/modelviewer';
 
 export const configure = async (config: IAppConfigurator, c: ComponentRenderArgs) => {
   enableContext(config, async (builder) => {
@@ -21,7 +22,7 @@ export const configure = async (config: IAppConfigurator, c: ComponentRenderArgs
     });
   });
 
-  const envConfig: PipingEnvConfig = c.env.config?.environment as PipingEnvConfig;
+  const envConfig = c.env.config?.environment as PipingEnvConfig & ModelViewerEnvConfig;
 
   if (!envConfig) {
     throw new Error('Failed to load environemnt config for workorder');
@@ -32,6 +33,7 @@ export const configure = async (config: IAppConfigurator, c: ComponentRenderArgs
   });
 
   enableAgGrid(config);
+  enableModelViewer(config, envConfig);
 };
 
 type PipingEnvConfig = {

libs/pipingsidesheet/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@cc-components/pipingshared": "workspace:^",
     "@cc-components/shared": "workspace:^",
-    "@cc-components/sharedcomponents": "workspace:^"
+    "@cc-components/sharedcomponents": "workspace:^",
+    "@cc-components/modelviewer": "workspace:^"
   }
 }

libs/pipingsidesheet/src/lib/ui-sidesheet/PipingSidesheet.tsx

@@ -4,10 +4,13 @@ import { Tabs } from '@equinor/eds-core-react';
 import styled from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
 import { WorkorderTab } from '@cc-components/shared/sidesheet';
+import { ModelViewerTab } from '@cc-components/modelviewer';
+
 import {
   BaseStatus,
   LinkCell,
   StatusCircle,
+  hasProperty,
   pipetestStatusColormap,
 } from '@cc-components/shared';
 
@@ -31,6 +34,16 @@ import { useGetPipetest } from '../utils-sidesheet/usePipetest';
 import { useGetInsulationTags } from '../utils-sidesheet/useGetInsulationTags';
 import { useElectricalNetworks } from '../utils-sidesheet/useElectricalNetwork';
 import { ElecticalNetworkTab } from './ElectricalNetworkTab';
+import { useGetEchoConfig } from '../utils-sidesheet/useGetEchoConfig';
+
+const viewerOptions = {
+  statusResolver: (status: string) => {
+    return hasProperty(pipetestStatusColormap, status)
+      ? pipetestStatusColormap[status]
+      : '#0084C4';
+  },
+  defaultCroppingDistance: 3,
+};
 
 export const StyledTabListWrapper = styled.div`
   overflow: hidden;
@@ -82,6 +95,13 @@ const PipingSidesheetContent = (props: Required<PipingProps>) => {
     error: errorElectricalNetworks,
   } = useElectricalNetworks(item.facility, item.heatTraceCableNos);
 
+  const {
+    data: modelConfig,
+    tagsOverlay,
+    isFetching: isFetchingModelConfig,
+    error: modelConfigError,
+  } = useGetEchoConfig(item.id);
+
   const handleChange = (index: number) => {
     setActiveTab(index);
   };
@@ -139,6 +159,10 @@ const PipingSidesheetContent = (props: Required<PipingProps>) => {
               Checklists
               <TabTitle isLoading={isLoadingChecklists} data={checklists} />
             </Tabs.Tab>
+            <Tabs.Tab>
+              3D
+              <TabTitle isLoading={isFetchingModelConfig} data={tagsOverlay} />
+            </Tabs.Tab>
           </StyledTabsList>
         </StyledTabListWrapper>
         <CustomStyledPanels>
@@ -171,6 +195,15 @@ const PipingSidesheetContent = (props: Required<PipingProps>) => {
               checklists={checklists}
             />
           </Tabs.Panel>
+          <Tabs.Panel style={{ height: '100%' }}>
+            <ModelViewerTab
+              tagOverlay={tagsOverlay}
+              options={viewerOptions}
+              isFetching={isFetchingModelConfig}
+              error={modelConfigError as Error | null}
+              facilities={modelConfig?.facilities ?? []}
+            />
+          </Tabs.Panel>
         </CustomStyledPanels>
       </CustomStyledTabs>
     </StyledSideSheetContainer>

libs/pipingsidesheet/src/lib/utils-sidesheet/useGetEchoConfig.tsx

@@ -0,0 +1,56 @@
+import { useContextId } from '@cc-components/shared';
+import { useHttpClient } from '@cc-components/shared';
+import { TagOverlay } from '@cc-components/modelviewer';
+
+import { useQuery } from '@tanstack/react-query';
+import styled from 'styled-components';
+
+const StyledIcon = styled.h3`
+  overflow: hidden;
+`;
+
+export const useGetEchoConfig = (pipetestId: string) => {
+  const client = useHttpClient();
+  const contextId = useContextId();
+
+  const { data, isFetching, error } = useQuery<EchoConfig>({
+    queryKey: ['model-tags', pipetestId],
+    queryFn: async ({ signal }) => {
+      const response = await client.fetch(
+        `/api/contexts/${contextId}/pipetest/${pipetestId}/echo`,
+        { signal }
+      );
+
+      if (!response.ok) {
+        throw new Error('Failed to get model tags', { cause: response });
+      }
+
+      return response.json();
+    },
+  });
+
+  const tagsOverlay: TagOverlay[] | undefined = data?.tags?.map((tag) => ({
+    tagNo: tag.tagNo,
+    description: tag.description,
+    status: tag.status,
+    icon: <StyledIcon>{tag.status}</StyledIcon>,
+  }));
+
+  return {
+    data,
+    tagsOverlay: tagsOverlay ?? [],
+    isFetching,
+    error,
+  };
+};
+
+export type EchoConfig = {
+  facilities: string[];
+  tags: EchoTag[];
+};
+
+export type EchoTag = {
+  tagNo: string;
+  description: string;
+  status: string;
+};