🎁 [punch]: Enable 3D in sidesheet (#951)

Added tooltip to info button on tag overlays in ModelViewer. Fixed bug with not clearing selectedTags state variable.
equinor · Apr 15, 2024 · 6d6f03e · 6d6f03e
1 parent 68fe781
commit 6d6f03e
Show file tree

Hide file tree

Showing 16 changed files with 190 additions and 44 deletions.
diff --git a/apps/punch/app.config.js b/apps/punch/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: {},
 });
diff --git a/apps/punch/app.config.local.js b/apps/punch/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: {},
 });
diff --git a/apps/punch/tsconfig.app.json b/apps/punch/tsconfig.app.json
@@ -5,7 +5,6 @@
     "types": ["node"],
     "rootDir": "."
   },
-
   "exclude": [
     "jest.config.ts",
     "**/*.spec.ts",
@@ -16,7 +15,9 @@
     "**/*.test.js",
     "**/*.spec.jsx",
     "**/*.test.jsx",
-    "dist"
+    "dist",
+    "build.js",
+    "vite.config.ts"
   ],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }
diff --git a/apps/punch/vite.config.ts b/apps/punch/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',

diff --git a/libs/modelviewer/src/components/tag-info/TagInfo.tsx b/libs/modelviewer/src/components/tag-info/TagInfo.tsx
@@ -0,0 +1,73 @@
+import { Typography, Icon, Button, Popover } from '@equinor/eds-core-react';
+import { TagOverlay } from '../../types/overlayTags';
+import * as Icons from '@equinor/eds-icons';
+import { useRef, useState } from 'react';
+import styled from 'styled-components';
+
+interface TagInfoProps {
+  tag: TagOverlay;
+}
+
+export const defaultTagColor = '#a0dd28';
+
+Icon.add(Icons);
+
+export const TagInfo = (props: TagInfoProps) => {
+  const { tag } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const ref = useRef<HTMLButtonElement>(null);
+
+  const onClose = () => {
+    setIsOpen(false);
+  };
+
+  const onOpen = () => {
+    setIsOpen(true);
+  };
+
+  return (
+    <>
+      <StyledTagInfoIcon>
+        <Button
+          ref={ref}
+          variant="ghost_icon"
+          onClick={() => {
+            if (tag.action) tag.action(tag);
+            else onOpen();
+          }}
+        >
+          <Icon name="info_circle" title="tag information" />
+        </Button>
+      </StyledTagInfoIcon>
+
+      <Popover
+        open={isOpen}
+        id="tag-popover"
+        anchorEl={ref.current}
+        placement="bottom-end"
+        onClose={onClose}
+      >
+        <Popover.Header>
+          <Popover.Title>Details</Popover.Title>
+          <Button
+            style={{ height: '32px', width: '32px' }}
+            variant="ghost_icon"
+            aria-label="Close"
+            onClick={onClose}
+          >
+            <Icon name="close" size={24} />
+          </Button>
+        </Popover.Header>
+        <Popover.Content>
+          <Typography variant="body_short">{tag.description}</Typography>
+        </Popover.Content>
+      </Popover>
+    </>
+  );
+};
+
+const StyledTagInfoIcon = styled.div`
+  margin: 3px;
+`;
diff --git a/libs/modelviewer/src/components/tag-item/TagItem.tsx b/libs/modelviewer/src/components/tag-item/TagItem.tsx
@@ -5,6 +5,7 @@ import { TagOverlay } from '../../types/overlayTags';
 import TagIcon from '../tag-icon/TagIcon';
 import TagIconShadowWrapper from '../tag-icon-shadow/TagIconShadow';
 import * as Icons from '@equinor/eds-icons';
