feat(react-components): initial support for Observations

react-components/package.json

@@ -30,7 +30,7 @@
   },
   "peerDependencies": {
     "@cognite/cogs.js": ">=9.84.3",
-    "@cognite/reveal": "4.14.7",
+    "@cognite/reveal": "4.15.0",
     "react": ">=18",
     "react-dom": ">=18",
     "styled-components": ">=5"
@@ -44,7 +44,7 @@
     "@cognite/cdf-i18n-utils": "^0.7.5",
     "@cognite/cdf-utilities": "^3.6.0",
     "@cognite/cogs.js": "^9.84.3",
-    "@cognite/reveal": "^4.14.7",
+    "@cognite/reveal": "^4.15.0",
     "@cognite/sdk": "^9.13.0",
     "@playwright/test": "^1.43.1",
     "@storybook/addon-essentials": "^8.0.9",

react-components/src/architecture/base/commands/BaseTool.ts

@@ -150,7 +150,7 @@ export abstract class BaseTool extends RenderTargetCommand {
       if (!(customObject instanceof ThreeView)) {
         return false;
       }
-      return domainObjectPredicate(customObject.domainObject);
+      return domainObjectPredicate(customObject.domainObject as DomainObject);
     };
     return await viewer.getAnyIntersectionFromPixel(point, { predicate });
   }

react-components/src/architecture/base/views/BaseView.ts

@@ -9,12 +9,12 @@ import { type DomainObjectChange } from '../domainObjectsHelpers/DomainObjectCha
  * Represents the observer in the Observer pattern
  * It provides common functionality for all types of views.
  */
