feat: replace StaticMap By Maplibre (#308)

* feat: replace StaticMap By Maplibre * fixed inspection's comments * fixed lint issues * fixed unit test issues * fixed unit test errors * fixed unit test per pull 310 * removed duplicated code in test
visgl · Nov 6, 2023 · c6908b5 · c6908b5
1 parent 5b90e30
commit c6908b5
Show file tree

Hide file tree

Showing 19 changed files with 858 additions and 684 deletions.
diff --git a/package.json b/package.json
@@ -20,6 +20,12 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@deck.gl/core": "^8.9.32",
+    "@deck.gl/extensions": "^8.9.32",
+    "@deck.gl/geo-layers": "^8.9.32",
+    "@deck.gl/layers": "^8.9.32",
+    "@deck.gl/mesh-layers": "^8.9.32",
+    "@deck.gl/react": "^8.9.32",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.17",
@@ -29,18 +35,18 @@
     "@loaders.gl/i3s": "^4.0.0-beta.2",
     "@loaders.gl/loader-utils": "^4.0.0-beta.2",
     "@loaders.gl/tiles": "^4.0.0-beta.2",
-    "@luma.gl/core": "^8.5.14",
     "@math.gl/proj4": "^3.6.3",
     "@probe.gl/stats": "^4.0.4",
     "@reduxjs/toolkit": "^1.9.5",
-    "deck.gl": "^8.8.3",
+    "apache-arrow": "^13.0.0",
     "html2canvas": "^1.4.1",
+    "maplibre-gl": "^3.5.2",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
-    "react-map-gl": "^5.0.0",
+    "react-map-gl": "^7.1.6",
     "react-redux": "^8.1.1",
     "react-responsive": "^9.0.0-beta.8",
     "react-router-dom": "^6.2.1",

diff --git a/src/components/attributes-panel/attributes-stats/attribute-stats.spec.tsx b/src/components/attributes-panel/attributes-stats/attribute-stats.spec.tsx
@@ -9,7 +9,11 @@ import { setupStore } from "../../../redux/store";
 import { setColorsByAttrubute } from "../../../redux/slices/colors-by-attribute-slice";
 
 jest.mock("@loaders.gl/core");
-
+jest.mock("@loaders.gl/i3s", () => {
+  return jest.fn().mockImplementation(() => {
+    return null;
+  });
+});
 jest.mock("../histogram", () => ({
   HistogramChart: jest.fn().mockImplementation(() => <div>HistogramChart</div>),
 }));

diff --git a/src/components/comparison/comparison-side/comparison-side.spec.tsx b/src/components/comparison/comparison-side/comparison-side.spec.tsx
@@ -18,7 +18,36 @@ import { MemoryUsagePanel } from "../../memory-usage-panel/memory-usage-panel";
 import { setupStore } from "../../../redux/store";
 import { setDragMode } from "../../../redux/slices/drag-mode-slice";
 
-jest.mock("@loaders.gl/core");
+jest.mock("react-map-gl/maplibre", () => {
+  return jest.fn().mockImplementation(() => {
+    return null;
+  });
+});
+jest.mock("@loaders.gl/core", () => {
+  return {
+    load: jest.fn(),
+  };
+});
+jest.mock("@loaders.gl/i3s", () => {
+  return jest.fn().mockImplementation(() => {
+    return null;
+  });
+});
+jest.mock("@loaders.gl/3d-tiles", () => {
+  return jest.fn().mockImplementation(() => {
+    return null;
+  });
+});
+jest.mock("@deck.gl/layers", () => {
+  return jest.fn().mockImplementation(() => {
+    return null;
+  });
+});
+jest.mock("@deck.gl/geo-layers", () => {
+  return jest.fn().mockImplementation(() => {
+    return null;
+  });
+});
 jest.mock("../../deck-gl-wrapper/deck-gl-wrapper");
 jest.mock("../../main-tools-panel/main-tools-panel");
 jest.mock("../../layers-panel/layers-panel");

diff --git a/src/components/debug-panel/debug-panel.spec.tsx b/src/components/debug-panel/debug-panel.spec.tsx
@@ -16,6 +16,11 @@ import {
   selectBoundingVolumeType,
 } from "../../redux/slices/debug-options-slice";
 
+jest.mock("@loaders.gl/i3s", () => {
+  return jest.fn().mockImplementation(() => {
+    return null;
+  });
+});
 jest.mock("../../utils/hooks/layout");
 jest.mock("../close-button/close-button", () => ({
   CloseButton: ({ onClick }) => {

diff --git a/src/components/deck-gl-wrapper/deck-gl-wrapper.spec.tsx b/src/components/deck-gl-wrapper/deck-gl-wrapper.spec.tsx
@@ -11,17 +11,45 @@ import {
 
 // Mocks
 jest.mock("@loaders.gl/core");
+jest.mock("@loaders.gl/i3s", () => {
+  return {
+    COORDINATE_SYSTEM: {
+      METER_OFFSETS: 2,
+      LNGLAT_OFFSETS: 3,
+    },
+  };
+});
+jest.mock("@loaders.gl/3d-tiles", () => {
+  return jest.fn().mockImplementation(() => {
+    return null;
+  });
+});
 jest.mock("@loaders.gl/images");
 jest.mock("@loaders.gl/tiles");
 jest.mock("@deck.gl/react", () => {
   return jest.fn().mockImplementation(() => {
     return null;
   });
 });
+jest.mock("react-map-gl/maplibre", () => {
+  return {
+    Map: jest.fn().mockImplementation(() => <div></div>),
+  };
+});
 jest.mock("@deck.gl/core");
-jest.mock("@deck.gl/layers");
-jest.mock("@deck.gl/geo-layers");
-jest.mock("react-map-gl");
+jest.mock("@deck.gl/layers", () => {
+  return {
+    LineLayer: jest.fn(),
+    ScatterplotLayer: jest.fn(),
+  };
+});
+
+jest.mock("@deck.gl/geo-layers", () => {
+  return {
+    Tile3DLayer: jest.fn(),
+    TerrainLayer: jest.fn(),
+  };
+});
 jest.mock("../../utils/debug/build-minimap-data");
 jest.mock("../../utils/debug/texture-selector-utils");
 jest.mock("../../utils/debug/frustum-utils");
@@ -61,7 +89,7 @@ import { setupStore } from "../../redux/store";
 import { setColorsByAttrubute } from "../../redux/slices/colors-by-attribute-slice";
 import { setDragMode } from "../../redux/slices/drag-mode-slice";
 import { setDebugOptions } from "../../redux/slices/debug-options-slice";
-import { addBaseMap } from "../../redux/slices/base-maps-slice"
+import { addBaseMap } from "../../redux/slices/base-maps-slice";
 
 const simpleCallbackMock = jest.fn().mockImplementation(() => {
   /* Do Nothing */
@@ -336,7 +364,11 @@ describe("Deck.gl I3S map component", () => {
 
     it("Should render pickable with auto highlighting", () => {
       const store = setupStore();
-      callRender(renderWithProvider, { pickable: true, autoHighlight: true }, store);
+      callRender(
+        renderWithProvider,
+        { pickable: true, autoHighlight: true },
+        store
+      );
       const { pickable, autoHighlight } = Tile3DLayer.mock.lastCall[0];
       expect(pickable).toBe(true);
       expect(autoHighlight).toBe(true);
@@ -509,8 +541,7 @@ describe("Deck.gl I3S map component", () => {
 
   describe("Render TerrainLayer", () => {
     const store = setupStore();
-    store.dispatch(
-      addBaseMap({ id: "Terrain", mapUrl: "", name: "Terrain" }));
+    store.dispatch(addBaseMap({ id: "Terrain", mapUrl: "", name: "Terrain" }));
     it("Should render terrain", () => {
       callRender(renderWithProvider, undefined, store);
       expect(TerrainLayer).toHaveBeenCalled();
@@ -519,7 +550,8 @@ describe("Deck.gl I3S map component", () => {
     it("Should call onTerrainTileLoad", () => {
       const store = setupStore();
       store.dispatch(
-        addBaseMap({ id: "Terrain", mapUrl: "", name: "Terrain" }));
+        addBaseMap({ id: "Terrain", mapUrl: "", name: "Terrain" })
+      );
       const { rerender } = callRender(renderWithProvider, undefined, store);
       const { onTileLoad } = TerrainLayer.mock.lastCall[0];
       const terrainTile = {

diff --git a/src/components/deck-gl-wrapper/deck-gl-wrapper.tsx b/src/components/deck-gl-wrapper/deck-gl-wrapper.tsx
@@ -1,3 +1,4 @@
+import { Map as MaplibreMap } from "react-map-gl/maplibre";
 import DeckGL from "@deck.gl/react";
 import { LineLayer, ScatterplotLayer } from "@deck.gl/layers";
 import { TerrainLayer, Tile3DLayer } from "@deck.gl/geo-layers";
@@ -14,7 +15,6 @@ import {
   View,
 } from "@deck.gl/core";
 import { useEffect, useMemo, useState, useRef } from "react";
-import { StaticMap } from "react-map-gl";
 import { CONTRAST_MAP_STYLES } from "../../constants/map-styles";
 import {
   NormalsDebugData,
@@ -58,7 +58,10 @@ import {
   selectBoundingVolumeColorMode,
   selectBoundingVolumeType,
 } from "../../redux/slices/debug-options-slice";
-import { selectBaseMaps, selectSelectedBaseMapId } from "../../redux/slices/base-maps-slice";
+import {
+  selectBaseMaps,
+  selectSelectedBaseMapId,
+} from "../../redux/slices/base-maps-slice";
 
 const TRANSITION_DURAITON = 4000;
 const INITIAL_VIEW_STATE = {
@@ -212,8 +215,8 @@ export const DeckGlWrapper = ({
   const baseMaps = useAppSelector(selectBaseMaps);
   const selectedBaseMapId = useAppSelector(selectSelectedBaseMapId);
   const selectedBaseMap = baseMaps.find((map) => map.id === selectedBaseMapId);
-  const showTerrain=selectedBaseMap?.id === "Terrain";
-  const mapStyle=selectedBaseMap?.mapUrl;
+  const showTerrain = selectedBaseMap?.id === "Terrain";
+  const mapStyle = selectedBaseMap?.mapUrl;
   const VIEWS = useMemo(
     () => [
       new MapView({
@@ -761,21 +764,11 @@ export const DeckGlWrapper = ({
         currentViewport = viewport;
       }}
       {!showTerrain && (
-        <StaticMap
-          reuseMaps
-          mapStyle={mapStyle}
-          preventStyleDiffing
-          preserveDrawingBuffer
-        />
+        <MaplibreMap mapStyle={mapStyle} terrain={undefined}></MaplibreMap>
       )}
       {mapStyle && (
         <View id="minimap">
-          <StaticMap
-            reuseMaps
-            mapStyle={CONTRAST_MAP_STYLES[mapStyle]}
-            preventStyleDiffing
-            preserveDrawingBuffer
-          />
+          <MaplibreMap mapStyle={CONTRAST_MAP_STYLES[mapStyle]}></MaplibreMap>
         </View>
       )}
     </DeckGL>

diff --git a/src/components/layers-panel/layers-panel.spec.tsx b/src/components/layers-panel/layers-panel.spec.tsx
@@ -12,14 +12,11 @@ import { LayerSettingsPanel } from "./layer-settings-panel";
 import { load } from "@loaders.gl/core";
 import { PageId } from "../../types";
 import { setupStore } from "../../redux/store";
-import {
-  selectSelectedBaseMapId,
-} from "../../redux/slices/base-maps-slice";
+import { selectSelectedBaseMapId } from "../../redux/slices/base-maps-slice";
 
 jest.mock("@loaders.gl/core", () => ({
   load: jest.fn(),
 }));
-
 jest.mock("@loaders.gl/i3s", () => ({
   ArcGisWebSceneLoader: jest.fn(),
 }));
@@ -277,7 +274,7 @@ describe("Layers Panel", () => {
     });
 
     const state = store.getState();
-    const baseMapId =   selectSelectedBaseMapId(state);
+    const baseMapId = selectSelectedBaseMapId(state);
     expect(baseMapId).toEqual("https://test-base-map.url");
   });
 

diff --git a/src/components/layers-panel/map-options-panel.spec.tsx b/src/components/layers-panel/map-options-panel.spec.tsx
@@ -14,6 +14,11 @@ import {
   selectSelectedBaseMapId,
 } from "../../redux/slices/base-maps-slice";
 
+jest.mock("@loaders.gl/i3s", () => {
+  return jest.fn().mockImplementation(() => {
+    return null;
+  });
+});
 jest.mock("./base-map-list-item/base-map-list-item");
 jest.mock("../plus-button/plus-button");
 jest.mock("./delete-confirmation");

diff --git a/src/components/map-control-panel/map-control-panel.spec.tsx b/src/components/map-control-panel/map-control-panel.spec.tsx
@@ -5,6 +5,12 @@ import { MapControllPanel } from "./map-control-panel";
 import { setupStore } from "../../redux/store";
 import { setDragMode } from "../../redux/slices/drag-mode-slice";
 
+jest.mock("@loaders.gl/i3s", () => {
+  return jest.fn().mockImplementation(() => {
+    return null;
+  });
+});
+
 describe("MapControllPanel", () => {
   let componentElement;
   let buttons;

diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx
@@ -1,5 +1,5 @@
+import { Map as MaplibreMap } from "react-map-gl/maplibre";
 import { useState, useCallback } from "react";
-import { StaticMap } from "react-map-gl";
 import DeckGL from "@deck.gl/react";
 import { Tile3DLayer } from "@deck.gl/geo-layers";
 import { I3SLoader } from "@loaders.gl/i3s";
@@ -149,7 +149,7 @@ const Title = styled.div<LayoutProps>`
     desktop: "73px",
     tablet: "73px",
     mobile: "45px",
-  })};  
+  })};
 `;
 
 const GreenText = styled.span`
@@ -179,7 +179,7 @@ const IphoneImage = styled.img`
   left: 1670px;
   z-index: 4;
   width: 198px;
- 
+
   @media (max-width: 1670px) {
     left: calc(100% - 184px);
   }
@@ -310,7 +310,7 @@ export const Dashboard = () => {
 
   return (
     <DashboardContainer id="dashboard-container" layout={layout}>
-      <DeckWithTitleWrapper  layout={layout}>
+      <DeckWithTitleWrapper layout={layout}>
         <Title id="dashboard-title" layout={layout}>
           Explore and Debug I3S Data with one
           <GreenText id="green-text"> Simple and Easy-to-Use Tool</GreenText>
@@ -322,7 +322,7 @@ export const Dashboard = () => {
           layers={[tile3DLayer]}
           initialViewState={viewState}
         >
-          <StaticMap mapStyle={DEFAULT_MAP_STYLE} />
+          <MaplibreMap mapStyle={DEFAULT_MAP_STYLE}></MaplibreMap>
         </DeckGL>
       </DeckWithTitleWrapper>
       <Wrapper id="tools-wrapper" layout={layout}>
@@ -333,17 +333,13 @@ export const Dashboard = () => {
             src={AppShowcase}
           />
         )}
-        {layout === Layout.Desktop &&
-          (
-            <>
-              <MacImage id="mac-image" src={Mac} />
-              <IphoneImage id="iphone-image" src={Iphone} />
-            </>
-          )}
-        <ToolsContainer
-          id="tools-description-container"
-          layout={layout}
-        >
+        {layout === Layout.Desktop && (
+          <>
+            <MacImage id="mac-image" src={Mac} />
+            <IphoneImage id="iphone-image" src={Iphone} />
+          </>
+        )}
+        <ToolsContainer id="tools-description-container" layout={layout}>
           <ToolsItem id="tools-item-viewer" layout={layout}>
             <ViewerImage />
             <ToolItemDescription layout={layout}>

diff --git a/src/redux/slices/attribute-stats-map-slice.spec.ts b/src/redux/slices/attribute-stats-map-slice.spec.ts
@@ -4,9 +4,13 @@ import {
   getAttributeStatsInfo,
   selectStatisitcsMap,
 } from "./attribute-stats-map-slice";
-import { StatsInfo } from "@loaders.gl/i3s";
 
 jest.mock("@loaders.gl/core");
+jest.mock("@loaders.gl/i3s", () => {
+  return jest.fn().mockImplementation(() => {
+    return null;
+  });
+});
 
 describe("slice: attribute-stats-map", () => {
   it("Selector should return the initial state", () => {
@@ -54,7 +58,7 @@ describe("slice: attribute-stats-map", () => {
   });
 });
 
-const stats: StatsInfo = {
+const stats = {
   avg: 27.159085097827166,
   max: 1408.377901,
   min: 0,