FRONTEND: tweaks (#3671)

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

- fixes multi map title (removes misleading subtitle)
- adds `(NH)` to black men report subtitle
- add more descriptive link text for missing data per lighthouse

## Has this been tested? How?

passing


## Types of changes

(leave all that apply)

- Bug fix


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

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

@@ -12,11 +12,11 @@ test('Black Men Homicide Test: Top Half of Cards', async ({ page }) => {
     .click()
   await page
     .locator('#rate-map')
-    .getByRole('heading', { name: 'Black Men' })
+    .getByRole('heading', { name: 'Black (NH) Men' })
     .click()
   await page
     .locator('li')
-    .filter({ hasText: 'Total population of Black Men' })
+    .filter({ hasText: 'Total population of Black (NH) Men' })
     .click()
   await page
     .getByRole('heading', {
@@ -25,7 +25,7 @@ test('Black Men Homicide Test: Top Half of Cards', async ({ page }) => {
     .click()
   await page
     .locator('#rates-over-time')
-    .getByRole('heading', { name: 'Black Men' })
+    .getByRole('heading', { name: 'Black (NH) Men' })
     .click()
 })
 
@@ -40,7 +40,7 @@ test('Black Men Homicide Test: Bottom Half of Cards', async ({ page }) => {
     .click()
   await page
     .locator('#rate-chart')
-    .getByRole('heading', { name: 'Black Men' })
+    .getByRole('heading', { name: 'Black (NH) Men' })
     .click()
   await page
     .getByRole('button', { name: 'Inequities over time', exact: true })
@@ -50,7 +50,7 @@ test('Black Men Homicide Test: Bottom Half of Cards', async ({ page }) => {
     .click()
   await page
     .locator('#inequities-over-time')
-    .getByRole('heading', { name: 'Black Men' })
+    .getByRole('heading', { name: 'Black (NH) Men' })
     .click()
   await page
     .locator('#inequities-over-time')
@@ -61,7 +61,7 @@ test('Black Men Homicide Test: Bottom Half of Cards', async ({ page }) => {
     .click()
   await page
     .locator('#population-vs-distribution')
-    .getByRole('heading', { name: 'Black Men' })
+    .getByRole('heading', { name: 'Black (NH) Men' })
     .click()
   await page.getByLabel('Comparison bar chart showing').getByRole('img').click()
   await page.getByRole('button', { name: 'Data table' }).click()

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

@@ -3,21 +3,27 @@ import { test } from '@playwright/test'
 test('Prison by Race', async ({ page }) => {
   await page.goto('/exploredata?mls=1.incarceration-3.00&group1=All')
   await page
-    .getByLabel(
-      'Launch multiple maps view with side-by-side maps of each race and ethnicity group'
-    )
+    .locator('#rate-map')
+    .getByRole('heading', { name: 'Prison incarceration in the' })
     .click()
-  await page.getByRole('button', { name: 'Close' }).click()
-  await page.getByLabel('open the topic info modal').click()
-  await page.getByRole('heading', { name: 'People in prison' }).click()
+  await page.getByLabel('Click for more info on people').click()
   await page.getByLabel('close topic info modal').click()
+  await page.locator('li').filter({ hasText: 'United States' }).click()
+  await page
+    .getByRole('heading', { name: 'Graph unavailable: Rates of' })
+    .click()
+  await page.getByText('Our data sources do not have').click()
   await page
     .locator('#rate-chart')
-    .getByText(
-      '3,232 children confined in adult facilities in the United States. Learn more.'
-    )
+    .getByRole('heading', { name: 'Prison incarceration in the' })
     .click()
-
+  await page.locator('#rate-chart').getByText('children').click()
+  await page.getByRole('button', { name: 'Unknown demographic map' }).click()
+  await page
+    .locator('#unknown-demographic-map')
+    .getByText('0.4% of prison pop. reported')
+    .click()
+  await page.getByRole('button', { name: 'Data table' }).click()
   await page.getByRole('columnheader', { name: 'Race and Ethnicity' }).click()
   await page.getByRole('button', { name: 'Prison', exact: true }).click()
   await page.getByRole('button', { name: 'Jail' }).click()
@@ -34,6 +40,8 @@ test('Jail by Age', async ({ page }) => {
   await page.getByLabel('Click for more info on people in jail').click()
   await page.getByRole('heading', { name: 'People in jail' }).click()
   await page.getByLabel('close topic info modal').click()
+  await page.getByRole('button', { name: 'Data table' }).click()
+
   await page.getByRole('columnheader', { name: 'Age' }).click()
   await page
     .getByRole('columnheader', { name: 'People in jail per 100k' })

frontend/src/cards/ui/MultiMapDialog.tsx

@@ -164,7 +164,6 @@ export default function MultiMapDialog(props: MultiMapDialogProps) {
               id='modalTitle'
             >
               {title}
-              {props?.subtitle && ` (${props.subtitle})`}
             </h2>
           </div>
 

frontend/src/data/config/MetricConfigCommunitySafety.ts

@@ -367,6 +367,6 @@ export const GUN_DEATHS_BLACK_MEN_METRICS: DataTypeConfig[] = [
         },
       },
     },
-    otherSubPopulationLabel: 'Black Men',
+    otherSubPopulationLabel: 'Black (NH) Men',
   },
 ]

frontend/src/reports/ui/Banner.tsx

@@ -57,7 +57,7 @@ const Banner: React.FC = () => {
           </p>
           <HetTextArrowLink
             link={`${METHODOLOGY_PAGE_LINK}/limitations#missing-data`}
-            linkText='Learn more'
+            linkText='Learn more about the data limitations'
             containerClassName='block md:mx-2 md:my-0 mx-0 my-4'
             linkClassName='text-black'
           />