Vizzuality · cmanciero · Apr 2, 2024 · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024
@@ -105,6 +105,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "html-react-parser": "^5.1.9",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "process": "^0.11.10",

@@ -111,7 +111,7 @@ function RankingChart({
             }}
             key={`legend-value-${key}`}
           >
-            {Math.floor(d[name][key] * 100) / 100}%
+            {Math.floor((d[name][key] || 0) * 100) / 100}%
           </div>
         ))}
       </div>

@@ -58,8 +58,9 @@ function SpeciesTable({
   };
 
   const renderRow = (index) => {
-    const { species, speciesgroup, NSPS, percentprotected, stewardship } =
+    const { species, speciesgroup, NSPS, percentprotected, stewawrdship } =
       speciesList[index];
+
     const isOpened = expandedRow === index;
     return (
       <div className={styles.tableRowContainer}>
@@ -93,13 +94,16 @@ function SpeciesTable({
               <div className={styles.tableItem}>{NSPS}</div>
               <div
                 className={cx(styles.tableItem, {
-                  [styles.bold]: stewardship === 1,
+                  [styles.bold]: stewawrdship === 1,
                 })}
               >
-                {stewardship === 1 ? (
+                {stewawrdship === 1 ? (
                   t('Endemic')
                 ) : (
-                  <T _str="{stewardship} countries" stewardship={stewardship} />
+                  <T
+                    _str="{stewardship} countries"
+                    stewardship={stewawrdship}
+                  />
                 )}
               </div>
               <ArrowIcon

@@ -91,9 +91,9 @@ export const { TERRESTRIAL_GLOBAL, TERRESTRIAL_REGIONAL, MARINE } =
   TAXA_DISTRIBUTION;
 
 export const getResolutionOptions = () => ({
-  LOWEST: { label: t('~55km2'), slug: 'LOWEST' },
-  LOW: { label: t('~27km2'), slug: 'LOW' },
-  HIGH: { label: t('~1km2'), slug: 'HIGH' },
+  LOWEST: { label: `${t('~55km')}<sup>2</sup>`, slug: 'LOWEST' },
+  LOW: { label: `${t('~27km')}<sup>2</sup>`, slug: 'LOW' },
+  HIGH: { label: `${t('~1km')}<sup>2</sup>`, slug: 'HIGH' },
   COUNTRY: { label: t('country'), slug: 'COUNTRY' },
 });
 

@@ -4,7 +4,7 @@ import {
   TERRESTRIAL_GLOBAL,
   TERRESTRIAL_REGIONAL,
   MARINE,
-  DEFAULT_RESOLUTIONS,
+  // DEFAULT_RESOLUTIONS,
 } from 'constants/biodiversity-layers-constants';
 import { LAYERS_CATEGORIES } from 'constants/mol-layers-configs';
 
@@ -76,10 +76,10 @@ export const useSelectLayersOnTabOrResolutionChange = ({
       .filter((l) => l.category === LAYERS_CATEGORIES.BIODIVERSITY)
       .map((l) => l.title);
     const resolution = selectedResolutions[currentResolutionGroup];
-    const defaultResolutionLayers =
-      layersToggleConfig[biodiversityLayerVariant][currentResolutionGroup][
-        DEFAULT_RESOLUTIONS[currentResolutionGroup]
-      ];
+    // const defaultResolutionLayers =
+    //   layersToggleConfig[biodiversityLayerVariant][currentResolutionGroup][
+    //     DEFAULT_RESOLUTIONS[currentResolutionGroup]
+    //   ];
     const availableLayers =
       layersToggleConfig[biodiversityLayerVariant][currentResolutionGroup][
         resolution
@@ -98,13 +98,14 @@ export const useSelectLayersOnTabOrResolutionChange = ({
     if (hasMatchingLayer) {
       // select matching layer on selected variant
       handleLayerToggle(hasMatchingLayer);
-    } else if (availableLayers) {
+    } else if (availableLayers && layerTaxa !== 'all') {
       // select first element if there's no matching layer
       handleLayerToggle(availableLayers[0]);
-    } else {
-      // select first element if there's no maching resolution
-      handleLayerToggle(defaultResolutionLayers[0]);
     }
+    // else {
+    //   // select first element if there's no maching resolution
+    //   handleLayerToggle(defaultResolutionLayers[0]);
+    // }
   }, [
     biodiversityLayerVariant,
     selectedResolutions,

@@ -5,6 +5,8 @@ import { T } from '@transifex/react';
 import PropTypes from 'prop-types';
 
 import cx from 'classnames';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import parse from 'html-react-parser';
 
 import GroupedSelect from 'components/grouped-select';
 import LayerTools from 'components/layer-toggle/layers-tools';
@@ -86,7 +88,7 @@ function BiodiversityLayerToggle({
               <div key={option.slug}>
                 <RadioButton
                   id={option.slug}
-                  option={{ ...option, name: option.label }}
+                  option={{ ...option, name: parse(option.label) }}
                   checked={selectedResolutionOption.slug === option.slug}
                   onChange={(o) => handleResolutionSelection(o.slug)}
                   theme={radioTheme}

@@ -4,6 +4,8 @@ import { useLocale, useT } from '@transifex/react';
 
 import cx from 'classnames';
 import { motion } from 'framer-motion';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import parse from 'html-react-parser';
 
 import {
   useOnboardingTooltipRefs,
@@ -190,9 +192,11 @@ function BiodiversitySidebarCardComponent({
           <div className={styles.dropdownSubtitle}>
             <span className={styles.subtitle}>{t('Global layers')}</span>
             <span className={styles.description}>
-              {t('Global layers available at {resolution}.', {
-                resolution: resolutionSentence(TERRESTRIAL_GLOBAL),
-              })}
+              {parse(
+                t('Global layers available at {resolution}.', {
+                  resolution: resolutionSentence(TERRESTRIAL_GLOBAL),
+                })
+              )}
             </span>
           </div>
         </div>
@@ -205,9 +209,11 @@ function BiodiversitySidebarCardComponent({
               <div className={styles.dropdownSubtitle}>
                 <span className={styles.subtitle}>{t('Regional layers')}</span>
                 <span className={styles.description}>
-                  {t('Regional layers available at {resolution}.', {
-                    resolution: resolutionSentence(TERRESTRIAL_REGIONAL),
-                  })}
+                  {parse(
+                    t('Regional layers available at {resolution}.', {
+                      resolution: resolutionSentence(TERRESTRIAL_REGIONAL),
+                    })
+                  )}
                 </span>
               </div>
             </div>
@@ -227,9 +233,11 @@ function BiodiversitySidebarCardComponent({
           <div className={styles.dropdownSubtitle}>
             <span className={styles.subtitle}>{t('Global layers')}</span>
             <span className={styles.description}>
-              {t('Global layers available at {resolution}.', {
-                resolution: resolutionSentence(MARINE),
-              })}
+              {parse(
+                t('Global layers available at {resolution}.', {
+                  resolution: resolutionSentence(MARINE),
+                })
+              )}
             </span>
           </div>
         </div>

@@ -6239,12 +6239,21 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
 domelementtype@1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
-domelementtype@^2.0.1, domelementtype@^2.2.0:
+domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
   integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
@@ -6256,6 +6265,13 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
+domhandler@5.0.3, domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
 domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
@@ -6280,6 +6296,15 @@ domutils@^2.5.2, domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+domutils@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@@ -6417,6 +6442,11 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
   integrity sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==
 
+entities@^4.2.0, entities@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 env-paths@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-1.0.0.tgz#4168133b42bb05c38a35b1ae4397c8298ab369e0"
@@ -7833,6 +7863,14 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
+html-dom-parser@5.0.8:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-5.0.8.tgz#540057d8eb7ff28c9fd45fa9eead374c34dae20c"
+  integrity sha512-vuWiX9EXgu8CJ5m9EP5c7bvBmNSuQVnrY8tl0z0ZX96Uth1IPlYH/8W8VZ/hBajFf18EN+j2pukbCNd01HEd1w==
+  dependencies:
+    domhandler "5.0.3"
+    htmlparser2 "9.1.0"
+
 html-encoding-sniffer@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
@@ -7863,6 +7901,16 @@ html-minifier-terser@^6.0.2:
     relateurl "^0.2.7"
     terser "^5.10.0"
 
+html-react-parser@^5.1.9:
+  version "5.1.9"
+  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-5.1.9.tgz#7a8eb3a0b243bddf68f1a77bba5e423933b64161"
+  integrity sha512-MP0MQDEGlzkJT0OwY//tKYrgIzBM1frYLxx9RF7ALdIjI+MCMumydcNovXDX4X/iDi1zfgaU28VxoNXZn7EPjQ==
+  dependencies:
+    domhandler "5.0.3"
+    html-dom-parser "5.0.8"
+    react-property "2.0.2"
+    style-to-js "1.1.11"
+
 html-webpack-plugin@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz#c3911936f57681c1f9f4d8b68c158cd9dfe52f50"
@@ -7874,6 +7922,16 @@ html-webpack-plugin@^5.5.0:
     pretty-error "^4.0.0"
     tapable "^2.0.0"
 
+htmlparser2@9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-9.1.0.tgz#cdb498d8a75a51f739b61d3f718136c369bc8c23"
+  integrity sha512-5zfg6mHUoaer/97TxnGpxmbR7zJtPwIYFMZ/H5ucTlPZhKvtum05yiPK3Mgai3a0DyVxv7qYqoweaEd2nrYQzQ==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.1.0"
+    entities "^4.5.0"
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
@@ -8105,6 +8163,11 @@ inline-style-parser@0.1.1:
   resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
   integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
 
+inline-style-parser@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.2.2.tgz#d498b4e6de0373458fc610ff793f6b14ebf45633"
+  integrity sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ==
+
 internal-slot@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
@@ -11743,6 +11806,11 @@ react-popper@^2.2.5:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
+react-property@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-property/-/react-property-2.0.2.tgz#d5ac9e244cef564880a610bc8d868bd6f60fdda6"
+  integrity sha512-+PbtI3VuDV0l6CleQMsx2gtK0JZbZKbpdu5ynr+lbsuvtmgbNcS3VM0tuY2QjFNOcWxvXeHjDpy42RO+4U2rug==
+
 react-redux@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.1.tgz#0d423e2c1cb10ada87293d47e7de7c329623ba4d"
@@ -13059,6 +13127,20 @@ style-loader@^3.3.1:
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
   integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
+style-to-js@1.1.11:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.11.tgz#7ba66214cab556fdded4786e80de0baccfa0e942"
+  integrity sha512-yHpYzXzEkx7iDjGEmE8Eyl4K/hWIm36FXPdRsl2NHEpbigLeawLVsv6tcYp+2xNhfpCrut4w08dYqeCxWMdRxw==
+  dependencies:
+    style-to-object "1.0.5"
+
+style-to-object@1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-1.0.5.tgz#5e918349bc3a39eee3a804497d97fcbbf2f0d7c0"
+  integrity sha512-rDRwHtoDD3UMMrmZ6BzOW0naTjMsVZLIjsGleSKS/0Oz+cgCfAPRspaqJuE8rDzpKha/nEvnM0IF4seEAZUTKQ==
+  dependencies:
+    inline-style-parser "0.2.2"
+
 style-to-object@^0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.4.1.tgz#53cf856f7cf7f172d72939d9679556469ba5de37"