From 44e49b5a7caff3b5e64c9bec569cba58275663e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Mon, 1 Jul 2024 11:13:13 +0200 Subject: [PATCH 1/6] chore: adopt Cogs CounterChip in layers list --- .../LayersContainer/WholeLayerVisibilityToggle.tsx | 6 +++--- .../RevealToolbar/LayersContainer/elements.ts | 13 ------------- 2 files changed, 3 insertions(+), 16 deletions(-) diff --git a/react-components/src/components/RevealToolbar/LayersContainer/WholeLayerVisibilityToggle.tsx b/react-components/src/components/RevealToolbar/LayersContainer/WholeLayerVisibilityToggle.tsx index d79dd261ed4..e1b67cf88e9 100644 --- a/react-components/src/components/RevealToolbar/LayersContainer/WholeLayerVisibilityToggle.tsx +++ b/react-components/src/components/RevealToolbar/LayersContainer/WholeLayerVisibilityToggle.tsx @@ -1,10 +1,10 @@ /*! * Copyright 2024 Cognite AS */ -import { Checkbox, Flex } from '@cognite/cogs.js'; +import { Checkbox, CounterChip, Flex } from '@cognite/cogs.js'; import { type ModelHandler } from './ModelHandler'; import { type ChangeEvent, useCallback, useMemo, type ReactElement, type MouseEvent } from 'react'; -import { StyledChipCount, StyledLabel } from './elements'; +import { StyledLabel } from './elements'; import { type UpdateModelHandlersCallback } from './useModelHandlers'; import { useReveal } from '../../RevealCanvas/ViewerContext'; @@ -50,7 +50,7 @@ export const WholeLayerVisibilityToggle = ({ onChange={handleToggleAllClick} /> {label} - + ); }; diff --git a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts index 7452db13047..cbd1e1c1156 100644 --- a/react-components/src/components/RevealToolbar/LayersContainer/elements.ts +++ b/react-components/src/components/RevealToolbar/LayersContainer/elements.ts @@ -2,21 +2,8 @@ * Copyright 2023 Cognite AS */ -import { Chip } from '@cognite/cogs.js'; import styled from 'styled-components'; -export const StyledChipCount = styled(Chip)` - && { - border-radius: 2px; - width: fit-content; - height: 20px; - max-height: 20px; - min-height: 20px; - min-width: 20px; - padding: 4px; - } -`; - export const StyledLabel = styled.div` /* Font */ font-family: 'Inter'; From 77f98915d935a4e64508de754d5498952c456f84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Mon, 1 Jul 2024 14:26:54 +0200 Subject: [PATCH 2/6] fix: make sure image details are always mounted properly --- .../CadModelContainer/CadModelContainer.tsx | 4 ++-- .../Image360CollectionContainer.tsx | 4 ++++ .../Image360Details/Image360Details.tsx | 15 ++++++++------- .../PointCloudContainer/PointCloudContainer.tsx | 4 ++-- .../src/hooks/useImage360Collections.ts | 13 +++++++++++++ 5 files changed, 29 insertions(+), 11 deletions(-) create mode 100644 react-components/src/hooks/useImage360Collections.ts diff --git a/react-components/src/components/CadModelContainer/CadModelContainer.tsx b/react-components/src/components/CadModelContainer/CadModelContainer.tsx index 4b827188d51..c9fb415e714 100644 --- a/react-components/src/components/CadModelContainer/CadModelContainer.tsx +++ b/react-components/src/components/CadModelContainer/CadModelContainer.tsx @@ -44,7 +44,7 @@ export function CadModelContainer({ addModel(addModelOptions, transform) .then((model) => { onLoad?.(model); - setRevealResourcesCount(viewer.models.length); + setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length); }) .catch((error) => { const errorReportFunction = onLoadError ?? defaultLoadErrorHandler; @@ -98,7 +98,7 @@ export function CadModelContainer({ return; viewer.removeModel(model); - setRevealResourcesCount(viewer.models.length); + setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length); setModel(undefined); } } diff --git a/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx b/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx index c9771d1fbad..eab9f46da98 100644 --- a/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx +++ b/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx @@ -15,6 +15,7 @@ import { DEFAULT_IMAGE360_ICON_COUNT_LIMIT, DEFAULT_IMAGE360_ICON_CULLING_RADIUS } from './constants'; +import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesCountContext'; type Image360CollectionContainerProps = { addImage360CollectionOptions: AddImage360CollectionOptions; @@ -32,6 +33,7 @@ export function Image360CollectionContainer({ const cachedViewerRef = useRevealKeepAlive(); const modelRef = useRef(); const viewer = useReveal(); + const { setRevealResourcesCount } = useReveal3DResourcesCount(); const initializingSiteId = useRef<{ siteId: string } | { externalId: string } | undefined>( undefined @@ -82,6 +84,7 @@ export function Image360CollectionContainer({ modelRef.current = image360Collection; onLoad?.(image360Collection); + setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length); }) .catch((error: any) => { const errorReportFunction = onLoadError ?? defaultLoadErrorHandler; @@ -121,6 +124,7 @@ export function Image360CollectionContainer({ return; viewer.remove360ImageSet(modelRef.current); + setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length); modelRef.current = undefined; } } diff --git a/react-components/src/components/Image360Details/Image360Details.tsx b/react-components/src/components/Image360Details/Image360Details.tsx index 2c13bcfb48c..73bf9085690 100644 --- a/react-components/src/components/Image360Details/Image360Details.tsx +++ b/react-components/src/components/Image360Details/Image360Details.tsx @@ -5,9 +5,10 @@ import { useState, type ReactElement, useCallback, useEffect } from 'react'; import styled from 'styled-components'; import { Image360HistoricalDetails } from '../Image360HistoricalDetails/Image360HistoricalDetails'; -import { type Image360 } from '@cognite/reveal'; +import { Image360EnteredDelegate, Image360Revision, type Image360 } from '@cognite/reveal'; import { Button } from '@cognite/cogs.js'; import { useReveal } from '../RevealCanvas/ViewerContext'; +import { useImage360Collections } from '../../hooks/useImage360Collections'; type Image360DetailsProps = { appLanguage?: string; @@ -21,15 +22,15 @@ export function Image360Details({ appLanguage }: Image360DetailsProps): ReactEle setIs360HistoricalPanelExpanded(isExpanded); }, []); - const clearEnteredImage360 = (): void => { + const clearEnteredImage360 = useCallback((): void => { setEnteredEntity(undefined); - }; + }, [setEnteredEntity]); - const exitImage360Image = (): void => { + const exitImage360Image = useCallback((): void => { viewer.exit360Image(); - }; + }, [viewer]); - const collections = viewer.get360ImageCollections(); + const collections = useImage360Collections(); useEffect(() => { collections.forEach((collection) => { @@ -42,7 +43,7 @@ export function Image360Details({ appLanguage }: Image360DetailsProps): ReactEle collection.off('image360Exited', clearEnteredImage360); }); }; - }, [viewer, collections]); + }, [viewer, collections, setEnteredEntity, clearEnteredImage360]); return ( <> diff --git a/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx b/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx index 805c0f0faf6..f4922470b0e 100644 --- a/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx +++ b/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx @@ -47,7 +47,7 @@ export function PointCloudContainer({ addModel(modelId, revisionId, transform) .then((pointCloudModel) => { onLoad?.(pointCloudModel); - setRevealResourcesCount(viewer.models.length); + setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length); }) .catch((error) => { const errorHandler = onLoadError ?? defaultLoadErrorHandler; @@ -101,7 +101,7 @@ export function PointCloudContainer({ return; viewer.removeModel(model); - setRevealResourcesCount(viewer.models.length); + setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length); setModel(undefined); } } diff --git a/react-components/src/hooks/useImage360Collections.ts b/react-components/src/hooks/useImage360Collections.ts new file mode 100644 index 00000000000..5c475d4f268 --- /dev/null +++ b/react-components/src/hooks/useImage360Collections.ts @@ -0,0 +1,13 @@ +import { useMemo } from 'react'; +import { useReveal } from '../components/RevealCanvas/ViewerContext'; +import { Image360Collection } from '@cognite/reveal'; +import { useReveal3DResourcesCount } from '../components/Reveal3DResources/Reveal3DResourcesCountContext'; + +export const useImage360Collections = (): Image360Collection[] => { + const viewer = useReveal(); + const { reveal3DResourcesCount: resourceCount } = useReveal3DResourcesCount(); + + return useMemo(() => { + return viewer.get360ImageCollections(); + }, [viewer, resourceCount]); +}; From 779c1e23a5bd4179cca22862ab31c729fc59132a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Mon, 1 Jul 2024 14:28:43 +0200 Subject: [PATCH 3/6] chore: update image360 detail panels with reveal story container --- react-components/stories/Image360Details.stories.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/react-components/stories/Image360Details.stories.tsx b/react-components/stories/Image360Details.stories.tsx index b67da69dc81..da7bb25e79b 100644 --- a/react-components/stories/Image360Details.stories.tsx +++ b/react-components/stories/Image360Details.stories.tsx @@ -2,10 +2,10 @@ * Copyright 2023 Cognite AS */ import type { Meta, StoryObj } from '@storybook/react'; -import { Image360CollectionContainer, Image360Details, RevealCanvas, RevealContext } from '../src'; -import { createSdkByUrlToken } from './utilities/createSdkByUrlToken'; +import { Image360CollectionContainer, Image360Details, RevealCanvas } from '../src'; import { Color } from 'three'; import { useState } from 'react'; +import { RevealStoryContext } from './utilities/RevealStoryContainer'; const meta = { title: 'Example/Image360Details', @@ -16,13 +16,11 @@ const meta = { export default meta; type Story = StoryObj; -const sdk = createSdkByUrlToken(); - export const Main: Story = { render: () => { const [loading, setLoading] = useState(true); return ( - + {!loading && } - + ); } }; From 6d3fff37be8bf435e9f1ed3f38bc85776b52ea27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Mon, 1 Jul 2024 14:29:05 +0200 Subject: [PATCH 4/6] chore: use raw counter chip in details panel label --- .../Panel/Image360HistoricalPanel.tsx | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx b/react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx index f24a847d40a..ca1616deed5 100644 --- a/react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx +++ b/react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx @@ -3,7 +3,7 @@ */ import { Tooltip, CounterChip, Button } from '@cognite/cogs.js'; -import { type ReactElement } from 'react'; +import { useMemo, type ReactElement } from 'react'; import styled from 'styled-components'; import { useTranslation } from '../../i18n/I18n'; @@ -33,7 +33,7 @@ export const Image360HistoricalPanel = ({ {!revisionDetailsExpanded && ( {t('IMAGES_360_DETAILS', '360 Details')} - + )} {revisionDetailsExpanded && ( @@ -69,16 +69,6 @@ const StyledToolBar = styled.div<{ isExpanded: boolean }>` background: #ffffff; `; -const StyledChipCount = styled(CounterChip)` - && { - width: fit-content; - height: 20px; - max-height: 20px; - min-height: 20px; - min-width: 20px; - } -`; - const Container = styled.div<{ isExpanded: boolean }>` position: relative; left: calc(100% - 200px); From 64aad4b8a293c685f89adcda18a287716efbbebe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Mon, 1 Jul 2024 14:35:36 +0200 Subject: [PATCH 5/6] chore: lint fix --- .../src/components/Image360Details/Image360Details.tsx | 2 +- .../Panel/Image360HistoricalPanel.tsx | 2 +- react-components/src/hooks/useImage360Collections.ts | 5 ++++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/react-components/src/components/Image360Details/Image360Details.tsx b/react-components/src/components/Image360Details/Image360Details.tsx index 73bf9085690..6bdcce9cc22 100644 --- a/react-components/src/components/Image360Details/Image360Details.tsx +++ b/react-components/src/components/Image360Details/Image360Details.tsx @@ -5,7 +5,7 @@ import { useState, type ReactElement, useCallback, useEffect } from 'react'; import styled from 'styled-components'; import { Image360HistoricalDetails } from '../Image360HistoricalDetails/Image360HistoricalDetails'; -import { Image360EnteredDelegate, Image360Revision, type Image360 } from '@cognite/reveal'; +import { type Image360 } from '@cognite/reveal'; import { Button } from '@cognite/cogs.js'; import { useReveal } from '../RevealCanvas/ViewerContext'; import { useImage360Collections } from '../../hooks/useImage360Collections'; diff --git a/react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx b/react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx index ca1616deed5..cc5a69f0224 100644 --- a/react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx +++ b/react-components/src/components/Image360HistoricalDetails/Panel/Image360HistoricalPanel.tsx @@ -3,7 +3,7 @@ */ import { Tooltip, CounterChip, Button } from '@cognite/cogs.js'; -import { useMemo, type ReactElement } from 'react'; +import { type ReactElement } from 'react'; import styled from 'styled-components'; import { useTranslation } from '../../i18n/I18n'; diff --git a/react-components/src/hooks/useImage360Collections.ts b/react-components/src/hooks/useImage360Collections.ts index 5c475d4f268..bc2e9e55095 100644 --- a/react-components/src/hooks/useImage360Collections.ts +++ b/react-components/src/hooks/useImage360Collections.ts @@ -1,6 +1,9 @@ +/*! + * Copyright 2024 Cognite AS + */ import { useMemo } from 'react'; import { useReveal } from '../components/RevealCanvas/ViewerContext'; -import { Image360Collection } from '@cognite/reveal'; +import { type Image360Collection } from '@cognite/reveal'; import { useReveal3DResourcesCount } from '../components/Reveal3DResources/Reveal3DResourcesCountContext'; export const useImage360Collections = (): Image360Collection[] => { From 01fec94b3cca5287362d806f037977ab50f2aa50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20Flatval?= Date: Mon, 1 Jul 2024 14:49:07 +0200 Subject: [PATCH 6/6] chore: factor out common function for updating resource count --- .../components/CadModelContainer/CadModelContainer.tsx | 5 +++-- .../Image360CollectionContainer.tsx | 5 +++-- .../PointCloudContainer/PointCloudContainer.tsx | 5 +++-- react-components/src/utilities/getViewerResourceCount.ts | 8 ++++++++ 4 files changed, 17 insertions(+), 6 deletions(-) create mode 100644 react-components/src/utilities/getViewerResourceCount.ts diff --git a/react-components/src/components/CadModelContainer/CadModelContainer.tsx b/react-components/src/components/CadModelContainer/CadModelContainer.tsx index c9fb415e714..fca8f049347 100644 --- a/react-components/src/components/CadModelContainer/CadModelContainer.tsx +++ b/react-components/src/components/CadModelContainer/CadModelContainer.tsx @@ -10,6 +10,7 @@ import { type CadModelStyling, useApplyCadModelStyling } from './useApplyCadMode import { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesCountContext'; import { isEqual } from 'lodash'; import { modelExists } from '../../utilities/modelExists'; +import { getViewerResourceCount } from '../../utilities/getViewerResourceCount'; export type CogniteCadModelProps = { addModelOptions: AddModelOptions; @@ -44,7 +45,7 @@ export function CadModelContainer({ addModel(addModelOptions, transform) .then((model) => { onLoad?.(model); - setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length); + setRevealResourcesCount(getViewerResourceCount(viewer)); }) .catch((error) => { const errorReportFunction = onLoadError ?? defaultLoadErrorHandler; @@ -98,7 +99,7 @@ export function CadModelContainer({ return; viewer.removeModel(model); - setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length); + setRevealResourcesCount(getViewerResourceCount(viewer)); setModel(undefined); } } diff --git a/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx b/react-components/src/components/Image360CollectionContainer/Image360CollectionContainer.tsx index eab9f46da98..3543f975581 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 { useReveal3DResourcesCount } from '../Reveal3DResources/Reveal3DResourcesCountContext'; +import { getViewerResourceCount } from '../../utilities/getViewerResourceCount'; type Image360CollectionContainerProps = { addImage360CollectionOptions: AddImage360CollectionOptions; @@ -84,7 +85,7 @@ export function Image360CollectionContainer({ modelRef.current = image360Collection; onLoad?.(image360Collection); - setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length); + setRevealResourcesCount(getViewerResourceCount(viewer)); }) .catch((error: any) => { const errorReportFunction = onLoadError ?? defaultLoadErrorHandler; @@ -124,7 +125,7 @@ export function Image360CollectionContainer({ return; viewer.remove360ImageSet(modelRef.current); - setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length); + setRevealResourcesCount(getViewerResourceCount(viewer)); modelRef.current = undefined; } } diff --git a/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx b/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx index f4922470b0e..d563aa4707b 100644 --- a/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx +++ b/react-components/src/components/PointCloudContainer/PointCloudContainer.tsx @@ -14,6 +14,7 @@ import { type PointCloudModelStyling } from './useApplyPointCloudStyling'; import { modelExists } from '../../utilities/modelExists'; +import { getViewerResourceCount } from '../../utilities/getViewerResourceCount'; export type CognitePointCloudModelProps = { addModelOptions: AddModelOptions; @@ -47,7 +48,7 @@ export function PointCloudContainer({ addModel(modelId, revisionId, transform) .then((pointCloudModel) => { onLoad?.(pointCloudModel); - setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length); + setRevealResourcesCount(getViewerResourceCount(viewer)); }) .catch((error) => { const errorHandler = onLoadError ?? defaultLoadErrorHandler; @@ -101,7 +102,7 @@ export function PointCloudContainer({ return; viewer.removeModel(model); - setRevealResourcesCount(viewer.models.length + viewer.get360ImageCollections().length); + setRevealResourcesCount(getViewerResourceCount(viewer)); setModel(undefined); } } diff --git a/react-components/src/utilities/getViewerResourceCount.ts b/react-components/src/utilities/getViewerResourceCount.ts new file mode 100644 index 00000000000..49831a4804b --- /dev/null +++ b/react-components/src/utilities/getViewerResourceCount.ts @@ -0,0 +1,8 @@ +/*! + * Copyright 2024 Cognite AS + */ +import { type Cognite3DViewer } from '@cognite/reveal'; + +export function getViewerResourceCount(viewer: Cognite3DViewer): number { + return viewer.models.length + viewer.get360ImageCollections().length; +}