[Chore]: Technical: Review fixes for pr https://github.com/keplergl/kepler.gl/pull/1790

src/components/common/animation-control/playback-controls.tsx

@@ -134,7 +134,7 @@ export const AnimationWindowControl = ({
           data-for={`${item.id}-tooltip`}
           className="playback-control-button"
           onClick={() => {
-            onClick && onClick(item.id);
+            onClick?.(item.id);
             onHide();
           }}
           {...btnStyle}

src/components/injector.tsx

@@ -24,7 +24,7 @@ import {bindActionCreators} from 'redux';
 import {console as Console} from 'global/window';
 import KeplerGlContext from 'components/context';
 
-export type FactoryElement = (...args) => React.Component;
+export type FactoryElement = (...args) => React.ComponentType;
 export type Factory = FactoryElement & {
   deps: FactoryElement[];
 };

src/components/kepler-gl.tsx

@@ -480,7 +480,7 @@ function KeplerGlFactory(
               >
                 <NotificationPanel {...notificationPanelFields} />
                 {!uiState.readOnly && !readOnly && <SidePanel {...sideFields} />}
-                <MapsLayout>{mapContainers}</MapsLayout>
+                <MapsLayout className="maps">{mapContainers}</MapsLayout>
                 {isExportingImage && <PlotContainer {...plotContainerFields} />}
                 {interactionConfig.geocoder.enabled && <GeoCoderPanel {...geoCoderPanelFields} />}
                 <BottomWidgetOuter absolute>

src/components/map-container.tsx

@@ -72,20 +72,19 @@ import {
 import {Layer} from 'layers';
 import {SplitMapLayers} from 'reducers/vis-state-updaters';
 import {LayerBaseConfig, VisualChannelDomain} from 'layers/base-layer';
-import {Property} from 'csstype';
 
 /** @type {{[key: string]: React.CSSProperties}} */
-const MAP_STYLE = {
+const MAP_STYLE: {[key: string]: React.CSSProperties} = {
   container: {
     display: 'inline-block',
-    position: 'relative' as Property.Position,
+    position: 'relative',
     width: '100%',
     height: '100%'
   },
   top: {
-    position: 'absolute' as Property.Position,
+    position: 'absolute',
     top: '0px',
-    pointerEvents: 'none' as Property.PointerEvents,
+    pointerEvents: 'none',
     width: '100%',
     height: '100%'
   }
@@ -589,7 +588,7 @@ export default function MapContainerFactory(
             mapIndex={index}
             mapControls={mapControls}
             readOnly={this.props.readOnly}
-            scale={1}
+            scale={mapState.scale || 1}
             top={interactionConfig.geocoder && interactionConfig.geocoder.enabled ? 52 : 0}
             editor={editor}
             locale={locale}

src/components/maps-layout.tsx

@@ -30,10 +30,14 @@ const Outer = styled.div`
 
 MapsLayoutFactory.deps = [];
 
-export default function MapsLayoutFactory(): React.ComponentType {
-  class MapsLayout extends React.Component {
+interface MapsLayoutFactoryProps {
+  className?: string;
+}
+
+export default function MapsLayoutFactory(): React.ComponentType<MapsLayoutFactoryProps> {
+  class MapsLayout extends React.Component<MapsLayoutFactoryProps> {
     render() {
-      return <Outer>{this.props.children}</Outer>;
+      return <Outer className={this.props.className}>{this.props.children}</Outer>;
     }
   }
   return MapsLayout;

src/reducers/map-state-updaters.ts

@@ -34,6 +34,7 @@ export type MapState = {
   height: number;
   isSplit: boolean;
   initialState?: any;
+  scale?: number;
 };
 
 export type Bounds = [number, number, number, number];