+import { TagInfo } from '../tag-info/TagInfo';
 
 interface TagProps {
   iconResolver?: (type: string) => string;
@@ -66,10 +67,6 @@ const StyledDescriptionTypography = styled(Typography)`
   text-overflow: ellipsis;
 `;
 
-const StyledTagInfoIcon = styled.div`
-  margin: 3px;
-`;
-
 export const defaultTagColor = '#a0dd28';
 
 Icon.add(Icons);
@@ -126,18 +123,7 @@ export const TagItem = ({
             </StyledDescriptionTypography>
           </TagText>
 
-          <StyledTagInfoIcon>
-            <Button
-              variant="ghost_icon"
-              onClick={(e) => {
-                tag.action && tag.action(tag);
-                e.stopPropagation();
-                e.preventDefault();
-              }}
-            >
-              <Icon name="info_circle" title="tag information"></Icon>
-            </Button>
-          </StyledTagInfoIcon>
+          <TagInfo tag={tag} />
         </TagInfoWrapper>
       </ContextWrapper>
     );

diff --git a/libs/modelviewer/src/hooks/useModelTags.ts b/libs/modelviewer/src/hooks/useModelTags.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { defaultTagColor } from '../components/tag-item/TagItem';
 import { TagOverlay } from '../types/overlayTags';
@@ -20,7 +20,13 @@ export const useModelTags = (tagsOverlay: TagOverlay[]) => {
     return { ...tagOverlay, color };
   });
 
-  const [visibleTags, setVisibleTags] = useState<string[]>(tagList.map((x) => x.tagNo));
+  const [visibleTags, setVisibleTags] = useState<string[]>([]);
+
+  // When the tags overlay changes, reset state.
+  useEffect(() => {
+    const defaultVisibleTags = tagList.map((x) => x.tagNo);
+    setVisibleTags(defaultVisibleTags);
+  }, [tagsOverlay]);
 
   return {
     tagList,

diff --git a/libs/modelviewer/src/hooks/useOverlay.ts b/libs/modelviewer/src/hooks/useOverlay.ts
@@ -44,10 +44,9 @@ export function useOverlay() {
     }
   }, [echoInstance]);
 
-  const overlayTags = useMemo(
-    () => (tagsOverlay ? createOverlayTags(viewNodes, createTagMap(tagsOverlay)) : []),
-    [viewNodes, tagsOverlay]
-  );
+  const overlayTags = tagsOverlay
+    ? createOverlayTags(viewNodes, createTagMap(tagsOverlay))
+    : [];
 
   return { overlayTags, overlayTool };
 }
diff --git a/libs/modelviewer/src/providers/tagSelectionProvider.tsx b/libs/modelviewer/src/providers/tagSelectionProvider.tsx
@@ -37,7 +37,7 @@ export const TagSelectionProvider = (props: Props) => {
   const config = useConfig();
   const selectionControls = useModelSelectionControls();
 
-  const { visibleTags, tagList, setVisibleTags } = useModelTags(tagsOverlay);
+  const { tagList, visibleTags, setVisibleTags } = useModelTags(tagsOverlay);
 
   const {
     viewNodes,
@@ -59,19 +59,16 @@ export const TagSelectionProvider = (props: Props) => {
     selectionControls?.cameraFirstPerson();
   };
 
-  const fitCameraToAAbb = useCallback(
-    (aabb: AabbModel, duration?: number) => {
-      if (selectionControls) {
-        const box3 = selectionControls.getBoundingBoxFormAabbModel(aabb);
-        selectionControls.fitCameraToBox3(
-          box3,
-          duration || config.defaultCameraMoveDuration,
-          config.defaultRadiusFactor
-        );
-      }
-    },
-    [selectionControls]
-  );
+  const fitCameraToAAbb = (aabb: AabbModel, duration?: number) => {
+    if (selectionControls) {
+      const box3 = selectionControls.getBoundingBoxFormAabbModel(aabb);
+      selectionControls.fitCameraToBox3(
+        box3,
+        duration || config.defaultCameraMoveDuration,
+        config.defaultRadiusFactor
+      );
+    }
+  };
 
   const toggleTags = (tags: string[]) => {
     const elements: string[] = tags.reduce((acc, tag) => {

diff --git a/libs/punchapp/package.json b/libs/punchapp/package.json
@@ -12,6 +12,7 @@
     "@cc-components/punchshared": "workspace:^",
     "@cc-components/punchsidesheet": "workspace:^",
     "@cc-components/shared": "workspace:^",
-    "@cc-components/sharedcomponents": "workspace:^"
+    "@cc-components/sharedcomponents": "workspace:^",
+    "@cc-components/modelviewer": "workspace:^"
   }
 }
diff --git a/libs/punchapp/src/lib/config/frameworkConfig.ts b/libs/punchapp/src/lib/config/frameworkConfig.ts
@@ -3,6 +3,8 @@ import {
   ComponentRenderArgs,
   IAppConfigurator,
 } from '@equinor/fusion-framework-react-app';
+import { enableModelViewer, ModelViewerEnvConfig } from '@cc-components/modelviewer';
+
 import { enableContext } from '@equinor/fusion-framework-react-module-context';
 import buildQuery from 'odata-query';
 
@@ -21,7 +23,7 @@ export const configure = async (config: IAppConfigurator, c: ComponentRenderArgs
     });
   });
 
