Add display name to map controls and compare

app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx

@@ -46,3 +46,5 @@ export default function CustomAoIControl(props: CustomAoIProps) {
   });
   return null;
 }
+
+CustomAoIControl.displayName = 'CustomAoIControl';

app/scripts/components/common/map/controls/aoi/index.tsx

@@ -67,3 +67,5 @@ export default function DrawControl(props: DrawControlProps) {
 
   return aoisFeatures.length ? null : <Css />;
 }
+
+DrawControl.displayName = 'DrawControl';

app/scripts/components/common/map/controls/coords.tsx

@@ -77,3 +77,5 @@ export default function MapCoordsControl() {
 
   return null;
 }
+
+MapCoordsControl.displayName = 'MapCoordsControl';

app/scripts/components/common/map/controls/geocoder.tsx

@@ -18,3 +18,5 @@ export default function GeocoderControl() {
 
   return null;
 }
+
+GeocoderControl.displayName = 'GeocoderControl';

app/scripts/components/common/map/controls/index.tsx

@@ -8,6 +8,10 @@ export function NavigationControl() {
   return <MapboxGLNavigationControl position='top-left' showCompass={false} />;
 }
 
+NavigationControl.displayName = 'NavigationControl';
+
 export function ScaleControl() {
   return <MapboxGLScaleControl position='bottom-left' />;
 }
+
+ScaleControl.displayName = 'ScaleControl';

app/scripts/components/common/map/controls/map-options/index.tsx

@@ -277,3 +277,5 @@ export default function MapOptionsControl(props: MapOptionsProps) {
   });
   return null;
 }
+
+MapOptionsControl.displayName = 'MapOptionsControl';

app/scripts/components/common/map/index.tsx

@@ -6,6 +6,8 @@ export function Compare({ children }: { children: ReactNode }) {
   return <>{children}</>;
 }
 
+Compare.displayName = 'Compare';
+
 export default function MapProviderWrapper(props: MapsContextWrapperProps) {
   return (
     <MapProvider>

app/scripts/components/common/map/maps.tsx

@@ -3,7 +3,6 @@ import React, {
   Children,
   useMemo,
   ReactElement,
-  JSXElementConstructor,
   useState,
   createContext
 } from 'react';
@@ -92,7 +91,11 @@ function Maps({ children, projection }: MapsProps) {
 
     const sortedChildren = childrenArr.reduce(
       (acc, child) => {
-        const componentName = (child.type as JSXElementConstructor<any>).name;
+        // This is added so that we can use the component name in production
+        // where the function names are minified
+        // @ts-expect-error displayName is not in the type
+        const componentName = child.type.displayName ?? '';
+
         if (componentName === 'Compare') {
           acc.compareGenerators = Children.toArray(
             child.props.children

app/scripts/components/exploration/components/map/analysis-message-control.tsx

@@ -178,3 +178,5 @@ export function AnalysisMessageControl() {
 
   return null;
 }
+
+AnalysisMessageControl.displayName = 'AnalysisMessageControl';