feat(grid3d): discrete property names are displayed in the readouts. (#…

…2012)

1) prop **propertyNames** of string[] type is added to Grid3DLayer.
2) The prop is used to display discrete property names in the readout.

---------

Co-authored-by: leonid.polukhin <leonid.polukhin@aspentech.com>

typescript/packages/subsurface-viewer/src/layers/grid3d/grid3dLayer.ts

@@ -146,6 +146,12 @@ export interface Grid3DLayerProps extends ExtendedLayerProps {
      */
     propertiesData: string | number[] | Float32Array | Uint16Array;
 
+    /**
+     * Discrete propety names to be displayed in cursor readouts.
+     * The property values are used as property name indices.
+     */
+    discretePropertyNames?: string[];
+
     /**
      * Defines how the cells are to be colored:
      * by property value or by a coordinate.
@@ -173,7 +179,7 @@ export interface Grid3DLayerProps extends ExtendedLayerProps {
      * E.g. (x) => [x * 255, x * 255, x * 255]
      * May also be set as constant color:
      * E.g. [255, 0, 0] for constant red cells.
-     * Can be defined as Uint8Array containing [R , G, B] triplets in [0, 255] range each.
+     * Can be defined as Uint8Array containing [R, G, B] triplets in [0, 255] range each.
      */
     colorMapFunction?: colorMapFunctionType | Uint8Array;
 
@@ -340,6 +346,7 @@ export default class Grid3DLayer extends CompositeLayer<Grid3DLayerProps> {
                 coloringMode: this.props.coloringMode,
                 gridLines: this.props.gridLines,
                 propertyValueRange: this.getPropertyValueRange(),
+                discretePropertyNames: this.props.discretePropertyNames,
                 material: this.props.material,
                 depthTest: this.props.depthTest,
                 ZIncreasingDownwards: this.props.ZIncreasingDownwards,

typescript/packages/subsurface-viewer/src/layers/grid3d/privateGrid3dLayer.ts

@@ -77,6 +77,7 @@ export interface PrivateLayerProps extends ExtendedLayerProps {
     coloringMode: TGrid3DColoringMode.Property;
     gridLines: boolean;
     propertyValueRange: [number, number];
+    discretePropertyNames?: string[];
     depthTest: boolean;
     ZIncreasingDownwards: boolean;
 }
@@ -257,9 +258,12 @@ export default class PrivateLayer extends Layer<PrivateLayerProps> {
         }
 
         const properties = this.props.mesh.attributes.properties.value;
-        const property = properties[vertexIndex];
-        if (Number.isFinite(property)) {
-            layer_properties.push(createPropertyData("Property", property));
+        const propertyValue = properties[vertexIndex];
+        if (Number.isFinite(propertyValue)) {
+            const propertyText =
+                this.props.discretePropertyNames?.[propertyValue] ??
+                propertyValue;
+            layer_properties.push(createPropertyData("Property", propertyText));
         }
 
         return {

typescript/packages/subsurface-viewer/src/storybook/layers/Grid3DLayer.stories.tsx

@@ -200,6 +200,21 @@ const colorTable = new Uint8Array([
     100, 0, 100,   // 10
     100, 100, 0,   // 11
 ]);
+
+const propertyNames = [
+    "blue",         // 0
+    "green",        // 1
+    "cyan",         // 2
+    "red",          // 3
+    "magenta",      // 4
+    "yellow",       // 5
+    "dark blue",    // 6
+    "dark green",   // 7
+    "dark cyan",    // 8
+    "dark red",     // 9
+    "dark magenta", // 10
+    "dark yellow",  // 11
+]
 /* eslint-enable prettier/prettier */
 
 export const PolyhedralCells: StoryObj<typeof SubsurfaceViewer> = {
@@ -314,6 +329,7 @@ export const DiscretePropertyWithClamping: StoryObj<typeof SubsurfaceViewer> = {
                 polysData: layerArrays[discretePropsLayerId].polysData,
                 propertiesData:
                     layerArrays[discretePropsLayerId].propertiesData,
+                discretePropertyNames: propertyNames,
                 colorMapName: "Seismic",
                 ZIncreasingDownwards: true,
                 colorMapFunction: