Frontend: Phrma brfss cancer screening setup (SatcherInstitute#3585)

# Description and Motivation
<!--- bulleted, high level items. use keywords (eg "closes SatcherInstitute#144" or
"fixes #4323") -->

- [x] updates metric config, provider, metadata, and madlib with PHRMA
BRFSS Cancer screening topics
- [x] put new topics behind a flag, which is enabled on local, netlify
deploy preview, and dev staging, but not prod.
- [x] comparison population (for eligible subpopulation) is working once
generated on the backend

## Has this been tested? How?

- [x] tests passing

## Screenshots (if appropriate)

## Types of changes

(leave all that apply)

- New content or feature

## New frontend preview link is below in the Netlify comment 😎

.github/workflows/runSuperLinter.yml

@@ -35,6 +35,6 @@ jobs:
           VALIDATE_PYTHON_FLAKE8: true
           VALIDATE_TERRAFORM_FMT: true
           # VALIDATE_GITHUB_ACTIONS: true # TODO: figure out how to just ignore the set-output deprecation warning then re-enable
-          VALIDATE_ENV: true
+          # VALIDATE_ENV: true # TODO: figure out how to lint locally first
           VALIDATE_BASH: true
           VALIDATE_YAML: true

.pre-commit-config.yaml

@@ -53,3 +53,9 @@ repos:
         language: system
         types: [text]
         pass_filenames: false
+  # LINT DOTENV FILES
+  - repo: https://github.com/wemake-services/dotenv-linter
+    rev: 0.5.0 # Use the ref you want to point at
+    hooks:
+      - id: dotenv-linter
+        name: ✅ .env lint with dotenv-linter

cspell.config.json

@@ -185,6 +185,7 @@
 		"domcontentloaded",
 		"Donrie",
 		"dont",
+		"DOTENV",
 		"downloadjs",
 		"dpf",
 		"dreamhost",

frontend/.env.deploy_preview

@@ -2,7 +2,8 @@ VITE_BASE_API_URL=https://dev.healthequitytracker.org
 VITE_DEPLOY_CONTEXT=deploy_preview
 
 # Override specific files to fetch from the public/tmp/ directory
-VITE_FORCE_STATIC=geographies.json
 VITE_SHOW_NEW_MATERNAL_MORTALITY=1
 VITE_SHOW_PHRMA_MENTAL_HEALTH=1
 # PLAYWRIGHT_BASE_URL needs to be set dynamically via the command line, with the associated Netlify preview link
+VITE_FORCE_STATIC=geographies.json
+VITE_SHOW_CANCER_SCREENINGS=1

frontend/.env.staging

@@ -1,6 +1,6 @@
 VITE_DEPLOY_CONTEXT=staging
 # VITE_BASE_API_URL does not need to be set because API calls will be
 # relative to the frontend domain.
-
 VITE_FORCE_STATIC=geographies.json
 VITE_SHOW_PHRMA_MENTAL_HEALTH=1
+VITE_SHOW_CANCER_SCREENINGS=1

frontend/playwright-tests/ami.ci.spec.ts

@@ -1,20 +1,40 @@
-import { test } from '@playwright/test';
+import { test } from '@playwright/test'
 
 test('PHRMA: Medicare AMI', async ({ page }) => {
-  await page.goto('/exploredata?mls=1.medicare_cardiovascular-3.12&group1=85PLUS&dt1=medicare_ami&demo=age');
-  await page.locator('#rate-map').getByRole('heading', { name: 'Rates of Acute MI in Florida' }).click();
-  await page.getByRole('heading', { name: 'Medicare Beneficiaries diagnosed with AMI, Ages 85+' }).click();
-  await page.getByLabel('Legend for rate map').getByRole('img').click();
-  await page.locator('li').filter({ hasText: 'Total population of Medicare Beneficiaries diagnosed with AMI, Ages 18+:' }).click();
-  await page.locator('#rate-chart').getByText('Medicare Administrative Data (data from 2020) ').click();
-  await page.locator('#unknown-demographic-map').getByRole('note').click();
-  await page.getByRole('button', { name: 'Population vs. distribution' }).click();
-  await page.getByLabel('Comparison bar chart showing').getByRole('img').click();
-  await page.getByRole('heading', { name: 'Breakdown summary for acute' }).click();
-  await page.getByText('Gender: The Medicare source').click();
-  await page.getByText('Sexual Orientation:').click();
-  await page.getByText('Sexual Orientation: The').click();
-  await page.getByText('Disability:').click();
-  await page.getByText('Disability: Although').click();
-  await page.getByText('Social and Political').click();
-});
+  await page.goto(
+    '/exploredata?mls=1.medicare_cardiovascular-3.12&group1=85PLUS&dt1=medicare_ami&demo=age',
+  )
+  await page
+    .locator('#rate-map')
+    .getByRole('heading', { name: 'Rates of Acute MI in Florida' })
+    .click()
+  await page
+    .getByRole('heading', {
+      name: 'Medicare Beneficiaries diagnosed with AMI, Ages 85+',
+    })
+    .click()
+  await page.getByLabel('Legend for rate map').getByRole('img').click()
+  await page
+    .locator('li')
+    .filter({
+      hasText:
+        'Total population of Medicare Beneficiaries diagnosed with AMI, Ages 18+:',
+    })
+    .click()
+  await page
+    .locator('#rate-chart')
+    .getByText('Medicare Administrative Data (data from 2020) ')
+    .click()
+  await page.locator('#unknown-demographic-map').getByRole('note').click()
+  await page
+    .getByRole('button', { name: 'Population vs. distribution' })
+    .click()
+  await page.getByLabel('Comparison bar chart showing').getByRole('img').click()
+  await page.getByRole('heading', { name: 'Summary for acute' }).click()
+  await page.getByText('Gender: The Medicare source').click()
+  await page.getByText('Sexual Orientation:').click()
+  await page.getByText('Sexual Orientation: The').click()
+  await page.getByText('Disability:').click()
+  await page.getByText('Disability: Although').click()
+  await page.getByText('Social and Political').click()
+})

