feat: map refactoring (#1837)

Refactor Map component to remove numerous useEffect

Main motivation is to fix wrong view state computed when first rendering
is done with hidden flag.
First reproduced by application with tabbed layout where all the tabs
are rendered using hidden flag.
This use case has been added to the storybook to demonstrate the issue,
along with a 'triggerHome' control (in a previous PR).

The current PR brings:
- onResize() function to handle resizing
- use a React reducer to handle Z scaling
  Add support for PageUp/PageDown and Shift modifier
- use a React reducer to compute the global 3D bounding box from the
reportBoundingBox callback of the layers
- introduce a ViewController class to generate the DeckGL views and
viewState
This brings all the computations in one place/one step by providing
state change allowing to fine-tune the computations
- use bounding box from the 'cameraPosition' (if set as zoom field)
instead of the data bounding box

Fixes:
- initial viewState is correct, even when rendered with 'hidden' flag
set to true
- triggerHome now respects current zScale

In the end, the final implementation drops down to 6 React useEffect,
from the 16 initial ones !



Fix for #1820

typescript/packages/subsurface-viewer/package.json

@@ -16,6 +16,7 @@
         "test": "jest --coverage",
         "test:update": "npm test -- --u",
         "test:watch": "npm test -- --watch",
+        "test:debug": "node --inspect-brk ../../node_modules/jest/bin/jest.js --coverage=false --runInBand",
         "doc": "git clean -xdff docs && typedoc src"
     },
     "author": "Equinor <[email protected]>",

typescript/packages/subsurface-viewer/src/__snapshots__/SubsurfaceViewer.test.tsx.snap

@@ -31,6 +31,19 @@ exports[`Test Map component snapshot test 1`] = `
       style="left: 0px; top: 0px; width: 100%; position: absolute; height: 100%;"
     />
   </div>
+  <div
+    style="position: absolute; left: 10px; top: 10px;"
+  >
+    <label
+      style="left: 10px; top: 10px;"
+    >
+      3
+      km
+    </label>
+    <div
+      style="width: 100px; height: 4px; border: 2px solid; display: inline-block; margin-left: 3px;"
+    />
+  </div>
   <div>
     <svg
       aria-valuemax="100"
@@ -108,6 +121,19 @@ exports[`Test Map component snapshot test with edited data 1`] = `
       style="left: 0px; top: 0px; width: 100%; position: absolute; height: 100%;"
     />
   </div>
+  <div
+    style="position: absolute; left: 10px; top: 10px;"
+  >
+    <label
+      style="left: 10px; top: 10px;"
+    >
+      3
+      km
+    </label>
+    <div
+      style="width: 100px; height: 4px; border: 2px solid; display: inline-block; margin-left: 3px;"
+    />
+  </div>
   <div>
     <svg
       aria-valuemax="100"
@@ -185,6 +211,19 @@ exports[`Test Map component snapshot test with invalid array length 1`] = `
       style="left: 0px; top: 0px; width: 100%; position: absolute; height: 100%;"
     />
   </div>
+  <div
+    style="position: absolute; left: 10px; top: 10px;"
+  >
+    <label
+      style="left: 10px; top: 10px;"
+    >
+      3
+      km
+    </label>
+    <div
+      style="width: 100px; height: 4px; border: 2px solid; display: inline-block; margin-left: 3px;"
+    />
+  </div>
   <div>
     <svg
       aria-valuemax="100"

typescript/packages/subsurface-viewer/src/components/Map.test.tsx

@@ -8,6 +8,7 @@ import type { LayersList } from "@deck.gl/core/typed";
 import Map from "./Map";
 import { EmptyWrapper } from "../test/TestWrapper";
 import { colorTables } from "@emerson-eps/color-tables";
+import type { colorTablesArray } from "@emerson-eps/color-tables/";
 import {
     ColormapLayer,
     DrawingLayer,
@@ -21,7 +22,7 @@ import {
 
 import mapData from "../../../../../example-data/deckgl-map.json";
 import type { Unit } from "convert-units";
-const colorTablesData = colorTables;
+const colorTablesData = colorTables as colorTablesArray;
 const testBounds = [432205, 6475078, 437720, 6481113] as [
     number,
     number,