Merge branch 'master' into BugFix

equinor · May 30, 2022 · f162517 · f162517
2 parents b6e0cd1 + c1f65d6
commit f162517
Show file tree

Hide file tree

Showing 23 changed files with 9,500 additions and 8,790 deletions.
diff --git a/.github/workflows/webviz-subsurface-components.yml b/.github/workflows/webviz-subsurface-components.yml
@@ -49,6 +49,15 @@ jobs:
       - name: 📦 Install build dependencies
         # The deckgl types package runs a postscript to setup, but since we ignore scripts, we need to set it up manually.
         run: |
+
+          # In https://github.com/equinor/webviz-subsurface-components/pull/1010 we
+          # loosened up npm constraint to include npm version using lockfileVersion: 1
+          # for downstream users. However in the development of this repository we
+          # want to limit ourselves to lockfileVersion: 2. 
+          # While waiting for dropping node 14 and npm 6 support, we include this manual
+          # check:
+          grep -q '"lockfileVersion": 2,' ./react/package-lock.json
+
           npm ci --ignore-scripts --prefix ./react
           npm run setup-deckgl-types --prefix ./react
           npm run copy-package-json --prefix ./react

diff --git a/react/jest.config.js b/react/jest.config.js
@@ -4,7 +4,7 @@
  */
 module.exports = {
     moduleNameMapper: {
-        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|scss)$":
             "<rootDir>/__mocks__/fileMock.js",
         "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js",
     },

diff --git a/react/package-lock.json b/react/package-lock.json
diff --git a/react/package.json b/react/package.json
@@ -174,7 +174,7 @@
         "webpack-dev-server": "^3.11.2"
     },
     "engines": {
-        "node": ">=16",
-        "npm": ">=7"
+        "node": ">=14.17",
+        "npm": ">=6.14"
     }
 }
diff --git a/react/src/demo/example-data/deckgl-map.json b/react/src/demo/example-data/deckgl-map.json
@@ -10,17 +10,17 @@
       "visible": true,
       "incrementValue": 100,
       "widthPerUnit": 100,
-      "position": [
-        10,
-        10
-      ]
+      "cssStyle": {
+        "left": 10,
+        "top": 10
+      }
     },
     "legend": {
       "visible": true,
-      "position": [
-        80,
-        10
-      ],
+      "cssStyle": {
+        "right": 10,
+        "top": 10
+      },
       "horizontal": false
     },
     "toolbar": {

diff --git a/react/src/lib/components/DeckGLMap/DeckGLMap.tsx b/react/src/lib/components/DeckGLMap/DeckGLMap.tsx
@@ -23,15 +23,15 @@ export interface DeckGLMapProps {
         visible?: boolean | null;
         incrementValue?: number | null;
         widthPerUnit?: number | null;
-        position?: number[] | null;
+        cssStyle?: Record<string, unknown> | null;
     };
     coordinateUnit?: string;
     toolbar?: {
         visible?: boolean | null;
     };
     legend?: {
         visible?: boolean | null;
-        position?: number[] | null;
+        cssStyle?: Record<string, unknown> | null;
         horizontal?: boolean | null;
     };
     colorTables?: colorTablesArray;
@@ -245,9 +245,9 @@ DeckGLMap.propTypes = {
          */
         widthPerUnit: PropTypes.number,
         /**
-         * Scale bar position in pixels.
+         * Scale bar css style can be used for positioning.
          */
-        position: PropTypes.arrayOf(PropTypes.number.isRequired),
+        cssStyle: PropTypes.objectOf(PropTypes.any),
     }),
 
     /**
@@ -275,9 +275,9 @@ DeckGLMap.propTypes = {
          */
         visible: PropTypes.bool,
         /**
-         * Legend position in pixels.
+         * Legend css style can be used for positioning.
          */
-        position: PropTypes.arrayOf(PropTypes.number.isRequired),
+        cssStyle: PropTypes.objectOf(PropTypes.any),
         /**
          * Orientation of color legend
          */

diff --git a/react/src/lib/components/DeckGLMap/__snapshots__/DeckGLMap.test.tsx.snap b/react/src/lib/components/DeckGLMap/__snapshots__/DeckGLMap.test.tsx.snap
@@ -18,17 +18,6 @@ exports[`Test Map component snapshot test 1`] = `
       style="left: 0px; top: 0px; width: 100%; position: absolute; height: 100%;"
     />
   </div>
-  <div
-    style="bottom: 10px; left: 10px; position: relative;"
-  >
-    <label>
-      100
-    </label>
-    m
-    <div
-      style="width: 99.27470534904805px; height: 4px; border: 2px solid gray; display: inline-block; margin-left: 3px; margin-right: 3px; right: 0px; bottom: 0px;"
-    />
-  </div>
   <div>
     <svg
       aria-valuemax="100"
@@ -88,17 +77,6 @@ exports[`Test Map component snapshot test with edited data 1`] = `
       style="left: 0px; top: 0px; width: 100%; position: absolute; height: 100%;"
     />
   </div>
