Merge branch 'master' into hflatval/fdm-to-cdf-node-cache

cognitedata · Aug 25, 2023 · b651736 · b651736
2 parents 189d3b8 + 9e292b9
commit b651736
Show file tree

Hide file tree

Showing 17 changed files with 936 additions and 968 deletions.
diff --git a/...-components/.yarn/releases/yarn-3.6.1.cjs → ...-components/.yarn/releases/yarn-3.6.2.cjs b/...-components/.yarn/releases/yarn-3.6.1.cjs → ...-components/.yarn/releases/yarn-3.6.2.cjs
diff --git a/react-components/.yarnrc.yml b/react-components/.yarnrc.yml
@@ -1,3 +1,3 @@
-yarnPath: .yarn/releases/yarn-3.6.1.cjs
+yarnPath: .yarn/releases/yarn-3.6.2.cjs
 
 nodeLinker: node-modules
diff --git a/react-components/package.json b/react-components/package.json
@@ -30,12 +30,12 @@
     "@cognite/cogs.js": "^9.17.0",
     "@cognite/reveal": "4.4.0",
     "@cognite/sdk": "^8.2.0",
-    "@storybook/addon-essentials": "7.3.1",
-    "@storybook/addon-interactions": "7.3.1",
-    "@storybook/addon-links": "7.3.1",
-    "@storybook/blocks": "7.3.1",
-    "@storybook/react": "7.3.1",
-    "@storybook/react-webpack5": "7.3.1",
+    "@storybook/addon-essentials": "7.3.2",
+    "@storybook/addon-interactions": "7.3.2",
+    "@storybook/addon-links": "7.3.2",
+    "@storybook/blocks": "7.3.2",
+    "@storybook/react": "7.3.2",
+    "@storybook/react-webpack5": "7.3.2",
     "@storybook/testing-library": "0.2.0",
     "@tanstack/react-query-devtools": "^4.29.19",
     "@types/lodash": "^4.14.190",
@@ -58,7 +58,7 @@
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.3.1",
+    "storybook": "7.3.2",
     "style-loader": "^3.3.3",
     "styled-components": "5.3.11",
     "three": "0.155.0",
@@ -68,7 +68,7 @@
     "webpack-cli": "5.1.4",
     "webpack-node-externals": "3.0.0"
   },
-  "packageManager": "yarn@3.6.1",
+  "packageManager": "yarn@3.6.2",
   "files": [
     "dist"
   ],

