Merge pull request #304 from Vizzuality/SKY30-388-fe-progress-tracker…

…-left-information-panel

Complete the sidebar with the terrestrial widget

cms/config/sync/core-store.plugin_content_manager_configuration_content_types##api##protection-coverage-stat.protection-coverage-stat.json

@@ -181,12 +181,6 @@
       }
     },
     "layouts": {
-      "list": [
-        "id",
-        "location",
-        "protection_status",
-        "year"
-      ],
       "edit": [
         [
           {
@@ -222,6 +216,13 @@
             "size": 6
           }
         ]
+      ],
+      "list": [
+        "id",
+        "location",
+        "environment",
+        "year",
+        "protection_status"
       ]
     }
   },

cms/config/sync/user-role.public.json

@@ -48,6 +48,12 @@
     {
       "action": "api::dataset.dataset.findOne"
     },
+    {
+      "action": "api::environment.environment.find"
+    },
+    {
+      "action": "api::environment.environment.findOne"
+    },
     {
       "action": "api::fishing-protection-level-stat.fishing-protection-level-stat.find"
     },

frontend/src/components/charts/conservation-chart/index.tsx

@@ -86,9 +86,12 @@ const ConservationChart: FCWithMessages<ConservationChartProps> = ({
   // Calculate data for the historical line; first and active year are known, years in between
   // need to be extrapolated.
   const historicalLineData = useMemo(() => {
-    const missingYearsArr = [...Array(activeYearData.year - firstYearData.year - 1).keys()].map(
-      (i) => i + firstYearData.year + 1
-    );
+    const missingYearsArr =
+      activeYearData.year === firstYearData.year
+        ? []
+        : [...Array(activeYearData.year - firstYearData.year - 1).keys()].map(
+            (i) => i + firstYearData.year + 1
+          );
 
     const extrapolatedHistoricalYears = missingYearsArr.map((year, idx) => {
       return {

frontend/src/constants/habitat-chart-colors.ts

@@ -1,8 +1,17 @@
+// The order of the keys affect the order of the habitats in the habitat widget
 export const HABITAT_CHART_COLORS = {
   'warm-water corals': '#EC7667',
   'cold-water corals': '#3ACBF9',
   mangroves: '#DFC700',
   seagrasses: '#2DBA66',
   saltmarshes: '#6D7600',
   seamounts: '#884B02',
+  forest: '#01550E',
+  savanna: '#E6CC8A',
+  shrubland: '#C6FF53',
+  grassland: '#1D931D',
+  'wetlands-open-waters': '#5BB5FF',
+  'rocky-mountains': '#95908C',
+  desert: '#FBF8D6',
+  artificial: '#67FFE2',
 };

frontend/src/containers/map/content/details/tables/global-regional/index.tsx

@@ -79,7 +79,7 @@ const GlobalRegionalTable: FCWithMessages = () => {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       populate: {
-        // This part if for the English version only
+        // This part is for the English version only
         protection_coverage_stats: {
           fields: ['cumSumProtectedArea', 'protectedAreasCount', 'year'],
           populate: {

frontend/src/containers/map/sidebar/main-panel/location-selector/index.tsx

@@ -26,17 +26,19 @@ export const FILTERS = {
 };
 
 const BUTTON_CLASSES =
-  'font-mono text-xs px-0 font-semibold no-underline normal-case ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2';
+  'font-mono text-xs px-0 font-semibold no-underline normal-case ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 transition-all';
 
 type LocationSelectorProps = {
   className?: HTMLDivElement['className'];
   theme: 'orange' | 'blue';
+  size?: 'default' | 'small';
   onChange: (locationCode: string) => void;
 };
 
 const LocationSelector: FCWithMessages<LocationSelectorProps> = ({
   className,
   theme,
+  size = 'default',
   onChange,
 }) => {
   const t = useTranslations('containers.map-sidebar-main-panel');
@@ -106,7 +108,11 @@ const LocationSelector: FCWithMessages<LocationSelectorProps> = ({
     <div className={cn('flex gap-3.5', className)}>
       <Popover open={locationPopoverOpen} onOpenChange={setLocationPopoverOpen}>
         <PopoverTrigger asChild>
-          <Button className={BUTTON_CLASSES} type="button" variant="text-link">
+          <Button
+            className={cn({ [BUTTON_CLASSES]: true, 'h-auto py-0': size === 'small' })}
+            type="button"
+            variant="text-link"
+          >
             <Icon icon={MagnifyingGlassIcon} className="mr-2 h-4 w-4 pb-px" />
             {t('change-location')}
           </Button>
@@ -128,7 +134,7 @@ const LocationSelector: FCWithMessages<LocationSelectorProps> = ({
       </Popover>
       {locationCode !== 'GLOB' && (
         <Button
-          className={BUTTON_CLASSES}
+          className={cn({ [BUTTON_CLASSES]: true, 'h-auto py-0': size === 'small' })}
           type="button"
           variant="text-link"
           onClick={() => handleLocationSelected('GLOB')}

frontend/src/containers/map/sidebar/main-panel/panels/details/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { useRouter } from 'next/router';
 
@@ -8,19 +8,26 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { PAGES } from '@/constants/pages';
 import { useMapSearchParams } from '@/containers/map/content/map/sync-settings';
 import { useSyncMapContentSettings } from '@/containers/map/sync-settings';
+import useScrollPosition from '@/hooks/use-scroll-position';
+import { cn } from '@/lib/classnames';
 import { FCWithMessages } from '@/types';
 import { useGetLocations } from '@/types/generated/location';
 
 import LocationSelector from '../../location-selector';
 
 import CountriesList from './countries-list';
 import DetailsButton from './details-button';
-import DetailsWidgets from './widgets';
+import MarineWidgets from './widgets/marine-widgets';
+import SummaryWidgets from './widgets/summary-widgets';
+import TerrestrialWidgets from './widgets/terrestrial-widgets';
 
 const SidebarDetails: FCWithMessages = () => {
   const locale = useLocale();
   const t = useTranslations('containers.map-sidebar-main-panel');
 
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const containerScroll = useScrollPosition(containerRef);
+
   const {
     push,
     query: { locationCode = 'GLOB' },
@@ -56,30 +63,60 @@ const SidebarDetails: FCWithMessages = () => {
     [setSettings]
   );
 
+  // Scroll to the top when the tab changes (whether that's initiated by clicking on the tab trigger
+  // or programmatically via `setSettings` in a different component) or when the location changes
+  useEffect(() => {
+    containerRef.current?.scrollTo({ top: 0 });
+  }, [tab, locationCode]);
+
   return (
     <Tabs value={tab} onValueChange={handleTabChange} className="flex h-full w-full flex-col">
-      <div className="shrink-0 border-b border-black bg-orange px-4 pt-4 md:px-8 md:pt-6">
-        <h1 className="text-5xl font-black">{locationsData?.data[0]?.attributes?.name}</h1>
-        <LocationSelector className="mt-2" theme="orange" onChange={handleLocationSelected} />
-        <CountriesList className="mt-2" bgColorClassName="bg-orange" countries={memberCountries} />
-        <TabsList className="relative top-px mt-5">
+      <div
+        className={cn({
+          'flex flex-shrink-0 gap-y-2 gap-x-5 border-b border-black bg-orange px-4 pt-4 md:px-8 md:pt-6':
+            true,
+          'flex-col': containerScroll === 0,
+          'flex-row flex-wrap': containerScroll > 0,
+        })}
+      >
+        <h1
+          className={cn({
+            'text-ellipsis font-black transition-all': true,
+            'text-5xl': containerScroll === 0,
+            'text-xl': containerScroll > 0,
+          })}
+        >
+          {locationsData?.data[0]?.attributes?.name}
+        </h1>
+        <LocationSelector
+          className="flex-shrink-0"
+          theme="orange"
+          size={containerScroll > 0 ? 'small' : 'default'}
+          onChange={handleLocationSelected}
+        />
+        <CountriesList
+          className="w-full shrink-0"
+          bgColorClassName="bg-orange"
+          countries={memberCountries}
+        />
+        <TabsList className="relative top-px mt-5 w-full flex-shrink-0">
           <TabsTrigger value="summary">{t('summary')}</TabsTrigger>
           <TabsTrigger value="terrestrial">{t('terrestrial')}</TabsTrigger>
           <TabsTrigger value="marine">{t('marine')}</TabsTrigger>
         </TabsList>
       </div>
-      <div className="flex-grow overflow-y-auto">
+      <div ref={containerRef} className="flex-grow overflow-y-auto">
         <TabsContent value="summary">
-          <div className="py-36 text-center font-black">{t('coming-soon')}</div>
+          <SummaryWidgets />
         </TabsContent>
         <TabsContent value="terrestrial">
-          <div className="py-36 text-center font-black">{t('coming-soon')}</div>
+          <TerrestrialWidgets />
         </TabsContent>
         <TabsContent value="marine">
-          <DetailsWidgets />
+          <MarineWidgets />
         </TabsContent>
       </div>
-      <div className="shrink-0 border-t border-t-black px-4 py-5 md:px-8">
+      <div className="shrink-0 border-t border-t-black bg-white px-4 py-5 md:px-8">
         <DetailsButton />
       </div>
     </Tabs>
@@ -91,7 +128,8 @@ SidebarDetails.messages = [
   ...LocationSelector.messages,
   ...CountriesList.messages,
   ...DetailsButton.messages,
-  ...DetailsWidgets.messages,
+  ...SummaryWidgets.messages,
+  ...MarineWidgets.messages,
 ];
 
 export default SidebarDetails;

frontend/src/containers/map/sidebar/main-panel/panels/details/widgets/fishing-protection/index.tsx

@@ -5,6 +5,7 @@ import { useLocale, useTranslations } from 'next-intl';
 import HorizontalBarChart from '@/components/charts/horizontal-bar-chart';
 import Widget from '@/components/widget';
 import { FISHING_PROTECTION_CHART_COLORS } from '@/constants/fishing-protection-chart-colors';
+import { FCWithMessages } from '@/types';
 import { useGetDataInfos } from '@/types/generated/data-info';
 import { useGetLocations } from '@/types/generated/location';
 import type { LocationGroupsDataItemAttributes } from '@/types/generated/strapi.schemas';
@@ -13,7 +14,7 @@ type FishingProtectionWidgetProps = {
   location: LocationGroupsDataItemAttributes;
 };
 
-const FishingProtectionWidget: React.FC<FishingProtectionWidgetProps> = ({ location }) => {
+const FishingProtectionWidget: FCWithMessages<FishingProtectionWidgetProps> = ({ location }) => {
   const t = useTranslations('containers.map-sidebar-main-panel');
   const locale = useLocale();
 
@@ -34,7 +35,7 @@ const FishingProtectionWidget: React.FC<FishingProtectionWidgetProps> = ({ locat
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       populate: {
-        // This part if for the English version only
+        // This part is for the English version only
         fishing_protection_level_stats: {
           filters: {
             fishing_protection_level: {
@@ -181,4 +182,10 @@ const FishingProtectionWidget: React.FC<FishingProtectionWidgetProps> = ({ locat
   );
 };
 
+FishingProtectionWidget.messages = [
+  'containers.map-sidebar-main-panel',
+  ...Widget.messages,
+  ...HorizontalBarChart.messages,
+];
+
 export default FishingProtectionWidget;