frontend/playwright-tests/arv_adherence.nightly.spec.ts

@@ -11,7 +11,10 @@ test('ARV Adherence', async ({ page }) => {
       name: 'Population adherent to antiretrovirals in the United States',
     })
     .click()
-  await page.locator('#rate-map').getByRole('heading', { name: 'Medicare ARV Beneficiaries, Ages 18+' }).click();
+  await page
+    .locator('#rate-map')
+    .getByRole('heading', { name: 'Medicare ARV Beneficiaries, Ages 18+' })
+    .click()
   await page.getByText('Demographic', { exact: true }).nth(2).click()
   await page.getByText('Off').nth(1).click()
   await page.locator('#menu- div').first().click()
@@ -27,7 +30,9 @@ test('ARV Adherence', async ({ page }) => {
     })
     .click()
   await page
-    .getByRole('heading', { name: 'Breakdown summary for adherence to antiretrovirals in the United States' })
+    .getByRole('heading', {
+      name: 'Summary for adherence to antiretrovirals in the United States',
+    })
     .click()
   await page.getByText('Share this report:').click()
   await page.getByRole('heading', { name: 'Definitions:' }).click()
@@ -37,7 +42,7 @@ test('ARV Adherence', async ({ page }) => {
   await page.getByRole('heading', { name: 'What data are missing?' }).click()
   await page
     .getByText(
-      'Do you have information that belongs on the Health Equity Tracker? We would love'
+      'Do you have information that belongs on the Health Equity Tracker? We would love',
     )
     .click()
 })

frontend/playwright-tests/asthma.ci.spec.ts

@@ -23,7 +23,5 @@ test('Asthma', async ({ page }) => {
   await page
     .getByRole('heading', { name: 'Population vs. distribution' })
     .click()
-  await page
-    .getByRole('heading', { name: 'Breakdown summary for asthma' })
-    .click()
+  await page.getByRole('heading', { name: 'Summary for asthma' }).click()
 })

