feat(react-components): add resources-expected-in-viewer hook and bum…

…p to 0.65.0 (#4843) * feat(react-components): Make resource count take failed loads into account * chore: add export * chore: lint fix * chore: bump to 0.65.0
cognitedata · Nov 5, 2024 · d58dd99 · d58dd99
1 parent 1b288f2
commit d58dd99
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 4 deletions.
diff --git a/react-components/package.json b/react-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cognite/reveal-react-components",
-  "version": "0.64.2",
+  "version": "0.65.0",
   "exports": {
     ".": {
       "import": "./dist/index.js",

diff --git a/react-components/src/components/CadModelContainer/CadModelContainer.tsx b/react-components/src/components/CadModelContainer/CadModelContainer.tsx
@@ -7,6 +7,7 @@ import { useReveal } from '../RevealCanvas/ViewerContext';
 import { type Matrix4 } from 'three';
 import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext';
 import {
+  useReveal3DResourceLoadFailCount,
   useReveal3DResourcesCount,
   useThisAsExpectedResourceLoad
 } from '../Reveal3DResources/Reveal3DResourcesInfoContext';
@@ -35,6 +36,7 @@ export function CadModelContainer({
   const cachedViewerRef = useRevealKeepAlive();
   const viewer = useReveal();
   const { setRevealResourcesCount } = useReveal3DResourcesCount();
+  const { setReveal3DResourceLoadFailCount } = useReveal3DResourceLoadFailCount();
   const initializingModel = useRef<AddModelOptions | undefined>(undefined);
   const initializingModelsGeometryFilter = useRef<GeometryFilter | undefined>(undefined);
 
@@ -58,6 +60,10 @@ export function CadModelContainer({
       .catch((error) => {
         const errorReportFunction = onLoadError ?? defaultLoadErrorHandler;
         errorReportFunction(addModelOptions, error);
+        setReveal3DResourceLoadFailCount((p) => p + 1);
+        return () => {
+          setReveal3DResourceLoadFailCount((p) => p - 1);
+        };
       });
   }, [modelId, revisionId, geometryFilter]);
 

diff --git a/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx b/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx
@@ -16,6 +16,7 @@ import {
   DEFAULT_IMAGE360_ICON_CULLING_RADIUS
 } from './constants';
 import {
+  useReveal3DResourceLoadFailCount,
   useReveal3DResourcesCount,
   useThisAsExpectedResourceLoad
 } from '../Reveal3DResources/Reveal3DResourcesInfoContext';
@@ -38,6 +39,7 @@ export function Image360CollectionContainer({
   const modelRef = useRef<Image360Collection>();
   const viewer = useReveal();
   const { setRevealResourcesCount } = useReveal3DResourcesCount();
+  const { setReveal3DResourceLoadFailCount } = useReveal3DResourceLoadFailCount();
 
   const initializingSiteId = useRef<{ siteId: string } | { externalId: string } | undefined>(
     undefined
@@ -95,6 +97,10 @@ export function Image360CollectionContainer({
       .catch((error: any) => {
         const errorReportFunction = onLoadError ?? defaultLoadErrorHandler;
         errorReportFunction(addImage360CollectionOptions, error);
+        setReveal3DResourceLoadFailCount((p) => p + 1);
+        return () => {
+          setReveal3DResourceLoadFailCount((p) => p - 1);
+        };
       });
 
     async function getOrAdd360Collection(): Promise<Image360Collection> {

diff --git a/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx b/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx
@@ -8,6 +8,7 @@ import { Matrix4 } from 'three';
 import { useReveal } from '../RevealCanvas/ViewerContext';
 import { useRevealKeepAlive } from '../RevealKeepAlive/RevealKeepAliveContext';
 import {
+  useReveal3DResourceLoadFailCount,
   useReveal3DResourcesCount,
   useThisAsExpectedResourceLoad
 } from '../Reveal3DResources/Reveal3DResourcesInfoContext';
@@ -39,6 +40,7 @@ export function PointCloudContainer({
   const viewer = useReveal();
   const { modelId, revisionId } = addModelOptions;
   const { setRevealResourcesCount } = useReveal3DResourcesCount();
+  const { setReveal3DResourceLoadFailCount } = useReveal3DResourceLoadFailCount();
   const initializingModel = useRef<AddModelOptions | undefined>(undefined);
 
   useThisAsExpectedResourceLoad();
@@ -58,6 +60,10 @@ export function PointCloudContainer({
       .catch((error) => {
         const errorHandler = onLoadError ?? defaultLoadErrorHandler;
         errorHandler(addModelOptions, error);
+        setReveal3DResourceLoadFailCount((p) => p + 1);
+        return () => {
+          setReveal3DResourceLoadFailCount((p) => p - 1);
+        };
       });
   }, [modelId, revisionId]);
 

diff --git a/react-components/src/components/Reveal3DResources/Reveal3DResourcesInfoContext.tsx b/react-components/src/components/Reveal3DResources/Reveal3DResourcesInfoContext.tsx
@@ -17,6 +17,8 @@ import {
 type Reveal3DResourcesInfoContent = {
   reveal3DResourcesCount: number;
   setRevealResourcesCount: (newCount: number) => void;
+  reveal3DResourceLoadFailCount: number;
+  setReveal3DResourceLoadFailCount: Dispatch<SetStateAction<number>>;
   reveal3DResourcesExpectedToLoad: number;
   setReveal3DResourcesExpectedToLoad: Dispatch<SetStateAction<number>>;
   model3DStylingLoading: boolean;
@@ -46,8 +48,20 @@ export const useReveal3DResourcesCount = (): Pick<
   };
 };
 
-export const useReveal3DResourcesExpectedToLoadCount = (): number => {
-  return useInfoElementOfContext().reveal3DResourcesExpectedToLoad;
+export const useReveal3DResourceLoadFailCount = (): Pick<
+  Reveal3DResourcesInfoContent,
+  'reveal3DResourceLoadFailCount' | 'setReveal3DResourceLoadFailCount'
+> => {
+  return useInfoElementOfContext();
+};
+
+export const useReveal3DResourcesExpectedInViewerCount = (): number => {
+  const element = useInfoElementOfContext();
+  return element.reveal3DResourcesExpectedToLoad - element.reveal3DResourceLoadFailCount;
+};
+
+export const useReveal3DLoadedResourceCount = (): number => {
+  return useInfoElementOfContext().reveal3DResourcesCount;
 };
 
 export const useThisAsExpectedResourceLoad = (): void => {
@@ -78,10 +92,13 @@ export const Reveal3DResourcesInfoContextProvider = ({
   const [reveal3DResourcesCount, setRevealResourcesCount] = useState<number>(0);
   const [model3DStylingLoading, setModel3DStylingLoading] = useState<boolean>(false);
   const [reveal3DResourcesExpectedToLoad, setReveal3DResourcesExpectedToLoad] = useState<number>(0);
+  const [reveal3DResourceLoadFailCount, setReveal3DResourceLoadFailCount] = useState<number>(0);
   const memoedState: Reveal3DResourcesInfoContent = useMemo(
     () => ({
       reveal3DResourcesCount,
       setRevealResourcesCount,
+      reveal3DResourceLoadFailCount,
+      setReveal3DResourceLoadFailCount,
       reveal3DResourcesExpectedToLoad,
       setReveal3DResourcesExpectedToLoad,
       model3DStylingLoading,
@@ -90,6 +107,8 @@ export const Reveal3DResourcesInfoContextProvider = ({
     [
       reveal3DResourcesCount,
       setRevealResourcesCount,
+      reveal3DResourceLoadFailCount,
+      setReveal3DResourceLoadFailCount,
       reveal3DResourcesExpectedToLoad,
       setReveal3DResourcesExpectedToLoad,
       model3DStylingLoading,

diff --git a/react-components/src/components/Reveal3DResources/index.ts b/react-components/src/components/Reveal3DResources/index.ts
@@ -23,4 +23,7 @@ export type {
   CadModelOptions
 } from './types';
 
-export { useReveal3DResourcesExpectedToLoadCount } from './Reveal3DResourcesInfoContext';
+export {
+  useReveal3DResourcesExpectedInViewerCount,
+  useReveal3DLoadedResourceCount
+} from './Reveal3DResourcesInfoContext';