From 9c36083910dc9d4a448ab77b21a9242a664ec636 Mon Sep 17 00:00:00 2001
From: Vijayan Balasubramanian <vijayan.balasubramanian@gmail.com>
Date: Wed, 21 Dec 2022 13:25:04 -0800
Subject: [PATCH] Add tooltip for hover (#132)

This will only show one of the pages.

Signed-off-by: Vijayan Balasubramanian <balasvij@amazon.com>
---
 ...{tooltipClick.tsx => tooltipContainer.tsx} | 19 +++--
 .../tooltip/tooltipHeaderContent.tsx          |  5 +-
 .../components/tooltip/tooltipTable.tsx       | 33 ++++++--
 .../public/model/documentLayerFunctions.ts    | 76 +++++++++++++++++--
 4 files changed, 104 insertions(+), 29 deletions(-)
 rename maps_dashboards/public/components/tooltip/{tooltipClick.tsx => tooltipContainer.tsx} (72%)

diff --git a/maps_dashboards/public/components/tooltip/tooltipClick.tsx b/maps_dashboards/public/components/tooltip/tooltipContainer.tsx
similarity index 72%
rename from maps_dashboards/public/components/tooltip/tooltipClick.tsx
rename to maps_dashboards/public/components/tooltip/tooltipContainer.tsx
index 9dd2552a..5d883ed2 100644
--- a/maps_dashboards/public/components/tooltip/tooltipClick.tsx
+++ b/maps_dashboards/public/components/tooltip/tooltipContainer.tsx
@@ -5,17 +5,16 @@
 
 import React from 'react';
 
-import {
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiPanel,
-  EuiText,
-  EuiHorizontalRule,
-} from '@elastic/eui';
+import { EuiFlexItem, EuiFlexGroup, EuiPanel, EuiText, EuiHorizontalRule } from '@elastic/eui';
 import { TooltipHeaderContent } from './tooltipHeaderContent';
 import { TooltipTable } from './tooltipTable';
 
-export function TooltipClick(title: string, features: any[], onClose: Function) {
+export function TooltipContainer(
+  title: string,
+  features: any[],
+  isClickEvent: boolean,
+  onClose: Function
+) {
   const toTableRows = () => {
     const rows: any[] = [];
     for (const feature of features) {
@@ -38,11 +37,11 @@ export function TooltipClick(title: string, features: any[], onClose: Function)
       <EuiText className={'eui-textTruncate'} grow={true}>
         <EuiFlexGroup responsive={false} direction="column" gutterSize="none">
           <EuiFlexItem grow={false}>
-            <TooltipHeaderContent title={title} close={true} onClose={onClose} />
+            <TooltipHeaderContent title={title} isClickEvent={isClickEvent} onClose={onClose} />
             <EuiHorizontalRule margin="xs" />
           </EuiFlexItem>
           <EuiFlexItem grow={true}>
-            <TooltipTable pages={toTableRows()} />
+            <TooltipTable pages={toTableRows()} isClickEvent={isClickEvent} />
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiText>
diff --git a/maps_dashboards/public/components/tooltip/tooltipHeaderContent.tsx b/maps_dashboards/public/components/tooltip/tooltipHeaderContent.tsx
index e9cbaf27..9d97993b 100644
--- a/maps_dashboards/public/components/tooltip/tooltipHeaderContent.tsx
+++ b/maps_dashboards/public/components/tooltip/tooltipHeaderContent.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 
 interface Props {
   title: string;
-  close: boolean;
+  isClickEvent: boolean;
   onClose: Function;
 }
 
@@ -23,10 +23,9 @@ const TooltipHeaderContent = (props: Props) => {
           </h4>
         </EuiTextColor>
       </EuiFlexItem>
-      {props.close && (
+      {props.isClickEvent && (
         <EuiFlexItem key="closeButton" grow={false}>
           <EuiButtonIcon
-            hidden={props.close}
             onClick={() => {
               return props.onClose();
             }}
diff --git a/maps_dashboards/public/components/tooltip/tooltipTable.tsx b/maps_dashboards/public/components/tooltip/tooltipTable.tsx
index 82d8c0f3..1a82ae63 100644
--- a/maps_dashboards/public/components/tooltip/tooltipTable.tsx
+++ b/maps_dashboards/public/components/tooltip/tooltipTable.tsx
@@ -3,11 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiBasicTable, EuiFlexGroup, EuiFlexItem, EuiPagination } from '@elastic/eui';
+import { EuiBasicTable, EuiFlexGroup, EuiFlexItem, EuiPagination, EuiText } from '@elastic/eui';
 import React, { useState, Fragment } from 'react';
 
 interface Props {
   pages: any[];
+  isClickEvent: boolean;
 }
 
 const TooltipTable = (props: Props) => {
@@ -44,6 +45,26 @@ const TooltipTable = (props: Props) => {
       textOnly: true,
     };
   };
+  const buildMessage = (count: number) => {
+    return (
+      <EuiText textAlign="center" size="xs">
+        {1} of {count}
+      </EuiText>
+    );
+  };
+
+  const buildPagination = (count: number) => {
+    return (
+      <EuiPagination
+        aria-label="Compressed pagination"
+        pageCount={count}
+        activePage={activePage}
+        onPageClick={(pageIndex) => setActivePage(pageIndex)}
+        compressed
+      />
+    );
+  };
+
   return (
     <Fragment>
       <EuiFlexGroup responsive={false}>
@@ -60,13 +81,9 @@ const TooltipTable = (props: Props) => {
       </EuiFlexGroup>
       <EuiFlexGroup justifyContent="spaceAround">
         <EuiFlexItem grow={false}>
-          <EuiPagination
-            aria-label="Compressed pagination"
-            pageCount={props.pages.length}
-            activePage={activePage}
-            onPageClick={(pageIndex) => setActivePage(pageIndex)}
-            compressed
-          />
+          {props.isClickEvent
+            ? buildPagination(props.pages.length)
+            : buildMessage(props.pages.length)}
         </EuiFlexItem>
       </EuiFlexGroup>
     </Fragment>
diff --git a/maps_dashboards/public/model/documentLayerFunctions.ts b/maps_dashboards/public/model/documentLayerFunctions.ts
index 9e9fc189..c7d74b66 100644
--- a/maps_dashboards/public/model/documentLayerFunctions.ts
+++ b/maps_dashboards/public/model/documentLayerFunctions.ts
@@ -3,10 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Map as Maplibre, Popup } from 'maplibre-gl';
+import { Map as Maplibre, Popup, LngLatLike } from 'maplibre-gl';
 import ReactDOM from 'react-dom';
 import { DocumentLayerSpecification } from './mapLayerType';
-import { TooltipClick } from '../components/tooltip/tooltipClick';
+import { TooltipContainer } from '../components/tooltip/tooltipContainer';
 import { LAYER_VISIBILITY } from '../../common';
 
 interface MaplibreRef {
@@ -350,15 +350,42 @@ const getClickPopup = () => {
   return clickPopup;
 };
 
-const buildPopup = (features: any[], title: string) => {
+const hoverPopup = new Popup({
+  closeButton: false,
+  closeOnClick: false,
+  maxWidth: 'max-content',
+});
+export const getHoverPopup = () => {
+  return hoverPopup;
+};
+
+export const buildPopup = (
+  popup: Popup,
+  features: any[],
+  title: string,
+  coordinates: LngLatLike,
+  isClickEvent: boolean
+) => {
   const div = document.createElement('div');
   ReactDOM.render(
-    TooltipClick(title, features, () => {
+    TooltipContainer(title, features, isClickEvent, () => {
       getClickPopup().remove();
     }),
     div
   );
-  return getClickPopup().setDOMContent(div).setLngLat(features[0].geometry.coordinates);
+  return popup.setDOMContent(div).setLngLat(coordinates);
+};
+
+const getCoordinates = (e: any): any => {
+  const coordinates = e.features[0].geometry.coordinates.slice();
+
+  // Ensure that if the map is zoomed out such that multiple
+  // copies of the feature are visible, the popup appears
+  // over the copy being pointed to.
+  while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
+    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
+  }
+  return coordinates;
 };
 
 export const DocumentLayerFunctions = {
@@ -390,15 +417,48 @@ export const DocumentLayerFunctions = {
     layers.forEach((layer) => {
       if (layer.id.includes(layerConfig.id)) {
         maplibreRef.current?.on('click', layer.id, (e: any) => {
-          if (maplibreRef.current && layerConfig.visibility === LAYER_VISIBILITY.VISIBLE) {
+          if (
+            maplibreRef.current &&
+            layerConfig.visibility === LAYER_VISIBILITY.VISIBLE &&
+            layerConfig.source.showTooltips === true
+          ) {
             // remove click pop up if previously opened click popup is not closed by user.
             getClickPopup()?.remove();
             if (maplibreRef.current) {
-              maplibreRef.current.getCanvas().style.cursor = 'pointer';
-              buildPopup(e.features, layerConfig.name).addTo(maplibreRef.current);
+              buildPopup(
+                getClickPopup(),
+                e.features,
+                layerConfig.name,
+                getCoordinates(e),
+                true
+              ).addTo(maplibreRef.current);
             }
           }
         });
+        // on hover
+        maplibreRef.current?.on('mouseenter', layer.id, (e: any) => {
+          if (
+            maplibreRef.current &&
+            layerConfig.visibility === LAYER_VISIBILITY.VISIBLE &&
+            layerConfig.source.showTooltips
+          ) {
+            maplibreRef.current.getCanvas().style.cursor = 'pointer';
+            buildPopup(
+              getHoverPopup(),
+              e.features,
+              layerConfig.name,
+              getCoordinates(e),
+              false
+            ).addTo(maplibreRef.current);
+          }
+        });
+        // on leave
+        maplibreRef.current?.on('mouseleave', layer.id, function () {
+          if (maplibreRef.current) {
+            maplibreRef.current.getCanvas().style.cursor = '';
+            getHoverPopup()?.remove();
+          }
+        });
       }
     });
   },