frontend/playwright-tests/beta_blockers.nightly.spec.ts

@@ -2,7 +2,7 @@ import { test } from '@playwright/test'
 
 test('Beta Blockers Adherence', async ({ page }) => {
   await page.goto(
-    '/exploredata?mls=1.medicare_cardiovascular-3.00&group1=All&dt1=beta_blockers_adherence'
+    '/exploredata?mls=1.medicare_cardiovascular-3.00&group1=All&dt1=beta_blockers_adherence',
   )
   await page.getByText('Race and Ethnicity:').click()
   await page.locator('.MuiBackdrop-root').click()
@@ -17,7 +17,7 @@ test('Beta Blockers Adherence', async ({ page }) => {
   await page.locator('#menu- div').first().click()
   await page
     .getByText(
-      'Adherence to beta blockers: Pharmacy Quality Alliance measure representing the p'
+      'Adherence to beta blockers: Pharmacy Quality Alliance measure representing the p',
     )
     .click()
   await page
@@ -32,15 +32,17 @@ test('Beta Blockers Adherence', async ({ page }) => {
     })
     .click()
   await page
-    .getByRole('heading', { name: 'Breakdown summary for adherence to beta blockers in the United States' })
+    .getByRole('heading', {
+      name: 'Summary for adherence to beta blockers in the United States',
+    })
     .click()
   await page.locator('div:nth-child(8)').first().click()
   await page.getByRole('heading', { name: 'Definitions:' }).click()
   await page.getByText('Adherence to beta blockers', { exact: true }).click()
   await page.getByRole('heading', { name: 'What data are missing?' }).click()
   await page
     .getByText(
-      'Do you have information that belongs on the Health Equity Tracker? We would love'
+      'Do you have information that belongs on the Health Equity Tracker? We would love',
     )
     .click()
 })

frontend/playwright-tests/cardiovascular_diseases.nightly.spec.ts

@@ -33,7 +33,7 @@ test('Cardiovascular Diseases', async ({ page }) => {
     .click()
   await page
     .getByRole('heading', {
-      name: 'Breakdown summary for cardiovascular disease in the United States',
+      name: 'Summary for cardiovascular disease in the United States',
     })
     .click()
   await page
@@ -48,7 +48,7 @@ test('Cardiovascular Diseases', async ({ page }) => {
   await page.getByRole('heading', { name: 'What data are missing?' }).click()
   await page
     .getByText(
-      'Do you have information that belongs on the Health Equity Tracker? We would love'
+      'Do you have information that belongs on the Health Equity Tracker? We would love',
     )
     .click()
 })

frontend/playwright-tests/care_avoidance_due_cost.nightly.spec.ts

@@ -13,10 +13,12 @@ test('Care Avoidance Due To Cost', async ({ page }) => {
       name: 'Care avoidance due to cost in the United States',
     })
     .click()
-  await page.getByRole('button', { name: 'Expand state/territory rate' }).click();
+  await page
+    .getByRole('button', { name: 'Expand state/territory rate' })
+    .click()
   await page
     .getByText(
-      'Consider the possible impact of data reporting gaps when interpreting the highest and lowest rates.'
+      'Consider the possible impact of data reporting gaps when interpreting the highest and lowest rates.',
     )
     .click()
   await page
@@ -32,7 +34,7 @@ test('Care Avoidance Due To Cost', async ({ page }) => {
     .click()
   await page
     .getByText(
-      'No unknown values for race and ethnicity reported in this dataset at the state/territory level.'
+      'No unknown values for race and ethnicity reported in this dataset at the state/territory level.',
     )
     .click()
   await page
@@ -42,7 +44,7 @@ test('Care Avoidance Due To Cost', async ({ page }) => {
     .click()
   await page
     .getByRole('heading', {
-      name: 'Breakdown summary for care avoidance due to cost in the United States',
+      name: 'Summary for care avoidance due to cost in the United States',
     })
     .click()
   await page.getByRole('heading', { name: 'Definitions:' }).click()
@@ -59,7 +61,7 @@ test('Care Avoidance Due To Cost', async ({ page }) => {
     .click()
   await page
     .getByText(
-      'Do you have information that belongs on the Health Equity Tracker? We would love to hear from you!'
+      'Do you have information that belongs on the Health Equity Tracker? We would love to hear from you!',
     )
     .click()
 })

frontend/playwright-tests/ccb_adherence.nightly.spec.ts

@@ -2,7 +2,7 @@ import { test } from '@playwright/test'
 
 test('calcium channel blocker adherence', async ({ page }) => {
   await page.goto(
-    '/exploredata?mls=1.medicare_cardiovascular-3.00&group1=All&dt1=ccb_adherence'
+    '/exploredata?mls=1.medicare_cardiovascular-3.00&group1=All&dt1=ccb_adherence',
   )
   await page.getByText('Race and Ethnicity:').click()
   await page.locator('.MuiBackdrop-root').click()
@@ -20,7 +20,7 @@ test('calcium channel blocker adherence', async ({ page }) => {
     .getByRole('heading', { name: 'Population adherent to' })
     .click()
   await page.getByRole('heading', { name: 'Adherent beneficiary' }).click()
-  await page.getByRole('heading', { name: 'Breakdown summary for' }).click()
+  await page.getByRole('heading', { name: 'Summary for' }).click()
   await page.getByText('Share this report:').click()
   await page
     .getByText('Adherence to calcium channel blockers', { exact: true })

frontend/playwright-tests/chronic_kidney_disease.nightly.spec.ts

@@ -28,13 +28,11 @@ test('Chronic Kidney Disease', async ({ page }) => {
   await page
     .getByRole('heading', { name: 'Population vs. distribution' })
     .click()
-  await page
-    .getByRole('heading', { name: 'Breakdown summary for cases' })
-    .click()
+  await page.getByRole('heading', { name: 'Summary for cases' }).click()
   await page.getByText('Share this report:').click()
   await page
     .getByText('Cases of chronic kidney disease', { exact: true })
     .click()
   await page.getByRole('heading', { name: 'What data are missing?' }).click()
   await page.getByText('Do you have information that').click()
-})
+})

frontend/playwright-tests/copd.nightly.spec.ts

@@ -23,9 +23,7 @@ test('COPD Flow', async ({ page }) => {
   await page
     .getByRole('heading', { name: 'Population vs. distribution' })
     .click()
-  await page
-    .getByRole('heading', { name: 'Breakdown summary for COPD in' })
-    .click()
+  await page.getByRole('heading', { name: 'Summary for COPD in' }).click()
   await page.getByText('Share this report:').click()
 
   await page.getByRole('button', { name: 'Definitions & missing data' }).click()
@@ -37,7 +35,7 @@ test('COPD Flow', async ({ page }) => {
     .click()
   await page
     .getByText(
-      'Measurement Definition: Adults who reported being told by a health professional'
+      'Measurement Definition: Adults who reported being told by a health professional',
     )
     .click()
   await page.getByText('Clinical Importance: COPD is').click()

frontend/playwright-tests/covid.ci.spec.ts

@@ -16,8 +16,8 @@ test('Covid Cases', async ({ page }) => {
   await page
     .getByRole('heading', { name: 'Monthly COVID-19 cases per' })
     .click()
-  await page.getByRole('button', { name: 'Expand rates over time' }).click();
-  await page.getByRole('button', { name: 'Collapse rates over time' }).click();
+  await page.getByRole('button', { name: 'Expand rates over time' }).click()
+  await page.getByRole('button', { name: 'Collapse rates over time' }).click()
   await page
     .locator('#rate-chart')
     .getByRole('heading', { name: 'Rates of COVID-19 cases since' })
@@ -34,9 +34,7 @@ test('Covid Cases', async ({ page }) => {
   await page
     .getByRole('heading', { name: 'Population vs. distribution' })
     .click()
-  await page
-    .getByRole('heading', { name: 'Breakdown summary for COVID-' })
-    .click()
+  await page.getByRole('heading', { name: 'Summary for COVID-' }).click()
   await page.getByText('Share this report:').click()
   await page.getByText('COVID-19 cases', { exact: true }).click()
   await page.getByText('Do you have information that').click()
@@ -62,9 +60,7 @@ test('Covid Deaths', async ({ page }) => {
   await page
     .getByRole('heading', { name: 'Population vs. distribution' })
     .click()
-  await page
-    .getByRole('heading', { name: 'Breakdown summary for COVID-' })
-    .click()
+  await page.getByRole('heading', { name: 'Summary for COVID-' }).click()
   await page
     .getByRole('heading', { name: 'Age-adjusted COVID-19 deaths' })
     .click()

frontend/playwright-tests/diabetes.ci.spec.ts

@@ -23,7 +23,7 @@ test('Diabetes USA', async ({ page }) => {
   await page
     .getByRole('heading', { name: 'Population vs. distribution' })
     .click()
-  await page.getByRole('heading', { name: 'Breakdown summary for' }).click()
+  await page.getByRole('heading', { name: 'Summary for' }).click()
   await page.getByText('Share this report:').click()
   await page
     .locator('#definitionsList')
@@ -33,18 +33,36 @@ test('Diabetes USA', async ({ page }) => {
 })
 
 test('Diabetes County', async ({ page }) => {
-  await page.goto('/exploredata?mls=1.diabetes-3.08031&group1=All');
-  await page.locator('#rate-map').getByRole('heading', { name: 'Diabetes in Denver County,' }).click();
-  await page.locator('#rate-map').getByRole('heading', { name: 'Ages 18+' }).click();
-  await page.getByLabel('Legend for rate map').getByRole('img').click();
-  await page.locator('li').filter({ hasText: 'Denver County' }).click();
-  await page.getByRole('heading', { name: 'Graph unavailable: Data in' }).click();
-  await page.locator('#rate-chart').getByRole('heading', { name: 'Diabetes in Denver County,' }).click();
-  await page.locator('#rate-chart').getByRole('heading', { name: 'Ages 18+' }).click();
-  await page.locator('#rate-chart').getByText('Sources: County Health').click();
-  await page.getByRole('combobox', { name: 'Demographic Race/ethnicity' }).click();
-  await page.locator('#menu- div').first().click();
-  await page.getByRole('combobox', { name: 'Demographic Race/ethnicity' }).click();
-  await page.getByLabel('Age unavailable at the county').click();
-  await page.getByLabel('Sex unavailable at the county').click();
-});
+  await page.goto('/exploredata?mls=1.diabetes-3.08031&group1=All')
+  await page
+    .locator('#rate-map')
+    .getByRole('heading', { name: 'Diabetes in Denver County,' })
+    .click()
+  await page
+    .locator('#rate-map')
+    .getByRole('heading', { name: 'Ages 18+' })
+    .click()
+  await page.getByLabel('Legend for rate map').getByRole('img').click()
+  await page.locator('li').filter({ hasText: 'Denver County' }).click()
+  await page
+    .getByRole('heading', { name: 'Graph unavailable: Data in' })
+    .click()
+  await page
+    .locator('#rate-chart')
+    .getByRole('heading', { name: 'Diabetes in Denver County,' })
+    .click()
+  await page
+    .locator('#rate-chart')
+    .getByRole('heading', { name: 'Ages 18+' })
+    .click()
+  await page.locator('#rate-chart').getByText('Sources: County Health').click()
+  await page
+    .getByRole('combobox', { name: 'Demographic Race/ethnicity' })
+    .click()
+  await page.locator('#menu- div').first().click()
+  await page
+    .getByRole('combobox', { name: 'Demographic Race/ethnicity' })
+    .click()
+  await page.getByLabel('Age unavailable at the county').click()
+  await page.getByLabel('Sex unavailable at the county').click()
+})