[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

@@ -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
         },
         {

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

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';

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',