From 124a5eef6b4b13d386cb73856cf0305abce0cd9f Mon Sep 17 00:00:00 2001 From: eriwarr Date: Wed, 25 Sep 2024 11:27:47 -0500 Subject: [PATCH 1/3] updating key where index is being used --- frontend/src/pages/DataCatalog/DataCatalogPage.tsx | 2 +- .../Methodology/methodologyComponents/GlossaryTerm.tsx | 4 ++-- .../methodologySections/BehavioralHealthLink.tsx | 2 +- .../methodologySections/ChronicDiseaseLink.tsx | 2 +- .../methodologySections/CommunitySafetyLink.tsx | 2 +- .../pages/Methodology/methodologySections/Covid19Link.tsx | 2 +- .../src/pages/Methodology/methodologySections/HivLink.tsx | 2 +- .../methodologySections/MedicationUtilizationLink.tsx | 2 +- .../pages/Methodology/methodologySections/PdohLink.tsx | 2 +- .../pages/Methodology/methodologySections/SdohLink.tsx | 2 +- .../Policy/policySections/ReformOpportunitiesTab.tsx | 6 +++--- frontend/src/pages/WhatIsHealthEquity/EquityTab.tsx | 8 ++++---- frontend/src/styles/HetComponents/HetTags.tsx | 4 ++-- 13 files changed, 20 insertions(+), 20 deletions(-) diff --git a/frontend/src/pages/DataCatalog/DataCatalogPage.tsx b/frontend/src/pages/DataCatalog/DataCatalogPage.tsx index 8c61911c8a..7ab72b4d2d 100644 --- a/frontend/src/pages/DataCatalog/DataCatalogPage.tsx +++ b/frontend/src/pages/DataCatalog/DataCatalogPage.tsx @@ -91,7 +91,7 @@ export default function DataCatalogPage() { return ( <> {filteredDatasets.map((sourceId, index) => ( -
  • +
  • - {sortedDefinitionItems.map(([itemKey, itemVal], index) => { + {sortedDefinitionItems.map(([itemKey, itemVal]) => { const glossaryDefinition = itemVal.definitions.find( (def) => def.key === 'Measurement Definition', )?.description return ( -
    +

    {itemKey}

    diff --git a/frontend/src/pages/Methodology/methodologySections/BehavioralHealthLink.tsx b/frontend/src/pages/Methodology/methodologySections/BehavioralHealthLink.tsx index 979e6829c3..fc259d5e4b 100644 --- a/frontend/src/pages/Methodology/methodologySections/BehavioralHealthLink.tsx +++ b/frontend/src/pages/Methodology/methodologySections/BehavioralHealthLink.tsx @@ -94,7 +94,7 @@ export default function BehavioralHealthLink() { rows={behavioralHealthDataSources.map((source, index) => ({ source: ( {source.data_source_name} diff --git a/frontend/src/pages/Methodology/methodologySections/ChronicDiseaseLink.tsx b/frontend/src/pages/Methodology/methodologySections/ChronicDiseaseLink.tsx index 12aa31e352..3227089e7a 100644 --- a/frontend/src/pages/Methodology/methodologySections/ChronicDiseaseLink.tsx +++ b/frontend/src/pages/Methodology/methodologySections/ChronicDiseaseLink.tsx @@ -89,7 +89,7 @@ const ChronicDiseaseLink = () => { rows={chronicDiseaseDataSources.map((source, index) => ({ source: ( {source.data_source_name} diff --git a/frontend/src/pages/Methodology/methodologySections/CommunitySafetyLink.tsx b/frontend/src/pages/Methodology/methodologySections/CommunitySafetyLink.tsx index 38ac389d8f..475d9d2dd5 100644 --- a/frontend/src/pages/Methodology/methodologySections/CommunitySafetyLink.tsx +++ b/frontend/src/pages/Methodology/methodologySections/CommunitySafetyLink.tsx @@ -178,7 +178,7 @@ const CommunitySafetyLink = () => { rows={communitySafetyDataSources.map((source, index) => ({ source: ( {source.data_source_name} diff --git a/frontend/src/pages/Methodology/methodologySections/Covid19Link.tsx b/frontend/src/pages/Methodology/methodologySections/Covid19Link.tsx index 17363cf34a..2ea870b30a 100644 --- a/frontend/src/pages/Methodology/methodologySections/Covid19Link.tsx +++ b/frontend/src/pages/Methodology/methodologySections/Covid19Link.tsx @@ -302,7 +302,7 @@ export default function Covid19Link() { rows={covidDataSources.map((source, index) => ({ source: ( {source.data_source_name} diff --git a/frontend/src/pages/Methodology/methodologySections/HivLink.tsx b/frontend/src/pages/Methodology/methodologySections/HivLink.tsx index 6b13bd7bf8..e0bd8e17bf 100644 --- a/frontend/src/pages/Methodology/methodologySections/HivLink.tsx +++ b/frontend/src/pages/Methodology/methodologySections/HivLink.tsx @@ -571,7 +571,7 @@ const HivLink = () => { rows={hivDataSources.map((source, index) => ({ source: ( {source.data_source_name} diff --git a/frontend/src/pages/Methodology/methodologySections/MedicationUtilizationLink.tsx b/frontend/src/pages/Methodology/methodologySections/MedicationUtilizationLink.tsx index 0e6b86625f..b0bd3d0e23 100644 --- a/frontend/src/pages/Methodology/methodologySections/MedicationUtilizationLink.tsx +++ b/frontend/src/pages/Methodology/methodologySections/MedicationUtilizationLink.tsx @@ -415,7 +415,7 @@ export default function MedicareMedicationLink() { rows={medicareMedicationDataSources.map((source, index) => ({ source: ( {source.data_source_name} diff --git a/frontend/src/pages/Methodology/methodologySections/PdohLink.tsx b/frontend/src/pages/Methodology/methodologySections/PdohLink.tsx index 0fb9303d94..2f40596697 100644 --- a/frontend/src/pages/Methodology/methodologySections/PdohLink.tsx +++ b/frontend/src/pages/Methodology/methodologySections/PdohLink.tsx @@ -369,7 +369,7 @@ const PdohLink = () => { rows={pdohDataSources.map((source, index) => ({ source: ( {source.data_source_name} diff --git a/frontend/src/pages/Methodology/methodologySections/SdohLink.tsx b/frontend/src/pages/Methodology/methodologySections/SdohLink.tsx index 64708b0f8b..c9ce14dbbf 100644 --- a/frontend/src/pages/Methodology/methodologySections/SdohLink.tsx +++ b/frontend/src/pages/Methodology/methodologySections/SdohLink.tsx @@ -97,7 +97,7 @@ function SdohLink() { rows={sdohDataSources.map((source, index) => ({ source: ( {source.data_source_name} diff --git a/frontend/src/pages/Policy/policySections/ReformOpportunitiesTab.tsx b/frontend/src/pages/Policy/policySections/ReformOpportunitiesTab.tsx index 5dfcf07af1..bb650cd8b4 100644 --- a/frontend/src/pages/Policy/policySections/ReformOpportunitiesTab.tsx +++ b/frontend/src/pages/Policy/policySections/ReformOpportunitiesTab.tsx @@ -41,14 +41,14 @@ export default function ReformOpportunitiesTab() { return (
    - +
    - {NEWS_ARTICLES.slice(0, 2).map((article, index) => ( + {NEWS_ARTICLES.slice(0, 2).map((article) => (
    - {NEWS_ARTICLES.slice(2).map((article, index) => ( + {NEWS_ARTICLES.slice(2).map((article) => ( = ({ tags }) => { return (
    - {tags.map((name, index) => ( + {tags.map((name) => ( {name} From 5ae00e4be0498bbf34d7ee69fdafeefa559e456b Mon Sep 17 00:00:00 2001 From: eriwarr Date: Wed, 25 Sep 2024 12:16:50 -0500 Subject: [PATCH 2/3] updating the remaining index values --- frontend/src/charts/AgeAdjustedTableChart.tsx | 16 +- frontend/src/charts/TableChart.tsx | 18 +- .../pages/ExploreData/DefaultHelperBox.tsx | 3 +- frontend/src/pages/ExploreData/MadLibUI.tsx | 4 +- .../methodologyComponents/CodeBlock.tsx | 21 +- .../methodologyComponents/FormulaFormat.tsx | 31 +-- .../policySections/CrisisOverviewTab.tsx | 54 +++-- .../policySections/HowToUseTheDataTab.tsx | 195 +++++++++--------- 8 files changed, 197 insertions(+), 145 deletions(-) diff --git a/frontend/src/charts/AgeAdjustedTableChart.tsx b/frontend/src/charts/AgeAdjustedTableChart.tsx index 404cb5d48c..6ba5318fd9 100644 --- a/frontend/src/charts/AgeAdjustedTableChart.tsx +++ b/frontend/src/charts/AgeAdjustedTableChart.tsx @@ -147,14 +147,18 @@ export function AgeAdjustedTableChart(props: AgeAdjustedTableChartProps) { - {headerGroups.map((group, index) => ( - - ))} + {headerGroups.map((group, index) => { + const uniqueKey = group.id ? group.id : `group-${index}` + + return + })} - {rows.map((row: ReactTableRowType, index) => ( - - ))} + {rows.map((row: ReactTableRowType, index) => { + const uniqueKey = row.id ? row.id : `row-${index}` + + return + })} diff --git a/frontend/src/charts/TableChart.tsx b/frontend/src/charts/TableChart.tsx index 91fac33ed6..7d87a319cd 100644 --- a/frontend/src/charts/TableChart.tsx +++ b/frontend/src/charts/TableChart.tsx @@ -234,14 +234,18 @@ export function TableChart(props: TableChartProps) {
    - {headerGroups.map((group, index) => ( - - ))} - + {headerGroups.map((group, index) => { + const uniqueKey = group.id ? group.id : `group-${index}` + + return + })} + {' '} - {page.map((row: ReactTableRowType, index) => ( - - ))} + {page.map((row: ReactTableRowType, index) => { + const uniqueKey = row.id ? row.id : `row-${index}` + + return + })} {/* If the number of rows is less than the smallest page size, we can hide pagination */} {props.data.length > MAX_NUM_ROWS_WITHOUT_PAGINATION && ( diff --git a/frontend/src/pages/ExploreData/DefaultHelperBox.tsx b/frontend/src/pages/ExploreData/DefaultHelperBox.tsx index 25a40e3a73..dcf55ca757 100644 --- a/frontend/src/pages/ExploreData/DefaultHelperBox.tsx +++ b/frontend/src/pages/ExploreData/DefaultHelperBox.tsx @@ -31,8 +31,7 @@ export default function DefaultHelperBox() { {reportMappings.map((report, index) => (
  • + {typeof phraseSegment === 'string' ? ( // NON_INTERACTIVE MADLIB WORDS diff --git a/frontend/src/pages/Methodology/methodologyComponents/CodeBlock.tsx b/frontend/src/pages/Methodology/methodologyComponents/CodeBlock.tsx index 8ee3892642..2b3c17be84 100644 --- a/frontend/src/pages/Methodology/methodologyComponents/CodeBlock.tsx +++ b/frontend/src/pages/Methodology/methodologyComponents/CodeBlock.tsx @@ -33,13 +33,20 @@ export const CodeBlock: React.FC = ({ > - {rowData.map((cell, index) => ( - - 
    -                  {cell.content}
-
    -     - ))} + {rowData.map((cell, index) => { + const uniqueKey = + typeof cell.content === 'string' + ? cell.content + : `cell-${index}` + + return ( + + 
    +                    {cell.content}
+
    +     + ) + })}
    • diff --git a/frontend/src/pages/Methodology/methodologyComponents/FormulaFormat.tsx b/frontend/src/pages/Methodology/methodologyComponents/FormulaFormat.tsx index 6ff4cd6c10..6b934fa7d1 100644 --- a/frontend/src/pages/Methodology/methodologyComponents/FormulaFormat.tsx +++ b/frontend/src/pages/Methodology/methodologyComponents/FormulaFormat.tsx @@ -21,18 +21,25 @@ export default function FormulaFormat(props: FormulaFormatProps) {
    {' = '}
    - {props.rightSide.map((item, index) => ( -
    - {typeof item === 'string' ? ( - item - ) : ( - - )} -
    - ))} + {props.rightSide.map((item) => { + const uniqueKey = + typeof item === 'string' + ? item + : `${item.numerator}-${item.denominator}` + + return ( +
    + {typeof item === 'string' ? ( + item + ) : ( + + )} +
    + ) + })}
    ) diff --git a/frontend/src/pages/Policy/policySections/CrisisOverviewTab.tsx b/frontend/src/pages/Policy/policySections/CrisisOverviewTab.tsx index 888d86e90b..f0d0e27c3b 100644 --- a/frontend/src/pages/Policy/policySections/CrisisOverviewTab.tsx +++ b/frontend/src/pages/Policy/policySections/CrisisOverviewTab.tsx @@ -1,5 +1,8 @@ import { Helmet } from 'react-helmet-async' -import { gvaFacts, rocketFoundationFacts } from '../policyContent/CrisisOverviewContent' +import { + gvaFacts, + rocketFoundationFacts, +} from '../policyContent/CrisisOverviewContent' import FactCard from '../policyComponents/FactCard' import { HetOverline } from '../../../styles/HetComponents/HetOverline' import { useIsBreakpointAndUp } from '../../../utils/hooks/useIsBreakpointAndUp' @@ -35,35 +38,58 @@ export default function CrisisOverviewTab() {
    - + +
    - +
    {rocketFoundationFacts.map((rocketFoundationFact, index) => { - const isMobileShadow = !isMdAndUp && index % 2 === 0 - const isDesktopShadow = isMdAndUp && index % 2 !== 0 + const isMobileShadow = !isMdAndUp && index % 2 === 0 + const isDesktopShadow = isMdAndUp && index % 2 !== 0 + const uniqueKey = `fact-${index}` return (
    - +
    ) })}
    - - - - + + + +
      {gvaFacts.map((gvaFact, index) => { + const uniqueKey = `fact-${index}` + return ( -
    • - +
    • +
      • ) })} @@ -90,4 +116,4 @@ export default function CrisisOverviewTab() {
    ) -} \ No newline at end of file +} diff --git a/frontend/src/pages/Policy/policySections/HowToUseTheDataTab.tsx b/frontend/src/pages/Policy/policySections/HowToUseTheDataTab.tsx index 721e8d8361..13a8a48ac8 100644 --- a/frontend/src/pages/Policy/policySections/HowToUseTheDataTab.tsx +++ b/frontend/src/pages/Policy/policySections/HowToUseTheDataTab.tsx @@ -3,99 +3,102 @@ import { dataVisuals } from '../policyContent/HowToUseTheDataContent' import { HetOverline } from '../../../styles/HetComponents/HetOverline' export default function HowToUseTheDataTab() { - return ( -
    - - How To Use The Data - Health Equity Tracker - -

    How To Use The Data

    -
    - -

    - HET Data Visualization Maps and Charts -

    -

    - In Atlanta, as in many cities, gun violence remains a pressing issue, - disproportionately affecting marginalized communities. The open-source - Health Equity Tracker provides vital data that can empower residents - to advocate for meaningful policy changes. By understanding and - utilizing this tool, community members can create compelling - visualizations to highlight the need for reform. This guide offers - straightforward instructions on how to use various data visualizations - effectively. -

    -
    - {dataVisuals.map((dataVisual, index) => ( -
    -
    - - - -

    - {dataVisual.title} -

    - -
    - {dataVisual.customCard} - -

    {dataVisual.description}

    -
    - -
    -
      -
    • -

      - Demographic Granularity -

      -

      - {Array.isArray( - dataVisual.details.demographicGranularities, - ) - ? dataVisual.details.demographicGranularities.join(', ') - : dataVisual.details.demographicGranularities} -

      -
      • -
    • -

      - Geographic Levels -

      -

      - {Array.isArray(dataVisual.details.geographicLevels) - ? dataVisual.details.geographicLevels.join(', ') - : dataVisual.details.geographicLevels} -

      -
      • - {dataVisual.details.alternateBreakdowns !== 'N/A' && ( -
    • -

      - Alternate Disparities Breakdowns -

      -

      - {Array.isArray(dataVisual.details.alternateBreakdowns) - ? dataVisual.details.alternateBreakdowns.join(', ') - : dataVisual.details.alternateBreakdowns} -

      -
      • - )} -
    - -
    -

    -

    - How to Use -

    -
    - {dataVisual.details.howToUse.map((step, i) => ( -

    - {step.step}: {step.description} -

    - ))} -
    -

    -
    -
    -
    - ))} -
    - ) -} \ No newline at end of file + return ( +
    + + How To Use The Data - Health Equity Tracker + +

    How To Use The Data

    +
    + +

    + HET Data Visualization Maps and Charts +

    +

    + In Atlanta, as in many cities, gun violence remains a pressing issue, + disproportionately affecting marginalized communities. The open-source + Health Equity Tracker provides vital data that can empower residents + to advocate for meaningful policy changes. By understanding and + utilizing this tool, community members can create compelling + visualizations to highlight the need for reform. This guide offers + straightforward instructions on how to use various data visualizations + effectively. +

    +
    + {dataVisuals.map((dataVisual, index) => ( +
    +
    + + +

    + {dataVisual.title} +

    + +
    + {dataVisual.customCard} + +

    {dataVisual.description}

    +
    + +
    +
      +
    • +

      + Demographic Granularity +

      +

      + {Array.isArray(dataVisual.details.demographicGranularities) + ? dataVisual.details.demographicGranularities.join(', ') + : dataVisual.details.demographicGranularities} +

      +
      • +
    • +

      + Geographic Levels +

      +

      + {Array.isArray(dataVisual.details.geographicLevels) + ? dataVisual.details.geographicLevels.join(', ') + : dataVisual.details.geographicLevels} +

      +
      • + {dataVisual.details.alternateBreakdowns !== 'N/A' && ( +
    • +

      + Alternate Disparities Breakdowns +

      +

      + {Array.isArray(dataVisual.details.alternateBreakdowns) + ? dataVisual.details.alternateBreakdowns.join(', ') + : dataVisual.details.alternateBreakdowns} +

      +
      • + )} +
    +
    +

    +

    + How to Use +

    +
    + {dataVisual.details.howToUse.map((step, i) => ( +

    + {step.step}: {step.description} +

    + ))} +
    +

    +
    +
    +
    + ))} +
    + ) +} From 813bcdd0589634e02d1cf9becfa623b8119bdbad Mon Sep 17 00:00:00 2001 From: eriwarr Date: Wed, 25 Sep 2024 12:32:31 -0500 Subject: [PATCH 3/3] updating the remaining index values --- frontend/src/charts/AgeAdjustedTableChart.tsx | 19 +++++----- frontend/src/charts/TableChart.tsx | 19 +++++----- frontend/src/pages/ExploreData/MadLibUI.tsx | 6 ++- .../methodologyComponents/CodeBlock.tsx | 28 +++++++------- .../methodologyComponents/FormulaFormat.tsx | 38 +++++++++---------- 5 files changed, 56 insertions(+), 54 deletions(-) diff --git a/frontend/src/charts/AgeAdjustedTableChart.tsx b/frontend/src/charts/AgeAdjustedTableChart.tsx index 6ba5318fd9..1f2cef6b50 100644 --- a/frontend/src/charts/AgeAdjustedTableChart.tsx +++ b/frontend/src/charts/AgeAdjustedTableChart.tsx @@ -147,18 +147,17 @@ export function AgeAdjustedTableChart(props: AgeAdjustedTableChartProps) { - {headerGroups.map((group, index) => { - const uniqueKey = group.id ? group.id : `group-${index}` - - return - })} + {headerGroups.map((group, index) => ( + + ))} - {rows.map((row: ReactTableRowType, index) => { - const uniqueKey = row.id ? row.id : `row-${index}` - - return - })} + {rows.map((row: ReactTableRowType, index) => ( + + ))} diff --git a/frontend/src/charts/TableChart.tsx b/frontend/src/charts/TableChart.tsx index 7d87a319cd..8dd96b0cb9 100644 --- a/frontend/src/charts/TableChart.tsx +++ b/frontend/src/charts/TableChart.tsx @@ -234,18 +234,17 @@ export function TableChart(props: TableChartProps) {
    - {headerGroups.map((group, index) => { - const uniqueKey = group.id ? group.id : `group-${index}` - - return - })} + {headerGroups.map((group, index) => ( + + ))} {' '} - {page.map((row: ReactTableRowType, index) => { - const uniqueKey = row.id ? row.id : `row-${index}` - - return - })} + {page.map((row: ReactTableRowType, index) => ( + + ))} {/* If the number of rows is less than the smallest page size, we can hide pagination */} {props.data.length > MAX_NUM_ROWS_WITHOUT_PAGINATION && ( diff --git a/frontend/src/pages/ExploreData/MadLibUI.tsx b/frontend/src/pages/ExploreData/MadLibUI.tsx index 930a889c90..db2a4ac776 100644 --- a/frontend/src/pages/ExploreData/MadLibUI.tsx +++ b/frontend/src/pages/ExploreData/MadLibUI.tsx @@ -132,7 +132,11 @@ export default function MadLibUI(props: MadLibUIProps) { return ( {typeof phraseSegment === 'string' ? ( // NON_INTERACTIVE MADLIB WORDS diff --git a/frontend/src/pages/Methodology/methodologyComponents/CodeBlock.tsx b/frontend/src/pages/Methodology/methodologyComponents/CodeBlock.tsx index 2b3c17be84..d6cb1a764e 100644 --- a/frontend/src/pages/Methodology/methodologyComponents/CodeBlock.tsx +++ b/frontend/src/pages/Methodology/methodologyComponents/CodeBlock.tsx @@ -33,20 +33,20 @@ export const CodeBlock: React.FC = ({ > - {rowData.map((cell, index) => { - const uniqueKey = - typeof cell.content === 'string' - ? cell.content - : `cell-${index}` - - return ( - - 
    -                    {cell.content}
-
    -     - ) - })} + {rowData.map((cell, index) => ( + + 
    +                  {cell.content}
+
    +     + ))}
    diff --git a/frontend/src/pages/Methodology/methodologyComponents/FormulaFormat.tsx b/frontend/src/pages/Methodology/methodologyComponents/FormulaFormat.tsx index 6b934fa7d1..63cbd780e5 100644 --- a/frontend/src/pages/Methodology/methodologyComponents/FormulaFormat.tsx +++ b/frontend/src/pages/Methodology/methodologyComponents/FormulaFormat.tsx @@ -21,25 +21,25 @@ export default function FormulaFormat(props: FormulaFormatProps) {
    {' = '}
    - {props.rightSide.map((item) => { - const uniqueKey = - typeof item === 'string' - ? item - : `${item.numerator}-${item.denominator}` - - return ( -
    - {typeof item === 'string' ? ( - item - ) : ( - - )} -
    - ) - })} + {props.rightSide.map((item) => ( +
    + {typeof item === 'string' ? ( + item + ) : ( + + )} +
    + ))}
    )