feat(react-components): select single model simple list when has no scene

react-components/src/common/i18n/en/reveal-react-components.json

@@ -66,6 +66,7 @@
   "RULESET_NO_SELECTION": "No Rule Set Selected",
   "RULESET_SELECT_HEADER": "Select color overlay",
   "SCENE_SELECT_HEADER": "Select 3D location",
+  "MODEL_SELECT_HEADER": "Select 3D model",
   "SEARCH_PLACEHOLDER": "Search",
   "SELECT_INDIVIDUAL_3D_MODELS": "Select individual models",
   "SETTINGS_TOOLTIP": "Settings",

react-components/src/components/RevealToolbar/ModelsList.tsx

@@ -0,0 +1,39 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type ReactElement } from 'react';
+
+import { Menu } from '@cognite/cogs.js';
+import { type ModelWithRevision } from '../../hooks/types';
+
+type ModelListProps = {
+  modelsWithRevision: ModelWithRevision[];
+  selectedModel: ModelWithRevision | undefined;
+  onModelChange: (model: ModelWithRevision | undefined) => void;
+};
+
+export const ModelsList = ({
+  modelsWithRevision,
+  selectedModel,
+  onModelChange
+}: ModelListProps): ReactElement => {
+  if (modelsWithRevision.length === 0) {
+    return <></>;
+  }
+  return (
+    <>
+      {modelsWithRevision.map((modelData) => {
+        return (
+          <Menu.Item
+            key={`${modelData.model.id}`}
+            toggled={selectedModel?.model.id === modelData.model.id}
+            onClick={() => {
+              onModelChange(modelData);
+            }}>
+            {modelData.model?.name}
+          </Menu.Item>
+        );
+      })}
+    </>
+  );
+};

react-components/src/components/RevealToolbar/RevealToolbar.tsx

@@ -15,6 +15,7 @@ import { ResetCameraButton } from './ResetCameraButton';
 import { type QualitySettings } from './SettingsContainer/types';
 import styled from 'styled-components';
 import { SelectSceneButton } from './SelectSceneButton';
