Merge pull request #48 from Vizzuality/SKY30-59-fe-implement-the-eez-…

…layers [SKY30-22]: EEZ popup
Vizzuality · Nov 14, 2023 · 1b8fe0e · 1b8fe0e
2 parents c75b08b + 97465d2
commit 1b8fe0e
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 89 deletions.
diff --git a/frontend/src/components/ui/loader.tsx b/frontend/src/components/ui/loader.tsx
diff --git a/frontend/src/containers/data-tool/content/map/index.tsx b/frontend/src/containers/data-tool/content/map/index.tsx
@@ -10,9 +10,9 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useAtomValue, useSetAtom } from 'jotai';
 
 import Map, { ZoomControls, Attributions, DrawControls, Drawing } from '@/components/map';
-// import Popup from '@/containers/map/popup';
 import LabelsManager from '@/containers/data-tool/content/map/labels-manager';
 import LayersToolbox from '@/containers/data-tool/content/map/layers-toolbox';
+import Popup from '@/containers/data-tool/content/map/popup';
 import { useSyncMapSettings } from '@/containers/data-tool/content/map/sync-settings';
 import { cn } from '@/lib/classnames';
 import {
@@ -175,7 +175,7 @@ const DataToolMap: React.FC = () => {
               'hidden md:block': drawState.active,
             })}
           >
-            {/* <Popup /> */}
+            <Popup />
           </div>
           <LabelsManager />
           <LayersToolbox />

diff --git a/frontend/src/containers/data-tool/content/map/popup/eez/index.tsx b/frontend/src/containers/data-tool/content/map/popup/eez/index.tsx
@@ -2,20 +2,27 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { useMap } from 'react-map-gl';
 
+import Link from 'next/link';
+
 import type { Feature } from 'geojson';
 import { useAtomValue } from 'jotai';
 
-import ContentLoader from '@/components/ui/loader';
+import { PAGES } from '@/constants/pages';
 import { format } from '@/lib/utils/formats';
 import { layersInteractiveIdsAtom, popupAtom } from '@/store/map';
 import { useGetLayersId } from '@/types/generated/layer';
 import { useGetLocations } from '@/types/generated/location';
 import { LayerTyped } from '@/types/layers';
 
+import { useDataToolSearchParams } from '../../sync-settings';
+
+const TERMS_CLASSES = 'font-mono uppercase';
+
 const EEZLayerPopup = ({ locationId }) => {
   const [rendered, setRendered] = useState(false);
   const DATA_REF = useRef<Feature['properties'] | undefined>();
   const { default: map } = useMap();
+  const searchParams = useDataToolSearchParams();
 
   const popup = useAtomValue(popupAtom);
   const layersInteractiveIds = useAtomValue(layersInteractiveIdsAtom);
@@ -37,7 +44,7 @@ const EEZLayerPopup = ({ locationId }) => {
     }
   );
 
-  const { source, click } = layerQuery.data;
+  const { source } = layerQuery.data;
 
   const DATA = useMemo(() => {
     if (source?.type === 'vector' && rendered && popup && map) {
@@ -97,36 +104,45 @@ const EEZLayerPopup = ({ locationId }) => {
     };
   }, [map, handleMapRender]);
 
+  if (!DATA) return null;
+
   return (
-    <ContentLoader
-      data={locationQuery.data}
-      isFetching={locationQuery.isFetching}
-      isFetched={locationQuery.isFetched}
-      isError={locationQuery.isError}
-      isPlaceholderData={locationQuery.isPlaceholderData}
-      skeletonClassName="h-20 w-[250px]"
-    >
-      <h3 className="text-base font-semibold">{locationQuery.data?.attributes?.name} EEZ</h3>
-      <dl className="space-y-2">
-        {click &&
-          !!locationQuery.data &&
-          click.values.map((v) => {
-            return (
-              <div key={v.key}>
-                <dt className="text-xs font-semibold uppercase">{v.label || v.key}:</dt>
-                <dd className="text-sm">
-                  {format({
-                    id: v.format?.id,
-                    value: locationQuery.data.attributes[v.key],
-                    options: v.format?.options,
-                  })}
-                </dd>
-              </div>
-            );
-          })}
-        {click && !DATA && <div className="text-xs">No data</div>}
-      </dl>
-    </ContentLoader>
+    <>
+      <div className="space-y-2 p-4">
+        <h3 className="text-xl font-semibold">{DATA?.GEONAME}</h3>
+        {locationQuery.isFetching && !locationQuery.isFetched && (
+          <span className="text-sm">Loading...</span>
+        )}
+        {locationQuery.isFetched && !locationQuery.data && (
+          <span className="text-sm">No data available</span>
+        )}
+        {locationQuery.isFetched && locationQuery.data && (
+          <>
+            <dl className="space-y-2">
+              <dt className={TERMS_CLASSES}>Marine conservation coverage</dt>
+              <dd className="font-mono text-6xl tracking-tighter text-blue">
+                39<span className="text-xl">%</span>
+              </dd>
+              <dd className="font-mono text-xl text-blue">
+                {format({
+                  value: locationQuery.data?.attributes?.totalMarineArea,
+                  id: 'formatKM',
+                })}
+                Km<sup>2</sup>
+              </dd>
+            </dl>
+            <Link
+              className="block border border-black p-4 text-center font-mono uppercase"
+              href={`${
+                PAGES.dataTool
+              }/${locationQuery.data?.attributes?.code.toUpperCase()}?${searchParams.toString()}`}
+            >
+              Open country insights
+            </Link>
+          </>
+        )}
+      </div>
+    </>
   );
 };
 

diff --git a/frontend/src/containers/data-tool/content/map/popup/index.tsx b/frontend/src/containers/data-tool/content/map/popup/index.tsx
@@ -19,21 +19,18 @@ const PopupContainer = () => {
       latitude={popup.lngLat.lat}
       longitude={popup.lngLat.lng}
       closeOnClick={false}
+      closeButton={false}
       style={{
         padding: 0,
       }}
       maxWidth="300px"
       onClose={() => setPopup({})}
     >
-      <div className="pointer-events-none absolute left-0 top-0 h-4 w-full bg-gradient-to-b from-white" />
-      <div className="max-h-[49vh] space-y-2.5 overflow-y-auto overflow-x-hidden pr-8 text-slate-800 shadow-[0_20px_15px_rgba(0,0,0,0.1)]">
-        <div className="divide-y divide-slate-200">
-          {lys.map((id) => (
-            <PopupItem key={id} id={id} />
-          ))}
-        </div>
+      <div className="">
+        {lys.map((id) => (
+          <PopupItem key={id} id={id} />
+        ))}
       </div>
-      <div className="pointer-events-none absolute bottom-0 left-0 h-4 w-full bg-gradient-to-t from-white" />
     </Popup>
   );
 };

diff --git a/frontend/src/containers/data-tool/content/map/popup/item.tsx b/frontend/src/containers/data-tool/content/map/popup/item.tsx
@@ -35,11 +35,7 @@ const PopupItem = ({ id }: PopupItemProps) => {
     return null;
   }, [interaction_config, params_config, id]);
 
-  return (
-    <div className="p-4">
-      <div className="space-y-3">{INTERACTION_COMPONENT}</div>
-    </div>
-  );
+  return INTERACTION_COMPONENT;
 };
 
 export default PopupItem;
diff --git a/frontend/src/lib/utils/formats.ts b/frontend/src/lib/utils/formats.ts
@@ -9,13 +9,10 @@ export function formatPercentage(value: number, options?: Intl.NumberFormatOptio
   return v.format(value);
 }
 
-export function formatHA(value: number, options?: Intl.NumberFormatOptions) {
+export function formatKM(value: number, options?: Intl.NumberFormatOptions) {
   const v = Intl.NumberFormat('en-US', {
     notation: 'standard',
     compactDisplay: 'short',
-    // minimumFractionDigits: 0,
-    // maximumFractionDigits: 2,
-    style: 'unit',
     unit: 'kilometer',
     unitDisplay: 'short',
     ...options,
@@ -26,7 +23,7 @@ export function formatHA(value: number, options?: Intl.NumberFormatOptions) {
 
 const FORMATS = {
   formatPercentage,
-  formatHA,
+  formatKM,
 } as const;
 
 export type FormatProps = {

diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
@@ -18,6 +18,7 @@
 }
 
 .mapboxgl-popup-content {
-  @apply !p-0 !bg-white !pointer-events-none !rounded-none;
+  @apply !p-0 !bg-white !rounded-none;
   box-shadow: 0 0px 0px 1px rgba(26, 28, 34, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
 }
+