-export abstract class BaseView {
+export abstract class BaseView<DomainObjectType extends DomainObject = DomainObject> {
   // ==================================================
   // INSTANCE FIELDS
   // ==================================================
 
-  private _domainObject: DomainObject | undefined = undefined;
+  private _domainObject: DomainObjectType | undefined = undefined;
 
   // ==================================================
   // INSTANCE PROPERTIES
@@ -24,7 +24,7 @@ export abstract class BaseView {
     return this._domainObject !== undefined;
   }
 
-  public get domainObject(): DomainObject {
+  public get domainObject(): DomainObjectType {
     if (this._domainObject === undefined) {
       throw Error('The DomainObject is missing in the view');
     }
@@ -92,7 +92,7 @@ export abstract class BaseView {
   // INSTANCE METHODS
   // ==================================================
 
-  public setDomainObject(domainObject: DomainObject): void {
+  public setDomainObject(domainObject: DomainObjectType): void {
     this._domainObject = domainObject;
   }
 }

react-components/src/architecture/base/views/GroupThreeView.ts

@@ -13,6 +13,7 @@ import {
 } from '@cognite/reveal';
 import { type DomainObjectIntersection } from '../domainObjectsHelpers/DomainObjectIntersection';
 import { VisualDomainObject } from '../domainObjects/VisualDomainObject';
+import { type DomainObject } from '../domainObjects/DomainObject';
 
 /**
  * Represents an abstract class for a Three.js view that renders an Object3D.
@@ -24,7 +25,10 @@ import { VisualDomainObject } from '../domainObjects/VisualDomainObject';
  * - calculateBoundingBox() to calculate the bounding box if you don not relay on three.js.
  */
 
-export abstract class GroupThreeView extends ThreeView implements ICustomObject {
+export abstract class GroupThreeView<DomainObjectType extends DomainObject = DomainObject>
+  extends ThreeView<DomainObjectType>
+  implements ICustomObject
+{
   // ==================================================
   // INSTANCE FIELDS
   // ==================================================

react-components/src/architecture/base/views/ThreeView.ts

@@ -17,7 +17,9 @@ import { type PerspectiveCamera, type Box3 } from 'three';
  * It can for instance be a view that changes something on another view, dor instance texture on a surface or whatever.
  * I just wanted to make it ready for some corner cases I have seen during a long time as 3D developer.
  */
-export abstract class ThreeView extends BaseView {
+export abstract class ThreeView<
+  DomainObjectType extends DomainObject = DomainObject
+> extends BaseView<DomainObjectType> {
   // ==================================================
   // INSTANCE FIELDS
   // ==================================================
@@ -112,7 +114,7 @@ export abstract class ThreeView extends BaseView {
     this._boundingBox = undefined;
   }
 
-  public attach(domainObject: DomainObject, renderTarget: RevealRenderTarget): void {
+  public attach(domainObject: DomainObjectType, renderTarget: RevealRenderTarget): void {
     super.setDomainObject(domainObject);
     this._renderTarget = renderTarget;
   }

react-components/src/architecture/concrete/observationsDomainObject/ObservationsDomainObject.ts

@@ -0,0 +1,30 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type Overlay3DCollection } from '@cognite/reveal';
+import { type Observation } from './models';
+import { VisualDomainObject } from '../../base/domainObjects/VisualDomainObject';
+import { type ThreeView } from '../../base/views/ThreeView';
+import { ObservationsView } from './ObservationsView';
+import { type TranslateKey } from '../../base/utilities/TranslateKey';
+
+export class ObservationsDomainObject extends VisualDomainObject {
+  private readonly _collection: Overlay3DCollection<Observation>;
+
+  public override get typeName(): TranslateKey {
+    return { fallback: ObservationsDomainObject.name };
+  }
+
+  constructor(collection: Overlay3DCollection<Observation>) {
+    super();
+    this._collection = collection;
+  }
+
+  public get overlayCollection(): Overlay3DCollection<Observation> {
+    return this._collection;
+  }
+
+  protected override createThreeView(): ThreeView<ObservationsDomainObject> | undefined {
+    return new ObservationsView(this._collection);
+  }
+}

react-components/src/architecture/concrete/observationsDomainObject/ObservationsTool.ts

@@ -0,0 +1,118 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type IconType } from '@cognite/cogs.js';
+import { type TranslateKey } from '../../base/utilities/TranslateKey';
+import { type FdmSDK, type InstanceFilter } from '../../../utilities/FdmSDK';
+import { OBSERVATION_SOURCE, type Observation, type ObservationProperties } from './models';
+import { ObservationsDomainObject } from './ObservationsDomainObject';
+import { Color, Vector3 } from 'three';
+import { CDF_TO_VIEWER_TRANSFORMATION, type Overlay3D, Overlay3DCollection } from '@cognite/reveal';
+import { NavigationTool } from '../../base/concreteCommands/NavigationTool';
+import { type RevealRenderTarget } from '../../base/renderTarget/RevealRenderTarget';
+
+const DEFAULT_OVERLAY_COLOR = new Color('lightblue');
+const SELECTED_OVERLAY_COLOR = new Color('red');
+
+export class ObservationsTool extends NavigationTool {
+  // private _domainObjects: ObservationsDomainObject[] = [];
+  private readonly _domainObjectPromise: Promise<ObservationsDomainObject>;
+
+  private _selectedOverlay: Overlay3D<Observation> | undefined;
+
+  constructor(fdmSdk: FdmSDK) {
+    super();
+    this._domainObjectPromise = fetchObservations(fdmSdk).then(
+      async (observations) => await this.initializeDomainObjects(observations)
+    );
+  }
+
+  private async initializeDomainObjects(
+    observations: Observation[]
+  ): Promise<ObservationsDomainObject> {
+    const observationOverlays = observations.map((observation) => {
+      const position = new Vector3(
+        observation.properties.positionX,
+        observation.properties.positionY,
+        observation.properties.positionZ
+      ).applyMatrix4(CDF_TO_VIEWER_TRANSFORMATION);
+
+      return {
+        position,
+        content: observation
+      };
+    });
+
+    const collection = new Overlay3DCollection<Observation>(observationOverlays, {
+      defaultOverlayColor: DEFAULT_OVERLAY_COLOR
+    });
+
+    const observationDomainObject = new ObservationsDomainObject(collection);
+
+    return observationDomainObject;
+  }
+
+  public override get icon(): IconType {
+    return 'Location';
+  }
+
+  public override get tooltip(): TranslateKey {
+    return { fallback: 'Show observations' };
+  }
+
+  public override attach(renderTarget: RevealRenderTarget): void {
+    super.attach(renderTarget);
+    void this._domainObjectPromise.then((domainObject) => {
+      renderTarget.rootDomainObject.addChildInteractive(domainObject);
+    });
+  }
+
+  public override onActivate(): void {
+    void this._domainObjectPromise.then((domainObject) =>
+      domainObject.setVisibleInteractive(true, this.renderTarget)
+    );
+  }
+
+  public override onDeactivate(): void {
+    void this._domainObjectPromise.then((domainObject) => {
+      domainObject.setVisibleInteractive(false, this.renderTarget);
+    });
+  }
+
+  public override async onClick(event: PointerEvent): Promise<void> {
+    const domainObject = await this._domainObjectPromise;
+    this._selectedOverlay?.setColor(DEFAULT_OVERLAY_COLOR);
+
+    const normalizedCoord = this.getNormalizedPixelCoordinates(event);
+    const intersection = domainObject.overlayCollection.intersectOverlays(
+      normalizedCoord,
+      this.renderTarget.camera
+    );
+
+    if (intersection !== undefined) {
+      this.handleIntersectedOverlay(intersection);
+    } else {
+      this._selectedOverlay = undefined;
+    }
+
+    this.renderTarget.viewer.requestRedraw();
+  }
+
+  private handleIntersectedOverlay(overlay: Overlay3D<Observation>): void {
+    overlay.setColor(SELECTED_OVERLAY_COLOR);
+    this.renderTarget.viewer.requestRedraw();
+    this._selectedOverlay = overlay;
+  }
+}
+
+const observationsFilter: InstanceFilter = {};
+
+async function fetchObservations(fdmSdk: FdmSDK): Promise<Observation[]> {
+  const observationResult = await fdmSdk.filterAllInstances<ObservationProperties>(
+    observationsFilter,
+    'node',
+    OBSERVATION_SOURCE
+  );
+
+  return observationResult.instances;
+}

react-components/src/architecture/concrete/observationsDomainObject/ObservationsView.ts

@@ -0,0 +1,27 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { Box3 } from 'three';
+import { type ObservationsDomainObject } from './ObservationsDomainObject';
+import { GroupThreeView } from '../../base/views/GroupThreeView';
+import { type Overlay3DCollection } from '@cognite/reveal';
+import { type Observation } from './models';
+
+export class ObservationsView extends GroupThreeView<ObservationsDomainObject> {
+  private readonly _collection: Overlay3DCollection<Observation>;
+
+  constructor(collection: Overlay3DCollection<Observation>) {
+    super();
+    this._collection = collection;
+  }
+
+  protected override calculateBoundingBox(): Box3 {
+    return this._collection
+      .getOverlays()
+      .reduce((box, overlay) => box.expandByPoint(overlay.getPosition()), new Box3());
+  }
+
+  protected override addChildren(): void {
+    this.addChild(this._collection);
+  }
+}

react-components/src/architecture/concrete/observationsDomainObject/models.ts

@@ -0,0 +1,57 @@
+/*!
+ * Copyright 2024 Cognite AS
+ */
+import { type DmsUniqueIdentifier, type FdmNode, type Source } from '../../../utilities/FdmSDK';
+
+export type ObservationProperties = {
+  // "ID as the node appears in the Source system"
+  sourceId: string;
+  // "Name of the source system node comes from"
+  source: string;
+  // "Title or name of the node"
+  title: string;
+  // "Long description of the node"
+  description: string;
+  // "Text based labels for generic use"
+  labels: string[];
+  // "Visibility of node (PUBLIC, PRIVATE, PROTECTED)"
+  visibility: string;
+  // "Who created this node?"
+  createdBy: string;
+  // "Who was the last person to update this node?"
+  updatedBy: string;
+  // "Is this item archived, and therefore hidden from most UIs?"
+  isArchived: boolean;
+  // "The status of the observation (draft, completed, sent)"
+  status: string;
+  // "External ID of the associated CDF Asset"
+  asset: DmsUniqueIdentifier;
+  // "List of associated files"
+  files: DmsUniqueIdentifier[];
+  // "description of how the observation was troubleshooted"
+  troubleshooting: string;
+  // "Priority of the observation (Urgent, High ...)"
+  priority: string;
+  // "The observation type (Malfunction report, Maintenance request, etc.)"
+  type: string;
+  // "3D position"
+  positionX: number;
+  positionY: number;
+  positionZ: number;
+  // "Comments"
+  comments: [CommentProperties];
+};
+
+export type CommentProperties = {
+  createdBy: string;
+  text: string;
+};
+
+export type Observation = FdmNode<ObservationProperties>;
+
+export const OBSERVATION_SOURCE: Source = {
+  type: 'view',
+  version: '3c207ca2355dbb',
+  externalId: 'Observation',
+  space: 'observations'
+};

react-components/src/components/Architecture/CommandButton.tsx

@@ -32,7 +32,14 @@ export const CommandButtons = ({
   );
 };
 
-export const CreateCommandButton = (command: BaseCommand, isHorizontal = false): ReactElement => {
+export const CommandButtonFromCommand = ({
+  commandConstructor,
+  isHorizontal = false
+}: {
+  commandConstructor: () => BaseCommand;
+  isHorizontal?: boolean;
+}): ReactElement => {
+  const command = useMemo(commandConstructor, [commandConstructor]);
   return <CommandButton command={command} isHorizontal={isHorizontal} />;
 };