Updates to race labels incl. Indigenous on frontend (#3443)

# Description and Motivation  - closes #3442 - move repeated footnote about race relabelings from the card-level footnote to a single, larger report-level footnote - adjusts language in methodology to reflect our race relabelings - remove unneeded lazy load - adjust minor styling tweaks ## Has this been tested? How? - `npm run e2e:nightly` passes locally - non-NH topic reports don't show NH footnote; NH topic reports do ## Screenshots (if appropriate) <img width="1564" alt="Screenshot 2024-07-05 at 9 34 59 AM" src="https://github.com/SatcherInstitute/health-equity-tracker/assets/41567007/1410cc40-2b13-43f1-85e3-74eed71e9d37"> <img width="918" alt="Screenshot 2024-07-05 at 9 36 09 AM" src="https://github.com/SatcherInstitute/health-equity-tracker/assets/41567007/2878822a-b89f-470e-b441-513a7cc8937c"> <img width="918" alt="Screenshot 2024-07-05 at 9 37 25 AM" src="https://github.com/SatcherInstitute/health-equity-tracker/assets/41567007/3e0889aa-c5c9-4aa4-8443-38bcaeeba150"> <img width="918" alt="Screenshot 2024-07-05 at 9 44 13 AM" src="https://github.com/SatcherInstitute/health-equity-tracker/assets/41567007/2bbf1411-cd70-42f8-8197-a61777cc250b"> ## Types of changes (leave all that apply) - New content or feature ## New frontend preview link is below in the Netlify comment 😎
SatcherInstitute · Jul 5, 2024 · e0c0cf1 · e0c0cf1
1 parent 6815916
commit e0c0cf1
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 40 deletions.
diff --git a/frontend/src/cards/CardWrapper.tsx b/frontend/src/cards/CardWrapper.tsx
@@ -74,7 +74,7 @@ function CardWrapper(props: {
             {props.children(queryResponses, metadata, geoData)}
             {!props.hideFooter && props.queries && (
               <Sources
-                hideNH={props.hideNH}
+
                 isCensusNotAcs={props.isCensusNotAcs}
                 metadata={metadata}
                 queryResponses={queryResponses}

diff --git a/frontend/src/cards/ui/Sources.tsx b/frontend/src/cards/ui/Sources.tsx
@@ -2,12 +2,11 @@ import { type MapOfDatasetMetadata } from '../../data/utils/DatasetTypes'
 import { METHODOLOGY_PAGE_LINK } from '../../utils/internalRoutes'
 import { type MetricQueryResponse } from '../../data/query/MetricQuery'
 import {
-  type DatasetId,
   DatasetMetadataMap,
+  type DatasetId,
   type DatasetIdWithStateFIPSCode,
 } from '../../data/config/DatasetMetadata'
 import {
-  type DropdownVarId,
   type DataTypeConfig,
 } from '../../data/config/MetricConfig'
 import { useAtomValue } from 'jotai'
@@ -24,7 +23,6 @@ import {
 import SourcesInfo from './SourcesInfo'
 import { PHRMA_DATATYPES } from '../../data/providers/PhrmaProvider'
 import {
-  getParentDropdownFromDataTypeId,
   getConfigFromDataTypeId,
   CategoryTypeId,
 } from '../../utils/MadLibs'
@@ -103,31 +101,20 @@ export function Sources(props: SourcesProps) {
     <footer className='px-1 py-0 text-left text-smallest'>
       <p className='w-full'>
         <>{optionalDefinition}</>
+        <>{showNhFootnote ? 'Note. (NH) indicates ‘Non-Hispanic’. ' : ''}</>
         View{' '}
         <HashLink to={methodologyLink}>
           methodology
         </HashLink>
         .
       </p>
 
-      {/* NH note (if needed) listed first, full-width */}
-      <div className='w-full'>
-        {showNhFootnote && (
-          <p className='mb-0 mt-1'>
-            Note. NH: Non-Hispanic. To promote inclusion, we replace the source
-            data labels <i>‘Multiracial’</i> with <i>‘Two or more races’</i>,
-            and <i>‘Some other’</i> with <i>‘Unrepresented’</i>.{' '}
-          </p>
-        )}
-      </div>
-
       <div
-        className={`${
-          props.isMulti ? 'xs:w-8/12 sm:w-9/12 md:w-10/12' : 'w-full'
-        }`}
+        className={`${props.isMulti ? 'xs:w-8/12 sm:w-9/12 md:w-10/12' : 'w-full'
+          }`}
       >
         <SourcesInfo dataSourceMap={dataSourceMap} />
       </div>
-    </footer>
+    </footer >
   )
 }
diff --git a/frontend/src/pages/Methodology/methodologyContent/RacesAndEthnicitiesDefinitions.ts b/frontend/src/pages/Methodology/methodologyContent/RacesAndEthnicitiesDefinitions.ts
@@ -1,8 +1,4 @@
-import { Helmet } from 'react-helmet-async'
 import { GLOSSARY_LINK } from '../../../utils/internalRoutes'
-import HetNotice from '../../../styles/HetComponents/HetNotice'
-import HetTerm from '../../../styles/HetComponents/HetTerm'
-import { urlMap } from '../../../utils/externalUrls'
 
 export interface DataItem {
   topic: string
@@ -54,14 +50,14 @@ export const raceDefinitions: DataItem =
       key: 'Indigenous',
       path: '#race-eth-aian',
       description:
-        'A person having origins in any of the original peoples of North and South America (including Central America), who maintains tribal affiliation or community attachment.',
+        'A person having origins in any of the original peoples of North and South America (including Central America), who maintains tribal affiliation or community attachment. Many of our data sources report this category as “American Indian and Alaska Native”.',
       resource: GLOSSARY_LINK + '#aian-resources',
       considerations: [
 
         {
           title: 'General Considerations',
           points: [
-            'Many states do not record data for the Indigenous racial categories, often grouping these individuals into other categories.',
+            'Many states do not record data for “Indigenous” or “American Indian and Alaska Native”, often grouping these individuals into other categories.',
           ],
         },
       ],
@@ -105,9 +101,6 @@ export const raceDefinitions: DataItem =
         'A person having origins in any of the Black racial groups of Africa.',
     },
 
-
-
-
     {
       key: 'Unrepresented race',
       path: '#race-eth-other',

diff --git a/frontend/src/reports/ReportProvider.tsx b/frontend/src/reports/ReportProvider.tsx
@@ -15,13 +15,13 @@ import {
 } from '../data/config/MetricConfig'
 import DefinitionsList from './ui/DefinitionsList'
 import LifelineAlert from './ui/LifelineAlert'
-import LazyLoad from 'react-lazyload'
 import IncarceratedChildrenLongAlert from './ui/IncarceratedChildrenLongAlert'
 import { type ScrollableHashId } from '../utils/hooks/useStepObserver'
 import WhatDataAreMissing from './WhatDataAreMissing'
 import HetLinkButton from '../styles/HetComponents/HetLinkButton'
-import { DATA_CATALOG_PAGE_LINK } from '../utils/internalRoutes'
+import { DATA_CATALOG_PAGE_LINK, RACES_AND_ETHNICITIES_LINK } from '../utils/internalRoutes'
 import AnnouncementBanner from './ui/AnnouncementBanner'
+import { RaceRelabelingsList } from './ui/RaceRelabelingsList'
 
 export const SINGLE_COLUMN_WIDTH = 12
 
@@ -166,11 +166,10 @@ function ReportProvider(props: ReportProviderProps) {
   return (
     <>
       <div
-        className={`mx-auto my-0 w-full ${
-          props.isSingleColumn
-            ? ' max-w-exploreDataPage'
-            : 'max-w-exploreDataTwoColumnPage'
-        }`}
+        className={`mx-auto my-0 w-full ${props.isSingleColumn
+          ? ' max-w-exploreDataPage'
+          : 'max-w-exploreDataTwoColumnPage'
+          }`}
       >
         {props.showLifeLineAlert && <LifelineAlert />}
         {props.showAnnouncementBanner && <AnnouncementBanner />}
@@ -192,9 +191,12 @@ function ReportProvider(props: ReportProviderProps) {
               >
                 Definitions:
               </h3>
-              <LazyLoad offset={300} height={181} once>
-                <DefinitionsList dataTypesToDefine={metricConfigSubset} />
-              </LazyLoad>
+              <DefinitionsList dataTypesToDefine={metricConfigSubset} />
+              <RaceRelabelingsList />
+
+              <HetLinkButton href={RACES_AND_ETHNICITIES_LINK}>
+                See our methodology →
+              </HetLinkButton>
             </div>
           )}
 
@@ -203,7 +205,7 @@ function ReportProvider(props: ReportProviderProps) {
           <p>Unfortunately there are crucial data missing in our sources.</p>
 
           <HetLinkButton href={DATA_CATALOG_PAGE_LINK}>
-            See Our Data Sources →
+            See our data sources →
           </HetLinkButton>
 
           <WhatDataAreMissing

diff --git a/frontend/src/reports/WhatDataAreMissing.tsx b/frontend/src/reports/WhatDataAreMissing.tsx
@@ -70,7 +70,7 @@ export default function WhatDataAreMissing(props: WhatDataAreMissingProps) {
       {isAHR && <MissingAHRData />}
       {isWisqars && <MissingWisqarsData />}
 
-      <div className='mt-8 rounded-md bg-infobarColor px-2 py-1'>
+      <div className='mt-8 rounded-md bg-methodologyGreen px-2 py-1'>
         <p className='px-8 py-4 text-center'>
           Do you have information that belongs on the Health Equity Tracker?{' '}
           <LinkWithStickyParams to={ABOUT_US_PAGE_LINK}>

diff --git a/frontend/src/reports/ui/RaceRelabelingsList.tsx b/frontend/src/reports/ui/RaceRelabelingsList.tsx
@@ -0,0 +1,39 @@
+import HetTerm from "../../styles/HetComponents/HetTerm";
+
+export function RaceRelabelingsList() {
+  return (
+    <aside className='px-5 pb-10'>
+      <h4 className='m-0 pb-5  text-title font-semibold'>
+        Race group reclassifications
+      </h4>
+      <p>To promote inclusion, we reclassify certain race groups from the source data as outlined below:</p>
+
+      <ul>
+        <li
+          className='pt-1'
+        >
+          <HetTerm>
+            Two or more races
+          </HetTerm> replaces the source label ‘Multiracial’.
+        </li>
+
+        <li
+          className='pt-1'
+        >
+          <HetTerm>
+            Unrepresented
+          </HetTerm> replaces the source label ‘Some other race’.
+        </li>
+
+        <li
+          className='pt-1'
+        >
+          <HetTerm>
+            Indigenous
+          </HetTerm> replaces the source label ‘American Indian and Alaska Native’.
+        </li>
+      </ul>
+
+    </aside>
+  )
+}