Data page: About this data (& refactor shared components)

[sophiamersmann]

Description

Implements the redesigned About this data section and refactors shared data page components.

About this data section:

• Updating the design meant adding a few pieces of metadata, including unit, additionalInfo and the indicator's title

Refactor:

• Component-specific styles are moved into a scss file next to the component file
• Grid-related styles and classes are removed (shared components simply take up the full width of the parent container)
• <IndicatorBrief /> is split into two components, <IndicatorKeyData /> and <IndicatorDescriptions /> (makes it a little easier for the sources modal)
• Metadata helper functions are moved into metadataHelpers.ts in the utils folder

Other changes:

• I didn't touch any of the logic; with some exceptions (hehe)
  • Origins are deduplicated based on their label (name of producer, title of data product)
  • The heading of a source shows the producer and title of the data product (needs Marwa's input)
• I fixed minor visual glitches

Open questions

• Should we keep referring to indicators in code as "variables", or do we want to start using both terms interchangeably?

[sophiamersmann]

Current dependencies on/for this PR:

• master
  • PR Data pages: show chart as full width #2879
    • PR ✨ Data pages: enable rendering of data pages on all eligible data pages, remove old datapage #2848
      • PR 🤹 Data pages: merge Sophia's changes to the about this data section #2880
      • PR 🎉 Add related research and writing via content graph to data pages #2739
        • PR Data page: About this data (& refactor shared components) #2853 👈
          • PR Build sources modal from shared components #2877
            • PR Sources modal: Multiple indicators #2886
              • PR Data page: About this data (updated design) #2914
                • PR Data page / Sources modal: Bug fixes #2918
                  • PR 🔨 restrict datapages to only charts with vars that have any description* set #2920
                  • PR 🔨 show default thumbnail if none is available #2922
                  • PR improve-citation-block #2929
                  • PR enhance: TextWrap opens and closes every HTML tag #2927
                  • PR fix(datapages): don't bind charts in the all charts block to the window #2921
                  • PR Data pages: final tweaks #2931

This stack of pull requests is managed by Graphite.

[danyx23]

Very nice work! The components are so much tidier now, love it :)

I have one comment about prefering not to switch to an enum - otherwise this is good to ship!

[danyx23]

This looks interesting but exceeds my CSS understanding. What does this do?

[sophiamersmann]

I think this is code I copied over. It makes it so, that the content doesn't wrap into a new line. Instead, if the content overflows, three dots "..." are added at the end of the line

[danyx23]

Very nice work! The components are so much tidier now, love it :)

I have one comment about prefering not to switch to an enum - otherwise this is good to ship!

[sophiamersmann]

@danyx23 Ah, I think for now we're referring to indicators as "variables" in code. Should I rename the components to use "Variable" instead of "Indicator" or should we just start using both terms interchangeably?

[danyx23]

Yeah this is a bit tricky. I think when communicating to the user it should always be Indicator. In the database etc it will be Variable for a long time probably. For cases like components it's a bit open. I'd say let's use both and for entirely new components like here use Indicator?

[sophiamersmann]

sounds good to me!

thanks for the quick review, Daniel!

[danyx23]

Merge activity

• Nov 27, 6:24 AM: @danyx23 started a stack merge that includes this pull request via Graphite.
• Nov 27, 6:26 AM: @danyx23 merged this pull request with Graphite.