diff --git a/react-components/src/components/CadModelContainer/useApplyCadModelStyling.tsx b/react-components/src/components/CadModelContainer/useApplyCadModelStyling.tsx
@@ -131,9 +131,11 @@ function isEqualTreeIndex(
   collectionA: TreeIndexNodeCollection,
   collectionB: TreeIndexNodeCollection
 ): boolean {
-  const isEqualContent =
-    collectionA.getIndexSet().clone().differenceWith(collectionB.getIndexSet()).count === 0;
-  return isEqualContent;
+  const setA = collectionA.getIndexSet();
+  const setB = collectionB.getIndexSet();
+
+  const setBContainsSetA = setA.clone().differenceWith(setB).count === 0;
+  return setBContainsSetA && setA.count === setB.count;
 }
 
 function isEqualStyle(styleA: NodeAppearance, styleB: NodeAppearance): boolean {

diff --git a/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx b/react-components/src/components/Reveal3DResources/Reveal3DResources.tsx
@@ -20,13 +20,11 @@ import {
   type DefaultResourceStyling
 } from './types';
 import { useCalculateModelsStyling } from '../../hooks/useCalculateModelsStyling';
-import { useClickedNodeData } from '../..';
 
 export const Reveal3DResources = ({
   resources,
   defaultResourceStyling,
   instanceStyling,
-  onNodeClick,
   onResourcesAdded
 }: Reveal3DResourcesProps): ReactElement => {
   const [reveal3DModels, setReveal3DModels] = useState<TypedReveal3DModel[]>([]);
@@ -47,13 +45,6 @@ export const Reveal3DResources = ({
   }, [resources, viewer]);
 
   const reveal3DModelsStyling = useCalculateModelsStyling(reveal3DModels, instanceStyling ?? []);
-  const clickedNodeData = useClickedNodeData();
-
-  useEffect(() => {
-    if (clickedNodeData !== undefined) {
-      onNodeClick?.(Promise.resolve(clickedNodeData));
-    }
-  }, [clickedNodeData, onNodeClick]);
 
   const image360CollectionAddOptions = resources.filter(
     (resource): resource is AddImageCollection360Options =>

diff --git a/react-components/src/components/Reveal3DResources/types.ts b/react-components/src/components/Reveal3DResources/types.ts
@@ -45,6 +45,5 @@ export type Reveal3DResourcesProps = {
   resources: AddResourceOptions[];
   defaultResourceStyling?: DefaultResourceStyling;
   instanceStyling?: FdmAssetStylingGroup[];
-  onNodeClick?: (node: Promise<NodeDataResult | undefined>) => void;
   onResourcesAdded?: () => void;
 };
diff --git a/react-components/src/components/RevealToolbar/MeasurementButton.tsx b/react-components/src/components/RevealToolbar/MeasurementButton.tsx
@@ -39,25 +39,21 @@ export const MeasurementButton = (): ReactElement => {
     measurementTool.exitMeasurementMode();
   };
 
-  const handleMeasurement = (enable: boolean): void => {
+  const handleMeasurement = (_enable: boolean): void => {
     if (viewer.models.length <= 0) {
       return;
     }
     setMeasurementEnabled((prevState) => !prevState);
-    if (enable) {
-      enterMeasurement();
-    } else {
-      exitMeasurement();
-    }
   };
 
   useEffect(() => {
-    return () => {
-      if (measurementEnabled) {
+    if (measurementEnabled) {
+      enterMeasurement();
+      return () => {
         exitMeasurement();
-      }
-    };
-  }, []);
+      };
+    }
+  }, [measurementEnabled]);
 
   return (
     <Button

diff --git a/react-components/src/hooks/useClickedNode.tsx b/react-components/src/hooks/useClickedNode.tsx
@@ -7,25 +7,26 @@ import { useReveal, type NodeDataResult } from '../';
 import { useEffect, useState } from 'react';
 import { useFdm3dNodeData } from '../components/NodeCacheProvider/NodeCacheProvider';
 
-export type ClickedNodeData = NodeDataResult & {
+export type ClickedNodeData = Partial<NodeDataResult> & {
   intersection: CadIntersection;
 };
 
 export const useClickedNodeData = (): ClickedNodeData | undefined => {
   const viewer = useReveal();
 
   const [cadIntersection, setCadIntersection] = useState<CadIntersection | undefined>(undefined);
+  const [clickedNodeData, setClickedNodeData] = useState<ClickedNodeData | undefined>(undefined);
 
   useEffect(() => {
     const callback = (event: PointerEventData): void => {
       void (async () => {
         const intersection = await viewer.getIntersectionFromPixel(event.offsetX, event.offsetY);
 
-        if (intersection === null || intersection.type !== 'cad') {
-          return;
+        if (intersection?.type === 'cad') {
+          setCadIntersection(intersection);
+        } else {
+          setCadIntersection(undefined);
         }
-
-        setCadIntersection(intersection);
       })();
     };
 
@@ -36,23 +37,44 @@ export const useClickedNodeData = (): ClickedNodeData | undefined => {
     };
   }, [viewer]);
 
-  const nodeData =
-    useFdm3dNodeData(
-      cadIntersection?.model.modelId,
-      cadIntersection?.model.revisionId,
-      cadIntersection?.treeIndex
-    ).data ?? [];
-
-  if (cadIntersection === undefined || nodeData.length === 0) {
-    return undefined;
-  }
-
-  const chosenNode = nodeData[0];
-
-  return {
-    intersection: cadIntersection,
-    fdmNode: chosenNode.fdmId,
-    view: chosenNode.view,
-    cadNode: chosenNode.cadNode
-  };
+  const nodeData = useFdm3dNodeData(
+    cadIntersection?.model.modelId,
+    cadIntersection?.model.revisionId,
+    cadIntersection?.treeIndex
+  ).data;
+
+  useEffect(() => {
+    if (isWaitingForQueryResult()) {
+      return;
+    }
+
+    const nodeDataList = nodeData ?? [];
+
+    if (cadIntersection === undefined) {
+      setClickedNodeData(undefined);
+      return;
+    }
+
+    if (nodeDataList.length === 0) {
+      setClickedNodeData({
+        intersection: cadIntersection
+      });
+      return;
+    }
+
+    const chosenNode = nodeDataList[0];
+
+    setClickedNodeData({
+      intersection: cadIntersection,
+      fdmNode: chosenNode.fdmId,
+      view: chosenNode.view,
+      cadNode: chosenNode.cadNode
+    });
+
+    function isWaitingForQueryResult(): boolean {
+      return nodeData === undefined && cadIntersection !== undefined;
+    }
+  }, [nodeData]);
+
+  return clickedNodeData;
 };
diff --git a/react-components/stories/HighlightNode.stories.tsx b/react-components/stories/HighlightNode.stories.tsx
@@ -63,7 +63,10 @@ const StoryContent = ({ resources }: { resources: AddResourceOptions[] }): React
   const nodeData = useClickedNodeData();
 
   useEffect(() => {
-    if (nodeData === undefined) return;
+    if (nodeData?.fdmNode === undefined) {
+      setStylingGroups([]);
+      return;
+    }
 
     setStylingGroups([
       {