Merge pull request #119 from Vizzuality/AF-141-FE-Change-title-and-de…

…scription-and-adapt-widget-to-new-figures Af 141 fe change title and description and adapt widget to new figures
Vizzuality · Apr 18, 2024 · 124cc9b · 124cc9b
2 parents ae0511b + 0f90386
commit 124cc9b
Show file tree

Hide file tree

Showing 22 changed files with 175 additions and 82 deletions.
diff --git a/client/cypress/downloads/downloads.html b/client/cypress/downloads/downloads.html
diff --git a/client/cypress/e2e/map.cy.ts b/client/cypress/e2e/map.cy.ts
@@ -102,7 +102,7 @@ describe('Map - settings. Updates URL accordingly on basemap selection', () => {
 describe('Map - settings. Updates URL accordingly on layers selection', () => {
   it('Updates URL on roads layer selection', () => {
     cy.visit(
-      '/projects?basemap-settings={"basemap":"basemap-light","labels":"light","boundaries":false,"roads":false}'
+      '/projects?basemap-settings={"basemap":"basemap-light","labels":"light","boundaries":true,"roads":false}'
     );
     cy.get('[data-cy="map-settings-button"]').click();
     cy.get('[data-cy="map-settings-content"]').should('be.visible');
@@ -129,7 +129,7 @@ describe('Map - settings. Updates URL accordingly on layers selection', () => {
 
   it('Updates URL on boundaries selection', () => {
     cy.visit(
-      '/projects?basemap-settings={"basemap":"basemap-light","labels":"light","boundaries":false,"roads":false}'
+      '/projects?basemap-settings={"basemap":"basemap-light","labels":"light","boundaries":true,"roads":false}'
     );
     cy.get('[data-cy="map-settings-button"]').click();
     cy.get('[data-cy="map-settings-content"]').should('be.visible');
@@ -138,19 +138,19 @@ describe('Map - settings. Updates URL accordingly on layers selection', () => {
     // Boundaries layer should be off by default
     cy.url().should((url) => {
       const decodedUrl = decodeURIComponent(url);
-      expect(decodedUrl).to.include('"boundaries":false');
+      expect(decodedUrl).to.include('"boundaries":true');
     });
 
     cy.get('[data-cy="map-settings-boundaries-switcher"]').click();
     cy.url().should((url) => {
       const decodedUrl = decodeURIComponent(url);
-      expect(decodedUrl).to.include('"boundaries":true');
+      expect(decodedUrl).to.include('"boundaries":false');
     });
 
     cy.get('[data-cy="map-settings-boundaries-switcher"]').click();
     cy.url().should((url) => {
       const decodedUrl = decodeURIComponent(url);
-      expect(decodedUrl).to.include('"boundaries":false');
+      expect(decodedUrl).to.include('"boundaries":true');
     });
   });
 });
diff --git a/client/cypress/e2e/navigation.cy.ts b/client/cypress/e2e/navigation.cy.ts
@@ -1,8 +1,6 @@
 describe('navigation', () => {
   it('redirects to project page', () => {
-    cy.visit('/')
-      .url()
-      .should('be.equal', 'http://localhost:3000/projects?bbox=[62.91,-21.16,137.13,30.18]');
+    cy.visit('/').url().should('be.equal', 'http://localhost:3000/projects');
   });
 
   it('access to project detail page and switch dashboard', () => {

diff --git a/client/src/components/map/constants.ts b/client/src/components/map/constants.ts
@@ -1,7 +1,11 @@
 import type { ViewState } from 'react-map-gl';
 
+import type { Bbox } from '@/types/map';
+
 export const DEFAULT_VIEW_STATE: Partial<ViewState> = {
   zoom: 2,
   latitude: 0,
   longitude: 0,
 };
+
+export const DEFAULT_BBOX: Bbox = [68.711178, -11.476973, 131.333249, 21.087406];
diff --git a/client/src/components/map/index.tsx b/client/src/components/map/index.tsx
@@ -69,7 +69,7 @@ export const MapMapbox: FC<CustomMapProps> = ({
       // enabling fly mode avoids the map to be interrupted during the bounds transition
       setFlying(true);
 
-      mapRef.fitBounds(
+      mapRef?.fitBounds(
         [
           [bbox[0], bbox[1]],
           [bbox[2], bbox[3]],

diff --git a/client/src/constants/basemaps.ts b/client/src/constants/basemaps.ts
@@ -23,43 +23,36 @@ export const BASEMAPS = [
 
 export const LABELS = [
   {
-    id: '1059d2b8cfa87b8d894b5373ea556666',
     label: 'Dark labels',
     slug: 'dark',
   },
   {
-    id: '5924e7eeda116f817dd89f1d8d418721',
     label: 'Light labels',
     slug: 'light',
   },
   {
-    id: 'asdfasdfasdfasdf',
     label: 'No labels',
     slug: 'none',
   },
 ];
 
 export const BOUNDARIES = [
   {
-    id: 'ae861f3122c21ad7754e66d3cead38e6',
     label: 'Dark boundaries',
     slug: 'dark',
   },
   {
-    id: '31b240eba06a254ade36f1dde6a3c07e',
     label: 'Light boundaries',
     slug: 'light',
   },
 ];
 
 export const ROADS = [
   {
-    id: '4e240a8b884456747dcd07d41b4d5543',
     label: 'Dark roads',
     slug: 'dark',
   },
   {
-    id: 'edb80ef589e776ec6c2568b2fc6ad74c',
     label: 'Light roads',
     slug: 'light',
   },

diff --git a/client/src/containers/charts/single-bar.tsx b/client/src/containers/charts/single-bar.tsx
@@ -1,3 +1,4 @@
+import { cn } from '@/lib/classnames';
 import { formatCompactNumber } from '@/lib/utils/formats';
 
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -11,18 +12,20 @@ export default function SingleBar({
       total_funding: number;
       afoco_funding: number;
       national_funding: number;
+      other_funding?: number;
     };
   };
 }) {
   return (
     data && (
       <>
         <p className="py-4 text-3xl font-extrabold">
-          {formatCompactNumber(data['value'].total_funding || 0)}
+          {formatCompactNumber(data['value'].total_funding || 0)}{' '}
+          {data.unit && <span>{data.unit}</span>}
         </p>
 
         <div className="flex h-10 w-full">
-          <Tooltip>
+          <Tooltip delayDuration={0}>
             <TooltipTrigger asChild>
               <div
                 className="h-full cursor-pointer rounded-bl-[4px] rounded-tl-[4px] bg-[#70CCB0] hover:border-2 hover:border-[#D48D00]"
@@ -53,7 +56,10 @@ export default function SingleBar({
           <Tooltip delayDuration={0}>
             <TooltipTrigger asChild>
               <div
-                className="h-full cursor-pointer rounded-br-[4px] rounded-tr-[4px] bg-[#FFCC73] hover:border-2 hover:border-[#D48D00]"
+                className={cn({
+                  'h-full cursor-pointer bg-[#FFCC73] hover:border-2 hover:border-[#D48D00]': true,
+                  'rounded-br-[4px] rounded-tr-[4px]': !data['value'].other_funding,
+                })}
                 style={{
                   width: `${(data['value'].national_funding * 100) / data['value'].total_funding}%`,
                 }}
@@ -80,6 +86,39 @@ export default function SingleBar({
               </div>
             </TooltipContent>
           </Tooltip>
+
+          {!!data['value'].other_funding && (
+            <Tooltip delayDuration={0}>
+              <TooltipTrigger asChild>
+                <div
+                  className="h-full cursor-pointer rounded-br-[4px] rounded-tr-[4px] bg-[#70B6CC] hover:border-2 hover:border-[#D48D00]"
+                  style={{
+                    width: `${(data['value'].other_funding * 100) / data['value'].total_funding}%`,
+                  }}
+                />
+              </TooltipTrigger>
+              <TooltipContent side="top" align="end">
+                <div className="flex flex-col items-center p-2 text-base">
+                  <p>
+                    Other Funding:
+                    <span className="font-bold">
+                      {' '}
+                      {formatCompactNumber(data['value'].other_funding || 0)}
+                    </span>
+                    <span>
+                      {' '}
+                      (
+                      {(
+                        (data['value'].other_funding * 100) /
+                        data['value'].total_funding
+                      ).toFixed()}
+                      %)
+                    </span>
+                  </p>
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          )}
         </div>
         <div className="mt-2 flex w-full items-center justify-between text-xs text-gray-500">
           <p>0</p>
@@ -98,6 +137,12 @@ export default function SingleBar({
             <div className="flex h-3 w-3 rounded-full bg-[#FFCC73]" />
             <p className="">National Contributions</p>
           </div>
+          {data['value']?.other_funding && (
+            <div className="flex items-center space-x-1.5">
+              <div className="flex h-3 w-3 rounded-full bg-[70B6CC]" />
+              <p className="">Other Funding</p>
+            </div>
+          )}
         </div>
       </>
     )

diff --git a/client/src/containers/countries/detail/panel.tsx b/client/src/containers/countries/detail/panel.tsx
@@ -109,7 +109,21 @@ export default function CountryDetailPanel() {
   };
 
   const downloadCSVCountryData = () => {
-    const dataToDownload = { ...indicators, ...data?.data?.attributes };
+    const parsedIndicatorsData = Object.fromEntries(
+      Object.entries(indicators as { [key: string]: { value: unknown; unit: string } })
+        .filter(([key, { unit }]) => unit !== '') // Keep only entries with non-empty units
+        .map(([key, { value, unit }]) => {
+          // If value is an object, maintain its structure and append the unit separately
+          if (typeof value === 'object' && value !== null) {
+            return [key, { ...value, unit }];
+          } else {
+            // For simple values, format as string with the unit
+            return [key, `${value} ${unit}`];
+          }
+        })
+    );
+
+    const dataToDownload = { ...parsedIndicatorsData, ...data?.data?.attributes };
 
     const csvData = jsonToCsv(dataToDownload || {}); // Provide a default value of an empty object if data is undefined
     const blob = new Blob([csvData], { type: 'text/csv' });

diff --git a/client/src/containers/countries/list.tsx b/client/src/containers/countries/list.tsx
@@ -1,33 +1,33 @@
 'use client';
 
-import { useState } from 'react';
+// import { useState } from 'react';
 
-import { Search, X } from 'lucide-react';
+// import { Search, X } from 'lucide-react';
 
 import { useGetCountries } from '@/types/generated/country';
 
 import CountryItem from '@/containers/countries/item';
 
-import { Input } from '@/components/ui/input';
+// import { Input } from '@/components/ui/input';
 import ContentLoader from '@/components/ui/loader';
 import { ScrollArea } from '@/components/ui/scroll-area';
 
 export default function CountriesList() {
-  const [searchValue, setSearchValue] = useState<string | null>(null);
+  // const [searchValue, setSearchValue] = useState<string | null>(null);
 
   const { data, isFetching, isFetched, isError } = useGetCountries({
     populate: '*',
-    filters: {
-      name: {
-        $containsi: searchValue,
-      },
-    },
+    // filters: {
+    //   name: {
+    //     $containsi: searchValue,
+    //   },
+    // },
     sort: 'name',
   });
 
   return (
     <div className="flex flex-col space-y-8">
-      <div className="relative px-5">
+      {/* <div className="relative px-5">
         <Input
           type="search"
           placeholder="Search country"
@@ -46,7 +46,7 @@ export default function CountriesList() {
             <X className="h-3.5 w-3.5 cursor-pointer text-yellow-900" />
           </button>
         )}
-      </div>
+      </div> */}
       <ContentLoader
         data={data?.data}
         isPlaceholderData={false}

diff --git a/client/src/containers/datasets/item.tsx b/client/src/containers/datasets/item.tsx
@@ -4,10 +4,14 @@ import { useCallback } from 'react';
 
 import Markdown from 'react-markdown';
 
+import { useSetAtom } from 'jotai';
 import { Info as InfoIcon } from 'lucide-react';
 import remarkGfm from 'remark-gfm';
 
+import { tmpBboxAtom } from '@/store';
+
 import type { LayerListResponseDataItem } from '@/types/generated/strapi.schemas';
+import type { Bbox } from '@/types/map';
 
 import { useSyncLayers } from '@/hooks/datasets/sync-query';
 
@@ -17,16 +21,20 @@ import { Switch } from '@/components/ui/switch';
 
 export default function DatasetsItem(props: LayerListResponseDataItem) {
   const [layers, setLayersToURL] = useSyncLayers();
+  const setTmpBbox = useSetAtom(tmpBboxAtom);
 
   const handleLayerChange = useCallback(() => {
     if (!layers.some((l) => l.id === props.id)) {
       setLayersToURL([...layers, { id: props.id, opacity: 1, visibility: 'visible' }]);
+      if (props.id === 6) {
+        setTmpBbox([99.05, 19.5, 107.31, 23.25] as Bbox);
+      }
     }
     if (layers.some((l) => l.id === props.id)) {
       const newLayers = layers.filter((l) => l.id !== props.id);
       setLayersToURL(newLayers);
     }
-  }, [layers, setLayersToURL, props.id]);
+  }, [layers, setLayersToURL, props.id, setTmpBbox]);
 
   if (!props.attributes) return null;
 
@@ -51,7 +59,6 @@ export default function DatasetsItem(props: LayerListResponseDataItem) {
 
             <DialogContent className="p-0" data-cy={`info-${props.attributes.slug}-dialog`}>
               <h3 className="px-6 pt-4 text-xl font-medium text-green-900">
-                {/* {props.attributes.title} */}
                 {props.attributes.name}
               </h3>
               <div className="border-b border-t border-gray-100">

diff --git a/client/src/containers/datasets/layers/land-degradation/layer.tsx b/client/src/containers/datasets/layers/land-degradation/layer.tsx
@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+
 import { Layer, Source, SourceProps } from 'react-map-gl';
 
 import type { LayerProps } from '@/types/layers';
@@ -7,21 +9,30 @@ import { useSyncLayers } from '@/hooks/datasets/sync-query';
 import { useLayers } from './hooks';
 
 const SOURCE: SourceProps = {
+  promoteId: 'ID',
   type: 'vector',
   url: 'mapbox://afoco.76guc67g',
   id: 'land_degradation',
 };
 
-export const LandDegradationLayer = ({ beforeId, id }: LayerProps) => {
+export const LandDegradationLayer = ({ beforeId, id, onAdd, onRemove }: LayerProps) => {
   const [layers] = useSyncLayers();
   const settings = layers.find((layer) => layer.id === id) || {
     visibility: 'visible',
     opacity: 1,
   };
+
   const LAYERS = useLayers({
     settings,
   });
 
+  useEffect(() => {
+    const ids = LAYERS.map((layer) => layer.id);
+    onAdd && onAdd(ids);
+    return () => onRemove && onRemove(ids);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [layers, onAdd, onRemove]);
+
   if (!SOURCE || !LAYERS.length) return null;
 
   return (

diff --git a/client/src/containers/filters/content.tsx b/client/src/containers/filters/content.tsx
@@ -105,7 +105,8 @@ export default function FiltersContent() {
     { populate: 'name' },
     {
       query: {
-        select: (response) => response?.data && response?.data.map((d) => d?.attributes?.name),
+        select: (response) =>
+          response?.data && response?.data.map((d) => d?.attributes?.name)?.sort(),
       },
     }
   );