Merge branch 'main' of https://github.com/SatcherInstitute/health-equ…

…ity-tracker

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

@@ -12,7 +12,7 @@ test('Excessive Drinking Flow', async ({ page }) => {
   await page.getByRole('heading', { name: 'Lowest:' }).click()
   await page.getByRole('heading', { name: 'National overall:' }).click()
   await page
-    .locator('#highest-lowest-geos')
+    .locator('#extremes')
     .getByText('Excessive drinking cases')
     .click()
   await page.getByText('Consider the possible impact').click()

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

@@ -83,4 +83,34 @@ test('Use Table of Contents to Scroll Unknown Map Into View and Be Focused', asy
 	await expect(unknownMapCard).toBeFocused();
 	await expect(unknownMapCard).toBeVisible();
 
+});
+
+
+
+
+test('Including the Extremes Mode Param in URL should load report with Extremes Mode Enabled', async ({ page }) => {
+
+	await page.goto('/exploredata?mls=1.incarceration-3.00&mlp=disparity&dt1=hiv_prevalence&extremes=true', { waitUntil: "commit" });
+  await page.getByRole('heading', { name: '(only states/territories with' }).click();
+  await page.getByRole('heading', { name: 'Highest:' }).click();
+  await page.getByRole('heading', { name: 'Lowest:' }).click();
+  await page.getByRole('button', { name: 'Reset to show all states/territories' }).click();
+  await page.getByRole('button', { name: 'Expand state/territory rate' }).click();
+});
+
+
+
+
+test('Extremes Mode Param in URL should work for both sides of Compare mode report', async ({ page }) => {
+
+	await page.goto('exploredata?mls=1.hiv-3.00-5.13&mlp=comparegeos&dt1=hiv_prevalence&extremes2=true', { waitUntil: "commit" });
+
+	// map 1 in normal mode to start
+	await page.locator('#rate-map').getByRole('heading', { name: 'Ages 13+' }).click();
+  await page.locator('#rate-map').getByRole('button', { name: 'Expand state/territory rate' }).click();
+
+	// map 2 in extremes mode to start
+  await page.locator('#rate-map2').getByRole('heading', { name: 'Ages 13+ (only counties with' }).click();
+  await page.locator('#rate-map2').getByRole('button', { name: 'Reset to show all counties' }).click();
+  await page.locator('#rate-map2').getByRole('heading', { name: 'Ages 13+' }).click();
 });

frontend/src/cards/ChartTitle.tsx

@@ -1,6 +1,7 @@
 interface ChartTitleProps {
   title: string
   subtitle?: string
+  filterButton?: React.ReactNode
 }
 
 export default function ChartTitle(props: ChartTitleProps) {
@@ -12,6 +13,7 @@ export default function ChartTitle(props: ChartTitleProps) {
           {props.subtitle}
         </h4>
       )}
+      {props.filterButton}
     </div>
   )
 }

frontend/src/cards/MapCard.tsx

