Fixed maps tooltip display at dark mode

CHANGELOG.md

@@ -16,6 +16,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ### Features
 ### Enhancements
 ### Bug Fixes
+* Fixed maps tooltip display at dark mode[#564](https://github.com/opensearch-project/dashboards-maps/pull/564)
 ### Infrastructure
 ### Documentation
 ### Maintenance

public/components/tooltip/create_tooltip.scss

@@ -0,0 +1,35 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+.mapTooltip {
+  div.maplibregl-popup-content.mapboxgl-popup-content {
+    padding: 0;
+    background: none;
+  }
+}
+
+.maplibregl-popup-anchor-top {
+  .maplibregl-popup-tip {
+    border-bottom-color:lightOrDarkTheme($ouiColorEmptyShade, $ouiColorLightestShade) !important;
+  }
+}
+
+.maplibregl-popup-anchor-bottom {
+  .maplibregl-popup-tip {
+    border-top-color:lightOrDarkTheme($ouiColorEmptyShade, $ouiColorLightestShade) !important;
+  }
+}
+
+.maplibregl-popup-anchor-left {
+  .maplibregl-popup-tip {
+    border-right-color:lightOrDarkTheme($ouiColorEmptyShade, $ouiColorLightestShade) !important;
+  }
+}
+
+.maplibregl-popup-anchor-right {
+  .maplibregl-popup-tip {
+    border-left-color:lightOrDarkTheme($ouiColorEmptyShade, $ouiColorLightestShade) !important;
+  }
+}

public/components/tooltip/create_tooltip.tsx

@@ -5,6 +5,7 @@ import { Popup, MapGeoJSONFeature, LngLat } from 'maplibre-gl';
 import { MapLayerSpecification, DocumentLayerSpecification } from '../../model/mapLayerType';
 import { FeatureGroupItem, TooltipContainer } from './tooltipContainer';
 import { MAX_LONGITUDE } from '../../../common';
+import './create_tooltip.scss';
 
 interface Options {
   features: MapGeoJSONFeature[];
@@ -76,6 +77,7 @@ export function createPopup({
     closeButton: false,
     closeOnClick: false,
     maxWidth: 'max-content',
+    className: 'mapTooltip',
   });
 
   const featureGroup = groupFeaturesByLayers(features, layers);

public/components/tooltip/tooltipTable.tsx

@@ -15,13 +15,16 @@ import {
 } from '@elastic/eui';
 import React, { useState, Fragment, useCallback, useEffect, useMemo } from 'react';
 
-export type RowData = {
+export interface RowData {
   key: string;
   value: string;
-};
+}
 export type PageData = RowData[];
 export type TableData = PageData[];
-type Table = { table: TableData; layer: string };
+interface Table {
+  table: TableData;
+  layer: string;
+}
 
 export const ALL_LAYERS = -1;
 
@@ -66,7 +69,7 @@ const TooltipTable = ({
   showPagination = true,
   showLayerSelection = true,
 }: Props) => {
-  const [selectedLayers, setSelectedLayers] = useState<EuiComboBoxOptionOption<number>[]>([
+  const [selectedLayers, setSelectedLayers] = useState<Array<EuiComboBoxOptionOption<number>>>([
     {
       label: tables[0]?.layer ?? '',
       value: 0,
@@ -103,7 +106,7 @@ const TooltipTable = ({
   };
 
   const handleLayerChange = useCallback(
-    (layerSelections: EuiComboBoxOptionOption<number>[]) => {
+    (layerSelections: Array<EuiComboBoxOptionOption<number>>) => {
       if (tables.length === 0) {
         return;
       }
@@ -152,7 +155,7 @@ const TooltipTable = ({
   return (
     <Fragment>
       <EuiFlexGroup responsive={false}>
-        <EuiFlexItem style={{ overflow: 'scroll', maxHeight: 300 }}>
+        <EuiFlexItem style={{ overflow: 'auto', maxHeight: 300 }}>
           <EuiBasicTable
             isSelectable={false}
             items={pageItems}