Legend fix (#2149)

Fixes incorrectly displayed ranges in legend and loss of choropleth map on state-level views with county-level data.
SatcherInstitute · Apr 26, 2023 · 094a7cd · 094a7cd
1 parent c7a20a7
commit 094a7cd
Show file tree

Hide file tree

Showing 12 changed files with 158 additions and 127 deletions.
diff --git a/frontend/src/cards/MapCard.tsx b/frontend/src/cards/MapCard.tsx
@@ -58,7 +58,6 @@ import { useLocation } from 'react-router-dom'
 import { type ScrollableHashId } from '../utils/hooks/useStepObserver'
 import { useCreateChartTitle } from '../utils/hooks/useCreateChartTitle'
 import { HIV_DETERMINANTS } from '../data/variables/HivProvider'
-import CountyUnavailableAlert from './ui/CountyUnavailableAlert'
 import { useState } from 'react'
 import { RATE_MAP_SCALE } from '../charts/mapHelpers'
 import { Legend } from '../charts/Legend'
@@ -159,7 +158,7 @@ function MapCardWithKey(props: MapCardProps) {
   // Population count
   const popBreakdown = Breakdowns.forFips(props.fips)
   const popQuery = new MetricQuery(
-    /* MetricId(s) */ ['population'],
+    /* MetricId(s) */['population'],
     /* Breakdowns */ popBreakdown
   )
   queries.push(popQuery)
@@ -169,7 +168,7 @@ function MapCardWithKey(props: MapCardProps) {
     const sviBreakdowns = Breakdowns.byCounty()
     sviBreakdowns.filterFips = props.fips
     const sviQuery = new MetricQuery(
-      /* MetricId(s) */ ['svi'],
+      /* MetricId(s) */['svi'],
       /* Breakdowns */ sviBreakdowns
     )
     queries.push(sviQuery)
@@ -216,6 +215,8 @@ function MapCardWithKey(props: MapCardProps) {
   const isCompareMode = window.location.href.includes('compare')
   const mapIsWide = !pageIsSmall && !isCompareMode
 
+  const fipsTypeDisplayName = props.fips.getFipsTypeDisplayName()
+
   return (
     <CardWrapper
       downloadTitle={filename}
@@ -301,6 +302,10 @@ function MapCardWithKey(props: MapCardProps) {
         const hideGroupDropdown =
           Object.values(filterOptions).toString() === ALL
 
+        const legendData = listExpanded
+          ? highestValues.concat(lowestValues)
+          : dataForActiveBreakdownFilter
+
         return (
           <>
             <MultiMapDialog
@@ -453,15 +458,13 @@ function MapCardWithKey(props: MapCardProps) {
                       <Legend
                         metric={metricConfig}
                         legendTitle={metricConfig.shortLabel}
-                        legendData={
-                          listExpanded
-                            ? highestValues.concat(lowestValues)
-                            : dataForActiveBreakdownFilter
-                        }
+                        legendData={legendData}
                         scaleType={RATE_MAP_SCALE}
                         sameDotSize={true}
                         direction={mapIsWide ? 'vertical' : 'horizontal'}
                         description={'Legend for rate map'}
+                        hasSelfButNotChildGeoData={hasSelfButNotChildGeoData || props.fips.isCounty()}
+                        fipsTypeDisplayName={fipsTypeDisplayName}
                       />
                     </Grid>
 
@@ -528,17 +531,17 @@ function MapCardWithKey(props: MapCardProps) {
 
                 {(mapQueryResponse.dataIsMissing() ||
                   dataForActiveBreakdownFilter.length === 0) && (
-                  <CardContent>
-                    <MissingDataAlert
-                      dataName={dataName}
-                      breakdownString={
-                        BREAKDOWN_VAR_DISPLAY_NAMES[props.currentBreakdown]
-                      }
-                      isMapCard={true}
-                      fips={props.fips}
-                    />
-                  </CardContent>
-                )}
+                    <CardContent>
+                      <MissingDataAlert
+                        dataName={dataName}
+                        breakdownString={
+                          BREAKDOWN_VAR_DISPLAY_NAMES[props.currentBreakdown]
+                        }
+                        isMapCard={true}
+                        fips={props.fips}
+                      />
+                    </CardContent>
+                  )}
 
                 {!mapQueryResponse.dataIsMissing() &&
                   dataForActiveBreakdownFilter.length === 0 &&
@@ -560,14 +563,6 @@ function MapCardWithKey(props: MapCardProps) {
                       </Alert>
                     </CardContent>
                   )}
-
-                {hasSelfButNotChildGeoData && (
-                  <CountyUnavailableAlert
-                    variableFullDisplayName={
-                      props.variableConfig.variableFullDisplayName
-                    }
-                  />
-                )}
               </div>
             )}
           </>

diff --git a/frontend/src/cards/ShareTrendsChartCard.tsx b/frontend/src/cards/ShareTrendsChartCard.tsx
@@ -156,12 +156,15 @@ export function ShareTrendsChartCard(props: ShareTrendsChartCardProps) {
 
         const hasUnknowns = hasNonZeroUnknowns(nestedUnknowns)
 
+        const shouldShowMissingData: boolean =
+          queryResponseInequity.shouldShowMissingDataMessage([
+            metricConfigInequitable.metricId,
+          ]) || nestedInequityData.length === 0
+
         return (
           <>
             <CardContent>
-              {queryResponseInequity.shouldShowMissingDataMessage([
-                metricConfigInequitable.metricId,
-              ]) || nestedInequityData.length === 0 ? (
+              {shouldShowMissingData ? (
                 <>
                   <MissingDataAlert
                     dataName={dataName}
@@ -222,19 +225,20 @@ export function ShareTrendsChartCard(props: ShareTrendsChartCardProps) {
                 </>
               )}
             </CardContent>
-            <CardContent>
-              <Alert severity="info" role="note">
-                This chart visualizes the disproportionate share of a condition
-                experienced by group, compared with that group's share of the
-                entire population (when many groups are present we default to
-                showing only the highest and lowest historical averages). Read
-                more about this calculation in our{' '}
-                <HashLink to={`${METHODOLOGY_TAB_LINK}#metrics`}>
-                  methodology
-                </HashLink>
-                .
-              </Alert>
-            </CardContent>
+            {!shouldShowMissingData && (
+              <CardContent>
+                <Alert severity="info" role="note">
+                  This chart graph visualizes the disproportionate share of{' '}
+                  {props.variableConfig.variableFullDisplayName} as experienced
+                  by different demographic groups compared to their relative
+                  shares. Read more about this calculation in our{' '}
+                  <HashLink to={`${METHODOLOGY_TAB_LINK}#metrics`}>
+                    methodology
+                  </HashLink>
+                  .
+                </Alert>
+              </CardContent>
+            )}
           </>
         )
       }}

diff --git a/frontend/src/cards/ui/CountyUnavailableAlert.tsx b/frontend/src/cards/ui/CountyUnavailableAlert.tsx
diff --git a/frontend/src/cards/ui/MultiMapDialog.tsx b/frontend/src/cards/ui/MultiMapDialog.tsx
@@ -137,7 +137,7 @@ export function MultiMapDialog(props: MultiMapDialogProps) {
                   <ChoroplethMap
                     key={breakdownValue}
                     signalListeners={{
-                      click: (...args: any) => {},
+                      click: (...args: any) => { },
                     }}
                     metric={props.metricConfig}
                     legendData={props.data}
@@ -151,25 +151,24 @@ export function MultiMapDialog(props: MultiMapDialogProps) {
                     hideActions={true}
                     scaleType={RATE_MAP_SCALE}
                     geoData={props.geoData}
-                    filename={`${props.metricConfig.chartTitleLines.join(' ')}${
-                      breakdownValue === 'All' ? '' : ` for ${breakdownValue}`
-                    } in ${props.fips.getSentenceDisplayName()}`}
+                    filename={`${props.metricConfig.chartTitleLines.join(' ')}${breakdownValue === 'All' ? '' : ` for ${breakdownValue}`
+                      } in ${props.fips.getSentenceDisplayName()}`}
                     countColsToAdd={props.countColsToAdd}
                   />
                 )}
 
                 {/* TERRITORIES (IF NATIONAL VIEW) */}
                 {props.metricConfig &&
-                props.fips.isUsa() &&
-                dataForValue.length ? (
+                  props.fips.isUsa() &&
+                  dataForValue.length ? (
                   <Grid container>
                     {TERRITORY_CODES.map((code) => {
                       const fips = new Fips(code)
                       return (
                         <Grid item xs={4} sm={2} key={code}>
                           <ChoroplethMap
                             signalListeners={{
-                              click: (...args: any) => {},
+                              click: (...args: any) => { },
                             }}
                             metric={props.metricConfig}
                             legendData={props.data}

diff --git a/frontend/src/cards/ui/Sources.tsx b/frontend/src/cards/ui/Sources.tsx
@@ -148,7 +148,7 @@ export function Sources(props: SourcesProps) {
         <Grid item xs={8} sm={9} md={10} container alignItems={'center'}>
           <div>
             {sourcesInfo}
-            {showNhFootnote && <p>(NH) Non-Hispanic. </p>}
+            {showNhFootnote && <p>Note. NH: Non-Hispanic. </p>}
           </div>
         </Grid>
         <Grid

diff --git a/frontend/src/charts/ChoroplethMap.tsx b/frontend/src/charts/ChoroplethMap.tsx
@@ -39,6 +39,7 @@ import {
   ZERO_YELLOW_SCALE,
 } from './mapHelpers'
 import { CAWP_DETERMINANTS } from '../data/variables/CawpProvider'
+import { HIV_DETERMINANTS } from '../data/variables/HivProvider'
 
 const {
   unknownGrey: UNKNOWN_GREY,
@@ -105,6 +106,8 @@ export function ChoroplethMap(props: ChoroplethMapProps) {
   ).size
 
   const isCawp = CAWP_DETERMINANTS.includes(props.metric.metricId)
+  const isHiv = HIV_DETERMINANTS.includes(props.metric.metricId)
+  const containsDistinctZeros = isCawp || isHiv
 
   // render Vega map async as it can be slow
   const [shouldRenderMap, setShouldRenderMap] = useState(false)
@@ -146,7 +149,7 @@ export function ChoroplethMap(props: ChoroplethMapProps) {
       },
     ]
     // Null SVI was showing
-    if (!isCawp && !props.listExpanded) {
+    if (!containsDistinctZeros && !props.listExpanded) {
       geoTransformers[0].values.push('rating')
     }
     if (props.overrideShapeWithCircle) {
@@ -251,7 +254,8 @@ export function ChoroplethMap(props: ChoroplethMapProps) {
     const helperLegend = getHelperLegend(
       /* yOffset */ yOffsetNoDataLegend,
       /* xOffset */ xOffsetNoDataLegend,
-      /* overrideGrayMissingWithZeroYellow */ isCawp && !props.listExpanded
+      /* overrideGrayMissingWithZeroYellow */ containsDistinctZeros &&
+        !props.listExpanded
     )
     if (!props.hideLegend) {
       legendList.push(legend, helperLegend)
@@ -273,7 +277,7 @@ export function ChoroplethMap(props: ChoroplethMapProps) {
     )
 
     const marks = [
-      isCawp && !props.listExpanded
+      containsDistinctZeros && !props.listExpanded
         ? createShapeMarks(
             /* datasetName= */ ZERO_DATASET,
             /* fillColor= */ { value: sass.mapMin },
@@ -303,7 +307,7 @@ export function ChoroplethMap(props: ChoroplethMapProps) {
     if (props.overrideShapeWithCircle) {
       // Visible Territory Abbreviations
       marks.push(createCircleTextMark(VALID_DATASET))
-      isCawp && !props.listExpanded
+      containsDistinctZeros && !props.listExpanded
         ? marks.push(createCircleTextMark(ZERO_DATASET))
         : marks.push(createCircleTextMark(MISSING_DATASET))
     } else {
@@ -339,7 +343,7 @@ export function ChoroplethMap(props: ChoroplethMapProps) {
             // only use the nonZero subset if viewing high low lists, viewing CAWP,
             // or viewing multimap with some groups having only one non-zero value
             props.listExpanded ??
-            !isCawp ??
+            !containsDistinctZeros ??
             (numUniqueNonZeroValues <= 1 && !props.hideLegend)
               ? props.data
               : nonZeroData,
@@ -452,6 +456,7 @@ export function ChoroplethMap(props: ChoroplethMapProps) {
     }, 0)
   }, [
     isCawp,
+    isHiv,
     width,
     props.metric,
     props.legendTitle,