Move zoom and coordinates as separate component

We don't have to render zoom/coordiantes if there is
no change in maps movement.

Added unit test to check render

Signed-off-by: Vijayan Balasubramanian <[email protected]>

public/components/map_container/map_container.tsx

@@ -4,7 +4,6 @@
  */
 
 import React, { useEffect, useRef, useState } from 'react';
-import { EuiPanel } from '@elastic/eui';
 import { LngLat, Map as Maplibre, NavigationControl, Popup, MapEventType } from 'maplibre-gl';
 import { debounce, throttle } from 'lodash';
 import { LayerControlPanel } from '../layer_control_panel';
@@ -34,6 +33,7 @@ import {
   getReferenceLayers,
   referenceLayerTypeLookup,
 } from '../../model/layersFunctions';
+import { MapsFooter } from './mapsFooter';
 
 interface MapContainerProps {
   setLayers: (layers: MapLayerSpecification[]) => void;
@@ -298,19 +298,7 @@ export const MapContainer = ({
 
   return (
     <div className="map-main">
-      <EuiPanel
-        hasShadow={false}
-        hasBorder={false}
-        color="transparent"
-        className="zoombar"
-        data-test-subj="mapStatusBar"
-      >
-        <small>
-          {coordinates &&
-            `lat: ${coordinates.lat.toFixed(4)}, lon: ${coordinates.lng.toFixed(4)}, `}
-          zoom: {zoom}
-        </small>
-      </EuiPanel>
+      <MapsFooter coordinates={coordinates} zoom={zoom} />
       {mounted && (
         <LayerControlPanel
           maplibreRef={maplibreRef}

public/components/map_container/mapsFooter.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+
+import { MapsFooter } from './mapsFooter';
+import { LngLat } from 'maplibre-gl';
+
+let container: Element | null;
+beforeEach(() => {
+  // setup a DOM element as a render target
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  // cleanup on exiting
+  unmountComponentAtNode(container!);
+  container?.remove();
+  container = null;
+});
+
+it('renders with or without coordinates', () => {
+  act(() => {
+    render(<MapsFooter zoom={3} />, container);
+  });
+  expect(container?.textContent).toBe('zoom: 3');
+
+  act(() => {
+    const coordinates: LngLat = new LngLat(-73.974912, 40.773654);
+    render(<MapsFooter zoom={3} coordinates={coordinates} />, container);
+  });
+  expect(container?.textContent).toBe('lat: 40.7737, lon: -73.9749, zoom: 3');
+});

public/components/map_container/mapsFooter.tsx

@@ -0,0 +1,43 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiPanel } from '@elastic/eui';
+import React, { memo } from 'react';
+import { LngLat } from 'maplibre-gl';
+
+const coordinatesRoundOffDigit = 4;
+interface MapFooterProps {
+  coordinates?: LngLat;
+  zoom: number;
+}
+
+// props are equal only if zoom and lat/lng are equal
+const propsComparator = (prevProps: MapFooterProps, nextProps: MapFooterProps) => {
+  return (
+    nextProps.zoom === prevProps.zoom &&
+    nextProps.coordinates?.lng === prevProps.coordinates?.lng &&
+    nextProps.coordinates?.lat === prevProps.coordinates?.lat
+  );
+};
+
+export const MapsFooter = memo(({ coordinates, zoom }: MapFooterProps) => {
+  return (
+    <EuiPanel
+      hasShadow={false}
+      hasBorder={false}
+      color="transparent"
+      className="zoombar"
+      data-test-subj="mapStatusBar"
+    >
+      <small>
+        {coordinates &&
+          `lat: ${coordinates.lat.toFixed(
+            coordinatesRoundOffDigit
+          )}, lon: ${coordinates.lng.toFixed(coordinatesRoundOffDigit)}, `}
+        zoom: {zoom}
+      </small>
+    </EuiPanel>
+  );
+}, propsComparator);