@@ -34,7 +34,7 @@ import {
 import { CAWP_METRICS } from '../data/providers/CawpProvider'
 import CardWrapper from './CardWrapper'
 import DropDownMenu from './ui/DropDownMenu'
-import { HighestLowestGeosList } from './ui/HighestLowestGeosList'
+import { ExtremesListBox } from './ui/ExtremesListBox'
 import MissingDataAlert from './ui/MissingDataAlert'
 import MultiMapDialog from './ui/MultiMapDialog'
 import { findVerboseRating } from './ui/SviAlert'
@@ -52,8 +52,8 @@ import GeoContext, {
 import TerritoryCircles from './ui/TerritoryCircles'
 import { GridView } from '@mui/icons-material'
 import {
-  HIGHEST_LOWEST_GEOS_1_PARAM_KEY,
-  HIGHEST_LOWEST_GEOS_2_PARAM_KEY,
+  EXTREMES_1_PARAM_KEY,
+  EXTREMES_2_PARAM_KEY,
   MAP1_GROUP_PARAM,
   MAP2_GROUP_PARAM,
   MULTIPLE_MAPS_1_PARAM_KEY,
@@ -77,6 +77,7 @@ import { dataSourceMetadataMap } from '../data/config/MetadataMap'
 import { DatasetId } from '../data/config/DatasetMetadata'
 import HetNotice from '../styles/HetComponents/HetNotice'
 import HetTerm from '../styles/HetComponents/HetTerm'
+import HetCloseButton from '../styles/HetComponents/HetCloseButton'
 
 const SIZE_OF_HIGHEST_LOWEST_GEOS_RATES_LIST = 5
 const HASH_ID: ScrollableHashId = 'rate-map'
@@ -116,15 +117,12 @@ function MapCardWithKey(props: MapCardProps) {
   // HOOKS MUST NOT BE CALLED CONDITIONALLY.
   const preloadHeight = useGuessPreloadHeight([750, 1050])
   const location = useLocation()
-  const highestLowestGeosParamKey = props.isCompareCard
-    ? HIGHEST_LOWEST_GEOS_2_PARAM_KEY
-    : HIGHEST_LOWEST_GEOS_1_PARAM_KEY
-
-  const [highestLowestGeosMode, setHighestLowestGeosMode] =
-    useParamState<boolean>(highestLowestGeosParamKey, false)
-  useEffect(() => {
-    setHighestLowestGeosMode(false)
-  }, [props.reportTitle, props.trackerMode])
+  const extremesParamsKey = props.isCompareCard
+    ? EXTREMES_2_PARAM_KEY
+    : EXTREMES_1_PARAM_KEY
+
+  const [extremesMode, setExtremesMode] =
+    useParamState<boolean>(extremesParamsKey, false)
   const MULTIMAP_PARAM_KEY = props.isCompareCard
     ? MULTIPLE_MAPS_2_PARAM_KEY
     : MULTIPLE_MAPS_1_PARAM_KEY
@@ -258,9 +256,9 @@ function MapCardWithKey(props: MapCardProps) {
     demographicType,
     props.dataTypeConfig
   )
-  if (highestLowestGeosMode)
-    subtitle += ` (only ${props.fips.getPluralChildFipsTypeDisplayName() ?? 'places'
-      } with highest/lowest rates)`
+  const pluralChildFips = props.fips.getPluralChildFipsTypeDisplayName() ?? 'places'
+  if (extremesMode)
+    subtitle += ` (only ${pluralChildFips} with rate extremes)`
   const filename = `${title} ${subtitle ? `for ${subtitle}` : ''}`
 
   function handleScaleChange(domain: number[], range: number[]) {
@@ -277,7 +275,7 @@ function MapCardWithKey(props: MapCardProps) {
       scrollToHash={HASH_ID}
       reportTitle={props.reportTitle}
       elementsToHide={elementsToHide}
-      expanded={highestLowestGeosMode}
+      expanded={extremesMode}
       isCompareCard={props.isCompareCard}
     >
       {(queryResponses, metadata, geoData) => {
@@ -396,7 +394,7 @@ function MapCardWithKey(props: MapCardProps) {
           setParameter(MAP_GROUP_PARAM, groupCode)
         }
 
-        const displayData = highestLowestGeosMode
+        const displayData = extremesMode
           ? highestValues.concat(lowestValues)
           : dataForActiveDemographicGroup
 
@@ -407,7 +405,7 @@ function MapCardWithKey(props: MapCardProps) {
         if (isSummaryLegend) mapConfig.min = mapConfig.mid
 
         if (dataForActiveDemographicGroup?.length <= 1)
-          setHighestLowestGeosMode(false)
+          setExtremesMode(false)
 
         if (!dataForActiveDemographicGroup?.length || !metricConfig)
           return (
@@ -512,7 +510,7 @@ function MapCardWithKey(props: MapCardProps) {
             <div className='pt-0'>
               <div className='flex flex-wrap'>
                 <div className='w-full'>
-                  <ChartTitle title={title} subtitle={subtitle} />
+                  <ChartTitle title={title} subtitle={subtitle} filterButton={extremesMode ?<HetLinkButton buttonClassName='py-0 mx-0' onClick={() => setExtremesMode(false)} >Reset to show all {pluralChildFips}</HetLinkButton> : null} />
                 </div>
 
                 <div className={mapIsWide ? 'sm:w-8/12 md:w-9/12' : 'w-full'}>
@@ -530,10 +528,10 @@ function MapCardWithKey(props: MapCardProps) {
                       fips={props.fips}
                       geoData={geoData}
                       hideLegend={true}
-                      hideMissingDataTooltip={highestLowestGeosMode}
+                      hideMissingDataTooltip={extremesMode}
                       legendData={dataForActiveDemographicGroup}
                       legendTitle={metricConfig.shortLabel.toLowerCase()}
-                      highestLowestGeosMode={highestLowestGeosMode}
+                      extremesMode={extremesMode}
                       metric={metricConfig}
                       showCounties={
                         !props.fips.isUsa() && !hasSelfButNotChildGeoData
@@ -554,7 +552,7 @@ function MapCardWithKey(props: MapCardProps) {
                         data={displayData}
                         fullData={mapQueryResponse.data}
                         geoData={geoData}
-                        highestLowestGeosMode={highestLowestGeosMode}
+                        extremesMode={extremesMode}
                         highestLowestGroupsByFips={highestLowestGroupsByFips}
                         mapIsWide={mapIsWide}
                         metricConfig={metricConfig}
@@ -602,18 +600,18 @@ function MapCardWithKey(props: MapCardProps) {
               <div
                 id={
                   props.isCompareCard
-                    ? HIGHEST_LOWEST_GEOS_2_PARAM_KEY
-                    : HIGHEST_LOWEST_GEOS_1_PARAM_KEY
+                    ? EXTREMES_2_PARAM_KEY
+                    : EXTREMES_1_PARAM_KEY
                 }
               >
                 {!mapQueryResponse.dataIsMissing() &&
                   dataForActiveDemographicGroup.length > 1 && (
-                    <HighestLowestGeosList
+                    <ExtremesListBox
                       dataTypeConfig={props.dataTypeConfig}
                       selectedRaceSuffix={selectedRaceSuffix}
                       metricConfig={metricConfig}
-                      isOpen={highestLowestGeosMode}
-                      setIsOpen={setHighestLowestGeosMode}
+                      isOpen={extremesMode}
+                      setIsOpen={setExtremesMode}
                       highestValues={highestValues}
                       lowestValues={lowestValues}
                       parentGeoQueryResponse={parentGeoQueryResponse}

frontend/src/cards/UnknownsMapCard.tsx

@@ -227,7 +227,7 @@ function UnknownsMapCardWithKey(props: UnknownsMapCardProps) {
                   geoData={geoData}
                   filename={chartTitle}
                   mapConfig={unknownMapConfig}
-                  highestLowestGeosMode={false}
+                  extremesMode={false}
                 />
                 {props.fips.isUsa() && unknowns.length > 0 && (
                   <TerritoryCircles
@@ -241,7 +241,7 @@ function UnknownsMapCardWithKey(props: UnknownsMapCardProps) {
                     signalListeners={signalListeners}
                     geoData={geoData}
                     isUnknownsMap={true}
-                    highestLowestGeosMode={false}
+                    extremesMode={false}
                   />
                 )}
               </div>

frontend/src/cards/ui/HighestLowestGeosList.tsx → frontend/src/cards/ui/ExtremesListBox.tsx

@@ -16,7 +16,7 @@ import HetUnitLabel from '../../styles/HetComponents/HetUnitLabel'
 import HetTerm from '../../styles/HetComponents/HetTerm'
 import HetExpandableBoxButton from '../../styles/HetComponents/HetExpandableBoxButton'
 
-interface HighestLowestGeosListProps {
+interface ExtremesListBoxProps {
   // MetricConfig for data
   metricConfig: MetricConfig
   // DataTypeConfig for data
@@ -42,7 +42,7 @@ interface HighestLowestGeosListProps {
 /*
    Collapsible box showing lists of geographies with the highest and lowest rates
 */
-export function HighestLowestGeosList(props: HighestLowestGeosListProps) {
+export function ExtremesListBox(props: ExtremesListBoxProps) {
   const placesType = props.fips.getChildFipsTypeDisplayName()
   const { type: metricType } = props.metricConfig
 

frontend/src/cards/ui/MultiMapDialog.tsx

@@ -36,7 +36,6 @@ import { type CountColsMap, RATE_MAP_SCALE } from '../../charts/mapGlobals'
 import CardOptionsMenu from './CardOptionsMenu'
 import { type ScrollableHashId } from '../../utils/hooks/useStepObserver'
 import { Sources } from './Sources'
-import CloseIcon from '@mui/icons-material/Close'
 import DataTypeDefinitionsList from '../../pages/ui/DataTypeDefinitionsList'
 import HetNotice from '../../styles/HetComponents/HetNotice'
 import HetTerm from '../../styles/HetComponents/HetTerm'
@@ -210,7 +209,7 @@ export default function MultiMapDialog(props: MultiMapDialogProps) {
                         mapConfig={mapConfig}
                         isMulti={true}
                         scaleConfig={scale}
-                        highestLowestGeosMode={false}
+                        extremesMode={false}
                       />
                     )}
                   </div>
@@ -231,7 +230,7 @@ export default function MultiMapDialog(props: MultiMapDialogProps) {
                         scaleConfig={scale}
                         isMulti={true}
                         activeDemographicGroup={demographicGroup}
-                        highestLowestGeosMode={false}
+                        extremesMode={false}
                       />
                     )}
                 </li>

frontend/src/cards/ui/TerritoryCircles.tsx

@@ -20,7 +20,7 @@ interface TerritoryCirclesProps {
   signalListeners: any
   metricConfig: MetricConfig
   dataTypeConfig: DataTypeConfig
-  highestLowestGeosMode: boolean
+  extremesMode: boolean
   highestLowestGroupsByFips?: Record<string, HighestLowest>
   legendData?: Array<Record<string, any>>
   geoData?: Record<string, any>
@@ -53,7 +53,7 @@ export default function TerritoryCircles(props: TerritoryCirclesProps) {
               signalListeners={props.signalListeners}
               metric={props.metricConfig}
               data={props.data}
-              hideMissingDataTooltip={props.highestLowestGeosMode}
+              hideMissingDataTooltip={props.extremesMode}
               legendData={props.legendData}
               hideLegend={true}
               showCounties={false}
@@ -65,7 +65,7 @@ export default function TerritoryCircles(props: TerritoryCirclesProps) {
               mapConfig={mapConfig}
               scaleConfig={props.scaleConfig}
               isMulti={props.isMulti}
-              highestLowestGeosMode={props.highestLowestGeosMode}
+              extremesMode={props.extremesMode}
               isPhrmaAdherence={props.isPhrmaAdherence}
             />
             <figcaption className='-mt-1 mb-1 text-center text-smallest leading-lhTight tracking-tighter'>

frontend/src/charts/ChoroplethMap.tsx

@@ -103,7 +103,7 @@ interface ChoroplethMapProps {
   titles?: {
     subtitle?: string
   }
-  highestLowestGeosMode: boolean
+  extremesMode: boolean
   countColsMap: CountColsMap
   mapConfig: MapConfig
   isSummaryLegend?: boolean
@@ -197,7 +197,7 @@ export default function ChoroplethMap(props: ChoroplethMapProps) {
     },
   ]
   // Null SVI was showing
-  if (!props.highestLowestGeosMode) {
+  if (!props.extremesMode) {
     geoTransformers[0].values.push('rating')
   }
 
@@ -314,7 +314,7 @@ export default function ChoroplethMap(props: ChoroplethMapProps) {
         /* reverse? */ !props.mapConfig.higherIsBetter && !props.isUnknownsMap
     )
 
-  if (props.highestLowestGeosMode) {
+  if (props.extremesMode) {
     colorScale.domain = props.scaleConfig?.domain
     colorScale.range = props.scaleConfig?.range
     colorScale.reverse = false
@@ -343,21 +343,21 @@ export default function ChoroplethMap(props: ChoroplethMapProps) {
       /* tooltipExpression= */ zeroTooltipValue,
       /* overrideShapeWithCircle */ props.overrideShapeWithCircle,
       /* hideMissingDataTooltip */ props.hideMissingDataTooltip,
-      /* outlineGeos */ props.highestLowestGeosMode,
+      /* outlineGeos */ props.extremesMode,
       /* is multimap */ props.isMulti,
       /* is mobile device */ isMobile
     ),
     // MISSING
     createShapeMarks(
       /* datasetName= */ MISSING_DATASET,
       /* fillColor= */ {
-        value: props.highestLowestGeosMode ? het.white : UNKNOWN_GREY,
+        value: props.extremesMode ? het.white : UNKNOWN_GREY,
       },
-      /* hoverColor= */ props.highestLowestGeosMode ? het.white : RED_ORANGE,
+      /* hoverColor= */ props.extremesMode ? het.white : RED_ORANGE,
       /* tooltipExpression= */ missingDataTooltipValue,
       /* overrideShapeWithCircle */ props.overrideShapeWithCircle,
       /* hideMissingDataTooltip */ props.hideMissingDataTooltip,
-      /* outlineGeos */ props.highestLowestGeosMode,
+      /* outlineGeos */ props.extremesMode,
       props.isMulti,
       /* is mobile device */ isMobile
     ),
@@ -369,7 +369,7 @@ export default function ChoroplethMap(props: ChoroplethMapProps) {
       /* tooltipExpression= */ tooltipValue,
       /* overrideShapeWithCircle */ props.overrideShapeWithCircle,
       /* hideMissingDataTooltip */ props.hideMissingDataTooltip,
-      /* outlineGeos */ props.highestLowestGeosMode,
+      /* outlineGeos */ props.extremesMode,
       props.isMulti,
       /* is mobile device */ isMobile
     ),

frontend/src/pages/DataCatalog/DataSourceListing.tsx

@@ -13,8 +13,6 @@ import ListItem from '@mui/material/ListItem'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import CircularProgress from '@mui/material/CircularProgress'
 import ListItemText from '@mui/material/ListItemText'
-import { IconButton } from '@mui/material'
-import CloseIcon from '@mui/icons-material/Close'
 import GetAppIcon from '@mui/icons-material/GetApp'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 
@@ -24,6 +22,7 @@ import {
 } from '../../data/config/DatasetMetadata'
 import HetNotice from '../../styles/HetComponents/HetNotice'
 import HetLinkButton from '../../styles/HetComponents/HetLinkButton'
+import HetCloseButton from '../../styles/HetComponents/HetCloseButton'
 
 export type LoadStatus = 'loading' | 'unloaded' | 'error' | 'loaded'
 
@@ -203,16 +202,7 @@ export function DataSourceListing(props: DataSourceListingProps) {
                 {props.source_metadata.data_source_name}
               </h3>
             </header>
-
-            <IconButton
-              aria-label='close dialogue'
-              onClick={() => {
-                setDialogIsOpen(false)
-              }}
-              size='large'
-            >
-              <CloseIcon />
-            </IconButton>
+            <HetCloseButton onClick={() => setDialogIsOpen(false)} ariaLabel='close dialogue' />
           </DialogTitle>
           <List>
             {props.source_metadata.dataset_ids.map((datasetId) => (