From aa203701578958b0d6a2a8db7fccb10ad0d49eaf Mon Sep 17 00:00:00 2001 From: Bluesmile82 Date: Thu, 31 Aug 2023 13:04:53 +0200 Subject: [PATCH] Fix TOP and countries in table. Fix regions selection parsing --- .../data-explorer-content-selectors.js | 46 ++++++++++++++----- .../data-explorer-filters-component.jsx | 44 +++++++++++++----- .../pathway-selector-utils.js | 4 +- 3 files changed, 69 insertions(+), 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 index b1a4ae3604..91e5bbe0ca 100644 --- 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/app/javascript/app/components/data-explorer-content/data-explorer-filters/data-explorer-filters-component.jsx b/app/javascript/app/components/data-explorer-content/data-explorer-filters/data-explorer-filters-component.jsx index 95236c376c..e82f61153f 100644 --- a/app/javascript/app/components/data-explorer-content/data-explorer-filters/data-explorer-filters-component.jsx +++ b/app/javascript/app/components/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 ( 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 ( { - handleFiltersChange({ [field]: selected }); + handleFiltersChange({ [field]: parseSelected(selected) }); handleChangeSelectorAnalytics(); }} theme={dropdownTheme} diff --git a/app/javascript/app/components/data-explorer-content/pathway-selector-utils/pathway-selector-utils.js b/app/javascript/app/components/data-explorer-content/pathway-selector-utils/pathway-selector-utils.js index 5601bd92bc..6a31579b83 100644 --- a/app/javascript/app/components/data-explorer-content/pathway-selector-utils/pathway-selector-utils.js +++ b/app/javascript/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) ); }