From d58dd997cec7af4d7bf9c2e5bd50a89e4836a6d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= <70905152+haakonflatval-cognite@users.noreply.github.com> Date: Tue, 5 Nov 2024 10:09:59 +0100 Subject: [PATCH] feat(react-components): add resources-expected-in-viewer hook and bump 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 --- react-components/package.json | 2 +- .../CadModelContainer/CadModelContainer.tsx | 6 +++++ .../Image360CollectionContainer.tsx | 6 +++++ .../PointCloudContainer.tsx | 6 +++++ .../Reveal3DResourcesInfoContext.tsx | 23 +++++++++++++++++-- .../src/components/Reveal3DResources/index.ts | 5 +++- 6 files changed, 44 insertions(+), 4 deletions(-) diff --git a/react-components/package.json b/react-components/package.json index a0c46140534..f0187785a5e 100644 --- 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 index 49d4101e583..6910c86acf2 100644 --- 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(undefined); const initializingModelsGeometryFilter = useRef(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 index 7176a70014f..4db676478a5 100644 --- 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(); 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 { diff --git a/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx b/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx index f17d54345c3..93696e4aa61 100644 --- 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(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 index c06e4b02ee8..fe65d6ffdd1 100644 --- 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>; reveal3DResourcesExpectedToLoad: number; setReveal3DResourcesExpectedToLoad: Dispatch>; 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(0); const [model3DStylingLoading, setModel3DStylingLoading] = useState(false); const [reveal3DResourcesExpectedToLoad, setReveal3DResourcesExpectedToLoad] = useState(0); + const [reveal3DResourceLoadFailCount, setReveal3DResourceLoadFailCount] = useState(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 index 16673bdd617..a9adc86cd27 100644 --- 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';