From d0a86587fa42f86baab80d0f475bac476cc9615d Mon Sep 17 00:00:00 2001
From: Igor Dykhta <igorDykhta@users.noreply.github.com>
Date: Tue, 10 Oct 2023 21:15:16 +0300
Subject: [PATCH] [chore] Avoid confusion in viewstate context (#2361)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
Co-authored-by: Ilya Boyandin <ilya@boyandin.me>
---
 src/components/src/map-container.tsx          | 6 ++++--
 src/components/src/map-view-state-context.tsx | 3 ++-
 src/reducers/src/index.ts                     | 2 +-
 src/reducers/src/map-state-updaters.ts        | 8 ++++----
 4 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/src/map-container.tsx b/src/components/src/map-container.tsx
index 2cf04e7b0f..fcbcbb3929 100644
--- a/src/components/src/map-container.tsx
+++ b/src/components/src/map-container.tsx
@@ -695,6 +695,7 @@ export default function MapContainerFactory(
       const {
         mapStyle,
         visState,
+        mapState,
         visStateActions,
         mapboxApiAccessToken,
         mapboxApiUrl,
@@ -716,7 +717,8 @@ export default function MapContainerFactory(
       const isEditorDrawingMode = EditorLayerUtils.isDrawingActive(editorMenuActive, editor.mode);
 
       const internalViewState = this.context?.getInternalViewState(index);
-      const viewport = getViewportFromMapState(internalViewState);
+      const internalMapState = {...mapState, ...internalViewState};
+      const viewport = getViewportFromMapState(internalMapState);
 
       const editorFeatureSelectedIndex = this.selectedPolygonIndexSelector(this.props);
 
@@ -726,7 +728,7 @@ export default function MapContainerFactory(
       const deckGlLayers = generateDeckGLLayersMethod(
         {
           visState,
-          mapState: internalViewState,
+          mapState: internalMapState,
           mapStyle
         },
         {
diff --git a/src/components/src/map-view-state-context.tsx b/src/components/src/map-view-state-context.tsx
index a2c053f079..e2668a39b6 100644
--- a/src/components/src/map-view-state-context.tsx
+++ b/src/components/src/map-view-state-context.tsx
@@ -1,6 +1,7 @@
 import React, {useState, useEffect, createContext} from 'react';
 import isEqual from 'lodash.isequal';
 import pick from 'lodash.pick';
+import {pickViewportPropsFromMapState} from '@kepler.gl/reducers';
 
 import {MapState} from '@kepler.gl/types';
 
@@ -38,7 +39,7 @@ export const MapViewStateContextProvider = ({
       }
     } else {
       if (hasChanged(primaryState, mapState)) {
-        setViewStates([mapState]);
+        setViewStates([pickViewportPropsFromMapState(mapState)] as MapState[]);
       }
     }
     // Only update internalViewState when viewState changes
diff --git a/src/reducers/src/index.ts b/src/reducers/src/index.ts
index 20ac3af28a..df824404fa 100644
--- a/src/reducers/src/index.ts
+++ b/src/reducers/src/index.ts
@@ -63,7 +63,7 @@ export * from './provider-state';
 export * from './ui-state';
 export * from './map-state';
 export {getInitialInputStyle, loadMapStylesUpdater, INITIAL_MAP_STYLE} from './map-style-updaters';
-export {fitBoundsUpdater, INITIAL_MAP_STATE} from './map-state-updaters';
+export {fitBoundsUpdater, pickViewportPropsFromMapState, INITIAL_MAP_STATE} from './map-state-updaters';
 
 // Helpers
 export * from './composer-helpers';
diff --git a/src/reducers/src/map-state-updaters.ts b/src/reducers/src/map-state-updaters.ts
index 514a793641..d1c6053d74 100644
--- a/src/reducers/src/map-state-updaters.ts
+++ b/src/reducers/src/map-state-updaters.ts
@@ -378,9 +378,9 @@ export const toggleSplitMapViewportUpdater = (
     // if current viewport is synced, and we are unsyncing it
     // or already in unsynced mode and NOT toggling locked zoom
     // make a fresh copy of the current viewport object, assign it to splitMapViewports[]
-    // getViewportFromMapState is called twice to avoid memory allocation conflicts
-    const leftViewport = getViewportFromMapState(newMapState);
-    const rightViewport = getViewportFromMapState(newMapState);
+    // pickViewportPropsFromMapState is called twice to avoid memory allocation conflicts
+    const leftViewport = pickViewportPropsFromMapState(newMapState);
+    const rightViewport = pickViewportPropsFromMapState(newMapState);
     newMapState.splitMapViewports = [leftViewport, rightViewport];
   }
 
@@ -468,7 +468,7 @@ function updateViewportBasedOnBounds(state: MapState, newMapState: MapState) {
   return newMapState;
 }
 
-function getViewportFromMapState(state) {
+export function pickViewportPropsFromMapState(state: MapState): Viewport {
   return pick(state, [
     'width',
     'height',