From e4d952b7bf8bf65dcf1dc43c478a37b9e7e6566c Mon Sep 17 00:00:00 2001
From: vbudko <valerij.budko@gmail.com>
Date: Wed, 22 May 2024 10:47:34 +0100
Subject: [PATCH] CORE-4887 All points set

---
 modules/map/map.jsx                | 78 +++++++++++++-----------------
 pages/data-providers/index.jsx     |  7 +--
 templates/data-providers/index.jsx | 55 ++++++++++-----------
 3 files changed, 65 insertions(+), 75 deletions(-)

diff --git a/modules/map/map.jsx b/modules/map/map.jsx
index 75fb3f33..b229920a 100644
--- a/modules/map/map.jsx
+++ b/modules/map/map.jsx
@@ -17,49 +17,33 @@ const markerIcon = L.icon({
 })
 
 const CustomMap = ({ locations }) => {
-  const mapContainerRef = useRef(null)
-  const map = useRef(null)
+  const markersData = locations
+
+  const mapRef = useRef(null);
+  const markerClusterGroupRef = useRef(null);
 
   useEffect(() => {
-    const coverLayer = L.tileLayer(
-      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-      {
-        attribution: `
-          <a href="https://www.openstreetmap.org">OpenStreetMap</a> under
-          <a href="https://creativecommons.org/licenses/by-sa/2.0">CC-BY-SA</a>
-        `,
-        minZoom: 1,
-        maxZoom: 12,
-      }
-    )
+    // Initialize the map
+    if (!mapRef.current) {
+      mapRef.current = L.map('map', {
+        center: [50, 10], // Default center of the map
+        zoom: 3, // Default zoom level
+        layers: [
+          L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          })
+        ]
+      });
+    }
 
-    map.current = L.map(mapContainerRef.current, {
-      center:
-        locations[0]?.latitude && locations[0]?.longitude
-          ? new L.LatLng(locations[0]?.latitude, locations[0]?.longitude)
-          : centerPosition,
-      zoom: 1,
-      maxBounds: [
-        [70, 180],
-        [-70, -180],
-      ],
-      layers: [coverLayer],
-      scrollWheelZoom: false,
-    })
-    return () => map.current.remove()
-  }, [])
+    // Create and add markers
+    const markers = markersData.map(markerData => {
 
-  useEffect(() => {
-    const markers = new MarkerClusterGroup({
-      chunkedLoading: true,
-      icon: markerIcon,
-    })
+      const { name, href, latitude, longitude } = markerData
 
-    locations.forEach(({ name, href, latitude, longitude }) => {
-      const marker = L.marker(new L.LatLng(latitude, longitude), {
-        title: name,
-        icon: markerIcon,
-      })
+      const latLng = new L.LatLng(latitude, longitude);
+
+      const marker = L.marker(latLng).addTo(mapRef.current);
       if (href) {
         marker.bindPopup(
           `<a
@@ -72,15 +56,19 @@ const CustomMap = ({ locations }) => {
         )
       } else marker.bindPopup(name)
 
-      markers.addLayer(marker)
-    })
-
-    map.current.addLayer(markers)
+      // marker.bindPopup(name);
+      return marker;
+    });
 
-    return () => map.current.removeLayer(markers)
-  }, [locations])
+    return () => {
+      // Cleanup the map and markers
+      markers.forEach(marker => marker.remove());
+      mapRef.current.remove()
+      mapRef.current = null
+    }
+  }, [markersData])
 
-  return <div ref={mapContainerRef} className={styles.map} />
+  return <div id="map" style={{ height: '100vh', width: '100%' }} />
 }
 
 export default CustomMap
diff --git a/pages/data-providers/index.jsx b/pages/data-providers/index.jsx
index 41e9a821..bd9d1d2a 100644
--- a/pages/data-providers/index.jsx
+++ b/pages/data-providers/index.jsx
@@ -21,9 +21,10 @@ export async function getServerSideProps({ query }) {
           data:
             // TODO: Remove once https://github.com/vercel/next.js/issues/16122 is solved
             //       or once we migrate to backend search
-            normalizeDataProviders(
-              process.env.NODE_ENV === 'production' ? data : data.slice(0, 200)
-            ),
+            // normalizeDataProviders(
+            //   process.env.NODE_ENV === 'production' ? data : data.slice(0, 200)
+            // ),
+            normalizeDataProviders(data),
           params: {
             ...Object.fromEntries(
               Object.entries(query).filter(([, v]) => v != null)
diff --git a/templates/data-providers/index.jsx b/templates/data-providers/index.jsx
index 2a862d5a..2500b0e3 100644
--- a/templates/data-providers/index.jsx
+++ b/templates/data-providers/index.jsx
@@ -8,23 +8,22 @@ import AddDataProviderForm from './form'
 
 import { formatNumber } from 'utils/format-number'
 import Search from 'modules/search-layout'
+import Map from 'modules/map'
 
-// REMOVE TEMP until data is correct
-
-// const filterAndMapDataProviders = (dataProviders) =>
-//   dataProviders
-//     .filter(
-//       ({ name, dataProviderLocation }) =>
-//         dataProviderLocation?.latitude != null &&
-//         dataProviderLocation?.longitude != null &&
-//         name
-//     )
-//     .map(({ id, name, dataProviderLocation }) => ({
-//       name,
-//       href: `/data-providers/${id}`,
-//       latitude: dataProviderLocation?.latitude,
-//       longitude: dataProviderLocation?.longitude,
-//     }))
+const filterAndMapDataProviders = (dataProviders) =>
+  dataProviders
+    .filter(
+      ({ name, dataProviderLocation }) =>
+        dataProviderLocation?.latitude != null &&
+        dataProviderLocation?.longitude != null &&
+        name
+    )
+    .map(({ id, name, dataProviderLocation }) => ({
+      name,
+      href: `/data-providers/${id}`,
+      latitude: dataProviderLocation?.latitude,
+      longitude: dataProviderLocation?.longitude,
+    }))
 
 const getCountryName = (code) => {
   const countryName = countries[String(code).toUpperCase()]
@@ -137,6 +136,9 @@ const DataProvidersSearchTemplate = React.memo(
       { isHidden: false }
     )
 
+    // console.log('results ' + JSON.stringify(results))
+    // console.table(results.length)
+
     return (
       <Search className={styles.layout}>
         {Boolean(results.length) && (
@@ -151,7 +153,7 @@ const DataProvidersSearchTemplate = React.memo(
           results={results}
           setDataProvidersOffset={setDataProvidersSize}
         >
-          <div id="add-new-data-provider" className={styles.addDataProvider}>
+          <div id="add-new-data-provider" key="add-new-data-provider" className={styles.addDataProvider}>
             {showAddDataProviderForm ? (
               <AddDataProviderForm
                 ref={formRef}
@@ -175,16 +177,15 @@ const DataProvidersSearchTemplate = React.memo(
           </div>
         </SearchResults>
         <Search.Sidebar>
-          {/* // REMOVE TEMP until data is correct  */}
-
-          {/* {results.length > 0 && ( */}
-          {/*  <Map */}
-          {/*    className={styles.map} */}
-          {/*    // We have too long load map with full list data-providers */}
-          {/* eslint-disable-next-line max-len */}
-          {/*    locations={filterAndMapDataProviders(results.slice(0, 200))} */}
-          {/*  /> */}
-          {/* )} */}
+          {results.length > 0 && (
+            <Map
+              className={styles.map}
+              locations={filterAndMapDataProviders(results)}
+              // locations={filterAndMapDataProviders(results.slice(0, 3500))}
+              // locations={filterAndMapDataProviders(results.slice(0, 6500))}
+              // locations={filterAndMapDataProviders(results.slice(0, 8500))}
+            />
+          )}
           <p>
             We aggregate research papers from data providers all over the world
             including institutional and subject repositories and journal