Fix TOP and countries in table. Fix regions selection parsing

ClimateWatch-Vizzuality · Aug 31, 2023 · aa20370 · aa20370
1 parent df60a5e
commit aa20370
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 25 deletions.
diff --git a/app/javascript/app/components/data-explorer-content/data-explorer-content-selectors.js b/app/javascript/app/components/data-explorer-content/data-explorer-content-selectors.js
@@ -34,7 +34,8 @@ import {
   ALL_SELECTED,
   ALL_SELECTED_OPTION,
   CONTAINED_PATHNAME,
-  TOP_EMITTERS_OPTION
+  TOP_EMITTERS_OPTION,
+  TOP_EMITTERS_REGION_COUNTRIES
 } from 'data/constants';
 import {
   getPathwaysModelOptions,
@@ -115,10 +116,22 @@ const getSectionMeta = createSelector(
         ]
       };
     }
+
+    const TOP_EMITTERS_META = {
+      iso_code3: 'TOP',
+      groupId: 'regions',
+      is_in_eu: null,
+      members: TOP_EMITTERS_REGION_COUNTRIES.map(topCountry =>
+        countries.find(c => c.iso_code3 === topCountry.iso)
+      ),
+      pik_name: 'Top Emitters',
+      wri_standard_name: 'Top Emitters'
+    };
+
     if (DATA_EXPLORER_FILTERS[section].includes('regions')) {
       return {
         ...sectionMeta,
-        regions,
+        regions: regions.concat(TOP_EMITTERS_META),
         countries: modifyEUULabel(countries)
       };
     } else if (DATA_EXPLORER_FILTERS[section].includes('countries')) {
@@ -189,9 +202,11 @@ const addTopEmittersMembers = (isosArray, regions, key) => {
     (key === FILTER_NAMES.regions || key === FILTER_NAMES.locations) &&
     isosArray.includes('TOP')
   ) {
-    const topRegion = regions.find(r => r.iso === 'TOP');
+    const topRegion = regions.find(
+      r => r.iso === 'TOP' || r.iso_code3 === 'TOP'
+    );
     if (topRegion) {
-      return isosArray.concat(topRegion.members || topRegion.expandsTo);
+      return topRegion.members.map(m => m.iso_code3);
     }
   }
   return isosArray;
@@ -217,18 +232,26 @@ function extractFilterIds(parsedFilters, metadata, isLinkQuery = false) {
       metadata.locations || metadata.regions,
       key
     );
-
     const filters = [];
     if (metadataWithSubcategories[parsedKey]) {
       selectedIds.forEach(selectedId => {
-        const foundSelectedOption = findSelectedValueObject(
-          metadataWithSubcategories[parsedKey],
-          selectedId
-        );
+        const foundSelectedOption =
+          parsedKey === 'regions'
+            ? findSelectedValueObject(
+              [
+                ...metadataWithSubcategories.regions,
+                ...metadataWithSubcategories.countries
+              ],
+              selectedId
+            )
+            : findSelectedValueObject(
+              metadataWithSubcategories[parsedKey],
+              selectedId
+            );
+
         if (foundSelectedOption) filters.push(foundSelectedOption);
       });
     }
-
     if (filters && filters.length > 0) {
       filterIds[parsedKey] = filters.map(
         f => f.id || f.iso_code || f.iso_code3
@@ -518,7 +541,7 @@ export const getFilterOptions = createSelector(
     filterKeys.forEach(f => {
       const options = getOptions(section, f, filtersMeta, query, category);
       if (options) {
-        if (['regions', 'locations'].includes(f)) {
+        if (['regions', 'locations', 'countries'].includes(f)) {
           options.unshift(TOP_EMITTERS_OPTION);
         }
         const optionsArray = options.map(option => {
@@ -610,6 +633,7 @@ export const parseExternalParams = createSelector(
       if (isNonColumnKey(keyWithoutSection)) {
         parsedFields[`${section}-${metaMatchingKey}`] = externalFields[k];
       } else if (metaMatchingKey !== 'undefined') {
+        // Fix discrepancies on meta keys
         if (metaMatchingKey === 'subcategories') metaMatchingKey = 'categories';
         if (metaMatchingKey === 'regions') {
           metaMatchingKey = ['regions', 'countries'];

diff --git a/...omponents/data-explorer-content/data-explorer-filters/data-explorer-filters-component.jsx b/...omponents/data-explorer-content/data-explorer-filters/data-explorer-filters-component.jsx
@@ -79,26 +79,29 @@ class DataExplorerFilters extends PureComponent {
       isDisabled,
       handleChangeSelectorAnalytics
     } = this.props;
+
     const multipleSection = field =>
       MULTIPLE_LEVEL_SECTION_FIELDS[section] &&
       MULTIPLE_LEVEL_SECTION_FIELDS[section].find(s => s.key === field);
     const groupedSelect = field =>
       GROUPED_OR_MULTI_SELECT_FIELDS[section] &&
       GROUPED_OR_MULTI_SELECT_FIELDS[section].find(s => s.key === field);
+
+    const getSelectedValue = option => {
+      if (isArray(option)) {
+        return option.length > 0 && last(option).value === ALL_SELECTED
+          ? ALL_SELECTED
+          : option
+            .map(o => o.slug)
+            .filter(v => v !== ALL_SELECTED)
+            .join();
+      }
+      return option && option.slug;
+    };
+
     const fieldFilters = filters.map(field => {
       if (multipleSection(field)) {
         const isMulti = multipleSection(field).multiselect;
-        const getSelectedValue = option => {
-          if (isArray(option)) {
-            return option.length > 0 && last(option).value === ALL_SELECTED
-              ? ALL_SELECTED
-              : option
-                .map(o => o.slug)
-                .filter(v => v !== ALL_SELECTED)
-                .join();
-          }
-          return option && option.slug;
-        };
 
         return (
           <MultiLevelDropdown
@@ -122,6 +125,23 @@ class DataExplorerFilters extends PureComponent {
           f => f.key === field
         );
         const label = fieldInfo.label || fieldInfo.key;
+        const parseSelected = option => {
+          const lastSelectedIsAllSelected =
+            isArray(option) &&
+            option.length > 0 &&
+            option[option.length - 1].value === ALL_SELECTED;
+          if (lastSelectedIsAllSelected) {
+            // Clear is all selected
+            return [];
+          }
+          const hasAllSelectedAndOtherValue =
+            isArray(option) &&
+            option.length > 0 &&
+            option.some(o => o.value === ALL_SELECTED);
+          return hasAllSelectedAndOtherValue
+            ? option.filter(o => o.value !== ALL_SELECTED)
+            : option;
+        };
         return (
           <Multiselect
             key={fieldInfo.key}
@@ -133,7 +153,7 @@ class DataExplorerFilters extends PureComponent {
             groups={fieldInfo.groups}
             disabled={isDisabled(field)}
             onValueChange={selected => {
-              handleFiltersChange({ [field]: selected });
+              handleFiltersChange({ [field]: parseSelected(selected) });
               handleChangeSelectorAnalytics();
             }}
             theme={dropdownTheme}

diff --git a/...ipt/app/components/data-explorer-content/pathway-selector-utils/pathway-selector-utils.js b/...ipt/app/components/data-explorer-content/pathway-selector-utils/pathway-selector-utils.js
@@ -13,11 +13,11 @@ export function getPathwaysModelOptions(query, filtersMeta, filter) {
     model => model.id === selectedModelId
   );
   const locationHasModel = modelSelected.find(model =>
-    model.geographic_coverage.includes(locationsSelected.name)
+    model.geographic_coverage.includes(locationsSelected?.name)
   );
   if (modelSelected.length && !locationHasModel) return filtersMeta[filter];
   return filtersMeta[filter].filter(model =>
-    model.geographic_coverage.includes(locationsSelected.name)
+    model.geographic_coverage.includes(locationsSelected?.name)
   );
 }