-  const envConfig: PunchEnvConfig = c.env.config?.environment as PunchEnvConfig;
+  const envConfig = c.env.config?.environment as PunchEnvConfig & ModelViewerEnvConfig;
 
   if (!envConfig) {
     throw new Error('Failed to load environemnt config for workorder');
@@ -32,6 +34,7 @@ export const configure = async (config: IAppConfigurator, c: ComponentRenderArgs
   });
 
   enableAgGrid(config);
+  enableModelViewer(config, envConfig);
 };
 
 type PunchEnvConfig = {

diff --git a/libs/punchsidesheet/package.json b/libs/punchsidesheet/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@cc-components/punchshared": "workspace:^",
     "@cc-components/shared": "workspace:^",
-    "@cc-components/sharedcomponents": "workspace:^"
+    "@cc-components/sharedcomponents": "workspace:^",
+    "@cc-components/modelviewer": "workspace:^"
   }
 }
diff --git a/libs/punchsidesheet/src/lib/ui-sidesheet/PunchSidesheet.tsx b/libs/punchsidesheet/src/lib/ui-sidesheet/PunchSidesheet.tsx
@@ -1,5 +1,15 @@
-import { Punch } from '@cc-components/punchshared';
-import { LinkCell, useContextId, useHttpClient } from '@cc-components/shared';
+import { Punch, PunchStatus } from '@cc-components/punchshared';
+import {
+  BaseStatus,
+  LinkCell,
+  colorMap,
+  hasProperty,
+  useContextId,
+  useHttpClient,
+} from '@cc-components/shared';
+
+import { statusColorMap } from '@cc-components/shared/mapping';
+
 import {
   BannerItem,
   SidesheetHeader,
@@ -9,11 +19,24 @@ import {
   StyledSideSheetContainer,
   StyledTabs,
 } from '@cc-components/sharedcomponents';
+
+import { ModelViewerTab } from '@cc-components/modelviewer';
+
 import { Tabs } from '@equinor/eds-core-react';
 import { useQuery } from '@tanstack/react-query';
 import { useRef, useState } from 'react';
 import { DetailsTab } from './DetailsTab';
 import { StyledTabListWrapper, StyledTabsList } from './sidesheet.styles';
+import { useModelViewerTags } from '../utils-sidesheet/useModelViewerTags';
+
+const viewerOptions = {
+  statusResolver: (status: string) => {
+    return hasProperty(colorMap, status)
+      ? statusColorMap[status as BaseStatus]
+      : '#9e9e9e';
+  },
+  defaultCroppingDistance: 3,
+};
 
 export const PunchSidesheet = (props: {
   id: string;
@@ -48,6 +71,8 @@ export const PunchSidesheet = (props: {
     }
   );
 
+  const tagsOverlay = useModelViewerTags(punch);
+
   if (isLoadingSidesheet) {
     return <SidesheetSkeleton close={props.close} />;
   }
@@ -117,13 +142,23 @@ export const PunchSidesheet = (props: {
         <StyledTabListWrapper>
           <StyledTabsList ref={ref}>
             <Tabs.Tab>Details </Tabs.Tab>
+            <Tabs.Tab>3D </Tabs.Tab>
           </StyledTabsList>
         </StyledTabListWrapper>
 
         <StyledPanels>
           <Tabs.Panel>
             <DetailsTab punch={punch} />
           </Tabs.Panel>
+          <Tabs.Panel style={{ height: '100%' }}>
+            <ModelViewerTab
+              tagOverlay={tagsOverlay}
+              options={viewerOptions}
+              isFetching={false}
+              error={null}
+              facilities={[punch.facility ?? '']}
+            />
+          </Tabs.Panel>
         </StyledPanels>
       </StyledTabs>
     </StyledSideSheetContainer>

diff --git a/libs/punchsidesheet/src/lib/utils-sidesheet/useModelViewerTags.tsx b/libs/punchsidesheet/src/lib/utils-sidesheet/useModelViewerTags.tsx
@@ -0,0 +1,15 @@
+import { Punch } from '@cc-components/punchshared';
+import { TagOverlay } from '@cc-components/modelviewer';
+
+export const useModelViewerTags = (punch?: Punch): TagOverlay[] => {
+  if (!punch) return [];
+
+  return [
+    {
+      tagNo: punch.tagNo ?? 'No tag',
+      description: punch.description ?? 'No description',
+      status: punch.category,
+      icon: <h3>{punch.category}</h3>,
+    },
+  ];
+};
diff --git a/patches/3d-patch.ts b/patches/3d-patch.ts
@@ -9,5 +9,5 @@ var production = "production";
 
 export const InjectProcessPlugin = {
   name: 'rollup-plugin-metadata',
-  renderChunk: (code) => fix + code,
+  renderChunk: (code: any) => fix + code,
 };