From 0938bf7c4a21b1900c82918fcc83634d4fa55198 Mon Sep 17 00:00:00 2001
From: Nikolay Martyanov <ohmspectator@gmail.com>
Date: Mon, 1 Jan 2024 22:21:05 +0100
Subject: [PATCH] front: Add tooltip to map regions.

Added Material-UI Tooltip to RegionMap component to display region names when
hovering over the map regions. This enhances user interactivity by providing
immediate context about each region. Adjusted event handlers for mouse
movements to control tooltip visibility and content based on the region under
the cursor.

Issue: #186

Signed-off-by: Nikolay Martyanov <ohmspectator@gmail.com>
---
 frontend/src/components/RegionMap.jsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/RegionMap.jsx b/frontend/src/components/RegionMap.jsx
index 42ef27c..1839937 100644
--- a/frontend/src/components/RegionMap.jsx
+++ b/frontend/src/components/RegionMap.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import maplibregl from 'maplibre-gl';
+import Tooltip from '@mui/material/Tooltip';
 import * as turf from '@turf/turf';
 import { useNavigation } from './NavigationContext';
 import {
@@ -22,6 +23,8 @@ function MapComponent() {
   const [error, setError] = useState(null);
   const [renderedFeatures, setRenderedFeatures] = useState([]);
   const selectedRegionRef = useRef(selectedRegion);
+  const [tooltipContent, setTooltipContent] = useState('');
+  const [tooltipOpen, setTooltipOpen] = useState(false);
 
   // Function to handle region click on the map
   const handleRegionClick = (e) => {
@@ -226,12 +229,24 @@ function MapComponent() {
       // Set up click event handler for selecting regions
       map.current.on('click', 'polygon', handleRegionClick);
 
-      // Optional: Change the cursor to a pointer when over clickable regions
-      map.current.on('mouseenter', 'polygon', () => {
-        map.current.getCanvas().style.cursor = 'pointer';
+      // Show a tooltip with the region name when hovering over regions
+      map.current.on('mousemove', 'polygon', (e) => {
+        const featuresUnder = map.current.queryRenderedFeatures(e.point, {
+          layers: ['polygon'],
+        });
+        if (featuresUnder.length > 0) {
+          const hoveredRegion = featuresUnder[0].properties;
+          map.current.getCanvas().style.cursor = 'pointer';
+          setTooltipContent(hoveredRegion.name);
+          setTooltipOpen(true);
+        } else {
+          setTooltipOpen(false);
+        }
       });
+
       map.current.on('mouseleave', 'polygon', () => {
         map.current.getCanvas().style.cursor = '';
+        setTooltipOpen(false);
       });
     }
   };
@@ -251,7 +266,9 @@ function MapComponent() {
   return (
     <div>
       {error && <div style={{ color: 'red' }}>{error}</div>}
-      <div ref={mapContainer} style={{ width: '100%', height: '400px' }} />
+      <Tooltip title={tooltipContent} open={tooltipOpen} placement="right" followCursor>
+        <div ref={mapContainer} style={{ width: '100%', height: '400px' }} />
+      </Tooltip>
     </div>
   );
 }