[NGRM] - Webviz map component - Z values should be defined geological… (

#1394)

* [NGRM] - Webviz map component - Z values should be defined geologicaly #1150

* Fixed spelling error.

* Changed to tsdoc format

* Typecheck. Forgot some properties.

* Another embarrasing spelling error.

* Merge conflict

* Code commit fix. Do inversion before spline refine and not vice versa.

react/src/lib/components/SubsurfaceViewer/layers/axes/axesLayer.ts

@@ -11,13 +11,18 @@ import BoxLayer from "./boxLayer";
 import { Position3D, ExtendedLayerProps } from "../utils/layerTools";
 import { layersDefaultProps } from "../layersDefaultProps";
 import { TextLayer } from "@deck.gl/layers/typed";
+import { cloneDeep } from "lodash";
 
 export interface AxesLayerProps<D> extends ExtendedLayerProps<D> {
     bounds: [number, number, number, number, number, number];
     labelColor?: Color;
     labelFontSize?: number;
     fontFamily?: string;
     axisColor?: Color;
+    /** If true means that input z values are interpreted as depths.
+     * For example depth of z = 1000 corresponds to -1000 on the z axis. Default false.
+     */
+    isZDepth: boolean;
 }
 
 type TextLayerData = {
@@ -29,22 +34,28 @@ type TextLayerData = {
 
 export default class AxesLayer extends CompositeLayer<AxesLayerProps<unknown>> {
     initializeState(): void {
-        const box_lines = GetBoxLines(this.props.bounds);
+        const bounds = cloneDeep(this.props.bounds);
+        if (this.props.isZDepth) {
+            bounds[2] *= -1;
+            bounds[5] *= -1;
+        }
+
+        const box_lines = GetBoxLines(bounds);
 
         const is_orthographic =
             this.context.viewport.constructor === OrthographicViewport;
 
         const [tick_lines, tick_labels] = GetTickLines(
             is_orthographic,
-            this.props.bounds,
+            bounds,
             this.context.viewport
         );
 
         const textlayerData = maketextLayerData(
             is_orthographic,
             tick_lines,
             tick_labels,
-            this.props.bounds,
+            bounds,
             this.props.labelFontSize
         );
 
@@ -71,19 +82,25 @@ export default class AxesLayer extends CompositeLayer<AxesLayerProps<unknown>> {
         const is_orthographic =
             this.context.viewport.constructor === OrthographicViewport;
 
-        const box_lines = GetBoxLines(this.props.bounds);
+        const bounds = cloneDeep(this.props.bounds);
+        if (this.props.isZDepth) {
+            bounds[2] *= -1;
+            bounds[5] *= -1;
+        }
+
+        const box_lines = GetBoxLines(bounds);
 
         const [tick_lines, tick_labels] = GetTickLines(
             is_orthographic,
-            this.props.bounds,
+            bounds,
             this.context.viewport
         );
 
         const textlayerData = maketextLayerData(
             is_orthographic,
             tick_lines,
             tick_labels,
-            this.props.bounds,
+            bounds,
             this.props.labelFontSize
         );
 
@@ -214,11 +231,12 @@ function maketextLayerData(
     const z_min = bounds[2];
     const z_max = bounds[5];
 
-    const dx = x_max - x_min;
-    const dy = y_max - y_min;
-    const dz = z_max - z_min;
+    const dx = Math.abs(x_max - x_min);
+    const dy = Math.abs(y_max - y_min);
+    const dz = Math.abs(z_max - z_min);
 
     const offset = ((dx + dy + dz) / 3.0) * 0.1;
+
     const data = [
         {
             label: "X",

react/src/lib/components/SubsurfaceViewer/layers/grid3d/grid3dLayer.ts

@@ -36,6 +36,12 @@ function GetBBox(
     return [xmin, ymin, zmin, xmax, ymax, zmax];
 }
 
+function FlipZ(points: number[]): void {
+    for (let i = 0; i < points.length / 3; i++) {
+        points[3 * i + 2] *= -1;
+    }
+}
+
 async function load_data(
     pointsUrl: string,
     polysUrl: string,
@@ -57,38 +63,49 @@ export interface Grid3DLayerProps<D> extends ExtendedLayerProps<D> {
     polysUrl: string;
     propertiesUrl: string;
 
-    // Name of color map. E.g "PORO"
+    /**  Name of color map. E.g "PORO"
+     */
     colorMapName: string;
 
-    // Use color map in this range.
+    /**  Use color map in this range.
+     */
     colorMapRange?: [number, number];
 
-    // Clamp colormap to this color at ends.
-    // Given as array of three values (r,g,b) e.g: [255, 0, 0]
-    // If not set or set to true, it will clamp to color map min and max values.
-    // If set to false the clamp color will be completely transparent.
+    /** Clamp colormap to this color at ends.
+     *   Given as array of three values (r,g,b) e.g: [255, 0, 0]
+     *   If not set or set to true, it will clamp to color map min and max values.
+     *   If set to false the clamp color will be completely transparent.
+     */
     colorMapClampColor: Color | undefined | boolean;
 
-    // Optional function property.
-    // If defined this function will override the color map.
-    // Takes a value in the range [0,1] and returns a color.
-    // E.g. (x) => [x * 255, x * 255, x * 255]
+    /**  Optional function property.
+     * If defined this function will override the color map.
+     * Takes a value in the range [0,1] and returns a color.
+     * E.g. (x) => [x * 255, x * 255, x * 255]
+     */
     colorMapFunction?: colorMapFunctionType | false;
 
-    // Surface material properties.
-    // material: true  = default material, coloring depends on surface orientation and lighting.
-    //           false = no material,  coloring is independent on surface orientation and lighting.
-    //           or full spec:
-    //      material: {
-    //           ambient: 0.35,
-    //           diffuse: 0.6,
-    //           shininess: 32,
-    //           specularColor: [255, 255, 255],
-    //       }
+    /** Surface material properties.
+     * material: true  = default material, coloring depends on surface orientation and lighting.
+     *           false = no material,  coloring is independent on surface orientation and lighting.
+     *           or full spec:
+     *      material: {
+     *           ambient: 0.35,
+     *           diffuse: 0.6,
+     *           shininess: 32,
+     *           specularColor: [255, 255, 255],
+     *       }
+     */
     material: Material;
 
-    // Enable/disable depth testing when rendering layer. Default true.
+    /** Enable/disable depth testing when rendering layer. Default true.
+     */
     depthTest: boolean;
+
+    /** If true means that input z values are interpreted as depths.
+     *   For example depth of z = 1000 corresponds to -1000 on the z axis. Default true.
+     */
+    isZDepth: boolean;
 }
 
 export default class Grid3DLayer extends CompositeLayer<
@@ -102,6 +119,10 @@ export default class Grid3DLayer extends CompositeLayer<
         );
 
         p.then(([points, polys, properties]) => {
+            if (!this.props.isZDepth) {
+                FlipZ(points);
+            }
+
             const bbox = GetBBox(points);
 
             // Using inline web worker for calculating the triangle mesh from

react/src/lib/components/SubsurfaceViewer/layers/layersDefaultProps.ts

@@ -70,14 +70,15 @@ export const layersDefaultProps: Record<string, unknown> = {
         outline: true,
         logRadius: 10,
         logCurves: true,
-        refine: true,
+        refine: false,
         visible: true,
         wellNameVisible: false,
         wellNameAtTop: false,
         wellNameSize: 14,
         wellNameColor: [0, 0, 0, 255],
         selectedWell: "@@#editedData.selectedWells", // used to get data from deckgl layer
         depthTest: true,
+        isZDepth: true,
     },
     FaultPolygonsLayer: {
         "@@type": "FaultPolygonsLayer",
@@ -103,6 +104,7 @@ export const layersDefaultProps: Record<string, unknown> = {
         name: "Axes",
         id: "axes-layer",
         visible: true,
+        isZDepth: false,
     },
     Axes2DLayer: {
         "@@type": "Axes2DLayer",
@@ -157,5 +159,6 @@ export const layersDefaultProps: Record<string, unknown> = {
         colorMapName: "",
         propertyValueRange: [0.0, 1.0],
         depthTest: true,
+        isZDepth: true,
     },
 };