+import { SelectSingle3DModelButton } from './SelectSingle3DModelButton';
 import { RuleBasedOutputsButton } from './RuleBasedOutputsButton';
 import {
   SetFlexibleControlsType,
@@ -48,6 +49,7 @@ const DefaultContentWrapper = (props: CustomToolbarContent): ReactElement => {
       <LayersButton />
       <FitModelsButton />
       <RuleBasedOutputsButton />
+      <SelectSingle3DModelButton />
       <Divider weight="2px" length="75%" />
 
       <SlicerButton />
@@ -108,6 +110,7 @@ export const RevealToolbar = withSuppressRevealEvents(
   HelpButton: typeof HelpButton;
   ResetCameraButton: typeof ResetCameraButton;
   SelectSceneButton: typeof SelectSceneButton;
+  SelectSingle3DModelButton: typeof SelectSingle3DModelButton;
   RuleBasedOutputsButton: typeof RuleBasedOutputsButton;
   AssetContextualizedButton: typeof AssetContextualizedButton;
   SetOrbitOrFirstPersonControlsType: typeof SetOrbitOrFirstPersonControlsType;
@@ -122,6 +125,7 @@ RevealToolbar.SettingsButton = SettingsButton;
 RevealToolbar.HelpButton = HelpButton;
 RevealToolbar.ResetCameraButton = ResetCameraButton;
 RevealToolbar.SelectSceneButton = SelectSceneButton;
+RevealToolbar.SelectSingle3DModelButton = SelectSingle3DModelButton;
 RevealToolbar.RuleBasedOutputsButton = RuleBasedOutputsButton;
 RevealToolbar.AssetContextualizedButton = AssetContextualizedButton;
 RevealToolbar.SetOrbitOrFirstPersonControlsType = SetOrbitOrFirstPersonControlsType;

react-components/src/components/RevealToolbar/SelectSingle3DModelButton.tsx

@@ -0,0 +1,29 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type ReactElement } from 'react';
+
+import { useSDK } from '../RevealCanvas/SDKProvider';
+import { RevealContext } from '../RevealContext/RevealContext';
+import { type ModelWithRevision } from '../../hooks/types';
+import { Single3DModelSelection } from './SelectSingle3DModelSelection';
+
+type SelectSingle3DModelButtonProps = {
+  onSingleModelChanged?: (model: ModelWithRevision | undefined) => void;
+};
+
+export const SelectSingle3DModelButton = ({
+  onSingleModelChanged
+}: SelectSingle3DModelButtonProps): ReactElement => {
+  const sdk = useSDK();
+
+  const handleSingleModelChange = (model: ModelWithRevision | undefined): void => {
+    if (onSingleModelChanged !== undefined) onSingleModelChanged(model);
+  };
+
+  return (
+    <RevealContext sdk={sdk}>
+      <Single3DModelSelection sdk={sdk} onModelChange={handleSingleModelChange} />
+    </RevealContext>
+  );
+};

react-components/src/components/RevealToolbar/SelectSingle3DModelSelection.tsx

@@ -0,0 +1,63 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { useState, type ReactElement } from 'react';
+
+import { Button, Dropdown, Menu, Tooltip as CogsTooltip } from '@cognite/cogs.js';
+import { useTranslation } from '../i18n/I18n';
+import styled from 'styled-components';
+import { useAll3dModels } from '../../hooks/useAll3dModels';
+import { type CogniteClient } from '@cognite/sdk';
+import { ModelsList } from './ModelsList';
+import { useRevisions } from '../../hooks/useRevisions';
+import { type ModelWithRevision } from '../../hooks/types';
+
+type Single3DModelSelectionProps = {
+  sdk: CogniteClient;
+  onModelChange: (model: ModelWithRevision | undefined) => void;
+};
+
+export const Single3DModelSelection = ({
+  sdk,
+  onModelChange
+}: Single3DModelSelectionProps): ReactElement => {
+  const { data: models } = useAll3dModels(sdk, true);
+
+  const { data: modelsWithRevision } = useRevisions(sdk, models);
+
+  const [selectedModel, setSelectedModel] = useState<ModelWithRevision | undefined>();
+
+  const { t } = useTranslation();
+
+  const handleSelectedModelChange = (model: ModelWithRevision | undefined): void => {
+    setSelectedModel(model);
+    onModelChange(model);
+  };
+
+  return (
+    <CogsTooltip
+      content={t('MODEL_SELECT_HEADER', 'Select 3D model')}
+      placement="right"
+      appendTo={document.body}>
+      <Dropdown
+        placement="right-start"
+        content={
+          <StyledMenu>
+            <Menu.Header>{t('MODEL_SELECT_HEADER', 'Select 3D model')}</Menu.Header>
+            <ModelsList
+              modelsWithRevision={modelsWithRevision ?? []}
+              selectedModel={selectedModel}
+              onModelChange={handleSelectedModelChange}
+            />
+          </StyledMenu>
+        }>
+        <Button icon="World" aria-label="Select 3D model" type="ghost"></Button>
+      </Dropdown>
+    </CogsTooltip>
+  );
+};
+
+const StyledMenu = styled(Menu)`
+  max-height: 400px;
+  overflow: auto;
+`;

react-components/src/hooks/network/get3dModels.ts

@@ -0,0 +1,8 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type CogniteClient, type Model3D } from '@cognite/sdk';
+
+export const get3dModels = async (sdk: CogniteClient): Promise<Model3D[]> => {
+  return await sdk.models3D.list().autoPagingToArray({ limit: Infinity });
+};

react-components/src/hooks/network/getRevisions.ts

@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type Model3D, type CogniteClient, type Revision3D } from '@cognite/sdk';
+import { type ModelWithRevision } from '../types';
+
+export const getRevisions = async (
+  model: Model3D | undefined,
+  sdk: CogniteClient
+): Promise<ModelWithRevision | undefined> => {
+  if (model === undefined) return;
+  const revisions = await sdk.revisions3D.list(model.id).autoPagingToArray({ limit: Infinity });
+  const revisionFound =
+    revisions.find((revision: Revision3D) => revision.published) ?? revisions[0];
+  return {
+    model,
+    revision: revisionFound
+  };
+};

react-components/src/hooks/types.ts

@@ -1,7 +1,13 @@
 /*!
  * Copyright 2023 Cognite AS
  */
-import { type Node3D, type CogniteExternalId, type Asset } from '@cognite/sdk';
+import {
+  type Node3D,
+  type CogniteExternalId,
+  type Asset,
+  type Revision3D,
+  type Model3D
+} from '@cognite/sdk';
 import { type AssetAnnotationImage360Info } from '@cognite/reveal';
 
 export type ThreeDModelFdmMappings = {
@@ -58,3 +64,8 @@ export type Image360AnnotationMappedAssetData = {
   asset: Asset;
   annotationIds: number[];
 };
+
+export type ModelWithRevision = {
+  model: Model3D;
+  revision: Revision3D;
+};

react-components/src/hooks/useAll3dModels.ts

@@ -0,0 +1,16 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+
+import { type CogniteClient, type HttpError, type Model3D } from '@cognite/sdk';
+import { get3dModels } from './network/get3dModels';
+
+export const useAll3dModels = (sdk: CogniteClient, enabled: boolean): UseQueryResult<Model3D[]> => {
+  return useQuery<Model3D[], HttpError>({
+    queryKey: ['models'],
+    queryFn: async () => await get3dModels(sdk),
+    staleTime: Infinity,
+    enabled
+  });
+};

react-components/src/hooks/useRevisions.ts

@@ -0,0 +1,27 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+
+import { type Model3D, type CogniteClient } from '@cognite/sdk';
+import { type ModelWithRevision } from './types';
+import { getRevisions } from './network/getRevisions';
+
+const STALE_TIME = 10 * 1000;
+const REFRESH_INTERVAL = 10 * 1000;
+
+export function useRevisions(
+  sdk: CogniteClient,
+  models: Model3D[] | undefined
+): UseQueryResult<ModelWithRevision[]> {
+  return useQuery({
+    queryKey: ['model-revision', models],
+    queryFn: async () => {
+      const fetchPromises = models?.map(async (model) => await getRevisions(model, sdk));
+      return await Promise.all(fetchPromises ?? []);
+    },
+    staleTime: STALE_TIME,
+    refetchInterval: REFRESH_INTERVAL,
+    enabled: models !== undefined && models.length > 0
+  });
+}

react-components/src/index.ts

@@ -119,7 +119,8 @@ export {
   type Image360AnnotationMappedAssetData,
   type LayersUrlStateParam,
   type DefaultLayersConfiguration,
-  type ThreeDModelFdmMappings
+  type ThreeDModelFdmMappings,
+  type ModelWithRevision
 } from './hooks/types';
 export { type LayersButtonProps } from './components/RevealToolbar/LayersButton';
 export type { CameraNavigationActions } from './hooks/useCameraNavigation';

react-components/tests/unit-tests/utilities/useAll3dModels.test.tsx

@@ -0,0 +1,76 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { type CogniteClient, type Model3D } from '@cognite/sdk';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useAll3dModels } from '../../../src/hooks/useAll3dModels';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { get3dModels } from '../../../src/hooks/network/get3dModels';
+
+const models: Model3D[] = [
+  {
+    id: 1,
+    name: 'model1',
+    createdTime: new Date()
+  },
+  {
+    id: 2,
+    name: 'model2',
+    createdTime: new Date()
+  },
+  {
+    id: 3,
+    name: 'model3',
+    createdTime: new Date()
+  },
+  {
+    id: 4,
+    name: 'model4',
+    createdTime: new Date()
+  }
+];
+
+const sdk = {
+  post: vi.fn().mockResolvedValue({ data: {} }),
+  project: 'project'
+} as unknown as CogniteClient;
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }: { children: any }): any => (
+  <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+vi.mock('../../../src/hooks/network/get3dModels');
+
+describe('useAll3dModels', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    queryClient.clear();
+  });
+
+  test('should return a list of models', async () => {
+    vi.mocked(get3dModels).mockResolvedValue(models);
+
+    const { result } = renderHook(() => useAll3dModels(sdk, true), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual(models);
+    });
+  });
+
+  test('should return an empty list of models if no models exist', async () => {
+    vi.mocked(get3dModels).mockResolvedValue([]);
+    const { result } = renderHook(() => useAll3dModels(sdk, true), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual([]);
+    });
+  });
+
+  test('should return undefined if not enabled', async () => {
+    const { result } = renderHook(() => useAll3dModels(sdk, false), { wrapper });
+
+    await waitFor(() => {
+      expect(result.current.data).toEqual(undefined);
+    });
+  });
+});