Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add iso code columns to the GHG Emissions module's data downloads #1668

Merged
merged 4 commits into from
Jul 18, 2023

Conversation

SARodrigues
Copy link
Collaborator

@SARodrigues SARodrigues commented Jul 6, 2023

This PR is the frontend counterpart to adding an ISO code column to data downloads.

While the Data Explorer's CSV downloads come from our API (with the exception of Pathways, which is downloaded from a third party API), the GHG Emissions CSV is generated by the frontend, based on the data passed onto the table.

Implementation choices

Because the data displayed and the data downloaded won't necessarily be the same anymore, I see two options:

  1. Add a getDownloadData selector
    • the existing getTableData could make use of it and simply remove the iso in order to parse the data for the table
      I feel this would be confusing for future development as it would deviate from the implementation in other modules
  2. Add the iso to the existing getTableData selector
    • and add a mechanism/prop in the general table component to allow us to hide the new column

In this PR I opted for the second option because:

  • it requires the least amount of code changes; less probability of introducing bugs
  • it keeps the selectors' implementation consistent with other modules
    getData returns chart data, getTableData returns table data, CSV downloads are still based on the latter
  • we get a new reusable mechanism to use in other modules in which the tabular data displayed may not be consistent with the downloadable data (and the latter is generated in the frontend)

Caveats

I'm not exactly the biggest fan of conditionally adding the iso to the data based on the model in this way (done because we'll only need the iso when the user has chosen to show the data by either countries or regions, but not sectors or gas) nor specifying the columns in this way .

I've pondered a similar implementation to the one in the data explorer, but it feels like it would be bug prone due to the usage of GHG_TABLE_HEADER in places such as here. Worth considering in the future, but perhaps not now due to limitations.

How to test

  • Visit: http://localhost:3000/ghg-emissions
  • Ensure that, when the user clicks the "Download current data button":
    • When the user has selected to show data by "Countries" or "Regions"
      • The resulting CSV includes the ISO code
    • When the user has selected to show data by "Sectors" or "Gases"
      • The resulting CSV does not include the ISO code
    • The table itself (columns in particular) remain unchanged

@what-the-diff
Copy link

what-the-diff bot commented Jul 6, 2023

PR Summary

  • Introduction of Hidden Columns Configuration in Emissions Component
    Our team modified the Greenhouse Gas (GHG) Emissions Component, specifically allowing certain columns to be hidden depending on the requirements. This ensures that only relevant data is displayed, leading to quicker and more efficient analysis.

  • Model-Specific Data Handling in Emissions Selector Table Data
    There's an update in the Emissions Selector Table Data, adding a condition that checks if the model in use is 'regions'. This makes data loading dynamic, showing different sets of data based on the model selected, providing a more customized and user-specific experience.

  • Modification of Default Column Order in GHG Emissions
    A revision has been made to the original column ordering in the GHG Emissions by including 'iso'. This adjustment has reconsidered 'iso' as a valuable contributor to the dataset representation.

  • Hidden Columns Configuration and Filtration in Table Component
    The team has added a feature in the Table Component where hidden columns can be predefined and effectively filtered out. So, columns that are deemed as less necessary can be hidden right away, making data representation cleaner and less cluttered.

@@ -52,6 +52,8 @@ export const getTableData = createSelector(
return { [String(d.x)]: formatValue(d[c.value]) }; // year: value
};
return yColumnOptions.map(c => ({
// Conditionally add ISO to the data when countries or regions is selected
...(model === 'regions' && { iso: c.iso }),
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note: the model is also regions when the user selects to show data by Countries

@SARodrigues SARodrigues self-assigned this Jul 6, 2023
@SARodrigues SARodrigues marked this pull request as ready for review July 6, 2023 15:03
const activeColumnNames = activeColumns.map(c => c.value);
const activeColumnNames = activeColumns
.map(c => c.value)
.filter(c => !hiddenColumns.includes(c));
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not 100% sure about this.

I mostly wanted to avoid the activeColumns implementation altogether to prevent bugs, as it seems to rely on the column labels to end with the NotShow string. Because it affects other modules and due to time constraints I worked around this, though I believe it'd be ideal to refactor it in the future.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, maybe we can filter that column before it arrives to the table-component in the future

@@ -182,7 +185,7 @@ function TableComponent(props) {
>
<AutoSizer disableHeight>
{({ width }) =>
(splittedColumns ? (
splittedColumns ? (
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No actual changes here, automated VSCode changes due to ESlint config.

Copy link
Collaborator

@Bluesmile82 Bluesmile82 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! Not sure if the hiddenColumns is the clearest option for the developers to understand this columns go only to the download, but as you say maybe this is the option with the less changes so probably the best for this case

@SARodrigues SARodrigues merged commit 88a9e9a into develop Jul 18, 2023
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants