diff --git a/app/javascript/app/components/ndcs/ndc-2025-timeline/ndc-2025-timeline-component.jsx b/app/javascript/app/components/ndcs/ndc-2025-timeline/ndc-2025-timeline-component.jsx index 8b4c44ee7c..7b6b32bfdb 100644 --- a/app/javascript/app/components/ndcs/ndc-2025-timeline/ndc-2025-timeline-component.jsx +++ b/app/javascript/app/components/ndcs/ndc-2025-timeline/ndc-2025-timeline-component.jsx @@ -73,7 +73,7 @@ class CountryTimeline extends PureComponent { >

- Latest 2025 NDC Submitted + Latest NDC Submissions

{documentYears?.length > 0 ? ( )} {indicator && renderMapLegend()} diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-2025-map/ndcs-enhancements-2025-map-selectors.js b/app/javascript/app/components/ndcs/ndcs-enhancements-2025-map/ndcs-enhancements-2025-map-selectors.js index 63a4a646be..ee5fc4192d 100644 --- a/app/javascript/app/components/ndcs/ndcs-enhancements-2025-map/ndcs-enhancements-2025-map-selectors.js +++ b/app/javascript/app/components/ndcs/ndcs-enhancements-2025-map/ndcs-enhancements-2025-map-selectors.js @@ -206,7 +206,9 @@ export const reduceLegendBuckets = createSelector( updatedIndicator.legendBuckets ).reduce((acc, [key, value]) => { if (value.name === 'No Information') { - acc[key] = { ...value, name: 'No 2025 NDC' }; + acc[key] = { ...value, name: 'No New NDC' }; + } else if (value.name === 'Submitted 2025 NDC') { + acc[key] = { ...value, name: 'New NDC' }; } else { acc[key] = value; } @@ -217,7 +219,9 @@ export const reduceLegendBuckets = createSelector( updatedIndicator.locations ).reduce((acc, [key, value]) => { if (value.name === 'No Information') { - acc[key] = { ...value, name: 'No 2025 NDC' }; + acc[key] = { ...value, name: 'No New NDC' }; + } else if (value.name === 'Submitted 2025 NDC') { + acc[key] = { ...value, name: 'New NDC' }; } else { acc[key] = value; } @@ -233,13 +237,7 @@ export const sortIndicatorLegend = createSelector( indicator => { if (!indicator) return null; const updatedIndicator = { ...indicator }; - const namesLegendOrder = [ - 'Submitted 2025 NDC with 2030 and 2035 targets', - 'Submitted 2025 NDC with 2030 target', - 'Submitted 2025 NDC', - 'No 2025 NDC', - 'Not Applicable' - ]; + const namesLegendOrder = ['New NDC', 'No New NDC', 'Not Applicable']; const updatedLegendBuckets = {}; Object.entries(updatedIndicator.legendBuckets).forEach(([key, value]) => { diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-2025-table/ndcs-enhancements-2025-table-selectors.js b/app/javascript/app/components/ndcs/ndcs-enhancements-2025-table/ndcs-enhancements-2025-table-selectors.js index a8684f7969..201fa63958 100644 --- a/app/javascript/app/components/ndcs/ndcs-enhancements-2025-table/ndcs-enhancements-2025-table-selectors.js +++ b/app/javascript/app/components/ndcs/ndcs-enhancements-2025-table/ndcs-enhancements-2025-table-selectors.js @@ -38,6 +38,7 @@ export const getIndicatorsParsed = createSelector( value: i.slug, categoryIds: i.category_ids, locations: i.locations, + labels: i.labels, isPreviousComparison })), 'value' @@ -61,30 +62,39 @@ export const tableGetSelectedData = createSelector( return []; } const refIndicator = indicators.find( - ind => ind.value === INDICATOR_SLUGS.emissions - ); // Emissions indicator is used as reference to get all countries - return Object.keys(refIndicator.locations).map(iso => { - const countryData = - countries.find(country => country.iso_code3 === iso) || {}; - const row = { - country: countryData.wri_standard_name || iso, - iso - }; - indicators.forEach(ind => { - if (ind.locations[iso]) { - if (ind.value === INDICATOR_SLUGS.enhancements) { - row[ind.label] = { - slug: ind.locations[iso].label_slug, - label: ind.locations[iso].value - }; - } else { - row[ind.isPreviousComparison ? ind.value : ind.label] = - ind.locations[iso].value; - } + ind => ind.value === INDICATOR_SLUGS.submitted2025 + ); + const noInformationLabelId = Object.entries(refIndicator.labels).find( + ([, { name }]) => name === 'No Information' + )?.[0]; + + return Object.keys(refIndicator.locations) + .map(iso => { + if (refIndicator.locations[iso]?.label_id === noInformationLabelId) { + return null; } - }); - return row; - }); + const countryData = + countries.find(country => country.iso_code3 === iso) || {}; + const row = { + country: countryData.wri_standard_name || iso, + iso + }; + indicators.forEach(ind => { + if (ind.locations[iso]) { + if (ind.value === INDICATOR_SLUGS.enhancements) { + row[ind.label] = { + slug: ind.locations[iso].label_slug, + label: ind.locations[iso].value + }; + } else { + row[ind.isPreviousComparison ? ind.value : ind.label] = + ind.locations[iso].value; + } + } + }); + return row; + }) + .filter(Boolean); } ); @@ -117,9 +127,10 @@ export const tableRemoveIsoFromData = createSelector( updatedD['NDC Status'] = d['2025 NDC Submission'] && { color, text: - d['2025 NDC Submission'] === 'No Information' - ? 'No 2025 NDC' - : d['2025 NDC Submission'], + { + 'Submitted 2025 NDC': 'New NDC', + 'No Information': 'No New NDC' + }[d['2025 NDC Submission']] || d['2025 NDC Submission'], sortIndex: Object.values(NDC_2025_LABEL_SLUGS).indexOf( d['2025 NDC Submission'] ) diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-chart-selectors.js b/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-chart-selectors.js index bf5e0183cd..f647a7a4bc 100644 --- a/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-chart-selectors.js +++ b/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-chart-selectors.js @@ -36,10 +36,15 @@ export const getData = createSelector( const data = Object.entries(emissionsIndicator.locations).map( ([iso, location]) => ({ iso, - country: iso, + // Country property is only used to display the country name on the chart tooltips. + // We'll use the wri_standard_name as a standard, and default to the ISO code if one doesn't + // exist in order to fail safely. (IE: FE not crashing due to unexpected/missing data) + country: + countries.find(country => iso === country.iso_code3) + ?.wri_standard_name || iso, indc_submission: // ! TODO Default value conflicts with the one in the component. Needs to be addressed - statusIndicator.locations[iso]?.value || 'No 2025 NDC', + statusIndicator.locations[iso]?.value || 'No New NDC', submission_date: dateIndicator.locations[iso]?.value || no2025DateIndicator.locations[iso]?.value, diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-component.jsx b/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-component.jsx index d8489fd828..e6631b3da1 100644 --- a/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-component.jsx +++ b/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-component.jsx @@ -14,6 +14,7 @@ import { } from 'recharts'; import { Switch } from 'cw-components'; import { Link } from 'react-router-dom'; +import Button from 'components/button'; import ButtonGroup from 'components/button-group'; import { generateLinkToDataExplorer } from 'utils/data-explorer'; import ModalMetadata from 'components/modal-metadata'; @@ -25,7 +26,7 @@ const SUBMISSION_TYPES = { submittedWith2030: 'Submitted 2025 NDC with 2030 target', submitted2025: 'Submitted 2025 NDC', // ! TODO Default value conflicts with the the default on in the selector. Needs to be addressed - notSubmitted: 'No 2025 NDC' + notSubmitted: 'No New NDC' }; const Ndc2025TrackerChartComponent = props => { @@ -64,9 +65,9 @@ const Ndc2025TrackerChartComponent = props => { const countriesBySubmissionType = React.useMemo(() => { const findCountriesBySubmissionType = submissionType => parsedData?.filter( - // Don't include EU countries in the chart; instead we account for EUU - ({ indc_submission, is_in_eu }) => - !is_in_eu && indc_submission === submissionType + // Note: 'EUU' is not a country, we need to explicitly exclude it. + ({ indc_submission, iso }) => + iso !== 'EUU' && indc_submission === submissionType ); return Object.entries(SUBMISSION_TYPES).reduce( @@ -135,19 +136,10 @@ const Ndc2025TrackerChartComponent = props => { // Parse data to create a chart display // We do not want to display EU countries in the chart; instead we do EUU. const chartData = React.useMemo(() => { - const parsedDataWithoutEuCountries = parsedData.filter( - country => country.is_in_eu === false - ); - - let sortedData = parsedDataWithoutEuCountries || []; + let sortedData = []; if (sortedBy === 'submission_date') { sortedData = sortedData.sort((a, b) => { - const indcSubmissionSortOrder = [ - 'Submitted 2025 NDC with 2030 target', - 'Submitted 2025 NDC with 2030 and 2035 targets', - 'Submitted 2025 NDC', - 'No 2025 NDC' - ]; + const indcSubmissionSortOrder = ['New NDC', 'No New NDC']; const sortByIndcSubmission = indcSubmissionSortOrder.indexOf(a.indc_submission) - indcSubmissionSortOrder.indexOf(b.indc_submission); @@ -156,7 +148,7 @@ const Ndc2025TrackerChartComponent = props => { return parseFloat(b.ndce_ghg) - parseFloat(a.ndce_ghg); }); } else if (sortedBy === 'emissions') { - sortedData = sortedData.sort((a, b) => b[sortedBy] - a[sortedBy]); + sortedData = parsedData.sort((a, b) => b[sortedBy] - a[sortedBy]); } const barsData = sortedData.map((country, idx) => ({ @@ -219,7 +211,7 @@ const Ndc2025TrackerChartComponent = props => {
-

What countries have submitted a 2025 NDC?

+

Which countries have submitted a new NDC?

{ } ]} /> +

- Track which countries are submitting an updated version of their - NDC--a 2025 NDC. You can compare countries’ submissions side by side{' '} + Track which countries have submitted a new NDC. You can compare + countries’ submissions side by side{' '} { > here {' '} - or by referring to the table below. To request changes or additions, - please contact{' '} + . To request changes or additions, please contact{' '} { > Mengpin Ge + . Find out more about our resources on NDCs{' '} + + here + .

@@ -277,12 +284,12 @@ const Ndc2025TrackerChartComponent = props => {

{/* {renderCardHead( 'submittedWith2030And2035', - '2025 NDCs', + 'New NDCs', 'with 2030 and 2035 targets' )} - {renderCardHead('submittedWith2030', '2025 NDCs', 'with 2030 target')} */} - {renderCardHead('submitted2025', '2025 NDCs')} - {renderCardHead('notSubmitted', 'No 2025 NDCs')} + {renderCardHead('submittedWith2030', 'New NDCs', 'with 2030 target')} */} + {renderCardHead('submitted2025', 'New NDCs')} + {renderCardHead('notSubmitted', 'No New NDCs')}

Total Countries

diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-styles.scss b/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-styles.scss index 61775f9f10..43399fafc5 100644 --- a/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-styles.scss +++ b/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart-styles.scss @@ -10,13 +10,14 @@ flex-wrap: wrap; justify-content: space-between; margin-bottom: 34px; - gap: 8px; + gap: 20px; } h2 { font-size: $font-size-large; color: $theme-color; font-weight: $font-weight; + flex: 1; } } @@ -34,14 +35,17 @@ } } +.exploreNdcContentButton { + width: auto; +} + .cards { display: grid; // For use when displaying extra indicator cards - // grid-template-columns: repeat(5, 1fr); + // grid-template-columns: 160px repeat(4, 1fr); // column-gap: 20px; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: 160px repeat(3, 1fr); column-gap: 32px; - margin-block: 45px 30px; row-gap: 6px; @@ -53,9 +57,9 @@ @media #{$tablet-landscape} { // For use when displaying extra indicator cards - // grid-template-columns: repeat(5, 214px); + // grid-template-columns: 160px repeat(4, 214px); // column-gap: 14px; - grid-template-columns: repeat(4, 235); + grid-template-columns: 160px repeat(3, 235); column-gap: 52px; } @@ -66,10 +70,10 @@ &:nth-child(2), &:nth-child(3) { - // For use when displaying enhanced card - // &:nth-child(4), - // For use when displaying extra indicator cards - // &:nth-child(5) { + // For use when displaying enhanced card + // &:nth-child(4), + // For use when displaying extra indicator cards + // &:nth-child(5) { @media #{$tablet-portrait} { font-size: $font-size-large; } diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart.js b/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart.js index 758074e2e0..86863e896e 100644 --- a/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart.js +++ b/app/javascript/app/components/ndcs/ndcs-enhancements-2025-tracker-chart/ndcs-enhancements-2025-tracker-chart.js @@ -25,7 +25,7 @@ function Ndc2025TrackerChartContainer(props) { const handleInfoClick = () => { setModalMetadata({ category: 'NDC Content Map', - slugs: '2025_status', + slugs: '2025_ndc', open: true }); }; diff --git a/app/javascript/app/components/ndcs/ndcs-enhancements-map/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip.jsx b/app/javascript/app/components/ndcs/ndcs-enhancements-map/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip.jsx index dc2bfac1b5..71ba9dfd2c 100644 --- a/app/javascript/app/components/ndcs/ndcs-enhancements-map/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip.jsx +++ b/app/javascript/app/components/ndcs/ndcs-enhancements-map/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip.jsx @@ -9,7 +9,7 @@ import tooltipTheme from 'styles/themes/map-tooltip/map-tooltip.scss'; import styles from 'components/ndcs/ndcs-enhancements-map/ndcs-enhancements-tooltip/ndcs-enhancements-tooltip-styles.scss'; const NDCSEnhancementsTooltip = props => { - const { tooltipValues, id } = props; + const { tooltipValues, id, is2025 } = props; return ( { {tooltipValues.statement && (

{tooltipValues.statement}

)} - {tooltipValues.indicators && ( -
    - {tooltipValues.indicators.map(([indicator, value]) => ( -
  • - - {indicator} -
    • - ))} -
- )} - {tooltipValues.note && ( -

- {tooltipValues.note} -

- )} + {tooltipValues.indicators && + // Dont show comparison if it is 2025 and the value is 'No New NDC' + !(is2025 && tooltipValues.value === 'No New NDC') && ( +
    + {tooltipValues.indicators.map(([indicator, value]) => ( +
  • + + {indicator} +
    • + ))} +
+ )} + {tooltipValues.note && + !(is2025 && tooltipValues.value === 'No New NDC') && ( +

+ {tooltipValues.note} +

+ )} ); @@ -54,7 +57,8 @@ const NDCSEnhancementsTooltip = props => { NDCSEnhancementsTooltip.propTypes = { tooltipValues: PropTypes.object, - id: PropTypes.string + id: PropTypes.string, + is2025: PropTypes.bool }; export default NDCSEnhancementsTooltip; diff --git a/app/javascript/app/data/constants.js b/app/javascript/app/data/constants.js index dfcc32672e..dd8444ed5f 100644 --- a/app/javascript/app/data/constants.js +++ b/app/javascript/app/data/constants.js @@ -404,9 +404,6 @@ export const ENHANCEMENT_LABEL_SLUGS = { }; export const NDC_2025_LABEL_SLUGS = { - // SUBMITTED_2025_WITH_2030_AND_2035_TARGETS: - // 'Submitted 2025 NDC with 2030 and 2035 targets', - // SUBMITTED_2025_WITH_2030_TARGET: 'Submitted 2025 NDC with 2030 target', SUBMITTED_2025: 'Submitted 2025 NDC', NO_INFO: 'No Information' }; @@ -424,8 +421,6 @@ export const ENHANCEMENT_LABEL_COLORS = { export const NDC_2025_LABEL_COLORS = { SUBMITTED_2025: CHART_NAMED_COLORS.color2, - SUBMITTED_2025_WITH_2030_AND_2035_TARGETS: CHART_NAMED_COLORS.color1, - SUBMITTED_2025_WITH_2030_TARGET: CHART_NAMED_COLORS.color3, NO_SUBMISSION: '#999C9F' }; @@ -525,30 +520,30 @@ export const ENHANCEMENT_LABELS_WITH_LETTERS = [ export const ENHANCEMENT_2025_LABELS_WITH_LETTERS = [ { value: '2035 GHG target included', - letter: 'I', - label: '2035 GHG target included' + letter: 'N', + label: 'New Target: 2035 GHG target included ' }, { value: 'Economy-wide GHG target (for 2035) included', letter: 'E', - label: 'Economy-wide GHG target (for 2035) included' + label: 'Economy-wide: Economy-wide 2035 GHG target included' }, { value: 'Strengthened 2030 target', - letter: 'S', - label: 'Strengthened 2030 target' + letter: 'M', + label: 'Mitigation: Strengthened 2030 GHG Target ' }, { value: 'Strengthened adaptation', letter: 'A', - label: 'Strengthened adaptation' + label: 'Adaptation: Strengthened Adaptation' }, { value: 'Provided additional Information for clarity, transparency, and understanding', - letter: 'P', + letter: 'I', label: - 'Provided additional Information for clarity, transparency, and understanding' + 'Information: Provided additional Information for clarity, transparency, and understanding ' } ]; @@ -567,12 +562,8 @@ export const NDC_2025_COLORS = { }; export const LEGEND_STATUS_2025_VALUES_COLORS = { - // 'Submitted 2025 NDC with 2030 and 2035 targets': - // NDC_2025_LABEL_COLORS.SUBMITTED_2025_WITH_2030_AND_2035_TARGETS, - // 'Submitted 2025 NDC with 2030 target': - // NDC_2025_LABEL_COLORS.SUBMITTED_2025_WITH_2030_TARGET, - 'Submitted 2025 NDC': NDC_2025_LABEL_COLORS.SUBMITTED_2025, - 'No information': NDC_2025_LABEL_COLORS.NO_SUBMISSION, + 'New NDC': NDC_2025_LABEL_COLORS.SUBMITTED_2025, + 'No New NDC': NDC_2025_LABEL_COLORS.NO_SUBMISSION, 'Not Applicable: Countries that are not a Party to the UNFCCC': NDC_2025_COLORS.lightGray }; @@ -585,18 +576,30 @@ export const LEGEND_COMPARISON_2025_VALUES_COLORS = { }; export const LEGEND_COMPARISON_2025_LETTERS = [ - { value: '2025_compare_1', letter: 'I', label: '2035 GHG target included' }, + { + value: '2025_compare_1', + letter: 'N', + label: 'New Target: 2035 GHG target included ' + }, { value: '2025_compare_2', letter: 'E', - label: 'Economy-wide GHG target (for 2035) included' + label: 'Economy-wide: Economy-wide 2035 GHG target included' + }, + { + value: '2025_compare_3', + letter: 'M', + label: 'Mitigation: Strengthened 2030 GHG Target ' + }, + { + value: '2025_compare_4', + letter: 'A', + label: 'Adaptation: Strengthened Adaptation' }, - { value: '2025_compare_3', letter: 'S', label: 'Strengthened 2030 target' }, - { value: '2025_compare_4', letter: 'A', label: 'Strengthened adaptation' }, { value: '2025_compare_5', - letter: 'P', + letter: 'I', label: - 'Provided additional Information for clarity, transparency, and understanding' + 'Information: Provided additional Information for clarity, transparency, and understanding' } ]; diff --git a/app/javascript/app/data/seo.js b/app/javascript/app/data/seo.js index 2b279e7c6c..087370fee6 100644 --- a/app/javascript/app/data/seo.js +++ b/app/javascript/app/data/seo.js @@ -87,7 +87,8 @@ export const STATIC_TITLE_PARTS = { [SEO_PAGES.ltsExplore]: 'Explore Long-Term Strategies (LTS)', [SEO_PAGES.ltsCountry]: '| Long-Term Strategy (LTS) ', [SEO_PAGES.ndc2020]: '2020 NDC Enhancements', - [SEO_PAGES.ndc2025]: '2025 NDC Enhancements', + [SEO_PAGES.ndc2025]: + 'Nationally Determined Contributions (NDC) Tracker | 2025 NDCs | NDCs 3.0', [SEO_PAGES.netZero]: '| Net-Zero Targets', [SEO_PAGES.ndcSdg]: 'Explore NDC-SDG Linkages', [SEO_PAGES.compare]: 'Compare climate targets', @@ -112,6 +113,8 @@ export const getDescription = ({ page, countryName = '' }) => { 'Climate Watch is an open online platform designed to empower users with the climate data, visualizations and resources they need to gather insights on national and global progress on climate change, sustainable development, and help advance the goals of the Paris Agreement.', [SEO_PAGES.ndc2020]: 'Climate Watch is an open online platform designed to empower users with the climate data, visualizations and resources they need to gather insights on national and global progress on climate change, sustainable development, and help advance the goals of the Paris Agreement.', + [SEO_PAGES.ndc2025]: + 'Climate Watch is an open online platform designed to empower users with the climate data, visualizations and resources they need to gather insights on national and global progress on climate change, sustainable development, and help advance the goals of the Paris Agreement.', [SEO_PAGES.sector]: 'Explore sectoral profiles, global and by country, for historical and projected emissions, overview of sectoral measures included in Nationally Determined Contributions (NDC), and more', [SEO_PAGES.country]: diff --git a/app/javascript/app/pages/ndcs-enhancements-2025/ndcs-enhancements-2025-component.jsx b/app/javascript/app/pages/ndcs-enhancements-2025/ndcs-enhancements-2025-component.jsx index d277f3542a..748329eb64 100644 --- a/app/javascript/app/pages/ndcs-enhancements-2025/ndcs-enhancements-2025-component.jsx +++ b/app/javascript/app/pages/ndcs-enhancements-2025/ndcs-enhancements-2025-component.jsx @@ -19,7 +19,7 @@ const NDCSEnhancements2025 = ({ route }) => (
The Paris Agreement calls on countries to deliver new Nationally Determined Contributions (NDCs) every five years that are informed by the latest advances in technology, science and shifting economic trends.

' diff --git a/app/javascript/app/routes/app-routes/NDCS-routes/NDCS-routes.js b/app/javascript/app/routes/app-routes/NDCS-routes/NDCS-routes.js index c2d9d8ceaf..ba2ff2c152 100644 --- a/app/javascript/app/routes/app-routes/NDCS-routes/NDCS-routes.js +++ b/app/javascript/app/routes/app-routes/NDCS-routes/NDCS-routes.js @@ -25,7 +25,7 @@ export default [ }, { path: '/2025-ndc-tracker', - label: '2025 NDC Tracker', + label: 'NDC Tracker', activeId }, {