[fix] Fix mapbox/deck syncing issue (#2355)

Signed-off-by: Ihor Dykhta <[email protected]> Co-authored-by: Ilya Boyandin <[email protected]>
keplergl · Oct 5, 2023 · a2fd52c · a2fd52c
1 parent cfee75a
commit a2fd52c
Show file tree

Hide file tree

Showing 15 changed files with 346 additions and 172 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -30,11 +30,7 @@ const config = {
   // node_modules and pnp folders by default so that they are not transpiled
   // Some libraries (even if transitive) are transitioning to ESM and need additional transpilation. Relevant issues:
   // - tiny-sdf: https://github.com/visgl/deck.gl/issues/7735
-  // TODO For some reason transformIgnorePatterns are ignored in combination with TS, using moduleNameMapper instead.
-  // transformIgnorePatterns: ["/node_modules/(?!(@mapbox/tiny-sdf)/)", "\\.pnp\\.[^\\\/]+$"]
-  moduleNameMapper: {
-    '@mapbox/tiny-sdf': `<rootDir>/node_modules/@mapbox/tiny-sdf/index.cjs`
-  }
+  transformIgnorePatterns: ['/node_modules/(?!(.*@mapbox/tiny-sdf.*))', '\\.pnp\\.[^\\/]+$']
 };
 
 module.exports = config;
diff --git a/package.json b/package.json
@@ -182,6 +182,7 @@
     "jest-environment-jsdom": "^29.5.0",
     "jsdom": "^16.4.0",
     "json-loader": "^0.5.4",
+    "mapbox-gl": "1.13.1",
     "nyc": "^15.1.0",
     "prettier": "1.19.1",
     "progress-bar-webpack-plugin": "^2.1.0",

diff --git a/src/components/package.json b/src/components/package.json
@@ -68,7 +68,7 @@
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-lifecycles-compat": "^3.0.1",
-    "@types/react-map-gl": "^6.1.2",
+    "@types/react-map-gl": "^6.1.3",
     "@types/react-modal": "^3.13.1",
     "@types/react-onclickoutside": "^6.7.4",
     "@types/react-redux": "^7.1.23",
@@ -96,7 +96,7 @@
     "lodash.uniq": "^4.0.1",
     "lodash.uniqby": "^4.7.0",
     "mapbox": "^1.0.0-beta10",
-    "mapbox-gl": "^1.0.0",
+    "mapbox-gl": "1.13.1",
     "mjolnir.js": "^2.7.0",
     "moment": "^2.10.6",
     "moment-timezone": "^0.5.35",
@@ -108,7 +108,7 @@
     "react-intl": "^6.3.0",
     "react-json-pretty": "^2.2.0",
     "react-lifecycles-compat": "^3.0.4",
-    "react-map-gl": "^5.0.3",
+    "react-map-gl": "7.0.25",
     "react-markdown": "^5.0.2",
     "react-modal": "^3.12.1",
     "react-onclickoutside": "^6.7.1",

diff --git a/src/components/src/index.ts b/src/components/src/index.ts
@@ -222,6 +222,7 @@ export {default as Checkbox} from './common/checkbox';
 export {default as ColorLegend, LegendRow} from './common/color-legend';
 export {default as LoadingSpinner} from './common/loading-spinner';
 export {default as LoadingDialog} from './modals/loading-dialog';
+export {MapViewStateContext, MapViewStateContextProvider} from './map-view-state-context';
 export {default as FieldTokenFactory} from './common/field-token';
 export {default as Portaled} from './common/portaled';
 export {default as ProgressBar} from './common/progress-bar';

diff --git a/src/components/src/kepler-gl.tsx b/src/components/src/kepler-gl.tsx
@@ -151,7 +151,7 @@ export const isViewportDisjointed = props => {
   );
 };
 
-export const mapStateSelector = (props, index) => {
+export const mapStateSelector = (props: any, index: number): any => {
   if (!Number.isFinite(index)) {
     // either no index arg or an invalid index was provided
     // it is expected to be either 0 or 1 when in split mode
@@ -655,7 +655,9 @@ function KeplerGlFactory(
                     modifiers={DND_EMPTY_MODIFIERS}
                   >
                     {!uiState.readOnly && !readOnly && <SidePanel {...sideFields} />}
-                    <MapsLayout className="maps">{mapContainers}</MapsLayout>
+                    <MapsLayout className="maps" mapState={this.props.mapState}>
+                      {mapContainers}
+                    </MapsLayout>
                     {isSplit && (
                       <DragOverlay modifiers={DRAGOVERLAY_MODIFIERS} dropAnimation={null}>
                         {activeLayer !== undefined ? (