Fix tooltip translations

client/src/components/map/legends/header/index.tsx

@@ -31,7 +31,7 @@ const LegendHeader = ({
         {!!info && <LayerInfo info={info} title={title} />}
         <LayerVisibility onChangeVisibility={setVisibility} visible={visible} />
         <Button onClick={handleChangeIsOpen} variant="link" className="h-fit px-0 py-0">
-          <ChevronDown className="h-5 w-5 shrink-0 group-data-[state=open]:rotate-180" />
+          <ChevronDown className="h-5 w-5 shrink-0 group-data-[state=closed]:rotate-180" />
         </Button>
       </div>
       {subtitle && <span className="text-xs">{subtitle}</span>}

client/src/components/map/tooltip/components/rangelands.tsx

@@ -13,6 +13,8 @@ import { useSyncRangelandType } from "@/store/map";
 import { useMemo } from "react";
 import { MapTooltipProps } from "../../types";
 import { useGetRangelands } from "@/types/generated/rangeland";
+import { useGetLocalizedList } from "@/lib/localized-query";
+import { useGetEcoregions } from "@/types/generated/ecoregion";
 
 type RangelandsTooltipProps = {
   ecoregion_code?: number;
@@ -26,10 +28,13 @@ const RangelandsTooltip = (props: MapTooltipProps) => {
   const t = useTranslations();
   const [rangelandType] = useSyncRangelandType();
 
-  const { data: rangelandsData } = useGetRangelands(
+  const biomesDataQuery = useGetRangelands(
     {
-      populate: "*",
+      populate: ["translations"],
       sort: "title:asc",
+      filters: {
+        code: `${biome_code}`,
+      },
     },
     {
       query: {
@@ -38,6 +43,25 @@ const RangelandsTooltip = (props: MapTooltipProps) => {
     },
   );
 
+  const { data: biomesData } = useGetLocalizedList(biomesDataQuery);
+
+  const ecoregionsDataQuery = useGetEcoregions(
+    {
+      populate: ["translations"],
+      sort: "title:asc",
+      filters: {
+        code: `${ecoregion_code}`,
+      },
+    },
+    {
+      query: {
+        enabled: rangelandType === RANGELAND_ECOREGIONS,
+      },
+    },
+  );
+
+  const { data: ecoregionsData } = useGetLocalizedList(ecoregionsDataQuery);
+
   const content = useMemo(() => {
     if (rangelandType === RANGELAND_SYSTEM) {
       return {
@@ -46,12 +70,7 @@ const RangelandsTooltip = (props: MapTooltipProps) => {
         color: RANGELAND_SISTEM_COLOR,
       };
     }
-    const biome = rangelandsData?.data?.find(
-      (e) =>
-        e?.attributes?.code &&
-        isFinite(+e?.attributes?.code) &&
-        +e?.attributes?.code === biome_code,
-    );
+    const biome = biomesData?.data?.[0];
     if (rangelandType === RANGELAND_BIOMES) {
       return {
         comparisonArea: t("Rangeland types"),
@@ -60,12 +79,7 @@ const RangelandsTooltip = (props: MapTooltipProps) => {
       };
     }
     if (rangelandType === RANGELAND_ECOREGIONS) {
-      const ecoregion = biome?.attributes?.ecoregions?.data?.find(
-        (e) =>
-          e?.attributes?.code &&
-          isFinite(+e?.attributes?.code) &&
-          +e?.attributes?.code === ecoregion_code,
-      );
+      const ecoregion = ecoregionsData?.data?.[0];
       return {
         comparisonArea: biome?.attributes?.title,
         title: ecoregion?.attributes?.title,
@@ -74,7 +88,7 @@ const RangelandsTooltip = (props: MapTooltipProps) => {
       };
     }
     return {};
-  }, []);
+  }, [rangelandType, biomesData, ecoregionsData]);
 
   return (
     <div className="overflow-hidden rounded-lg bg-background drop-shadow-2xl">

client/src/containers/map/legends/index.tsx

@@ -17,6 +17,8 @@ const Legends = () => {
   const [datasets] = useSyncDatasets();
   const [open, setOpen] = useState(true);
 
+  const legendItems = Array.from(datasets).reverse();
+
   return (
     <div>
       <Popover open={open}>
@@ -39,7 +41,7 @@ const Legends = () => {
           <ScrollArea type="scroll" className="relative overflow-hidden">
             <ScrollAreaViewport className="max-h-[70vh] w-full">
               <div className="my-6 space-y-4 px-6">
-                {datasets?.map((d) => <LegendItem key={d} dataset={d} />)}
+                {legendItems?.map((d) => <LegendItem key={d} dataset={d} />)}
               </div>
               <div className="absolute bottom-0 z-50 h-7 w-[calc(100%-8px)] translate-y-2 bg-background blur-sm"></div>
             </ScrollAreaViewport>

client/src/containers/map/popups/item.tsx

@@ -23,7 +23,7 @@ const Item = ({ slug }: PopupItemProps) => {
   const info = deckInteractiveLayers[slug];
 
   const { data: layerData } = useGetBySlug<LayerResponse>(`layer/${slug}`, {
-    populate: "dataset,metadata",
+    populate: "dataset,metadata,translations",
     locale,
   });