Merge branch 'pramodcog/fix-layer-button-component' of https://github…

….com/cognitedata/reveal into pramodcog/fix-layer-button-component
cognitedata · Aug 2, 2023 · 39c6de7 · 39c6de7
2 parents 852edb8 + 00fe94b
commit 39c6de7
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 24 deletions.
diff --git a/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx b/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
@@ -43,7 +43,7 @@ export type Reveal3DResourcesProps<NodeType = any> = {
   resources: AddResourceOptions[];
   fdmAssetMappingConfig: FdmAssetMappingsConfig;
   styling?: Reveal3DResourcesStyling;
-  onNodeClick?: (node: NodeDataResult<NodeType>) => void;
+  onNodeClick?: (node: NodeDataResult<NodeType> | undefined) => void;
 };
 
 export const Reveal3DResources = <NodeType = any,>({
@@ -76,16 +76,16 @@ export const Reveal3DResources = <NodeType = any,>({
   useEffect(() => {
     const callback = (event: PointerEventData): void => {
       void (async (event: PointerEventData): Promise<void> => {
+        if (onNodeClick === undefined) return;
         const data = await queryMappedData<NodeType>(
           viewer,
           client,
           fdmSdk,
           fdmAssetMappingConfig,
           event
         );
-        if (onNodeClick !== undefined && data !== undefined) {
-          onNodeClick?.(data);
-        }
+
+        onNodeClick(data);
       })(event);
     };
 

diff --git a/react-components/src/components/Reveal3DResources/queryMappedData.ts b/react-components/src/components/Reveal3DResources/queryMappedData.ts
@@ -73,7 +73,7 @@ export async function queryMappedData<NodeType>(
     data: nodeData,
     view: dataView,
     cadNode: selectedNode,
-    model: cadIntersection.model
+    intersection: cadIntersection
   };
 }
 

diff --git a/react-components/src/components/Reveal3DResources/types.ts b/react-components/src/components/Reveal3DResources/types.ts
@@ -3,9 +3,9 @@
  */
 
 import {
-  type CogniteCadModel,
   type AddModelOptions,
-  type SupportedModelTypes
+  type SupportedModelTypes,
+  type CadIntersection
 } from '@cognite/reveal';
 import { type Matrix4 } from 'three';
 import { type FdmNode, type Source } from '../../utilities/FdmSDK';
@@ -26,5 +26,5 @@ export type NodeDataResult<NodeType> = {
   data: FdmNode<NodeType>;
   view: Source;
   cadNode: Node3D;
-  model: CogniteCadModel;
+  intersection: CadIntersection;
 };
diff --git a/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx b/react-components/src/components/ViewerAnchor/ViewerAnchor.tsx
@@ -15,14 +15,9 @@ export type ViewerAnchorElementMapping = {
 export type ViewerAnchorProps = {
   position: Vector3;
   children: ReactElement;
-  uniqueKey: string;
 };
 
-export const ViewerAnchor = ({
-  position,
-  children,
-  uniqueKey
-}: ViewerAnchorProps): ReactElement => {
+export const ViewerAnchor = ({ position, children }: ViewerAnchorProps): ReactElement => {
   const viewer = useReveal();
   const [divTranslation, setDivTranslation] = useState(new Vector2());
   const [visible, setVisible] = useState(false);
@@ -50,7 +45,6 @@ export const ViewerAnchor = ({
 
   return visible ? (
     <div
-      key={uniqueKey}
       ref={htmlRef}
       style={{
         position: 'absolute',

diff --git a/react-components/stories/HighlightNode.stories.tsx b/react-components/stories/HighlightNode.stories.tsx
@@ -66,15 +66,17 @@ const StoryContent = ({
   resources: AddResourceOptions[];
   fdmAssetMappingConfig: FdmAssetMappingsConfig;
 }): ReactElement => {
-  const [nodeData, setNodeData] = useState<any>();
+  const [nodeData, setNodeData] = useState<any>(undefined);
 
-  const [highlightedId, setHighlightedId] = useState<string>('');
+  const [highlightedId, setHighlightedId] = useState<string | undefined>(undefined);
 
-  const callback = (nodeData: NodeDataResult<any>): void => {
-    setNodeData(nodeData.data);
+  const callback = (nodeData: NodeDataResult<any> | undefined): void => {
+    setNodeData(nodeData?.data);
+    setHighlightedId(nodeData?.data?.externalId);
 
-    setHighlightedId(nodeData.data.externalId);
-    nodeData.model.assignStyledNodeCollection(
+    if (nodeData === undefined) return;
+
+    nodeData.intersection.model.assignStyledNodeCollection(
       new TreeIndexNodeCollection([nodeData.cadNode.treeIndex]),
       DefaultNodeAppearance.Highlighted
     );
@@ -86,7 +88,7 @@ const StoryContent = ({
         resources={resources}
         styling={{
           groups:
-            highlightedId.length === 0
+            highlightedId === undefined
               ? undefined
               : [
                   {

diff --git a/react-components/stories/ViewerAnchor.stories.tsx b/react-components/stories/ViewerAnchor.stories.tsx
@@ -49,7 +49,7 @@ export const Main: Story = {
           styling={styling}
           fdmAssetMappingConfig={fdmAssetMappingConfig}
         />
-        <ViewerAnchor position={position} uniqueKey="key2">
+        <ViewerAnchor position={position}>
           <p
             style={{
               backgroundColor: 'turquoise',
@@ -62,7 +62,7 @@ export const Main: Story = {
             This label is stuck at position {position.toArray().join(',')}
           </p>
         </ViewerAnchor>
-        <ViewerAnchor position={position2} uniqueKey="key1">
+        <ViewerAnchor position={position2}>
           <p
             style={{
               backgroundColor: 'red',