-  <div
-    style="bottom: 10px; left: 10px; position: relative;"
-  >
-    <label>
-      100
-    </label>
-    m
-    <div
-      style="width: 99.27470534904805px; height: 4px; border: 2px solid gray; display: inline-block; margin-left: 3px; margin-right: 3px; right: 0px; bottom: 0px;"
-    />
-  </div>
   <div>
     <svg
       aria-valuemax="100"

diff --git a/react/src/lib/components/DeckGLMap/components/ColorLegend.tsx b/react/src/lib/components/DeckGLMap/components/ColorLegend.tsx
@@ -7,15 +7,16 @@ import {
 import { colorTablesArray } from "@emerson-eps/color-tables/";
 
 interface ColorLegendProps {
-    position?: number[] | null;
+    // Pass additional css style to the parent color legend container
+    cssStyle?: Record<string, unknown> | null;
     horizontal?: boolean | null;
     layers: Layer<unknown>[];
     colorTables: colorTablesArray;
 }
 
 // Todo: Adapt it for other layers too
 const ColorLegend: React.FC<ColorLegendProps> = ({
-    position,
+    cssStyle,
     horizontal,
     layers,
 }: ColorLegendProps) => {
@@ -87,9 +88,8 @@ const ColorLegend: React.FC<ColorLegendProps> = ({
             style={{
                 position: "absolute",
                 display: "flex",
-                right: position ? position[0] : " ",
-                top: position ? position[1] : " ",
                 zIndex: 999,
+                ...cssStyle,
             }}
         >
             {legendProps.map(
@@ -101,7 +101,6 @@ const ColorLegend: React.FC<ColorLegendProps> = ({
                                     discreteData={legend.metadata}
                                     dataObjectName={legend.title}
                                     colorName={legend.colorName}
-                                    position={position}
                                     horizontal={horizontal}
                                 />
                             )}
@@ -111,7 +110,6 @@ const ColorLegend: React.FC<ColorLegendProps> = ({
                                     max={legend.valueRange[1]}
                                     dataObjectName={legend.title}
                                     colorName={legend.colorName}
-                                    position={position}
                                     horizontal={horizontal}
                                 />
                             )}
@@ -123,7 +121,6 @@ const ColorLegend: React.FC<ColorLegendProps> = ({
 };
 
 ColorLegend.defaultProps = {
-    position: [5, 10],
     horizontal: false,
 };
 

diff --git a/react/src/lib/components/DeckGLMap/components/DistanceScale.test.tsx b/react/src/lib/components/DeckGLMap/components/DistanceScale.test.tsx
@@ -15,7 +15,7 @@ describe("Test Color Legend", () => {
                 zoom={0}
                 incrementValue={0}
                 widthPerUnit={0}
-                position={[0, 0]}
+                cssStyle={{ top: 0, left: 0 }}
                 scaleUnit="m"
             />
         );
@@ -27,7 +27,7 @@ describe("Test Color Legend", () => {
                 zoom={1}
                 incrementValue={100}
                 widthPerUnit={100}
-                position={[10, 10]}
+                cssStyle={{ top: 10, left: 10 }}
                 scaleUnit="m"
             />
         );

diff --git a/react/src/lib/components/DeckGLMap/components/DistanceScale.tsx b/react/src/lib/components/DeckGLMap/components/DistanceScale.tsx
@@ -9,8 +9,8 @@ interface scaleProps {
     incrementValue?: number | null;
     // Scale bar width in pixels per unit value
     widthPerUnit?: number | null;
-    // positioning the scale ruler based on x and y values
-    position?: number[] | null;
+    // additional css style to position the component
+    cssStyle?: Record<string, unknown> | null;
     // default unit for the scale ruler
     scaleUnit?: string;
 }
@@ -23,10 +23,10 @@ const DistanceScale: React.FC<scaleProps> = ({
     zoom,
     incrementValue,
     widthPerUnit,
-    position,
+    cssStyle,
     scaleUnit,
 }: scaleProps) => {
-    if (!zoom || !widthPerUnit || !incrementValue || !position) return null;
+    if (!zoom || !widthPerUnit || !incrementValue) return null;
 
     const [rulerWidth, setRulerWidth] = React.useState<number>(0);
     const widthInUnits = widthPerUnit / Math.pow(2, zoom);
@@ -37,9 +37,6 @@ const DistanceScale: React.FC<scaleProps> = ({
         borderTop: "none",
         display: "inline-block",
         marginLeft: "3px",
-        marginRight: "3px",
-        right: 0,
-        bottom: 0,
     };
 
     const scaleValue =
@@ -57,13 +54,14 @@ const DistanceScale: React.FC<scaleProps> = ({
     return (
         <div
             style={{
-                bottom: position[0],
-                left: position[1],
-                position: "relative",
+                position: "absolute",
+                ...cssStyle,
             }}
         >
-            <label>{convertedValue.toFixed(0)}</label>
-            {convertedUnit}
+            <label>
+                {convertedValue.toFixed(0)}
+                {convertedUnit}
+            </label>
             <div style={scaleRulerStyle}></div>
         </div>
     );
@@ -73,7 +71,6 @@ DistanceScale.defaultProps = {
     zoom: -3,
     incrementValue: 100,
     widthPerUnit: 100,
-    position: [10, 10],
     scaleUnit: "m",
 };
 

diff --git a/react/src/lib/components/DeckGLMap/components/InfoCard.tsx b/react/src/lib/components/DeckGLMap/components/InfoCard.tsx
@@ -55,6 +55,9 @@ const useStyles = makeStyles({
             borderRadius: "5px",
             position: "absolute",
             bottom: 0,
+            left: 0,
+            marginLeft: "3px",
+            marginBottom: "3px",
         },
     },
     icon_style: {

diff --git a/react/src/lib/components/DeckGLMap/components/Map.tsx b/react/src/lib/components/DeckGLMap/components/Map.tsx
@@ -145,7 +145,7 @@ export interface MapProps {
         visible?: boolean | null;
         incrementValue?: number | null;
         widthPerUnit?: number | null;
-        position?: number[] | null;
+        cssStyle?: Record<string, unknown> | null;
     };
 
     coordinateUnit?: string;
@@ -159,7 +159,7 @@ export interface MapProps {
 
     legend?: {
         visible?: boolean | null;
-        position?: number[] | null;
+        cssStyle?: Record<string, unknown> | null;
         horizontal?: boolean | null;
     };
 
@@ -236,10 +236,16 @@ const Map: React.FC<MapProps> = ({
         setViewState({ ...viewState, zoom: vs.zoom });
     }, [zoom]);
 
+    // react on bounds prop change
+    useEffect(() => {
+        const vs = getViewState(bounds, zoom, deckRef.current?.deck);
+        setViewState({ ...viewState, target: vs.target });
+    }, [bounds]);
+
     // calculate view state on deckgl context load (based on viewport size)
     const onLoad = useCallback(() => {
         setViewState(getViewState(bounds, zoom, deckRef.current?.deck));
-    }, []);
+    }, [bounds, zoom]);
 
     // state for views prop of DeckGL component
     const [viewsProps, setViewsProps] = useState<ViewProps[]>([]);
@@ -372,7 +378,7 @@ const Map: React.FC<MapProps> = ({
     // validate layers data
     const [errorText, setErrorText] = useState<string>();
     useEffect(() => {
-        const layers = deckRef.current?.deck.props.layers;
+        const layers = deckRef.current?.deck.props.layers as Layer<unknown>[];
         // this ensures to validate the schemas only once
         if (checkDatafileSchema && layers && isLoaded) {
             try {
@@ -465,11 +471,13 @@ const Map: React.FC<MapProps> = ({
                                     {...legend}
                                     layers={[
                                         getLayersByType(
-                                            deckRef.current?.deck.props.layers,
+                                            deckRef.current?.deck.props
+                                                .layers as Layer<unknown>[],
                                             "WellsLayer"
                                         )?.[0],
                                         getLayersByType(
-                                            deckRef.current?.deck.props.layers,
+                                            deckRef.current?.deck.props
+                                                .layers as Layer<unknown>[],
                                             "ColormapLayer"
                                         )?.[0],
                                     ]}
@@ -497,10 +505,8 @@ const Map: React.FC<MapProps> = ({
 
             {scale?.visible ? (
                 <DistanceScale
+                    {...scale}
                     zoom={viewState?.zoom}
-                    incrementValue={scale.incrementValue}
-                    widthPerUnit={scale.widthPerUnit}
-                    position={scale.position}
                     scaleUnit={coordinateUnit}
                 />
             ) : null}
@@ -534,14 +540,14 @@ Map.defaultProps = {
         visible: true,
         incrementValue: 100,
         widthPerUnit: 100,
-        position: [10, 10],
+        cssStyle: { top: 10, left: 10 },
     },
     toolbar: {
         visible: false,
     },
     legend: {
         visible: true,
-        position: [5, 10],
+        cssStyle: { top: 5, right: 10 },
         horizontal: false,
     },
     coordinateUnit: "m",
@@ -596,8 +602,7 @@ function getViewState(
         height = deck.height;
     }
 
-    const padding = 20;
-    const fitted_bound = fitBounds({ width, height, bounds, padding });
+    const fitted_bound = fitBounds({ width, height, bounds });
     const view_state: ViewStateType = {
         target: [fitted_bound.x, fitted_bound.y, 0],
         zoom: zoom ?? fitted_bound.zoom,

diff --git a/react/src/lib/components/DeckGLMap/components/__snapshots__/ColorLegend.test.tsx.snap b/react/src/lib/components/DeckGLMap/components/__snapshots__/ColorLegend.test.tsx.snap
@@ -2,6 +2,6 @@
 
 exports[`Test Color Legend snapshot test 1`] = `
 <div
-  style="position: absolute; display: flex; right: 5px; top: 10px; z-index: 999;"
+  style="position: absolute; display: flex; z-index: 999;"
 />
 `;